import type { Metadata } from "next";
import Link from "./site-link";
import { notFound } from "next/navigation";
import { getCategory, getCategoryProducts } from "../lib/catalog";
import { pageMetadata, SITE_URL } from "../lib/metadata";
import { Breadcrumb } from "./breadcrumb";
import { JsonLd } from "./json-ld";
import Image from "next/image";
import { categoryImages } from "../lib/catalog-presentation";
import { ProductCard } from "./product-card";
import { SectionHeading } from "./section-heading";
import { whatsappUrl } from "../lib/whatsapp";

export function categoryPageMetadata(slug: string): Metadata {
  const category = getCategory(slug);
  if (!category) return {};

  return pageMetadata({
    title: `${category.name} em Goiânia | Portal Distribuidora`,
    description: `${category.description} Monte uma lista e consulte especificações, disponibilidade e condições com a equipe.`,
    path: `/produtos/${category.slug}`,
  });
}

export function CategoryPage({ slug }: { slug: string }) {
  const category = getCategory(slug);
  if (!category) notFound();
  const items = getCategoryProducts(slug);

  const schema = {
    "@context": "https://schema.org",
    "@type": "CollectionPage",
    name: category.name,
    url: `${SITE_URL}/produtos/${category.slug}`,
    mainEntity: {
      "@type": "ItemList",
      itemListElement: items.map((item, index) => ({
        "@type": "ListItem",
        position: index + 1,
        name: item.name,
        url: `${SITE_URL}/produtos/${category.slug}#${item.id}`,
      })),
    },
  };

  return (
    <main id="conteudo-principal">
      <JsonLd data={schema} />
      <Breadcrumb items={[{ label: "Produtos", href: "/produtos" }, { label: category.name }]} />
      <section className="catalog-intro"><div className="shell category-intro"><div><p className="eyebrow">LINHAS DA PORTAL / {category.eyebrow}</p><h1>{category.name}</h1><p>{category.detail}</p><a className="button button--primary" data-cta={`categoria_topo_${slug.replaceAll("-", "_")}`} href={whatsappUrl(`Olá, Portal! Quero consultar materiais da linha de ${category.name.toLocaleLowerCase("pt-BR")}.`)} target="_blank" rel="noopener noreferrer">Consultar esta linha ↗</a><Link className="category-intro__link" href="#itens">Explorar especificações ↓</Link></div><figure><Image src={categoryImages[slug]} alt={`Imagem ilustrativa da linha de ${category.name.toLocaleLowerCase("pt-BR")}`} width={600} height={400} sizes="(max-width: 760px) 90vw, 40vw" /><figcaption>Imagem da linha · modelos e disponibilidade sob consulta</figcaption></figure></div></section>

      <section className="section" id="itens">
        <div className="shell">
          <SectionHeading
            eyebrow="Itens demonstrativos"
            title={`Compare opções de ${category.shortName.toLocaleLowerCase("pt-BR")}.`}
            description="Use os exemplos para organizar sua consulta. Não representam estoque real. A equipe confirma marcas, modelos e condições."
          />
          <div className="product-grid">
            {items.map((item) => (
              <div id={item.id} key={item.id}>
                <ProductCard product={item} />
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="section section--cream">
        <div className="shell guidance-grid">
          <div>
            <p className="eyebrow">Antes de cotar</p>
            <h2>Informações que evitam ida e volta.</h2>
          </div>
          <ol>
            <li><span>01</span><div><h3>Informe a aplicação</h3><p>Residencial, comercial, área externa, manutenção ou outra condição relevante.</p></div></li>
            <li><span>02</span><div><h3>Preserve a especificação</h3><p>Seção, corrente, tensão, potência, dimensão e quantidade quando estiverem na lista.</p></div></li>
            <li><span>03</span><div><h3>Confirme antes da substituição</h3><p>Alternativas devem ser apresentadas com clareza e aprovadas pelo responsável.</p></div></li>
          </ol>
        </div>
      </section>

      <section className="final-cta final-cta--dark">
        <div className="shell final-cta__inner">
          <div><p className="eyebrow">Próximo passo</p><h2>Já sabe o que precisa?</h2></div>
          <div><p>Consulte disponibilidade e condições com a equipe. Você pode conversar agora ou organizar sua lista primeiro.</p><a className="button button--primary" data-cta={`categoria_${slug.replaceAll("-", "_")}`} href={whatsappUrl(`Olá, Portal! Quero cotar itens da linha de ${category.name.toLocaleLowerCase("pt-BR")}.`)} target="_blank" rel="noopener noreferrer">Cotar esta linha no WhatsApp ↗</a><p><Link href="/orcamento">Organizar minha lista primeiro</Link></p></div>
        </div>
      </section>
    </main>
  );
}