'use client';

import { useQuery } from '@tanstack/react-query';
import { Building2, CheckCircle2, CircleDollarSign, Clock, TrendingUp, XCircle } from 'lucide-react';

import { getMasterDashboard } from '@/lib/api/dashboard';
import { formatCurrency } from '@/lib/format';
import { StatCard } from '@/components/domain/stat-card';

/**
 * Sem gráfico de evolução (tarefa 1 da Etapa 15, "se o backend expuser dado
 * suficiente"): `GET /master/dashboard` (`dashboard.service.ts#resumo`) só
 * devolve o snapshot atual — nenhuma série histórica de faturamento/novos
 * tenants. Ficou só com os cards de resumo, como a própria tarefa já
 * previa para esse cenário.
 */
export default function MasterDashboardPage() {
  const { data, isLoading } = useQuery({
    queryKey: ['master', 'dashboard'],
    queryFn: getMasterDashboard,
  });

  return (
    <div className="flex flex-col gap-6">
      <div>
        <h1 className="text-xl font-semibold text-foreground">Dashboard</h1>
        <p className="text-sm text-muted-foreground">Visão geral da plataforma</p>
      </div>

      <div>
        <h2 className="mb-3 text-sm font-medium text-muted-foreground">Tenants por status</h2>
        <div className="grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-5">
          <StatCard label="Trial" value={String(data?.tenants_por_status.trial ?? 0)} icon={Clock} loading={isLoading} />
          <StatCard
            label="Ativos"
            value={String(data?.tenants_por_status.ativo ?? 0)}
            icon={CheckCircle2}
            tone="success"
            loading={isLoading}
          />
          <StatCard
            label="Inadimplentes"
            value={String(data?.tenants_por_status.inadimplente ?? 0)}
            icon={XCircle}
            tone="danger"
            loading={isLoading}
          />
          <StatCard
            label="Suspensos"
            value={String(data?.tenants_por_status.suspenso ?? 0)}
            icon={XCircle}
            tone="warning"
            loading={isLoading}
          />
          <StatCard
            label="Cancelados"
            value={String(data?.tenants_por_status.cancelado ?? 0)}
            icon={Building2}
            loading={isLoading}
          />
        </div>
      </div>

      <div>
        <h2 className="mb-3 text-sm font-medium text-muted-foreground">Financeiro</h2>
        <div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
          <StatCard label="MRR" value={formatCurrency(data?.mrr)} icon={TrendingUp} loading={isLoading} />
          <StatCard
            label="Recebido no mês"
            value={formatCurrency(data?.total_recebido_mes)}
            icon={CircleDollarSign}
            tone="success"
            loading={isLoading}
          />
          <StatCard
            label="Em aberto"
            value={formatCurrency(data?.total_em_aberto)}
            icon={CircleDollarSign}
            tone="warning"
            loading={isLoading}
          />
        </div>
      </div>
    </div>
  );
}