/* Jobs — manage requisitions, create jobs, generate apply links, intake applicants. */
const JG = window.GreydigiComponents;
const { Avatar: JAvatar, Badge: JBadge, Button: JButton, Tag: JTag, StatCard: VStatCard } = JG;
const { useState: useJS } = React;

const STAGE_META = {
  Sourcing: 'neutral', Screening: 'warning', Interviewing: 'success', Offer: 'success', Hired: 'neutral',
};

function slugify(s) { return s.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, '').slice(0, 32); }

/* chip / tag text input */
function TagInput({ label, hint, value, onChange, accent }) {
  const [text, setText] = useJS('');
  const add = () => { const t = text.trim().replace(/,$/, ''); if (t && !value.includes(t)) onChange([...value, t]); setText(''); };
  return (
    <div className="field">
      <label className="field-label">{label} {hint && <span className="field-hint">{hint}</span>}</label>
      <div className="taginput">
        {value.map((t) => (
          <span key={t} className={'taginput-chip ' + (accent || '')}>
            {t}<button onClick={() => onChange(value.filter((x) => x !== t))} aria-label="Remove"><Icon name="x" size={11} /></button>
          </span>
        ))}
        <input
          value={text}
          onChange={(e) => setText(e.target.value)}
          onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ',') { e.preventDefault(); add(); } }}
          onBlur={add}
          placeholder={value.length ? 'Add another…' : 'Type a skill, press Enter'}
        />
      </div>
    </div>
  );
}

/* ---------- Stage stepper ---------- */
function StageStepper({ job, onSet }) {
  if (job.status === 'closed') {
    return <div className="stage-closed"><Icon name="check" size={13} /> Closed · filled</div>;
  }
  const idx = STAGE_FLOW.indexOf(job.stage);
  return (
    <div className="stepper">
      {STAGE_FLOW.map((st, i) => (
        <button key={st} className={'step' + (i < idx ? ' done' : '') + (i === idx ? ' current' : '')} onClick={() => onSet(job.id, st)} title={`Move to ${st}`}>
          <span className="step-dot">{i < idx ? <Icon name="check" size={11} /> : i + 1}</span>
          <span className="step-label">{st}</span>
        </button>
      ))}
    </div>
  );
}

/* ---------- Job card ---------- */
function JobCard({ job, isCurrent, applicants, interviewsCount, actions, onLink, onDelete, onView }) {
  const [menu, setMenu] = useJS(false);
  return (
    <div className={'jobx' + (isCurrent ? ' is-current' : '') + (job.status === 'closed' ? ' is-closed' : '')}>
      <div className="jobx-top">
        <span className="jobx-ico"><Icon name="briefcase" size={18} /></span>
        <div className="jobx-id">
          <div className="jobx-titlerow">
            <span className="jobx-title">{job.title}</span>
            {isCurrent && <span className="jobx-current">Current</span>}
          </div>
          <div className="jobx-meta">{job.dept} · {job.loc} · {job.type}</div>
        </div>
        <JBadge label={job.status === 'closed' ? 'Closed' : job.stage} variant={job.status === 'closed' ? 'neutral' : STAGE_META[job.stage]} />
        <div className="jobx-menuwrap">
          <button className="jobx-menubtn" onClick={() => setMenu((v) => !v)} aria-label="Actions"><Icon name="sliders" size={16} /></button>
          {menu && (
            <>
              <div className="menu-overlay" onMouseDown={() => setMenu(false)} />
              <div className="menu jobx-menu">
                <button className="menu-item" onClick={() => { onView(job.id); setMenu(false); }}><span>Open candidates</span><Icon name="chevronRight" size={13} /></button>
                <button className="menu-item" onClick={() => { onLink(job); setMenu(false); }}><span>Generate apply link</span><Icon name="link" size={13} /></button>
                {job.status === 'open'
                  ? <button className="menu-item" onClick={() => { actions.closeJob(job.id); setMenu(false); }}><span>Close job</span><Icon name="check" size={13} /></button>
                  : <button className="menu-item" onClick={() => { actions.reopenJob(job.id); setMenu(false); }}><span>Reopen job</span><Icon name="refresh" size={13} /></button>}
                <div className="menu-sep" />
                <button className="menu-item danger" onClick={() => { onDelete(job); setMenu(false); }}><span>Delete job</span><Icon name="trash" size={13} /></button>
              </div>
            </>
          )}
        </div>
      </div>

      <div className="jobx-stage"><StageStepper job={job} onSet={actions.setStage} /></div>

      <div className="jobx-foot">
        <div className="jobx-stats">
          <span className="jobx-stat"><Icon name="users" size={13} /> {applicants} applicants</span>
          <span className="jobx-stat"><Icon name="calendar" size={13} /> {interviewsCount} interviews</span>
        </div>
        <div className="jobx-actions">
          <button className="mini-btn" onClick={() => onLink(job)}><Icon name="link" size={13} /> Apply link</button>
          <button className="mini-btn primary" onClick={() => onView(job.id)}>View<Icon name="chevronRight" size={13} /></button>
        </div>
      </div>
    </div>
  );
}

/* ---------- Create job ---------- */
function JobCreate({ onCancel, onCreate }) {
  const [f, setF] = useJS({ title: '', dept: '', loc: '', type: 'Full-time', description: '', mustHave: [], preferred: [], niceToHave: [] });
  const set = (k) => (v) => setF((s) => ({ ...s, [k]: v }));
  const setVal = (k) => (e) => setF((s) => ({ ...s, [k]: e.target.value }));
  const valid = f.title.trim() && f.mustHave.length > 0;
  return (
    <div className="view-scroll">
      <div className="view-inner" style={{ maxWidth: 720 }}>
        <button className="back-link" onClick={onCancel}><Icon name="chevronLeft" size={15} /> Back to jobs</button>
        <PageHead title="Create a job" subtitle="Define the role and what a great candidate looks like" />
        <div className="panel form-panel">
          <div className="field">
            <label className="field-label">Job title</label>
            <input className="field-input" value={f.title} onChange={setVal('title')} placeholder="e.g. Forward Deployed Engineer" />
          </div>
          <div className="field-grid">
            <div className="field"><label className="field-label">Department</label><input className="field-input" value={f.dept} onChange={setVal('dept')} placeholder="ERP Delivery" /></div>
            <div className="field"><label className="field-label">Location</label><input className="field-input" value={f.loc} onChange={setVal('loc')} placeholder="Remote (EU/IN)" /></div>
          </div>
          <div className="field">
            <label className="field-label">Employment type</label>
            <div className="seg seg-wide">
              {['Full-time', 'Contract', 'Part-time'].map((t) => (
                <button key={t} className={'seg-btn' + (f.type === t ? ' on' : '')} onClick={() => set('type')(t)}>{t}</button>
              ))}
            </div>
          </div>
          <div className="field">
            <label className="field-label">Job description</label>
            <textarea className="field-input field-area" value={f.description} onChange={setVal('description')} placeholder="What the role delivers, the team, and the day-to-day…" rows={4} />
          </div>
          <TagInput label="Must-have skills" hint="required" value={f.mustHave} onChange={set('mustHave')} accent="must" />
          <TagInput label="Preferred skills" hint="nice to score higher" value={f.preferred} onChange={set('preferred')} accent="pref" />
          <TagInput label="Nice to have" hint="optional" value={f.niceToHave} onChange={set('niceToHave')} accent="" />
          <div className="form-foot">
            <JButton label="Cancel" variant="secondary" onClick={onCancel} />
            <JButton label="Create job & get apply link" variant="primary" onClick={() => valid && onCreate(f)} />
          </div>
          {!valid && <div className="form-note">Add a job title and at least one must-have skill to continue.</div>}
        </div>
      </div>
    </div>
  );
}

/* ---------- Apply link modal ---------- */
function LinkModal({ job, onClose, onPreview }) {
  const [copied, setCopied] = useJS(false);
  const url = `https://apply.greydigi.ai/${job.id}/${slugify(job.title)}`;
  const copy = () => { try { navigator.clipboard && navigator.clipboard.writeText(url); } catch (e) {} setCopied(true); setTimeout(() => setCopied(false), 1600); };
  return (
    <div className="cmp-overlay" onMouseDown={(e) => { if (e.target === e.currentTarget) onClose(); }}>
      <div className="link-modal">
        <div className="link-head">
          <span className="link-mark"><Icon name="link" size={20} /></span>
          <div><h2 className="link-title">Apply link ready</h2><div className="link-sub">Share this link — applicants fill the form and attach a CV.</div></div>
          <button className="cmp-x" onClick={onClose} aria-label="Close"><Icon name="x" size={18} /></button>
        </div>
        <div className="link-body">
          <div className="link-job">{job.title} · {job.loc}</div>
          <div className="link-url">
            <Icon name="globe" size={15} className="i-faint" />
            <span className="link-url-text">{url}</span>
            <button className={'link-copy' + (copied ? ' done' : '')} onClick={copy}>{copied ? <><Icon name="check" size={14} /> Copied</> : <><Icon name="copy" size={14} /> Copy</>}</button>
          </div>
          <div className="link-channels">
            <button className="link-chan"><Icon name="mail" size={15} /> Email</button>
            <button className="link-chan"><Icon name="zap" size={15} /> Slack</button>
            <button className="link-chan"><Icon name="globe" size={15} /> Careers page</button>
            <button className="link-chan"><Icon name="users" size={15} /> LinkedIn</button>
          </div>
          <div className="link-foot">
            <span className="link-foot-note">Preview what candidates see when they open the link.</span>
            <JButton label="Preview apply form" variant="primary" onClick={() => onPreview(job)} />
          </div>
        </div>
      </div>
    </div>
  );
}

/* ---------- Applicant intake (candidate-facing) ---------- */
function ApplyModal({ job, onClose, onSubmit }) {
  const [f, setF] = useJS({ name: '', email: '', company: '', location: '', years: '', skills: [], cv: '' });
  const [done, setDone] = useJS(false);
  const setVal = (k) => (e) => setF((s) => ({ ...s, [k]: e.target.value }));
  const toggleSkill = (sk) => setF((s) => ({ ...s, skills: s.skills.includes(sk) ? s.skills.filter((x) => x !== sk) : [...s.skills, sk] }));
  const allSkills = [...job.mustHave, ...job.preferred];
  const valid = f.name.trim() && f.email.trim() && f.cv;

  const submit = () => {
    const cand = onSubmit(job, { ...f, years: f.years ? parseInt(f.years, 10) : undefined });
    setF((s) => ({ ...s, _result: cand }));
    setDone(true);
  };

  return (
    <div className="cmp-overlay" onMouseDown={(e) => { if (e.target === e.currentTarget) onClose(); }}>
      <div className="apply-modal">
        <div className="apply-browser">
          <span className="apply-dot" /><span className="apply-dot" /><span className="apply-dot" />
          <span className="apply-addr"><Icon name="globe" size={12} /> apply.greydigi.ai/{job.id}</span>
          <button className="cmp-x" onClick={onClose} aria-label="Close"><Icon name="x" size={16} /></button>
        </div>

        {!done ? (
          <div className="apply-body">
            <div className="apply-hero">
              <span className="apply-logo"><img src="/greydigi-logo.png" alt="" /></span>
              <div className="apply-co">Greydigi · Careers</div>
              <h1 className="apply-title">{job.title}</h1>
              <div className="apply-meta">{job.dept} · {job.loc} · {job.type}</div>
            </div>
            {job.description && <p className="apply-desc">{job.description}</p>}
            <div className="apply-reqs">
              <div><div className="apply-reqlabel">Must have</div><div className="tag-wrap">{job.mustHave.map((s) => <JTag key={s} label={s} variant="strength" />)}</div></div>
              {job.preferred.length > 0 && <div><div className="apply-reqlabel">Preferred</div><div className="tag-wrap">{job.preferred.map((s) => <JTag key={s} label={s} variant="gap" />)}</div></div>}
            </div>

            <div className="apply-form">
              <div className="apply-formtitle">Your application</div>
              <div className="field-grid">
                <div className="field"><label className="field-label">Full name *</label><input className="field-input" value={f.name} onChange={setVal('name')} placeholder="Jane Doe" /></div>
                <div className="field"><label className="field-label">Email *</label><input className="field-input" value={f.email} onChange={setVal('email')} placeholder="jane@email.com" /></div>
              </div>
              <div className="field-grid">
                <div className="field"><label className="field-label">Current company</label><input className="field-input" value={f.company} onChange={setVal('company')} placeholder="Acme Consulting" /></div>
                <div className="field"><label className="field-label">Location</label><input className="field-input" value={f.location} onChange={setVal('location')} placeholder="Berlin, DE" /></div>
              </div>
              <div className="field" style={{ maxWidth: 200 }}>
                <label className="field-label">Years of experience</label>
                <input className="field-input" type="number" value={f.years} onChange={setVal('years')} placeholder="8" />
              </div>
              <div className="field">
                <label className="field-label">Which of these do you have?</label>
                <div className="skillpick">
                  {allSkills.map((sk) => (
                    <button key={sk} className={'skillpick-chip' + (f.skills.includes(sk) ? ' on' : '')} onClick={() => toggleSkill(sk)}>
                      {f.skills.includes(sk) && <Icon name="check" size={12} />}{sk}
                    </button>
                  ))}
                </div>
              </div>
              <div className="field">
                <label className="field-label">Resume / CV *</label>
                <label className="cv-drop">
                  <input type="file" style={{ display: 'none' }} onChange={(e) => setF((s) => ({ ...s, cv: e.target.files && e.target.files[0] ? e.target.files[0].name : 'resume.pdf' }))} />
                  {f.cv ? <span className="cv-file"><Icon name="fileText" size={15} /> {f.cv}</span> : <span className="cv-prompt"><Icon name="upload" size={16} /> Click to attach your CV (PDF)</span>}
                </label>
                {!f.cv && <button className="cv-mock" onClick={() => setF((s) => ({ ...s, cv: 'Jane_Doe_CV.pdf' }))}>or attach a sample CV</button>}
              </div>
              <button className={'apply-submit' + (valid ? '' : ' disabled')} onClick={() => valid && submit()}>Submit application</button>
              <div className="apply-fine">By applying you consent to AI-assisted screening of your application.</div>
            </div>
          </div>
        ) : (
          <div className="apply-done">
            <span className="apply-check"><Icon name="check" size={28} /></span>
            <h2>Application received</h2>
            <p>Thanks{f.name ? ', ' + f.name.split(' ')[0] : ''}! Your application for <strong>{job.title}</strong> is in. Greydigi AI is screening it now — you'll hear back by email.</p>
            <div className="apply-result">
              <div className="apply-result-row"><span>AI screen</span><span className="apply-result-v">Complete</span></div>
              <div className="apply-result-row"><span>Provisional ATS</span><span className="apply-result-v">{f._result ? f._result.ats : '—'}/100</span></div>
              <div className="apply-result-row"><span>Recommendation</span><JBadge label={f._result ? (VREC[f._result.decision] || {}).label || '—' : '—'} variant={f._result ? (VREC[f._result.decision] || {}).v : 'neutral'} /></div>
            </div>
            <JButton label="Done — back to recruiter view" variant="primary" onClick={onClose} />
          </div>
        )}
      </div>
    </div>
  );
}

/* ---------- Delete confirm ---------- */
function DeleteModal({ job, applicants, interviewsCount, onCancel, onConfirm }) {
  return (
    <div className="cmp-overlay" onMouseDown={(e) => { if (e.target === e.currentTarget) onCancel(); }}>
      <div className="confirm-modal">
        <span className="confirm-mark"><Icon name="trash" size={22} /></span>
        <h2 className="confirm-title">Delete “{job.title}”?</h2>
        <p className="confirm-text">This permanently removes the job and everything attached to it. This cannot be undone.</p>
        <div className="confirm-list">
          <div className="confirm-li"><Icon name="users" size={14} /> {applicants} candidate{applicants !== 1 ? 's' : ''} in this pipeline</div>
          <div className="confirm-li"><Icon name="calendar" size={14} /> {interviewsCount} scheduled interview{interviewsCount !== 1 ? 's' : ''}</div>
          <div className="confirm-li"><Icon name="pipeline" size={14} /> All pipeline & analytics data</div>
        </div>
        <div className="confirm-foot">
          <JButton label="Cancel" variant="secondary" onClick={onCancel} />
          <button className="danger-btn" onClick={onConfirm}><Icon name="trash" size={15} /> Delete everything</button>
        </div>
      </div>
    </div>
  );
}

/* ---------- Job detail ---------- */
function JobDetail({ job, candidates, interviews, actions, onBack, onLink, onDelete }) {
  const jobCands = candidates.filter((c) => c.jobId === job.id);
  const jobIvs = interviews.filter((iv) => iv.jobId === job.id).sort((a, b) => (a.date + a.start).localeCompare(b.date + b.start));
  const stageCounts = [
    { label: 'Applied', n: jobCands.length },
    { label: 'AI Screen', n: jobCands.filter((c) => c.decision !== 'rejected').length },
    { label: 'Interview', n: jobCands.filter((c) => c.decision === 'shortlisted').length },
    { label: 'Offer', n: jobCands.filter((c) => c.decision === 'shortlisted' && c.ats >= 88).length },
  ];
  const top = [...jobCands].sort((a, b) => b.ats - a.ats).slice(0, 5);
  const clearAll = jobCands.filter((c) => { const m = matchCounts(c, job); return m.mustTotal > 0 && m.must === m.mustTotal; }).length;
  const fmtDate = (iso) => { const [y, m, d] = iso.split('-').map(Number); return ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'][m - 1] + ' ' + d; };

  return (
    <div className="view-scroll">
      <div className="view-inner view-wide">
        <button className="back-link" onClick={onBack}><Icon name="chevronLeft" size={15} /> Back to jobs</button>

        {/* header */}
        <div className="jd-head">
          <span className="jd-ico"><Icon name="briefcase" size={22} /></span>
          <div className="jd-id">
            <div className="jd-titlerow">
              <h1 className="jd-title">{job.title}</h1>
              <JBadge label={job.status === 'closed' ? 'Closed' : job.stage} variant={job.status === 'closed' ? 'neutral' : STAGE_META[job.stage]} />
            </div>
            <div className="jd-meta">{job.dept} · {job.loc} · {job.type} · Opened {fmtDate(job.opened)}</div>
          </div>
          <div className="jd-actions">
            <JButton label="Open candidates" variant="primary" onClick={() => actions.pickJob(job.id)} />
            <button className="mini-btn" onClick={() => onLink(job)}><Icon name="link" size={13} /> Apply link</button>
          </div>
        </div>

        {/* stage management */}
        <div className="panel">
          <div className="panel-row"><h3 className="panel-title">Hiring stage</h3>
            <div className="jd-statusctl">
              {job.status === 'open'
                ? <button className="mini-btn" onClick={() => actions.closeJob(job.id)}><Icon name="check" size={13} /> Close job</button>
                : <button className="mini-btn" onClick={() => actions.reopenJob(job.id)}><Icon name="refresh" size={13} /> Reopen</button>}
              <button className="mini-btn danger-mini" onClick={() => onDelete(job)}><Icon name="trash" size={13} /> Delete</button>
            </div>
          </div>
          <StageStepper job={job} onSet={actions.setStage} />
        </div>

        {/* stats */}
        <div className="kpi-grid">
          <VStatCard value={jobCands.length} label="Applicants" caption="in this pipeline" variant="neutral" />
          <VStatCard value={clearAll} label="Clear all must-haves" caption={`of ${jobCands.length}`} variant="skills" />
          <VStatCard value={jobCands.filter((c) => c.decision === 'shortlisted').length} label="Shortlisted" caption="AI says proceed" variant="ats" />
          <VStatCard value={jobIvs.length} label="Interviews" caption="scheduled" variant="ats" />
        </div>

        {/* description + requirements */}
        <div className="dash-cols">
          <div className="panel">
            <h3 className="panel-title">Description</h3>
            <p className="jd-desc">{job.description || 'No description provided.'}</p>
            <div className="jd-pipe">
              {stageCounts.map((s) => (
                <div key={s.label} className="jd-pipe-col"><span className="jd-pipe-n">{s.n}</span><span className="jd-pipe-l">{s.label}</span></div>
              ))}
            </div>
          </div>
          <div className="panel">
            <h3 className="panel-title">Requirements</h3>
            <div className="jd-reqgroup"><div className="jd-reqlabel must">Must have</div><div className="tag-wrap">{job.mustHave.map((s) => <JTag key={s} label={s} variant="strength" />)}</div></div>
            <div className="jd-reqgroup"><div className="jd-reqlabel pref">Preferred</div><div className="tag-wrap">{job.preferred.map((s) => <JTag key={s} label={s} variant="gap" />)}</div></div>
            {job.niceToHave.length > 0 && <div className="jd-reqgroup"><div className="jd-reqlabel">Nice to have</div><div className="tag-wrap">{job.niceToHave.map((s) => <JBadge key={s} label={s} variant="neutral" />)}</div></div>}
          </div>
        </div>

        {/* top candidates + interviews */}
        <div className="dash-cols">
          <div className="panel">
            <div className="panel-row"><h3 className="panel-title">Top candidates</h3><button className="link-btn" onClick={() => actions.pickJob(job.id)}>View all</button></div>
            <div className="dash-list">
              {top.map((c) => (
                <button key={c.id} className="dash-cand" onClick={() => actions.openCandidate ? actions.openCandidate(c.id, c.jobId) : actions.pickJob(job.id)}>
                  <JAvatar initials={c.initials} size="sm" color="charcoal" />
                  <div className="dash-cand-id"><span className="dash-cand-name">{c.name}</span><span className="dash-cand-sub">{c.company} · {c.years} yrs</span></div>
                  <span className="dash-metric">{c.ats}<small>ATS</small></span>
                  <JBadge label={VREC[c.decision].label} variant={VREC[c.decision].v} />
                </button>
              ))}
              {!top.length && <div className="dash-empty">No applicants yet — share the apply link.</div>}
            </div>
          </div>
          <div className="panel">
            <h3 className="panel-title">Upcoming interviews</h3>
            <div className="dash-list">
              {jobIvs.slice(0, 6).map((iv) => {
                const c = jobCands.find((x) => x.id === iv.candidateId);
                return (
                  <div key={iv.id} className="jd-iv">
                    <span className="jd-iv-date">{fmtDate(iv.date)}<small>{iv.start}</small></span>
                    <div className="jd-iv-id"><span className="jd-iv-name">{c ? c.name : 'Candidate'}</span><span className="jd-iv-kind">{iv.kind}</span></div>
                    <JBadge label={iv.mode} variant={iv.mode === 'Video' ? 'success' : iv.mode === 'Onsite' ? 'warning' : 'neutral'} />
                  </div>
                );
              })}
              {!jobIvs.length && <div className="dash-empty">No interviews scheduled.</div>}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

/* ---------- Jobs view ---------- */
function JobsView({ jobs, currentJobId, candidates, interviews, actions }) {
  const [mode, setMode] = useJS('list');
  const [detailJobId, setDetailJobId] = useJS(null);
  const [linkJob, setLinkJob] = useJS(null);
  const [applyJob, setApplyJob] = useJS(null);
  const [delJob, setDelJob] = useJS(null);

  const countApplicants = (id) => candidates.filter((c) => c.jobId === id).length;
  const countInterviews = (id) => interviews.filter((iv) => iv.jobId === id).length;
  const open = jobs.filter((j) => j.status === 'open');
  const closed = jobs.filter((j) => j.status === 'closed');

  if (mode === 'create') {
    return <JobCreate onCancel={() => setMode('list')} onCreate={(data) => { const nj = actions.addJob(data); setMode('list'); setLinkJob(nj); }} />;
  }

  if (detailJobId) {
    const dj = jobs.find((j) => j.id === detailJobId);
    if (dj) {
      return (
        <>
          <JobDetail job={dj} candidates={candidates} interviews={interviews} actions={actions} onBack={() => setDetailJobId(null)} onLink={setLinkJob} onDelete={setDelJob} />
          {linkJob && <LinkModal job={linkJob} onClose={() => setLinkJob(null)} onPreview={(j) => { setLinkJob(null); setApplyJob(j); }} />}
          {applyJob && <ApplyModal job={applyJob} onClose={() => setApplyJob(null)} onSubmit={actions.addApplicant} />}
          {delJob && <DeleteModal job={delJob} applicants={countApplicants(delJob.id)} interviewsCount={countInterviews(delJob.id)} onCancel={() => setDelJob(null)} onConfirm={() => { actions.deleteJob(delJob.id); setDelJob(null); setDetailJobId(null); }} />}
        </>
      );
    }
  }

  return (
    <div className="view-scroll">
      <div className="view-inner">
        <PageHead title="Jobs" subtitle={`${open.length} open · ${closed.length} closed`}>
          <JButton label="+ New job" variant="primary" onClick={() => setMode('create')} />
        </PageHead>

        <div className="jobs-section-label">Open requisitions</div>
        <div className="jobx-list">
          {open.map((j) => (
            <JobCard key={j.id} job={j} isCurrent={j.id === currentJobId} applicants={countApplicants(j.id)} interviewsCount={countInterviews(j.id)} actions={actions} onLink={setLinkJob} onDelete={setDelJob} onView={(id) => setDetailJobId(id)} />
          ))}
          {!open.length && <div className="jobs-empty">No open jobs. Create one to start sourcing.</div>}
        </div>

        {closed.length > 0 && (
          <>
            <div className="jobs-section-label" style={{ marginTop: 24 }}>Closed</div>
            <div className="jobx-list">
              {closed.map((j) => (
                <JobCard key={j.id} job={j} isCurrent={j.id === currentJobId} applicants={countApplicants(j.id)} interviewsCount={countInterviews(j.id)} actions={actions} onLink={setLinkJob} onDelete={setDelJob} onView={(id) => setDetailJobId(id)} />
              ))}
            </div>
          </>
        )}
      </div>

      {linkJob && <LinkModal job={linkJob} onClose={() => setLinkJob(null)} onPreview={(j) => { setLinkJob(null); setApplyJob(j); }} />}
      {applyJob && <ApplyModal job={applyJob} onClose={() => setApplyJob(null)} onSubmit={actions.addApplicant} />}
      {delJob && <DeleteModal job={delJob} applicants={countApplicants(delJob.id)} interviewsCount={countInterviews(delJob.id)} onCancel={() => setDelJob(null)} onConfirm={() => { actions.deleteJob(delJob.id); setDelJob(null); }} />}
    </div>
  );
}

const VREC = { shortlisted: { label: 'Proceed', v: 'success' }, borderline: { label: 'Caution', v: 'warning' }, rejected: { label: 'Reject', v: 'error' } };

Object.assign(window, { JobsView });