"use client";

import { useMemo, useState } from "react";

import type { PainelFiscal } from "@/lib/fiscal-owner";

import { dataEHora, moeda, plural, Selo, type Tom } from "./ui";

type Compra = PainelFiscal["compras"][number];
type Filtro = "todas" | "aprovada" | "pendente" | "sem_sucesso" | "estornada";

const STATUS: Record<string, { rotulo: string; tom: Tom }> = {
  pendente: { rotulo: "Aguardando pagamento", tom: "ambar" },
  aprovada: { rotulo: "Aprovada", tom: "verde" },
  recusada: { rotulo: "Recusada", tom: "vermelho" },
  cancelada: { rotulo: "Cancelada", tom: "cinza" },
  reembolsada: { rotulo: "Reembolsada", tom: "cinza" },
  contestada: { rotulo: "Contestada", tom: "vermelho" },
};

const FORMAS: Record<string, string> = {
  bank_transfer: "Pix",
  credit_card: "Cartão de crédito",
  debit_card: "Cartão de débito",
  prepaid_card: "Cartão pré-pago",
  ticket: "Boleto",
  account_money: "Saldo do Mercado Pago",
  digital_currency: "Linha de crédito",
  digital_wallet: "Carteira digital",
};

const DETALHES: Record<string, string> = {
  valor_divergente: "Valor pago diferente do pacote",
  expirada: "Expirou sem pagamento",
  cc_rejected_insufficient_amount: "Cartão sem limite",
  cc_rejected_bad_filled_security_code: "Código de segurança errado",
  cc_rejected_bad_filled_date: "Validade do cartão errada",
  cc_rejected_bad_filled_other: "Dados do cartão errados",
  cc_rejected_high_risk: "Recusado pela análise de risco",
  cc_rejected_call_for_authorize: "Banco pediu autorização",
  cc_rejected_card_disabled: "Cartão desabilitado",
  cc_rejected_other_reason: "Recusado pelo banco",
  pending_waiting_payment: "Esperando o pagamento",
  pending_waiting_transfer: "Esperando o Pix",
  expired: "Expirou sem pagamento",
};

function noFiltro(compra: Compra, filtro: Filtro) {
  if (filtro === "todas") return true;
  if (filtro === "sem_sucesso") return compra.status === "recusada" || compra.status === "cancelada";
  if (filtro === "estornada") return compra.status === "reembolsada" || compra.status === "contestada";
  return compra.status === filtro;
}

export default function AbaCompras({ painel }: { painel: PainelFiscal }) {
  const [filtro, setFiltro] = useState<Filtro>("todas");
  const compras = painel.compras;
  const filtradas = useMemo(() => compras.filter((c) => noFiltro(c, filtro)), [compras, filtro]);

  const opcoes: Array<[Filtro, string]> = [
    ["todas", "Todas"],
    ["aprovada", "Aprovadas"],
    ["pendente", "Aguardando"],
    ["sem_sucesso", "Recusadas"],
    ["estornada", "Estornadas"],
  ];

  return (
    <div className="grid grid-cols-1 gap-4">
      <div className="flex flex-wrap items-end justify-between gap-3">
        <div>
          <h2 className="text-base font-semibold text-slate-900">Compras de pacotes</h2>
          <p className="mt-0.5 text-sm text-slate-500">
            As {plural(compras.length, "mais recente", "mais recentes")} neste ambiente. O valor e a aprovação vêm sempre da consulta ao Mercado Pago.
          </p>
        </div>
        <div className="flex max-w-full gap-1 overflow-x-auto rounded-xl border border-slate-200 bg-white p-1 shadow-sm">
          {opcoes.map(([chave, rotulo]) => {
            const quantas = compras.filter((c) => noFiltro(c, chave)).length;
            return (
              <button
                key={chave}
                type="button"
                onClick={() => setFiltro(chave)}
                aria-pressed={filtro === chave}
                className={`inline-flex h-9 shrink-0 items-center gap-1.5 rounded-lg px-3 text-sm font-medium transition ${
                  filtro === chave ? "bg-slate-900 text-white" : "text-slate-600 hover:bg-slate-50"
                }`}
              >
                {rotulo}
                <span className={`text-[11px] tabular-nums ${filtro === chave ? "text-white/70" : "text-slate-400"}`}>{quantas}</span>
              </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-800">{compras.length === 0 ? "Nenhuma compra de pacote ainda." : "Nenhuma compra com esse filtro."}</p>
          <p className="mx-auto mt-1 max-w-md text-xs leading-5 text-slate-500">
            {compras.length === 0 ? "Quando uma empresa comprar um pacote na tela de Assinatura, a compra aparece aqui." : "Escolha outro filtro."}
          </p>
        </div>
      ) : (
        <div className="overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-sm">
          <ul className="divide-y divide-slate-100">
            {filtradas.map((compra) => {
              const status = STATUS[compra.status] ?? { rotulo: compra.status, tom: "cinza" as Tom };
              const detalhe = compra.detalhe ? DETALHES[compra.detalhe] ?? null : null;
              return (
                <li key={compra.id} className="flex flex-wrap items-center gap-x-4 gap-y-2 px-5 py-3.5">
                  <div className="min-w-0 flex-1 basis-[220px]">
                    <p className="truncate text-sm font-semibold text-slate-900">{compra.empresaNome}</p>
                    <p className="mt-0.5 text-xs text-slate-500">
                      {compra.pacoteNome} · {plural(compra.quantidade, "nota", "notas")}
                      {compra.formaPagamento ? ` · ${FORMAS[compra.formaPagamento] ?? compra.formaPagamento}` : ""}
                    </p>
                  </div>
                  <div className="flex flex-col items-start gap-1 sm:items-end">
                    <Selo tom={status.tom}>{status.rotulo}</Selo>
                    {detalhe && compra.status !== "aprovada" ? <span className="text-[11px] text-slate-500">{detalhe}</span> : null}
                  </div>
                  <div className="w-full text-left sm:w-40 sm:text-right">
                    <p className="text-sm font-semibold tabular-nums text-slate-900">{moeda(compra.preco)}</p>
                    <p className="text-[11px] text-slate-500">
                      {compra.aprovadaEm ? `Aprovada em ${dataEHora(compra.aprovadaEm)}` : `Criada em ${dataEHora(compra.criadaEm)}`}
                    </p>
                  </div>
                </li>
              );
            })}
          </ul>
        </div>
      )}
    </div>
  );
}