"use client";

import MarcaDoDesign from "./marca-do-design";
import { useDesignLiberado } from "./liberacao-do-design";
import type { VinculoComOrcamento } from "@/lib/banner-editor/artes";

/*
 * O atalho para o KtaloguDesign no item do orçamento (ao lado do "Adicionar
 * arte"): abre a janela de tamanhos do editor e a arte nova já nasce com o
 * nome que veio (o número do orçamento e o item) e ligada ao item (`vinculo`);
 * no editor, "Enviar para o orçamento" põe as páginas na arte do item. Com uma
 * arte já ligada ao item, o botão abre ela. Só aparece com o editor liberado
 * (beta). Abre em outra aba (o orçamento fica aberto, sem perder o que não foi
 * salvo) e é link comum, não do Next: a tela do editor é "isolada" e precisa
 * carregar inteira (ver proxy.ts).
 */
export const linkParaCriarArte = (nome?: string | null, vinculo?: VinculoComOrcamento | null) =>
  `/dashboard/design?criar=1${nome?.trim() ? `&nome=${encodeURIComponent(nome.trim().slice(0, 100))}` : ""}${vinculo ? `&orcamento=${vinculo.orcamento}${vinculo.item ? `&item=${vinculo.item}` : ""}` : ""}`;

/** Abrir uma arte guardada no KtaloguDesign. */
export const linkParaAbrirArte = (id: string) => `/dashboard/design?arte=${id}`;

export function BotaoDoDesignNoItem({ nome, vinculo, arteId = null, className = "" }: { nome: string; vinculo: VinculoComOrcamento; arteId?: string | null; className?: string }) {
  const liberado = useDesignLiberado();
  if (!liberado) return null;
  const rotulo = arteId ? "Abrir no KtaloguDesign" : "Criar no KtaloguDesign";
  return (
    <a
      href={arteId ? linkParaAbrirArte(arteId) : linkParaCriarArte(nome, vinculo)}
      target="_blank"
      rel="noreferrer"
      title={arteId ? "Abrir a arte deste item no KtaloguDesign" : "Criar a arte deste item no KtaloguDesign (ela fica ligada ao orçamento)"}
      className={`inline-flex items-center justify-center gap-2 whitespace-nowrap ${className}`}
      data-design-no-item={arteId ? "abrir" : "criar"}
    >
      <MarcaDoDesign size={14} className="shrink-0 text-[#7C3AED]" />
      <span>{rotulo}</span>
    </a>
  );
}