import type { Metadata } from 'next';
import Link from './site-link';
import { Breadcrumb } from './breadcrumb';
import { JsonLd } from './json-ld';
import { RealProductCard } from './real-product-card';
import { legacyPages, getLegacyPage, legacyCatalog, legacyMarkup, type LegacyPage } from '../lib/legacy-pages.server';
import { pageMetadata, SITE_URL } from '../lib/metadata';
import { whatsappUrl } from '../lib/whatsapp';

export function legacyMetadata(page: LegacyPage): Metadata {
  return pageMetadata({ title: page.title || `${page.heading} | Portal Distribuidora`, description: page.description, path: page.path });
}

/** Inert HTML comes only from the checked-in allowlist importer, never a live request. */
export function LegacyContent({ path, expandable = false }: { path: string; expandable?: boolean }) {
  const page = getLegacyPage(path);
  if (!page?.html) return null;
  const content = <div className="legacy-prose" dangerouslySetInnerHTML={{ __html: legacyMarkup(page) }} />;
  return <section className="shell legacy-retained" aria-label="Informações sobre a linha e o atendimento">{expandable ? <details><summary>Mais informações sobre {path === '/' ? 'a Portal Distribuidora' : page.heading.toLocaleLowerCase('pt-BR')}</summary>{content}</details> : content}</section>;
}

export function LegacyPageView({ page }: { page: LegacyPage }) {
  const related = legacyCatalog(page);
  const directory = page.path === '/blog' ? legacyPages.filter(item => item.kind === 'article') : page.path === '/regioes-atendidas/cidades' || page.path === '/centro-oeste' ? legacyPages.filter(item => item.kind === 'region' && item.path !== '/regioes-atendidas/cidades') : [];
  const cta = `legado_${page.path.slice(1).replaceAll('/', '_').replaceAll('-', '_').slice(0, 65)}`;
  return <main id="conteudo-principal" className="legacy-page">
    <Breadcrumb items={[...(page.kind === 'article' ? [{ label: 'Blog', href: '/blog' }] : page.kind === 'product' ? [{ label: 'Produtos', href: '/produtos' }] : []), { label: page.heading }]} />
    <JsonLd data={{ '@context': 'https://schema.org', '@type': page.kind === 'article' ? 'Article' : 'WebPage', ...(page.kind === 'article' ? { headline: page.heading } : { name: page.heading }), description: page.description, url: SITE_URL + page.path, inLanguage: 'pt-BR', publisher: { '@type': 'Organization', name: 'Portal Distribuidora', url: SITE_URL } }} />
    <section className="legacy-hero"><div className="shell shell--reading"><p className="eyebrow">Portal Distribuidora / {page.kind === 'article' ? 'Conteúdo' : page.kind === 'region' ? 'Atendimento regional' : 'Materiais elétricos'}</p><h1>{page.heading}</h1>{page.kind !== 'article' && <><p className="lede">{page.sourceCharacters < 180 ? `Consulte ${page.heading.toLocaleLowerCase('pt-BR')} com a Portal Distribuidora, em Goiânia. Envie a referência do seu projeto e confirme modelos, disponibilidade e condições de atendimento.` : page.description}</p><a className="button button--primary" href={whatsappUrl(`Olá, Portal! Vim da página ${page.heading} e gostaria de consultar materiais e condições de atendimento.`)} data-cta={`${cta}_topo`} target="_blank" rel="noopener noreferrer">Consultar no WhatsApp ↗</a></>}</div></section>
    {directory.length > 0 ? <section className="shell legacy-directory"><h2>{page.path === '/blog' ? 'Artigos da Portal' : 'Cidades atendidas'}</h2><div>{directory.map(item => <article key={item.path}><h3><Link href={item.path}>{item.heading}</Link></h3><p>{item.description}</p><Link href={item.path}>Ver conteúdo →</Link></article>)}</div></section> : <article className="shell shell--reading legacy-prose" dangerouslySetInnerHTML={{ __html: legacyMarkup(page) }} />}
    {page.sourceCharacters < 180 && !directory.length && <section className="shell shell--reading legacy-prose"><h2>Como consultar {page.heading.toLocaleLowerCase('pt-BR')}</h2><p>Reúna o nome do material, a marca ou referência, a quantidade e a unidade de venda. Se tiver uma lista, foto ou especificação, envie pelo WhatsApp para facilitar a identificação.</p><h2>O que confirmar antes da compra</h2><ul><li>Modelo e especificações previstas no projeto.</li><li>Apresentação, quantidade por embalagem e acessórios necessários.</li><li>Preço, disponibilidade, prazo e condições de retirada ou entrega para sua cidade.</li></ul><p>A aplicação e a compatibilidade devem ser validadas pelo profissional responsável. A consulta não confirma estoque ou reserva de material.</p><Link href="/conteudos/como-organizar-lista-material-eletrico">Veja como organizar sua lista de materiais →</Link></section>}
    {related && <section className="shell legacy-related"><h2>Explore também esta linha no catálogo</h2><p>Referências da mesma linha geral. Confira o modelo e a aplicação de cada produto.</p><div className="rc-grid">{related.products.map(product => <RealProductCard key={product.code} product={product} />)}</div><Link href={`/produtos/${related.category}`}>Ver catálogo desta linha →</Link></section>}
    <section className="shell legacy-final"><h2>Leve sua referência para a conversa.</h2><p>A equipe da Portal ajuda você a consultar os materiais e organizar a cotação.</p><a className="button button--primary" data-cta={`${cta}_final`} href={whatsappUrl(`Olá, Portal! Estou consultando ${page.heading}. Podem me ajudar com uma cotação?`)} target="_blank" rel="noopener noreferrer">Falar com a Portal no WhatsApp ↗</a></section>
  </main>;
}