import type { Metadata } from "next";
import { cache } from "react";
import { arteDoLink } from "@/lib/banner-editor/link-publico";
import { VistaDaArte } from "./vista-da-arte";

export const dynamic = "force-dynamic";

/**
 * O link público de uma arte do KtaloguDesign (como o "qualquer pessoa com o
 * link" do Canva): quem abre vê a arte, toca o vídeo e baixa em PNG, JPG,
 * PDF ou MP4, sem login. Editar, só dentro da Ktalogu. Fora de /dashboard de
 * propósito; o código assinado no caminho é a única credencial
 * (lib/banner-editor/link-publico.ts).
 */

const lerArte = cache(arteDoLink);

export async function generateMetadata({ params }: { params: Promise<{ codigo: string }> }): Promise<Metadata> {
  const { codigo } = await params;
  const arte = await lerArte(codigo);
  if (!arte) return { title: "Arte não encontrada", robots: { index: false, follow: false } };
  const titulo = arte.empresa.nome ? `${arte.nome} · ${arte.empresa.nome}` : 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 ArtePublica({ params }: { params: Promise<{ codigo: string }> }) {
  const { codigo } = await params;
  const arte = await lerArte(codigo);
  if (!arte) {
    return (
      <main className="flex min-h-screen items-center justify-center bg-[#F1EFF6] px-4">
        <div className="max-w-sm rounded-[18px] bg-white p-6 text-center shadow-[0_12px_40px_rgba(20,11,43,0.1)]">
          <h1 className="text-[18px] font-bold text-[#1F1B2E]">Link não encontrado</h1>
          <p className="mt-2 text-[14px] leading-relaxed text-[#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>
    );
  }
  return <VistaDaArte codigo={codigo} nome={arte.nome} empresa={arte.empresa} documento={arte.documento} />;
}