import { useEffect, useState } from 'react'
import { Check, FileDown, Layers, Loader2, X } from 'lucide-react'
import {
  useSlateCandidates,
  useSlateRequirements,
  useGenerateSlateTool,
  useDecideMember,
  useSlateReadiness,
  useSlateDetail,
  useSlatesFor,
} from './queries'
import { slateApi } from './api'
import { slateBrand } from './brand'
import { Badge, Panel } from '../../components/ui'
import { ToolHeader } from '../../components/ToolHeader'
import { bandColor, num } from '../../lib/format'
import type { ProposalReadinessView, SlateMemberDetailView } from '../../lib/types'

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

export function Slate() {
  const requirements = useSlateRequirements()
  const candidates = useSlateCandidates()
  const gen = useGenerateSlateTool()
  const [reqId, setReqId] = useState('')
  const [name, setName] = useState('Proposal Candidate Slate')
  // The active slate is whichever was just generated or selected from the recent list. Its members,
  // decisions, and notes are read from the stored slate, so a reload or revisit rehydrates them.
  const [slateId, setSlateId] = useState<string | null>(null)

  const slates = useSlatesFor(reqId || null)
  const detail = useSlateDetail(slateId)
  const readiness = useSlateReadiness(slateId)

  useEffect(() => {
    if (!reqId && requirements.data?.length) setReqId(requirements.data[0].id)
  }, [requirements.data, reqId])
  // A new requirement clears the open slate until one is generated or picked.
  useEffect(() => {
    setSlateId(null)
  }, [reqId])

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

  return (
    <div className="space-y-4">
      <ToolHeader name={slateBrand.name} tagline={slateBrand.tagline} accent={slateBrand.accent} />

      <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={() => {
            if (reqId) {
              gen.mutate({ requirementId: reqId, name }, { onSuccess: (s) => setSlateId(s.slate_id) })
            }
          }}
          disabled={!reqId || gen.isPending}
          className="flex items-center gap-2 rounded-lg px-5 py-2.5 text-sm font-bold text-white hover:brightness-110 disabled:opacity-50"
          style={{ background: 'linear-gradient(to right, var(--color-slate-accent), #6d28d9)' }}
        >
          {gen.isPending ? <Loader2 size={16} className="animate-spin" /> : <Layers size={16} />}
          Generate Slate
        </button>
      </Panel>

      {!!slates.data?.length && (
        <Panel title="Slates for this requirement" hint={`${slates.data.length}`}>
          <div className="flex flex-wrap gap-2">
            {slates.data.map((s) => (
              <button
                key={s.slate_id}
                onClick={() => setSlateId(s.slate_id)}
                className={`rounded-lg border px-3 py-2 text-left text-xs transition hover:border-slate-accent/70 ${
                  s.slate_id === slateId ? 'border-slate-accent bg-navy-800/60' : 'border-line/60 bg-surface/70'
                }`}
              >
                <div className="font-semibold text-ink">{s.name}</div>
                <div className="text-faint">
                  {s.member_count} members · {s.created_at}
                </div>
              </button>
            ))}
          </div>
        </Panel>
      )}

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

      {slateId && (
        <>
          <ReadinessPanel readiness={readiness.data} slateId={slateId} />

          <Panel
            title={detail.data?.name ?? 'Slate'}
            hint={detail.data ? `${detail.data.members.length} candidates ranked` : 'loading'}
          >
            {detail.isLoading ? (
              <p className="py-6 text-center text-muted">Loading the slate…</p>
            ) : (
              <div className="space-y-2.5">
                {detail.data?.members.map((m) => (
                  <MemberRow key={m.candidate_id} m={m} slateId={slateId} fallbackName={names.get(m.candidate_id)} />
                ))}
              </div>
            )}
            <p className="mt-3 text-xs text-faint">
              A human approves or rejects every candidate, optionally with a note. The engine never auto
              rejects. Each decision is recorded with the actor and the time for the AEDT audit trail.
            </p>
          </Panel>
        </>
      )}
    </div>
  )
}

function MemberRow({
  m,
  slateId,
  fallbackName,
}: {
  m: SlateMemberDetailView
  slateId: string
  fallbackName?: string
}) {
  const decide = useDecideMember()
  const [note, setNote] = useState('')
  const decided = m.decision === 'approved' || m.decision === 'rejected'

  return (
    <div className="flex flex-wrap 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">{m.full_name || fallbackName || 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>
      <div className="flex shrink-0 flex-col items-end gap-1.5">
        {decided ? (
          <>
            <Badge color={m.decision === 'approved' ? 'var(--color-ok)' : 'var(--color-risk)'} subtle>
              {m.decision === 'approved' ? <Check size={12} /> : <X size={12} />}
              {m.decision === 'approved' ? 'Approved' : 'Rejected'}
            </Badge>
            {m.decision_note ? <span className="max-w-56 truncate text-[11px] text-faint">{m.decision_note}</span> : null}
          </>
        ) : (
          <>
            <input
              value={note}
              onChange={(e) => setNote(e.target.value)}
              placeholder="Reviewer note (optional)"
              className="w-56 rounded-lg border border-line/70 bg-navy-900 px-2.5 py-1.5 text-xs text-ink outline-none focus:border-slate-accent"
            />
            <div className="flex items-center gap-1.5">
              <button
                onClick={() => decide.mutate({ slateId, candidateId: m.candidate_id, decision: 'approved', note })}
                disabled={decide.isPending}
                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={() => decide.mutate({ slateId, candidateId: m.candidate_id, decision: 'rejected', note })}
                disabled={decide.isPending}
                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>
          </>
        )}
      </div>
    </div>
  )
}

function ReadinessPanel({ readiness, slateId }: { readiness: ProposalReadinessView | undefined; slateId: string }) {
  return (
    <Panel title="Proposal Readiness" hint="rolled up from the stored slate">
      <div className="flex flex-wrap items-center gap-x-8 gap-y-3">
        <div>
          <div className="text-[11px] uppercase tracking-wider text-faint">Status</div>
          <div className="text-lg font-extrabold" style={{ color: 'var(--color-slate-soft)' }}>
            {readiness?.status ?? '...'}
          </div>
        </div>
        <Stat label="Members" value={readiness?.total_members} />
        <Stat label="Approved" value={readiness?.approved} color="var(--color-ok)" />
        <Stat label="Rejected" value={readiness?.rejected} color="var(--color-risk)" />
        <Stat label="Pending" value={readiness?.pending} color="var(--color-warn)" />
        <Stat label="Proposal Ready" value={readiness?.proposal_ready} />
        <div>
          <div className="text-[11px] uppercase tracking-wider text-faint">Approved share</div>
          <div className="text-lg font-bold tabular-nums">{readiness ? `${readiness.readiness_pct}%` : '...'}</div>
        </div>
        <a
          href={slateApi.exportUrl(slateId)}
          className="ml-auto flex items-center gap-1.5 rounded-lg border border-line/70 px-3.5 py-2 text-sm font-semibold text-muted hover:text-ink"
          style={{ borderColor: 'var(--color-slate-accent)' }}
        >
          <FileDown size={14} style={{ color: 'var(--color-slate-soft)' }} /> Export CSV
        </a>
      </div>
    </Panel>
  )
}

function Stat({ label, value, color }: { label: string; value: number | undefined; color?: string }) {
  return (
    <div>
      <div className="text-[11px] uppercase tracking-wider text-faint">{label}</div>
      <div className="text-lg font-bold tabular-nums" style={color ? { color } : undefined}>
        {value ?? '...'}
      </div>
    </div>
  )
}