import type { Metadata } from "next";
import Link from "next/link";
import { notFound } from "next/navigation";
import { ArrowLeft, ArrowRight, Check, ExternalLink } from "@/components/ui/icons";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Reveal } from "@/components/ui/reveal";
import { CtaPanel } from "@/components/marketing/expertise-blocks";
import { RealisationMockup } from "@/components/marketing/realisation-mockup";
import { RealisationPageSpeed } from "@/components/marketing/realisation-pagespeed";
import { JsonLdBreadcrumb } from "@/components/marketing/json-ld";
import { TYPE_LABELS } from "@/lib/realisations";
import {
  getNeighbours,
  getRealisationBySlug,
  loadRealisations,
} from "@/lib/realisations-server";

export function generateStaticParams() {
  return loadRealisations().map((r) => ({ slug: r.slug }));
}

export async function generateMetadata({
  params,
}: {
  params: Promise<{ slug: string }>;
}): Promise<Metadata> {
  const { slug } = await params;
  const r = getRealisationBySlug(slug);
  if (!r) return {};
  return {
    title: r.name,
    description: r.summary,
    openGraph: {
      title: `${r.name} · Réalisation`,
      description: r.summary,
      type: "article",
    },
  };
}

export default async function RealisationDetailPage({
  params,
}: {
  params: Promise<{ slug: string }>;
}) {
  const { slug } = await params;
  const r = getRealisationBySlug(slug);
  if (!r) notFound();
  const { prev, next } = getNeighbours(slug);

  return (
    <div className="relative overflow-hidden">

      {/* Hero */}
      <section className="relative z-10 mx-auto max-w-5xl px-4 sm:px-6 md:px-10 pt-24 pb-12 md:pt-32 md:pb-16">
        <Reveal>
          <Link
            href="/realisations"
            className="inline-flex items-center gap-1.5 text-sm text-text-muted hover:text-accent transition-colors"
          >
            <ArrowLeft className="size-3.5" />
            Toutes les réalisations
          </Link>
        </Reveal>

        <div className="mt-8 flex flex-wrap items-center gap-2">
          <Reveal>
            <Badge tone="accent">{TYPE_LABELS[r.type]}</Badge>
          </Reveal>
          <Reveal delay={80}>
            <Badge tone="muted">{r.sector}</Badge>
          </Reveal>
          <Reveal delay={160}>
            <Badge tone="muted" className="tabular-nums">
              {r.year}
            </Badge>
          </Reveal>
        </div>

        <Reveal delay={200}>
          <h1 className="font-editorial mt-6 text-4xl md:text-7xl font-medium text-text leading-[1.02] tracking-tight">
            {r.name}
          </h1>
        </Reveal>
        <Reveal delay={320}>
          <p className="mt-6 text-lg md:text-xl text-text-muted max-w-2xl leading-relaxed italic">
            {r.tagline}
          </p>
        </Reveal>
        <Reveal delay={460}>
          <div className="mt-8 flex flex-wrap items-center gap-4">
            <a href={r.url} target="_blank" rel="noopener noreferrer">
              <Button variant="primary" size="lg">
                Voir le site
                <ExternalLink className="size-4" />
              </Button>
            </a>
            <span className="text-sm text-text-faint font-mono">{r.domain}</span>
          </div>
        </Reveal>
      </section>

      {/* Mockup */}
      <section className="relative z-10 mx-auto max-w-6xl px-4 sm:px-6 md:px-10 pb-20">
        <Reveal delay={200}>
          <RealisationMockup r={r} size="hero" />
        </Reveal>
      </section>

      {/* PageSpeed Insights */}
      {r.pagespeed && (r.pagespeed.mobile || r.pagespeed.desktop) && (
        <section className="relative z-10 mx-auto max-w-5xl px-4 sm:px-6 md:px-10 pb-20">
          <Reveal>
            <RealisationPageSpeed data={r.pagespeed} />
          </Reveal>
        </section>
      )}

      {/* Le projet */}
      <section className="relative z-10 border-t border-border/60">
        <div className="mx-auto max-w-5xl px-4 sm:px-6 md:px-10 py-20 md:py-28">
          <div className="grid grid-cols-1 lg:grid-cols-12 gap-10 lg:gap-12">
            <div className="lg:col-span-5">
              <Reveal>
                <Badge tone="muted">Le projet</Badge>
              </Reveal>
              <Reveal delay={120}>
                <h2 className="font-editorial mt-5 text-3xl md:text-4xl font-medium text-text leading-tight">
                  Ce qu'il fallait{" "}
                  résoudre.
                </h2>
              </Reveal>
            </div>
            <div className="lg:col-span-7">
              <Reveal delay={200}>
                <p className="text-base md:text-lg text-text-muted leading-relaxed">{r.brief}</p>
              </Reveal>
            </div>
          </div>
        </div>
      </section>

      {/* Ce qu'on a livré */}
      <section className="relative z-10 border-t border-border/60 bg-surface/30">
        <div className="mx-auto max-w-5xl px-4 sm:px-6 md:px-10 py-20 md:py-28">
          <div className="grid grid-cols-1 lg:grid-cols-12 gap-10 lg:gap-12">
            <div className="lg:col-span-5">
              <Reveal>
                <Badge tone="muted">Livré</Badge>
              </Reveal>
              <Reveal delay={120}>
                <h2 className="font-editorial mt-5 text-3xl md:text-4xl font-medium text-text leading-tight">
                  Ce qu'on{" "}
                  a construit.
                </h2>
              </Reveal>
            </div>
            <div className="lg:col-span-7">
              <ul className="space-y-3">
                {r.delivered.map((item, i) => (
                  <Reveal key={item} delay={i * 60}>
                    <li className="flex items-start gap-3 panel p-4">
                      <Check
                        className="size-4 text-accent mt-0.5 shrink-0"
                        strokeWidth={2.4}
                      />
                      <span className="text-sm md:text-base text-text-muted leading-relaxed">
                        {item}
                      </span>
                    </li>
                  </Reveal>
                ))}
              </ul>
            </div>
          </div>
        </div>
      </section>

      {/* Highlights */}
      <section className="relative z-10 border-t border-border/60">
        <div className="mx-auto max-w-5xl px-4 sm:px-6 md:px-10 py-20">
          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
            {r.highlights.map((h, i) => (
              <Reveal key={h.label} delay={i * 80}>
                <div className="panel p-6 text-center">
                  <p className="text-micro uppercase tracking-[0.18em] text-text-faint">
                    {h.label}
                  </p>
                  <p className="font-editorial mt-3 text-2xl md:text-3xl font-medium text-text">
                    {h.value}
                  </p>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* Navigation entre projets */}
      {(prev || next) && (
        <section className="relative z-10 border-t border-border/60">
          <div className="mx-auto max-w-5xl px-4 sm:px-6 md:px-10 py-12">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              {prev && (
                <Link
                  href={`/realisations/${prev.slug}`}
                  className="group panel p-5 hover:border-accent/30 transition-colors"
                >
                  <span className="inline-flex items-center gap-1.5 text-micro uppercase tracking-[0.18em] text-text-faint">
                    <ArrowLeft className="size-3" />
                    Projet précédent
                  </span>
                  <p className="font-editorial mt-2 text-lg font-medium text-text group-hover:text-accent-hi transition-colors">
                    {prev.name}
                  </p>
                  <p className="text-xs text-text-muted mt-1">{prev.sector}</p>
                </Link>
              )}
              {next && (
                <Link
                  href={`/realisations/${next.slug}`}
                  className="group panel p-5 hover:border-accent/30 transition-colors md:text-right"
                >
                  <span className="inline-flex items-center gap-1.5 text-micro uppercase tracking-[0.18em] text-text-faint md:justify-end md:w-full">
                    Projet suivant
                    <ArrowRight className="size-3" />
                  </span>
                  <p className="font-editorial mt-2 text-lg font-medium text-text group-hover:text-accent-hi transition-colors">
                    {next.name}
                  </p>
                  <p className="text-xs text-text-muted mt-1">{next.sector}</p>
                </Link>
              )}
            </div>
          </div>
        </section>
      )}

      <CtaPanel
        title={
          <>
            Un projet{" "}
            comme celui-ci ?
          </>
        }
        text="On commence par comprendre votre activité, puis on vous envoie un premier aperçu personnalisé. Sans engagement."
      />

      <JsonLdBreadcrumb
        items={[
          { name: "Accueil", path: "/" },
          { name: "Réalisations", path: "/realisations" },
          { name: r.name, path: `/realisations/${r.slug}` },
        ]}
      />
    </div>
  );
}