/* Dashboard · Pipeline · Analytics · Settings — scoped to the current job. */
const VG = window.GreydigiComponents;
const { Avatar: VAvatar, Badge: VBadge, Button: VButton, Tag: VTag, StatCard: VStatCard } = VG;

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

function PageHead({ title, subtitle, children }) {
  return (
    <div className="page-head">
      <div>
        <h1 className="page-title">{title}</h1>
        {subtitle && <div className="page-sub">{subtitle}</div>}
      </div>
      {children && <div className="page-head-actions">{children}</div>}
    </div>
  );
}

/* ---------------- Dashboard ---------------- */
function DashboardView({ job, candidates, interviews, onOpenCandidates, onOpenCandidate, goTab }) {
  const [topBy, setTopBy] = React.useState('ats');
  const total = candidates.length;
  const shortlisted = candidates.filter((c) => c.decision === 'shortlisted').length;
  const review = candidates.filter((c) => c.decision === 'borderline').length;
  const clearAll = candidates.filter((c) => { const m = matchCounts(c, job); return m.mustTotal > 0 && m.must === m.mustTotal; }).length;

  const sorted = [...candidates].sort((a, b) => {
    if (topBy === 'ats') return b.ats - a.ats;
    const ma = matchCounts(a, job), mb = matchCounts(b, job);
    return (mb.must - ma.must) || (mb.pref - ma.pref) || (b.ats - a.ats);
  }).slice(0, 5);

  const activity = [
    { who: candidates[0] && candidates[0].name, what: 'moved to Interview stage', when: '12m ago', icon: 'pipeline' },
    { who: candidates[1] && candidates[1].name, what: 'AI scorecard generated', when: '40m ago', icon: 'sparkles' },
    { who: candidates.find((c) => c.risk !== 'Low') && candidates.find((c) => c.risk !== 'Low').name, what: 'flagged for risk review', when: '1h ago', icon: 'shield' },
    { who: candidates.find((c) => c.decision === 'rejected') && candidates.find((c) => c.decision === 'rejected').name, what: 'auto-rejected — below threshold', when: '3h ago', icon: 'reject' },
  ].filter((a) => a.who);

  return (
    <div className="view-scroll">
      <div className="view-inner">
        <PageHead title="Dashboard" subtitle={`${job.title} · ${job.stage} · ${job.loc}`}>
          <VButton label="Open candidate list" variant="primary" onClick={onOpenCandidates} />
        </PageHead>
        <div className="kpi-grid">
          <VStatCard value={total} label="Total candidates" caption="in this pipeline" variant="neutral" />
          <VStatCard value={shortlisted} label="Shortlisted" caption="AI says proceed" variant="skills" />
          <VStatCard value={review} label="Needs review" caption="borderline calls" variant="ats" />
          <VStatCard value={interviews.length} label="Interviews booked" caption="for this job" variant="ats" />
        </div>
        <div className="dash-cols">
          <div className="panel">
            <div className="panel-row">
              <div className="panel-titlewrap">
                <h3 className="panel-title">Top candidates</h3>
                <span className="panel-by">by {topBy === 'ats' ? 'ATS score' : 'must-have fit'}</span>
              </div>
              <div className="seg">
                <button className={'seg-btn' + (topBy === 'ats' ? ' on' : '')} onClick={() => setTopBy('ats')}>ATS</button>
                <button className={'seg-btn' + (topBy === 'fit' ? ' on' : '')} onClick={() => setTopBy('fit')}>Must-have fit</button>
              </div>
            </div>
            <div className="dash-list">
              {sorted.map((c) => {
                const m = matchCounts(c, job);
                return (
                  <button key={c.id} className="dash-cand" onClick={() => onOpenCandidate(c.id, c.jobId)}>
                    <VAvatar 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>
                    {topBy === 'ats'
                      ? <span className="dash-metric">{c.ats}<small>ATS</small></span>
                      : <span className="dash-metric">{m.must}/{m.mustTotal}<small>must</small></span>}
                    <VBadge label={VREC[c.decision].label} variant={VREC[c.decision].v} />
                  </button>
                );
              })}
              {!sorted.length && <div className="dash-empty">No candidates yet — share the apply link from Jobs.</div>}
            </div>
          </div>
          <div className="panel">
            <div className="panel-row">
              <h3 className="panel-title">Pipeline health</h3>
              <button className="link-btn" onClick={() => goTab('analytics')}>Analytics</button>
            </div>
            <div className="health">
              <div className="health-row"><span className="health-k"><Icon name="check" size={14} className="i-good" /> Clear all must-haves</span><span className="health-v">{clearAll} / {total}</span></div>
              <div className="health-row"><span className="health-k"><Icon name="proceed" size={14} className="i-good" /> Shortlisted</span><span className="health-v">{shortlisted}</span></div>
              <div className="health-row"><span className="health-k"><Icon name="caution" size={14} className="i-warn" /> Needs review</span><span className="health-v">{review}</span></div>
              <div className="health-row"><span className="health-k"><Icon name="shield" size={14} className="i-bad" /> High risk</span><span className="health-v">{candidates.filter((c) => c.risk === 'High' || c.risk === 'Critical').length}</span></div>
            </div>
            <div className="panel-divider" />
            <h3 className="panel-title" style={{ marginTop: 0 }}>Recent activity</h3>
            <div className="dash-list">
              {activity.map((a, i) => (
                <div key={i} className="activity">
                  <span className="activity-ico"><Icon name={a.icon} size={14} /></span>
                  <div className="activity-txt"><strong>{a.who}</strong> {a.what}</div>
                  <span className="activity-when">{a.when}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

/* ---------------- Pipeline (kanban) ---------------- */
const PIPE_STAGES = [
  { id: 'applied', label: 'Applied', match: () => true },
  { id: 'screen', label: 'AI Screen', match: (c) => c.decision !== 'rejected' },
  { id: 'interview', label: 'Interview', match: (c) => c.decision === 'shortlisted' },
  { id: 'offer', label: 'Offer', match: (c) => c.decision === 'shortlisted' && c.ats >= 88 },
];
function PipelineView({ job, candidates, onOpenCandidate }) {
  const cols = PIPE_STAGES.map((s) => ({ ...s, items: candidates.filter(s.match) }));
  return (
    <div className="view-scroll">
      <div className="view-inner view-wide">
        <PageHead title="Pipeline" subtitle={`${job.title} · candidate flow`} />
        <div className="kanban">
          {cols.map((col) => (
            <div key={col.id} className="kan-col">
              <div className="kan-head"><span className="kan-title">{col.label}</span><span className="kan-count">{col.items.length}</span></div>
              <div className="kan-list">
                {col.items.map((c) => (
                  <button key={c.id} className="kan-card" onClick={() => onOpenCandidate(c.id, c.jobId)}>
                    <div className="kan-card-top">
                      <VAvatar initials={c.initials} size="sm" color="charcoal" />
                      <div className="kan-card-id"><span className="kan-card-name">{c.name}</span><span className="kan-card-sub">{c.company}</span></div>
                    </div>
                    <div className="kan-card-foot">
                      <span className="kan-ats">ATS {c.ats}</span>
                      <VBadge label={c.risk} variant={VRISK[c.risk]} />
                    </div>
                  </button>
                ))}
                {!col.items.length && <div className="kan-empty">—</div>}
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

/* ---------------- Analytics ---------------- */
function AnalyticsView({ job, candidates, interviews }) {
  const total = candidates.length || 1;
  const decisions = ['shortlisted', 'borderline', 'rejected'].map((d) => ({ d, n: candidates.filter((c) => c.decision === d).length }));
  const shortlisted = decisions[0].n;
  const funnel = [
    { label: 'Applied', n: candidates.length },
    { label: 'AI Screened', n: candidates.filter((c) => c.decision !== 'rejected').length },
    { label: 'Interview', n: candidates.filter((c) => c.decision === 'shortlisted').length },
    { label: 'Offer', n: candidates.filter((c) => c.decision === 'shortlisted' && c.ats >= 88).length },
  ];
  const avgAts = Math.round(candidates.reduce((s, c) => s + c.ats, 0) / total);

  // ATS distribution buckets
  const buckets = [
    { label: '90+', lo: 90, hi: 101 }, { label: '80–89', lo: 80, hi: 90 },
    { label: '70–79', lo: 70, hi: 80 }, { label: '60–69', lo: 60, hi: 70 }, { label: '< 60', lo: 0, hi: 60 },
  ].map((b) => ({ ...b, n: candidates.filter((c) => c.ats >= b.lo && c.ats < b.hi).length }));
  const maxBucket = Math.max(1, ...buckets.map((b) => b.n));

  // must-have coverage: count missing per must-have skill
  const gapBySkill = job.mustHave.map((skill) => ({
    skill,
    missing: candidates.filter((c) => { const s = c.skillbars.find((x) => x.name === skill); return !s || s.variant === 'missing'; }).length,
  })).sort((a, b) => b.missing - a.missing);

  const clearAll = candidates.filter((c) => { const m = matchCounts(c, job); return m.mustTotal > 0 && m.must === m.mustTotal; }).length;
  const highRisk = candidates.filter((c) => c.risk === 'High' || c.risk === 'Critical').length;
  const topGap = gapBySkill[0];

  // AI insights
  const insights = [
    clearAll >= 1
      ? { tone: 'good', text: `${clearAll} of ${candidates.length} candidates clear every must-have skill — prioritise these for interviews.` }
      : { tone: 'warn', text: `No candidate clears all ${job.mustHave.length} must-haves yet. Consider widening sourcing or relaxing one requirement.` },
    topGap && topGap.missing > 0
      ? { tone: 'warn', text: `“${topGap.skill}” is the scarcest must-have — missing in ${topGap.missing} of ${candidates.length} applicants.` }
      : { tone: 'good', text: 'Must-have coverage is healthy across the pipeline.' },
    highRisk > 0
      ? { tone: 'bad', text: `${highRisk} candidate${highRisk > 1 ? 's' : ''} flagged high-risk — verify tenure and references before advancing.` }
      : { tone: 'good', text: 'No high-risk candidates currently in the pipeline.' },
    { tone: 'neutral', text: `Avg AI screen turnaround is 4.2 days — 18% faster than the previous requisition.` },
  ];
  const INS_ICON = { good: 'proceed', warn: 'caution', bad: 'shield', neutral: 'sparkles' };

  const DCOLOR = { shortlisted: 'var(--gd-success)', borderline: 'var(--gd-warning)', rejected: 'var(--gd-error)' };

  return (
    <div className="view-scroll">
      <div className="view-inner">
        <PageHead title="Analytics" subtitle={`${job.title} · pipeline insights`} />
        <div className="kpi-grid">
          <VStatCard value={`${Math.round(funnel[2].n / (funnel[0].n || 1) * 100)}%`} label="Interview rate" caption="applied → interview" variant="ats" />
          <VStatCard value={`${Math.round(funnel[3].n / (funnel[0].n || 1) * 100)}%`} label="Offer rate" caption="applied → offer" variant="skills" />
          <VStatCard value={avgAts} label="Avg ATS" caption="applicant quality" variant="ats" />
          <VStatCard value="4.2d" label="Time to screen" caption="avg AI turnaround" variant="neutral" />
        </div>

        {/* AI insights */}
        <div className="panel insights-panel">
          <div className="panel-row"><h3 className="panel-title"><Icon name="sparkles" size={15} className="i-coral" /> AI insights</h3><span className="panel-by">auto-generated</span></div>
          <div className="insights">
            {insights.map((ins, i) => (
              <div key={i} className={'insight insight-' + ins.tone}>
                <span className="insight-ico"><Icon name={INS_ICON[ins.tone]} size={15} /></span>
                <span className="insight-text">{ins.text}</span>
              </div>
            ))}
          </div>
        </div>

        <div className="dash-cols">
          <div className="panel">
            <h3 className="panel-title">Hiring funnel</h3>
            <div className="funnel">
              {funnel.map((f) => (
                <div key={f.label} className="funnel-row">
                  <span className="funnel-label">{f.label}</span>
                  <div className="funnel-bar-wrap"><div className="funnel-bar" style={{ width: `${Math.max(f.n / (funnel[0].n || 1) * 100, 4)}%` }}>{f.n}</div></div>
                </div>
              ))}
            </div>
          </div>
          <div className="panel">
            <h3 className="panel-title">Recommendation mix</h3>
            <div className="donut-wrap">
              <Donut data={decisions} colorMap={DCOLOR} total={total} />
              <div className="donut-legend">
                {decisions.map((d) => (
                  <div key={d.d} className="legend-row"><span className="legend-dot" style={{ background: DCOLOR[d.d] }} /><span className="legend-label">{VREC[d.d].label}</span><span className="legend-n">{d.n}</span></div>
                ))}
              </div>
            </div>
          </div>
        </div>

        <div className="dash-cols">
          <div className="panel">
            <h3 className="panel-title">ATS score distribution</h3>
            <div className="hist">
              {buckets.map((b) => (
                <div key={b.label} className="hist-col">
                  <div className="hist-bar-wrap"><div className="hist-bar" style={{ height: `${b.n / maxBucket * 100}%` }}>{b.n > 0 && <span className="hist-n">{b.n}</span>}</div></div>
                  <span className="hist-label">{b.label}</span>
                </div>
              ))}
            </div>
          </div>
          <div className="panel">
            <h3 className="panel-title">Must-have skill gaps</h3>
            <div className="skilldemand">
              {gapBySkill.map((g) => (
                <div key={g.skill} className="sd-row">
                  <span className="sd-name">{g.skill}</span>
                  <div className="sd-bar-wrap"><div className="sd-bar" style={{ width: `${g.missing / total * 100}%`, background: g.missing > total / 2 ? 'var(--gd-error)' : 'var(--gd-warning)' }} /></div>
                  <span className="sd-n">{g.missing}</span>
                </div>
              ))}
            </div>
            <div className="sd-foot">Applicants missing each required skill (of {candidates.length})</div>
          </div>
        </div>
      </div>
    </div>
  );
}
function Donut({ data, colorMap, total }) {
  const r = 52, c = 2 * Math.PI * r;
  let acc = 0;
  return (
    <svg width="140" height="140" viewBox="0 0 140 140" className="donut">
      <circle cx="70" cy="70" r={r} fill="none" stroke="var(--gd-n200)" strokeWidth="18" />
      {data.map((d) => {
        const frac = d.n / total;
        const dash = frac * c;
        const el = <circle key={d.d} cx="70" cy="70" r={r} fill="none" stroke={colorMap[d.d]} strokeWidth="18" strokeDasharray={`${dash} ${c}`} strokeDashoffset={-acc * c} transform="rotate(-90 70 70)" />;
        acc += frac;
        return el;
      })}
      <text x="70" y="66" textAnchor="middle" className="donut-num">{total}</text>
      <text x="70" y="84" textAnchor="middle" className="donut-cap">candidates</text>
    </svg>
  );
}

/* ---------------- Settings (with MCP) ---------------- */
const MCP_SERVERS = [
  { id: 'gmail', name: 'Gmail', desc: 'Send and track candidate emails', icon: 'mail', accent: '#ea4335', connected: true },
  { id: 'gcal', name: 'Google Calendar', desc: 'Schedule interviews and sync availability', icon: 'calendar', accent: '#1a73e8', connected: true },
  { id: 'claude', name: 'Claude', desc: 'AI screening, summaries and copilot answers', icon: 'sparkles', accent: '#d97757', connected: true },
  { id: 'slack', name: 'Slack', desc: 'Notify hiring channels on stage changes', icon: 'zap', accent: '#611f69', connected: false },
  { id: 'drive', name: 'Google Drive', desc: 'Store resumes and offer documents', icon: 'fileText', accent: '#0f9d58', connected: false },
  { id: 'greenhouse', name: 'Greenhouse', desc: 'Two-way sync with your ATS of record', icon: 'globe', accent: '#1f9e6b', connected: false },
];
function SettingsView() {
  const [servers, setServers] = React.useState(MCP_SERVERS);
  const toggle = (id) => setServers((s) => s.map((x) => x.id === id ? { ...x, connected: !x.connected } : x));
  const connectedCount = servers.filter((s) => s.connected).length;
  return (
    <div className="view-scroll">
      <div className="view-inner">
        <PageHead title="Settings" subtitle="Workspace, AI scoring & integrations" />

        <div className="panel">
          <div className="panel-row">
            <div className="panel-titlewrap">
              <h3 className="panel-title"><Icon name="link" size={15} className="i-coral" /> MCP connections</h3>
              <span className="panel-by">{connectedCount} connected · Model Context Protocol</span>
            </div>
            <VButton label="Add server" variant="secondary" />
          </div>
          <div className="mcp-grid">
            {servers.map((s) => (
              <div key={s.id} className={'mcp-card' + (s.connected ? ' is-on' : '')}>
                <div className="mcp-top">
                  <span className="mcp-ico" style={{ background: s.accent + '1a', color: s.accent }}><Icon name={s.icon} size={18} /></span>
                  <span className={'mcp-status' + (s.connected ? ' on' : '')}>{s.connected ? <><span className="mcp-dot" /> Connected</> : 'Not connected'}</span>
                </div>
                <div className="mcp-name">{s.name}</div>
                <div className="mcp-desc">{s.desc}</div>
                <button className={'mcp-btn' + (s.connected ? ' is-on' : '')} onClick={() => toggle(s.id)}>
                  {s.connected ? 'Disconnect' : 'Connect'}
                </button>
              </div>
            ))}
          </div>
        </div>

        <div className="dash-cols">
          <div className="panel set-panel">
            <h3 className="panel-title">AI scoring</h3>
            <div className="set-row"><div><div className="set-k">Auto-reject threshold</div><div className="set-d">Candidates below this ATS are auto-rejected</div></div><span className="set-v">60</span></div>
            <div className="set-row"><div><div className="set-k">Must-have weighting</div><div className="set-d">How heavily required skills affect the score</div></div><VBadge label="High" variant="success" /></div>
            <div className="set-row"><div><div className="set-k">Risk flagging</div><div className="set-d">Surface tenure & verification risks</div></div><VBadge label="Enabled" variant="success" /></div>
          </div>
          <div className="panel set-panel">
            <h3 className="panel-title">Workspace</h3>
            <div className="set-row"><div><div className="set-k">Team members</div><div className="set-d">People with access to this workspace</div></div><span className="set-v">6</span></div>
            <div className="set-row"><div><div className="set-k">Default landing</div><div className="set-d">Opens on sign-in</div></div><span className="set-v">Candidates</span></div>
            <div className="set-row"><div><div className="set-k">Data region</div><div className="set-d">Where candidate data is stored</div></div><VBadge label="EU" variant="neutral" /></div>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { DashboardView, PipelineView, AnalyticsView, SettingsView, PageHead });