"use client";

import { useCallback, useEffect, useState } from "react";
import { Check, Copy, CreditCard, Loader2 } from "lucide-react";

import { Anel, CabecalhoDoPainel, Etiqueta, Eyebrow, FaixaDeAcao, NumeroAnimado, Opcao, Painel, Preco } from "@/components/assinatura/primitivos";
import { dataCurta, moeda, SeloDoStatus } from "@/components/fiscal/comum";
import { PacotesDeNotas, type PainelDeNotas } from "@/components/fiscal/pacotes-de-notas";
import { AbaProdutosDigitais } from "@/components/live/aba-produtos-digitais";
import { Aviso } from "@/components/ui/aviso";
import { PageHeader } from "@/components/ui/page-header";
import {
  acaoDoPlano,
  ANO_NO_MENSAL,
  ANUAL_POR_MES,
  ECONOMIA_DO_ANUAL,
  ECONOMIA_DO_ANUAL_PORCENTO,
  PLANOS,
  situacaoDaAssinatura,
  type Assinatura,
  type DadosDaAssinatura,
  type EstadoDaConta,
  type SituacaoDaAssinatura,
} from "@/lib/assinatura";
import type { TomDoStatus } from "@/lib/fiscal/status";

type Aba = "plano" | "notas" | "digitais";
type ChaveDoPlano = keyof typeof PLANOS;

/** O que `/api/assinatura/situacao` devolve. */
type SituacaoDaConta = {
  origem: EstadoDaConta["origem"];
  plano: ChaveDoPlano | null;
  renovaSozinha: boolean;
  metodo: string | null;
  proximaCobranca: string | null;
  pagamentoRecusado: boolean;
  diasDeCredito: number;
  historico: Array<{
    pedido: string;
    plano: string | null;
    tipo: string | null;
    valor: number | null;
    metodo: string | null;
    parcelas: number | null;
    status: string;
    data: string | null;
    estornadoEm: string | null;
  }>;
};

const METODO: Record<string, string> = { credit_card: "Cartão", pix: "Pix", pix_auto: "Pix automático", boleto: "Boleto", debit_card: "Débito", picpay: "PicPay" };
const STATUS_DO_PAGAMENTO: Record<string, { tom: TomDoStatus; rotulo: string }> = {
  paid: { tom: "bom", rotulo: "Pago" },
  refunded: { tom: "neutro", rotulo: "Reembolsado" },
  refund_requested: { tom: "andamento", rotulo: "Reembolso pedido" },
  chargedback: { tom: "ruim", rotulo: "Contestado" },
  refused: { tom: "ruim", rotulo: "Recusado" },
};

const SELO: Record<SituacaoDaAssinatura, { tom: TomDoStatus; rotulo: string }> = {
  ativa: { tom: "bom", rotulo: "Ativa" },
  teste: { tom: "andamento", rotulo: "Período de teste" },
  expirada: { tom: "ruim", rotulo: "Vencida" },
  inativa: { tom: "neutro", rotulo: "Inativa" },
  "sem-registro": { tom: "neutro", rotulo: "Sem assinatura" },
};

/* O período de cada plano, para o anel saber o tamanho do círculo inteiro. */
const DIAS_DO_PERIODO: Record<string, number> = { Anual: 365, Mensal: 30 };

/* O mesmo que a página pública de preços promete. */
const INCLUSO = ["Orçamentos, pedidos e produtos sem limite", "Loja virtual no seu domínio", "Equipe inteira, sem cobrar por usuário", "Suporte no WhatsApp"];

function texto(valor: unknown) {
  return typeof valor === "string" && valor.trim() ? valor.trim() : null;
}

/** A rota devolve `plan` (users_app) e `company`; o que falta num vem do outro. */
function lerAssinatura(json: { plan?: Record<string, unknown> | null; company?: Record<string, unknown> | null } | null) {
  const bruto = { ...(json?.company ?? {}), ...(json?.plan ?? {}) };
  const dados: DadosDaAssinatura = {
    plan: texto(bruto.plan),
    plan_name: texto(bruto.plan_name),
    status: texto(bruto.status) ?? texto(bruto.subscription_status),
    expires_at: texto(bruto.expires_at) ?? texto(bruto.subscription_expires_at),
  };
  const criadaEm = texto(bruto.created_at);
  const desde = criadaEm && Number.isFinite(new Date(criadaEm).getTime()) ? new Date(criadaEm).toLocaleDateString("pt-BR", { month: "long", year: "numeric" }) : null;
  return { dados, desde };
}

/* `?aba=notas` (volta do pagamento) e `#notas` (links de outras telas) abrem a aba de notas; `?aba=digitais`, a dos produtos digitais. */
function abaPedidaNaUrl(): Aba {
  const busca = new URLSearchParams(window.location.search);
  if (busca.get("aba") === "digitais" || window.location.hash === "#digitais") return "digitais";
  return busca.get("aba") === "notas" || window.location.hash === "#notas" ? "notas" : "plano";
}

export default function AssinaturaCliente() {
  const [assinatura, setAssinatura] = useState<Assinatura | null>(null);
  const [desde, setDesde] = useState<string | null>(null);
  const [erro, setErro] = useState<string | null>(null);
  const [aba, setAba] = useState<Aba>("plano");
  const [saldoDeNotas, setSaldoDeNotas] = useState<number | null>(null);
  const [situacaoDaConta, setSituacaoDaConta] = useState<SituacaoDaConta | null>(null);
  /* Produtos digitais (e o KtaloguLive) só para as empresas liberadas. */
  const [digitaisLiberados, setDigitaisLiberados] = useState(false);

  useEffect(() => {
    let vivo = true;
    fetch("/api/assinatura/situacao", { cache: "no-store" })
      .then((res) => (res.ok ? res.json() : null))
      .then((json: SituacaoDaConta | null) => {
        if (vivo && json && typeof json.origem === "string") setSituacaoDaConta(json);
      })
      .catch(() => undefined);
    return () => {
      vivo = false;
    };
  }, []);

  useEffect(() => {
    let vivo = true;
    (async () => {
      try {
        const res = await fetch("/api/company/users", { cache: "no-store" });
        if (!res.ok && res.status !== 401) throw new Error("Não foi possível ler sua assinatura agora.");
        const json = res.ok ? await res.json().catch(() => null) : null;
        const lida = lerAssinatura(json);
        const situacao = situacaoDaAssinatura(lida.dados);
        if (!vivo) return;
        setAssinatura(situacao);
        setDesde(lida.desde);
        const liberados = (json as { recursos?: { digitais?: boolean } } | null)?.recursos?.digitais === true;
        setDigitaisLiberados(liberados);
        const pedida = abaPedidaNaUrl();
        setAba(situacao.ativa && (pedida !== "digitais" || liberados) ? pedida : "plano");
      } catch (e) {
        if (!vivo) return;
        setErro(e instanceof Error ? e.message : "Não foi possível ler sua assinatura agora.");
        setAssinatura(situacaoDaAssinatura(null));
      }
    })();
    return () => {
      vivo = false;
    };
  }, []);

  const trocarAba = (nova: Aba) => {
    setAba(nova);
    const url = new URL(window.location.href);
    if (nova === "notas" || nova === "digitais") url.searchParams.set("aba", nova);
    else url.searchParams.delete("aba");
    url.searchParams.delete("compra");
    url.hash = "";
    window.history.replaceState(window.history.state, "", url);
  };

  const guardarSaldo = useCallback((painel: PainelDeNotas) => setSaldoDeNotas(painel.saldo.disponiveis), []);

  const podeVerNotas = Boolean(assinatura?.ativa);
  const podeVerDigitais = Boolean(assinatura?.ativa) && digitaisLiberados;

  return (
    <div className="space-y-6">
      <PageHeader eyebrow="Sua conta" title="Assinatura" subtitle="O plano do Ktalogu e os pacotes de notas fiscais." />

      {!assinatura ? (
        <div className="flex justify-center py-16">
          <Loader2 className="h-7 w-7 animate-spin text-[var(--ks-color-primary)]" />
        </div>
      ) : (
        <>
          <div className="flex items-center gap-x-7 border-b border-[var(--ks-color-border-subtle)]">
            {(
              [
                { chave: "plano", rotulo: "Plano Ktalogu", mostrar: true },
                { chave: "notas", rotulo: "Notas fiscais", mostrar: podeVerNotas },
                { chave: "digitais", rotulo: "Produtos Digitais", mostrar: podeVerDigitais },
              ] as const
            )
              .filter((item) => item.mostrar)
              .map((item) => {
                const ativa = aba === item.chave;
                return (
                  <button
                    key={item.chave}
                    type="button"
                    onClick={() => trocarAba(item.chave)}
                    className={`-mb-px flex items-center gap-2 whitespace-nowrap border-b-2 pb-3 text-[15px] font-semibold transition-colors ${
                      ativa ? "border-[var(--ks-color-primary)] text-[var(--ks-color-primary)]" : "border-transparent text-[var(--ks-color-text-soft)] hover:text-[var(--ks-color-text-primary)]"
                    }`}
                  >
                    {item.rotulo}
                    {item.chave === "notas" && saldoDeNotas !== null ? (
                      <span
                        className={`ks-num rounded-full px-2 text-[11px] font-bold ${
                          saldoDeNotas <= 0 ? "bg-rose-500 text-white" : ativa ? "bg-[var(--ks-color-primary)] text-white" : "bg-[var(--ks-color-bg-inset)] text-[var(--ks-color-text-muted)]"
                        }`}
                      >
                        {Math.max(0, saldoDeNotas)}
                      </span>
                    ) : null}
                  </button>
                );
              })}
          </div>

          <section hidden={aba !== "plano"}>
            <AbaDoPlano assinatura={assinatura} situacao={situacaoDaConta} desde={desde} erro={erro} aoFecharErro={() => setErro(null)} />
          </section>

          {podeVerNotas ? (
            <section id="notas" className="scroll-mt-6" hidden={aba !== "notas"}>
              <PacotesDeNotas aoCarregar={guardarSaldo} />
            </section>
          ) : null}

          {podeVerDigitais && aba === "digitais" ? (
            <section id="digitais" className="scroll-mt-6">
              <AbaProdutosDigitais />
            </section>
          ) : null}
        </>
      )}
    </div>
  );
}

/* ------------------------------------------------------------------ */
/* Aba: o plano do Ktalogu                                             */
/* ------------------------------------------------------------------ */

function AbaDoPlano({
  assinatura,
  situacao,
  desde,
  erro,
  aoFecharErro,
}: {
  assinatura: Assinatura;
  situacao: SituacaoDaConta | null;
  desde: string | null;
  erro: string | null;
  aoFecharErro: () => void;
}) {
  const selo = SELO[assinatura.situacao];
  const venceu = assinatura.situacao === "expirada";
  const dias = assinatura.diasRestantes ?? 0;
  const periodo = DIAS_DO_PERIODO[assinatura.plano] ?? null;
  const mostrarAnel = Boolean(assinatura.venceEm) && !venceu && periodo !== null;
  const planoAtual: ChaveDoPlano | null =
    situacao?.plano ?? (assinatura.plano === PLANOS.anual.nome ? "anual" : assinatura.plano === PLANOS.mensal.nome ? "mensal" : null);

  /* Começa marcado no plano que a empresa já tem; sem plano, no anual. */
  const [escolhido, setEscolhido] = useState<ChaveDoPlano>(planoAtual ?? "anual");
  const plano = PLANOS[escolhido];
  const conta: EstadoDaConta = {
    origem: situacao?.origem ?? (assinatura.situacao === "sem-registro" ? "nenhuma" : "antiga"),
    plano: planoAtual,
    ativa: assinatura.ativa,
    renovaSozinha: Boolean(situacao?.renovaSozinha),
    diasRestantes: assinatura.diasRestantes ?? 0,
  };
  const acao = acaoDoPlano(conta, escolhido);
  const ehUpgrade = conta.ativa && conta.origem === "nova" && planoAtual === "mensal";

  /* O link com a marca da empresa faz a compra cair nesta conta mesmo com
     outro e-mail. Enquanto ele não chega (ou se falhar), vale o link comum:
     aí a Cakto liga a compra pelo e-mail de quem pagou. */
  const [links, setLinks] = useState<Record<ChaveDoPlano, string> | null>(null);
  useEffect(() => {
    let vivo = true;
    fetch("/api/assinatura/link", { cache: "no-store" })
      .then((res) => (res.ok ? res.json() : null))
      .then((json: Partial<Record<ChaveDoPlano, unknown>> | null) => {
        if (!vivo || !json || typeof json.mensal !== "string" || typeof json.anual !== "string") return;
        setLinks({ mensal: json.mensal, anual: json.anual });
      })
      .catch(() => undefined);
    return () => {
      vivo = false;
    };
  }, []);
  const link = links?.[escolhido] ?? plano.link;

  return (
    <div className="space-y-6">
      {erro ? (
        <Aviso tom="ruim" aoFechar={aoFecharErro}>
          {erro}
        </Aviso>
      ) : null}

      {situacao?.pagamentoRecusado && assinatura.ativa ? (
        <Aviso tom="ruim" titulo="Não conseguimos cobrar a renovação">
          Tentamos cobrar a renovação e o pagamento foi recusado. Confira o cartão usado na assinatura ou renove abaixo. Se o pagamento não entrar, o acesso fecha no dia seguinte ao vencimento.
        </Aviso>
      ) : null}

      {!assinatura.ativa && !erro ? (
        assinatura.situacao === "sem-registro" ? (
          <Aviso tom="atencao" titulo="Não encontramos uma assinatura para esta conta">
            Escolha ao lado como quer pagar. Se você já pagou, fale com o suporte e a gente resolve.
          </Aviso>
        ) : (
          <Aviso tom="atencao" titulo={venceu ? "Sua assinatura venceu" : "Sua assinatura está inativa"}>
            O painel fica fechado até regularizar. Escolha como quer pagar: assim que o pagamento for confirmado, o acesso volta.
          </Aviso>
        )
      ) : null}

      <div className="grid gap-6 lg:grid-cols-12 lg:items-start">
        {/* O que a empresa tem hoje */}
        <Painel className="lg:col-span-5 xl:col-span-4">
          <div className="p-6">
            <div className="flex items-start justify-between gap-3">
              <Eyebrow>Seu plano</Eyebrow>
              <SeloDoStatus tom={selo.tom} rotulo={selo.rotulo} />
            </div>
            <p className="mt-1 text-[30px] font-extrabold leading-none tracking-tight text-[var(--ks-color-text-primary)]">{assinatura.plano}</p>

            <div className="mt-6 flex items-center gap-5">
              {mostrarAnel ? (
                <Anel fracao={periodo ? Math.min(1, dias / periodo) : 0}>
                  <NumeroAnimado valor={dias} className="text-2xl font-extrabold text-[var(--ks-color-text-primary)]" />
                  <span className="mt-0.5 text-[10px] font-bold uppercase tracking-[0.12em] text-[var(--ks-color-text-soft)]">{dias === 1 ? "dia" : "dias"}</span>
                </Anel>
              ) : null}
              <div className="min-w-0 text-sm leading-6 text-[var(--ks-color-text-muted)]">
                {assinatura.venceEm ? (
                  <>
                    <p className="font-semibold text-[var(--ks-color-text-primary)]">
                      {venceu ? "Venceu em" : "Válido até"} {dataCurta(assinatura.venceEm.toISOString())}
                    </p>
                    <p>
                      {venceu
                        ? "Renove para voltar a usar o painel."
                        : dias === 0
                          ? "Vence hoje."
                          : `${dias} ${dias === 1 ? "dia restante" : "dias restantes"}${periodo && dias <= periodo ? ` de ${periodo}` : ""}`}
                    </p>
                  </>
                ) : (
                  <p>{assinatura.situacao === "sem-registro" ? "Nenhuma assinatura encontrada para esta conta." : "Sem data de vencimento registrada."}</p>
                )}
                {situacao?.renovaSozinha && situacao.proximaCobranca ? (
                  <p>
                    Renova sozinho em <span className="font-semibold text-[var(--ks-color-text-primary)]">{dataCurta(situacao.proximaCobranca)}</span>
                    {situacao.metodo ? ` · ${METODO[situacao.metodo] ?? situacao.metodo}` : ""}
                  </p>
                ) : planoAtual && conta.origem === "nova" ? (
                  <p>
                    Renovação: <span className="ks-num font-semibold text-[var(--ks-color-text-primary)]">{moeda(PLANOS[planoAtual].preco)}</span> {PLANOS[planoAtual].periodo}
                  </p>
                ) : conta.origem === "antiga" && assinatura.ativa ? (
                  <p>Plano com o preço antigo. Na renovação, valem os planos novos.</p>
                ) : null}
                {situacao?.diasDeCredito ? <p>Inclui {situacao.diasDeCredito} dias que sobraram do período anterior.</p> : null}
              </div>
            </div>
          </div>
          {desde ? (
            <p className="border-t border-[var(--ks-color-border-subtle)] px-6 py-3 text-xs text-[var(--ks-color-text-soft)]">Com a gente desde {desde}</p>
          ) : null}
        </Painel>

        {/* Como pagar */}
        <Painel className="lg:col-span-7 xl:col-span-8" atraso={0.06}>
          <CabecalhoDoPainel titulo="Como você quer pagar" texto="Um plano só. Os dois liberam o sistema inteiro para a equipe toda." />

          <div role="radiogroup" aria-label="Forma de pagamento" className="grid gap-4 p-6 md:grid-cols-2">
            <Opcao
              selecionada={escolhido === "mensal"}
              aoEscolher={() => setEscolhido("mensal")}
              titulo="Mensal"
              etiqueta={planoAtual === "mensal" ? <Etiqueta>Seu plano atual</Etiqueta> : undefined}
            >
              <Preco valor={moeda(PLANOS.mensal.preco)} unidade={PLANOS.mensal.periodo} />
              <span className="text-sm leading-6 text-[var(--ks-color-text-muted)]">Sem fidelidade. Cancela quando quiser, sem multa.</span>
            </Opcao>

            <Opcao
              selecionada={escolhido === "anual"}
              aoEscolher={() => setEscolhido("anual")}
              titulo="Anual"
              etiqueta={<Etiqueta>{planoAtual === "anual" ? "Seu plano atual" : ehUpgrade ? "⚡ Upgrade" : "Sai mais barato"}</Etiqueta>}
            >
              <Preco valor={moeda(PLANOS.anual.preco)} unidade={PLANOS.anual.periodo} />
              <span className="text-sm leading-6 text-[var(--ks-color-text-muted)]">
                <span className="ks-num font-semibold text-[var(--ks-color-text-primary)]">{moeda(ANUAL_POR_MES)}</span> por mês. Economiza{" "}
                <span className="ks-num font-semibold text-[var(--ks-color-text-primary)]">{moeda(ECONOMIA_DO_ANUAL)}</span> ({ECONOMIA_DO_ANUAL_PORCENTO}%) frente aos{" "}
                <span className="ks-num">{moeda(ANO_NO_MENSAL)}</span> do mensal.
              </span>
            </Opcao>
          </div>

          <FaixaDeAcao
            resumo={
              <>
                <span className="font-semibold text-[var(--ks-color-text-primary)]">{plano.nome}</span> · <span className="ks-num">{moeda(plano.preco)}</span> {plano.periodo}
                {escolhido === "anual" ? (
                  <>
                    {" "}
                    · <span className="ks-num">{moeda(ANUAL_POR_MES)}</span> por mês
                  </>
                ) : null}
              </>
            }
          >
            {acao.podeComprar ? (
              <a href={link} target="_blank" rel="noopener noreferrer" className="ks-button ks-button-primary w-full sm:w-auto">
                {acao.tipo === "upgrade" ? null : <CreditCard size={16} />}
                {acao.botao}
              </a>
            ) : (
              <span className="text-sm font-semibold text-[var(--ks-color-text-soft)]">
                Disponível mais perto do vencimento
              </span>
            )}
          </FaixaDeAcao>

          {acao.explicacao ? (
            <p className="border-t border-[var(--ks-color-border-subtle)] px-6 py-3 text-sm leading-6 text-[var(--ks-color-text-muted)]">{acao.explicacao}</p>
          ) : null}

          <ul className="grid gap-x-8 gap-y-2 border-t border-[var(--ks-color-border-subtle)] px-6 py-4 text-sm text-[var(--ks-color-text-secondary)] sm:grid-cols-2">
            {INCLUSO.map((item) => (
              <li key={item} className="flex items-center gap-2">
                <Check size={15} strokeWidth={2.5} className="shrink-0 text-[var(--ks-color-status-success)]" />
                {item}
              </li>
            ))}
          </ul>
        </Painel>
      </div>

      <HistoricoDePagamentos historico={situacao?.historico ?? null} />
    </div>
  );
}

function dataEHora(iso: string) {
  const d = new Date(iso);
  if (!Number.isFinite(d.getTime())) return "—";
  return `${d.toLocaleDateString("pt-BR")} às ${d.toLocaleTimeString("pt-BR", { hour: "2-digit", minute: "2-digit" })}`;
}

function formaDePagamento(metodo: string | null, parcelas: number | null) {
  if (!metodo) return "—";
  const nome = METODO[metodo] ?? metodo;
  return parcelas && parcelas > 1 ? `${nome} · ${parcelas}x` : nome;
}

/* O número do pedido é o que o cliente manda para o suporte conferir. */
function NumeroDoPedido({ numero }: { numero: string }) {
  const [copiado, setCopiado] = useState(false);
  return (
    <button
      type="button"
      onClick={() => {
        navigator.clipboard
          ?.writeText(numero)
          .then(() => {
            setCopiado(true);
            window.setTimeout(() => setCopiado(false), 1600);
          })
          .catch(() => undefined);
      }}
      title="Copiar o número do pedido"
      className="inline-flex items-center gap-1.5 font-mono text-[13px] font-semibold text-[var(--ks-color-text-primary)] hover:text-[var(--ks-color-primary)]"
    >
      {numero}
      {copiado ? <Check size={13} className="text-[var(--ks-color-status-success)]" /> : <Copy size={13} className="text-[var(--ks-color-text-soft)]" />}
    </button>
  );
}

function HistoricoDePagamentos({ historico }: { historico: SituacaoDaConta["historico"] | null }) {
  if (!historico) return null;
  return (
    <Painel atraso={0.1}>
      <CabecalhoDoPainel
        titulo="Histórico de pagamentos"
        texto="Cada pagamento da sua assinatura. Precisa conferir algum? Mande o número do pedido para o nosso suporte."
      />
      {historico.length === 0 ? (
        <p className="px-6 py-5 text-sm text-[var(--ks-color-text-muted)]">Nenhum pagamento encontrado para esta conta.</p>
      ) : (
        <div>
          <div className="hidden grid-cols-[1.3fr_1fr_1fr_1.1fr_0.9fr_1fr] gap-4 border-b border-[var(--ks-color-border-subtle)] px-6 py-2.5 text-[11px] font-bold uppercase tracking-[0.1em] text-[var(--ks-color-text-soft)] md:grid">
            <span>Data</span>
            <span>Pedido</span>
            <span>Plano</span>
            <span>Pagamento</span>
            <span className="text-right">Valor</span>
            <span className="text-right">Situação</span>
          </div>
          <ul className="divide-y divide-[var(--ks-color-border-subtle)]">
            {historico.map((item) => {
              const status = STATUS_DO_PAGAMENTO[item.status] ?? { tom: "neutro" as TomDoStatus, rotulo: item.status };
              return (
                <li
                  key={item.pedido}
                  className="grid grid-cols-2 gap-x-4 gap-y-1.5 px-6 py-3.5 text-sm md:grid-cols-[1.3fr_1fr_1fr_1.1fr_0.9fr_1fr] md:items-center"
                >
                  <span className="ks-num text-[var(--ks-color-text-muted)]">{item.data ? dataEHora(item.data) : "—"}</span>
                  <span className="text-right md:text-left">
                    <NumeroDoPedido numero={item.pedido} />
                  </span>
                  <span className="flex flex-col">
                    <span className="font-semibold text-[var(--ks-color-text-primary)]">
                      {item.plano === "anual" ? "Plano anual" : item.plano === "mensal" ? "Plano mensal" : "Assinatura"}
                    </span>
                    {item.tipo ? (
                      <span className={`text-xs ${item.tipo.startsWith("⚡") ? "font-semibold text-[var(--ks-color-primary)]" : "text-[var(--ks-color-text-soft)]"}`}>{item.tipo}</span>
                    ) : null}
                  </span>
                  <span className="text-right text-[var(--ks-color-text-muted)] md:text-left">{formaDePagamento(item.metodo, item.parcelas)}</span>
                  <span className="ks-num font-semibold text-[var(--ks-color-text-primary)] md:text-right">{item.valor === null ? "—" : moeda(item.valor)}</span>
                  <span className="flex flex-col items-end gap-0.5">
                    <SeloDoStatus tom={status.tom} rotulo={status.rotulo} />
                    {item.estornadoEm && (item.status === "refunded" || item.status === "chargedback") ? (
                      <span className="text-[11px] text-[var(--ks-color-text-soft)]">em {dataCurta(item.estornadoEm)}</span>
                    ) : null}
                  </span>
                </li>
              );
            })}
          </ul>
        </div>
      )}
    </Painel>
  );
}