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 { PagePiece } from "@/app/components/PagePiece";
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, heroWithMediaGrid } 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.
 * `wide`: o cartão que sobraria sozinho na última linha ocupa a linha inteira, capa à esquerda e texto à direita.
 */
function ClientCaseCard({
  caseStudy,
  priority = false,
  wide = false,
}: {
  caseStudy: CaseStudyContent;
  /** Capa que abre a página: sem mosaico no topo, a primeira capa é a maior imagem visível. */
  priority?: boolean;
  wide?: boolean;
}) {
  return (
    <article
      className={`ds-card !h-auto ${
        // a partir de 1025 px, onde .ds-grid-2 (globals.css) passa a duas colunas; o "!" vence o display:flex de .ds-card,
        // que fica fora das camadas do Tailwind
        wide
          ? "min-[1025px]:col-span-2 min-[1025px]:!grid min-[1025px]:grid-cols-2 min-[1025px]:items-center min-[1025px]:gap-x-sp-8 min-[1025px]:[&>:first-child]:mb-0"
          : ""
      }`}
    >
      <CaseCoverLink
        id={caseStudy.id}
        title={caseStudy.title}
        demoUrl={caseStudy.demoUrl}
        priority={priority}
      />
      <div>
        <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="noopener noreferrer"
            >
              {buttonLabels.site}
              <span className="sr-only"> {caseStudy.title}</span>
            </a>
          ) : null}
        </div>
      </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 ${heroWithMediaGrid}`}>
          <div className="min-w-0 max-w-[860px]">
            <Breadcrumb
              items={[
                { label: "Início", href: "/" },
                { label: "Cases", href: "/cases" },
              ]}
            />
            <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>
          <PagePiece image="/3d/estado-tela.webp" />
        </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, all) => (
              <ClientCaseCard
                key={caseStudy.id}
                caseStudy={caseStudy}
                priority={index === 0}
                wide={index === all.length - 1 && all.length % 2 === 1}
              />
            ))}
          </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.whatsapp}
            </WhatsAppLink>
            <HoverPrefetchLink href="/servicos" className={secondaryButtonDark}>
              {buttonLabels.allServices}
            </HoverPrefetchLink>
          </div>
        </div>
      </section>
    </main>
  );
}