import type { Metadata } from "next";
import Image from "next/image";
import Link from "next/link";
import { notFound } from "next/navigation";
import { CalendarDays, CheckCircle2, MessageCircle } from "lucide-react";
import { BeforeAfterSection } from "@/components/sections/BeforeAfterSection";
import { CTASection } from "@/components/sections/CTASection";
import { ProjectGallery } from "@/components/sections/ProjectGallery";
import { LuxuryButton } from "@/components/ui/LuxuryButton";
import { SectionHeader } from "@/components/ui/SectionHeader";
import { buildWhatsAppUrl, getProjectBySlug, projects } from "@/data/content";

type ProjectPageProps = {
  params: Promise<{ slug: string }>;
};

export function generateStaticParams() {
  return projects.map((project) => ({ slug: project.slug }));
}

export async function generateMetadata({
  params,
}: ProjectPageProps): Promise<Metadata> {
  const { slug } = await params;
  const project = getProjectBySlug(slug);

  if (!project) {
    return {
      title: "Project",
    };
  }

  return {
    title: project.name,
    description: `${project.name} by Aureva Studio in ${project.location}. ${project.area} ${project.style} project with ${project.scope.join(", ")}.`,
    openGraph: {
      title: `${project.name} | Aureva Studio`,
      description: project.description,
      images: [
        {
          url: project.heroImage,
          width: 1200,
          height: 800,
          alt: `${project.name} project by Aureva Studio`,
        },
      ],
    },
  };
}

export default async function ProjectDetailPage({ params }: ProjectPageProps) {
  const { slug } = await params;
  const project = getProjectBySlug(slug);

  if (!project) notFound();

  return (
    <>
      <section className="relative min-h-[82svh] overflow-hidden bg-soft-black pt-32 text-warm-white">
        <Image
          src={project.heroImage}
          alt={`${project.name} luxury interior project hero`}
          fill
          priority
          sizes="100vw"
          className="object-cover"
        />
        <div className="absolute inset-0 image-overlay" />
        <div className="luxury-container relative z-10 flex min-h-[82svh] items-end pb-16">
          <div className="max-w-4xl">
            <p className="mb-4 inline-flex rounded-full border border-warm-white/24 bg-warm-white/12 px-4 py-2 text-sm font-semibold text-champagne backdrop-blur-xl">
              {project.category}
            </p>
            <h1 className="font-serif text-5xl font-semibold leading-[1.02] text-balance md:text-7xl">
              {project.name}
            </h1>
            <p className="mt-5 max-w-2xl text-lg leading-9 text-warm-white/76">
              {project.description}
            </p>
            <div className="mt-7 grid max-w-3xl gap-3 sm:grid-cols-2 lg:grid-cols-4">
              {[
                ["Location", project.location],
                ["Area", project.area],
                ["Style", project.style],
                ["Timeline", project.timeline],
              ].map(([label, value]) => (
                <div
                  key={label}
                  className="rounded-2xl border border-warm-white/18 bg-warm-white/10 p-4 backdrop-blur-xl"
                >
                  <p className="text-xs font-semibold uppercase text-champagne">
                    {label}
                  </p>
                  <p className="mt-1 text-sm font-semibold text-warm-white">
                    {value}
                  </p>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      <section className="section-y marble-surface">
        <div className="luxury-container grid gap-12 lg:grid-cols-[1fr_340px]">
          <div className="space-y-12">
            <SectionHeader
              eyebrow="Project Overview"
              title="A complete design story from challenge to material detail."
              copy="This template shows how Aureva Studio presents project scope, design thinking, finishes, gallery moments, and enquiry pathways for similar projects."
            />

            <div className="grid gap-5 md:grid-cols-2">
              <article className="rounded-[30px] border border-charcoal/10 bg-warm-white/86 p-6 shadow-[0_18px_55px_rgba(24,21,17,0.08)]">
                <h2 className="font-serif text-3xl font-semibold text-charcoal">
                  Design Challenge
                </h2>
                <p className="mt-3 text-sm leading-7 text-muted">
                  {project.challenge}
                </p>
              </article>
              <article className="rounded-[30px] border border-charcoal/10 bg-warm-white/86 p-6 shadow-[0_18px_55px_rgba(24,21,17,0.08)]">
                <h2 className="font-serif text-3xl font-semibold text-charcoal">
                  Design Solution
                </h2>
                <p className="mt-3 text-sm leading-7 text-muted">
                  {project.solution}
                </p>
              </article>
            </div>

            <div className="grid gap-5 md:grid-cols-2">
              <article className="rounded-[30px] border border-charcoal/10 bg-warm-white/86 p-6 shadow-[0_18px_55px_rgba(24,21,17,0.08)]">
                <h2 className="font-serif text-3xl font-semibold text-charcoal">
                  Scope of Work
                </h2>
                <ul className="mt-4 space-y-3">
                  {project.scope.map((scope) => (
                    <li key={scope} className="flex gap-3 text-sm font-semibold text-charcoal/78">
                      <CheckCircle2 className="h-5 w-5 shrink-0 text-bronze" aria-hidden="true" />
                      {scope}
                    </li>
                  ))}
                </ul>
              </article>
              <article className="rounded-[30px] border border-charcoal/10 bg-warm-white/86 p-6 shadow-[0_18px_55px_rgba(24,21,17,0.08)]">
                <h2 className="font-serif text-3xl font-semibold text-charcoal">
                  Materials Used
                </h2>
                <ul className="mt-4 flex flex-wrap gap-2">
                  {project.materials.map((material) => (
                    <li
                      key={material}
                      className="rounded-full border border-charcoal/10 bg-white/70 px-3 py-2 text-xs font-semibold text-charcoal"
                    >
                      {material}
                    </li>
                  ))}
                </ul>
              </article>
            </div>

            <ProjectGallery images={project.gallery} />

            <BeforeAfterSection
              beforeImage={project.beforeImage}
              afterImage={project.afterImage}
              title="Transformation planned with detail and restraint."
              copy="The before and after view helps clients understand how layout, finishes, lighting, and styling can change the entire experience of a space."
            />

            <figure className="rounded-[34px] border border-charcoal/10 bg-charcoal p-8 text-warm-white shadow-[0_24px_70px_rgba(24,21,17,0.16)]">
              <blockquote className="font-serif text-4xl font-semibold leading-tight">
                &quot;{project.testimonial.quote}&quot;
              </blockquote>
              <figcaption className="mt-6 text-sm font-semibold text-champagne">
                {project.testimonial.author}
              </figcaption>
            </figure>
          </div>

          <aside className="hidden lg:block">
            <div className="sticky top-28 rounded-[34px] border border-charcoal/10 bg-warm-white/90 p-6 shadow-[0_24px_70px_rgba(24,21,17,0.14)]">
              <h2 className="font-serif text-3xl font-semibold text-charcoal">
                Want a similar design?
              </h2>
              <p className="mt-3 text-sm leading-7 text-muted">
                Share your property details and receive the right next step for
                your home, villa, office, or commercial space.
              </p>
              <div className="mt-6 space-y-3">
                <LuxuryButton
                  href="/contact"
                  className="w-full"
                  icon={<CalendarDays className="h-4 w-4" aria-hidden="true" />}
                >
                  Book Similar Design Consultation
                </LuxuryButton>
                <LuxuryButton
                  href={buildWhatsAppUrl(project.type)}
                  external
                  variant="secondary"
                  className="w-full"
                  icon={<MessageCircle className="h-4 w-4" aria-hidden="true" />}
                >
                  Chat on WhatsApp
                </LuxuryButton>
              </div>
            </div>
          </aside>
        </div>
      </section>

      <div className="fixed bottom-5 left-4 right-24 z-[60] flex gap-2 lg:hidden">
        <Link
          href="/contact"
          className="flex min-h-12 flex-1 items-center justify-center rounded-full bg-charcoal px-3 py-2 text-center text-xs font-semibold text-warm-white shadow-[0_16px_40px_rgba(24,21,17,0.22)]"
        >
          Book Similar Design Consultation
        </Link>
        <a
          href={buildWhatsAppUrl(project.type)}
          target="_blank"
          rel="noopener noreferrer"
          className="flex min-h-12 flex-1 items-center justify-center rounded-full border border-charcoal/10 bg-warm-white px-3 py-2 text-center text-xs font-semibold text-charcoal shadow-[0_16px_40px_rgba(24,21,17,0.14)]"
        >
          WhatsApp
        </a>
      </div>

      <CTASection title={`Inspired by ${project.name}? Let us plan your version.`} />
    </>
  );
}