"use client";

import { useMemo, useState } from "react";
import Link from "next/link";
import { ArrowLeft, BarChart3, ImageOff, Plus, Search, ShieldCheck, Trash2 } from "lucide-react";
import MetricasDoPopup from "./metricas-client";

type PopupLinha = {
  id: string;
  title: string;
  message: string | null;
  image_url: string | null;
  background_color: string;
  text_color: string;
  frequency: string;
  audience: string;
  require_ack: boolean;
  active: boolean;
  start_at: string | null;
  end_at: string | null;
  created_at: string | null;
  companies_count: number;
};

function dataCurta(valor: string | null | undefined) {
  if (!valor) return "";
  const data = new Date(valor);
  return Number.isNaN(data.getTime()) ? "" : data.toLocaleDateString("pt-BR");
}

function rotuloDaFrequencia(valor: string) {
  if (valor === "daily") return "Uma vez por dia";
  if (valor === "always") return "Toda vez que abrir";
  return "Uma vez por pessoa";
}

function periodo(inicio: string | null, fim: string | null) {
  const de = dataCurta(inicio);
  const ate = dataCurta(fim);
  if (de && ate) return `${de} até ${ate}`;
  if (de) return `A partir de ${de}`;
  if (ate) return `Até ${ate}`;
  return "Sem prazo";
}

export default function PopupsListClient({ initialRows }: { initialRows: PopupLinha[] }) {
  const [linhas, setLinhas] = useState<PopupLinha[]>(() => initialRows || []);
  const [busca, setBusca] = useState("");
  const [apagando, setApagando] = useState("");
  const [erro, setErro] = useState("");
  const [confirmando, setConfirmando] = useState<PopupLinha | null>(null);
  const [metricasDe, setMetricasDe] = useState<string>("");

  const filtradas = useMemo(() => {
    const alvo = busca.trim().toLowerCase();
    if (!alvo) return linhas;
    return linhas.filter((linha) =>
      `${linha.title} ${linha.message ?? ""}`.toLowerCase().includes(alvo)
    );
  }, [linhas, busca]);

  async function excluir(linha: PopupLinha) {
    setApagando(linha.id);
    setErro("");
    try {
      const resposta = await fetch(`/api/system-popups?id=${encodeURIComponent(linha.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 excluir o popup.");
      setLinhas((antes) => antes.filter((item) => item.id !== linha.id));
      setConfirmando(null);
    } catch (falha) {
      setErro(falha instanceof Error ? falha.message : "Não foi possível excluir o popup.");
    } finally {
      setApagando("");
    }
  }

  return (
    <div className="min-h-screen bg-slate-50/50 p-6 sm:p-10 font-sans">
      <div className="mx-auto max-w-[1080px]">
        <div className="flex flex-wrap items-center justify-between gap-4">
          <div>
            <Link href="/" className="inline-flex items-center gap-2 text-sm font-medium text-slate-500 hover:text-slate-900">
              <ArrowLeft size={16} />
              Voltar ao painel
            </Link>
            <h1 className="mt-3 text-2xl font-semibold tracking-tight text-slate-900">Popups do sistema</h1>
            <p className="mt-1 text-sm text-slate-500">
              O recado que abre no meio da tela quando a pessoa entra no sistema. Metade imagem, metade cor.
            </p>
          </div>
          <Link
            href="/popups/novo"
            className="inline-flex h-11 items-center gap-2 rounded-xl bg-slate-900 px-5 text-sm font-semibold text-white shadow-sm transition hover:bg-slate-800 active:scale-95"
          >
            <Plus size={16} />
            Novo popup
          </Link>
        </div>

        <div className="mt-6 flex items-center gap-2 rounded-xl border border-slate-200 bg-white px-3 shadow-sm">
          <Search size={16} className="text-slate-400" />
          <input
            value={busca}
            onChange={(evento) => setBusca(evento.target.value)}
            placeholder="Buscar por título ou texto"
            className="h-11 flex-1 border-0 bg-transparent text-sm text-slate-900 outline-none placeholder:text-slate-400"
          />
        </div>

        {erro ? (
          <div className="mt-4 rounded-xl border border-rose-200 bg-rose-50 px-4 py-3 text-sm text-rose-700">{erro}</div>
        ) : null}

        <div className="mt-4 grid gap-3">
          {filtradas.map((linha) => (
            <div
              key={linha.id}
              className="flex flex-wrap items-center gap-4 rounded-2xl border border-slate-200 bg-white p-4 shadow-sm"
            >
              {/* A miniatura repete as duas metades do popup: dá para reconhecer
                  o aviso na lista sem abrir. */}
              <div className="flex h-16 w-28 shrink-0 overflow-hidden rounded-xl border border-slate-200">
                {linha.image_url ? (
                  // eslint-disable-next-line @next/next/no-img-element
                  <img src={linha.image_url} alt="" className="h-full w-1/2 object-cover" />
                ) : (
                  <div className="flex h-full w-1/2 items-center justify-center bg-slate-100 text-slate-400">
                    <ImageOff size={16} />
                  </div>
                )}
                <div className="h-full w-1/2" style={{ background: linha.background_color }} />
              </div>

              <div className="min-w-[220px] flex-1">
                <div className="flex flex-wrap items-center gap-2">
                  <span className="text-sm font-semibold text-slate-900">{linha.title}</span>
                  {linha.require_ack ? (
                    <span
                      className="inline-flex items-center gap-1 rounded-full border border-indigo-200 bg-indigo-50 px-2 py-0.5 text-[11px] font-semibold text-indigo-700"
                      title="Só fecha com a caixa de ciência marcada"
                    >
                      <ShieldCheck size={12} />
                      Ciência
                    </span>
                  ) : null}
                  <span
                    className={[
                      "inline-flex items-center rounded-full border px-2.5 py-0.5 text-[11px] font-semibold",
                      linha.active
                        ? "border-emerald-200 bg-emerald-50 text-emerald-700"
                        : "border-slate-200 bg-slate-50 text-slate-600",
                    ].join(" ")}
                  >
                    {linha.active ? "No ar" : "Desligado"}
                  </span>
                </div>
                <p className="mt-1 line-clamp-1 text-xs text-slate-500">{linha.message || "Sem texto"}</p>
                <p className="mt-1 text-[11px] text-slate-400">
                  {rotuloDaFrequencia(linha.frequency)} · {periodo(linha.start_at, linha.end_at)} ·{" "}
                  {linha.audience === "selected" ? `${linha.companies_count} empresa(s)` : "Todas as empresas"}
                </p>
              </div>

              <div className="flex items-center gap-2">
                <button
                  type="button"
                  onClick={() => setMetricasDe(linha.id)}
                  title="Ver quem viu"
                  aria-label={`Métricas de ${linha.title}`}
                  className="inline-flex h-10 w-10 items-center justify-center rounded-xl border border-slate-200 bg-white text-slate-600 transition hover:bg-slate-50 hover:text-indigo-700"
                >
                  <BarChart3 size={16} />
                </button>
                <Link
                  href={`/popups/${linha.id}`}
                  className="inline-flex h-10 items-center rounded-xl border border-slate-200 bg-white px-4 text-sm font-medium text-slate-700 transition hover:bg-slate-50"
                >
                  Editar
                </Link>
                <button
                  type="button"
                  onClick={() => setConfirmando(linha)}
                  disabled={apagando === linha.id}
                  className="inline-flex h-10 items-center gap-2 rounded-xl border border-rose-200 bg-white px-4 text-sm font-medium text-rose-600 transition hover:bg-rose-50 disabled:opacity-50"
                >
                  <Trash2 size={15} />
                  Excluir
                </button>
              </div>
            </div>
          ))}

          {filtradas.length === 0 ? (
            <div className="rounded-2xl border border-dashed border-slate-300 bg-white px-6 py-12 text-center">
              <p className="text-sm font-medium text-slate-700">
                {linhas.length === 0 ? "Nenhum popup cadastrado ainda." : "Nada encontrado para essa busca."}
              </p>
              <p className="mt-1 text-xs text-slate-500">
                {linhas.length === 0 ? "Crie o primeiro e ele aparece para quem abrir o sistema." : "Tente outro termo."}
              </p>
            </div>
          ) : null}
        </div>
      </div>

      {metricasDe ? <MetricasDoPopup popupId={metricasDe} aoFechar={() => setMetricasDe("")} /> : null}

      {/* Confirmação em painel próprio: nada de janela do navegador. */}
      {confirmando ? (
        <div className="fixed inset-0 z-50 grid place-items-center bg-slate-900/50 p-4" onClick={() => setConfirmando(null)}>
          <div
            className="w-full max-w-md rounded-2xl bg-white p-6 shadow-xl"
            onClick={(evento) => evento.stopPropagation()}
          >
            <h2 className="text-lg font-semibold text-slate-900">Excluir este popup?</h2>
            <p className="mt-2 text-sm text-slate-500">
              &ldquo;{confirmando.title}&rdquo; sai do ar na hora, e o registro de quem já viu some junto. Não dá para
              desfazer.
            </p>
            <div className="mt-6 flex justify-end gap-2">
              <button
                type="button"
                onClick={() => setConfirmando(null)}
                className="inline-flex h-11 items-center rounded-xl border border-slate-200 bg-white px-5 text-sm font-medium text-slate-700 transition hover:bg-slate-50"
              >
                Voltar
              </button>
              <button
                type="button"
                onClick={() => void excluir(confirmando)}
                disabled={apagando === confirmando.id}
                className="inline-flex h-11 items-center rounded-xl bg-rose-600 px-5 text-sm font-semibold text-white transition hover:bg-rose-500 disabled:opacity-50"
              >
                {apagando === confirmando.id ? "Excluindo…" : "Excluir"}
              </button>
            </div>
          </div>
        </div>
      ) : null}
    </div>
  );
}