'use client';

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

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

export function VendorsOverview({
  totalActive,
  pendingApproval,
  suspended,
  newThisWeek,
  loadFailed = false,
}: Props) {
  const t = useT('admin_vendors');
  const tCommon = useT('common');

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

  const allZero =
    totalActive === 0 && pendingApproval === 0 && suspended === 0 && newThisWeek === 0;

  return (
    <div className="flex flex-col gap-4">
      {allZero ? (
        <p className="text-sm text-[var(--color-text-secondary)]">{t('overview_empty')}</p>
      ) : null}
      <div className="grid grid-cols-2 gap-4 lg:grid-cols-4">
        <SharedStatCard
          label={t('overview_total_active')}
          value={totalActive}
          href="/admin/vendors/all?state=ACTIVE,VETERAN"
          tooltip={t('overview_total_active_tooltip')}
        />
        <SharedStatCard
          label={t('overview_pending_approval')}
          value={pendingApproval}
          href="/admin/vendors/all?state=PENDING_FIRST_APPROVAL,PENDING_PROCESSOR"
          tone={pendingApproval > 0 ? 'warning' : 'default'}
          tooltip={t('overview_pending_approval_tooltip')}
        />
        <SharedStatCard
          label={t('overview_suspended')}
          value={suspended}
          href="/admin/vendors/all?state=FROZEN,BANNED"
          tooltip={t('overview_suspended_tooltip')}
        />
        <SharedStatCard
          label={t('overview_new_this_week')}
          value={newThisWeek}
          href="/admin/vendors/all"
          tooltip={t('overview_new_this_week_tooltip')}
        />
      </div>
    </div>
  );
}