'use client';

import { cn } from '@/lib/cn';
import { useT } from '@/lib/i18n/react';
import { formatAgorotShekels } from '@/lib/money';
import type { PurchasesOverviewStats } from '@/server/admin/resources/purchases/overview';
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from '@/components/ui/overlays/Tooltip';
import { Badge } from '@/components/ui/primitives/Badge';
import { Icon } from '@/components/ui/icons/Icon';

type Props = PurchasesOverviewStats;

function StatCard({
  label,
  value,
  href,
  urgent,
  urgentLabel,
  tooltip,
}: {
  label: string;
  value: number | string;
  href?: string;
  urgent?: boolean;
  urgentLabel?: string;
  tooltip?: string;
}) {
  const inner = (
    <div
      className={[
        'rounded-lg border p-4',
        urgent
          ? 'border-warning-500 bg-warning-50'
          : 'border-[var(--color-neutral-200)] bg-[var(--color-surface-base)]',
      ].join(' ')}
    >
      <div className="flex items-start justify-between gap-2">
        <p className="text-sm text-[var(--color-text-secondary)]">{label}</p>
        {urgent ? (
          <span className="inline-flex shrink-0 items-center gap-1">
            <Icon name="AlertTriangle" size="sm" className="text-warning-700" aria-hidden />
            {urgentLabel ? (
              <Badge tone="warning" size="sm">
                {urgentLabel}
              </Badge>
            ) : null}
          </span>
        ) : null}
      </div>
      <p className="mt-1 text-2xl font-bold text-[var(--color-text-primary)]">{value}</p>
    </div>
  );

  const card = href ? (
    <a
      href={href}
      aria-label={label}
      className={cn(
        'block rounded-lg',
        'focus-visible:ring-brand-primary-500 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none',
      )}
    >
      {inner}
    </a>
  ) : (
    inner
  );

  if (!tooltip) return card;

  return (
    <Tooltip>
      <TooltipTrigger asChild>{card}</TooltipTrigger>
      <TooltipContent side="bottom" className="max-w-xs text-wrap">
        {tooltip}
      </TooltipContent>
    </Tooltip>
  );
}

export function PurchasesOverview({
  revenueToday,
  revenueThisWeek,
  pendingReturns,
  failedPaymentsToday,
}: Props) {
  const t = useT('admin_purchases');
  return (
    <TooltipProvider delayDuration={200}>
      <div className="space-y-4 p-4">
        <header>
          <h2 className="text-2xl font-bold text-[var(--color-text-primary)]">
            {t('overview_heading')}
          </h2>
        </header>
        <div className="grid grid-cols-2 gap-4 lg:grid-cols-4">
          <StatCard
            label={t('overview_gmv_today')}
            value={formatAgorotShekels(Number(revenueToday))}
            tooltip={t('overview_gmv_today_tooltip')}
          />
          <StatCard
            label={t('overview_gmv_this_week')}
            value={formatAgorotShekels(Number(revenueThisWeek))}
            tooltip={t('overview_gmv_this_week_tooltip')}
          />
          <StatCard
            label={t('overview_pending_returns')}
            value={pendingReturns}
            href="/admin/purchases/returns"
            urgent={pendingReturns > 0}
            urgentLabel={t('overview_urgent_badge')}
            tooltip={t('overview_pending_returns_tooltip')}
          />
          <StatCard
            label={t('overview_failed_payments_today')}
            value={failedPaymentsToday}
            urgent={failedPaymentsToday > 0}
            urgentLabel={t('overview_urgent_badge')}
            tooltip={t('overview_failed_payments_today_tooltip')}
          />
        </div>
      </div>
    </TooltipProvider>
  );
}