'use client';

import { useEffect, useState, useCallback, useRef } from 'react';
import { useRouter, useParams } from 'next/navigation';
import { api } from '@/lib/api';
import { useAuth } from '@/components/auth-context';
import { toast } from 'react-toastify';
import { ResumeUploadConfirmModal } from '@/components/ResumeUploadConfirmModal';

interface App {
  id: number;
  candidate: number;
  candidate_first_name: string;
  candidate_last_name: string;
  candidate_location: string;
  stage: number;
  stage_name: string;
  stage_outcome: string;
  added_by: string | null;
  added_by_name?: string | null;
  added_by_email?: string | null;
  self_applied?: boolean;
  interviewer: string | null;
  interview_result: string | null;
  round1_outcome_label: string;
  score: number | null;
  created_at: string;
  updated_at: string;
}

const STAGE_BADGE: Record<string, string> = {
  WON: 'bg-emerald-50 text-emerald-700 border-emerald-200 dark:bg-emerald-950/40 dark:text-emerald-300',
  LOST: 'bg-rose-50 text-rose-700 border-rose-200 dark:bg-rose-950/40 dark:text-rose-300',
  IN_PROGRESS: 'bg-indigo-50 text-indigo-700 border-indigo-200 dark:bg-indigo-950/40 dark:text-indigo-300',
};

export default function JobPipelineBoardPage() {
  const router = useRouter();
  const { id } = useParams<{ id: string }>();
  const { user } = useAuth();
  const [apps, setApps] = useState<App[]>([]);
  const [jobTitle, setJobTitle] = useState('');
  const [clientName, setClientName] = useState('');
  const [stages, setStages] = useState<{ id: number; name: string }[]>([]);
  const [loading, setLoading] = useState(true);

  // --- Status-change modal (CATS-style): confirm the move + optionally email
  // the candidate an auto-generated (editable) notification.
  const [statusModal, setStatusModal] = useState<{ app: App; newStageId: number; newStageName: string; oldStageName: string } | null>(null);
  const [sendMail, setSendMail] = useState(true);
  const [emailSubject, setEmailSubject] = useState('');
  const [emailMessage, setEmailMessage] = useState('');
  const [savingStatus, setSavingStatus] = useState(false);

  // --- Add-candidate modal
  const [addOpen, setAddOpen] = useState(false);
  const [search, setSearch] = useState('');
  const [results, setResults] = useState<{ id: number; full_name?: string; first_name?: string; last_name?: string; email?: string; city?: string }[]>([]);
  const [selected, setSelected] = useState<number[]>([]);
  const [searching, setSearching] = useState(false);
  const [adding, setAdding] = useState(false);
  // New-from-résumé sub-flow
  const [addMode, setAddMode] = useState<'existing' | 'resume'>('existing');
  const [resumeFile, setResumeFile] = useState<File | null>(null);
  const [pendingResume, setPendingResume] = useState<File | null>(null);
  const fileInputRef = useRef<HTMLInputElement>(null);
  const [parsing, setParsing] = useState(false);
  const [parsed, setParsed] = useState<Record<string, any> | null>(null);
  const [creating, setCreating] = useState(false);

  const uploadAndParse = async (file: File) => {
    setResumeFile(file); setParsing(true); setParsed(null);
    try {
      const fd = new FormData(); fd.append('file', file);
      const r: any = await api.upload('/candidates/upload-resume/', fd);
      const d = r?.parsed_data ?? r?.data?.parsed_data ?? {};
      const skills = Array.isArray(d.skills) ? d.skills.join(', ') : (d.skills || '');
      setParsed({
        first_name: d.first_name || '', last_name: d.last_name || '', email: d.email || '',
        phone_number: d.phone_number || '', city: d.city || '', state: d.state || '',
        current_location: d.current_location || d.city || '', highest_qualification: d.highest_qualification || '',
        total_experience: d.total_experience ?? '', current_company: d.current_company || '',
        current_role: d.current_role || '', skills, professional_summary: d.professional_summary || '',
        fresher: d.fresher ?? !(d.total_experience || d.current_company),
      });
    } catch { toast.error('Could not read the résumé. Fill the fields manually.'); setParsed({}); }
    finally { setParsing(false); }
  };

  const createFromResume = async () => {
    if (!parsed) return;
    if (!parsed.first_name || !parsed.last_name || !parsed.phone_number) {
      toast.error('First name, last name and phone are required.'); return;
    }
    setCreating(true);
    try {
      const payload: any = {
        first_name: parsed.first_name, last_name: parsed.last_name, email: parsed.email || null,
        phone_number: parsed.phone_number, city: parsed.city || null, state: parsed.state || null,
        current_location: parsed.current_location || null, highest_qualification: parsed.highest_qualification || null,
        professional_summary: parsed.professional_summary || null, fresher: !!parsed.fresher,
        skills: (parsed.skills || '').split(',').map((s: string) => s.trim()).filter(Boolean),
        source: 'UPLOAD', job_ids: [Number(id)],
      };
      if (!parsed.fresher) {
        payload.total_experience = parsed.total_experience || null;
        payload.current_company = parsed.current_company || null;
        payload.current_role = parsed.current_role || null;
      }
      const res: any = await api.post('/candidates/', payload);
      const newId = res?.data?.id ?? res?.id;
      if (newId && resumeFile) {
        const fd = new FormData(); fd.append('file', resumeFile); fd.append('candidate_id', String(newId));
        try { await api.upload('/candidates/upload-resume/', fd); } catch { /* résumé link best-effort */ }
      }
      toast.success('Candidate created and added to the pipeline.');
      setAddOpen(false);
      await loadBoard();
    } catch (e: any) {
      toast.error(e?.data?.message || e?.data?.errors?.phone_number?.[0] || 'Could not create candidate.');
    } finally { setCreating(false); }
  };

  const loadBoard = useCallback(async () => {
    const r = (await api.get(`/pipeline/applications/?job=${id}&page_size=500`)) as any;
    const d = r?.data ?? r;
    setApps(Array.isArray(d) ? d : (d?.results ?? []));
  }, [id]);

  const searchCandidates = useCallback(async (q: string) => {
    setSearching(true);
    try {
      const r = (await api.get(`/candidates/?exclude_job=${id}&page_size=25${q ? `&search=${encodeURIComponent(q)}` : ''}`)) as any;
      const d = r?.data ?? r;
      setResults(Array.isArray(d) ? d : (d?.results ?? []));
    } catch { setResults([]); }
    finally { setSearching(false); }
  }, [id]);

  useEffect(() => {
    if (!addOpen) return;
    const t = setTimeout(() => searchCandidates(search), 300);
    return () => clearTimeout(t);
  }, [addOpen, search, searchCandidates]);

  const openAdd = () => { setAddOpen(true); setAddMode('existing'); setSearch(''); setSelected([]); setResults([]); setResumeFile(null); setPendingResume(null); setParsed(null); };

  const addSelected = async () => {
    if (!selected.length) { toast.info('Select at least one candidate.'); return; }
    setAdding(true);
    try {
      await api.post('/pipeline/applications/bulk-assign/', { job: Number(id), candidate_ids: selected });
      toast.success(`${selected.length} candidate(s) added to the pipeline.`);
      setAddOpen(false);
      await loadBoard();
    } catch (e) {
      toast.error(e instanceof Error ? e.message : 'Could not add candidates.');
    } finally { setAdding(false); }
  };

  useEffect(() => {
    if (!user) return;
    (async () => {
      try {
        const j = (await api.get(`/jobs/${id}/`)) as any;
        const jd = j?.data?.data ?? j?.data;
        setJobTitle(jd?.title ?? `Job #${id}`);
        setClientName(jd?.client_name ?? '');
        const st = (await api.get('/pipeline/stages/')) as any;
        setStages(st?.data ?? []);
        await loadBoard();
      } catch {
        /* auth failures are handled by the AuthProvider */
      } finally {
        setLoading(false);
      }
    })();
  }, [user, id, loadBoard]);

  // Build the auto-generated (editable) candidate notification for a status change.
  const buildStatusEmail = (app: App, oldName: string, newName: string) => {
    const now = new Date();
    const ts = now.toLocaleString('en-GB', {
      day: '2-digit', month: '2-digit', year: 'numeric',
      hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: true,
    });
    const name = `${app.candidate_first_name || ''} ${app.candidate_last_name || ''}`.trim() || 'Candidate';
    const recruiter = user?.full_name || user?.email || 'HR Team';
    const position = clientName ? `${jobTitle} (${clientName})` : jobTitle;
    return `* Auto generated message. Please DO NOT reply *
${ts}

Dear ${name},

This E-Mail is a notification that your status has been changed in our HR database for the position ${position}.

Your previous status was "${oldName}".
And now HR has updated your new status as "${newName}".

Regards,
${recruiter}
Indovision Services Pvt Ltd`;
  };

  // Intercept the stage <select>: open the confirm/notify modal instead of
  // moving immediately.
  const openStatusChange = (app: App, newStageId: number) => {
    if (newStageId === app.stage) return;
    const newName = stages.find((s) => s.id === newStageId)?.name || 'Updated';
    const oldName = app.stage_name || 'No Status';
    setStatusModal({ app, newStageId, newStageName: newName, oldStageName: oldName });
    setSendMail(true);
    setEmailSubject(`Application status update — ${jobTitle}`);
    setEmailMessage(buildStatusEmail(app, oldName, newName));
  };

  const saveStatusChange = async () => {
    if (!statusModal) return;
    const { app, newStageId } = statusModal;
    setSavingStatus(true);
    try {
      await api.patch(`/pipeline/applications/${app.id}/`, { stage: newStageId });
      if (sendMail) {
        try {
          const res: any = await api.post(`/candidates/${app.candidate}/notify/`, {
            channels: ['EMAIL'],
            subject: emailSubject,
            message: emailMessage,
          });
          const sent = res?.data?.sent ?? 0;
          if (sent > 0) toast.success('Status updated and candidate notified by email.');
          else toast.warn('Status updated, but the email could not be sent (candidate may have no email).');
        } catch {
          toast.warn('Status updated, but the notification email failed to send.');
        }
      } else {
        toast.success('Status updated.');
      }
      setStatusModal(null);
      loadBoard();
    } catch (e) {
      toast.error(e instanceof Error ? e.message : 'Could not update status.');
    } finally {
      setSavingStatus(false);
    }
  };

  const total = apps.length;

  return (
    <>
        <main className="flex-1 p-4 sm:p-6 overflow-hidden flex flex-col">
          <div className="flex items-center gap-3 mb-4 flex-wrap">
            <button onClick={() => router.push('/jobs')} className="text-sm text-[#405189] hover:underline">
              <i className="fa-solid fa-arrow-left mr-1.5"></i> Jobs
            </button>
            <h2 className="text-lg font-semibold text-[#495057] dark:text-white">{jobTitle}</h2>
            <span className="text-xs text-vz-muted">· {total} candidate{total === 1 ? '' : 's'} in pipeline</span>
            <button
              onClick={openAdd}
              className="ml-auto flex items-center gap-2 px-3.5 py-2 rounded-none text-xs font-bold bg-[#0ab39c] hover:bg-[#099985] text-white transition cursor-pointer"
              title="Add existing candidates to this JD's pipeline"
            >
              <i className="fa-solid fa-user-plus text-sm" />
              Add Candidate
            </button>
            <button
              onClick={() => router.push(`/jobs/${id}/ai-screening`)}
              className="flex items-center gap-2 px-3.5 py-2 rounded-none text-xs font-bold bg-[#405189] hover:bg-[#364574] text-white transition cursor-pointer"
              title="Run AI candidate calling screening for this JD's candidates"
            >
              <i className="fa-solid fa-headset text-sm" />
              AI Candidate Calling Screening
            </button>
          </div>

          {loading ? (
            <p className="text-vz-muted">Loading…</p>
          ) : (
            <div className="flex-1 overflow-auto bg-white dark:bg-slate-900 border border-vz-border dark:border-slate-800 rounded-none shadow-sm">
              <table className="w-full text-xs min-w-[1000px]">
                <thead className="bg-slate-50 dark:bg-slate-950/40 sticky top-0 z-10">
                  <tr className="text-left border-b border-vz-border dark:border-slate-800">
                    {['Stage', 'First Name', 'Last Name', 'Loc', 'Added', 'Entered By', 'Status', 'Interviewer', 'Interview Result', 'Last Activity', 'Action'].map((h) => (
                      <th key={h} className="py-2.5 px-3 text-[10px] font-extrabold uppercase tracking-wider text-slate-400 whitespace-nowrap">{h}</th>
                    ))}
                  </tr>
                </thead>
                <tbody className="divide-y divide-slate-50 dark:divide-slate-800">
                  {apps.length === 0 && (
                    <tr><td colSpan={11} className="py-10 text-center text-slate-400">No candidates in this pipeline yet. Use “Add Candidate”.</td></tr>
                  )}
                  {apps.map((a) => (
                    <tr key={a.id} className="hover:bg-slate-50 dark:hover:bg-slate-800/40 transition">
                      <td className="py-2.5 px-3">
                        <select value={a.stage} onChange={(e) => openStatusChange(a, Number(e.target.value))}
                          className={`border rounded-none px-1.5 py-1 text-[11px] font-semibold focus:outline-none focus:ring-2 focus:ring-[#405189]/25 ${STAGE_BADGE[a.stage_outcome] || 'border-slate-200 dark:border-slate-700 dark:bg-slate-800'}`}>
                          {stages.map((s) => <option key={s.id} value={s.id}>{s.name}</option>)}
                        </select>
                      </td>
                      <td className="py-2.5 px-3">
                        <button onClick={() => router.push(`/candidates/${a.candidate}`)} className="font-semibold text-[#405189] hover:underline">{a.candidate_first_name || '—'}</button>
                        {a.self_applied && <i className="fa-solid fa-user-check text-emerald-500 ml-1.5 text-[10px]" title="Applied via careers portal" />}
                      </td>
                      <td className="py-2.5 px-3 text-slate-700 dark:text-slate-300">{a.candidate_last_name || '—'}</td>
                      <td className="py-2.5 px-3 text-slate-500 dark:text-slate-400">{a.candidate_location || '—'}</td>
                      <td className="py-2.5 px-3 text-slate-500 whitespace-nowrap">{new Date(a.created_at).toLocaleDateString('en-IN', { day: '2-digit', month: 'short', year: '2-digit' })}</td>
                      <td className="py-2.5 px-3 text-slate-500 max-w-[140px] truncate" title={a.added_by_email || ''}>{a.self_applied ? 'Candidate (portal)' : (a.added_by_name || '—')}</td>
                      <td className="py-2.5 px-3">{a.round1_outcome_label ? <span className="text-slate-700 dark:text-slate-300">{a.round1_outcome_label}</span> : <span className="text-slate-400">No Contact</span>}</td>
                      <td className="py-2.5 px-3 text-slate-500 max-w-[140px] truncate" title={a.interviewer || ''}>{a.interviewer || '—'}</td>
                      <td className="py-2.5 px-3 text-slate-500">{a.interview_result || '—'}</td>
                      <td className="py-2.5 px-3 text-slate-500 whitespace-nowrap">{new Date(a.updated_at).toLocaleDateString('en-IN', { day: '2-digit', month: 'short', year: '2-digit' })}</td>
                      <td className="py-2.5 px-3">
                        <button onClick={() => router.push(`/candidates/${a.candidate}`)} title="View candidate"
                          className="w-7 h-7 inline-flex items-center justify-center border border-slate-200 dark:border-slate-700 text-slate-500 hover:bg-[#405189] hover:text-white transition">
                          <i className="fa-solid fa-eye text-[11px]" />
                        </button>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          )}

          {/* Footer action, CATS-style */}
          <div className="mt-3">
            <button onClick={openAdd} className="text-sm font-bold text-[#405189] hover:underline inline-flex items-center gap-2">
              <i className="fa-solid fa-user-plus" /> Add Candidate to This Job Order Pipeline
            </button>
          </div>
        </main>

      {/* Add-candidate modal */}
      {addOpen && (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4">
          <div className="w-full max-w-6xl bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 shadow-xl flex flex-col max-h-[85vh]">
            <div className="flex items-center justify-between border-b border-slate-100 dark:border-slate-800 p-5">
              <div>
                <h3 className="text-base font-black text-slate-800 dark:text-white">Add candidates to pipeline</h3>
                <p className="text-xs text-slate-400 mt-0.5">{jobTitle} — they enter at the first stage.</p>
              </div>
              <button onClick={() => setAddOpen(false)} className="text-slate-400 hover:text-slate-600">✕</button>
            </div>

            {/* Tabs */}
            <div className="flex gap-1 px-5 pt-4">
              {(['existing', 'resume'] as const).map((m) => (
                <button key={m} onClick={() => setAddMode(m)}
                  className={`px-4 py-2 text-xs font-bold transition ${addMode === m ? 'bg-[#405189] text-white' : 'bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-300'}`}>
                  {m === 'existing' ? 'Existing candidate' : 'New from résumé'}
                </button>
              ))}
            </div>

            {addMode === 'existing' ? (
              <>
                <div className="p-5 pb-3">
                  <div className="relative">
                    <i className="fa-solid fa-magnifying-glass absolute left-3 top-1/2 -translate-y-1/2 text-slate-400 text-xs" />
                    <input value={search} onChange={(e) => setSearch(e.target.value)} autoFocus
                      placeholder="Search candidates by name, email or phone…"
                      className="w-full pl-9 pr-3 py-2.5 text-sm border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-900 focus:outline-none focus:border-[#405189]" />
                  </div>
                </div>
                <div className="flex-1 overflow-y-auto px-5">
                  {searching ? (
                    <p className="text-slate-400 text-sm py-6 text-center">Searching…</p>
                  ) : results.length === 0 ? (
                    <p className="text-slate-400 text-sm py-6 text-center">{search ? 'No matching candidates (or already in this pipeline).' : 'Type to search, or showing candidates not yet in this pipeline.'}</p>
                  ) : (
                    <div className="divide-y divide-slate-100 dark:divide-slate-800">
                      {results.map((c) => {
                        const nm = c.full_name || `${c.first_name || ''} ${c.last_name || ''}`.trim() || `#${c.id}`;
                        const on = selected.includes(c.id);
                        return (
                          <label key={c.id} className="flex items-center gap-3 py-2.5 cursor-pointer">
                            <input type="checkbox" checked={on}
                              onChange={() => setSelected((s) => on ? s.filter((x) => x !== c.id) : [...s, c.id])}
                              className="w-4 h-4 accent-[#405189]" />
                            <div className="min-w-0">
                              <p className="text-sm font-semibold text-slate-800 dark:text-slate-200 truncate">{nm}</p>
                              <p className="text-xs text-slate-400 truncate">{c.email || '—'}{c.city ? ` · ${c.city}` : ''}</p>
                            </div>
                          </label>
                        );
                      })}
                    </div>
                  )}
                </div>
                <div className="flex items-center justify-between gap-3 border-t border-slate-100 dark:border-slate-800 p-5">
                  <span className="text-xs text-slate-500">{selected.length} selected</span>
                  <div className="flex gap-2">
                    <button onClick={() => setAddOpen(false)} className="px-4 py-2 border border-slate-200 dark:border-slate-700 text-sm font-semibold">Cancel</button>
                    <button onClick={addSelected} disabled={adding || !selected.length}
                      className="px-6 py-2 bg-[#405189] text-white font-bold text-sm hover:bg-[#334267] transition disabled:opacity-50">
                      {adding ? 'Adding…' : `Add ${selected.length || ''} to pipeline`}
                    </button>
                  </div>
                </div>
              </>
            ) : (
              <>
                <div className="flex-1 overflow-y-auto p-5 space-y-3">
                  {!parsed ? (
                    <div className="border-2 border-dashed border-slate-300 dark:border-slate-700 p-6 text-center">
                      <p className="text-sm text-slate-500 mb-3">Upload a résumé (PDF) — we&apos;ll parse it, you review, then add.</p>
                      <label className="inline-block px-4 py-2 bg-[#405189] text-white text-sm font-bold cursor-pointer hover:bg-[#334267] transition">
                        {parsing ? 'Reading…' : 'Choose résumé'}
                        <input ref={fileInputRef} type="file" accept=".pdf,.doc,.docx" className="hidden" disabled={parsing}
                          onChange={(e) => {
                            const f = e.target.files?.[0];
                            if (f) setPendingResume(f); // preview + confirm first — upload happens on confirm
                            e.target.value = ''; // allow re-selecting the same file after cancel
                          }} />
                      </label>
                      {resumeFile && <p className="text-xs text-slate-400 mt-2">{resumeFile.name}</p>}
                    </div>
                  ) : (
                    <>
                      <p className="text-xs text-slate-400">Review the parsed details, then create &amp; add.</p>
                      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                        {[
                          ['first_name', 'First name *'], ['last_name', 'Last name *'], ['email', 'Email'], ['phone_number', 'Phone *'],
                          ['current_location', 'Location'], ['highest_qualification', 'Qualification'],
                        ].map(([k, label]) => (
                          <div key={k}>
                            <label className="block text-[10px] font-bold uppercase text-slate-400 mb-1">{label}</label>
                            <input value={parsed[k] ?? ''} onChange={(e) => setParsed({ ...parsed, [k]: e.target.value })}
                              className="w-full px-2.5 py-2 text-sm border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-900 focus:outline-none focus:border-[#405189]" />
                          </div>
                        ))}
                      </div>
                      <label className="flex items-center gap-2 text-sm font-semibold text-slate-700 dark:text-slate-200 cursor-pointer">
                        <input type="checkbox" checked={!!parsed.fresher} onChange={(e) => setParsed({ ...parsed, fresher: e.target.checked })} className="w-4 h-4 accent-[#405189]" />
                        Fresher (no experience)
                      </label>
                      {!parsed.fresher && (
                        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                          {[['total_experience', 'Experience (yrs)'], ['current_company', 'Current employer'], ['current_role', 'Designation']].map(([k, label]) => (
                            <div key={k}>
                              <label className="block text-[10px] font-bold uppercase text-slate-400 mb-1">{label}</label>
                              <input value={parsed[k] ?? ''} onChange={(e) => setParsed({ ...parsed, [k]: e.target.value })}
                                className="w-full px-2.5 py-2 text-sm border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-900 focus:outline-none focus:border-[#405189]" />
                            </div>
                          ))}
                        </div>
                      )}
                      <div>
                        <label className="block text-[10px] font-bold uppercase text-slate-400 mb-1">Skills (comma separated)</label>
                        <input value={parsed.skills ?? ''} onChange={(e) => setParsed({ ...parsed, skills: e.target.value })}
                          className="w-full px-2.5 py-2 text-sm border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-900 focus:outline-none focus:border-[#405189]" />
                      </div>
                    </>
                  )}
                </div>
                <div className="flex items-center justify-end gap-2 border-t border-slate-100 dark:border-slate-800 p-5">
                  <button onClick={() => setAddOpen(false)} className="px-4 py-2 border border-slate-200 dark:border-slate-700 text-sm font-semibold">Cancel</button>
                  {parsed && (
                    <button onClick={createFromResume} disabled={creating}
                      className="px-6 py-2 bg-[#405189] text-white font-bold text-sm hover:bg-[#334267] transition disabled:opacity-50">
                      {creating ? 'Creating…' : 'Create & add to pipeline'}
                    </button>
                  )}
                </div>
              </>
            )}
          </div>
        </div>
      )}

      {/* Status-change + notify modal */}
      {statusModal && (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4">
          <div className="w-full max-w-xl bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 shadow-xl flex flex-col max-h-[88vh]">
            <div className="flex items-center justify-between border-b border-slate-100 dark:border-slate-800 p-5">
              <div>
                <h3 className="text-base font-black text-slate-800 dark:text-white">Change status</h3>
                <p className="text-xs text-slate-400 mt-0.5">
                  {(statusModal.app.candidate_first_name || '') + ' ' + (statusModal.app.candidate_last_name || '')} · {jobTitle}
                </p>
              </div>
              <button onClick={() => setStatusModal(null)} className="text-slate-400 hover:text-slate-600">✕</button>
            </div>

            <div className="flex-1 overflow-y-auto p-5 space-y-4">
              {/* old -> new */}
              <div className="flex items-center gap-3 text-sm">
                <span className="px-2.5 py-1 border border-slate-200 dark:border-slate-700 text-slate-600 dark:text-slate-300 font-semibold">{statusModal.oldStageName}</span>
                <i className="fa-solid fa-arrow-right text-slate-400" />
                <span className="px-2.5 py-1 bg-[#405189]/10 border border-[#405189]/30 text-[#405189] font-bold">{statusModal.newStageName}</span>
              </div>

              {/* Send-email toggle */}
              <label className="flex items-center gap-2 text-sm font-semibold text-slate-700 dark:text-slate-200 cursor-pointer">
                <input type="checkbox" checked={sendMail} onChange={(e) => setSendMail(e.target.checked)} className="w-4 h-4 accent-[#405189]" />
                Send E-Mail Notification to Candidate
              </label>

              {sendMail && (
                <div className="space-y-3">
                  <div>
                    <label className="block text-[10px] font-bold uppercase text-slate-400 mb-1">Subject</label>
                    <input value={emailSubject} onChange={(e) => setEmailSubject(e.target.value)}
                      className="w-full px-3 py-2 text-sm border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-900 focus:outline-none focus:border-[#405189]" />
                  </div>
                  <div>
                    <label className="block text-[10px] font-bold uppercase text-slate-400 mb-1">Message (auto-generated — you can edit)</label>
                    <textarea value={emailMessage} onChange={(e) => setEmailMessage(e.target.value)} rows={12}
                      className="w-full px-3 py-2 text-sm font-mono leading-relaxed border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-900 focus:outline-none focus:border-[#405189] resize-y" />
                    <p className="text-[11px] text-slate-400 mt-1">The candidate receives this text by email. Requires a valid email on the candidate record.</p>
                  </div>
                </div>
              )}
            </div>

            <div className="flex items-center justify-end gap-2 border-t border-slate-100 dark:border-slate-800 p-5">
              <button onClick={() => setStatusModal(null)} disabled={savingStatus}
                className="px-4 py-2 border border-slate-200 dark:border-slate-700 text-sm font-semibold disabled:opacity-50">Cancel</button>
              <button onClick={saveStatusChange} disabled={savingStatus}
                className="px-6 py-2 bg-[#405189] text-white font-bold text-sm hover:bg-[#334267] transition disabled:opacity-50">
                {savingStatus ? 'Saving…' : sendMail ? 'Save & send email' : 'Save'}
              </button>
            </div>
          </div>
        </div>
      )}

      {/* Confirm the picked résumé before it is uploaded & parsed */}
      {pendingResume && (
        <ResumeUploadConfirmModal
          file={pendingResume}
          busy={parsing}
          onConfirm={async () => {
            await uploadAndParse(pendingResume);
            setPendingResume(null);
          }}
          onCancel={() => setPendingResume(null)}
          onChooseAnother={() => {
            setPendingResume(null);
            setTimeout(() => fileInputRef.current?.click(), 50);
          }}
        />
      )}
    </>
  );
}