import { useEffect, useState } from 'react'
import { useMissionRequirements, useWhoCanSupport } from './queries'
import { Badge, Panel } from '../../components/ui'
import { bandColor, num } from '../../lib/format'

const selectCls =
  'rounded-lg border border-line/70 bg-navy-900 px-3 py-2 text-sm text-ink outline-none focus:border-gold min-w-[20rem]'

// WhoCanSupport reads the persisted screenMATCH qualifications for one requirement (the stored
// artifact, never a rescore) and shows who can support that mission today, best first.
export function WhoCanSupport() {
  const requirements = useMissionRequirements()
  const [reqId, setReqId] = useState('')
  useEffect(() => {
    if (!reqId && requirements.data?.length) setReqId(requirements.data[0].id)
  }, [requirements.data, reqId])
  const support = useWhoCanSupport(reqId || null)

  return (
    <Panel title="Who can support this mission today" hint="read from the stored screenMATCH evaluations">
      <label className="mb-3 flex flex-col gap-1.5">
        <span className="text-[11px] font-bold uppercase tracking-wider text-muted">Requirement</span>
        <select className={selectCls} value={reqId} onChange={(e) => setReqId(e.target.value)}>
          {requirements.data?.map((r) => (
            <option key={r.id} value={r.id}>
              {r.title}
            </option>
          ))}
        </select>
      </label>

      {support.isLoading ? (
        <p className="py-4 text-center text-muted">Loading…</p>
      ) : !support.data?.length ? (
        <p className="py-4 text-center text-sm text-faint">
          No one has been screened against this requirement yet. Run a screen in screenMATCH, the
          qualification is stored and appears here.
        </p>
      ) : (
        <ul className="space-y-2">
          {support.data.map((s) => (
            <li
              key={s.candidate_id}
              className="flex items-center gap-4 rounded-xl border border-line/60 bg-surface/70 px-4 py-2.5"
            >
              <div className="min-w-0 flex-1">
                <div className="font-semibold">{s.full_name}</div>
                <div className="text-xs text-faint">screened {s.evaluated_at}</div>
              </div>
              <Badge color={s.available ? 'var(--color-ok)' : 'var(--color-warn)'} subtle>
                {s.available ? 'Available' : 'Engaged'}
              </Badge>
              <Badge color={bandColor(s.band)} subtle>
                {s.band_label}
              </Badge>
              <div className="w-12 text-right text-lg font-extrabold tabular-nums" style={{ color: bandColor(s.band) }}>
                {num(s.total_score).toFixed(0)}
              </div>
            </li>
          ))}
        </ul>
      )}
    </Panel>
  )
}