/* ============================================================
   CV Import — two modes behind one dropzone.

   Score mode: files go to POST /candidate/score as one multipart batch —
   each PDF is extracted, scored against the selected job, persisted a row
   per file. Unreadable/oversized files come back as "failed" rows, and
   re-uploading the same bytes updates the existing record.

   No-Job mode ("store in CV bank"): each file goes to POST
   /candidate/cv-bank/upload individually — parsed, stored as a bank row, and
   uploaded to S3 under Temp/{id}/. file_path is the permanent object URL.
   ============================================================ */

import { useRef, useState } from 'react'
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'

import Modal from '../ui/Modal'
import OpenResumeButton from '../ui/OpenResumeButton'
import PageHeader from '../ui/PageHeader'
import { Badge, EmptyState, Icon, ScoreChip } from '../ui/primitives'
import { useToast } from '../ui/Toast'
import JobCandidates from './JobCandidates'
import { qk } from '../lib/queryKeys'
import { friendlyAuthError } from '../lib/errors'
import * as candidatesApi from '../api/candidates'
import * as s3Api from '../api/s3'

/* Sentinel for the job picker: store CVs without scoring or assignment. */
const NO_JOB = '__none__'

const SCORE_STEPS = [
  { i: 'file', t: 'Resume parsing', d: 'PDF text extraction with layout cleanup' },
  { i: 'target', t: 'ATS scoring', d: 'LLM match score with matched & missing skills vs the selected job' },
  { i: 'users', t: 'Duplicate detection', d: 'Re-uploading the same file updates its existing record' },
  { i: 'user-plus', t: 'Saved to pool', d: 'Results persist — see Candidates and Talent Pool' },
]

const STORE_STEPS = [
  { i: 'file', t: 'Resume parsing', d: 'PDF text extraction with layout cleanup' },
  { i: 'users', t: 'Details captured', d: 'Candidate email is picked up when the CV contains one' },
  { i: 'target', t: 'Nothing else happens', d: 'No scoring, no candidate account, no inbox entry — just stored' },
  { i: 'user-plus', t: 'Saved to CV bank', d: 'Browse, download or remove stored CVs in the bank below' },
]

async function fetchJobs() {
  const res = await candidatesApi.listJobs()
  const rows = Array.isArray(res?.data) ? res.data : []
  return rows.map((row) => ({ id: row.id, title: row.title }))
}

function fmtSize(bytes) {
  if (!Number.isFinite(bytes)) return ''
  if (bytes < 1024 * 1024) return `${Math.max(1, Math.round(bytes / 1024))} KB`
  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`
}

let rowSeq = 0

export default function CvImport() {
  const { toast } = useToast()
  const qc = useQueryClient()
  const jobsQuery = useQuery({ queryKey: qk.jobPosts.list(), queryFn: fetchJobs })
  const jobs = jobsQuery.data ?? []

  const [jobId, setJobId] = useState('')
  const [queue, setQueue] = useState([])
  const [dragging, setDragging] = useState(false)
  const fileInput = useRef(null)

  const scoring = useMutation({
    mutationFn: ({ job, files }) => candidatesApi.scoreUploads(job, files),
    onSuccess: (res, vars) => {
      const rows = Array.isArray(res?.data) ? res.data : []
      setQueue((q) =>
        q.map((item) => {
          if (!vars.rowIds.includes(item.id)) return item
          const match = rows.find((r) => r.filename === item.file)
          if (!match) return { ...item, status: 'Failed', error: 'NO_RESULT' }
          if (match.status !== 'completed') {
            return { ...item, status: 'Failed', error: match.error_code || 'FAILED' }
          }
          return {
            ...item,
            status: 'Ready',
            name: match.candidate_name || item.file,
            atsScore: match.match_score,
            critique: match.summary_critique,
          }
        }),
      )
      qc.invalidateQueries({ queryKey: qk.candidates.all() })
      const ok = rows.filter((r) => r.status === 'completed').length
      const failed = rows.length - ok
      toast(
        failed
          ? `${ok} scored, ${failed} failed — results saved to the candidate pool`
          : `${ok} resume${ok === 1 ? '' : 's'} scored and saved`,
        failed ? 'warning' : 'success',
      )
    },
    onError: (err, vars) => {
      setQueue((q) =>
        q.map((item) =>
          vars.rowIds.includes(item.id) ? { ...item, status: 'Failed', error: 'REQUEST_FAILED' } : item,
        ),
      )
      toast(friendlyAuthError(err, 'Scoring failed'), 'error')
    },
  })

  /* No-Job mode: one request per file, so one unreadable CV fails alone and
     the rest of the batch still lands in the bank. */
  const storing = useMutation({
    mutationFn: async ({ files, rowIds }) => {
      const results = []
      for (let k = 0; k < files.length; k++) {
        try {
          const res = await candidatesApi.uploadToCvBank(files[k])
          results.push({ rowId: rowIds[k], ok: true, email: res?.data?.candidate_email ?? null })
        } catch (err) {
          results.push({ rowId: rowIds[k], ok: false, error: friendlyAuthError(err, 'FAILED') })
        }
      }
      return results
    },
    onSuccess: (results) => {
      setQueue((q) =>
        q.map((item) => {
          const r = results.find((x) => x.rowId === item.id)
          if (!r) return item
          return r.ok
            ? { ...item, status: 'Stored', email: r.email }
            : { ...item, status: 'Failed', error: r.error }
        }),
      )
      qc.invalidateQueries({ queryKey: qk.cvBank.all() })
      const ok = results.filter((r) => r.ok).length
      const bad = results.length - ok
      toast(
        bad
          ? `${ok} stored, ${bad} failed — see the queue for details`
          : `${ok} CV${ok === 1 ? '' : 's'} stored in the CV bank`,
        bad ? 'warning' : 'success',
      )
    },
  })

  function handleFiles(fileList) {
    const all = Array.from(fileList || [])
    if (!all.length) return
    if (!jobId) {
      toast('Select a job — or "No job" to just store the CVs', 'warning')
      return
    }
    const bad = all.filter((f) => {
      const name = (f.name || '').toLowerCase()
      const mime = (f.type || '').toLowerCase()
      if (!name.endsWith('.pdf')) return true
      if (mime && mime !== 'application/pdf' && mime !== 'application/x-pdf') return true
      return false
    })
    if (bad.length) {
      toast('Only PDF files are allowed — remove non-PDF uploads and try again', 'error')
      return
    }
    const files = all

    const noJob = jobId === NO_JOB
    const items = files.map((f) => ({
      id: `UP-${++rowSeq}-${Date.now()}`,
      name: f.name,
      file: f.name,
      size: fmtSize(f.size),
      status: noJob ? 'Storing' : 'Scoring',
      atsScore: null,
      critique: null,
      email: null,
      error: null,
    }))
    setQueue((q) => [...q, ...items])
    const rowIds = items.map((i) => i.id)
    if (noJob) storing.mutate({ files, rowIds })
    else scoring.mutate({ job: jobId, files, rowIds })
  }

  const scored = queue.filter((i) => i.status === 'Ready').length
  const stored = queue.filter((i) => i.status === 'Stored').length
  const failed = queue.filter((i) => i.status === 'Failed').length
  const selectedJob = jobs.find((j) => j.id === jobId)
  const noJobMode = jobId === NO_JOB

  return (
    <div className="page">
      <PageHeader
        title="CV Import"
        sub="Upload resume PDFs — score them against a job, or store them in the CV bank"
        actions={<span className="integration-status pending"><span className="pulse" />AI Resume Scoring · Live</span>}
      />

      <div className="grid g-2-1">
        <div>
          <div className="card mb-18">
            <div className="card-body">
              <div className="flex items-center gap-8 mb-16">
                <span className="fw-600 text-sm" style={{ flexShrink: 0 }}>Score against</span>
                <select
                  className="select flex-1"
                  value={jobId}
                  onChange={(e) => setJobId(e.target.value)}
                >
                  <option value="">Select a job post…</option>
                  <option value={NO_JOB}>No job — store in CV bank</option>
                  {jobs.map((j) => <option key={j.id} value={j.id}>{j.title}</option>)}
                </select>
              </div>
              {jobsQuery.isError && (
                <p className="text-muted text-sm" style={{ marginBottom: 12 }}>
                  {friendlyAuthError(jobsQuery.error, 'Could not load job posts')}
                </p>
              )}

              <div
                className={`dropzone${dragging ? ' drag' : ''}`}
                onClick={() => fileInput.current?.click()}
                onDragOver={(e) => { e.preventDefault(); setDragging(true) }}
                onDragLeave={() => setDragging(false)}
                onDrop={(e) => {
                  e.preventDefault()
                  setDragging(false)
                  handleFiles(e.dataTransfer.files)
                }}
              >
                <input
                  ref={fileInput}
                  type="file"
                  accept=".pdf,application/pdf"
                  multiple
                  hidden
                  onChange={(e) => { handleFiles(e.target.files); e.target.value = '' }}
                />
                <div className="dz-icn"><Icon name="upload" /></div>
                <h3>Drag &amp; drop resumes here</h3>
                <p className="text-muted" style={{ marginBottom: 16 }}>
                  or click to browse — PDF only · up to 50 files per batch
                </p>
                <button
                  className="btn btn-primary"
                  onClick={(e) => { e.stopPropagation(); fileInput.current?.click() }}
                >
                  <Icon name="upload" /> Browse Files
                </button>
                <div className="flex items-center gap-8" style={{ justifyContent: 'center', marginTop: 16 }}>
                  <span className="badge b-gray badge-plain">PDF</span>
                  <span className="text-muted text-sm">DOC / DOCX support coming later</span>
                </div>
              </div>
            </div>
          </div>

          {queue.length > 0 && (
            <div className="card">
              <div className="card-head">
                <div>
                  <h3>Processing Queue</h3>
                  <span className="ch-sub">
                    {queue.length} file{queue.length === 1 ? '' : 's'}
                    {scored ? ` · ${scored} scored` : ''}
                    {stored ? ` · ${stored} stored` : ''}
                    {failed ? ` · ${failed} failed` : ''}
                    {selectedJob ? ` · vs ${selectedJob.title}` : ''}
                  </span>
                </div>
              </div>
              <div className="card-body">
                {queue.map((i) => (
                  <div className="upload-row" key={i.id}>
                    <span className="attach-icn" style={{ width: 38, height: 38 }}><Icon name="file" /></span>
                    <div style={{ flex: 1, minWidth: 0 }}>
                      <div className="flex items-center gap-8">
                        <span className="fw-600 text-sm">{i.name}</span>
                      </div>
                      <div className="cell-sub">{i.file} · {i.size}</div>
                      {(i.status === 'Scoring' || i.status === 'Storing') && (
                        <div className="upload-progress" style={{ marginTop: 6 }}>
                          <div className="upload-progress-fill" style={{ width: '66%' }} />
                        </div>
                      )}
                      {i.status === 'Ready' && i.critique && (
                        <div className="cell-sub" style={{ marginTop: 4 }}>{i.critique}</div>
                      )}
                      {i.status === 'Stored' && (
                        <div className="cell-sub" style={{ marginTop: 4 }}>
                          {i.email ? `Candidate email: ${i.email}` : 'No email in the CV — stored anyway'}
                        </div>
                      )}
                      {i.status === 'Failed' && (
                        <div className="cell-sub" style={{ marginTop: 4 }}>{i.error || 'Could not be processed'}</div>
                      )}
                    </div>
                    <div style={{ textAlign: 'right', flexShrink: 0 }}>
                      {i.status === 'Ready' && <ScoreChip score={i.atsScore} />}
                      {i.status === 'Scoring' && <Badge className="b-blue">Scoring…</Badge>}
                      {i.status === 'Storing' && <Badge className="b-blue">Storing…</Badge>}
                      {i.status === 'Failed' && <Badge className="b-red">{i.error}</Badge>}
                    </div>
                    <div style={{ flexShrink: 0 }}>
                      {i.status === 'Ready' && <Badge className="b-green">Saved</Badge>}
                      {i.status === 'Stored' && <Badge className="b-green">Stored</Badge>}
                    </div>
                  </div>
                ))}
              </div>
            </div>
          )}

          {queue.length === 0 && jobsQuery.isSuccess && jobs.length === 0 && (
            <EmptyState icon="briefcase" title="No job posts yet">
              Create a job post to score against — or pick “No job — store in CV bank” above to just save CVs.
            </EmptyState>
          )}
        </div>

        <div className="card" style={{ alignSelf: 'start' }}>
          <div className="card-head"><div><h3>Auto-Processing</h3><span className="ch-sub">What happens on upload</span></div></div>
          <div className="card-body">
            <div className="timeline">
              {(noJobMode ? STORE_STEPS : SCORE_STEPS).map((s) => (
                <div className="tl-item" key={s.t}>
                  <div className="tl-dot"><Icon name={s.i} /></div>
                  <div className="tl-title">{s.t}</div>
                  <div className="tl-desc">{s.d}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>

      {/* No-Job mode swaps the scored grid for the bank itself. */}
      {noJobMode ? (
        <CvBank />
      ) : (
        /* Everything ever scored against the selected job — this batch, earlier
           uploads and synced inbox CVs alike. The scoring mutation invalidates
           qk.candidates.all(), so the grid refreshes as each batch lands. */
        <JobCandidates jobId={jobId} jobTitle={selectedJob?.title} />
      )}
    </div>
  )
}

/* The stored-CV bank — a private store with no job, account or inbox entry.
   This list is the bank's home: browse, download, or remove; picking a CV up
   for a job later is a future action. */
function CvBank() {
  const { toast } = useToast()
  const qc = useQueryClient()
  const [preview, setPreview] = useState(null) // { name, url } — url is an object URL we own
  const bankQuery = useQuery({
    queryKey: qk.cvBank.list(),
    queryFn: () => candidatesApi.listCvBank({ top: 200 }),
  })
  const rows = Array.isArray(bankQuery.data?.data) ? bankQuery.data.data : []

  async function view(row) {
    const tab = s3Api.canOpen(row.file_path) ? window.open('about:blank', '_blank') : null
    try {
      if (s3Api.canOpen(row.file_path)) {
        await s3Api.openPdf(row.file_path, { tab })
        return
      }
      const url = await candidatesApi.viewCvBankCv(row.id)
      if (!url) {
        toast('The CV file could not be found', 'error')
        return
      }
      setPreview({ name: row.file_name || 'CV', url })
    } catch (err) {
      if (tab && !tab.closed) tab.close()
      toast(friendlyAuthError(err, 'Could not open the CV'), 'error')
    }
  }

  function closePreview() {
    if (preview) URL.revokeObjectURL(preview.url)
    setPreview(null)
  }

  const removing = useMutation({
    mutationFn: (id) => candidatesApi.deleteCvBankCv(id),
    onSuccess: () => {
      qc.invalidateQueries({ queryKey: qk.cvBank.all() })
      toast('CV removed from the bank', 'success')
    },
    onError: (err) => toast(friendlyAuthError(err, 'Could not remove the CV'), 'error'),
  })

  async function download(row) {
    try {
      await candidatesApi.downloadCvBankCv(row.id)
    } catch (err) {
      toast(friendlyAuthError(err, 'Could not download the CV'), 'error')
    }
  }

  return (
    <div className="card mt-18">
      <div className="card-head">
        <div>
          <h3>CV Bank</h3>
          <span className="ch-sub">
            {bankQuery.isSuccess ? `${bankQuery.data?.total ?? rows.length} stored CV${(bankQuery.data?.total ?? rows.length) === 1 ? '' : 's'} · no job attached` : 'Stored CVs with no job attached'}
          </span>
        </div>
      </div>
      <div className="card-body">
        {bankQuery.isLoading && <p className="text-muted text-sm">Loading stored CVs…</p>}
        {bankQuery.isError && (
          <p className="text-muted text-sm">{friendlyAuthError(bankQuery.error, 'Could not load the CV bank')}</p>
        )}
        {bankQuery.isSuccess && rows.length === 0 && (
          <EmptyState icon="file" title="The CV bank is empty">
            Drop CVs above with “No job — store in CV bank” selected and they will be kept here.
          </EmptyState>
        )}
        {rows.map((r) => (
          <div className="upload-row" key={r.id}>
            <span className="attach-icn" style={{ width: 38, height: 38 }}><Icon name="file" /></span>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div className="fw-600 text-sm">{r.file_name || 'CV'}</div>
              <div className="cell-sub">
                {r.candidate_email || 'No email detected'}
                {r.created_at ? ` · added ${new Date(r.created_at).toLocaleDateString()}` : ''}
              </div>
              {r.file_path ? (
                <div className="cell-sub truncate" title={r.file_path} style={{ marginTop: 2 }}>
                  {r.file_path}
                </div>
              ) : (
                <div className="cell-sub" style={{ marginTop: 2 }}>No S3 path yet</div>
              )}
            </div>
            <div className="flex items-center gap-8" style={{ flexShrink: 0 }}>
              <OpenResumeButton filePath={r.file_path} className="btn btn-secondary btn-sm" />
              <button className="act-btn" data-tip="View" aria-label="View CV" onClick={() => view(r)}>
                <Icon name="eye" />
              </button>
              <button className="act-btn" data-tip="Download" aria-label="Download CV" onClick={() => download(r)}>
                <Icon name="download" />
              </button>
              <button
                className="act-btn"
                data-tip="Remove"
                aria-label="Remove CV from bank"
                disabled={removing.isPending}
                onClick={() => {
                  if (window.confirm(`Remove “${r.file_name}” from the CV bank? The file is deleted permanently.`)) {
                    removing.mutate(r.id)
                  }
                }}
              >
                <Icon name="trash" />
              </button>
            </div>
          </div>
        ))}
      </div>

      {preview && (
        <Modal
          title={preview.name}
          subtitle="CV preview"
          size="modal-lg"
          onClose={closePreview}
          footer={
            <button className="btn btn-secondary" onClick={closePreview}>Close</button>
          }
        >
          {/* Blob URL re-typed to application/pdf, so the browser's built-in
              viewer renders inline instead of triggering a download. */}
          <iframe
            src={preview.url}
            title={`Preview of ${preview.name}`}
            style={{ width: '100%', height: '70vh', border: 'none', borderRadius: 10, background: 'var(--bg-sunken)' }}
          />
        </Modal>
      )}
    </div>
  )
}