import { notFound } from 'next/navigation';
import Image from 'next/image';
import { prisma } from '@/lib/prisma';
import { Container } from '@/components/ui/container';
import { Button } from '@/components/ui/button';
import { Reveal } from '@/components/ui/reveal';
import { buildMetadata } from '@/lib/seo';
import type { Locale } from '@/i18n/config';

async function getProject(slug: string, locale: Locale) {
  const project = await prisma.project.findUnique({
    where: { slug },
    include: { translations: { where: { locale } } }
  });
  if (!project || !project.translations[0]) return null;
  return { ...project, t: project.translations[0] };
}

export async function generateMetadata({
  params: { locale, slug }
}: {
  params: { locale: Locale; slug: string };
}) {
  const project = await getProject(slug, locale);
  if (!project) return {};
  return buildMetadata({
    locale,
    path: `/projects/${slug}`,
    title: project.t.title,
    description: project.t.summary,
    image: project.images[0]
  });
}

export default async function ProjectDetailPage({
  params: { locale, slug }
}: {
  params: { locale: Locale; slug: string };
}) {
  const project = await getProject(slug, locale);
  if (!project) notFound();

  return (
    <>
      {project.images[0] && (
        <div className="relative h-64 w-full sm:h-96">
          <Image src={project.images[0]} alt={project.t.title} fill className="object-cover" />
        </div>
      )}
      <Container className="py-16">
        <Reveal variant="up">
          <h1 className="font-display text-3xl font-semibold sm:text-4xl">{project.t.title}</h1>
        </Reveal>
        <Reveal variant="up" delay={80}>
          <dl className="mt-4 flex flex-wrap gap-x-8 gap-y-2 text-sm text-graphite-900/60">
          {project.location && (
            <div className="flex gap-1.5">
              <dt className="font-medium">
                {locale === 'ar' ? 'الموقع' : 'Localisation'}:
              </dt>
              <dd>{project.location}</dd>
            </div>
          )}
          {project.installationType && (
            <div className="flex gap-1.5">
              <dt className="font-medium">{locale === 'ar' ? 'النوع' : 'Type'}:</dt>
              <dd>{project.installationType}</dd>
            </div>
          )}
          {project.systemSizeKwc && (
            <div className="flex gap-1.5">
              <dt className="font-medium">{locale === 'ar' ? 'القدرة' : 'Puissance'}:</dt>
              <dd>{Number(project.systemSizeKwc)} kWc</dd>
            </div>
          )}
        </dl>
        </Reveal>

        <Reveal variant="up" delay={140}>
          <p className="mt-8 max-w-2xl text-lg text-graphite-900/70">{project.t.summary}</p>
        </Reveal>

        {project.t.description && (
          <div className="prose prose-graphite mt-6 max-w-2xl whitespace-pre-line text-graphite-900/80">
            {project.t.description}
          </div>
        )}

        {/* Results are only ever shown if explicitly provided and verified — see schema comment */}
        {project.t.results && (
          <div className="mt-8 rounded-2xl bg-graphite-900/5 p-6">
            <p className="text-sm font-semibold uppercase tracking-wide text-volt-600">
              {locale === 'ar' ? 'النتائج' : 'Résultats'}
            </p>
            <p className="mt-2 text-graphite-900/80">{project.t.results}</p>
          </div>
        )}

        {project.images.length > 1 && (
          <div className="mt-10 grid gap-4 sm:grid-cols-2">
            {project.images.slice(1).map((img, i) => (
              <div key={i} className="relative aspect-[4/3] overflow-hidden rounded-xl">
                <Image src={img} alt="" fill className="object-cover" />
              </div>
            ))}
          </div>
        )}

        <div className="mt-14">
          <Button href={`/${locale}/devis`}>
            {locale === 'ar' ? 'اطلب مشروعاً مشابهاً' : 'Demander un projet similaire'}
          </Button>
        </div>
      </Container>
    </>
  );
}