'use client';
/**
 * FraudEventQueue — real <table> for fraud_events review.
 * Columns: severity · decision_point · adapter · codes · affiliate · ₪ at stake · age · referral · expand.
 * Rows sorted block→hold→flag, oldest-first (comes pre-sorted from API).
 * SCOPE: SIGNUP/EARN/WITHDRAW only; CLICK never appears here.
 *
 * Props-based presentational component — the container (T7) owns the useQuery.
 * Drawer hook (T5) plugs in via expandedId / onExpand.
 */
import { useT } from '@/lib/i18n/react';
import { Table } from '@/components/ui/primitives/Table';
import { Badge } from '@/components/ui/primitives/Badge';
import { IconButton } from '@/components/ui/primitives/IconButton';
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from '@/components/ui/overlays/Tooltip';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/primitives/Select';
import { ShieldX, Clock, Flag, ChevronDown, ChevronUp } from 'lucide-react';
import { cn } from '@/lib/cn';
import { formatDistanceToNow } from 'date-fns';
import { he as dateFnsHe } from 'date-fns/locale';
import { formatAgorotShekels } from '@/lib/money';

// ─── Types ────────────────────────────────────────────────────────────────────

export interface FraudEventRow {
  id: string;
  referral_id: string;
  user_id: string;
  decision_point: 'signup' | 'earn' | 'withdraw';
  adapter: string;
  action: 'block' | 'hold' | 'flag';
  codes: string[];
  ts: string;
  resolved_at: string | null;
  affiliate_name: string | null;
  enrollment_status: string | null;
  amount_agorot: number;
  severity_order: number;
}

export interface FraudQueueFilters {
  decision_point: string;
  action: string;
  adapter: string;
  status: 'unresolved' | 'all';
}

export const FRAUD_QUEUE_FILTERS_DEFAULT: FraudQueueFilters = {
  decision_point: 'all',
  action: 'all',
  adapter: 'all',
  status: 'unresolved',
};

interface Props {
  events: FraudEventRow[];
  expandedId: string | null;
  onExpand: (id: string | null) => void;
  /** Filter state — if provided, renders the filter bar above the table. */
  filters?: FraudQueueFilters;
  onFiltersChange?: (f: FraudQueueFilters) => void;
}

// ─── Severity config (tone maps to real Badge `tone` prop) ───────────────────

const SEVERITY_CONFIG: Record<
  'block' | 'hold' | 'flag',
  {
    icon: React.ReactNode;
    tone: 'danger' | 'warning' | 'neutral';
    labelKey: string;
    tooltipKey: string;
  }
> = {
  block: {
    icon: <ShieldX className="h-4 w-4" aria-hidden />,
    tone: 'danger',
    labelKey: 'fraud_severity_block',
    tooltipKey: 'fraud_severity_block_tooltip',
  },
  hold: {
    icon: <Clock className="h-4 w-4" aria-hidden />,
    tone: 'warning',
    labelKey: 'fraud_severity_hold',
    tooltipKey: 'fraud_severity_hold_tooltip',
  },
  flag: {
    icon: <Flag className="h-4 w-4" aria-hidden />,
    tone: 'neutral',
    labelKey: 'fraud_severity_flag',
    tooltipKey: 'fraud_severity_flag_tooltip',
  },
};

const ADAPTER_KEY_MAP: Record<string, string> = {
  'identity-ring': 'fraud_adapter_identity_ring',
  'ip-cluster': 'fraud_adapter_ip_cluster',
  velocity: 'fraud_adapter_velocity',
  'disposable-email': 'fraud_adapter_disposable_email',
  'card-fingerprint': 'fraud_adapter_card_fingerprint',
};

const CODE_KEY_MAP: Record<string, string> = {
  identity_match: 'fraud_code_identity_match',
  ip_shared: 'fraud_code_ip_shared',
  velocity_breach: 'fraud_code_velocity_breach',
  disposable_email: 'fraud_code_disposable_email',
  duplicate_card: 'fraud_code_duplicate_card',
};

const CODE_TOOLTIP_KEY_MAP: Record<string, string> = {
  identity_match: 'fraud_code_identity_match_tooltip',
  ip_shared: 'fraud_code_ip_shared_tooltip',
  velocity_breach: 'fraud_code_velocity_breach_tooltip',
  disposable_email: 'fraud_code_disposable_email_tooltip',
  duplicate_card: 'fraud_code_duplicate_card_tooltip',
};

// ─── Filter bar ───────────────────────────────────────────────────────────────

interface FilterBarProps {
  filters: FraudQueueFilters;
  onChange: (f: FraudQueueFilters) => void;
}

function FraudQueueFilterBar({ filters, onChange }: FilterBarProps) {
  const t = useT('admin_affiliates');

  const set = (key: keyof FraudQueueFilters) => (val: string) =>
    onChange({ ...filters, [key]: val });

  return (
    <div className="flex flex-wrap gap-3 pb-4" role="search" aria-label={t('fraud_filter_status')}>
      {/* Decision point */}
      <div className="w-44">
        <Select value={filters.decision_point} onValueChange={set('decision_point')}>
          <SelectTrigger aria-label={t('fraud_filter_decision_point')}>
            <SelectValue placeholder={t('fraud_filter_decision_point')} />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="all">{t('fraud_filter_all_decision_points')}</SelectItem>
            <SelectItem value="signup">{t('fraud_dp_signup')}</SelectItem>
            <SelectItem value="earn">{t('fraud_dp_earn')}</SelectItem>
            <SelectItem value="withdraw">{t('fraud_dp_withdraw')}</SelectItem>
          </SelectContent>
        </Select>
      </div>

      {/* Action / severity */}
      <div className="w-40">
        <Select value={filters.action} onValueChange={set('action')}>
          <SelectTrigger aria-label={t('fraud_filter_action')}>
            <SelectValue placeholder={t('fraud_filter_action')} />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="all">{t('fraud_filter_all_actions')}</SelectItem>
            <SelectItem value="block">{t('fraud_severity_block')}</SelectItem>
            <SelectItem value="hold">{t('fraud_severity_hold')}</SelectItem>
            <SelectItem value="flag">{t('fraud_severity_flag')}</SelectItem>
          </SelectContent>
        </Select>
      </div>

      {/* Adapter */}
      <div className="w-48">
        <Select value={filters.adapter} onValueChange={set('adapter')}>
          <SelectTrigger aria-label={t('fraud_filter_adapter')}>
            <SelectValue placeholder={t('fraud_filter_adapter')} />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="all">{t('fraud_filter_all_detectors')}</SelectItem>
            <SelectItem value="identity-ring">{t('fraud_adapter_identity_ring')}</SelectItem>
            <SelectItem value="ip-cluster">{t('fraud_adapter_ip_cluster')}</SelectItem>
            <SelectItem value="velocity">{t('fraud_adapter_velocity')}</SelectItem>
            <SelectItem value="disposable-email">{t('fraud_adapter_disposable_email')}</SelectItem>
            <SelectItem value="card-fingerprint">{t('fraud_adapter_card_fingerprint')}</SelectItem>
          </SelectContent>
        </Select>
      </div>

      {/* Status */}
      <div className="w-40">
        <Select value={filters.status} onValueChange={set('status')}>
          <SelectTrigger aria-label={t('fraud_filter_status')}>
            <SelectValue placeholder={t('fraud_filter_status')} />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="unresolved">{t('fraud_filter_status_unresolved')}</SelectItem>
            <SelectItem value="all">{t('fraud_filter_status_all')}</SelectItem>
          </SelectContent>
        </Select>
      </div>
    </div>
  );
}

// ─── Table row ────────────────────────────────────────────────────────────────

function FraudEventTableRow({
  event: ev,
  isExpanded,
  onExpand,
  t,
}: {
  event: FraudEventRow;
  isExpanded: boolean;
  onExpand: (id: string | null) => void;
  t: ReturnType<typeof useT<'admin_affiliates'>>;
}) {
  const sev = SEVERITY_CONFIG[ev.action];
  const adapterLabel = t(
    (ADAPTER_KEY_MAP[ev.adapter] ?? 'fraud_adapter_identity_ring') as Parameters<typeof t>[0],
  );
  const amountDisplay = formatAgorotShekels(ev.amount_agorot);
  const age = formatDistanceToNow(new Date(ev.ts), { locale: dateFnsHe, addSuffix: true });

  return (
    <Table.Row
      className={cn(
        'border-b border-(--color-border-subtle) transition-colors',
        isExpanded && 'bg-(--color-surface-raised)',
      )}
    >
      {/* Severity */}
      <Table.Cell>
        <Tooltip>
          <TooltipTrigger asChild>
            <Badge
              tone={sev.tone}
              size="sm"
              className="flex w-fit cursor-default items-center gap-1"
            >
              {sev.icon}
              <span>{t(sev.labelKey as Parameters<typeof t>[0])}</span>
            </Badge>
          </TooltipTrigger>
          <TooltipContent>{t(sev.tooltipKey as Parameters<typeof t>[0])}</TooltipContent>
        </Tooltip>
      </Table.Cell>

      {/* Decision point */}
      <Table.Cell className="text-(--color-text)">
        {t(`fraud_dp_${ev.decision_point}` as Parameters<typeof t>[0])}
      </Table.Cell>

      {/* Adapter */}
      <Table.Cell className="text-(--color-text-subtle)">{adapterLabel}</Table.Cell>

      {/* Codes */}
      <Table.Cell>
        <TooltipProvider>
          <div className="flex flex-wrap gap-1">
            {ev.codes.map((code) => {
              const codeLabel = t((CODE_KEY_MAP[code] ?? code) as Parameters<typeof t>[0]);
              const tooltipKey = CODE_TOOLTIP_KEY_MAP[code];
              const tooltipText = tooltipKey ? t(tooltipKey as Parameters<typeof t>[0]) : codeLabel;
              return (
                <Tooltip key={code}>
                  <TooltipTrigger asChild>
                    <Badge tone="neutral" size="sm" className="cursor-default text-xs">
                      {codeLabel}
                    </Badge>
                  </TooltipTrigger>
                  <TooltipContent>{tooltipText}</TooltipContent>
                </Tooltip>
              );
            })}
          </div>
        </TooltipProvider>
      </Table.Cell>

      {/* Affiliate */}
      <Table.Cell>
        <span className="font-medium">{ev.affiliate_name ?? ev.user_id.slice(-8)}</span>
        {ev.enrollment_status && (
          <span className="ms-1 text-xs text-(--color-text-subtle)">
            ({t(`status_${ev.enrollment_status}` as Parameters<typeof t>[0])})
          </span>
        )}
      </Table.Cell>

      {/* ₪ at stake */}
      <Table.Cell className="tabular-nums">{amountDisplay}</Table.Cell>

      {/* Age */}
      <Table.Cell className="whitespace-nowrap text-(--color-text-subtle)">{age}</Table.Cell>

      {/* Referral */}
      <Table.Cell className="font-mono text-xs text-(--color-text-subtle)">
        {ev.referral_id.slice(-8)}
      </Table.Cell>

      {/* Expand toggle */}
      <Table.Cell className="px-2">
        <IconButton
          variant="ghost"
          size="sm"
          aria-label={isExpanded ? t('fraud_expand_close') : t('fraud_expand_open')}
          aria-expanded={isExpanded}
          onClick={() => onExpand(isExpanded ? null : ev.id)}
        >
          {isExpanded ? (
            <ChevronUp className="h-4 w-4" aria-hidden />
          ) : (
            <ChevronDown className="h-4 w-4" aria-hidden />
          )}
        </IconButton>
      </Table.Cell>
    </Table.Row>
  );
}

// ─── Main export ──────────────────────────────────────────────────────────────

export function FraudEventQueue({ events, expandedId, onExpand, filters, onFiltersChange }: Props) {
  const t = useT('admin_affiliates');

  return (
    <TooltipProvider>
      <div>
        {/* Filter bar — rendered only when filter state is controlled from outside */}
        {filters && onFiltersChange && (
          <FraudQueueFilterBar filters={filters} onChange={onFiltersChange} />
        )}

        {events.length === 0 ? (
          <p className="py-8 text-center text-(--color-text-subtle)">{t('fraud_queue_empty')}</p>
        ) : (
          <Table>
            <Table.Head>
              <Table.Row>
                {(
                  [
                    'fraud_queue_col_severity',
                    'fraud_queue_col_decision_point',
                    'fraud_queue_col_adapter',
                    'fraud_queue_col_codes',
                    'fraud_queue_col_affiliate',
                    'fraud_queue_col_amount',
                    'fraud_queue_col_age',
                    'fraud_queue_col_referral',
                  ] as const
                ).map((key) => (
                  <Table.HeadCell
                    key={key}
                    className="tracking-wide text-(--color-text-subtle) uppercase"
                  >
                    {t(key)}
                  </Table.HeadCell>
                ))}
                {/* expand column — no label (icon-only) */}
                <Table.HeadCell className="w-10" aria-hidden="true" />
              </Table.Row>
            </Table.Head>
            <Table.Body>
              {events.map((ev) => (
                <FraudEventTableRow
                  key={ev.id}
                  event={ev}
                  isExpanded={expandedId === ev.id}
                  onExpand={onExpand}
                  t={t}
                />
              ))}
            </Table.Body>
          </Table>
        )}
      </div>
    </TooltipProvider>
  );
}