'use client';

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

type FinanceDashboard = {
  grossRevenue: number;
  netRevenue: number;
  platformNetRevenue?: number;
  restaurantPayoutTotal?: number;
  availablePayoutAmount?: number;
  pendingPayoutAmount?: number;
  nextPayoutDate?: string | null;
  payoutDelayDays?: number;
  totalCommission: number;
  deliveryProfit: number;
  driverPayoutTotal?: number;
  serviceFees: number;
  subscriptionRevenue: number;
  adsRevenue: number;
  withdrawalsPending: number;
  walletBalances: Array<{ type: string; balance: number; blockedBalance: number }>;
  paidOrders: number;
  cancelledOrders: number;
  refunds: number;
  averageTicket: number;
};

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

type RestaurantSummary = {
  id: string;
  name: string;
  city?: string | null;
  neighborhood?: string | null;
  status: string;
  ownerEmail?: string | null;
  ownerPhone?: string | null;
  pixKey?: string | null;
  commissionPercentage: number;
  totalSold: number;
  customerGross: number;
  commissionAmount: number;
  payoutToRestaurant: number;
  serviceFees: number;
  deliveryProfit: number;
  driverPayoutTotal?: number;
  platformNet: number;
  orderCount: number;
  walletBalance: number;
  availablePayoutAmount?: number;
  pendingPayoutAmount?: number;
  nextPayoutDate?: string | null;
  payoutDelayDays?: number;
};

export function FinanceLivePanel() {
  const [dashboard, setDashboard] = useState<FinanceDashboard | null>(null);
  const [ledger, setLedger] = useState<LedgerItem[]>([]);
  const [restaurantSummary, setRestaurantSummary] = useState<RestaurantSummary[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState('');
  const [search, setSearch] = useState('');
  const [directionFilter, setDirectionFilter] = useState('ALL');
  const [statusFilter, setStatusFilter] = useState('ALL');
  const [commissionDrafts, setCommissionDrafts] = useState<Record<string, string>>({});
  const [savingCommissionId, setSavingCommissionId] = useState('');

  const load = async () => {
    setLoading(true);
    setError('');
    try {
      const [dashboardPayload, ledgerPayload, summaryPayload] = await Promise.all([
        fetchWithSession('/finance/dashboard'),
        fetchWithSession('/finance/ledger'),
        fetchWithSession('/finance/restaurants-summary'),
      ]);
      setDashboard(dashboardPayload as FinanceDashboard);
      setLedger(ledgerPayload as LedgerItem[]);
      const restaurants = summaryPayload as RestaurantSummary[];
      setRestaurantSummary(restaurants);
      setCommissionDrafts(Object.fromEntries(restaurants.map((item) => [item.id, String(item.commissionPercentage.toFixed(2))])));
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Falha ao carregar painel financeiro.');
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    void load();
    const intervalId = window.setInterval(() => {
      void load();
    }, 15000);
    return () => window.clearInterval(intervalId);
  }, []);

  const filteredLedger = useMemo(() => {
    const normalizedSearch = search.trim().toLowerCase();
    return ledger.filter((entry) => {
      if (directionFilter !== 'ALL' && entry.direction !== directionFilter) {
        return false;
      }
      if (statusFilter !== 'ALL' && entry.status !== statusFilter) {
        return false;
      }
      if (!normalizedSearch) {
        return true;
      }
      return [entry.id, entry.orderId, entry.userId, entry.type, entry.description]
        .filter(Boolean)
        .some((value) => String(value).toLowerCase().includes(normalizedSearch));
    });
  }, [directionFilter, ledger, search, statusFilter]);

  const walletSummary =
    dashboard?.walletBalances.map((wallet) => `${wallet.type}: ${currency(wallet.balance)}`).join(' • ') ??
    'Sem wallets no escopo atual';

  const saveCommission = async (restaurantId: string) => {
    const nextValue = Number(commissionDrafts[restaurantId] ?? 0);
    if (Number.isNaN(nextValue) || nextValue < 0) {
      setError('Informe uma comissao valida para a loja.');
      return;
    }

    setSavingCommissionId(restaurantId);
    setError('');
    try {
      await fetchWithSession(`/restaurants/${restaurantId}`, {
        method: 'PATCH',
        body: JSON.stringify({ commissionPercentage: String(nextValue) }),
      });
      await load();
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Falha ao atualizar a comissao do restaurante.');
    } finally {
      setSavingCommissionId('');
    }
  };

  return (
    <div className="space-y-6">
      <section className="grid gap-4 md:grid-cols-4">
        <StatCard label="Faturamento bruto" value={currency(dashboard?.grossRevenue)} hint="pedidos pagos e em rota" tone="sky" />
        <StatCard label="Receita liquida" value={currency(dashboard?.platformNetRevenue ?? dashboard?.netRevenue)} hint="comissao da plataforma" tone="emerald" />
        <StatCard label="Repasse motoboys" value={currency(dashboard?.driverPayoutTotal)} hint="entrega paga integralmente ao entregador" tone="amber" />
        <StatCard label="Taxas pendentes" value={String(dashboard?.withdrawalsPending ?? 0)} hint="saques aguardando aprovacao" tone="rose" />
      </section>

      <section className="grid gap-4 md:grid-cols-4">
        <StatCard label="Comissao total" value={currency(dashboard?.totalCommission)} hint="receita principal da plataforma" tone="sky" />
        <StatCard label="Assinaturas" value={currency(dashboard?.subscriptionRevenue)} hint="Chego Prime e planos pagos" tone="emerald" />
        <StatCard label="Ads patrocinados" value={currency(dashboard?.adsRevenue)} hint="ranking e campanhas" tone="amber" />
        <StatCard label="Ticket medio" value={currency(dashboard?.averageTicket)} hint="LTV e recompra" tone="rose" />
      </section>

      <section className="grid gap-4 md:grid-cols-3">
        <StatCard label="Repasse liberado" value={currency(dashboard?.availablePayoutAmount)} hint="lojas aptas a receber hoje" tone="emerald" />
        <StatCard label="Em liquidacao" value={currency(dashboard?.pendingPayoutAmount)} hint={`repasse em ${dashboard?.payoutDelayDays ?? 0} dias`} tone="amber" />
        <StatCard label="Proximo fechamento" value={dashboard?.nextPayoutDate ? new Date(dashboard.nextPayoutDate).toLocaleDateString('pt-BR') : 'sem fila'} hint="primeira liberacao prevista" tone="sky" />
      </section>

      <Panel title="Resultado por restaurante" eyebrow="Total vendido, sua comissao, repasse e valor do entregador">
        {error ? <p className="mt-0 mb-4 rounded-2xl border border-rose-200 bg-rose-50 px-4 py-3 text-sm text-rose-700">{error}</p> : null}
        <ManagementTable
          columns={[
            { key: 'restaurant', label: 'Restaurante' },
            { key: 'sold', label: 'Vendido', align: 'right' },
            { key: 'commission', label: 'Sua comissao', align: 'right' },
            { key: 'payout', label: 'Repasse loja', align: 'right' },
            { key: 'settlement', label: 'Liquidação', align: 'right' },
            { key: 'platform', label: 'Receita plataforma', align: 'right' },
            { key: 'driver', label: 'Entregador', align: 'right' },
            { key: 'status', label: 'Status' },
          ]}
          rows={restaurantSummary.map((item) => ({
            id: item.id,
            cells: {
              restaurant: (
                <div>
                  <p className="font-bold text-slate-900">{item.name}</p>
                  <p className="text-xs text-slate-500">{[item.city, item.neighborhood].filter(Boolean).join(' / ') || item.ownerEmail || item.ownerPhone || 'Sem geografia'}</p>
                  <p className="text-xs text-slate-500">{item.pixKey ? `PIX ${item.pixKey}` : 'PIX nao informado'}</p>
                </div>
              ),
              sold: (
                <div className="text-right">
                  <p className="font-semibold text-slate-900">{currency(item.totalSold)}</p>
                  <p className="text-xs text-slate-500">{item.orderCount} pedidos</p>
                </div>
              ),
              commission: (
                <div className="flex items-center justify-end gap-2">
                  <input
                    value={commissionDrafts[item.id] ?? ''}
                    onChange={(event) => setCommissionDrafts((current) => ({ ...current, [item.id]: event.target.value }))}
                    className="h-10 w-20 rounded-xl border border-slate-200 bg-white px-3 text-right text-sm text-slate-700 outline-none"
                  />
                  <button
                    type="button"
                    onClick={() => void saveCommission(item.id)}
                    disabled={savingCommissionId === item.id}
                    className="rounded-full border border-slate-900 bg-slate-900 px-3 py-2 text-[11px] font-bold uppercase tracking-[0.16em] text-white disabled:opacity-60"
                  >
                    %
                  </button>
                </div>
              ),
              payout: (
                <div className="text-right">
                  <p className="font-semibold text-slate-900">{currency(item.payoutToRestaurant)}</p>
                  <p className="text-xs text-slate-500">saldo {currency(item.walletBalance)}</p>
                </div>
              ),
              settlement: (
                <div className="text-right">
                  <p className="font-semibold text-slate-900">{currency(item.availablePayoutAmount)}</p>
                  <p className="text-xs text-slate-500">
                    fila {currency(item.pendingPayoutAmount)}{item.nextPayoutDate ? ` | ${new Date(item.nextPayoutDate).toLocaleDateString('pt-BR')}` : ''}
                  </p>
                </div>
              ),
              platform: (
                <div className="text-right">
                  <p className="font-semibold text-slate-900">{currency(item.platformNet)}</p>
                  <p className="text-xs text-slate-500">comissao {currency(item.commissionAmount)}</p>
                </div>
              ),
              driver: (
                <div className="text-right">
                  <p className="font-semibold text-slate-900">{currency(item.driverPayoutTotal)}</p>
                  <p className="text-xs text-slate-500">taxa integral de entrega</p>
                </div>
              ),
              status: { value: humanStatus(item.status), tone: statusTone(item.status), badge: true },
            },
          }))}
          pageLabel={`Mostrando ${restaurantSummary.length} restaurantes com venda, repasse e lucro`}
        />
      </Panel>

      <Panel title="Ledger financeiro em tempo real" eyebrow="Dados reais do backend">
        <CrudToolbar
          filters={[
            `direcao: ${directionFilter}`,
            `status: ${statusFilter}`,
            search ? `busca: ${search}` : 'busca: livre',
            'auto refresh: 15s',
          ]}
          actions={[
            { label: 'Atualizar agora', tone: 'primary', href: '/finance' },
            { label: 'Swagger API', tone: 'neutral', href: 'http://127.0.0.1:3001/api/docs' },
          ]}
        />

        <div className="mt-5 grid gap-3 md:grid-cols-3">
          <input
            value={search}
            onChange={(event) => setSearch(event.target.value)}
            placeholder="Buscar por pedido, usuario, tipo ou descricao"
            className="rounded-[1.2rem] border border-slate-200 bg-white px-4 py-3 text-sm text-slate-700 outline-none"
          />
          <select value={directionFilter} onChange={(event) => setDirectionFilter(event.target.value)} className="rounded-[1.2rem] border border-slate-200 bg-white px-4 py-3 text-sm text-slate-700 outline-none">
            <option value="ALL">Todas as direcoes</option>
            <option value="IN">Entrada</option>
            <option value="OUT">Saida</option>
          </select>
          <select value={statusFilter} onChange={(event) => setStatusFilter(event.target.value)} className="rounded-[1.2rem] border border-slate-200 bg-white px-4 py-3 text-sm text-slate-700 outline-none">
            <option value="ALL">Todos os status</option>
            <option value="POSTED">POSTED</option>
            <option value="PENDING">PENDING</option>
            <option value="CANCELLED">CANCELLED</option>
          </select>
        </div>

        {error ? <p className="mt-4 rounded-2xl border border-rose-200 bg-rose-50 px-4 py-3 text-sm text-rose-700">{error}</p> : null}

        <div className="mt-5 rounded-[1.4rem] border border-slate-200 bg-slate-50 px-4 py-4 text-sm text-slate-600">
          Wallets monitoradas: <strong>{walletSummary}</strong>. Pedidos pagos: <strong>{dashboard?.paidOrders ?? 0}</strong>. Cancelados/reembolsados: <strong>{dashboard?.cancelledOrders ?? 0}</strong>. Refunds: <strong>{currency(dashboard?.refunds)}</strong>.
        </div>

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

      {loading ? <p className="text-sm text-slate-500">Sincronizando financeiro administrativo...</p> : null}
    </div>
  );
}