"use client";

import { Alert, Loader, SimpleGrid, Stack } from "@mantine/core";
import { useQuery } from "@tanstack/react-query";
import { DollarSign, TrendingUp, Wallet } from "lucide-react";
import { DashboardPage } from "@/components/dashboard/DashboardPage";
import { PageHeader } from "@/components/dashboard/PageHeader";
import { StatCard } from "@/components/dashboard/StatCard";
import { adminDashboardService } from "@/services/adminDashboardService";
import { useAuthStore } from "@/store/authStore";

export default function FinanceiroPage() {
  const token = useAuthStore((s) => s.token);

  const { data, isLoading, isError, refetch } = useQuery({
    queryKey: ["admin-dashboard-finance"],
    queryFn: () => adminDashboardService.finance(token!),
    enabled: Boolean(token),
    select: (r) => r.data,
  });

  return (
    <DashboardPage title="Financeiro">
      <PageHeader title="Financeiro" description="Receitas e assinaturas registradas no sistema." />
      {isError && (
        <Alert color="red" mb="md">
          Não foi possível carregar financeiro.{" "}
          <button type="button" onClick={() => refetch()}>
            Tentar novamente
          </button>
        </Alert>
      )}
      {isLoading ? (
        <Stack align="center" py="xl">
          <Loader color="blue" />
        </Stack>
      ) : (
        <SimpleGrid cols={{ base: 1, md: 3 }} spacing="md">
          <StatCard
            label="Receita total (pagamentos)"
            value={adminDashboardService.formatBrl(data?.revenueTotal ?? 0)}
            icon={DollarSign}
          />
          <StatCard label="MRR" value={adminDashboardService.formatBrl(data?.mrr ?? 0)} icon={TrendingUp} />
          <StatCard label="Pendente" value={adminDashboardService.formatBrl(data?.pending ?? 0)} icon={Wallet} />
        </SimpleGrid>
      )}
    </DashboardPage>
  );
}