import type { Metadata } from "next";
import { headers } from "next/headers";
import { cache } from "react";
import { arteDaLoja, origemDoPainel } from "@/lib/arte-publica";

/*
 * O link público de uma arte do KtaloguDesign no endereço da loja
 * (ktalogu.com.br/<loja>/arte/<código>; no domínio próprio, /arte/<código>
 * chega aqui pelo middleware). Quem abre vê a arte, toca o vídeo e baixa,
 * sem login: a página do painel faz tudo isso e fica por dentro desta, que
 * mantém o endereço da loja na barra e a foto da arte no WhatsApp.
 */

export const dynamic = "force-dynamic";

const lerArte = cache(arteDaLoja);

export async function generateMetadata({ params }: { params: Promise<{ slug: string; codigo: string }> }): Promise<Metadata> {
  const { slug, codigo } = await params;
  const arte = await lerArte(slug, codigo).catch(() => null);
  if (!arte) return { title: "Arte não encontrada", robots: { index: false, follow: false } };
  const titulo = arte.loja ? `${arte.nome} · ${arte.loja}` : arte.nome;
  const descricao = "Veja e baixe esta arte em PNG, JPG, PDF ou vídeo.";
  return {
    title: titulo,
    description: descricao,
    robots: { index: false, follow: false },
    openGraph: { title: titulo, description: descricao, ...(arte.miniatura ? { images: [{ url: arte.miniatura }] } : {}) },
  };
}

export default async function ArteNaLoja({ params }: { params: Promise<{ slug: string; codigo: string }> }) {
  const { slug, codigo } = await params;
  const arte = await lerArte(slug, codigo).catch(() => null);
  if (!arte) {
    return (
      <main style={{ display: "flex", minHeight: "100vh", alignItems: "center", justifyContent: "center", background: "#F1EFF6", padding: 16 }}>
        <div style={{ maxWidth: 380, borderRadius: 18, background: "#FFFFFF", padding: 24, textAlign: "center", boxShadow: "0 12px 40px rgba(20,11,43,0.1)" }}>
          <h1 style={{ fontSize: 18, fontWeight: 700, color: "#1F1B2E" }}>Link não encontrado</h1>
          <p style={{ marginTop: 8, fontSize: 14, lineHeight: 1.6, color: "#6B6584" }}>A arte foi apagada ou o endereço veio cortado. Confira se o link foi copiado inteiro, ou peça um novo a quem enviou.</p>
        </div>
      </main>
    );
  }
  const painel = origemDoPainel((await headers()).get("host"));
  return (
    <main style={{ position: "fixed", inset: 0, background: "#F1EFF6" }} data-arte-na-loja>
      <iframe src={`${painel}/arte/${codigo}`} title={arte.nome} allow="fullscreen; autoplay; clipboard-write" style={{ display: "block", width: "100%", height: "100%", border: 0 }} />
    </main>
  );
}