// @design-system: domain/support/AIReasoningPanel

/**
 * AIReasoningPanel — collapsible list of AI interventions for a support parent.
 * Shows agent name, tool, confidence, decision, cost, and latency per intervention.
 *
 * @example
 * <AIReasoningPanel interventions={interventions} />
 */

import { useState } from 'react';
import { Icon } from '@/components/ui/icons/Icon';
import { Badge } from '@/components/ui/primitives/Badge';
import { ConfidenceBar } from '@/components/ui/primitives/ConfidenceBar';
import { cn } from '@/lib/cn';
import type { AIInterventionView } from '@/server/support/types';
import { useT } from '@/lib/i18n/react';
import { fmtDuration, formatDateTime } from '@/lib/format';
import { useLocale } from '@/lib/i18n/react';

export interface AIReasoningPanelProps {
  interventions: AIInterventionView[];
}

const DECISION_TONE: Record<
  AIInterventionView['decision'],
  'success' | 'warning' | 'danger' | 'neutral'
> = {
  auto: 'success',
  escalate: 'warning',
  ask: 'info' as never,
  propose: 'neutral',
};

function formatCost(usd: string | null): string {
  if (!usd) return '—';
  const n = parseFloat(usd);
  if (n < 0.001) return `<$0.001`;
  return `$${n.toFixed(3)}`;
}

export function AIReasoningPanel({ interventions }: AIReasoningPanelProps) {
  const [expanded, setExpanded] = useState<string | null>(null);
  const t = useT('admin_support');
  const { locale } = useLocale();

  if (interventions.length === 0) {
    return <p className="text-text-muted py-3 text-sm">No AI interventions recorded.</p>;
  }

  return (
    <ul className="space-y-2">
      {interventions.map((iv) => {
        const isOpen = expanded === iv.id;
        const tone = DECISION_TONE[iv.decision] ?? 'neutral';
        return (
          <li key={iv.id} className="border-border-default rounded-lg border">
            <button
              type="button"
              aria-expanded={isOpen}
              aria-label={iv.toolName}
              onClick={() => setExpanded(isOpen ? null : iv.id)}
              className={cn(
                'flex w-full items-start gap-3 p-3 text-start',
                'hover:bg-surface-raised rounded-lg transition-colors',
                'focus-visible:outline-brand-primary-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-1',
              )}
            >
              <div className="min-w-0 flex-1">
                <div className="flex flex-wrap items-center gap-2">
                  <span className="text-text-primary truncate text-sm font-medium">
                    {iv.toolName}
                  </span>
                  <Badge tone={tone} size="sm">
                    {iv.decision}
                  </Badge>
                </div>
                <p className="text-text-muted mt-0.5 text-xs">
                  {iv.agentName} · {formatDateTime(iv.createdAt, locale)}
                </p>
                {iv.confidence != null && (
                  <ConfidenceBar value={iv.confidence} className="mt-1.5" />
                )}
              </div>
              <Icon
                name="ChevronDown"
                size="sm"
                color="muted"
                className={cn(
                  'mt-0.5 shrink-0 transition-transform motion-reduce:transition-none',
                  isOpen && 'rotate-180 motion-reduce:rotate-0',
                )}
                aria-hidden
              />
            </button>

            {isOpen && (
              <div className="border-border-default border-t px-3 pt-2 pb-3">
                <dl className="space-y-1 text-xs">
                  <div className="flex gap-2">
                    <dt className="text-text-muted w-20 shrink-0">{t('panel_latency')}</dt>
                    <dd className="text-text-primary font-mono">{iv.latencyMs != null ? fmtDuration(iv.latencyMs) : '—'}</dd>
                  </div>
                  <div className="flex gap-2">
                    <dt className="text-text-muted w-20 shrink-0">{t('panel_tokens')}</dt>
                    <dd className="text-text-primary font-mono">
                      {iv.tokensIn != null ? `${iv.tokensIn} in` : '—'}
                      {iv.tokensOut != null ? ` / ${iv.tokensOut} out` : ''}
                    </dd>
                  </div>
                  <div className="flex gap-2">
                    <dt className="text-text-muted w-20 shrink-0">{t('panel_cost')}</dt>
                    <dd className="text-text-primary font-mono">{formatCost(iv.costUsd)}</dd>
                  </div>
                  {iv.output && (
                    <div className="mt-2">
                      <dt className="text-text-muted mb-1 font-medium">{t('panel_output')}</dt>
                      <dd className="bg-surface-raised rounded p-2 font-mono text-xs break-all whitespace-pre-wrap">
                        {iv.output}
                      </dd>
                    </div>
                  )}
                </dl>
              </div>
            )}
          </li>
        );
      })}
    </ul>
  );
}