import type { Metadata } from 'next';
import { notFound } from 'next/navigation';
import Link from './site-link';
import { Breadcrumb } from './breadcrumb';
import { JsonLd } from './json-ld';
import { PortalIcon, type PortalIconName } from './portal-icon';
import { RealProductCard } from './real-product-card';
import { catalogPage, catalogHref, getRealCategory, productPath, realCategories, type CatalogParams } from '../lib/real-catalog.server';
import { slugify } from '../lib/catalog-policy.mjs';
import { pageMetadata, SITE_URL } from '../lib/metadata';
import { whatsappUrl } from '../lib/whatsapp';
import { LegacyContent } from './legacy-page';

export function realCatalogMetadata(categorySlug: string | undefined, params: CatalogParams): Metadata {
  const category = categorySlug ? getRealCategory(categorySlug) : undefined;
  const page = catalogPage(categorySlug, params);
  const name = category?.name || 'Materiais elétricos e iluminação';
  const path = category ? `/produtos/${category.slug}` : '/produtos';
  const filtered = Object.values(page.params).some(Boolean);
  return pageMetadata({title:`${name} em Goiânia${page.requestedPage > 1 ? ` — Página ${page.requestedPage}` : ''} | Portal`,description:`Explore ${name.toLocaleLowerCase('pt-BR')}, compare marcas e referências e organize sua cotação com a Portal Distribuidora em Goiânia. Atendimento pelo WhatsApp.`,path:catalogHref(path,{},filtered ? 1 : page.requestedPage),noindex:filtered});
}

export function RealCatalogPage({ categorySlug, params = {} }: { categorySlug?: string; params?: CatalogParams }) {
  const category = categorySlug ? getRealCategory(categorySlug) : undefined;
  if (categorySlug && !category) notFound();
  const result = catalogPage(categorySlug,params);
  if (result.requestedPage > result.pages) notFound();
  const path = category ? `/produtos/${category.slug}` : '/produtos';
  const title = category?.name || 'Catálogo de materiais elétricos e iluminação';
  const context = category ? `Quero consultar materiais de ${category.name.toLocaleLowerCase('pt-BR')}.` : 'Quero consultar materiais para minha obra ou empresa.';
  const pages = [...new Set([1,result.requestedPage-1,result.requestedPage,result.requestedPage+1,result.pages])].filter(p=>p>0 && p<=result.pages).sort((a,b)=>a-b);
  const selectedBrand = result.brands.find(brand => slugify(brand) === result.params.marca) || result.params.marca;
  const searchExamples = categorySlug === 'automacao-e-comandos' ? ['Inversor de frequência', 'Soft-starter', 'CLP', 'Contator'] : ['Cabo 2,5', 'Disjuntor', 'Inversor de frequência', 'Lâmpada LED'];
  const categoryLinks = <><Link href="/produtos" aria-current={!category ? 'page' : undefined}>Todas as linhas</Link>{realCategories.map(item=><Link key={item.slug} href={`/produtos/${item.slug}`} aria-current={category?.slug===item.slug ? 'page':undefined}><PortalIcon name={item.icon as PortalIconName} />{item.name}</Link>)}</>;
  return <main id="conteudo-principal" className="real-catalog">
    <Breadcrumb items={category ? [{label:'Produtos',href:'/produtos'},{label:category.name}] : [{label:'Produtos'}]} />
    <JsonLd data={{'@context':'https://schema.org','@type':'CollectionPage',name:category?.name || 'Catálogo Portal',url:`${SITE_URL}${catalogHref(path,{},result.requestedPage)}`,mainEntity:{'@type':'ItemList',itemListElement:result.items.map((product,index)=>({'@type':'ListItem',position:(result.requestedPage-1)*24+index+1,name:product.name,url:SITE_URL+productPath(product)}))}}} />
    <section className="rc-intro"><div className="shell"><div><p className="rc-eyebrow">PORTAL DISTRIBUIDORA / CATÁLOGO</p><h1>{title}</h1><p>{category?.intro || 'Encontre produtos, explore marcas e leve as referências certas para sua conversa com a Portal.'}</p></div><a className="rc-contact" href={whatsappUrl(`Olá, Portal! ${context}`)} data-cta="catalogo_topo_whatsapp" target="_blank" rel="noopener noreferrer"><PortalIcon name="chat" /><span>Já tem uma lista?<strong>Envie pelo WhatsApp ↗</strong></span></a></div></section>
    <section className="shell rc-content" id="catalogo" aria-label="Catálogo de produtos">
      <nav className="rc-categories" aria-label="Categorias de produtos">{categoryLinks}</nav>
      <details className="rc-mobile-categories"><summary data-track-id="catalogo_explorar_linhas">Explorar linhas de produtos</summary><nav className="rc-categories" aria-label="Categorias no celular">{categoryLinks}</nav></details>
      <div className="rc-listing">
        <form action={path} method="get" className="rc-search" role="search"><label className="rc-search__query" htmlFor="catalog-search">O que você procura?<input id="catalog-search" name="busca" type="search" maxLength={80} defaultValue={result.params.busca} list="catalog-search-examples" placeholder="Nome, referência ou código" aria-describedby="catalog-search-help" /></label><datalist id="catalog-search-examples">{searchExamples.map(example=><option key={example} value={example} />)}</datalist><label htmlFor="catalog-brand">Marca<input id="catalog-brand" name="marca" type="search" maxLength={100} list="catalog-brands" defaultValue={selectedBrand} placeholder="Digite ou escolha" aria-describedby="catalog-brand-help" /></label><datalist id="catalog-brands">{result.brands.map(brand=><option key={brand} value={brand} />)}</datalist><button data-track-id="catalogo_buscar" type="submit">Buscar <span aria-hidden="true">↗</span></button>{result.params.grupo && <input type="hidden" name="grupo" value={result.params.grupo} />}</form>
        <div className="rc-search-help"><p id="catalog-search-help">Busque pelo nome que você conhece. Ex.: inversor de frequência ou cabo 2,5.</p><p id="catalog-brand-help">Deixe a marca em branco para ver todas.</p></div>
        {!Object.values(result.params).some(Boolean) && (!category || categorySlug === 'automacao-e-comandos') && <div className="rc-search-examples" aria-label="Sugestões de busca"><span>Atalhos:</span>{searchExamples.map(example=><Link key={example} href={catalogHref(path,{busca:example})}>{example}</Link>)}</div>}
        {category && <details className="rc-groups"><summary data-track-id="catalogo_refinar_tipo">Refinar por tipo de produto</summary><form action={path} method="get"><input type="hidden" name="busca" value={result.params.busca} /><input type="hidden" name="marca" value={result.params.marca} /><label htmlFor="catalog-group">Tipo de produto<select name="grupo" id="catalog-group" defaultValue={result.params.grupo}><option value="">Todos os tipos</option>{result.groups.map(group=><option key={group} value={slugify(group)}>{group}</option>)}</select></label><button data-track-id="catalogo_filtrar_tipo" type="submit">Aplicar tipo</button></form></details>}
        <div className="rc-summary"><h2>{result.total.toLocaleString('pt-BR')} {result.total === 1 ? 'produto encontrado' : 'produtos encontrados'}</h2><span>Página {result.requestedPage} de {result.pages}</span>{Object.values(result.params).some(Boolean) && <Link href={path}>Limpar filtros</Link>}</div>
        <p className="rc-consult-note">{result.params.busca && 'A busca aceita abreviações e ordena por relevância. Confirme medidas e unidades na ficha técnica. '}Preços, disponibilidade e entrega são confirmados pela equipe. O catálogo não representa estoque em tempo real.</p>
        {result.items.length ? <div className="rc-grid">{result.items.map((product,index)=><RealProductCard key={product.code} product={product} priority={index<4} />)}</div> : <div className="rc-empty"><PortalIcon name="help" /><h2>Vamos encontrar esse material juntos.</h2><p>Tente buscar por uma palavra ou pelo código. Você também pode enviar a referência ou uma foto à equipe.</p><a className="button button--primary" data-cta="busca_sem_resultado_whatsapp" href={whatsappUrl(`Olá, Portal! Não encontrei no catálogo e quero consultar: ${result.params.busca || 'um material da minha lista'}.`)} target="_blank" rel="noopener noreferrer">Consultar no WhatsApp ↗</a><Link href={path}>Voltar aos produtos</Link></div>}
        {result.pages>1 && <nav className="rc-pagination" aria-label="Páginas do catálogo">{result.requestedPage>1 && <Link rel="prev" href={catalogHref(path,result.params,result.requestedPage-1)}>← Anterior</Link>}{pages.map((page,index)=><span key={page}>{index>0 && page-pages[index-1]>1 && <span className="rc-pagination__gap">…</span>}<Link href={catalogHref(path,result.params,page)} aria-current={page===result.requestedPage?'page':undefined} aria-label={`Página ${page}`}>{page}</Link></span>)}{result.requestedPage<result.pages && <Link rel="next" href={catalogHref(path,result.params,result.requestedPage+1)}>Próxima →</Link>}</nav>}
        <section className="rc-guide"><div><p className="rc-eyebrow">ANTES DE COTAR</p><h2>{category ? `Como organizar sua consulta de ${category.name.toLocaleLowerCase('pt-BR')}` : 'Da referência à cotação, sem complicar.'}</h2><p>{category?.checklist || 'Separe nome ou código, quantidade e unidade de cada material. Marca e referência do projeto ajudam a equipe a entender sua demanda.'}</p><p>Use o catálogo para identificar os materiais. Aplicação, compatibilidade e dimensionamento devem ser conferidos pelo profissional responsável.</p><Link href="/conteudos/como-organizar-lista-material-eletrico">Veja o guia para preparar sua lista →</Link></div><div><h3>Não precisa preencher tudo agora.</h3><p>Já tem foto, PDF ou planilha? Envie na conversa. Se preferir, monte sua seleção aqui no site.</p><Link className="button button--dark" href="/orcamento">Organizar minha lista</Link></div></section>
      </div>
    </section>
    {result.requestedPage === 1 && !Object.values(result.params).some(Boolean) && <LegacyContent path={path} expandable />}
  </main>;
}