"use client";

import { AlertTriangle, Loader2 } from "lucide-react";
import { formatMoney } from "@/utils/formatters";
import type { CobrancaPix } from "./receber";

/*
  Pix que caiu e venda que não gravou.

  Acontece quando a aba fecha, a internet cai ou algo recusa a venda depois
  que o cliente já pagou. O dinheiro está no Mercado Pago; o pedido não
  existe. Esta faixa aparece ao abrir o PDV enquanto houver uma cobrança
  assim, e conclui a venda a partir da foto guardada na cobrança — ou, se a
  cobrança nasceu antes de a foto existir, registra uma venda avulsa do valor
  pago, para o caixa bater.
*/

export function PixPendente({
  cobrancas,
  ocupadaId,
  aoConcluir,
  aoDepois,
}: {
  cobrancas: CobrancaPix[];
  ocupadaId: string | null;
  aoConcluir: (cobranca: CobrancaPix) => void;
  aoDepois: () => void;
}) {
  if (!cobrancas.length) return null;
  const primeira = cobrancas[0];
  const quando = primeira.aprovadaEm
    ? new Date(primeira.aprovadaEm).toLocaleString("pt-BR", { day: "2-digit", month: "2-digit", hour: "2-digit", minute: "2-digit" })
    : "";
  const resumo = primeira.foto?.resumo;
  const itens = Array.isArray(resumo?.itens) ? (resumo?.itens as string[]).join(", ") : null;

  return (
    <div className="pdv-faixa" role="status">
      <AlertTriangle size={16} className="shrink-0 text-[var(--ks-color-status-warning)]" />
      <div className="pdv-faixa-texto">
        <strong>Pix de {formatMoney(primeira.valor)} pago{quando ? ` às ${quando}` : ""} sem venda registrada.</strong>{" "}
        {itens ? `Era: ${itens}.` : "A venda não chegou a ser gravada."}
        {cobrancas.length > 1 ? ` (+${cobrancas.length - 1} ${cobrancas.length - 1 === 1 ? "outro" : "outros"})` : ""}
      </div>
      <div className="pdv-faixa-acoes">
        <button type="button" className="pdv-botao pdv-botao-cheio" onClick={() => aoConcluir(primeira)} disabled={Boolean(ocupadaId)}>
          {ocupadaId === primeira.id ? <Loader2 size={14} className="pdv-girando" /> : null}
          {primeira.foto ? "Concluir venda" : "Registrar venda avulsa"}
        </button>
        <button type="button" className="pdv-botao" onClick={aoDepois} disabled={Boolean(ocupadaId)}>
          Depois
        </button>
      </div>
    </div>
  );
}