import { useEffect, type ReactNode } from 'react'
import { Link, useParams } from 'react-router-dom'
import {
  ArrowLeft,
  CheckCircle2,
  Clock,
  Compass,
  FileDown,
  Layers,
  Loader2,
  MapPin,
  Share2,
  ShieldCheck,
} from 'lucide-react'
import { useCandidate, useOpportunities, useRequirement, useScreen } from '../lib/queries'
import { Badge, Bar, Panel } from '../components/ui'
import { ScreeningResults } from '../components/ScreeningResults'
import { WorkforceDNA } from '../components/WorkforceDNA'
import { bandColor, clearanceLabel, num, statusLabel } from '../lib/format'
import type { Band } from '../lib/types'

function proposal(band: Band) {
  if (band === 'green') return { label: 'PROPOSAL READY', color: 'var(--color-ok)' }
  if (band === 'yellow') return { label: 'REVIEW REQUIRED', color: 'var(--color-warn)' }
  return { label: 'RECRUITING REQUIRED', color: 'var(--color-risk)' }
}

export function CandidateEvaluation() {
  const { candidateId = '', requirementId = '' } = useParams()
  const candidateQuery = useCandidate(candidateId || null)
  const requirementQuery = useRequirement(requirementId || null)
  const opps = useOpportunities(candidateId || null)
  const screen = useScreen()

  useEffect(() => {
    // Clear the prior result first so a stale screen.data never renders under the new candidate's
    // identity during the transition; only the loading state shows until the new score returns.
    screen.reset()
    if (candidateId && requirementId) screen.mutate({ candidateId, requirementId })
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [candidateId, requirementId])

  const candidate = candidateQuery.data
  const requirement = requirementQuery.data

  return (
    <div className="space-y-4">
      <Link to="/screen" className="inline-flex items-center gap-1.5 text-sm text-muted hover:text-ink">
        <ArrowLeft size={15} /> Back to Screening Queue
      </Link>

      {screen.isPending && (
        <Panel className="flex items-center justify-center gap-2 py-16 text-muted">
          <Loader2 className="animate-spin" size={18} /> Evaluating mission readiness…
        </Panel>
      )}
      {screen.isError && (
        <Panel>
          <p className="text-sm text-risk">{(screen.error as Error).message}</p>
        </Panel>
      )}

      {screen.data && candidate && requirement && (
        <>
          {/* SCREEN 2, Candidate Intelligence Profile + Workforce DNA */}
          <Panel>
            <div className="grid grid-cols-1 items-center gap-6 lg:grid-cols-2">
              <div>
                <div className="flex items-center gap-4">
                  <div className="grid size-14 place-items-center rounded-xl bg-blue/25 text-xl font-bold text-blue-soft">
                    {candidate.full_name
                      .split(' ')
                      .map((p) => p[0])
                      .slice(0, 2)
                      .join('')}
                  </div>
                  <div>
                    <h2 className="text-xl font-bold">{candidate.full_name}</h2>
                    <div className="text-sm text-muted">{requirement.title}</div>
                  </div>
                </div>
                <dl className="mt-4 grid grid-cols-2 gap-x-6 gap-y-2.5 text-sm">
                  <Fact icon={<ShieldCheck size={14} />} k="Clearance (self-reported)" v={`${clearanceLabel[candidate.clearance_level] ?? candidate.clearance_level} · ${statusLabel[candidate.clearance_status] ?? candidate.clearance_status} · not verified`} />
                  <Fact icon={<Clock size={14} />} k="Experience" v={`${candidate.years_experience} years`} />
                  {candidate.location && <Fact icon={<MapPin size={14} />} k="Location" v={candidate.location} />}
                  <Fact
                    icon={<CheckCircle2 size={14} />}
                    k="Availability"
                    v={candidate.available ? 'Available Now' : 'Engaged'}
                  />
                </dl>
              </div>
              <div>
                <div className="mb-1 text-center text-[11px] font-bold uppercase tracking-[0.14em] text-gold">
                  Workforce DNA™
                </div>
                <WorkforceDNA categories={screen.data.mission_readiness.categories} />
              </div>
            </div>
          </Panel>

          {/* SCREENS 3-5, full screening intelligence (header suppressed) */}
          <ScreeningResults view={screen.data} candidate={candidate} requirement={requirement} hideHeader />

          {/* SCREEN 5/6, Best Fit Programs + Proposal Readiness */}
          <div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
            <Panel title="Best Fit Programs" hint="Opportunity Fit Engine™">
              {opps.isLoading ? (
                <p className="text-sm text-muted">Scoring opportunities…</p>
              ) : !opps.data?.length ? (
                <p className="text-sm text-faint">No matching opportunities.</p>
              ) : (
                <div className="space-y-2.5">
                  {opps.data.map((o) => (
                    <div key={o.requirement_id}>
                      <div className="mb-1 flex items-center justify-between text-sm">
                        <span className="flex items-center gap-1.5">
                          <Compass size={13} style={{ color: 'var(--color-blue-soft)' }} />
                          {o.title}
                        </span>
                        <span className="font-semibold tabular-nums" style={{ color: bandColor(o.band) }}>
                          {num(o.score).toFixed(0)}%
                        </span>
                      </div>
                      <Bar value={num(o.score)} color={bandColor(o.band)} />
                    </div>
                  ))}
                </div>
              )}
            </Panel>

            <Panel title="Proposal Readiness">
              {(() => {
                const pr = proposal(screen.data.mission_readiness.band)
                const roles = (opps.data ?? []).filter((o) => o.band === 'green')
                return (
                  <div>
                    <div className="flex items-center gap-3">
                      <CheckCircle2 size={30} style={{ color: pr.color }} />
                      <div>
                        <div className="text-xl font-extrabold" style={{ color: pr.color }}>
                          {pr.label}
                        </div>
                        <div className="text-xs text-muted">
                          Proposal strength {num(screen.data.mission_readiness.score).toFixed(0)}%
                        </div>
                      </div>
                    </div>

                    <div className="mt-3">
                      <div className="mb-1.5 text-[11px] font-bold uppercase tracking-wider text-muted">
                        Can Fill These Roles
                      </div>
                      <div className="flex flex-wrap gap-1.5">
                        <Badge color={pr.color} subtle>
                          {requirement.title}
                        </Badge>
                        {roles
                          .filter((r) => r.requirement_id !== requirement.id)
                          .map((r) => (
                            <Badge key={r.requirement_id} color="var(--color-ok)" subtle>
                              {r.title}
                            </Badge>
                          ))}
                      </div>
                    </div>

                    <div className="mt-4 flex flex-wrap gap-2">
                      <button className="flex items-center gap-1.5 rounded-lg bg-gradient-to-r from-blue to-navy-700 px-3.5 py-2 text-sm font-semibold text-white hover:brightness-110">
                        <Layers size={14} /> Add to Candidate Slate
                      </button>
                      <button className="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">
                        <Share2 size={14} /> Share
                      </button>
                      <button className="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">
                        <FileDown size={14} /> Export
                      </button>
                    </div>
                  </div>
                )
              })()}
            </Panel>
          </div>
        </>
      )}
    </div>
  )
}

function Fact({ icon, k, v }: { icon: ReactNode; k: string; v: string }) {
  return (
    <div>
      <dt className="flex items-center gap-1.5 text-[11px] uppercase tracking-wider text-faint">
        {icon} {k}
      </dt>
      <dd className="mt-0.5 font-semibold">{v}</dd>
    </div>
  )
}