import { useEffect, useState } from 'react'
import { CheckCircle2, Compass, FileUp, Loader2, ScanSearch, UploadCloud } from 'lucide-react'
import { Badge, Bar, Modal, Panel } from './ui'
import { ScreeningResults } from './ScreeningResults'
import { useMissionCheckJD, useMissionCheckOpportunities, useSaveCandidate } from '../lib/queries'
import { bandColor, missionRecColor, num } from '../lib/format'
import type {
  CandidateListView,
  ParsedCandidate,
  ParsedRequirement,
  RequirementListView,
  SaveCandidateRequest,
} from '../lib/types'

type Mode = 'opportunities' | 'jd'

// MissionCheckModal is the W1 surface. It parses a resume to text in the browser (nothing is uploaded),
// then scores it server side: Mode A against every open opportunity, Mode B against a pasted job
// description. The result is advisory and a human decides; the optional Save Candidate persists a
// reviewed, audited record.
export function MissionCheckModal({ open, onClose }: { open: boolean; onClose: () => void }) {
  const [mode, setMode] = useState<Mode>('opportunities')
  const [resumeText, setResumeText] = useState('')
  const [jdText, setJdText] = useState('')
  const [fileNote, setFileNote] = useState('')
  const [parseError, setParseError] = useState('')
  const [parsing, setParsing] = useState(false)

  const modeA = useMissionCheckOpportunities()
  const modeB = useMissionCheckJD()

  function close() {
    modeA.reset()
    modeB.reset()
    setResumeText('')
    setJdText('')
    setFileNote('')
    setParseError('')
    onClose()
  }

  async function onFile(file: File | undefined) {
    if (!file) return
    setParseError('')
    setFileNote('')
    setParsing(true)
    try {
      // Lazy load the PDF and DOCX parsers (about 1 MB) only when a file is actually parsed, so they
      // never weigh down the initial page load.
      const { extractResumeText } = await import('../lib/resume')
      const r = await extractResumeText(file)
      if (r.lowConfidence || r.text.trim() === '') {
        setParseError('That file had little or no selectable text. It may be a scan, so paste the resume text instead.')
      } else {
        setResumeText(r.text)
        setFileNote(`Parsed ${file.name} in memory as ${r.source.toUpperCase()}. The file was not uploaded or stored.`)
      }
    } catch (e) {
      setParseError(e instanceof Error && e.message ? e.message : 'Could not read that file. Paste the text instead.')
    } finally {
      setParsing(false)
    }
  }

  function run() {
    setParseError('')
    if (mode === 'opportunities') modeA.mutate({ text: resumeText })
    else modeB.mutate({ resume: resumeText, jd: jdText })
  }

  const pending = modeA.isPending || modeB.isPending
  const runError = (mode === 'opportunities' ? modeA.error : modeB.error) as Error | null
  const canRun =
    resumeText.trim() !== '' && (mode === 'jd' ? jdText.trim() !== '' : true) && !pending && !parsing

  return (
    <Modal open={open} onClose={close} title="Mission Check">
      <div className="space-y-4">
        <div className="flex flex-wrap items-center justify-between gap-2">
          <p className="text-sm text-muted">
            Score a resume against the mission. Parsed in your browser, nothing is uploaded or stored.
          </p>
          <Badge color="var(--color-gold)" subtle>
            Parsed in memory, not stored
          </Badge>
        </div>

        {/* mode tabs */}
        <div className="flex gap-1 rounded-lg border border-line/70 bg-navy-900 p-1">
          <Tab active={mode === 'opportunities'} onClick={() => setMode('opportunities')} label="Match all opportunities" />
          <Tab active={mode === 'jd'} onClick={() => setMode('jd')} label="Match a job description" />
        </div>

        {/* resume input */}
        <DropZone parsing={parsing} fileNote={fileNote} onFile={onFile} />
        <div>
          <label className="mb-1 block text-[11px] font-semibold uppercase tracking-wider text-muted">
            Or paste the resume text
          </label>
          <textarea
            value={resumeText}
            onChange={(e) => setResumeText(e.target.value)}
            rows={4}
            placeholder="Paste the resume text here"
            className="w-full rounded-lg border border-line/70 bg-navy-950/60 px-3 py-2 text-sm text-ink outline-none focus:border-blue/60"
          />
        </div>

        {mode === 'jd' && (
          <div>
            <label className="mb-1 block text-[11px] font-semibold uppercase tracking-wider text-muted">
              Job description
            </label>
            <textarea
              value={jdText}
              onChange={(e) => setJdText(e.target.value)}
              rows={4}
              placeholder="Paste the job description to score against"
              className="w-full rounded-lg border border-line/70 bg-navy-950/60 px-3 py-2 text-sm text-ink outline-none focus:border-blue/60"
            />
          </div>
        )}

        {parseError && <p className="text-sm text-warn">{parseError}</p>}

        <div className="flex items-center gap-3">
          <button
            onClick={run}
            disabled={!canRun}
            className="flex items-center gap-2 rounded-lg bg-gradient-to-r from-blue to-navy-700 px-4 py-2 text-sm font-bold text-white hover:brightness-110 disabled:cursor-not-allowed disabled:opacity-50"
          >
            {pending ? <Loader2 className="animate-spin" size={15} /> : <ScanSearch size={15} />}
            Run Mission Check
          </button>
          <span className="text-[11px] text-faint">
            Advisory only, a human makes the final decision. No demographic data is used.
          </span>
        </div>

        {runError && <p className="text-sm text-risk">{runError.message}</p>}

        {/* results */}
        {mode === 'opportunities' && modeA.data && <ModeAResult data={modeA.data} />}
        {mode === 'jd' && modeB.data && <ModeBResult data={modeB.data} />}
      </div>
    </Modal>
  )
}

function Tab({ active, onClick, label }: { active: boolean; onClick: () => void; label: string }) {
  return (
    <button
      onClick={onClick}
      className={`flex-1 rounded-md px-3 py-1.5 text-xs font-semibold transition ${
        active ? 'bg-blue/25 text-blue-soft' : 'text-faint hover:text-muted'
      }`}
    >
      {label}
    </button>
  )
}

function DropZone({
  parsing,
  fileNote,
  onFile,
}: {
  parsing: boolean
  fileNote: string
  onFile: (f: File | undefined) => void
}) {
  const [over, setOver] = useState(false)
  return (
    <div
      onDragOver={(e) => {
        e.preventDefault()
        setOver(true)
      }}
      onDragLeave={() => setOver(false)}
      onDrop={(e) => {
        e.preventDefault()
        setOver(false)
        onFile(e.dataTransfer.files?.[0])
      }}
      className={`rounded-lg border border-dashed px-4 py-5 text-center transition ${
        over ? 'border-blue/70 bg-blue/10' : 'border-line/70 bg-navy-950/40'
      }`}
    >
      <div className="flex flex-col items-center gap-1.5">
        {parsing ? (
          <Loader2 className="animate-spin text-blue-soft" size={20} />
        ) : (
          <UploadCloud className="text-muted" size={20} />
        )}
        <div className="text-sm text-muted">Drag a PDF or DOCX resume here</div>
        <label className="mt-1 inline-flex cursor-pointer items-center gap-1.5 rounded-md border border-line/70 px-3 py-1.5 text-xs font-semibold text-muted hover:border-blue/60 hover:text-blue-soft">
          <FileUp size={13} /> Browse
          <input
            type="file"
            accept=".pdf,.docx"
            className="hidden"
            onChange={(e) => onFile(e.target.files?.[0])}
          />
        </label>
      </div>
      {fileNote && <p className="mt-2 text-[11px] text-ok">{fileNote}</p>}
    </div>
  )
}

function RecommendationBanner({ value, reason }: { value: string; reason: string }) {
  const color = missionRecColor(value)
  return (
    <div className="flex items-center gap-3 rounded-lg border px-4 py-3" style={{ borderColor: color }}>
      <CheckCircle2 size={26} style={{ color }} />
      <div>
        <div className="text-lg font-extrabold" style={{ color }}>
          {value}
        </div>
        <div className="text-xs text-muted">{reason}</div>
      </div>
    </div>
  )
}

function ModeAResult({ data }: { data: import('../lib/types').MissionCheckModeAResult }) {
  return (
    <div className="space-y-3">
      <Panel title="Top opportunity matches" hint="ranked by Mission Readiness">
        {data.rows.length === 0 ? (
          <p className="text-sm text-faint">No open opportunities to match against yet.</p>
        ) : (
          <div className="space-y-2.5">
            {data.rows.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="flex items-center gap-2">
                    <Badge color={missionRecColor(o.recommendation)} subtle>
                      {o.recommendation}
                    </Badge>
                    <span className="font-semibold tabular-nums" style={{ color: bandColor(o.band) }}>
                      {num(o.score).toFixed(0)}%
                    </span>
                  </span>
                </div>
                <Bar value={num(o.score)} color={bandColor(o.band)} />
              </div>
            ))}
          </div>
        )}
      </Panel>
      <SaveSection candidate={data.candidate} />
      <Disclosure assumptions={data.assumptions} categories={data.data_categories} />
    </div>
  )
}

function ModeBResult({ data }: { data: import('../lib/types').MissionCheckModeBResult }) {
  return (
    <div className="space-y-3">
      <RecommendationBanner value={data.recommendation} reason={data.recommendation_reason} />
      <ScreeningResults
        view={data.view}
        candidate={candidateStub(data.candidate)}
        requirement={reqStub(data.requirement)}
        hideHeader
      />
      <SaveSection candidate={data.candidate} />
      <Disclosure assumptions={data.assumptions} categories={data.data_categories} />
    </div>
  )
}

// SaveSection persists the reviewed parse as an audited candidate (recruiter capability). The name is
// editable because resume name detection is best effort; saving needs a name.
function SaveSection({ candidate }: { candidate: ParsedCandidate }) {
  const save = useSaveCandidate()
  const [name, setName] = useState(candidate.full_name)
  // A new Mission Check run yields a new candidate object, so reset the name and clear any prior save
  // success, otherwise the success state would carry over and wrongly mark the new result as saved.
  useEffect(() => {
    setName(candidate.full_name)
    save.reset()
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [candidate])

  if (save.isSuccess) {
    return (
      <Panel className="flex items-center gap-2 text-sm text-ok">
        <CheckCircle2 size={16} /> Candidate saved. It is now in your workforce, clearance self reported.
      </Panel>
    )
  }

  function doSave() {
    const body: SaveCandidateRequest = {
      full_name: name.trim(),
      clearance_level: candidate.clearance_level,
      clearance_poly: candidate.clearance_poly,
      clearance_status: candidate.clearance_status,
      years_experience: candidate.years_experience,
      location: candidate.location,
      remote: false,
      relocatable: false,
      available: true,
      skills: candidate.skills,
      certifications: candidate.certifications,
      customer_experience: candidate.customer_experience,
    }
    save.mutate(body)
  }

  return (
    <Panel title="Save as candidate" hint="recruiter capability, audited">
      <div className="space-y-2">
        <div className="flex flex-wrap gap-1.5 text-[11px]">
          {candidate.skills.slice(0, 8).map((s) => (
            <span key={s} className="rounded-full bg-blue/15 px-2 py-0.5 text-blue-soft">
              {s}
            </span>
          ))}
          {candidate.years_experience > 0 && (
            <span className="rounded-full bg-navy-800 px-2 py-0.5 text-muted">
              {candidate.years_experience} yrs
            </span>
          )}
        </div>
        <div className="flex items-center gap-2">
          <input
            value={name}
            onChange={(e) => setName(e.target.value)}
            placeholder="Candidate name"
            className="flex-1 rounded-md border border-line/70 bg-navy-950/60 px-3 py-1.5 text-sm text-ink outline-none focus:border-blue/60"
          />
          <button
            onClick={doSave}
            disabled={name.trim() === '' || save.isPending}
            title={name.trim() === '' ? 'A candidate name is required to save' : 'Save this candidate'}
            className="flex items-center gap-1.5 rounded-md bg-blue/20 px-3 py-1.5 text-sm font-semibold text-blue-soft hover:bg-blue/30 disabled:cursor-not-allowed disabled:opacity-50"
          >
            {save.isPending ? <Loader2 className="animate-spin" size={14} /> : <CheckCircle2 size={14} />}
            Save Candidate
          </button>
        </div>
        <p className="text-[11px] text-faint">
          Clearance is a self reported, detected indicator, not verified. The real check is the customer FSO through DISS.
        </p>
        {save.isError && <p className="text-[11px] text-risk">{(save.error as Error).message}</p>}
      </div>
    </Panel>
  )
}

function Disclosure({ assumptions, categories }: { assumptions: string[]; categories: string[] }) {
  return (
    <p className="text-[11px] leading-relaxed text-faint">
      This is an automated employment decision aid: it is advisory, a human decides, it takes no demographic input, and
      each run is logged. Assumptions: {assumptions.join('; ')}. Data assessed: {categories.join(', ')}.
    </p>
  )
}

function candidateStub(p: ParsedCandidate): CandidateListView {
  return {
    id: 'mission_check',
    full_name: p.full_name || 'Uploaded resume',
    clearance_level: p.clearance_level,
    clearance_status: p.clearance_status,
    years_experience: p.years_experience,
    location: p.location || undefined,
    available: true,
  }
}

function reqStub(p: ParsedRequirement): RequirementListView {
  return {
    id: 'pasted_jd',
    title: p.title,
    required_level: p.required_level,
    customer_agency: p.customer_agency || undefined,
    key_personnel: p.key_personnel,
  }
}