import { useEffect, useState } from 'react'
import { ai, BANDS, BUSY, CAVEAT, type Band, type ReviewRow, type Run } from '../ai'

const FILTERS: { label: string; band: Band | 'all' }[] = [
  { label: 'All', band: 'all' }, { label: 'Red', band: 'red' }, { label: 'Amber', band: 'amber' },
  { label: 'Missing', band: 'blank' }, { label: 'Unscored', band: 'unscored' },
]
const colourOf = (b: Band) => BANDS.find((x) => x.band === b)!.colour
const settled = (r: ReviewRow) => r.corrected_value ?? r.value ?? ''

/**
 * The review split pane: the source document beside its extracted fields.
 * Typing makes a draft; nothing is written until Save. Verify signs off one field
 * as it reads. Approve asks the server, which refuses while flagged fields are unverified.
 */
export function Review({ onUnsaved }: { onUnsaved: (n: number) => void }) {
  const [runs, setRuns] = useState<Run[]>()
  const [jobId, setJobId] = useState<string>()
  const [run, setRun] = useState<Run>()
  const [rows, setRows] = useState<ReviewRow[]>([])
  const [drafts, setDrafts] = useState<Record<number, string>>({})
  const [filter, setFilter] = useState<Band | 'all'>('all')
  const [refusal, setRefusal] = useState<string>()
  const [error, setError] = useState<string>()
  const [saving, setSaving] = useState(false)

  const dirty = rows.filter((r) => r.row_id in drafts && drafts[r.row_id] !== settled(r))
  useEffect(() => onUnsaved(dirty.length), [dirty.length, onUnsaved])
  useEffect(() => {
    if (!dirty.length) return
    const warn = (e: BeforeUnloadEvent) => e.preventDefault()
    window.addEventListener('beforeunload', warn)
    return () => window.removeEventListener('beforeunload', warn)
  }, [dirty.length])

  useEffect(() => {
    ai.runs().then((d) => { setRuns(d.runs); setJobId(d.runs[0]?.job_id) })
      .catch((e) => setError(`Can't load runs from ${API_BASE}: ${e.message}. Is the backend (or server_stub.py) running?`))
  }, [])

  // Load the chosen run, and poll it every 1.5s while it is still extracting.
  useEffect(() => {
    if (!jobId) return
    let alive = true
    let timer: ReturnType<typeof setTimeout>
    setRun(undefined); setRows([]); setDrafts({}); setRefusal(undefined)
    const tick = async () => {
      try {
        const r = await ai.run(jobId)
        if (!alive) return
        setRun(r)
        if (BUSY.includes(r.status)) timer = setTimeout(tick, 1500)
        else { const d = await ai.rows(jobId); if (alive) setRows(d.rows) }
      } catch (e) { if (alive) setError((e as Error).message) }
    }
    tick()
    return () => { alive = false; clearTimeout(timer) }
  }, [jobId])

  const reload = async () => {
    if (!jobId) return
    const [r, d] = await Promise.all([ai.run(jobId), ai.rows(jobId)])
    setRun(r); setRows(d.rows)
  }
  const pick = (id: string) => {
    if (dirty.length && !window.confirm(`${dirty.length} unsaved change(s) on this document. Discard them and leave?`)) return
    setJobId(id)
  }
  const save = async () => {
    setSaving(true)
    try {
      await Promise.all(dirty.map((r) => {
        const text = drafts[r.row_id].trim()
        // Same as extracted (or emptied) means "the extracted value was right", not an edit.
        return ai.patchRow(r.row_id, { corrected_value: text === '' || text === (r.value ?? '') ? null : text, verified: true })
      }))
      setDrafts({})
      await reload()
    } finally { setSaving(false) }
  }
  const verify = async (r: ReviewRow) => { await ai.patchRow(r.row_id, { verified: !r.verified }); await reload() }
  const verifyRemaining = async () => { if (jobId) { await ai.verifyRemaining(jobId); await reload() } }
  const approve = async () => {
    if (!jobId) return
    setRefusal(undefined)
    try { await ai.approve(jobId); await reload() } catch (e) { setRefusal((e as Error).message) }
  }

  if (error) return <div className="card text-[13px] text-bad">{error}</div>
  if (!runs) return <div className="card text-[13px] text-muted">Loading runs…</div>
  if (!runs.length) return <div className="card text-[13px] text-muted">No documents extracted yet.</div>

  const shown = filter === 'all' ? rows : rows.filter((r) => r.band === filter)
  const left = rows.filter((r) => r.band !== 'green' && !r.verified).length

  return (
    <div className="flex min-h-[560px] flex-1 flex-col gap-3">
      <div className="card mb-0 flex flex-wrap items-center gap-3 py-3">
        <label className="flex items-center gap-2 text-[12.5px] font-semibold">
          Document
          <select aria-label="Document" className="input" value={jobId} onChange={(e) => pick(e.target.value)}>
            {runs.map((r) => <option key={r.job_id} value={r.job_id}>{r.document}</option>)}
          </select>
        </label>
        {run && <span className={`pill ${run.status === 'done' ? 'bg-ok' : run.status === 'failed' ? 'bg-bad' : 'bg-warn'}`}>{run.status}</span>}
        {run && BUSY.includes(run.status) && <span className="text-[12.5px] text-muted tabular-nums">page {run.pages_done} of {run.pages_total || '?'}</span>}
        {run?.error && <span className="text-[12px] text-bad">{run.error}</span>}
        {/* OPTIONAL: retry on another model (failed runs) goes here */}
        {run?.status === 'done' && (
          <div className="ml-auto flex items-center gap-2">
            <span className="text-[12px] text-muted">{left} to verify</span>
            <button className="btn btn-sm" onClick={verifyRemaining} disabled={!left || run.approved}>Verify remaining</button>
            {run.approved
              ? <span className="pill bg-ok">✓ Approved</span>
              : <button className="btn btn-primary btn-sm" onClick={approve} disabled={dirty.length > 0}
                  title={dirty.length ? 'Save or discard your edits first' : undefined}>Approve</button>}
          </div>
        )}
        {refusal && <p role="alert" className="w-full rounded-lg bg-bad-bg px-3 py-1.5 text-[12px] font-semibold text-bad">Not approved: {refusal}</p>}
      </div>

      <div className="card mb-0 flex flex-wrap items-center gap-x-5 gap-y-2 py-3">
        <ul aria-label="Confidence bands" className="flex flex-wrap gap-x-4 gap-y-1">
          {BANDS.map((b) => (
            <li key={b.band} className="flex items-center gap-1.5 text-[12px] font-semibold">
              <i className="h-2.5 w-2.5 rounded-[3px]" style={{ background: b.colour }} />
              {b.label} · {run?.summary?.[b.band] ?? 0}
            </li>
          ))}
        </ul>
        <span className="text-[11.5px] text-muted">{CAVEAT}</span>
        <div role="group" aria-label="Filter by band" className="ml-auto flex gap-1">
          {FILTERS.map((f) => (
            <button key={f.band} aria-pressed={filter === f.band} onClick={() => setFilter(f.band)}
              className={`btn btn-sm ${filter === f.band ? 'btn-primary' : ''}`}>{f.label}</button>
          ))}
        </div>
      </div>

      <div className="flex min-h-0 flex-1 gap-3 max-[820px]:flex-col">
        <iframe title="Source document" src={jobId && ai.documentUrl(jobId)}
          className="min-h-[420px] flex-1 rounded-2xl border border-line bg-white" />
        <div className="card mb-0 flex min-h-0 flex-1 flex-col overflow-hidden p-0">
          {run && run.status !== 'done' && <p className="p-5 text-[13px] text-muted">Fields appear when extraction finishes.</p>}
          <ul aria-label="Extracted fields" className="flex-1 overflow-y-auto p-4">
            {shown.map((r) => {
              const draft = drafts[r.row_id] ?? settled(r)
              const isDirty = draft !== settled(r)
              return (
                <li key={r.row_id} className={`mb-2 grid grid-cols-[minmax(80px,130px)_1fr_auto_auto] items-center gap-2 ${r.verified && !isDirty ? 'opacity-70' : ''}`}>
                  <span className="truncate text-[12px] font-semibold text-muted" title={r.field}>{r.field}</span>
                  <input aria-label={r.field} value={draft} placeholder="empty" title={r.reason ?? undefined}
                    onChange={(e) => setDrafts((d) => ({ ...d, [r.row_id]: e.target.value }))}
                    onKeyDown={(e) => e.key === 'Escape' && setDrafts((d) => ({ ...d, [r.row_id]: settled(r) }))}
                    className={`input min-w-0 border-l-4 ${isDirty ? 'outline outline-warn' : ''}`} style={{ borderLeftColor: colourOf(r.band) }} />
                  <span className="w-9 text-right text-[11px] text-muted tabular-nums" title="Legibility score: how clearly it was read, not whether it is right">
                    {r.score?.toFixed(2) ?? '—'}
                  </span>
                  <button className="btn btn-sm w-[86px]" aria-label={`Verify ${r.field}`} aria-pressed={r.verified}
                    disabled={isDirty} title={isDirty ? 'Save or discard the edit first' : undefined} onClick={() => verify(r)}>
                    {r.verified ? '✓ Verified' : 'Verify'}
                  </button>
                  {(r.reason || r.corrected_value != null) && (
                    <span className="col-span-4 -mt-1 text-[11px] text-muted">
                      {r.reason}{r.reason && r.corrected_value != null && ' · '}
                      {r.corrected_value != null && <>extracted <s>{r.value || 'empty'}</s></>}
                    </span>
                  )}
                </li>
              )
            })}
          </ul>
          {dirty.length > 0 && (
            <div className="flex items-center gap-2.5 border-t border-line px-4 py-2.5">
              <span className="text-[12px] font-semibold text-warn">{dirty.length} unsaved change{dirty.length === 1 ? '' : 's'}</span>
              <button className="btn btn-sm ml-auto" onClick={() => setDrafts({})} disabled={saving}>Discard</button>
              <button className="btn btn-primary btn-sm" onClick={save} disabled={saving}>{saving ? 'Saving…' : 'Save'}</button>
            </div>
          )}
        </div>
      </div>
    </div>
  )
}