'use client';

import { ManagementTable, Panel, StatCard } from '@chego/ui';
import { useEffect, useState } from 'react';
import { currency, fetchWithSession, humanStatus, statusTone } from './api-helpers';

type FinanceDashboard = {
  grossRevenue: number;
  netRevenue: number;
  availablePayoutAmount?: number;
  pendingPayoutAmount?: number;
  nextPayoutDate?: string | null;
  payoutDelayDays?: number;
  totalCommission: number;
  deliveryProfit: number;
  driverPayoutTotal?: number;
  averageTicket: number;
};

type LedgerItem = {
  id: string;
  type: string;
  amount: number | string;
  direction: string;
  description: string;
  status: string;
  createdAt: string;
};

export function FinanceLivePanel() {
  const [dashboard, setDashboard] = useState<FinanceDashboard | null>(null);
  const [ledger, setLedger] = useState<LedgerItem[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState('');

  const load = async () => {
    setLoading(true);
    setError('');
    try {
      const [dashboardPayload, ledgerPayload] = await Promise.all([
        fetchWithSession('/finance/dashboard'),
        fetchWithSession('/finance/ledger'),
      ]);
      setDashboard(dashboardPayload);
      setLedger(ledgerPayload);
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Falha ao carregar o financeiro da loja.');
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    void load();
  }, []);

  return (
    <div className="space-y-6">
      <section className="grid gap-4 md:grid-cols-4">
        <StatCard label="Bruto" value={currency(dashboard?.grossRevenue)} hint="vendas da loja" tone="emerald" />
        <StatCard label="Liquido" value={currency(dashboard?.netRevenue)} hint="valor da operacao" tone="sky" />
        <StatCard label="Disponivel" value={currency(dashboard?.availablePayoutAmount)} hint="liberado para repasse" tone="amber" />
        <StatCard label="Em liquidacao" value={currency(dashboard?.pendingPayoutAmount)} hint="repasse programado para quarta" tone="rose" />
      </section>

      <Panel
        title="Resumo financeiro da loja"
        eyebrow="Somente leitura"
        action={(
          <button
            type="button"
            onClick={() => void load()}
            className="rounded-full border border-slate-200 bg-white px-4 py-2 text-[11px] font-black uppercase tracking-[0.18em] text-slate-700"
          >
            Atualizar
          </button>
        )}
      >
        {error ? <p className="rounded-2xl border border-rose-200 bg-rose-50 px-4 py-3 text-sm text-rose-700">{error}</p> : null}

        <div className="mt-4 grid gap-4 lg:grid-cols-3">
          <div className="rounded-[1.4rem] border border-slate-200 bg-slate-50 p-4">
            <p className="text-[11px] font-black uppercase tracking-[0.24em] text-slate-500">Repasse da loja</p>
            <p className="mt-2 text-lg font-black text-slate-950">{currency(dashboard?.availablePayoutAmount)}</p>
            <p className="mt-2 text-sm leading-6 text-slate-600">
              Proximo repasse previsto para quarta-feira:{' '}
              <strong>{dashboard?.nextPayoutDate ? new Date(dashboard.nextPayoutDate).toLocaleDateString('pt-BR') : 'sem fila pendente'}</strong>.
            </p>
          </div>

          <div className="rounded-[1.4rem] border border-slate-200 bg-slate-50 p-4">
            <p className="text-[11px] font-black uppercase tracking-[0.24em] text-slate-500">Taxas da plataforma</p>
            <p className="mt-2 text-lg font-black text-slate-950">{currency(dashboard?.totalCommission)}</p>
            <p className="mt-2 text-sm leading-6 text-slate-600">Comissao aplicada sobre o valor de venda da loja.</p>
          </div>

          <div className="rounded-[1.4rem] border border-slate-200 bg-slate-50 p-4">
            <p className="text-[11px] font-black uppercase tracking-[0.24em] text-slate-500">Entregador</p>
            <p className="mt-2 text-lg font-black text-slate-950">{currency(dashboard?.driverPayoutTotal)}</p>
            <p className="mt-2 text-sm leading-6 text-slate-600">
              O valor do entregador pode ser acompanhado aqui, mas o pagamento do repasse e feito pelo administrador geral da plataforma.
            </p>
          </div>
        </div>

        <div className="mt-4 rounded-[1.4rem] border border-slate-200 bg-slate-50 p-4">
          <p className="text-[11px] font-black uppercase tracking-[0.24em] text-slate-500">Leitura financeira</p>
          <p className="mt-2 text-sm leading-6 text-slate-600">
            Esta area apenas exibe os registros financeiros da loja. Nao ha opcoes de editar, excluir ou limpar movimentos por aqui.
          </p>
        </div>

        <div className="mt-5">
          <ManagementTable
            columns={[
              { key: 'type', label: 'Registro' },
              { key: 'amount', label: 'Valor', align: 'right' },
              { key: 'direction', label: 'Direcao' },
              { key: 'createdAt', label: 'Momento' },
              { key: 'status', label: 'Status' },
            ]}
            rows={ledger.map((item) => ({
              id: item.id,
              cells: {
                type: (
                  <div>
                    <p className="font-bold text-slate-900">{humanStatus(item.type)}</p>
                    <p className="text-xs text-slate-500">{item.description}</p>
                  </div>
                ),
                amount: <span className="font-semibold text-slate-900">{currency(item.amount)}</span>,
                direction: humanStatus(item.direction),
                createdAt: new Date(item.createdAt).toLocaleString('pt-BR'),
                status: { value: humanStatus(item.status), tone: statusTone(item.status), badge: true },
              },
            }))}
            pageLabel={loading ? 'Carregando movimentos...' : `Mostrando ${ledger.length} registros financeiros`}
          />
        </div>
      </Panel>
    </div>
  );
}