"use client";

import { useMemo, useState } from "react";
import Link from "next/link";
import { ArrowLeft, Check, ImageOff, Loader2, RotateCcw, Trash2, X } from "lucide-react";

export type ModeloEnviado = {
  id: string;
  user_id: string;
  nome: string;
  descricao: string | null;
  tipo: string;
  ramo: string | null;
  largura: number;
  altura: number;
  paginas: number;
  miniatura: string | null;
  autor_nome: string;
  autor_avatar: string | null;
  autor_loja: string | null;
  status: "pendente" | "aprovado" | "recusado";
  motivo: string | null;
  usos: number;
  avaliado_em: string | null;
  avaliado_por: string | null;
  created_at: string;
};

const TIPOS: Record<string, string> = { post: "Post para Instagram", carrossel: "Carrossel", story: "Story e Reels", banner: "Banner da loja", caneca: "Caneca" };
const RAMOS: Record<string, string> = { sublimacao: "Sublimação", grafica: "Gráfica", personalizados: "Personalizados" };
const ABAS: Array<{ chave: ModeloEnviado["status"]; rotulo: string }> = [
  { chave: "pendente", rotulo: "Pendentes" },
  { chave: "aprovado", rotulo: "Na galeria" },
  { chave: "recusado", rotulo: "Recusados" },
];

function quando(valor: string | null) {
  if (!valor) return "";
  const data = new Date(valor);
  return Number.isNaN(data.getTime()) ? "" : data.toLocaleString("pt-BR", { day: "2-digit", month: "2-digit", year: "numeric", hour: "2-digit", minute: "2-digit" });
}

function Avatar({ nome, src }: { nome: string; src: string | null }) {
  if (src) {
    /* eslint-disable-next-line @next/next/no-img-element */
    return <img src={src} alt="" className="h-8 w-8 shrink-0 rounded-full object-cover ring-2 ring-white" />;
  }
  return <span className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-violet-600 text-xs font-bold text-white">{nome.trim().slice(0, 1).toUpperCase() || "?"}</span>;
}

export default function PainelDosModelos({ inicial, faltaATabela }: { inicial: ModeloEnviado[]; faltaATabela: boolean }) {
  const [modelos, setModelos] = useState<ModeloEnviado[]>(inicial);
  const [aba, setAba] = useState<ModeloEnviado["status"]>("pendente");
  const [mexendo, setMexendo] = useState("");
  const [erro, setErro] = useState("");
  const [recusando, setRecusando] = useState<{ id: string; motivo: string } | null>(null);
  const [apagando, setApagando] = useState<ModeloEnviado | null>(null);
  const [ampliado, setAmpliado] = useState<ModeloEnviado | null>(null);

  const daAba = useMemo(() => modelos.filter((m) => m.status === aba), [modelos, aba]);
  const contagem = (status: ModeloEnviado["status"]) => modelos.filter((m) => m.status === status).length;

  async function mudar(id: string, acao: "aprovar" | "recusar" | "voltar", motivo = "") {
    setMexendo(id);
    setErro("");
    try {
      const resposta = await fetch("/api/modelos-da-comunidade", { method: "PATCH", headers: { "content-type": "application/json" }, body: JSON.stringify({ id, acao, motivo }) });
      const corpo = (await resposta.json().catch(() => null)) as { error?: string; modelo?: Partial<ModeloEnviado> } | null;
      if (!resposta.ok || !corpo?.modelo) throw new Error(corpo?.error || "Não foi possível atualizar o modelo.");
      setModelos((antes) => antes.map((m) => (m.id === id ? { ...m, ...corpo.modelo } : m)));
      setRecusando(null);
      setAmpliado(null);
    } catch (falha) {
      setErro(falha instanceof Error ? falha.message : "Não foi possível atualizar o modelo.");
    } finally {
      setMexendo("");
    }
  }

  async function apagar(modelo: ModeloEnviado) {
    setMexendo(modelo.id);
    setErro("");
    try {
      const resposta = await fetch(`/api/modelos-da-comunidade?id=${encodeURIComponent(modelo.id)}`, { method: "DELETE" });
      const corpo = (await resposta.json().catch(() => null)) as { error?: string } | null;
      if (!resposta.ok) throw new Error(corpo?.error || "Não foi possível apagar o modelo.");
      setModelos((antes) => antes.filter((m) => m.id !== modelo.id));
      setApagando(null);
      setAmpliado(null);
    } catch (falha) {
      setErro(falha instanceof Error ? falha.message : "Não foi possível apagar o modelo.");
    } finally {
      setMexendo("");
    }
  }

  const acoes = (m: ModeloEnviado, grande = false) => (
    <div className={`flex flex-wrap gap-2 ${grande ? "" : "mt-3"}`}>
      {m.status !== "aprovado" ? (
        <button type="button" disabled={mexendo === m.id} onClick={() => void mudar(m.id, "aprovar")} className="inline-flex items-center gap-1.5 rounded-xl bg-emerald-600 px-3 py-2 text-xs font-semibold text-white hover:bg-emerald-700 disabled:opacity-60" data-aprovar={m.id}>
          {mexendo === m.id ? <Loader2 size={14} className="animate-spin" /> : <Check size={14} />} Aprovar
        </button>
      ) : (
        <button type="button" disabled={mexendo === m.id} onClick={() => void mudar(m.id, "voltar")} className="inline-flex items-center gap-1.5 rounded-xl bg-white px-3 py-2 text-xs font-semibold text-slate-700 ring-1 ring-slate-200 hover:bg-slate-50 disabled:opacity-60">
          <RotateCcw size={14} /> Tirar da galeria
        </button>
      )}
      {m.status !== "recusado" ? (
        <button type="button" disabled={mexendo === m.id} onClick={() => setRecusando({ id: m.id, motivo: "" })} className="inline-flex items-center gap-1.5 rounded-xl bg-white px-3 py-2 text-xs font-semibold text-rose-700 ring-1 ring-rose-200 hover:bg-rose-50 disabled:opacity-60" data-recusar={m.id}>
          <X size={14} /> Recusar
        </button>
      ) : null}
      <button type="button" disabled={mexendo === m.id} onClick={() => setApagando(m)} className="inline-flex items-center gap-1.5 rounded-xl bg-white px-3 py-2 text-xs font-semibold text-slate-500 ring-1 ring-slate-200 hover:bg-slate-50 disabled:opacity-60" aria-label="Apagar">
        <Trash2 size={14} />
      </button>
    </div>
  );

  return (
    <div className="min-h-screen bg-slate-50/50 p-6 sm:p-10 font-sans">
      <div className="mx-auto max-w-[1180px]">
        <Link href="/" className="mb-6 inline-flex items-center gap-2 text-sm font-medium text-slate-500 hover:text-slate-900">
          <ArrowLeft size={16} /> Voltar
        </Link>
        <div className="mb-6">
          <h1 className="text-2xl font-semibold tracking-tight text-slate-900">Modelos da comunidade</h1>
          <p className="mt-1 text-sm text-slate-500">Artes que os assinantes publicaram como modelo. Aprovadas entram na galeria do KtaloguDesign de todas as empresas, com o nome e o avatar de quem fez.</p>
        </div>

        {faltaATabela ? <div className="mb-6 rounded-2xl border border-amber-200 bg-amber-50 p-4 text-sm text-amber-800">A tabela dos modelos da comunidade ainda não existe no banco: falta aplicar a migration 227.</div> : null}
        {erro ? <div className="mb-6 rounded-2xl border border-rose-200 bg-rose-50 p-4 text-sm text-rose-700">{erro}</div> : null}

        <div className="mb-6 flex w-fit gap-1 rounded-2xl bg-white p-1 shadow-sm ring-1 ring-slate-200">
          {ABAS.map(({ chave, rotulo }) => (
            <button key={chave} type="button" onClick={() => setAba(chave)} className={`flex items-center gap-2 rounded-xl px-4 py-2 text-sm font-semibold transition ${aba === chave ? "bg-slate-900 text-white" : "text-slate-600 hover:bg-slate-50"}`} data-aba={chave}>
              {rotulo}
              <span className={`rounded-full px-2 py-0.5 text-xs ${aba === chave ? "bg-white/20" : chave === "pendente" && contagem(chave) ? "bg-amber-100 text-amber-800" : "bg-slate-100 text-slate-500"}`}>{contagem(chave)}</span>
            </button>
          ))}
        </div>

        {!daAba.length ? (
          <div className="rounded-2xl border border-dashed border-slate-300 bg-white p-10 text-center text-sm text-slate-500">
            {aba === "pendente" ? "Nenhum modelo esperando aprovação." : aba === "aprovado" ? "Nenhum modelo da comunidade na galeria ainda." : "Nenhum modelo recusado."}
          </div>
        ) : (
          <div className="grid gap-5 sm:grid-cols-2 lg:grid-cols-3">
            {daAba.map((m) => (
              <div key={m.id} className="overflow-hidden rounded-2xl bg-white shadow-sm ring-1 ring-slate-200" data-modelo-enviado={m.id}>
                <button type="button" onClick={() => setAmpliado(m)} className="flex h-56 w-full items-center justify-center bg-slate-100 p-4" title="Ver maior">
                  {m.miniatura ? (
                    /* eslint-disable-next-line @next/next/no-img-element */
                    <img src={m.miniatura} alt={m.nome} className="max-h-full max-w-full rounded-lg object-contain shadow-md" />
                  ) : (
                    <span className="flex flex-col items-center gap-2 text-xs text-slate-400">
                      <ImageOff size={22} /> Sem prévia
                    </span>
                  )}
                </button>
                <div className="p-4">
                  <p className="font-semibold text-slate-900">{m.nome}</p>
                  <p className="mt-0.5 text-xs text-slate-500">
                    {TIPOS[m.tipo] || m.tipo}
                    {m.paginas > 1 ? ` · ${m.paginas} páginas` : ""}
                    {m.ramo ? ` · ${RAMOS[m.ramo] || m.ramo}` : ""} · {m.largura} × {m.altura}
                  </p>
                  {m.descricao ? <p className="mt-2 text-sm text-slate-600">{m.descricao}</p> : null}
                  <div className="mt-3 flex items-center gap-2">
                    <Avatar nome={m.autor_nome} src={m.autor_avatar} />
                    <div className="min-w-0">
                      <p className="truncate text-sm font-medium text-slate-800">{m.autor_nome}</p>
                      <p className="truncate text-xs text-slate-500">
                        {m.autor_loja ? `${m.autor_loja} · ` : ""}enviado em {quando(m.created_at)}
                      </p>
                    </div>
                  </div>
                  {m.status === "recusado" && m.motivo ? <p className="mt-3 rounded-xl bg-rose-50 p-2.5 text-xs text-rose-700">Motivo: {m.motivo}</p> : null}
                  {m.status === "aprovado" ? <p className="mt-3 text-xs text-emerald-700">Na galeria desde {quando(m.avaliado_em)} · usado {m.usos} {m.usos === 1 ? "vez" : "vezes"}</p> : null}
                  {acoes(m)}
                </div>
              </div>
            ))}
          </div>
        )}
      </div>

      {ampliado ? (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-slate-900/60 p-6" onMouseDown={(e) => e.target === e.currentTarget && setAmpliado(null)}>
          <div className="flex max-h-full w-full max-w-5xl flex-col overflow-hidden rounded-2xl bg-white shadow-xl md:flex-row">
            <div className="flex flex-1 items-center justify-center bg-slate-100 p-6">
              {ampliado.miniatura ? (
                /* eslint-disable-next-line @next/next/no-img-element */
                <img src={ampliado.miniatura} alt={ampliado.nome} className="max-h-[70vh] max-w-full rounded-lg object-contain shadow-lg" />
              ) : (
                <span className="text-sm text-slate-400">Sem prévia</span>
              )}
            </div>
            <div className="w-full shrink-0 p-6 md:w-[320px]">
              <div className="flex items-start justify-between gap-3">
                <h2 className="text-lg font-semibold text-slate-900">{ampliado.nome}</h2>
                <button type="button" onClick={() => setAmpliado(null)} className="rounded-full p-1 text-slate-400 hover:bg-slate-100" aria-label="Fechar">
                  <X size={18} />
                </button>
              </div>
              <p className="mt-1 text-sm text-slate-500">
                {TIPOS[ampliado.tipo] || ampliado.tipo}
                {ampliado.ramo ? ` · ${RAMOS[ampliado.ramo] || ampliado.ramo}` : ""}
              </p>
              {ampliado.descricao ? <p className="mt-3 text-sm text-slate-600">{ampliado.descricao}</p> : null}
              <div className="mt-4 flex items-center gap-2">
                <Avatar nome={ampliado.autor_nome} src={ampliado.autor_avatar} />
                <div>
                  <p className="text-sm font-medium text-slate-800">{ampliado.autor_nome}</p>
                  {ampliado.autor_loja ? <p className="text-xs text-slate-500">{ampliado.autor_loja}</p> : null}
                </div>
              </div>
              <div className="mt-6">{acoes(ampliado, true)}</div>
            </div>
          </div>
        </div>
      ) : null}

      {recusando ? (
        <div className="fixed inset-0 z-[60] flex items-center justify-center bg-slate-900/60 p-6">
          <div className="w-full max-w-md rounded-2xl bg-white p-6 shadow-xl">
            <h2 className="text-lg font-semibold text-slate-900">Recusar o modelo</h2>
            <p className="mt-1 text-sm text-slate-500">A empresa vê o motivo na galeria dela e pode ajustar e mandar de novo.</p>
            <textarea
              autoFocus
              value={recusando.motivo}
              onChange={(e) => setRecusando({ ...recusando, motivo: e.target.value.slice(0, 300) })}
              rows={4}
              placeholder="Ex.: a foto tem marca d'água; o texto está cortado na borda."
              className="mt-4 w-full rounded-xl border border-slate-200 p-3 text-sm outline-none focus:border-violet-500"
              data-motivo
            />
            <div className="mt-4 flex justify-end gap-2">
              <button type="button" onClick={() => setRecusando(null)} className="rounded-xl px-4 py-2 text-sm font-medium text-slate-600 hover:bg-slate-100">
                Cancelar
              </button>
              <button type="button" disabled={!recusando.motivo.trim() || mexendo === recusando.id} onClick={() => void mudar(recusando.id, "recusar", recusando.motivo)} className="rounded-xl bg-rose-600 px-4 py-2 text-sm font-semibold text-white hover:bg-rose-700 disabled:opacity-50" data-confirmar-recusa>
                Recusar
              </button>
            </div>
          </div>
        </div>
      ) : null}

      {apagando ? (
        <div className="fixed inset-0 z-[60] flex items-center justify-center bg-slate-900/60 p-6">
          <div className="w-full max-w-md rounded-2xl bg-white p-6 shadow-xl">
            <h2 className="text-lg font-semibold text-slate-900">Apagar &ldquo;{apagando.nome}&rdquo;?</h2>
            <p className="mt-2 text-sm text-slate-500">Sai da galeria e da lista de vez. As cópias que as empresas já fizeram continuam com elas.</p>
            <div className="mt-5 flex justify-end gap-2">
              <button type="button" onClick={() => setApagando(null)} className="rounded-xl px-4 py-2 text-sm font-medium text-slate-600 hover:bg-slate-100">
                Cancelar
              </button>
              <button type="button" disabled={mexendo === apagando.id} onClick={() => void apagar(apagando)} className="rounded-xl bg-slate-900 px-4 py-2 text-sm font-semibold text-white hover:bg-slate-800 disabled:opacity-50">
                Apagar
              </button>
            </div>
          </div>
        </div>
      ) : null}
    </div>
  );
}