// SCB Overview Dashboard
import { useQuery } from '@tanstack/react-query';
import { scbAdminApi } from '@/services/api/scbAdminApi';
import { useAuthStore } from '@/stores/authStore';
import DashboardLayout from '@/components/layout/DashboardLayout';
import MetricCard from '@/components/shared/MetricCard';
import LoadingSpinner from '@/components/shared/LoadingSpinner';

export default function SCBOverviewPage() {
  const { user } = useAuthStore();
  const scbId = user?.sovereignBankId || '';

  const { data, isLoading } = useQuery({
    queryKey: ['scb-overview', scbId],
    queryFn: () => scbAdminApi.getSCBOverview(scbId),
    enabled: !!scbId,
    refetchInterval: 10000,
  });

  if (isLoading) {
    return (
      <div className="page-container">
        <LoadingSpinner fullPage />
      </div>
    );
  }

  return (
    <div className="page-container">
      <div className="page-header">
        <h1>SCB Overview</h1>
      </div>
      <DashboardLayout>
        <MetricCard title="FI Count" value={data?.domesticNetwork.fiCount || 0} />
        <MetricCard title="Active FIs" value={data?.domesticNetwork.activeFIs || 0} />
        <MetricCard
          title="CBDC in Circulation"
          value={`$${(data?.localGRUCBDC.cbdcInCirculation.rCBDC || 0).toLocaleString()}`}
        />
      </DashboardLayout>
    </div>
  );
}

