import DepositForecast from '@/components/admin/dashboard/deposit-forecast';
import LatestUsers from '@/components/admin/dashboard/latest-users';
import { TransactionsChart } from '@/components/admin/dashboard/transactions-chart';
import WithdrawForecast from '@/components/admin/dashboard/withdraw-forecast';
import ReportCard from '@/components/common/report-card';
import { useApiSWR } from '@/hooks/useSWR';
import {
  HeadsetIcon,
  ShieldWarningIcon,
  UserCircleCheckIcon,
  UsersFourIcon,
} from '@phosphor-icons/react';
import { useTranslation } from 'react-i18next';

type DashboardStats = {
  users: {
    total: number;
    active: number;
    pending_verification: number;
  };
  staff: {
    total: number;
    support_agents: number;
  };
  kyc: { pending: number };
  tickets: { pending: number };
};

const Dashboard = () => {
  const { t } = useTranslation();
  const { data: stats, isLoading } = useApiSWR<DashboardStats>(
    '/admin/dashboard/stats',
  );

  const cnt = (v?: number) => (isLoading || v == null ? '-' : String(v));

  return (
    <div className="space-y-4">
      <div className="grid grid-cols-2 gap-2 md:grid-cols-4">
        <ReportCard
          variant="important"
          label={t('Registered Users')}
          value={cnt(stats?.users.total)}
          bgIcon={UsersFourIcon}
        />
        <ReportCard
          variant="important"
          label={t('Active Users')}
          value={cnt(stats?.users.active)}
          bgIcon={UserCircleCheckIcon}
        />
        <ReportCard
          variant="important"
          label={t('Pending KYC')}
          value={cnt(stats?.kyc.pending)}
          bgIcon={ShieldWarningIcon}
        />
        <ReportCard
          variant="important"
          label={t('Pending Tickets')}
          value={cnt(stats?.tickets.pending)}
          bgIcon={HeadsetIcon}
        />
        <ReportCard
          variant="minimal"
          label={t('Total Staff')}
          value={cnt(stats?.staff.total)}
          bgIcon={UsersFourIcon}
        />
        <ReportCard
          variant="minimal"
          label={t('Support Agents')}
          value={cnt(stats?.staff.support_agents)}
          bgIcon={UsersFourIcon}
        />
        <ReportCard
          variant="minimal"
          label={t('Pending Email Verification')}
          value={cnt(stats?.users.pending_verification)}
          bgIcon={UsersFourIcon}
        />
      </div>

      <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
        <DepositForecast />
        <WithdrawForecast />
      </div>

      <TransactionsChart />

      <LatestUsers />
    </div>
  );
};

Dashboard.title = 'Dashboard';

export default Dashboard;