import { useEffect, useMemo, useRef, useState } from 'react';
import { useMediaScan } from '../hooks/useMediaScan';
import { useAI } from '../hooks/useAI';
import { PROVIDERS } from '../lib/providers';
import type { MediaAltStatus, MediaScanImage, MediaScanResult } from '../lib/types';

// eslint-disable-next-line @typescript-eslint/no-explicit-any
const ADMIN_URL: string = (window as any).accessmateConfig?.adminUrl ?? '/wp-admin/';

const ITEMS_PER_PAGE = 5;

const CHECKLIST = [
  'Find missing or unhelpful alt text',
  'Get AI-powered suggestions',
  'Review and update easily',
  'Improve accessibility for all users',
];

const STATUS_ORDER: Record<MediaAltStatus, number> = { missing: 0, weak: 1, ok: 2 };
const STATUS_LABEL: Record<MediaAltStatus, string> = { missing: 'Missing', weak: 'Needs review', ok: 'OK' };
const STATUS_COLOR: Record<MediaAltStatus, string> = { missing: '#ef4444', weak: '#f59e0b', ok: '#22c55e' };

const MODEL_LABELS: Record<string, string> = {
  'gpt-4o': 'GPT-4o',
  'gpt-4o-mini': 'GPT-4o mini',
  'claude-haiku-4-5-20251001': 'Claude Haiku 4.5',
  'claude-sonnet-4-20250514': 'Claude Sonnet 4',
  'gemini-2.5-flash': 'Gemini 2.5 Flash',
  'gemini-2.5-pro': 'Gemini 2.5 Pro',
  'llama3.2': 'Llama 3.2',
  mistral: 'Mistral',
  phi3: 'Phi-3',
};

type MediaTab = 'all' | 'missing' | 'weak';
type SortKey = 'date' | 'filename' | 'status' | 'alt';

// ── Formatting helpers ──────────────────────────────────────────

function formatDate(iso: string): string {
  const d = new Date(iso);
  if (Number.isNaN(d.getTime())) return '';
  return d.toLocaleString(undefined, {
    day: 'numeric', month: 'short', year: 'numeric', hour: '2-digit', minute: '2-digit',
  });
}

function formatSize(bytes: number | null): string {
  if (bytes === null) return '';
  if (bytes < 1024) return `${bytes} B`;
  if (bytes < 1024 * 1024) return `${Math.round(bytes / 1024)} KB`;
  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
}

function imageMeta(image: MediaScanImage): string {
  const parts: string[] = [];
  if (image.width && image.height) parts.push(`${image.width} × ${image.height}`);
  const size = formatSize(image.size);
  if (size) parts.push(size);
  if (image.date) parts.push(formatDate(image.date));
  return parts.join(' · ');
}

function sleep(ms: number): Promise<void> {
  return new Promise((resolve) => setTimeout(resolve, ms));
}

function scanPct(progress: { scanned: number; total: number }): number {
  return Math.min(100, Math.round((progress.scanned / Math.max(1, progress.total)) * 100));
}

/** Page numbers with '…' gaps — always shows first, last, current ± 1. */
function pageNumbers(current: number, total: number): (number | '…')[] {
  if (total <= 7) return Array.from({ length: total }, (_, i) => i + 1);
  const keep = new Set([1, total, current - 1, current, current + 1].filter((p) => p >= 1 && p <= total));
  const sorted = [...keep].sort((a, b) => a - b);
  const result: (number | '…')[] = [];
  let prev = 0;
  for (const p of sorted) {
    if (prev && p - prev > 1) result.push('…');
    result.push(p);
    prev = p;
  }
  return result;
}

// ── Icons (inline SVG, no icon library in this codebase — see OnboardingHero.tsx) ──

function PhotoIcon() {
  return (
    <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
      <rect x="2" y="3.5" width="16" height="13" rx="2.5" fill="currentColor" fillOpacity="0.16" />
      <path d="M2 14.2L7 9L10.2 12.2L13.6 7.8L18 13V14.3A1.7 1.7 0 0 1 16.3 16H3.7A1.7 1.7 0 0 1 2 14.3V14.2Z" fill="currentColor" />
      <circle cx="13.7" cy="7" r="1.5" fill="currentColor" />
    </svg>
  );
}

function WarningIcon() {
  return (
    <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
      <path d="M8.26 3.6C9.02 2.27 10.98 2.27 11.74 3.6L18.44 15.3C19.19 16.63 18.24 18.3 16.7 18.3H3.3C1.76 18.3 0.81 16.63 1.56 15.3L8.26 3.6Z" fill="currentColor" />
      <path d="M10 7.8V11.4" stroke="#fff" strokeWidth="1.6" strokeLinecap="round" />
      <circle cx="10" cy="13.8" r="1" fill="#fff" />
    </svg>
  );
}

function AlertCircleIcon() {
  return (
    <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
      <circle cx="10" cy="10" r="8.5" fill="currentColor" />
      <path d="M10 6V11" stroke="#fff" strokeWidth="1.6" strokeLinecap="round" />
      <circle cx="10" cy="13.6" r="1" fill="#fff" />
    </svg>
  );
}

function ExternalLinkIcon() {
  return (
    <svg width="16" height="16" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
      <path d="M8.25 3.5a.75.75 0 0 0 0 1.5h4.19L6.22 11.22a.75.75 0 1 0 1.06 1.06L13.5 6.06v4.19a.75.75 0 0 0 1.5 0v-6a.75.75 0 0 0-.75-.75h-6Z" />
      <path d="M3.5 6.5A2 2 0 0 1 5.5 4.5h2.25a.75.75 0 0 1 0 1.5H5.5a.5.5 0 0 0-.5.5v8a.5.5 0 0 0 .5.5h8a.5.5 0 0 0 .5-.5v-2.25a.75.75 0 0 1 1.5 0V14.5a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8Z" />
    </svg>
  );
}

function CheckIcon() {
  return (
    <svg width="14" height="14" viewBox="0 0 20 20" fill="none">
      <circle cx="10" cy="10" r="9" fill="#22c55e" />
      <path d="M6 10.2L8.7 12.8L14 7.2" stroke="#fff" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

function SparkleIcon({ size = 14 }: { size?: number }) {
  return (
    <svg width={size} height={size} viewBox="0 0 20 20" fill="none">
      <path d="M10 2L11.6 7.4L17 9L11.6 10.6L10 16L8.4 10.6L3 9L8.4 7.4L10 2Z" fill="currentColor" />
    </svg>
  );
}

function SortDirIcon() {
  return (
    <svg width="14" height="14" viewBox="0 0 20 20" fill="none" aria-hidden="true">
      <path d="M6.5 8.3L10 4.8L13.5 8.3" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
      <path d="M6.5 11.7L10 15.2L13.5 11.7" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

function RefreshIcon() {
  return (
    <svg width="14" height="14" viewBox="0 0 20 20" fill="none" aria-hidden="true">
      <path d="M16.5 10a6.5 6.5 0 1 1-2-4.7M16.5 3v3.8h-3.8" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

function DotsIcon() {
  return (
    <svg width="14" height="14" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
      <circle cx="10" cy="4" r="1.6" />
      <circle cx="10" cy="10" r="1.6" />
      <circle cx="10" cy="16" r="1.6" />
    </svg>
  );
}

function WarningDotIcon() {
  return (
    <svg width="12" height="12" viewBox="0 0 20 20" fill="none" aria-hidden="true">
      <path d="M10 3L18 16.5H2L10 3Z" stroke="currentColor" strokeWidth="1.8" strokeLinejoin="round" />
      <path d="M10 8V11.2" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" />
      <circle cx="10" cy="14" r="1" fill="currentColor" />
    </svg>
  );
}

function ScanIllustration() {
  return (
    <svg width="160" height="130" viewBox="0 0 160 130" fill="none" aria-hidden="true" className="aai-media-illustration">
      <rect x="18" y="40" width="62" height="56" rx="9" fill="#c7d2fe" transform="rotate(-10 49 68)" />
      <rect x="90" y="42" width="58" height="56" rx="9" fill="#dbe2fe" stroke="#a5b4fc" strokeWidth="1.5" transform="rotate(10 119 70)" />
      <path d="M100 90l9-13 7 7 9-12 9 18Z" fill="var(--aai-purple)" opacity="0.5" />
      <rect x="30" y="30" width="86" height="70" rx="9" fill="#eef1ff" stroke="#a5b4fc" strokeWidth="1.5" />
      <circle cx="94" cy="48" r="6" fill="#fff" />
      <path d="M38 92L59 67L76 84L94 61L110 92Z" fill="var(--aai-purple)" />
      <path d="M126 18l5 5M126 6v8M114 18h8" stroke="var(--aai-purple)" strokeWidth="2.25" strokeLinecap="round" />
    </svg>
  );
}

// ── Stat card ─────────────────────────────────────────────────

function MediaStatCard({
  icon, value, label, sub, variant,
}: {
  icon: React.ReactNode;
  value: number | null;
  label: string;
  sub?: string;
  variant: 'total' | 'missing' | 'review';
}) {
  return (
    <div className="aai-media-stat">
      <span className={`aai-media-stat__icon aai-media-stat__icon--${variant}`}>{icon}</span>
      <div>
        <div className={`aai-media-stat__value aai-media-stat__value--${variant}`}>{value === null ? '—' : value}</div>
        <div className="aai-media-stat__label">{label}</div>
        {sub && <div className="aai-media-stat__sub">{sub}</div>}
      </div>
    </div>
  );
}

// ── AI provider status card ─────────────────────────────────────

function AIStatusCard({ hasProvider, providerName, model }: { hasProvider: boolean; providerName: string; model: string }) {
  return (
    <div className={`aai-media-ai-card${hasProvider ? ' aai-media-ai-card--on' : ''}`}>
      <span className="aai-media-ai-card__icon" aria-hidden="true"><SparkleIcon size={24} /></span>
      <div>
        <strong>{hasProvider ? 'AI suggestions enabled' : 'AI suggestions not enabled'}</strong>
        <p>
          {hasProvider
            ? `Using ${providerName}${model ? ` (${model})` : ''} for alt text suggestions.`
            : 'Configure an AI provider in Settings to generate alt text suggestions for your images.'}
        </p>
        {hasProvider && (
          <span className="aai-media-ai-card__ready"><CheckIcon /> AI suggestions ready</span>
        )}
        <a className="aai-btn aai-btn--sm aai-btn--ghost" href="#/settings">
          {hasProvider ? 'Manage AI Provider' : 'Configure AI Provider'} <span aria-hidden="true">→</span>
        </a>
      </div>
    </div>
  );
}

// ── Filter tabs ───────────────────────────────────────────────

// ── Scanning step list item ─────────────────────────────────────

function ScanStep({
  index, phase, title, sub,
}: {
  index: number;
  phase: number;
  title: string;
  sub: string;
}) {
  const state = index < phase ? 'done' : index === phase ? 'active' : 'upcoming';
  return (
    <li className={`aai-media-steps__item aai-media-steps__item--${state}`}>
      <span className="aai-media-steps__dot" />
      <div>
        <div className="aai-media-steps__title">{title}</div>
        <div className="aai-media-steps__sub">{sub}</div>
      </div>
    </li>
  );
}

function MediaTab({
  label, count, active, onClick,
}: {
  label: string;
  count: number;
  active: boolean;
  onClick: () => void;
}) {
  return (
    <button type="button"
      className={`aai-media-tab${active ? ' aai-media-tab--active' : ''}`}
      role="tab"
      aria-selected={active}
      onClick={onClick}
    >
      {label}
      <span className="aai-media-tab__count">{count}</span>
    </button>
  );
}

// ── Sortable table header (mirrors the toolbar's Sort-by control) ──

function SortableHeader({
  label, sortKeyValue, activeKey, onSort,
}: {
  label: string;
  sortKeyValue: SortKey;
  activeKey: SortKey;
  onSort: (key: SortKey) => void;
}) {
  const active = activeKey === sortKeyValue;
  return (
    <th>
      <button type="button" className="aai-media-th-sort" onClick={() => onSort(sortKeyValue)}>
        {label}
        <span className={`aai-media-th-sort__icon${active ? ' aai-media-th-sort__icon--active' : ''}`} aria-hidden="true">
          <SortDirIcon />
        </span>
      </button>
    </th>
  );
}

// ── Small action-list dropdown (bulk actions / per-row menu) ──

function ActionMenu({
  trigger, items, align = 'right',
}: {
  trigger: React.ReactNode;
  items: { label: string; onClick: () => void; disabled?: boolean }[];
  align?: 'left' | 'right';
}) {
  const [open, setOpen] = useState(false);
  const ref = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const handler = (e: MouseEvent) => {
      if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false);
    };
    document.addEventListener('mousedown', handler);
    return () => document.removeEventListener('mousedown', handler);
  }, []);

  return (
    <div className="aai-media-menu" ref={ref}>
      <button type="button" className="aai-media-menu__trigger" onClick={() => setOpen((o) => !o)} aria-haspopup="menu" aria-expanded={open}>
        {trigger}
      </button>
      {open && (
        <div className={`aai-media-menu__list aai-media-menu__list--${align}`} role="menu">
          {items.map((item) => (
            <button type="button"
              key={item.label}
              className="aai-media-menu__item"
              role="menuitem"
              disabled={item.disabled}
              onClick={() => { setOpen(false); item.onClick(); }}
            >
              {item.label}
            </button>
          ))}
        </div>
      )}
    </div>
  );
}

// ── Results table row ─────────────────────────────────────────

function ImageRow({
  image, draft, onDraftChange, onApply, hasProvider, selected, onToggleSelect,
}: {
  image: MediaScanImage;
  draft: string;
  onDraftChange: (text: string) => void;
  onApply: (id: number, altText: string) => Promise<{ status: MediaAltStatus; reason: string }>;
  hasProvider: boolean;
  selected: boolean;
  onToggleSelect: () => void;
}) {
  const { run } = useAI();
  const [saving, setSaving] = useState(false);
  const [suggestError, setSuggestError] = useState<string | null>(null);
  const [applyMessage, setApplyMessage] = useState<{ kind: 'success' | 'error'; text: string } | null>(null);

  async function suggest() {
    setSuggestError(null);
    const context = `Filename: ${image.filename}. Title: ${image.title || 'none'}.` +
      (image.caption ? ` Caption: ${image.caption}.` : '');
    try {
      // attachment_id lets the backend send the actual image to a vision-capable
      // model instead of just this text — without it (or for an unsupported
      // format/provider) it falls back to guessing from context alone.
      const res = await run.mutateAsync({ task: 'alt_text', params: { context, attachment_id: String(image.id) } });
      if (res.text) onDraftChange(res.text.trim());
      else setSuggestError(res.error || 'No suggestion returned.');
    } catch (err) {
      setSuggestError(err instanceof Error ? err.message : 'Failed to get a suggestion.');
    }
  }

  async function apply() {
    setSaving(true);
    setApplyMessage(null);
    try {
      const { status, reason } = await onApply(image.id, draft);
      setApplyMessage(
        status === 'ok'
          ? { kind: 'success', text: 'Alt text updated.' }
          : { kind: 'success', text: `Alt text saved, but ${reason || 'still flagged for review'}.` }
      );
    } catch (err) {
      setApplyMessage({ kind: 'error', text: err instanceof Error ? err.message : 'Failed to update alt text.' });
    } finally {
      setSaving(false);
    }
  }

  const meta = imageMeta(image);

  return (
    <tr>
      <td>
        <input
          type="checkbox"
          checked={selected}
          onChange={onToggleSelect}
          aria-label={`Select ${image.filename}`}
        />
      </td>
      <td>
        {image.thumb
          ? <img className="aai-media-row__thumb" src={image.thumb} alt="" />
          : <span className="aai-media-row__thumb aai-media-row__thumb--empty" aria-hidden="true" />}
      </td>
      <td>
        <div className="aai-media-row__filename" title={image.filename}>{image.filename}</div>
        {image.title && <div className="aai-media-row__title" title={image.title}>{image.title}</div>}
        {meta && <div className="aai-media-row__meta" title={meta}>{meta}</div>}
      </td>
      <td>
        <span
          className="aai-badge"
          style={{ background: STATUS_COLOR[image.status] + '22', color: STATUS_COLOR[image.status] }}
        >
          {STATUS_LABEL[image.status]}
        </span>
      </td>
      <td style={{ maxWidth: 140 }}>
        <div className="aai-media-row__alt" title={image.alt || undefined}>
          {image.alt ? image.alt : <span className="aai-muted">—</span>}
        </div>
        {image.status === 'weak' && image.reason && (
          <div className="aai-media-row__reason"><WarningDotIcon /> {image.reason}</div>
        )}
      </td>
      <td style={{ minWidth: 200 }}>
        <div className="aai-media-row__edit">
          <input
            className="aai-media-row__input"
            type="text"
            value={draft}
            onChange={(e) => onDraftChange(e.target.value)}
            placeholder="Enter alt text…"
          />
          <button type="button"
            className="aai-btn aai-btn--sm aai-btn--ghost"
            onClick={suggest}
            disabled={!hasProvider || run.isPending}
            title={hasProvider ? 'Suggest alt text with AI' : 'Configure an AI provider in Settings'}
          >
            {run.isPending ? <span className="aai-spinner" aria-hidden="true" /> : <SparkleIcon />}
            Suggest
          </button>
        </div>
        {suggestError && (
          <div className="aai-media-row__reason"><WarningDotIcon /> {suggestError}</div>
        )}
      </td>
      <td>
        <div className="aai-media-row__actions">
          <button type="button"
            className="aai-btn aai-btn--sm aai-btn--primary"
            onClick={apply}
            disabled={saving || !draft.trim() || draft === image.alt}
          >
            {saving ? <span className="aai-spinner" aria-hidden="true" /> : 'Update'}
          </button>
          <ActionMenu
            trigger={<DotsIcon />}
            items={[
              { label: 'View in Media Library', onClick: () => window.open(`${ADMIN_URL}upload.php?item=${image.id}`, '_blank', 'noopener') },
              { label: 'Open original image', onClick: () => window.open(image.url, '_blank', 'noopener') },
            ]}
          />
        </div>
        {applyMessage && (
          <div
            className="aai-media-row__reason"
            style={applyMessage.kind === 'success' ? { color: '#16a34a' } : undefined}
          >
            {applyMessage.kind === 'success' ? <CheckIcon /> : <WarningDotIcon />} {applyMessage.text}
          </div>
        )}
      </td>
    </tr>
  );
}

// ── Main component ────────────────────────────────────────────

export default function MediaAccessibility() {
  const { lastScan, startScan, scanChunk, applyAltText } = useMediaScan();
  const { hasProvider, settings, run: bulkRun } = useAI();
  const [images, setImages] = useState<MediaScanImage[] | null>(null);
  const [scannedAt, setScannedAt] = useState<string | null>(null);
  const [currentPage, setCurrentPage] = useState(0);

  const [activeTab, setActiveTab] = useState<MediaTab>('all');
  const [searchQuery, setSearchQuery] = useState('');
  const [sortKey, setSortKey] = useState<SortKey>('date');
  const [sortDir, setSortDir] = useState<'asc' | 'desc'>('desc');

  const [selected, setSelected] = useState<Set<number>>(new Set());
  const [drafts, setDrafts] = useState<Record<number, string>>({});
  const [bulkProgress, setBulkProgress] = useState<{ done: number; total: number } | null>(null);

  const abortRef = useRef<AbortController | null>(null);
  const [scanningUI, setScanningUI] = useState(false);
  const [scanProgress, setScanProgress] = useState<{ scanned: number; total: number } | null>(null);
  // Which step of the scan is current: 0 Scanning images, 1 Analysing image
  // content, 2 Preparing results. Advances one at a time, never skipping
  // ahead, and only once the prior step's work has actually finished.
  const [scanPhase, setScanPhase] = useState<0 | 1 | 2>(0);

  // Hydrate from the persisted last scan once it loads, so a page refresh
  // doesn't lose results until the user explicitly rescans.
  useEffect(() => {
    if (images !== null) return;
    if (lastScan.data?.scanned_at) {
      setImages(lastScan.data.images);
      setScannedAt(lastScan.data.scanned_at);
    }
  }, [lastScan.data, images]);

  // Keyed by attachment id so sort-by-date can refer back to the scan's
  // original (newest-first) ordering — the API doesn't expose a real
  // timestamp, but the order it returns images in already reflects one.
  const scanOrder = useMemo(() => {
    const m = new Map<number, number>();
    (images ?? []).forEach((img, i) => m.set(img.id, i));
    return m;
  }, [images]);

  const totals = useMemo(() => {
    if (!images) return null;
    return {
      scanned: images.length,
      missing: images.filter((i) => i.status === 'missing').length,
      needs_review: images.filter((i) => i.status === 'weak').length,
    };
  }, [images]);

  async function runScan() {
    const controller = new AbortController();
    abortRef.current = controller;
    setScanningUI(true);
    setScanProgress(null);
    setScanPhase(0);
    try {
      const start = await startScan.mutateAsync({ signal: controller.signal });
      if (!('total' in start)) return; // non-premium 'unavailable' response — tab is hidden for Free, shouldn't normally happen

      setScanProgress({ scanned: 0, total: start.total });

      // Step 1: Scanning images — real progress, one chunk at a time. Even
      // a library with nothing to scan gets one chunk call back; an empty
      // batch is itself the signal that there's nothing left to do.
      // Each chunk is small (see MEDIA_SCAN_CHUNK_SIZE) and often finishes
      // in well under this floor, especially on a fast local server — pad
      // it out so the progress bar advances at a pace someone can actually
      // watch, instead of ticks landing faster than they're legible.
      const MIN_CHUNK_MS = 350;
      let result: MediaScanResult | null = null;
      while (!result) {
        const chunkStarted = Date.now();
        const chunk = await scanChunk.mutateAsync({ signal: controller.signal });
        if (!('scanned' in chunk)) break; // 'unavailable' or 'no_scan_in_progress' — stop, nothing more to do
        const chunkRemaining = MIN_CHUNK_MS - (Date.now() - chunkStarted);
        if (chunkRemaining > 0) await sleep(chunkRemaining);
        setScanProgress({ scanned: chunk.scanned, total: 'total' in chunk ? chunk.total : start.total });
        if (chunk.done) result = chunk;
      }
      if (!result) return;

      // Step 1 is done (every chunk has been scanned) — advance to step 2
      // before step 3, one at a time, never jumping straight back to step 1.
      setScanPhase(1);
      await sleep(600);
      setScanPhase(2);
      await sleep(500);

      setImages(result.images);
      setScannedAt(result.scanned_at);
      setActiveTab('all');
      setSearchQuery('');
      setCurrentPage(0);
      setSelected(new Set());
      setDrafts({});
    } catch (err) {
      if (!(err instanceof DOMException && err.name === 'AbortError')) throw err;
    } finally {
      abortRef.current = null;
      setScanningUI(false);
      setScanProgress(null);
      setScanPhase(0);
    }
  }

  function cancelScan() {
    abortRef.current?.abort();
  }

  async function handleApply(id: number, altText: string): Promise<{ status: MediaAltStatus; reason: string }> {
    const res = await applyAltText.mutateAsync({ attachment_id: id, alt_text: altText });
    // Trust the server's own classification of the saved text rather than
    // assuming it's always 'ok' — short/generic text is still 'weak'.
    const status = res.status ?? 'ok';
    const reason = res.reason ?? '';
    setImages((prev) => prev && prev.map((img) => img.id === id ? { ...img, alt: altText, status, reason } : img));
    return { status, reason };
  }

  function changeTab(tab: MediaTab) {
    setActiveTab(tab);
    setCurrentPage(0);
  }

  function changeSearch(q: string) {
    setSearchQuery(q);
    setCurrentPage(0);
  }

  function changeSort(key: SortKey) {
    setSortKey(key);
    setCurrentPage(0);
  }

  function toggleSortDir() {
    setSortDir((d) => (d === 'asc' ? 'desc' : 'asc'));
    setCurrentPage(0);
  }

  function handleHeaderSort(key: SortKey) {
    if (sortKey === key) toggleSortDir();
    else changeSort(key);
  }

  function setDraft(id: number, text: string) {
    setDrafts((d) => ({ ...d, [id]: text }));
  }

  function toggleSelect(id: number) {
    setSelected((prev) => {
      const next = new Set(prev);
      if (next.has(id)) next.delete(id); else next.add(id);
      return next;
    });
  }

  async function generateSuggestions(targets: MediaScanImage[]) {
    if (!hasProvider || targets.length === 0) return;
    setBulkProgress({ done: 0, total: targets.length });
    for (const img of targets) {
      const context = `Filename: ${img.filename}. Title: ${img.title || 'none'}.` +
        (img.caption ? ` Caption: ${img.caption}.` : '');
      try {
        const res = await bulkRun.mutateAsync({ task: 'alt_text', params: { context, attachment_id: String(img.id) } });
        if (res.text) setDraft(img.id, res.text.trim());
      } catch {
        // keep going — one failed suggestion shouldn't stop the rest
      }
      setBulkProgress((p) => (p ? { done: p.done + 1, total: p.total } : p));
    }
    setBulkProgress(null);
  }

  async function updateSelected(targets: MediaScanImage[]) {
    for (const img of targets) {
      const draft = drafts[img.id] ?? '';
      if (draft.trim() && draft !== img.alt) {
        await handleApply(img.id, draft);
      }
    }
    setSelected(new Set());
  }

  const filteredImages = useMemo(() => {
    if (!images) return [];
    let list = images;
    if (activeTab !== 'all') list = list.filter((img) => img.status === activeTab);

    const q = searchQuery.trim().toLowerCase();
    if (q) {
      list = list.filter((img) =>
        img.filename.toLowerCase().includes(q) || img.title.toLowerCase().includes(q));
    }

    const sorted = [...list].sort((a, b) => {
      let base = 0;
      if (sortKey === 'filename') base = a.filename.localeCompare(b.filename);
      else if (sortKey === 'status') base = STATUS_ORDER[a.status] - STATUS_ORDER[b.status];
      else if (sortKey === 'alt') base = a.alt.localeCompare(b.alt);
      else base = (scanOrder.get(b.id) ?? 0) - (scanOrder.get(a.id) ?? 0); // 'date': ascending = oldest first
      return sortDir === 'asc' ? base : -base;
    });

    return sorted;
  }, [images, activeTab, searchQuery, sortKey, sortDir, scanOrder]);

  const totalPages = useMemo(
    () => Math.max(1, Math.ceil(filteredImages.length / ITEMS_PER_PAGE)),
    [filteredImages],
  );
  const safePage = Math.min(currentPage, totalPages - 1);
  const pagedImages = filteredImages.slice(safePage * ITEMS_PER_PAGE, (safePage + 1) * ITEMS_PER_PAGE);

  const allOnPageSelected = pagedImages.length > 0 && pagedImages.every((img) => selected.has(img.id));
  const selectedImages = useMemo(() => (images ?? []).filter((img) => selected.has(img.id)), [images, selected]);

  function toggleSelectAllOnPage() {
    setSelected((prev) => {
      const next = new Set(prev);
      if (allOnPageSelected) pagedImages.forEach((img) => next.delete(img.id));
      else pagedImages.forEach((img) => next.add(img.id));
      return next;
    });
  }

  const providerName = PROVIDERS.find((p) => p.value === settings?.ai_provider)?.label ?? '';
  const modelName = settings?.ai_model ? (MODEL_LABELS[settings.ai_model] ?? settings.ai_model) : '';

  return (
    <div className="aai-media">
      {/* ── Header ── */}
      <div className="aai-media__header">
        <div>
          <h1 className="aai-media__title">Media Accessibility</h1>
          <p className="aai-media__sub">
            Review image alt text across your media library and improve descriptions with AI-powered suggestions.
          </p>
        </div>
        <a className="aai-btn aai-btn--ghost aai-media__header-link" href="https://accessmate.ai/" target="_blank" rel="noopener noreferrer">
          <ExternalLinkIcon /> Learn more
        </a>
      </div>

      {/* ── Scan card + AI status card ── */}
      <div className="aai-media-top">
        <div className="aai-media-card">
          {scanningUI ? (
            <>
              <div className="aai-media-card__copy">
                <h2 className="aai-media-card__title">Scanning your images&hellip;</h2>
                <p className="aai-media-card__desc">
                  AccessMate is analysing your media library and identifying images that may need better alt text.
                </p>
                <div className="aai-media-progress-row">
                  <div
                    className="aai-media-progress"
                    role="progressbar"
                    aria-label="Scanning media library"
                    aria-valuenow={scanProgress ? scanPct(scanProgress) : undefined}
                    aria-valuemin={0}
                    aria-valuemax={100}
                  >
                    <div
                      className="aai-media-progress__bar"
                      style={scanProgress ? { animation: 'none', left: 0, width: `${scanPct(scanProgress)}%` } : undefined}
                    />
                  </div>
                  {scanProgress && <span className="aai-media-progress__pct">{scanPct(scanProgress)}%</span>}
                </div>
                {scanProgress && (
                  <p className="aai-media-card__note">{scanProgress.scanned} of {scanProgress.total} images scanned</p>
                )}
                <p className="aai-media-card__note">This may take a few moments. You can keep this page open.</p>
                <button type="button" className="aai-btn aai-btn--ghost aai-btn--sm" onClick={cancelScan}>
                  Cancel scan
                </button>
              </div>
              <ScanIllustration />
              <ul className="aai-media-steps" aria-hidden="true">
                <ScanStep
                  index={0} phase={scanPhase} title="Scanning images"
                  sub={scanProgress ? `${scanProgress.scanned} of ${scanProgress.total} scanned` : 'Starting scan…'}
                />
                <ScanStep
                  index={1} phase={scanPhase} title="Analysing image content"
                  sub="Identifying images that need review"
                />
                <ScanStep
                  index={2} phase={scanPhase} title="Preparing results"
                  sub="This will only take a few moments"
                />
              </ul>
            </>
          ) : images === null ? (
            <>
              <div className="aai-media-card__copy">
                <h2 className="aai-media-card__title">Scan your media library</h2>
                <p className="aai-media-card__desc">
                  Find images with missing or potentially unhelpful alt text. AccessMate will analyse your media
                  library and suggest meaningful descriptions using AI, so you can make your website more accessible.
                </p>
                <button type="button" className="aai-btn aai-btn--primary" onClick={runScan}>
                  &#9654; Scan Media Library
                </button>
                <p className="aai-media-card__note">This will scan all images in your media library.</p>
              </div>
              <ScanIllustration />
              <ul className="aai-media-card__checklist" aria-hidden="true">
                {CHECKLIST.map((item) => (
                  <li key={item}><CheckIcon /> {item}</li>
                ))}
              </ul>
            </>
          ) : (
            <div className="aai-media-card__scanned">
              <span className="aai-media-card__scanned-icon" aria-hidden="true"><PhotoIcon /></span>
              <div className="aai-media-card__copy">
                <h2 className="aai-media-card__title">Media library scanned</h2>
                <p className="aai-media-card__desc">
                  We found {images.length} image{images.length === 1 ? '' : 's'} in your media library. Review the
                  results below and improve alt text to make your website more accessible.
                </p>
                <div className="aai-media-card__rescan">
                  <button type="button" className="aai-btn aai-btn--primary" onClick={runScan}>
                    <RefreshIcon /> Rescan Media Library
                  </button>
                  {scannedAt && <span className="aai-muted" style={{ fontSize: 12 }}>Last scanned on {formatDate(scannedAt)}</span>}
                </div>
              </div>
            </div>
          )}
        </div>

        {images !== null && !scanningUI && (
          <AIStatusCard hasProvider={hasProvider} providerName={providerName} model={modelName} />
        )}
      </div>

      {/* ── Info panel ── */}
      <div className="aai-media-info">
        <span className="aai-media-info__icon" aria-hidden="true">ⓘ</span>
        <div>
          <strong>Why media accessibility matters</strong>
          <p>
            Alt text helps people using screen readers understand your images. It also improves SEO and
            creates a better experience for all visitors.{' '}
            <a href="https://accessmate.ai/" target="_blank" rel="noopener noreferrer">
              Learn more about image accessibility &#8599;
            </a>
          </p>
        </div>
      </div>

      {/* ── Stat cards ── */}
      <div className="aai-media-stats">
        <MediaStatCard icon={<PhotoIcon />} value={totals ? totals.scanned : null} label="Images scanned" variant="total" />
        <MediaStatCard
          icon={<WarningIcon />} value={totals ? totals.missing : null} label="Missing alt text" variant="missing"
          sub={totals && totals.scanned > 0 ? `${Math.round((totals.missing / totals.scanned) * 100)}% of images` : undefined}
        />
        <MediaStatCard
          icon={<AlertCircleIcon />} value={totals ? totals.needs_review : null} label="Needs review" variant="review"
          sub={totals && totals.scanned > 0 ? `${Math.round((totals.needs_review / totals.scanned) * 100)}% of images` : undefined}
        />
      </div>

      {/* ── Toolbar: filter tabs, search, sort ── */}
      {images && images.length > 0 && (
        <div className="aai-media-toolbar">
          <div className="aai-media-tabs" role="tablist" aria-label="Filter images">
            <MediaTab label="All images" count={totals?.scanned ?? 0} active={activeTab === 'all'} onClick={() => changeTab('all')} />
            <MediaTab label="Missing alt text" count={totals?.missing ?? 0} active={activeTab === 'missing'} onClick={() => changeTab('missing')} />
            <MediaTab label="Needs review" count={totals?.needs_review ?? 0} active={activeTab === 'weak'} onClick={() => changeTab('weak')} />
          </div>

          <div className="aai-media-toolbar-right">
            <div className="aai-ps-search-wrap">
              <svg className="aai-ps-search-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none" aria-hidden="true"><circle cx="8.5" cy="8.5" r="5.5" stroke="currentColor" strokeWidth="1.6"/><path d="M13 13l3.5 3.5" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"/></svg>
              <input
                type="search"
                placeholder="Search images…"
                className="aai-ps-search"
                value={searchQuery}
                onChange={(e) => changeSearch(e.target.value)}
                aria-label="Search images"
              />
              {searchQuery && (
                <button type="button" className="aai-ps-search-clear" onClick={() => changeSearch('')} aria-label="Clear search">✕</button>
              )}
            </div>

            <div className="aai-media-sort">
              <label htmlFor="aai-media-sort-select">Sort by</label>
              <select
                id="aai-media-sort-select"
                value={sortKey}
                onChange={(e) => changeSort(e.target.value as SortKey)}
              >
                <option value="date">Upload date</option>
                <option value="filename">File name</option>
                <option value="status">Status</option>
                <option value="alt">Current alt text</option>
              </select>
              <button type="button"
                className="aai-media-sort-dir"
                onClick={toggleSortDir}
                aria-label={sortDir === 'asc' ? 'Sorted ascending — click for descending' : 'Sorted descending — click for ascending'}
                title={sortDir === 'asc' ? 'Ascending' : 'Descending'}
              >
                <SortDirIcon />
              </button>
            </div>
          </div>
        </div>
      )}

      {/* ── Bulk selection bar ── */}
      {images && filteredImages.length > 0 && (
        <div className="aai-media-bulkbar">
          <label className="aai-media-bulkbar__select">
            <input type="checkbox" checked={allOnPageSelected} onChange={toggleSelectAllOnPage} aria-label="Select all images on this page" />
            {selected.size} image{selected.size === 1 ? '' : 's'} selected
          </label>
          <div className="aai-media-bulkbar__right">
            <button type="button"
              className="aai-btn aai-btn--sm aai-btn--primary"
              onClick={() => generateSuggestions(filteredImages)}
              disabled={!hasProvider || bulkProgress !== null}
              title={hasProvider ? undefined : 'Configure an AI provider in Settings'}
            >
              {bulkProgress
                ? <>Generating&hellip; ({bulkProgress.done}/{bulkProgress.total})</>
                : <><SparkleIcon /> Generate AI suggestions for all</>}
            </button>
            <ActionMenu
              trigger={<>Bulk actions <span aria-hidden="true">▾</span></>}
              items={[
                {
                  label: 'Generate suggestions for selected',
                  disabled: selected.size === 0 || !hasProvider || bulkProgress !== null,
                  onClick: () => generateSuggestions(selectedImages),
                },
                {
                  label: 'Update selected',
                  disabled: selected.size === 0,
                  onClick: () => updateSelected(selectedImages),
                },
                {
                  label: 'Clear selection',
                  disabled: selected.size === 0,
                  onClick: () => setSelected(new Set()),
                },
              ]}
            />
          </div>
        </div>
      )}

      {/* ── Results table ── */}
      {images && (
        images.length === 0 ? (
          <p className="aai-chart-empty">No images found in your media library.</p>
        ) : filteredImages.length === 0 ? (
          <p className="aai-chart-empty">No images match your search or filter.</p>
        ) : (
          <div>
            <div className="aai-scan-table-wrap">
              <table className="aai-scan-table">
                <thead>
                  <tr>
                    <th>
                      <input type="checkbox" checked={allOnPageSelected} onChange={toggleSelectAllOnPage} aria-label="Select all images on this page" />
                    </th>
                    <th>Image</th>
                    <SortableHeader label="File name" sortKeyValue="filename" activeKey={sortKey} onSort={handleHeaderSort} />
                    <SortableHeader label="Status" sortKeyValue="status" activeKey={sortKey} onSort={handleHeaderSort} />
                    <SortableHeader label="Current alt text" sortKeyValue="alt" activeKey={sortKey} onSort={handleHeaderSort} />
                    <th>Change alt text</th>
                    <th>Actions</th>
                  </tr>
                </thead>
                <tbody>
                  {pagedImages.map((image) => (
                    <ImageRow
                      key={image.id}
                      image={image}
                      draft={drafts[image.id] ?? ''}
                      onDraftChange={(text) => setDraft(image.id, text)}
                      onApply={handleApply}
                      hasProvider={hasProvider}
                      selected={selected.has(image.id)}
                      onToggleSelect={() => toggleSelect(image.id)}
                    />
                  ))}
                </tbody>
              </table>
            </div>

            <div className="aai-media-pagination">
              <span className="aai-muted" style={{ fontSize: 13 }}>
                Showing {safePage * ITEMS_PER_PAGE + 1}–{Math.min((safePage + 1) * ITEMS_PER_PAGE, filteredImages.length)} of {filteredImages.length} images
              </span>
              {totalPages > 1 && (
                <div className="aai-media-pagination__pages">
                  <button type="button"
                    className="aai-media-pagination__nav"
                    onClick={() => setCurrentPage((p) => Math.max(0, p - 1))}
                    disabled={safePage === 0}
                    aria-label="Previous page"
                  >
                    ‹
                  </button>
                  {pageNumbers(safePage + 1, totalPages).map((p, i) => (
                    p === '…'
                      ? <span key={`gap-${i}`} className="aai-media-pagination__ellipsis">…</span>
                      : (
                        <button type="button"
                          key={p}
                          className={`aai-media-pagination__page${p === safePage + 1 ? ' aai-media-pagination__page--active' : ''}`}
                          onClick={() => setCurrentPage(p - 1)}
                          aria-current={p === safePage + 1 ? 'page' : undefined}
                        >
                          {p}
                        </button>
                      )
                  ))}
                  <button type="button"
                    className="aai-media-pagination__nav"
                    onClick={() => setCurrentPage((p) => Math.min(totalPages - 1, p + 1))}
                    disabled={safePage >= totalPages - 1}
                    aria-label="Next page"
                  >
                    ›
                  </button>
                </div>
              )}
            </div>
          </div>
        )
      )}
    </div>
  );
}