import Image from "next/image";
import Link from "next/link";
import { notFound } from "next/navigation";
import Button from "@/components/Button";
import type { Metadata } from "next";
import {
  projectCategories,
  SITE_URL,
  COMPANY_NAME,
  WHATSAPP_URL,
  getProjectCoverImageBySlug,
} from "@/data/services";

interface PageProps {
  params: Promise<{ slug: string }>;
}

export async function generateStaticParams() {
  return projectCategories.map((p) => ({ slug: p.slug }));
}

export async function generateMetadata({
  params,
}: PageProps): Promise<Metadata> {
  const { slug } = await params;
  const project = projectCategories.find((p) => p.slug === slug);
  if (!project) return {};

  return {
    title: `${project.title} - Projetos`,
    description: `${project.description} - Projetos da ${COMPANY_NAME} em São Paulo.`,
    alternates: { canonical: `/projetos/${slug}` },
    openGraph: {
      title: `${project.title} | Projetos | ${COMPANY_NAME}`,
      description: project.description,
      url: `${SITE_URL}/projetos/${slug}`,
    },
  };
}

export default async function ProjetoDetailPage({ params }: PageProps) {
  const { slug } = await params;
  const project = projectCategories.find((p) => p.slug === slug);

  if (!project) {
    notFound();
  }

  return (
    <>
      {/* Breadcrumb */}
      <nav className="bg-gray-light py-3 px-4" aria-label="Breadcrumb">
        <div className="max-w-5xl mx-auto">
          <ol
            className="flex items-center gap-2 text-sm text-text-light"
            itemScope
            itemType="https://schema.org/BreadcrumbList">
            <li
              itemProp="itemListElement"
              itemScope
              itemType="https://schema.org/ListItem">
              <Link
                href="/"
                itemProp="item"
                className="hover:text-primary transition-colors">
                <span itemProp="name">Home</span>
              </Link>
              <meta itemProp="position" content="1" />
            </li>
            <li aria-hidden="true">❱</li>
            <li
              itemProp="itemListElement"
              itemScope
              itemType="https://schema.org/ListItem">
              <Link
                href="/projetos"
                itemProp="item"
                className="hover:text-primary transition-colors">
                <span itemProp="name">Projetos</span>
              </Link>
              <meta itemProp="position" content="2" />
            </li>
            <li aria-hidden="true">❱</li>
            <li
              itemProp="itemListElement"
              itemScope
              itemType="https://schema.org/ListItem">
              <span itemProp="name" className="text-primary font-medium">
                {project.title}
              </span>
              <meta itemProp="position" content="3" />
            </li>
          </ol>
        </div>
      </nav>

      <article className="py-12 px-4">
        <div className="max-w-5xl mx-auto">
          <h1 className="text-3xl md:text-4xl font-bold text-primary mb-8">
            {project.title}
          </h1>

          {/* Main image */}
          <div className="relative aspect-[16/9] rounded-xl overflow-hidden shadow-xl mb-8 bg-gray-200">
            <Image
              src={getProjectCoverImageBySlug(slug)}
              alt={`${project.title} - Kontec Engenharia`}
              fill
              sizes="(max-width: 1024px) 100vw, 960px"
              className="object-cover"
              priority
            />
          </div>

          {/* Info */}
          <div className="bg-white rounded-xl shadow-md p-8 mb-8">
            <h2 className="text-xl font-bold text-primary mb-3">Informações</h2>
            <p className="text-text-light mb-2">
              <span className="font-semibold">Categoria:</span>{" "}
              <Link
                href="/projetos"
                className="text-secondary hover:text-secondary-dark">
                Projetos
              </Link>
            </p>
            <h2 className="text-xl font-bold text-primary mt-6 mb-3">
              Descrição
            </h2>
            <p className="text-text leading-relaxed">{project.description}</p>
          </div>

          {/* CTA */}
          <div className="flex flex-col sm:flex-row gap-4 justify-center">
            <Button href={WHATSAPP_URL} external>
              Falar no WhatsApp
            </Button>
            <Button href="/projetos" variant="primary">
              Ver todos os projetos
            </Button>
          </div>
        </div>
      </article>
    </>
  );
}