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

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,
  });

  if (isLoading) return <LoadingSpinner fullPage />;

  return (
    <div className="page-container">
      <h1>SCB Overview</h1>
      <DashboardLayout>
        <MetricCard title="FI Count" value={(data as any)?.domesticNetwork?.fiCount || 0} />
        <MetricCard title="Active FIs" value={(data as any)?.domesticNetwork?.activeFIs || 0} />
      </DashboardLayout>
    </div>
  );
}