"use client";

import { useEffect, useMemo, useState } from "react";
import { Download, X } from "lucide-react";

/**
 * Quem viu o aviso, e o que fez com ele.
 *
 * Abre por cima da listagem, e não numa página nova: a pergunta que traz alguém
 * aqui ("já viram?") é rápida, e voltar para a lista tem de ser um clique.
 */

type Situacao = "ciente" | "viu" | "nao_viu";

type Linha = {
  company_id: string;
  company_name: string;
  situacao: Situacao;
  quando: string | null;
  quem: string;
  ack_label: string | null;
};

type Resumo = {
  alcancadas: number;
  cientes: number;
  viram: number;
  nao_viram: number;
  fora_de_empresa: number;
};

const SITUACOES: Record<Situacao, { rotulo: string; ponto: string }> = {
  ciente: { rotulo: "Deu ciência", ponto: "bg-emerald-500" },
  viu: { rotulo: "Viu e saiu", ponto: "bg-amber-500" },
  nao_viu: { rotulo: "Ainda não viu", ponto: "bg-slate-300" },
};

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

export default function MetricasDoPopup({ popupId, aoFechar }: { popupId: string; aoFechar: () => void }) {
  const [carregando, setCarregando] = useState(true);
  const [erro, setErro] = useState("");
  const [titulo, setTitulo] = useState("");
  const [exigeCiencia, setExigeCiencia] = useState(false);
  const [resumo, setResumo] = useState<Resumo | null>(null);
  const [linhas, setLinhas] = useState<Linha[]>([]);
  const [filtro, setFiltro] = useState<"todas" | Situacao>("todas");

  useEffect(() => {
    let vivo = true;
    (async () => {
      setCarregando(true);
      setErro("");
      try {
        const resposta = await fetch(`/api/system-popups/metricas?popup_id=${encodeURIComponent(popupId)}`);
        const corpo = (await resposta.json().catch(() => null)) as
          | { error?: string; popup?: { title?: string; require_ack?: boolean }; resumo?: Resumo; linhas?: Linha[] }
          | null;
        if (!resposta.ok) throw new Error(corpo?.error || "Não foi possível carregar as métricas.");
        if (!vivo) return;
        setTitulo(String(corpo?.popup?.title || ""));
        setExigeCiencia(corpo?.popup?.require_ack === true);
        setResumo(corpo?.resumo ?? null);
        setLinhas(Array.isArray(corpo?.linhas) ? corpo.linhas : []);
      } catch (falha) {
        if (vivo) setErro(falha instanceof Error ? falha.message : "Não foi possível carregar as métricas.");
      } finally {
        if (vivo) setCarregando(false);
      }
    })();
    return () => {
      vivo = false;
    };
  }, [popupId]);

  const visiveis = useMemo(
    () => (filtro === "todas" ? linhas : linhas.filter((linha) => linha.situacao === filtro)),
    [linhas, filtro]
  );

  /* A planilha sai do navegador mesmo: é a mesma lista que está na tela, e
     mandar isso para o servidor só para virar arquivo seria volta desnecessária. */
  function baixarPlanilha() {
    const cabecalho = ["Empresa", "Situação", "Quando", "Quem", "Texto da ciência"];
    const linhasCsv = linhas.map((linha) =>
      [
        linha.company_name,
        SITUACOES[linha.situacao].rotulo,
        quandoLegivel(linha.quando),
        linha.quem,
        linha.ack_label ?? "",
      ]
        .map((celula) => `"${String(celula).replace(/"/g, '""')}"`)
        .join(";")
    );
    const csv = "" + [cabecalho.join(";"), ...linhasCsv].join("\r\n");
    const url = URL.createObjectURL(new Blob([csv], { type: "text/csv;charset=utf-8" }));
    const ancora = document.createElement("a");
    ancora.href = url;
    ancora.download = `popup-${popupId.slice(0, 8)}.csv`;
    ancora.click();
    URL.revokeObjectURL(url);
  }

  const cartoes = [
    { rotulo: "Empresas alcançadas", valor: resumo?.alcancadas ?? 0, cor: "from-indigo-700 to-indigo-500", nota: "no público do aviso" },
    { rotulo: "Deram ciência", valor: resumo?.cientes ?? 0, cor: "from-teal-700 to-teal-500", nota: exigeCiencia ? "marcaram a caixa" : "aviso sem ciência" },
    { rotulo: "Viram e saíram", valor: resumo?.viram ?? 0, cor: "from-amber-600 to-amber-400", nota: "fecharam sem marcar" },
    { rotulo: "Ainda não viram", valor: resumo?.nao_viram ?? 0, cor: "from-slate-600 to-slate-400", nota: "não abriram o sistema" },
  ];

  return (
    <div className="fixed inset-0 z-50 flex justify-end bg-slate-900/50" onClick={aoFechar}>
      <div
        className="flex h-full w-full max-w-[840px] flex-col bg-slate-50 shadow-2xl"
        onClick={(evento) => evento.stopPropagation()}
      >
        <div className="flex items-start justify-between gap-4 border-b border-slate-200 bg-white px-6 py-4">
          <div className="min-w-0">
            <p className="text-[11px] font-bold uppercase tracking-[0.12em] text-slate-400">Métricas do popup</p>
            <h2 className="mt-1 truncate text-lg font-semibold tracking-tight text-slate-900">{titulo || "Carregando…"}</h2>
          </div>
          <div className="flex items-center gap-2">
            <button
              type="button"
              onClick={baixarPlanilha}
              disabled={linhas.length === 0}
              className="inline-flex h-10 items-center gap-2 rounded-xl border border-slate-200 bg-white px-4 text-sm font-medium text-slate-700 transition hover:bg-slate-50 disabled:opacity-40"
            >
              <Download size={15} />
              Planilha
            </button>
            <button
              type="button"
              onClick={aoFechar}
              aria-label="Fechar"
              className="inline-flex h-10 w-10 items-center justify-center rounded-xl border border-slate-200 bg-white text-slate-500 transition hover:bg-slate-50"
            >
              <X size={16} />
            </button>
          </div>
        </div>

        <div className="min-h-0 flex-1 overflow-y-auto px-6 py-5">
          {erro ? (
            <div className="rounded-xl border border-rose-200 bg-rose-50 px-4 py-3 text-sm text-rose-700">{erro}</div>
          ) : null}

          <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
            {cartoes.map((cartao) => (
              <div key={cartao.rotulo} className={`rounded-2xl bg-gradient-to-br ${cartao.cor} p-4 text-white`}>
                <p className="text-[11px] font-bold uppercase tracking-[0.08em] opacity-85">{cartao.rotulo}</p>
                <p className="mt-1 text-3xl font-extrabold tracking-tight">{carregando ? "—" : cartao.valor}</p>
                <p className="text-xs opacity-80">{cartao.nota}</p>
              </div>
            ))}
          </div>

          <div className="mt-5 flex flex-wrap items-center gap-2">
            {(["todas", "ciente", "viu", "nao_viu"] as const).map((opcao) => (
              <button
                key={opcao}
                type="button"
                onClick={() => setFiltro(opcao)}
                className={[
                  "h-9 rounded-xl border px-3.5 text-sm font-medium transition",
                  filtro === opcao
                    ? "border-slate-900 bg-slate-900 text-white"
                    : "border-slate-200 bg-white text-slate-700 hover:bg-slate-50",
                ].join(" ")}
              >
                {opcao === "todas" ? "Todas" : SITUACOES[opcao].rotulo}
              </button>
            ))}
            <span className="ml-auto text-xs font-semibold text-slate-500">{visiveis.length} empresa(s)</span>
          </div>

          <div className="mt-3 overflow-hidden rounded-2xl border border-slate-200 bg-white">
            <div className="grid grid-cols-[minmax(0,1.6fr)_150px_120px] gap-3 border-b border-slate-200 px-5 py-3 text-[11px] font-bold uppercase tracking-[0.1em] text-slate-400">
              <span>Empresa</span>
              <span>Situação</span>
              <span>Quando</span>
            </div>

            {carregando ? (
              <p className="px-5 py-10 text-center text-sm text-slate-400">Carregando…</p>
            ) : visiveis.length === 0 ? (
              <p className="px-5 py-10 text-center text-sm text-slate-400">Nenhuma empresa nesta situação.</p>
            ) : (
              visiveis.map((linha) => (
                <div
                  key={linha.company_id}
                  className="grid grid-cols-[minmax(0,1.6fr)_150px_120px] items-center gap-3 border-b border-slate-100/70 px-5 py-3 text-sm last:border-b-0 hover:bg-slate-50/60"
                >
                  <div className="min-w-0">
                    <p className="truncate font-semibold text-slate-900">{linha.company_name}</p>
                    {linha.quem ? <p className="truncate text-xs text-slate-400">{linha.quem}</p> : null}
                  </div>
                  <span className="inline-flex items-center gap-2 text-[13px] font-semibold text-slate-700">
                    <i className={`h-2 w-2 rounded-full ${SITUACOES[linha.situacao].ponto}`} />
                    {SITUACOES[linha.situacao].rotulo}
                  </span>
                  <span className="text-[13px] text-slate-400">{quandoLegivel(linha.quando)}</span>
                </div>
              ))
            )}
          </div>

          {resumo && resumo.fora_de_empresa > 0 ? (
            <p className="mt-3 text-xs text-slate-400">
              {resumo.fora_de_empresa} acesso(s) sem empresa no cadastro não entram na conta acima.
            </p>
          ) : null}

          <p className="mt-4 text-xs leading-relaxed text-slate-400">
            &ldquo;Ainda não viu&rdquo; é empresa que não abriu o sistema desde que o aviso subiu. Se alguém da empresa
            deu ciência, a empresa inteira conta como ciente.
          </p>
        </div>
      </div>
    </div>
  );
}