'use client';

import Link from 'next/link';
import { Panel, StatCard, StatusBadge } from '@chego/ui';
import { useEffect, useMemo, useState } from 'react';
import { currency, fetchWithSession, humanStatus, statusTone } from './components/api-helpers';

type OverviewPayload = {
  finance: {
    grossRevenue: number;
    platformNetRevenue?: number;
    netRevenue: number;
    totalCommission: number;
    deliveryProfit: number;
    driverPayoutTotal?: number;
    serviceFees: number;
    availablePayoutAmount?: number;
    pendingPayoutAmount?: number;
    nextPayoutDate?: string | null;
    withdrawalsPending: number;
    paidOrders: number;
    cancelledOrders: number;
    averageTicket: number;
  };
  operations: {
    activeOrders: number;
    restaurantsOnline: number;
    activeDeliveries: number;
    totalRestaurants: number;
    salesByStatus: Record<string, number>;
  };
  topRestaurants: Array<{
    id: string;
    name: string;
    status: string;
    orderCount: number;
    customerGross: number;
    totalSold: number;
    commissionAmount: number;
    platformNet: number;
    driverPayoutTotal?: number;
    payoutToRestaurant: number;
    availablePayoutAmount: number;
    pendingPayoutAmount: number;
    nextPayoutDate?: string | null;
    commissionPercentage: number;
  }>;
  recentOrders: Array<{
    id: string;
    createdAt: string;
    status: string;
    total: number;
    paymentStatus?: string | null;
    restaurant: string;
    customer: string;
    deliveryStatus?: string | null;
  }>;
};

const quickLinks = [
  { href: '/orders', title: 'Pedidos', body: 'Acompanhar tudo o que entra nas lojas e agir rápido.' },
  { href: '/finance', title: 'Financeiro', body: 'Conferir comissão, repasses, liquidação e lucro.' },
  { href: '/restaurants', title: 'Lojas', body: 'Ver aprovação, operação e performance por parceiro.' },
  { href: '/live-map', title: 'Mapa ao vivo', body: 'Acompanhar frota, rotas e entregas ativas.' },
];

export default function Page() {
  const [overview, setOverview] = useState<OverviewPayload | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState('');

  const load = async () => {
    setError('');
    try {
      const payload = await fetchWithSession('/admin/overview');
      setOverview(payload as OverviewPayload);
    } catch (loadError) {
      setError(loadError instanceof Error ? loadError.message : 'Falha ao carregar a visão global do admin.');
    } finally {
      setLoading(false);
    }
  };

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

  const finance = overview?.finance;
  const operations = overview?.operations;

  const statusEntries = useMemo(() => Object.entries(operations?.salesByStatus ?? {}), [operations?.salesByStatus]);
  const healthCards = useMemo(() => ([
    {
      label: 'Pulso da operacao',
      value:
        (operations?.activeOrders ?? 0) > 12
          ? 'Pico de pedidos'
          : (operations?.activeOrders ?? 0) > 0
            ? 'Fluxo controlado'
            : 'Sem fila agora',
      detail: `${operations?.activeOrders ?? 0} pedidos ativos e ${operations?.activeDeliveries ?? 0} entregas em rota`,
      tone: (operations?.activeOrders ?? 0) > 12 ? 'amber' : 'emerald',
    },
    {
      label: 'Liquidez',
      value:
        (finance?.pendingPayoutAmount ?? 0) > (finance?.availablePayoutAmount ?? 0)
          ? 'Mais em liquidacao'
          : 'Repasse pronto dominando',
      detail: `Liberado ${currency(finance?.availablePayoutAmount)} vs em prazo ${currency(finance?.pendingPayoutAmount)}`,
      tone:
        (finance?.pendingPayoutAmount ?? 0) > (finance?.availablePayoutAmount ?? 0)
          ? 'sky'
          : 'emerald',
    },
    {
      label: 'Risco comercial',
      value: (finance?.cancelledOrders ?? 0) > 0 ? 'Cancelamentos no radar' : 'Sem cancelamentos',
      detail: `${finance?.cancelledOrders ?? 0} pedidos cancelados e ticket medio ${currency(finance?.averageTicket)}`,
      tone: (finance?.cancelledOrders ?? 0) > 0 ? 'rose' : 'emerald',
    },
  ]), [finance?.availablePayoutAmount, finance?.pendingPayoutAmount, finance?.cancelledOrders, finance?.averageTicket, operations?.activeOrders, operations?.activeDeliveries]);
  const quickWins = useMemo(() => ([
    `${operations?.restaurantsOnline ?? 0} lojas online de ${operations?.totalRestaurants ?? 0} cadastradas`,
    `${finance?.paidOrders ?? 0} pedidos pagos no ciclo atual`,
    `${currency(finance?.serviceFees)} em taxas de servico acumuladas`,
  ]), [finance?.paidOrders, finance?.serviceFees, operations?.restaurantsOnline, operations?.totalRestaurants]);

  return (
    <div className="space-y-6">
      <section className="overflow-hidden rounded-[2rem] border border-white/80 bg-[#111827] p-6 text-white shadow-[0_24px_80px_rgba(15,23,42,0.22)] lg:p-8">
        <div className="flex flex-col gap-4 xl:flex-row xl:items-end xl:justify-between">
          <div>
            <div className="flex flex-wrap items-center gap-3">
              <StatusBadge tone="amber">Central do admin</StatusBadge>
              <StatusBadge tone="emerald">Atualização automática 10s</StatusBadge>
            </div>
            <h2 className="mt-4 max-w-4xl text-4xl font-black tracking-tight">Tudo o que acontece nas lojas, pedidos, repasses e lucro da plataforma em um único painel.</h2>
            <p className="mt-4 max-w-3xl text-base leading-7 text-slate-300">
              Esta visão usa dados reais da API para mostrar qual loja vende mais, quanto a plataforma recebe, quanto ainda vai repassar e o que está acontecendo agora na operação.
            </p>
          </div>
          <div className="grid gap-3 sm:grid-cols-2">
            <div className="rounded-[1.5rem] bg-white/10 p-4">
              <p className="text-xs uppercase tracking-[0.22em] text-slate-300">Próxima liquidação</p>
              <p className="mt-3 text-2xl font-black">
                {finance?.nextPayoutDate ? new Date(finance.nextPayoutDate).toLocaleDateString('pt-BR') : 'Sem fila'}
              </p>
            </div>
            <div className="rounded-[1.5rem] bg-emerald-400/10 p-4">
              <p className="text-xs uppercase tracking-[0.22em] text-emerald-100">Saques pendentes</p>
              <p className="mt-3 text-2xl font-black">{finance?.withdrawalsPending ?? 0}</p>
            </div>
          </div>
        </div>
      </section>

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

      <section className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
        <StatCard label="Faturamento bruto" value={currency(finance?.grossRevenue)} hint="tudo que os clientes pagaram" tone="sky" />
        <StatCard label="Receita da plataforma" value={currency(finance?.platformNetRevenue ?? finance?.netRevenue)} hint="comissao das lojas" tone="emerald" />
        <StatCard label="Pedidos ativos" value={String(operations?.activeOrders ?? 0)} hint="em aberto na operação" tone="amber" />
        <StatCard label="Lojas online" value={String(operations?.restaurantsOnline ?? 0)} hint={`${operations?.totalRestaurants ?? 0} lojas no total`} tone="rose" />
      </section>

      <section className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
        <StatCard label="Comissão acumulada" value={currency(finance?.totalCommission)} hint="quanto você já gerou em comissão" tone="sky" />
        <StatCard label="Repasse aos entregadores" value={currency(finance?.driverPayoutTotal)} hint="taxa de entrega paga aos motoboys" tone="emerald" />
        <StatCard label="Repasse liberado" value={currency(finance?.availablePayoutAmount)} hint="valor pronto para pagar às lojas" tone="amber" />
        <StatCard label="Em liquidação" value={currency(finance?.pendingPayoutAmount)} hint="valor ainda no prazo de repasse" tone="rose" />
      </section>

      <section className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
        {quickLinks.map((item) => (
          <Link
            key={item.href}
            href={item.href}
            className="rounded-[1.6rem] border border-slate-200 bg-white p-5 shadow-[0_18px_42px_rgba(15,23,42,0.06)] transition hover:-translate-y-0.5 hover:border-amber-300"
          >
            <p className="text-[11px] font-black uppercase tracking-[0.24em] text-slate-500">Acesso rápido</p>
            <h3 className="mt-3 text-xl font-black text-slate-950">{item.title}</h3>
            <p className="mt-3 text-sm leading-6 text-slate-600">{item.body}</p>
          </Link>
        ))}
      </section>

      <section className="grid gap-4 xl:grid-cols-[1fr_0.9fr]">
        <Panel title="Leitura executiva" eyebrow="Sinais para agir sem abrir outros modulos">
          <div className="grid gap-3 md:grid-cols-3">
            {healthCards.map((card) => (
              <div key={card.label} className="rounded-[1.45rem] border border-slate-200 bg-white p-4">
                <StatusBadge tone={card.tone as never}>{card.label}</StatusBadge>
                <p className="mt-3 text-lg font-black text-slate-950">{card.value}</p>
                <p className="mt-2 text-sm leading-6 text-slate-600">{card.detail}</p>
              </div>
            ))}
          </div>
        </Panel>

        <Panel title="Resumo rapido" eyebrow="O que vale acompanhar agora">
          <div className="space-y-3">
            {quickWins.map((item) => (
              <div key={item} className="rounded-[1.35rem] border border-slate-200 bg-slate-50 px-4 py-3 text-sm font-semibold text-slate-700">
                {item}
              </div>
            ))}
          </div>
        </Panel>
      </section>

      <section className="grid gap-6 xl:grid-cols-[1.15fr_0.85fr]">
        <Panel title="Lojas que mais vendem" eyebrow="Ranking por venda e comissão da plataforma">
          <div className="space-y-3">
            {overview?.topRestaurants.map((restaurant) => (
              <div key={restaurant.id} className="rounded-[1.4rem] border border-slate-200 bg-slate-50/90 p-4">
                <div className="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
                  <div>
                    <div className="flex flex-wrap items-center gap-3">
                      <p className="text-base font-black text-slate-950">{restaurant.name}</p>
                      <StatusBadge tone={statusTone(restaurant.status)}>{humanStatus(restaurant.status)}</StatusBadge>
                    </div>
                    <p className="mt-2 text-sm text-slate-600">
                      {restaurant.orderCount} pedidos • comissão {restaurant.commissionPercentage.toFixed(2)}%
                    </p>
                  </div>
                  <div className="grid gap-2 text-right text-sm text-slate-600">
                    <p>Cliente pagou: <strong className="text-slate-900">{currency(restaurant.customerGross)}</strong></p>
                    <p>Você recebe: <strong className="text-slate-900">{currency(restaurant.platformNet)}</strong></p>
                    <p>Repasse da loja: <strong className="text-slate-900">{currency(restaurant.payoutToRestaurant)}</strong></p>
                </div>
              </div>
                <div className="mt-3 grid gap-3 md:grid-cols-4">
                  <div className="rounded-2xl bg-white px-4 py-3 text-sm text-slate-600">
                    Comissão gerada
                    <p className="mt-1 font-bold text-slate-900">{currency(restaurant.commissionAmount)}</p>
                  </div>
                  <div className="rounded-2xl bg-white px-4 py-3 text-sm text-slate-600">
                    Repasse liberado
                    <p className="mt-1 font-bold text-slate-900">{currency(restaurant.availablePayoutAmount)}</p>
                  </div>
                  <div className="rounded-2xl bg-white px-4 py-3 text-sm text-slate-600">
                    Em liquidação
                    <p className="mt-1 font-bold text-slate-900">{currency(restaurant.pendingPayoutAmount)}</p>
                  </div>
                  <div className="rounded-2xl bg-white px-4 py-3 text-sm text-slate-600">
                    Entregadores
                    <p className="mt-1 font-bold text-slate-900">{currency(restaurant.driverPayoutTotal)}</p>
                  </div>
                </div>
              </div>
            ))}
            {!overview?.topRestaurants.length ? <p className="text-sm text-slate-500">Nenhuma loja com venda registrada ainda.</p> : null}
          </div>
        </Panel>

        <Panel title="Fila operacional" eyebrow="Pedidos entrando agora">
          <div className="space-y-3">
            {overview?.recentOrders.map((order) => (
              <div key={order.id} className="rounded-[1.35rem] border border-slate-200 bg-white p-4">
                <div className="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
                  <div>
                    <p className="text-sm font-bold text-slate-900">{order.id}</p>
                    <p className="mt-1 text-sm text-slate-600">{order.restaurant} • {order.customer}</p>
                    <p className="mt-1 text-xs text-slate-500">{new Date(order.createdAt).toLocaleString('pt-BR')}</p>
                  </div>
                  <div className="flex flex-wrap items-center gap-2">
                    <StatusBadge tone={statusTone(order.paymentStatus)}>{humanStatus(order.paymentStatus ?? 'PENDING')}</StatusBadge>
                    <StatusBadge tone={statusTone(order.status)}>{humanStatus(order.status)}</StatusBadge>
                  </div>
                </div>
                <p className="mt-3 text-sm text-slate-600">
                  Total do pedido: <strong className="text-slate-900">{currency(order.total)}</strong>
                  {order.deliveryStatus ? ` • entrega ${humanStatus(order.deliveryStatus)}` : ''}
                </p>
              </div>
            ))}
            {!overview?.recentOrders.length ? <p className="text-sm text-slate-500">Nenhum pedido recente encontrado.</p> : null}
          </div>
        </Panel>
      </section>

      <section className="grid gap-6 xl:grid-cols-[0.8fr_1.2fr]">
        <Panel title="Status da operação" eyebrow="Contagem por estágio do pedido">
          <div className="space-y-3">
            {statusEntries.map(([status, count]) => (
              <div key={status} className="flex items-center justify-between rounded-[1.35rem] border border-slate-200 bg-white px-4 py-3">
                <span className="text-sm font-semibold text-slate-700">{humanStatus(status)}</span>
                <StatusBadge tone={statusTone(status)}>{String(count)}</StatusBadge>
              </div>
            ))}
            {!statusEntries.length ? <p className="text-sm text-slate-500">Sem distribuição de status para mostrar.</p> : null}
          </div>
        </Panel>

        <Panel title="Conferência da plataforma" eyebrow="Valores conectados no mesmo ciclo financeiro">
          <div className="grid gap-3 md:grid-cols-2">
            <div className="rounded-[1.35rem] border border-slate-200 bg-slate-50 p-4 text-sm text-slate-700">
              <p className="font-black text-slate-950">Faturamento bruto</p>
              <p className="mt-2 leading-6">Soma de tudo que os clientes pagaram nos pedidos.</p>
              <p className="mt-3 text-lg font-black text-slate-950">{currency(finance?.grossRevenue)}</p>
            </div>
            <div className="rounded-[1.35rem] border border-slate-200 bg-slate-50 p-4 text-sm text-slate-700">
              <p className="font-black text-slate-950">Receita da plataforma</p>
              <p className="mt-2 leading-6">Comissão aplicada sobre o valor de venda das lojas.</p>
              <p className="mt-3 text-lg font-black text-slate-950">{currency(finance?.platformNetRevenue ?? finance?.netRevenue)}</p>
            </div>
            <div className="rounded-[1.35rem] border border-slate-200 bg-slate-50 p-4 text-sm text-slate-700">
              <p className="font-black text-slate-950">Repasse liberado</p>
              <p className="mt-2 leading-6">Valor já elegível para pagar às lojas conforme a política de liquidação.</p>
              <p className="mt-3 text-lg font-black text-slate-950">{currency(finance?.availablePayoutAmount)}</p>
            </div>
            <div className="rounded-[1.35rem] border border-slate-200 bg-slate-50 p-4 text-sm text-slate-700">
              <p className="font-black text-slate-950">Pedidos pagos</p>
              <p className="mt-2 leading-6">Pedidos conciliados que entram no ciclo financeiro da plataforma.</p>
              <p className="mt-3 text-lg font-black text-slate-950">{finance?.paidOrders ?? 0}</p>
            </div>
          </div>
        </Panel>
      </section>

      {loading ? <p className="text-sm text-slate-500">Sincronizando visão executiva do admin...</p> : null}
    </div>
  );
}