// @design-system: domain/admin/AiVerdictPanel

/**
 * AiVerdictPanel — displays the AI moderation verdict for an image.
 *
 * Shows: decision pill, confidence score, model ID, checked-at time,
 * human-readable reason, and a collapsible raw JSON payload.
 *
 * RTL-first. All strings via useT('admin_approval').
 * Time formatted HH:mm per time-formatting law.
 * Raw payload in <details> — keyboard accessible, no click div.
 */

import { cn } from '@/lib/cn';
import { formatDateTime } from '@/lib/format';
import { useT, useLocale } from '@/lib/i18n/react';
import { decisionPillVariants } from './variants';

// ─── Props ────────────────────────────────────────────────────────────────────

export type AiDecision = 'PASS' | 'FLAG' | 'REJECT' | 'ERROR';

export interface AiVerdictPanelProps {
  decision: AiDecision | null;
  /** Confidence score 0–1. Displayed as percentage. */
  score: number | null;
  /** Model identifier string, e.g. "gemini-3-flash-preview". */
  model: string | null;
  /** When AI processed the image. Formatted HH:mm. */
  checkedAt: Date | null;
  /** Human-readable AI reason / explanation. */
  reason: string | null;
  /** Raw AI response payload (opaque — shown in collapsible). */
  rawPayload: unknown;
  className?: string;
}

// ─── Component ────────────────────────────────────────────────────────────────

export function AiVerdictPanel({
  decision,
  score,
  model,
  checkedAt,
  reason,
  rawPayload,
  className,
}: AiVerdictPanelProps) {
  const t = useT('admin_approval');
  const { locale } = useLocale();

  const formattedTime = checkedAt
    ? formatDateTime(checkedAt instanceof Date ? checkedAt : new Date(checkedAt), locale)
    : null;

  const scorePercent = score != null ? `${Math.round(score * 100)}%` : null;

  return (
    <section
      className={cn('bg-surface-inset rounded-lg p-4', 'border-border-default border', className)}
      aria-label={t('ai_verdict_title')}
    >
      <h3 className="text-text-secondary mb-3 text-xs font-semibold tracking-wide uppercase">
        {t('ai_verdict_title')}
      </h3>

      {/* Decision pill + score */}
      <div className="mb-3 flex flex-wrap items-center gap-2">
        {decision ? (
          <span className={decisionPillVariants({ decision, size: 'md' })}>
            {t(`ai_decision_${decision.toLowerCase()}` as Parameters<typeof t>[0])}
          </span>
        ) : (
          <span className={decisionPillVariants({ decision: 'ERROR', size: 'md' })}>—</span>
        )}
        {scorePercent && (
          <span className="text-text-secondary text-sm">
            <span className="text-text-muted text-xs">{t('ai_score_label')}: </span>
            <span className="text-text-primary font-medium">{scorePercent}</span>
          </span>
        )}
      </div>

      {/* Metadata grid */}
      <dl className="mb-3 grid grid-cols-1 gap-x-4 gap-y-2 text-sm sm:grid-cols-2">
        {model && (
          <div>
            <dt className="text-text-secondary text-xs font-semibold uppercase">
              {t('ai_model_label')}
            </dt>
            <dd className="text-text-primary font-mono text-xs">{model}</dd>
          </div>
        )}
        {formattedTime && (
          <div>
            <dt className="text-text-secondary text-xs font-semibold uppercase">
              {t('ai_checked_at_label')}
            </dt>
            <dd className="text-text-primary text-xs">{formattedTime}</dd>
          </div>
        )}
      </dl>

      {/* Reason */}
      {reason && (
        <div className="mb-3">
          <p className="text-text-secondary mb-1 text-xs font-semibold uppercase">
            {t('ai_reason_label')}
          </p>
          <p className="text-text-primary text-sm">{reason}</p>
        </div>
      )}

      {/* Raw payload — collapsible */}
      {rawPayload != null && (
        <details className="mt-2">
          <summary className="text-text-secondary hover:text-text-primary cursor-pointer text-xs font-semibold uppercase transition-colors select-none">
            {t('ai_raw_payload_label')}
          </summary>
          <pre
            className={cn(
              'bg-surface-base mt-2 overflow-x-auto rounded-md p-3',
              'text-text-primary font-mono text-xs leading-relaxed',
              'border-border-default border',
            )}
          >
            {JSON.stringify(rawPayload, null, 2)}
          </pre>
        </details>
      )}
    </section>
  );
}