"use client";

import { useState } from "react";
import { CampoDecimal } from "@/components/ui/campo-decimal";
import { FORMATOS_DA_ARTE, GRUPOS_DOS_FORMATOS, LIMITE_DO_LADO, MINIMO_DO_LADO, medidaDeImpressao, pxDe, type FormatoDaArte, type GrupoDoFormato } from "@/lib/banner-editor/formatos";

/*
  A escolha de tamanho da arte: os prontos (loja, redes, anúncios, impressão)
  e o tamanho livre. Serve à galeria (criar uma arte) e ao "Redimensionar" do
  editor. Cada pronto mostra o formato desenhado na proporção certa.
*/

export function DesenhoDoFormato({ largura, altura, tamanho = 40, ativo = false }: { largura: number; altura: number; tamanho?: number; ativo?: boolean }) {
  const f = tamanho / Math.max(largura, altura);
  return (
    <span className="flex shrink-0 items-center justify-center" style={{ width: tamanho, height: tamanho }}>
      <span className={`block rounded-[4px] ${ativo ? "bg-[#7C3AED]" : "bg-[linear-gradient(135deg,#C4B5FD,#8B5CF6)]"}`} style={{ width: Math.max(6, largura * f), height: Math.max(6, altura * f) }} />
    </span>
  );
}

export type TamanhoEscolhido = { largura: number; altura: number; formato: string | null; nome: string; dpi?: number | null };

export function EscolhaDeTamanho({ atual, aoEscolher, textoDoBotao = "Usar este tamanho" }: { atual?: { largura: number; altura: number } | null; aoEscolher: (t: TamanhoEscolhido) => void; textoDoBotao?: string }) {
  const [largura, setLargura] = useState(atual?.largura || 1080);
  const [altura, setAltura] = useState(atual?.altura || 1080);
  /* Tamanho livre também em mm ou cm (com a resolução de impressão). */
  const [unidade, setUnidade] = useState<"px" | "mm" | "cm">("px");
  const [dpi, setDpi] = useState(300);
  const [medida, setMedida] = useState({ largura: 100, altura: 150 });
  const fator = unidade === "cm" ? 10 : 1;
  const emPx = unidade === "px" ? { largura, altura } : { largura: pxDe(medida.largura * fator, dpi), altura: pxDe(medida.altura * fator, dpi) };
  const grupos = Object.keys(GRUPOS_DOS_FORMATOS) as GrupoDoFormato[];
  const valido = emPx.largura >= MINIMO_DO_LADO && emPx.altura >= MINIMO_DO_LADO && emPx.largura <= LIMITE_DO_LADO && emPx.altura <= LIMITE_DO_LADO;
  const escolher = (f: FormatoDaArte) => aoEscolher({ largura: f.largura, altura: f.altura, formato: f.chave, nome: f.nome, dpi: f.dpi ?? null });
  return (
    <div>
      {grupos.map((grupo) => (
        <div key={grupo} className="mb-4">
          <p className="mb-1.5 text-[11px] font-bold uppercase tracking-[0.12em] text-[#8A849E]">{GRUPOS_DOS_FORMATOS[grupo]}</p>
          <div className="grid grid-cols-2 gap-1.5">
            {FORMATOS_DA_ARTE.filter((f) => f.grupo === grupo).map((f) => {
              const ativo = atual?.largura === f.largura && atual?.altura === f.altura;
              return (
                <button key={f.chave} type="button" onClick={() => escolher(f)} className={`flex items-center gap-2.5 rounded-[10px] px-2.5 py-2 text-left transition ${ativo ? "bg-[#F1ECFF] ring-2 ring-[#8B5CF6]" : "hover:bg-[#F6F4FB]"}`}>
                  <DesenhoDoFormato largura={f.largura} altura={f.altura} tamanho={30} ativo={ativo} />
                  <span className="min-w-0">
                    <span className="block truncate text-[12.5px] font-semibold text-[#1F1B2E]">{f.nome}</span>
                    <span className="block truncate text-[10.5px] text-[#8A849E]">{f.dpi ? medidaDeImpressao(f.largura, f.altura, f.dpi) : `${f.largura} × ${f.altura}`}</span>
                  </span>
                </button>
              );
            })}
          </div>
        </div>
      ))}
      <div className="rounded-[12px] bg-[#F6F4FB] p-3">
        <div className="mb-2 flex items-center justify-between gap-2">
          <p className="text-[12px] font-bold text-[#1F1B2E]">Tamanho livre</p>
          <div className="flex rounded-[8px] bg-white p-0.5 ring-1 ring-[#E6E3EE]">
            {(["px", "mm", "cm"] as const).map((u) => (
              <button key={u} type="button" onClick={() => setUnidade(u)} className={`rounded-[6px] px-2 py-0.5 text-[11.5px] font-bold ${unidade === u ? "bg-[#7C3AED] text-white" : "text-[#6B6584]"}`}>
                {u}
              </button>
            ))}
          </div>
        </div>
        {unidade === "px" ? (
          <div className="flex items-center gap-2">
            <CampoDecimal valor={largura} aoMudar={(v) => setLargura(Math.round(v))} casas={0} aria-label="Largura" className="h-9 w-full min-w-0 rounded-[8px] border border-[#E6E3EE] bg-white px-2.5 text-[13px] outline-none focus:border-[#8B5CF6]" />
            <span className="text-[#8A849E]">×</span>
            <CampoDecimal valor={altura} aoMudar={(v) => setAltura(Math.round(v))} casas={0} aria-label="Altura" className="h-9 w-full min-w-0 rounded-[8px] border border-[#E6E3EE] bg-white px-2.5 text-[13px] outline-none focus:border-[#8B5CF6]" />
          </div>
        ) : (
          <>
            <div className="flex items-center gap-2">
              <CampoDecimal valor={medida.largura} aoMudar={(v) => setMedida((m) => ({ ...m, largura: v }))} casas={1} aria-label={`Largura em ${unidade}`} className="h-9 w-full min-w-0 rounded-[8px] border border-[#E6E3EE] bg-white px-2.5 text-[13px] outline-none focus:border-[#8B5CF6]" />
              <span className="text-[#8A849E]">×</span>
              <CampoDecimal valor={medida.altura} aoMudar={(v) => setMedida((m) => ({ ...m, altura: v }))} casas={1} aria-label={`Altura em ${unidade}`} className="h-9 w-full min-w-0 rounded-[8px] border border-[#E6E3EE] bg-white px-2.5 text-[13px] outline-none focus:border-[#8B5CF6]" />
            </div>
            <div className="mt-2 flex items-center justify-between gap-2">
              <span className="text-[11.5px] font-semibold text-[#4B4760]">Resolução</span>
              <div className="flex rounded-[8px] bg-white p-0.5 ring-1 ring-[#E6E3EE]">
                {[72, 150, 300].map((v) => (
                  <button key={v} type="button" title={v === 300 ? "Cartão, convite, adesivo" : v === 150 ? "Folheto, cartaz" : "Banner e lona"} onClick={() => setDpi(v)} className={`rounded-[6px] px-2 py-0.5 text-[11.5px] font-bold ${dpi === v ? "bg-[#7C3AED] text-white" : "text-[#6B6584]"}`}>
                    {v} ppp
                  </button>
                ))}
              </div>
            </div>
            <p className="mt-1.5 text-[11px] text-[#8A849E]">
              Fica com {emPx.largura} × {emPx.altura} px.
            </p>
          </>
        )}
        {!valido ? <p className="mt-1.5 text-[11.5px] font-semibold text-[#BE123C]">{unidade === "px" ? `Cada lado entre ${MINIMO_DO_LADO} e ${LIMITE_DO_LADO} px.` : `Grande demais nessa resolução (cada lado até ${LIMITE_DO_LADO} px): baixe a resolução.`}</p> : null}
        <button
          type="button"
          disabled={!valido}
          onClick={() => aoEscolher({ ...emPx, formato: null, nome: "Tamanho livre", dpi: unidade === "px" ? null : dpi })}
          className="mt-2.5 flex h-9 w-full items-center justify-center rounded-[8px] bg-[#7C3AED] text-[12.5px] font-bold text-white transition hover:bg-[#6D28D9] disabled:opacity-50"
        >
          {textoDoBotao}
        </button>
      </div>
    </div>
  );
}

/* Os tamanhos que a cópia oferece (os que mais se usam juntos). */
const TAMANHOS_DAS_COPIAS = ["post-retrato", "post", "story", "banner-loja", "capa-facebook", "youtube"];

/**
 * "Copiar em outros tamanhos": a mesma arte já encaixada em cada tamanho
 * marcado, cada um uma arte nova em "Suas artes" (a de agora não muda).
 */
export function CopiasEmOutrosTamanhos({ atual, criando, aoCriar }: { atual: { largura: number; altura: number }; criando: boolean; aoCriar: (formatos: FormatoDaArte[]) => void }) {
  const opcoes = TAMANHOS_DAS_COPIAS.map((chave) => FORMATOS_DA_ARTE.find((f) => f.chave === chave)).filter((f): f is FormatoDaArte => Boolean(f) && !(f!.largura === atual.largura && f!.altura === atual.altura));
  const [marcados, setMarcados] = useState<string[]>(() => opcoes.slice(0, 3).map((f) => f.chave));
  const escolhidos = opcoes.filter((f) => marcados.includes(f.chave));
  return (
    <div className="mb-4 rounded-[12px] bg-[#F6F4FB] p-3" data-copias-em-tamanhos>
      <p className="text-[12.5px] font-bold text-[#1F1B2E]">Copiar em outros tamanhos</p>
      <p className="mb-2.5 mt-0.5 text-[11.5px] leading-snug text-[#8A849E]">Cada tamanho vira uma arte nova, já encaixada, em Suas artes. Esta não muda.</p>
      <div className="grid grid-cols-2 gap-1">
        {opcoes.map((f) => {
          const ligado = marcados.includes(f.chave);
          return (
            <label key={f.chave} className={`flex cursor-pointer items-center gap-2 rounded-[9px] px-2 py-1.5 transition ${ligado ? "bg-white ring-1 ring-[#C4B5FD]" : "hover:bg-white/70"}`}>
              <input type="checkbox" checked={ligado} onChange={(e) => setMarcados((m) => (e.target.checked ? [...m, f.chave] : m.filter((c) => c !== f.chave)))} className="h-3.5 w-3.5 accent-[#7C3AED]" data-copia={f.chave} />
              <DesenhoDoFormato largura={f.largura} altura={f.altura} tamanho={22} ativo={ligado} />
              <span className="min-w-0 truncate text-[12px] font-semibold text-[#1F1B2E]">{f.nome}</span>
            </label>
          );
        })}
      </div>
      <button type="button" disabled={criando || !escolhidos.length} onClick={() => aoCriar(escolhidos)} className="mt-2.5 flex h-10 w-full items-center justify-center rounded-[10px] bg-[#7C3AED] text-[13px] font-bold text-white transition hover:bg-[#6D28D9] disabled:opacity-50" data-criar-copias>
        {criando ? "Criando as cópias…" : escolhidos.length === 1 ? "Criar 1 cópia" : `Criar ${escolhidos.length} cópias`}
      </button>
    </div>
  );
}