import ReportCard from '@/components/common/report-card';
import { Badge } from '@/components/ui/badge';
import { Progress } from '@/components/ui/progress';
import { useCurrency } from '@/hooks/use-currency';
import { useApiSWR } from '@/hooks/useSWR';
import { HandDepositIcon } from '@phosphor-icons/react';
import { useTranslation } from 'react-i18next';
import DashboardCard from './dashboard-card';

type DepositStats = {
  total: number;
  pending_count: number;
  pending_amount: number;
  deposit_bonus: number;
  growth_pct: number;
  progress_pct: number;
};

export default function DepositForecast() {
  const { data, isLoading } = useApiSWR<DepositStats>(
    '/admin/dashboard/deposit-stats',
  );
  const { format } = useCurrency();
  const { t } = useTranslation();

  const fmt = (v?: number) => (isLoading || v == null ? '-' : format(v));
  const cnt = (v?: number) => (isLoading || v == null ? '-' : String(v));
  const pct = data?.growth_pct ?? 0;

  return (
    <DashboardCard
      icon={HandDepositIcon}
      iconColor="success"
      title={t('Deposit Forecast')}
      link="/admin/transactions/deposits"
    >
      <>
        <div className="mb-4 flex flex-col">
          <div className="mb-4 flex items-center gap-2">
            <h3 className="text-3xl font-semibold">{fmt(data?.total)}</h3>
            {!isLoading && (
              <Badge variant={pct >= 0 ? 'successSubtle' : 'warning'}>
                {pct >= 0 ? '+' : ''}
                {pct}%
              </Badge>
            )}
          </div>
          <Progress
            value={data?.progress_pct ?? 0}
            variant="success"
            className="h-1.5 bg-warning-light"
          />
        </div>

        <div className="grid grid-cols-2 gap-4">
          <ReportCard
            label={t('Pending Deposits')}
            value={cnt(data?.pending_count)}
            variant="pending"
          />
          <ReportCard
            label={t('Pending Deposit Amount')}
            value={fmt(data?.pending_amount)}
            variant="pending"
          />
          <ReportCard
            label={t('Total Deposited')}
            value={fmt(data?.total)}
            variant="success"
          />
          <ReportCard
            label={t('Deposit Bonus')}
            value={fmt(data?.deposit_bonus)}
          />
        </div>
      </>
    </DashboardCard>
  );
}