import type { Metadata } from "next";
import Image from "next/image";
import Link from "next/link";
import { notFound } from "next/navigation";
import {
  FICHA_COMUM,
  FICHA_ORIGINAL,
  ORIGEM_POR_CATEGORIA,
  PARCELAMENTO_TEXTO,
  PRAZO_ORIGINAL,
  PRAZO_PRODUCAO,
  SERIE_PASTEL,
  formatarTamanhoCurto,
  getProduct,
  getProductsByCategory,
  isOriginal,
  isVendida,
  products,
} from "@/lib/products";
import { ProductPurchase } from "@/components/ProductPurchase";
import type { GalleryView } from "@/components/ZoomableImage";
import { GaleriaObra } from "@/components/GaleriaObra";
import { FormatoProvider } from "@/components/FormatoContext";

// Legenda das imagens emolduradas/em ambiente dos originais: a obra é vendida sem moldura.
const SUGESTAO_ORIGINAL = "Simulação · moldura não inclusa";

export function generateStaticParams() {
  return products.map((p) => ({ id: p.id }));
}

export async function generateMetadata({
  params,
}: {
  params: Promise<{ id: string }>;
}): Promise<Metadata> {
  const { id } = await params;
  const product = getProduct(id);
  if (!product) return {};

  if (isOriginal(product)) {
    return {
      title: `${product.title}, ${FICHA_ORIGINAL.tecnica} | Felipe Tosin`,
      description: `${product.title}, obra da série ${SERIE_PASTEL.nome}: original em ${FICHA_ORIGINAL.tecnica.toLowerCase()} (${formatarTamanhoCurto(product.sizes[0])}) de Felipe Tosin, artista visual de Curitiba. Peça única. Envio para todo o Brasil.`,
      openGraph: { images: [product.full] },
    };
  }

  const serie = product.category === "tracos" ? "Traços" : "Pigmentos";
  return {
    title: `${product.title}, série ${serie} | Felipe Tosin`,
    description: `${product.title}, obra da série ${serie} de Felipe Tosin, artista visual de Curitiba. Edição limitada de 15 cópias por formato, numeradas e assinadas, com certificado de autenticidade, impressão fine art sobre papel Hahnemühle Studio Enhanced 210 g/m². Envio para todo o Brasil.`,
    openGraph: { images: [product.full] },
  };
}

export default async function ProductPage({
  params,
}: {
  params: Promise<{ id: string }>;
}) {
  const { id } = await params;
  const product = getProduct(id);
  if (!product) notFound();

  const original = isOriginal(product);
  const site = (process.env.SITE_URL ?? "https://www.felipetosin.com.br").replace(/\/+$/, "");
  const secao = original ? { nome: "Originais", ancora: "originais" } : { nome: "Impressões", ancora: "impressoes" };
  const migalhas = {
    "@context": "https://schema.org",
    "@type": "BreadcrumbList",
    itemListElement: [
      { "@type": "ListItem", position: 1, name: "Loja", item: `${site}/` },
      { "@type": "ListItem", position: 2, name: secao.nome, item: `${site}/#${secao.ancora}` },
      { "@type": "ListItem", position: 3, name: product.title, item: `${site}/obra/${product.id}` },
    ],
  };
  const outras = getProductsByCategory(product.category).filter((p) => p.id !== product.id).slice(0, 6);
  const precos = product.sizes.map((t) => t.price).filter((v): v is number => v !== null);
  const jsonLd = {
    "@context": "https://schema.org",
    "@type": "Product",
    name: product.title,
    image: `${site}${product.full}`,
    description: original ? `${product.title}, obra original em ${FICHA_ORIGINAL.tecnica.toLowerCase()} de Felipe Tosin. Peça única.` : `${product.title}, edição limitada de 15 cópias por formato, numerada e assinada, de Felipe Tosin.`,
    brand: { "@type": "Person", name: "Felipe Tosin" },
    category: "Arte",
    ...(precos.length
      ? {
          offers: {
            "@type": "AggregateOffer",
            priceCurrency: "BRL",
            lowPrice: Math.min(...precos),
            highPrice: Math.max(...precos),
            offerCount: precos.length,
            availability: isVendida(product) ? "https://schema.org/SoldOut" : "https://schema.org/InStock",
            url: `${site}/obra/${product.id}`,
          },
        }
      : {}),
  };

  // Ordem: foto da obra → emoldurada → na parede/sala. Nas impressões a foto do quadro
  // sozinho na parede se chama "Na parede" e a do ambiente "Na sala"; nos originais, o quadro
  // sozinho é "Emoldurada" e a parede com duas obras é "Na parede".
  const views: GalleryView[] = [{ key: "obra", label: "Obra", src: product.full }];
  if (product.molduraFull) {
    views.push({
      key: "moldura",
      label: original ? "Simulação emoldurada" : "Simulação detalhe emoldurado",
      src: product.molduraFull,
      caption: original ? SUGESTAO_ORIGINAL : "Simulação: detalhe da obra emoldurada",
    });
  }
  if (product.ambienteFull) {
    views.push({
      key: "ambiente",
      label: original ? "Simulação na parede" : "Simulação na sala",
      src: product.ambienteFull,
      caption: original ? SUGESTAO_ORIGINAL : "Simulação: como ficaria na sala",
    });
  }
  if (product.salaFull) {
    views.push({
      key: "sala",
      label: "Simulação na sala",
      src: product.salaFull,
      caption: original ? SUGESTAO_ORIGINAL : "Simulação: composição de obras em um ambiente",
    });
  }
  product.serieFull.forEach((src, i) => {
    views.push({
      key: `serie-${i + 1}`,
      label: "Simulação composição da série",
      src,
      caption: "Simulação · o valor é de cada obra, não da composição · moldura não inclusa",
    });
  });

  return (
    <main className="mx-auto w-full max-w-6xl flex-1 px-6 py-10">
      <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }} />
      <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(migalhas) }} />
      <nav aria-label="Você está em" className="mb-6 text-xs text-zinc-500">
        <Link href="/" className="hover:text-zinc-900">Loja</Link>
        <span className="mx-2">›</span>
        <Link href={`/#${secao.ancora}`} className="hover:text-zinc-900">{secao.nome}</Link>
        <span className="mx-2">›</span>
        <span className="text-zinc-700">{product.title}</span>
      </nav>
      <FormatoProvider initial={product.sizes[0].id}>
      <div className="grid grid-cols-1 gap-10 md:grid-cols-2">
        <GaleriaObra
          views={views}
          alt={product.title}
          fixedRatio={original}
          simBase={original ? null : product.simBase}
          sizes={product.sizes.map((t) => ({ id: t.id, label: formatarTamanhoCurto(t) }))}
        />
        <div>
          <p className="text-xs uppercase tracking-wide text-zinc-500">
            {original ? `Série ${SERIE_PASTEL.nome}` : product.category}
          </p>
          <h1 className="mt-1 text-2xl font-semibold tracking-tight">{product.title}</h1>
          <p className="mt-2 text-sm text-zinc-600">{product.technique}</p>

          {product.significado && (
            <p className="mt-4 text-sm leading-relaxed text-zinc-700">{product.significado}</p>
          )}
          {product.exposta && (
            <p className="mt-3 text-sm leading-relaxed text-zinc-700">{product.exposta}</p>
          )}
          {original && (
            <p className="mt-3 border-l-2 border-zinc-200 pl-3 text-sm leading-relaxed text-zinc-500">
              {SERIE_PASTEL.conceito}
            </p>
          )}

          <ProductPurchase
            productId={product.id}
            sizes={product.sizes}
            origem={ORIGEM_POR_CATEGORIA[product.category]}
            ficha={FICHA_COMUM}
            original={original ? FICHA_ORIGINAL : undefined}
            vendida={isVendida(product)}
          />

          <div className="mt-6 space-y-1.5 border-t border-zinc-200 pt-4 text-xs text-zinc-500">
            <p>{original ? PRAZO_ORIGINAL : PRAZO_PRODUCAO}</p>
            <p>{PARCELAMENTO_TEXTO}</p>
          </div>
        </div>
      </div>
      </FormatoProvider>
      {outras.length > 0 && (
        <section className="mt-16 border-t border-zinc-200 pt-8">
          <h2 className="text-base font-semibold">{original ? "Outras obras da série" : "Mais obras desta série"}</h2>
          <ul className="mt-4 grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-6">
            {outras.map((o) => (
              <li key={o.id}>
                <Link href={`/obra/${o.id}`} className="group block">
                  <Image src={o.thumb} alt={o.title} width={300} height={300} className="aspect-square w-full rounded object-cover" />
                  <span className="mt-2 block text-xs text-zinc-600 group-hover:text-zinc-900">{o.title}</span>
                </Link>
              </li>
            ))}
          </ul>
          <p className="mt-6 text-xs text-zinc-500">
            Dúvidas sobre envio, pagamento ou devolução? Veja as <Link href="/perguntas-frequentes" className="underline hover:text-zinc-900">perguntas frequentes</Link>.
          </p>
        </section>
      )}
    </main>
  );
}