import type { Metadata } from 'next';
import Image from 'next/image';
import { notFound, permanentRedirect } from 'next/navigation';
import Link from '../../../components/site-link';
import { Breadcrumb } from '../../../components/breadcrumb';
import { JsonLd } from '../../../components/json-ld';
import { PortalIcon, type PortalIconName } from '../../../components/portal-icon';
import { CatalogAddButton } from '../../../components/catalog-add-button';
import { RealProductCard, productQuote } from '../../../components/real-product-card';
import { getRealProduct, getRealCategory, realProducts, productDescription, productPath } from '../../../lib/real-catalog.server';
import { pageMetadata, SITE_URL } from '../../../lib/metadata';

type Props = {params:Promise<{slug:string}>; searchParams: Promise<Record<string,string|string[]|undefined>>};
export async function generateMetadata({params}:Props):Promise<Metadata> {
  const product = getRealProduct((await params).slug);
  if (!product) return {};
  const metadata = pageMetadata({title:`${product.name}${product.brand ? ` | ${product.brand}` : ''} — ${product.code} | Portal Goiânia`,description:productDescription(product),path:productPath(product)});
  if (product.image) { metadata.openGraph = {...metadata.openGraph,images:[{url:product.image,alt:product.name}]}; metadata.twitter = {...metadata.twitter,images:[product.image]}; }
  return metadata;
}
export default async function ProductPage({params,searchParams}:Props) {
  const {slug} = await params;
  const product = getRealProduct(slug);
  if (!product) notFound();
  if (slug !== product.slug) {
    const query = new URLSearchParams();
    for (const [key,value] of Object.entries(await searchParams)) {
      for (const item of Array.isArray(value) ? value : value === undefined ? [] : [value]) query.append(key,item);
    }
    permanentRedirect(productPath(product) + (query.size ? `?${query}` : ''));
  }
  const category = getRealCategory(product.category)!;
  const related = realProducts.filter(item=>item.code!==product.code && item.group===product.group).sort((a,b)=>Number(Boolean(b.image))-Number(Boolean(a.image))).slice(0,4);
  const schema = {'@context':'https://schema.org','@type':'Product','@id':SITE_URL+productPath(product)+'#product',mainEntityOfPage:SITE_URL+productPath(product),name:product.name,description:productDescription(product),sku:String(product.code),url:SITE_URL+productPath(product),category:category.name,additionalProperty:[{'@type':'PropertyValue',name:'Código Portal',value:String(product.code)},{'@type':'PropertyValue',name:'Unidade de referência',value:product.unit},{'@type':'PropertyValue',name:'Grupo',value:product.group}],...(product.brand ? {brand:{'@type':'Brand',name:product.brand}} : {}),...(product.image ? {image:SITE_URL+product.image} : {})};
  return <main id="conteudo-principal" className="real-catalog" data-product-code={product.code}>
    <Breadcrumb items={[{label:'Produtos',href:'/produtos'},{label:category.name,href:`/produtos/${category.slug}`},{label:product.name}]} /><JsonLd data={schema} />
    <section className="shell rp-main"><div className="rp-photo">{product.image ? <Image src={product.image} alt={product.name} width={640} height={640} priority sizes="(max-width: 760px) 90vw, 45vw" /> : <div className="rc-image-empty"><PortalIcon name={category.icon as PortalIconName} /><p>Foto não disponível</p><small>Peça a confirmação visual pelo código {product.code}.</small></div>}</div>
      <div className="rp-copy"><p className="rc-eyebrow">{category.name} / CÓD. {product.code}</p>{product.brand && <p className="rp-brand">{product.brand}</p>}<h1>{product.name}</h1><p className="rp-description">{productDescription(product)}</p><dl className="rp-specs"><div><dt>Código Portal</dt><dd>{product.code}</dd></div><div><dt>Marca</dt><dd>{product.brand || 'Confirmar com a equipe'}</dd></div><div><dt>Unidade de referência</dt><dd>{product.unit === 'a confirmar' ? 'Confirmar com a equipe' : product.unit}</dd></div><div><dt>Tipo de produto</dt><dd>{product.group}</dd></div></dl><p className="rp-commercial">Preço e disponibilidade sob consulta.</p><a className="button button--primary rp-quote" href={productQuote(product)} data-cta={`produto_detalhe_${product.code}`} target="_blank" rel="noopener noreferrer"><PortalIcon name="chat" /> Cotar este produto no WhatsApp ↗</a><p className="rp-hint">A mensagem leva o código e o nome do produto. Sem cadastro.</p><CatalogAddButton product={{id:`erp-${product.code}`,name:`${product.name} · Cód. ${product.code}`,category:product.category,unit:product.unit}} /></div>
    </section>
    <section className="shell rp-information"><div><p className="rc-eyebrow">UMA COMPRA BEM ESPECIFICADA</p><h2>O que conferir antes de cotar</h2><p>{category.checklist}</p><p>Confirme embalagem, unidade de venda, modelo e acessórios com a equipe. A descrição do catálogo não substitui a ficha técnica do fabricante nem a validação do responsável pela instalação.</p><Link href="/conteudos/como-organizar-lista-material-eletrico">Como preparar sua lista de materiais →</Link></div><div><h2>Como consultar este produto</h2><ol><li>Envie o código <strong>{product.code}</strong> e a quantidade desejada.</li><li>Informe sua cidade e quando precisa do material.</li><li>Confira com a equipe valores, disponibilidade e condições de entrega ou retirada.</li></ol><p>Quando exibida, a imagem vem do cadastro e pode ser ilustrativa. Confirme marca, modelo, apresentação e embalagem antes da compra.</p></div></section>
    {related.length>0 && <section className="shell rp-related"><div className="rc-section-heading"><h2>Outras referências da mesma linha</h2><Link href={`/produtos/${category.slug}`}>Ver {category.name.toLocaleLowerCase('pt-BR')} →</Link></div><div className="rc-grid">{related.map(item=><RealProductCard key={item.code} product={item} />)}</div><p>Itens relacionados não são indicações de equivalência técnica.</p></section>}
  </main>;
}