'use client';

import { useT } from '@/lib/i18n/react';
import type { AffiliatesOverviewStats } from '@/server/admin/resources/affiliates/overview';
import { SharedStatCard } from '@/components/ui/admin/SharedStatCard';
import { ErrorState } from '@/components/ui/feedback/ErrorState';
import { Button } from '@/components/ui/primitives/Button';

type Props = AffiliatesOverviewStats & {
  loadFailed?: boolean;
};

export function AffiliatesOverview({
  activeEnrollments,
  pendingReferrals,
  quarantinedReferrals,
  unresolvedFraudFlags,
  loadFailed = false,
}: Props) {
  const t = useT('admin_affiliates');
  const tCommon = useT('common');

  if (loadFailed) {
    return (
      <ErrorState
        title={t('overview_stats_unavailable')}
        action={
          <Button variant="secondary" size="sm" onClick={() => window.location.reload()}>
            {tCommon('retry')}
          </Button>
        }
      />
    );
  }

  return (
    <div className="space-y-4 p-4">
      <p className="text-sm text-[var(--color-text-secondary)]">{t('overview_subtitle')}</p>
      <div className="grid grid-cols-2 gap-4 lg:grid-cols-4">
        <SharedStatCard
          label={t('overview_active_enrollments')}
          value={activeEnrollments}
          href="/admin/affiliates/list"
          tooltip={t('overview_active_enrollments_tooltip')}
          linkAriaLabel={t('overview_card_link_aria')}
        />
        <SharedStatCard
          label={t('overview_pending_referrals')}
          value={pendingReferrals}
          href="/admin/affiliates/list"
          tooltip={t('overview_pending_referrals_tooltip')}
          linkAriaLabel={t('overview_card_link_aria')}
        />
        <SharedStatCard
          label={t('overview_quarantined_referrals')}
          value={quarantinedReferrals}
          href="/admin/affiliates/fraud"
          tooltip={t('overview_quarantined_referrals_tooltip')}
          linkAriaLabel={t('overview_card_link_aria')}
        />
        <SharedStatCard
          label={t('overview_unresolved_fraud_flags')}
          value={unresolvedFraudFlags}
          href="/admin/affiliates/fraud"
          tone={unresolvedFraudFlags > 0 ? 'warning' : 'default'}
          urgentLabel={unresolvedFraudFlags > 0 ? t('overview_needs_attention') : undefined}
          tooltip={t('overview_unresolved_fraud_flags_tooltip')}
          linkAriaLabel={t('overview_card_link_aria')}
        />
      </div>
    </div>
  );
}