import type { Metadata } from "next";
import Link from "next/link";
import { notFound } from "next/navigation";
import { safeJsonLd } from "@/lib/jsonld";
import { caseStudies, siteName, siteUrl } from "@/lib/site-content";

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

export function generateStaticParams() {
  return caseStudies.map((caseStudy) => ({ slug: caseStudy.id }));
}

export async function generateMetadata({
  params,
}: CasePageProps): Promise<Metadata> {
  const { slug } = await params;
  const caseStudy = caseStudies.find((item) => item.id === slug);

  if (!caseStudy) return { title: "Case não encontrado" };

  const url = `${siteUrl}/cases/${caseStudy.id}`;
  return {
    title: `${caseStudy.title} | Case de Engenharia de Software`,
    description: caseStudy.summary,
    alternates: { canonical: url },
    openGraph: {
      title: caseStudy.title,
      description: caseStudy.summary,
      url,
      siteName,
      type: "article",
    },
    twitter: {
      card: "summary_large_image",
      title: caseStudy.title,
      description: caseStudy.summary,
    },
  };
}

export default async function CasePage({ params }: CasePageProps) {
  const { slug } = await params;
  const caseStudy = caseStudies.find((item) => item.id === slug);
  if (!caseStudy) notFound();

  const url = `${siteUrl}/cases/${caseStudy.id}`;
  const jsonLd = {
    "@context": "https://schema.org",
    "@graph": [
      {
        "@type": "Article",
        headline: caseStudy.title,
        description: caseStudy.summary,
        mainEntityOfPage: url,
        author: { "@id": `${siteUrl}/#person` },
        about: caseStudy.stack,
      },
      {
        "@type": "BreadcrumbList",
        itemListElement: [
          { "@type": "ListItem", position: 1, name: "Início", item: siteUrl },
          {
            "@type": "ListItem",
            position: 2,
            name: "Cases",
            item: `${siteUrl}/cases`,
          },
          {
            "@type": "ListItem",
            position: 3,
            name: caseStudy.title,
            item: url,
          },
        ],
      },
    ],
  };

  return (
    <main>
      <script type="application/ld+json">{safeJsonLd(jsonLd)}</script>
      <article>
        <section className="ds-section ds-section-dark">
          <div className="ds-section-shell max-w-[960px]">
            <p className="ds-eyebrow">Case de engenharia de software</p>
            <h1 className="ds-section-title text-white">
              {caseStudy.title}: {caseStudy.subtitle}
            </h1>
            <p className="ds-copy max-w-[68ch] !text-[rgba(255,255,255,.78)]">
              {caseStudy.summary}
            </p>
            <p className="mt-sp-6 text-[15px] leading-8 text-white">
              {caseStudy.impact}
            </p>
            <div className="mt-sp-8 flex flex-wrap gap-sp-3">
              {caseStudy.demoUrl && (
                <a
                  className="ds-link ds-link-accent"
                  href={caseStudy.demoUrl}
                  target="_blank"
                  rel="noreferrer"
                >
                  Abrir demonstração
                </a>
              )}
              {caseStudy.githubUrl && (
                <a
                  className="ds-link ds-link-muted"
                  href={caseStudy.githubUrl}
                  target="_blank"
                  rel="noreferrer"
                >
                  Ver código
                </a>
              )}
            </div>
          </div>
        </section>
        <section className="ds-section">
          <div className="ds-section-shell max-w-[960px]">
            <h2 className="ds-section-title !leading-snug">
              Tecnologias e contexto técnico
            </h2>
            <p className="ds-section-description">
              Este case demonstra como aplico engenharia de software a produtos
              com requisitos de performance, integração e operação, para
              empresas do Norte de Santa Catarina, Curitiba e atuação remota.
            </p>
            <ul className="ds-tags mt-sp-6">
              {caseStudy.stack.map((item) => (
                <li key={item} className="ds-tag">
                  {item}
                </li>
              ))}
            </ul>
            <div className="mt-sp-10 flex flex-wrap gap-sp-3">
              <Link className="ds-link ds-link-accent" href="/curriculo">
                Ver currículo profissional
              </Link>
              <Link className="ds-link ds-link-muted" href="/servicos">
                Ver serviços de engenharia
              </Link>
            </div>
          </div>
        </section>
      </article>
    </main>
  );
}