'use client';

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

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

export function SupportOverview({
  openTickets,
  awaitingAgent,
  escalatedTickets,
  openCases,
  loadFailed = false,
}: Props) {
  const t = useT('admin_support');
  const tCommon = useT('common');

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

  return (
    <div className="grid grid-cols-2 gap-4 p-4 lg:grid-cols-4">
      <SharedStatCard
        label={t('overview_open_tickets')}
        value={openTickets}
        tooltip={t('overview_open_tickets_tooltip')}
      />
      <SharedStatCard
        label={t('overview_awaiting_agent')}
        value={awaitingAgent}
        href="/admin/support?assigned=unassigned#inbox"
        tone={awaitingAgent > 0 ? 'warning' : 'default'}
        tooltip={t('overview_awaiting_agent_tooltip')}
      />
      <SharedStatCard
        label={t('overview_escalated_tickets')}
        value={escalatedTickets}
        href="/admin/support?type=ticket&status=escalated#inbox"
        tone={escalatedTickets > 0 ? 'warning' : 'default'}
        tooltip={t('overview_escalated_tickets_tooltip')}
      />
      <SharedStatCard
        label={t('overview_open_cases')}
        value={openCases}
        href="/admin/support?type=case#inbox"
        tooltip={t('overview_open_cases_tooltip')}
      />
    </div>
  );
}