import type { Metadata } from "next";
import { Breadcrumb } from "@/app/components/Breadcrumb";
import {
  pageTop,
  primaryButton,
  secondaryButtonDark,
  secondaryButtonLight,
  textLink,
} from "@/app/components/button-styles";
import HoverPrefetchLink from "@/app/components/HoverPrefetchLink";
import WhatsAppLink from "@/app/components/WhatsAppLink";
import { safeJsonLd } from "@/lib/jsonld";
import { buildBreadcrumbList, buildPageSocialMetadata } from "@/lib/seo";
import {
  buttonLabels,
  type CaseStudyContent,
  clientCasesForListing,
  labCases,
  siteUrl,
} from "@/lib/site-content";
import { CASES_SUBJECT } from "@/lib/whatsapp";
import { CaseCoverLink } from "./_components/CaseCoverLink";
import { compactHero } from "./_components/hero-styles";

const pageUrl = `${siteUrl}/cases`;
const pageTitle = "Cases: sites e sistemas para empresas";
const pageDescription =
  "Cases de sites e sistemas para empresas: loja virtual com pedido pelo WhatsApp, site com painel para o dono e páginas institucionais.";
/** Abertura da página: o que o visitante encontra nos cases, sem repetir a frase do título. */
const pageLead =
  "Abra um case para ver o problema do cliente, o que foi feito e como o site ficou, da loja virtual ao site que o dono edita sozinho.";
const allCases = [...clientCasesForListing, ...labCases];

export const metadata: Metadata = {
  title: pageTitle,
  description: pageDescription,
  ...buildPageSocialMetadata({
    url: pageUrl,
    title: pageTitle,
    description: pageDescription,
    type: "website",
  }),
};

/** Cartão de um case de cliente, com a capa do site (quando há captura gravada), o resumo e o botão do case. */
function ClientCaseCard({
  caseStudy,
  priority = false,
}: {
  caseStudy: CaseStudyContent;
  /** Capa que abre a página: sem mosaico no topo, a primeira capa é a maior imagem visível. */
  priority?: boolean;
}) {
  return (
    <article className="ds-card !h-auto">
      <CaseCoverLink
        id={caseStudy.id}
        title={caseStudy.title}
        demoUrl={caseStudy.demoUrl}
        priority={priority}
      />
      <div className="ds-kicker">{caseStudy.title}</div>
      <h3 className="ds-card-title">{caseStudy.headline}</h3>
      <p className="ds-copy">{caseStudy.summary}</p>
      <div className="mt-sp-6 flex flex-wrap items-center gap-sp-3">
        <HoverPrefetchLink
          href={`/cases/${caseStudy.id}`}
          className={secondaryButtonLight}
        >
          {buttonLabels.case}
          <span className="sr-only"> {caseStudy.title}</span>
        </HoverPrefetchLink>
        {caseStudy.demoUrl ? (
          <a
            href={caseStudy.demoUrl}
            className={textLink}
            target="_blank"
            rel="noreferrer"
          >
            {buttonLabels.site}
            <span className="sr-only"> {caseStudy.title}</span>
          </a>
        ) : null}
      </div>
    </article>
  );
}

/**
 * Uma linha por projeto do laboratório: nome, o que é, a marca "Projeto próprio" e o link. Sem capa nem resumo, para a lista
 * ocupar pouco espaço (no celular, o nome e a marca ficam na primeira linha).
 */
function LabCaseRow({ caseStudy }: { caseStudy: CaseStudyContent }) {
  return (
    <li className="grid grid-cols-[minmax(0,1fr)_auto] items-baseline gap-x-sp-6 gap-y-sp-1 py-sp-4 md:grid-cols-[minmax(0,1fr)_minmax(0,2fr)_auto_auto]">
      <h3 className="text-base font-semibold leading-6">{caseStudy.title}</h3>
      <p className="ds-kicker justify-self-end md:order-3">Projeto próprio</p>
      <p className="col-span-2 text-[15px] leading-6 text-[var(--ink-80)] md:order-2 md:col-span-1">
        {caseStudy.subtitle}
      </p>
      <HoverPrefetchLink
        href={`/cases/${caseStudy.id}`}
        className={`${textLink} col-span-2 justify-self-start md:order-4 md:col-span-1`}
      >
        {buttonLabels.case}
        <span className="sr-only"> {caseStudy.title}</span>
      </HoverPrefetchLink>
    </li>
  );
}

export default function CasesPage() {
  const jsonLd = {
    "@context": "https://schema.org",
    "@graph": [
      {
        "@type": "CollectionPage",
        "@id": `${pageUrl}#page`,
        name: pageTitle,
        url: pageUrl,
        description: pageDescription,
      },
      {
        "@type": "ItemList",
        itemListElement: allCases.map((caseStudy, index) => ({
          "@type": "ListItem",
          position: index + 1,
          name: caseStudy.title,
          url: `${pageUrl}/${caseStudy.id}`,
        })),
      },
      buildBreadcrumbList(pageUrl, [
        ["Início", siteUrl],
        ["Cases", pageUrl],
      ] as const),
    ],
  };

  return (
    <main>
      <script type="application/ld+json">{safeJsonLd(jsonLd)}</script>

      {/* sem mosaico de pôsteres: os cartões logo abaixo já trazem a capa de cada cliente, e a mesma imagem não aparece duas vezes */}
      <section
        className={`ds-section ds-section-dark ${pageTop} ${compactHero}`}
      >
        <div className="ds-section-shell">
          <div className="max-w-[860px]">
            <Breadcrumb
              items={[
                { label: "Início", href: "/" },
                { label: "Cases", href: "/cases" },
              ]}
            />
            <p className="ds-eyebrow">Trabalhos entregues</p>
            <h1 className="ds-section-title max-w-[18ch] text-balance text-white">
              Veja o que já fiz para empresas.
            </h1>
            <p className="ds-copy max-w-[64ch] !text-[rgba(255,255,255,0.78)]">
              {pageLead}
            </p>
          </div>
        </div>
      </section>

      <section className="ds-section" aria-labelledby="cases-clientes">
        <div className="ds-section-shell">
          <h2 id="cases-clientes" className="ds-card-title !mt-0">
            Projetos de clientes
          </h2>
          <div className="ds-grid-2 mt-sp-8 items-start">
            {clientCasesForListing.map((caseStudy, index) => (
              <ClientCaseCard
                key={caseStudy.id}
                caseStudy={caseStudy}
                priority={index === 0}
              />
            ))}
          </div>
        </div>
      </section>

      <section className="ds-section" aria-labelledby="cases-laboratorio">
        <div className="ds-section-shell">
          <h2 id="cases-laboratorio" className="ds-card-title !mt-0">
            Laboratório
          </h2>
          <p className="ds-copy max-w-[64ch]">
            Projetos pessoais e de estudo, feitos para praticar e testar ideias.
          </p>
          <ul className="mt-sp-6 divide-y divide-[var(--border)] border-y border-[var(--border)]">
            {labCases.map((caseStudy) => (
              <LabCaseRow key={caseStudy.id} caseStudy={caseStudy} />
            ))}
          </ul>
        </div>
      </section>

      <section className="ds-section ds-section-dark">
        <div className="ds-section-shell">
          <h2 className="ds-card-title !mt-0 text-white">
            Quer um projeto parecido com algum destes?
          </h2>
          <p className="ds-copy max-w-[60ch]">
            Conte o que você precisa. A conversa começa pelo WhatsApp, sem
            formulário.
          </p>
          <div className="mt-sp-6 flex flex-wrap items-center gap-sp-3">
            <WhatsAppLink
              service={CASES_SUBJECT}
              placement="cases_hub_footer"
              className={primaryButton}
            >
              {buttonLabels.contact}
            </WhatsAppLink>
            <HoverPrefetchLink href="/servicos" className={secondaryButtonDark}>
              {buttonLabels.allServices}
            </HoverPrefetchLink>
          </div>
        </div>
      </section>
    </main>
  );
}