/* ============================================================
   Lectual CRM — views: OpsHome (C1), Pipeline (C2), LeadDetail (C3)
   ============================================================ */
const LEADS_ALL = window.LECTUAL_LEADS;
const STAGES = window.LECTUAL_STAGES;
const AGENDA = window.LECTUAL_AGENDA;
const ACTIVITY = window.LECTUAL_ACTIVITY;
const STALLED = window.LECTUAL_STALLED;
const PRACTICE = window.LECTUAL_PRACTICE;
const stageById = (id) => STAGES.find((s) => s.id === id) || STAGES[0];
const fmt$ = (n) => '$' + (n >= 1000 ? (n / 1000).toFixed(n % 1000 ? 1 : 0) + 'k' : n);

/* ====================== C1 · OPERATIONS HOME ====================== */
/* Optional per-deployment overrides (kept backward compatible — defaults
   reproduce the original Dana/Maya copy exactly when no globals are set). */
const VIEW_USER = window.LECTUAL_USER || { first: 'Dana' };
const VIEW_FIRST = VIEW_USER.first || 'Dana';
const BRIEFING = window.LECTUAL_BRIEFING || {
  ctaLeadId: 'maya', ctaName: 'Maya',
  priorities: [
    { b: 'Maya Okonkwo (Pathset)', t: 'requested a call and is launching in ~6 weeks — one clearance flag stands between her and a clean filing. Highest-value quick win today.' },
    { b: 'Theo Nguyen (Cadence)', t: 'has an open proposal at $7.8k and hinted at EU expansion. A nudge on Madrid Protocol could expand the engagement.' },
    { b: '2 leads have gone quiet', t: 'for 2+ days. Both are nurture-tier — a one-tap re-engagement keeps them warm without your time.' },
  ],
};
const FIRST_MTG = (AGENDA[0] && AGENDA[0].time) || '10:30';
const TONE = {
  plain:  { greet: `Good morning, ${VIEW_FIRST}.`, lead: `Two things deserve your attention before your ${FIRST_MTG}.`, cta: `Open ${BRIEFING.ctaName}’s file` },
  warm:   { greet: `Morning, ${VIEW_FIRST} — here’s your day.`, lead: `A couple of moments worth a few minutes before your ${FIRST_MTG}.`, cta: `Say hi to ${BRIEFING.ctaName}` },
  direct: { greet: `${VIEW_FIRST} — start here.`, lead: `Three priorities. Clear these before ${FIRST_MTG}.`, cta: `Open ${BRIEFING.ctaName}` },
};
function OpsHome({ go, pushToast, tone = 'plain' }) {
  const T = TONE[tone] || TONE.plain;
  const active = LEADS_ALL.filter((l) => !['client'].includes(l.stage));
  const pipelineVal = LEADS_ALL.reduce((s, l) => s + l.value, 0);
  const avg = Math.round(LEADS_ALL.reduce((s, l) => s + l.score, 0) / LEADS_ALL.length);
  const stalled = STALLED.map((id) => LEADS_ALL.find((l) => l.id === id));
  const [busy, setBusy] = useState(false);
  const regen = () => { setBusy(true); pushToast('Regenerating your briefing…'); setTimeout(() => setBusy(false), 1000); };

  return (
    <div className="ops scrollarea scrollbar-thin">
      <div className="ops-grid">
        {/* LEFT */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
          <div className="briefing">
            <div className="bh">
              <span className="ai-ic">{I.spark}</span>
              <span className="t">Morning briefing</span>
              <span className="stamp">Today · 8:42 AM · {AGENDA.length} on calendar</span>
            </div>
            <div className={busy ? 'shim' : ''} style={{ opacity: busy ? 0.55 : 1, transition: 'opacity .2s', borderRadius: 10 }}>
              <div className="greet">{T.greet}</div>
              <p>
                You closed yesterday with <b>{LEADS_ALL.filter((l) => l.status === 'Hot').length} hot leads</b> in motion and a healthy <b>{avg} average readiness</b> across the pipeline. {T.lead}
              </p>
              <div className="pri">
                {BRIEFING.priorities.map((p, i) => (
                  <div className="pr" key={i}><span className="n">{i + 1}</span><span><b>{p.b}</b> {p.t}</span></div>
                ))}
              </div>
              <div className="bfoot">
                <button className="btn btn-primary btn-sm" onClick={() => go('lead', BRIEFING.ctaLeadId)}>{T.cta} {I.arrow}</button>
                <button className="btn btn-secondary btn-sm" onClick={() => go('pipeline')}>Review pipeline</button>
                <button className="btn btn-ghost btn-sm" onClick={regen} style={{ marginLeft: 'auto' }}>↻ Regenerate</button>
              </div>
            </div>
          </div>

          <div className="colcard agenda">
            <div className="ch"><span className="t">Today’s agenda</span><button className="more" onClick={() => pushToast('Opening calendar…')}>Full calendar</button></div>
            {AGENDA.map((a, i) => (
              <div className="ag" key={i} onClick={() => go('lead', a.leadId)}>
                <div className="tm"><b>{a.time}</b><span>{a.dur}</span></div>
                <div><div className="ki">{a.kind}</div><div className="nm">{a.who}</div><div className="co">{a.company}</div></div>
                {a.join
                  ? <button className="btn btn-secondary btn-sm" onClick={(e) => { e.stopPropagation(); pushToast('Joining call…'); }}>Join</button>
                  : <span className="tag mono" style={{ fontSize: 10 }}>Prep</span>}
              </div>
            ))}
          </div>
        </div>

        {/* RIGHT */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
          <div className="kpis">
            <div className="kpi"><div className="l">Active leads</div><b>{active.length}</b><div className="d up">▲ 5 vs last wk</div></div>
            <div className="kpi"><div className="l">Meetings today</div><b>{AGENDA.length}</b><div className="d flat">2 need prep</div></div>
            <div className="kpi"><div className="l">Stalled ≥ 2d</div><b style={{ color: 'var(--warning)' }}>{stalled.length}</b><div className="d dn">needs a nudge</div></div>
            <div className="kpi"><div className="l">Open pipeline</div><b>{fmt$(pipelineVal)}</b><div className="d up">▲ 12%</div></div>
          </div>

          <div className="colcard stalled">
            <div className="ch"><span style={{ color: 'var(--warning)', width: 18, height: 18, display: 'grid', placeItems: 'center' }}>{I.alert}</span><span className="t">Stalled leads</span><button className="more" onClick={() => { pushToast('Enrolled 2 leads in re-engagement'); }}>Re-engage all</button></div>
            {stalled.map((l) => (
              <div className="sr" key={l.id} onClick={() => go('lead', l.id)}>
                <div className="av" style={{ background: l.avatarColor }}>{l.name[0]}</div>
                <div><div className="nm">{l.name}</div><div className="co" style={{ fontSize: 12, color: 'var(--ink-3)' }}>{l.company} · {stageById(l.stage).name}</div></div>
                <div className="meta">{l.lastDays}d quiet</div>
              </div>
            ))}
          </div>

          <div className="colcard">
            <div className="ch"><span className="t">Activity</span><button className="more" onClick={() => pushToast('Opening full activity log…')}>See all</button></div>
            <div className="feed">
              {ACTIVITY.map((e, i) => {
                const m = evMeta[e.type] || evMeta.enter;
                return (
                  <div className="fr" key={i}>
                    <span className="ic" style={{ background: m.bg, color: m.fg }}>{m.ic}</span>
                    <div><div className="tt">{e.t}</div><div className="mt">{e.w} ago · {e.actor}</div></div>
                  </div>
                );
              })}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

/* ====================== C2 · PIPELINE BOARD ====================== */
function urgencyBar(leads) {
  const c = { high: 0, med: 0, low: 0 };
  leads.forEach((l) => c[l.urgency]++);
  const tot = leads.length || 1;
  return (
    <div className="urg" title={`${c.high} high · ${c.med} med · ${c.low} low`}>
      {Array.from({ length: Math.max(1, c.high) }).slice(0, c.high).map((_, i) => <i key={'h' + i} className="h" />)}
      {Array.from({ length: c.med }).map((_, i) => <i key={'m' + i} className="m" />)}
      {Array.from({ length: c.low }).map((_, i) => <i key={'l' + i} className="l" />)}
      {leads.length === 0 && <i />}
    </div>
  );
}

function Pipeline({ go, pushToast }) {
  const [mode, setMode] = useState('board');
  const [leads, setLeads] = useState(LEADS_ALL.map((l) => ({ ...l })));
  const [fPractice, setFPractice] = useState('All');
  const [fUrg, setFUrg] = useState('All');
  const [drag, setDrag] = useState(null);
  const [over, setOver] = useState(null);
  const [sort, setSort] = useState({ k: 'score', dir: -1 });

  const filtered = leads.filter((l) =>
    (fPractice === 'All' || l.practice === fPractice) &&
    (fUrg === 'All' || l.urgency === fUrg.toLowerCase()));

  const move = (id, toStage) => {
    const lead = leads.find((l) => l.id === id);
    if (!lead || lead.stage === toStage) return;
    setLeads((cur) => cur.map((l) => l.id === id ? { ...l, stage: toStage } : l));
    pushToast(`${lead.name} → ${stageById(toStage).name}`);
  };

  const sortBy = (k) => setSort((s) => ({ k, dir: s.k === k ? -s.dir : -1 }));
  const sorted = [...filtered].sort((a, b) => {
    const va = a[sort.k], vb = b[sort.k];
    if (typeof va === 'number') return (va - vb) * sort.dir;
    return String(va).localeCompare(String(vb)) * sort.dir;
  });

  return (
    <div className="pipe">
      <div className="filterbar">
        <div className="seg-toggle">
          <button className={mode === 'board' ? 'on' : ''} onClick={() => setMode('board')}>{I.pipe} Board</button>
          <button className={mode === 'table' ? 'on' : ''} onClick={() => setMode('table')}>{I.leads} Table</button>
        </div>
        <div style={{ width: 1, height: 24, background: 'var(--border-2)' }} />
        <button className={'chip' + (fPractice === 'All' ? ' active' : '')} onClick={() => setFPractice('All')}>All practices</button>
        {PRACTICE.map((p) => <button key={p} className={'chip' + (fPractice === p ? ' active' : '')} onClick={() => setFPractice(p)}>{p}</button>)}
        <div style={{ width: 1, height: 24, background: 'var(--border-2)' }} />
        {['All', 'High', 'Med', 'Low'].map((u) => <button key={u} className={'chip' + (fUrg === u ? ' active' : '')} onClick={() => setFUrg(u)}>{u === 'All' ? 'Any urgency' : u}</button>)}
        <div className="sp" />
        <span className="tag mono" style={{ fontSize: 11 }}>{filtered.length} of {leads.length}</span>
        <button className="btn btn-primary btn-sm" onClick={() => pushToast('New intake form opened')}>{I.plus} New intake</button>
      </div>

      {mode === 'board' ? (
        <div className="board scrollbar-thin">
          {STAGES.map((st) => {
            const colLeads = filtered.filter((l) => l.stage === st.id);
            const val = colLeads.reduce((s, l) => s + l.value, 0);
            return (
              <div className="kcol" key={st.id}>
                <div className="kh">
                  <div className="ti"><span className="dot" style={{ background: st.dot }} /><span className="nm">{st.name}</span><span className="ct">{colLeads.length}</span></div>
                  <div className="val">{val ? fmt$(val) + ' open' : 'No value yet'}</div>
                  {urgencyBar(colLeads)}
                </div>
                <div
                  className={'klist scrollbar-thin' + (over === st.id ? ' dragover' : '')}
                  onDragOver={(e) => { e.preventDefault(); setOver(st.id); }}
                  onDragLeave={() => setOver((o) => o === st.id ? null : o)}
                  onDrop={(e) => { e.preventDefault(); if (drag) move(drag, st.id); setOver(null); setDrag(null); }}
                >
                  {colLeads.map((l) => (
                    <div
                      key={l.id} className={'kcard' + (drag === l.id ? ' dragging' : '')}
                      draggable
                      onDragStart={() => setDrag(l.id)}
                      onDragEnd={() => { setDrag(null); setOver(null); }}
                      onClick={() => go('lead', l.id)}
                    >
                      <div className="top">
                        <span className="av" style={{ background: l.avatarColor }}>{l.name[0]}</span>
                        <div><div className="nm">{l.name}</div><div className="co">{l.company}</div></div>
                        <span className="sc" style={{ color: bandColor(l.score) }}>{l.score}</span>
                      </div>
                      <div className="meta">
                        <span className="pchip">{l.practice}</span>
                        <span className="val">{fmt$(l.value)}</span>
                        <span className="udot" style={{ background: l.urgency === 'high' ? 'var(--danger)' : l.urgency === 'med' ? 'var(--warning)' : 'var(--protected)' }} />
                      </div>
                    </div>
                  ))}
                  {colLeads.length === 0 && <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--ink-3)', textAlign: 'center', padding: '14px 0' }}>—</div>}
                </div>
              </div>
            );
          })}
        </div>
      ) : (
        <div className="ptable scrollbar-thin">
          <table className="ptbl">
            <thead><tr>
              {[['name', 'Lead'], ['stage', 'Stage'], ['practice', 'Practice'], ['score', 'Readiness'], ['value', 'Value'], ['status', 'Status']].map(([k, lbl]) => (
                <th key={k} onClick={() => sortBy(k)}>{lbl}<span className="ar">{sort.k === k ? (sort.dir < 0 ? '↓' : '↑') : '↕'}</span></th>
              ))}
            </tr></thead>
            <tbody>
              {sorted.map((l) => {
                const st = stageById(l.stage);
                return (
                  <tr key={l.id} onClick={() => go('lead', l.id)}>
                    <td><div className="tname"><span className="av" style={{ background: l.avatarColor }}>{l.name[0]}</span><div><div className="nm">{l.name}</div><div className="co">{l.company} · {l.sector}</div></div></div></td>
                    <td><span className="stagepill"><span className="dot" style={{ background: st.dot }} />{st.name}</span></td>
                    <td>{l.practice}</td>
                    <td><span className="scn" style={{ color: bandColor(l.score) }}>{l.score}</span></td>
                    <td className="mono" style={{ fontSize: 13 }}>{fmt$(l.value)}</td>
                    <td><span className={'stbadge ' + l.status}>{l.status}</span></td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
      )}
    </div>
  );
}

/* ====================== C3 · LEAD DETAIL ====================== */
function LeadDetail({ leadId, go, pushToast }) {
  const base = LEADS_ALL.find((l) => l.id === leadId) || LEADS_ALL[0];
  const [stage, setStage] = useState(base.stage);
  const [tags, setTags] = useState(base.tags);
  const [busy, setBusy] = useState(false);
  const [onCall, setOnCall] = useState(false);
  useEffect(() => { setStage(base.stage); setTags(base.tags); setOnCall(false); }, [leadId]);

  const dims = Object.entries(base.dims);
  const regen = () => { setBusy(true); pushToast('Regenerating brief…'); setTimeout(() => setBusy(false), 950); };
  const removeTag = (t) => { setTags((c) => c.filter((x) => x !== t)); pushToast('Tag removed'); };
  const b = base.brief;

  return (
    <div className="lead3">
      {/* LEFT · identity */}
      <div className="ident scrollbar-thin">
        <div className="big-av" style={{ background: base.avatarColor }}>{base.name[0]}</div>
        <div className="nm">{base.name}</div>
        <div className="co">{base.company} · {base.sector}</div>
        <div style={{ marginTop: 12 }}><span className={'stbadge ' + base.status}>{base.status}</span> <span className="tag mono" style={{ fontSize: 10, marginLeft: 4 }}>{base.qualified}</span></div>

        <div className="meta-list">
          <div className="ml">{I.mail}<span className="v">{base.email}</span></div>
          <div className="ml">{I.phone}<span className="v">{base.phone}</span></div>
          <div className="ml">{I.building}<span className="v">{base.practice} · {fmt$(base.value)} est.</span></div>
          <div className="ml">{I.arrow}<span className="v">via {base.source}</span></div>
          <div className="ml">{I.user}<span className="v">{base.owner === '—' ? 'Unassigned' : 'Owner ' + base.owner}</span></div>
        </div>

        <div className="blk"><div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '.1em', textTransform: 'uppercase', color: 'var(--ink-3)', marginBottom: 9 }}>Tags</div>
          <div className="tageditor">
            {tags.map((t) => <span className="tagx" key={t}>{t}<span className="x" onClick={() => removeTag(t)}>×</span></span>)}
            <span className="tagx add" onClick={() => pushToast('Tag picker…')}>+ Add</span>
          </div>
        </div>
      </div>

      {/* CENTER */}
      <div className="center scrollbar-thin">
        <div className="scorecard">
          <div className="ct">Readiness breakdown</div>
          <div className="breakdown">
            <div style={{ textAlign: 'center' }}>
              <Gauge value={base.score} />
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '.1em', textTransform: 'uppercase', color: bandColor(base.score), fontWeight: 700, marginTop: 6 }}>{bandName(base.score)}</div>
            </div>
            <div className="dims">
              {dims.map(([k, v]) => (
                <div className="dimrow" key={k}>
                  <span className="dn">{k}</span>
                  <span className="track"><span className="fill" style={{ width: v + '%', background: bandColor(v) }} /></span>
                  <span className="pv">{v}</span>
                </div>
              ))}
            </div>
          </div>
        </div>

        <div className="aicard">
          <div className="ct"><span className="ai-ic">{I.spark}</span>AI summary &amp; red flags<button className="regen" onClick={regen}>↻ {busy ? 'Generating…' : 'Regenerate'}</button></div>
          <div className={busy ? 'shim' : ''} style={{ opacity: busy ? 0.5 : 1, transition: 'opacity .2s', borderRadius: 8 }}>
            <div className="summary">{base.summary}</div>
            <div className="flags">
              {base.redFlags.length === 0
                ? <div className="flag none"><span className="fi" style={{ display: 'grid', placeItems: 'center' }}>{I.check}</span><span>No blocking issues found — clean candidate to advance.</span></div>
                : base.redFlags.map((f, i) => (
                  <div className={'flag ' + f.sev} key={i}><span className="fi" style={{ display: 'grid', placeItems: 'center' }}>{I.flag}</span><span className="ft">{f.t}</span></div>
                ))}
            </div>
            <div className="opener">“{b.opener}”</div>
            <div className="pkg"><span className="pl">Recommended package</span><span className="pv">{b.pkg}</span></div>
          </div>
        </div>

        <div className="tlcard">
          <div className="ct">Activity timeline</div>
          <div className="timeline">
            {base.timeline.map((e, i) => {
              const m = evMeta[e.type] || evMeta.enter;
              return (
                <div className="tlrow" key={i}>
                  <span className="tdot" style={{ background: m.bg, color: m.fg }}>{m.ic}</span>
                  <div><div className="tt">{e.t}</div><div className="tm">{e.w} ago · <span className="actor">{e.actor}</span></div></div>
                </div>
              );
            })}
          </div>
        </div>
      </div>

      {/* RIGHT · actions rail */}
      <div className="rail3 scrollbar-thin">
        <div className="blk">
          <div className="lab">Stage</div>
          <div className="stage-select">
            {STAGES.slice(0, 7).map((s) => (
              <div key={s.id} className={'stage-opt' + (stage === s.id ? ' on' : '')} onClick={() => { setStage(s.id); pushToast(`Moved to ${s.name}`); }}>
                <span className="dot" style={{ background: s.dot }} />{s.name}
              </div>
            ))}
          </div>
        </div>
        <div className="blk">
          <div className="lab">Actions</div>
          <div className="act-list">
            <button className="actbtn" onClick={() => setOnCall((v) => !v)}>{I.phone}{onCall ? 'On call · live' : 'Start discovery call'}</button>
            <button className="actbtn" onClick={() => pushToast('Intake link copied')}>{I.link}Send intake link</button>
            <button className="actbtn" onClick={() => pushToast('Enrolled in drip sequence')}>{I.drip}Enroll in drip</button>
            <button className="actbtn" onClick={() => pushToast('Task created')}>{I.task}Quick task</button>
            <button className="actbtn" onClick={() => pushToast('Opening discovery tool…')}>{I.doc}Discovery tool</button>
          </div>
        </div>
        <button className="btn btn-primary btn-block" onClick={() => pushToast('Proposal drafted')}>Send proposal {I.arrow}</button>
      </div>
    </div>
  );
}

Object.assign(window, { OpsHome, Pipeline, LeadDetail });