'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 RestaurantProfile = {
  name: string;
  isOpen: boolean;
  isPaused: boolean;
  _count?: {
    orders?: number;
    products?: number;
    promotions?: number;
  };
};

type FinanceDashboard = {
  grossRevenue: number;
  netRevenue: number;
  availablePayoutAmount?: number;
  pendingPayoutAmount?: number;
  averageTicket: number;
};

type OrderItem = {
  id: string;
  status: string;
  total: number | string;
  createdAt: string;
  customer: { fullName: string };
  payment?: { status?: string | null } | null;
  delivery?: {
    driver?: {
      fullName?: string | null;
    } | null;
  } | null;
};

const storeRoutes = [
  { href: '/orders', title: 'Pedidos', body: 'Aceite, preparo, retirada e entrega.' },
  { href: '/categories', title: 'Categorias', body: 'Cadastre os tipos de comida da loja e organize a vitrine.' },
  { href: '/products', title: 'Catalogo', body: 'Produtos, categorias, adicionais e variacoes.' },
  { href: '/promotions', title: 'Promocoes', body: 'Cupons e campanhas da loja.' },
  { href: '/delivery-tracking', title: 'Entregas ao vivo', body: 'Acompanhe motoboy, rota e status.' },
  { href: '/finance', title: 'Financeiro', body: 'Faturamento, repasses e registros da loja.' },
  { href: '/public-order/discover', title: 'Marketplace cliente', body: 'Veja a tela publica do cliente.' },
];

export default function Page() {
  const [profile, setProfile] = useState<RestaurantProfile | null>(null);
  const [finance, setFinance] = useState<FinanceDashboard | null>(null);
  const [orders, setOrders] = useState<OrderItem[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState('');

  const load = async () => {
    setError('');
    setLoading(true);
    try {
      const [profilePayload, financePayload, ordersPayload] = await Promise.all([
        fetchWithSession('/restaurant/profile'),
        fetchWithSession('/finance/dashboard'),
        fetchWithSession('/orders'),
      ]);
      setProfile(profilePayload as RestaurantProfile);
      setFinance(financePayload as FinanceDashboard);
      setOrders(ordersPayload as OrderItem[]);
    } catch (loadError) {
      setError(loadError instanceof Error ? loadError.message : 'Falha ao carregar o painel da loja.');
    } finally {
      setLoading(false);
    }
  };

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

  const metrics = useMemo(() => {
    const activeOrders = orders.filter((item) => !['DELIVERED', 'CANCELLED'].includes(item.status));
    const pendingAcceptance = orders.filter((item) => item.status === 'SENT_TO_RESTAURANT').length;
    const preparing = orders.filter((item) => item.status === 'PREPARING').length;
    const onDelivery = orders.filter((item) => ['SEARCHING_DRIVER', 'DRIVER_ACCEPTED', 'PICKED_UP', 'ON_THE_WAY'].includes(item.status)).length;

    return {
      totalOrders: profile?._count?.orders ?? orders.length,
      pendingAcceptance,
      preparing,
      onDelivery,
      activeOrders,
    };
  }, [orders, profile?._count?.orders]);
  const actionDeck = useMemo(() => ([
    {
      title: 'Prioridade imediata',
      value:
        metrics.pendingAcceptance > 0
          ? `${metrics.pendingAcceptance} pedido(s) aguardando aceite`
          : 'Fila sob controle',
      body:
        metrics.pendingAcceptance > 0
          ? 'Entre em Pedidos para aceitar antes de travar o tempo de preparo.'
          : 'Sem gargalo de aceite neste momento.',
    },
    {
      title: 'Cozinha',
      value: `${metrics.preparing} em preparo`,
      body:
        metrics.preparing > 0
          ? 'Vale revisar tempo de cozinha e promessas de retirada.'
          : 'Nenhum pedido em preparo agora.',
    },
    {
      title: 'Financeiro',
      value: currency(finance?.availablePayoutAmount),
      body: 'Valor pronto para repasse da loja no ciclo atual.',
    },
  ]), [finance?.availablePayoutAmount, metrics.pendingAcceptance, metrics.preparing]);

  return (
    <div className="space-y-6">
      <section className="overflow-hidden rounded-[2rem] border border-white/80 bg-[linear-gradient(135deg,#2b180f_0%,#6f3f1b_55%,#c77b2f_100%)] p-6 text-white shadow-[0_28px_80px_rgba(111,63,27,0.24)] lg:p-8">
        <div className="flex flex-col gap-5 xl:flex-row xl:items-end xl:justify-between">
          <div>
            <div className="flex flex-wrap items-center gap-3">
              <StatusBadge tone={profile?.isOpen ? 'emerald' : 'rose'}>{profile?.isOpen ? 'Loja aberta' : 'Loja fechada'}</StatusBadge>
              <StatusBadge tone={profile?.isPaused ? 'amber' : 'sky'}>{profile?.isPaused ? 'Pausada' : 'Em operacao'}</StatusBadge>
            </div>
            <h2 className="mt-4 text-4xl font-black tracking-tight">{profile?.name ?? 'Loja'} em modo real de operacao.</h2>
            <p className="mt-4 max-w-2xl text-base leading-7 text-orange-50/90">
              Este painel agora mostra somente dados reais da sua loja. Como o banco foi zerado, tudo comeca limpo para voce entender o fluxo do zero.
            </p>
            <div className="mt-5 flex flex-wrap gap-3">
              <Link href="/categories" className="rounded-full bg-white px-5 py-3 text-xs font-black uppercase tracking-[0.18em] text-[#2b180f]">
                Cadastrar categorias
              </Link>
              <Link href="/products" className="rounded-full border border-white/25 bg-white/10 px-5 py-3 text-xs font-black uppercase tracking-[0.18em] text-white">
                Cadastrar produtos
              </Link>
            </div>
          </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-orange-100">Produtos ativos</p>
              <p className="mt-3 text-3xl font-black">{profile?._count?.products ?? 0}</p>
            </div>
            <div className="rounded-[1.5rem] bg-emerald-400/10 p-4">
              <p className="text-xs uppercase tracking-[0.22em] text-emerald-100">Promocoes</p>
              <p className="mt-3 text-3xl font-black">{profile?._count?.promotions ?? 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="Pedidos totais" value={String(metrics.totalOrders)} hint={`${metrics.pendingAcceptance} aguardando aceite`} tone="amber" />
        <StatCard label="Faturamento" value={currency(finance?.grossRevenue)} hint={`ticket medio ${currency(finance?.averageTicket)}`} tone="emerald" />
        <StatCard label="Em preparo" value={String(metrics.preparing)} hint="cozinha da loja" tone="sky" />
        <StatCard label="Em entrega" value={String(metrics.onDelivery)} hint="esperando ou em rota" tone="rose" />
      </section>

      <section className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
        <StatCard label="Liquido da loja" value={currency(finance?.netRevenue)} hint="resultado da operacao" tone="sky" />
        <StatCard label="Repasse liberado" value={currency(finance?.availablePayoutAmount)} hint="valor pronto para repasse" tone="emerald" />
        <StatCard label="Em liquidacao" value={currency(finance?.pendingPayoutAmount)} hint="prazo financeiro em curso" tone="amber" />
        <StatCard label="Pedidos ativos" value={String(metrics.activeOrders.length)} hint="ainda nao concluídos" tone="rose" />
      </section>

      <section className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
        {storeRoutes.map((route) => (
          <Link
            key={route.href}
            href={route.href}
            className="rounded-[1.6rem] border border-white/80 bg-[linear-gradient(180deg,#ffffff_0%,#fff7ef_100%)] p-5 shadow-[0_18px_42px_rgba(43,24,15,0.06)] transition hover:-translate-y-0.5 hover:border-orange-300"
          >
            <p className="text-[11px] font-black uppercase tracking-[0.24em] text-orange-700">Rota navegavel</p>
            <h3 className="mt-3 text-xl font-black text-slate-950">{route.title}</h3>
            <p className="mt-3 text-sm leading-6 text-slate-600">{route.body}</p>
            <span className="mt-4 inline-flex rounded-full bg-[#2b180f] px-4 py-2 text-[11px] font-black uppercase tracking-[0.18em] text-white">
              Abrir tela
            </span>
          </Link>
        ))}
      </section>

      <section className="grid gap-4 xl:grid-cols-[1fr_1fr_1fr]">
        {actionDeck.map((card) => (
          <div key={card.title} className="rounded-[1.6rem] border border-slate-200 bg-[linear-gradient(180deg,#ffffff_0%,#fffaf5_100%)] p-5 shadow-[0_18px_42px_rgba(43,24,15,0.06)]">
            <p className="text-[11px] font-black uppercase tracking-[0.24em] text-slate-500">{card.title}</p>
            <p className="mt-3 text-xl font-black text-slate-950">{card.value}</p>
            <p className="mt-3 text-sm leading-6 text-slate-600">{card.body}</p>
          </div>
        ))}
      </section>

      <section className="grid gap-6 xl:grid-cols-[1.05fr_0.95fr]">
        <Panel title="Fila da loja" eyebrow="Pedidos reais em andamento">
          <div className="space-y-3">
            {!orders.length ? (
              <div className="rounded-[1.4rem] border border-dashed border-slate-300 bg-slate-50 p-6 text-sm text-slate-600">
                Nenhum pedido entrou ainda. Crie um pedido pela vitrine publica para acompanhar o fluxo daqui em diante.
              </div>
            ) : null}

            {orders.slice(0, 6).map((item) => (
              <div key={item.id} className="rounded-[1.4rem] border border-slate-200 bg-slate-50/90 p-4">
                <div className="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
                  <div>
                    <p className="text-sm font-black text-slate-900">#{item.id.slice(-8).toUpperCase()}</p>
                    <p className="mt-1 text-sm text-slate-600">{item.customer.fullName}</p>
                    <p className="mt-2 text-sm text-slate-500">{new Date(item.createdAt).toLocaleString('pt-BR')}</p>
                  </div>
                  <div className="flex flex-wrap items-center gap-2">
                    <StatusBadge tone={statusTone(item.payment?.status)}>{humanStatus(item.payment?.status ?? 'PENDING')}</StatusBadge>
                    <StatusBadge tone={statusTone(item.status)}>{humanStatus(item.status)}</StatusBadge>
                  </div>
                </div>
                {item.delivery?.driver?.fullName ? (
                  <p className="mt-3 text-sm text-slate-600">Motoboy: <strong className="text-slate-900">{item.delivery.driver.fullName}</strong></p>
                ) : null}
              </div>
            ))}
          </div>
        </Panel>

        <Panel title="Resumo do momento" eyebrow="Leitura rapida da operacao">
          <div className="space-y-3">
            <div className="rounded-[1.35rem] border border-slate-200 bg-white p-4">
              <p className="text-sm font-black text-slate-950">Aceite pendente</p>
              <p className="mt-2 text-sm leading-6 text-slate-600">Pedidos aguardando acao manual da loja.</p>
              <p className="mt-3 text-2xl font-black text-slate-950">{metrics.pendingAcceptance}</p>
            </div>
            <div className="rounded-[1.35rem] border border-slate-200 bg-white p-4">
              <p className="text-sm font-black text-slate-950">Preparo em andamento</p>
              <p className="mt-2 text-sm leading-6 text-slate-600">Pedidos que ja entraram na cozinha.</p>
              <p className="mt-3 text-2xl font-black text-slate-950">{metrics.preparing}</p>
            </div>
            <div className="rounded-[1.35rem] border border-slate-200 bg-white p-4">
              <p className="text-sm font-black text-slate-950">Entrega em curso</p>
              <p className="mt-2 text-sm leading-6 text-slate-600">Pedidos buscando motoboy ou em rota.</p>
              <p className="mt-3 text-2xl font-black text-slate-950">{metrics.onDelivery}</p>
            </div>
            <div className="rounded-[1.35rem] border border-slate-200 bg-slate-50 p-4">
              <p className="text-sm font-black text-slate-950">Estado ideal para teste</p>
              <p className="mt-2 text-sm leading-6 text-slate-600">
                Agora o ambiente esta limpo. Crie um pedido, aceite na loja, marque como pronto e solicite entrega para ver cada etapa nascer em tempo real.
              </p>
            </div>
          </div>
        </Panel>
      </section>

      {loading ? <p className="text-sm text-slate-500">Atualizando painel real da loja...</p> : null}
    </div>
  );
}