'use client';

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

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

export function ModerationOverview({
  pendingDeals,
  pendingReviews,
  openReports,
  pendingImages,
  loadFailed = false,
}: Props) {
  const t = useT('admin_moderation');
  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>
        }
      />
    );
  }

  const allClear =
    pendingDeals === 0 && pendingReviews === 0 && openReports === 0 && pendingImages === 0;

  return (
    <div className="flex flex-col gap-4">
      {allClear ? (
        <p className="text-sm text-[var(--color-text-secondary)]">{t('overview_all_clear')}</p>
      ) : null}
      <div className="grid grid-cols-2 gap-4 lg:grid-cols-4">
        <SharedStatCard
          label={t('overview_pending_deals')}
          value={pendingDeals}
          href="/admin/deals/active?state=PENDING_APPROVAL"
          tone={pendingDeals > 0 ? 'warning' : 'default'}
          tooltip={t('overview_pending_deals_tooltip')}
        />
        <SharedStatCard
          label={t('overview_pending_reviews')}
          value={pendingReviews}
          href="/admin/moderation/reviews"
          tone={pendingReviews > 0 ? 'warning' : 'default'}
          tooltip={t('overview_pending_reviews_tooltip')}
        />
        <SharedStatCard
          label={t('overview_open_reports')}
          value={openReports}
          href="/admin/moderation/reports"
          tone={openReports > 0 ? 'warning' : 'default'}
          tooltip={t('overview_open_reports_tooltip')}
        />
        <SharedStatCard
          label={t('overview_pending_images')}
          value={pendingImages}
          href="/admin/moderation/images"
          tone={pendingImages > 0 ? 'warning' : 'default'}
          tooltip={t('overview_pending_images_tooltip')}
        />
      </div>
    </div>
  );
}