import { useEffect, useState } from 'react'
import { Check, Layers, Loader2, X } from 'lucide-react'
import { useCandidates, useDecideSlateMember, useGenerateSlate, useRequirements } from '../lib/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-blue min-w-[16rem]'

export function Slate() {
  const requirements = useRequirements()
  const candidates = useCandidates()
  const gen = useGenerateSlate()
  const decide = useDecideSlateMember()
  const [reqId, setReqId] = useState('')
  const [name, setName] = useState('Proposal Candidate Slate')
  // The recorded human decision per member (the human in the loop control). Cleared on a new slate.
  const [decisions, setDecisions] = useState<Record<string, 'approved' | 'rejected'>>({})

  function recordDecision(candidateId: string, decision: 'approved' | 'rejected') {
    if (!gen.data) return
    decide.mutate(
      { slateId: gen.data.slate_id, candidateId, decision },
      { onSuccess: () => setDecisions((d) => ({ ...d, [candidateId]: decision })) },
    )
  }

  useEffect(() => {
    if (!reqId && requirements.data?.length) setReqId(requirements.data[0].id)
  }, [requirements.data, reqId])

  const names = new Map((candidates.data ?? []).map((c) => [c.id, c.full_name]))

  return (
    <div className="space-y-4">
      <Panel className="flex flex-wrap items-end gap-4 p-4">
        <label className="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>
        <label className="flex flex-col gap-1.5">
          <span className="text-[11px] font-bold uppercase tracking-wider text-muted">Slate name</span>
          <input
            className={selectCls}
            value={name}
            onChange={(e) => setName(e.target.value)}
          />
        </label>
        <button
          onClick={() => reqId && gen.mutate({ requirementId: reqId, name }, { onSuccess: () => setDecisions({}) })}
          disabled={!reqId || gen.isPending}
          className="flex items-center gap-2 rounded-lg bg-gradient-to-r from-blue to-navy-700 px-5 py-2.5 text-sm font-bold text-white hover:brightness-110 disabled:opacity-50"
        >
          {gen.isPending ? <Loader2 size={16} className="animate-spin" /> : <Layers size={16} />}
          Generate Slate
        </button>
      </Panel>

      {gen.isError && (
        <Panel>
          <p className="text-sm text-risk">Slate generation failed: {(gen.error as Error).message}</p>
        </Panel>
      )}

      {gen.data && (
        <Panel title={gen.data.name} hint={`${gen.data.members.length} candidates ranked`}>
          <div className="space-y-2.5">
            {gen.data.members.map((m) => (
              <div
                key={m.candidate_id}
                className="flex items-center gap-4 rounded-xl border border-line/60 bg-surface/70 px-4 py-3"
              >
                <div
                  className="grid size-9 shrink-0 place-items-center rounded-lg text-sm font-extrabold"
                  style={{ color: '#06121f', background: bandColor(m.band) }}
                >
                  {m.rank}
                </div>
                <div className="min-w-0 flex-1">
                  <div className="font-semibold">{names.get(m.candidate_id) ?? m.candidate_id.slice(0, 8)}</div>
                  <div className="truncate text-xs text-muted">{m.explanation}</div>
                </div>
                <div className="text-right">
                  <div className="text-lg font-extrabold tabular-nums" style={{ color: bandColor(m.band) }}>
                    {num(m.total_score).toFixed(0)}%
                  </div>
                  <Badge color={bandColor(m.band)} subtle>
                    {m.band_label}
                  </Badge>
                </div>
                <DecisionControls
                  decision={decisions[m.candidate_id]}
                  pending={decide.isPending}
                  onApprove={() => recordDecision(m.candidate_id, 'approved')}
                  onReject={() => recordDecision(m.candidate_id, 'rejected')}
                />
              </div>
            ))}
          </div>
          <p className="mt-3 text-xs text-faint">
            A human approves or rejects every candidate. The engine never auto rejects. Each decision is
            recorded with the actor and the time for the AEDT audit trail.
          </p>
        </Panel>
      )}
    </div>
  )
}

function DecisionControls({
  decision,
  pending,
  onApprove,
  onReject,
}: {
  decision?: 'approved' | 'rejected'
  pending: boolean
  onApprove: () => void
  onReject: () => void
}) {
  if (decision) {
    const approved = decision === 'approved'
    return (
      <Badge color={approved ? 'var(--color-ok)' : 'var(--color-risk)'} subtle>
        {approved ? <Check size={12} /> : <X size={12} />}
        {approved ? 'Approved' : 'Rejected'}
      </Badge>
    )
  }
  return (
    <div className="flex shrink-0 items-center gap-1.5">
      <button
        onClick={onApprove}
        disabled={pending}
        className="flex items-center gap-1 rounded-lg border border-line/70 px-2.5 py-1.5 text-xs font-semibold text-muted hover:text-ink disabled:opacity-50"
        style={{ borderColor: 'var(--color-ok)' }}
        title="Approve this candidate for the proposal slate"
      >
        <Check size={14} style={{ color: 'var(--color-ok)' }} /> Approve
      </button>
      <button
        onClick={onReject}
        disabled={pending}
        className="flex items-center gap-1 rounded-lg border border-line/70 px-2.5 py-1.5 text-xs font-semibold text-muted hover:text-ink disabled:opacity-50"
        title="Reject this candidate"
      >
        <X size={14} style={{ color: 'var(--color-risk)' }} /> Reject
      </button>
    </div>
  )
}