// ==================== Lead Detail Drawer ====================

function LeadDetail({ lead, onClose, onNext, onPrev }) {
  const [tab, setTab] = React.useState("quiz1");
  const [railTab, setRailTab] = React.useState("notes");
  const [whatIf, setWhatIf] = React.useState(false);
  const [quizEdits, setQuizEdits] = React.useState({});
  const [reenrichSpin, setReenrichSpin] = React.useState(false);
  const [aiRegenSpin, setAiRegenSpin] = React.useState(false);

  const baseScore = lead.score;
  const adjusted = React.useMemo(() => {
    let delta = 0;
    Object.values(quizEdits).forEach(v => { delta += v; });
    return Math.max(0, Math.min(100, baseScore + delta));
  }, [quizEdits, baseScore]);

  return (
    <>
      <div className="drawer-backdrop" onClick={onClose} />
      <div className="drawer" role="dialog">
        <div className="drawer__head">
          <div style={{flex:1, minWidth:0}}>
            <div className="lead-head__row">
              <div>
                <div className="lead-head__name">{lead.name}</div>
                <div className="lead-head__meta">
                  <span>{lead.title} · <b>{lead.company}</b></span>
                  <span><a>{lead.email}</a></span>
                  <span className="mono">{lead.phone}</span>
                  <span>Submitted {relTime(lead.submittedAt)}</span>
                </div>
              </div>
              <div className="lead-head__actions">
                <button className="btn"><Icon name="chevron" size={12} style={{transform:"rotate(180deg)"}}/> <span onClick={onPrev}>Prev</span></button>
                <button className="btn"><span onClick={onNext}>Next</span> <Icon name="chevron" size={12}/></button>
                <div style={{width:6}}/>
                <button className="btn"><Icon name="phone" size={13}/> Call</button>
                <button className="btn"><Icon name="mail" size={13}/> Email</button>
                <button className="btn"><Icon name="calendar" size={13}/> Schedule</button>
                <button className="btn btn--primary"><Icon name="file" size={13}/> Prep packet</button>
                <button className="iconbtn" onClick={onClose} title="Close (Esc)" style={{width:28, height:28}}>
                  <Icon name="x" size={15} />
                </button>
              </div>
            </div>

            <div style={{display:"flex", gap:18, marginTop:14, alignItems:"center"}}>
              <OutcomePill outcome={lead.outcome} />
              <div style={{display:"flex", alignItems:"center", gap:8}}>
                <span style={{fontSize:11, color:"var(--ink-500)", textTransform:"uppercase", letterSpacing:"0.1em"}}>Score</span>
                <span className="display" style={{fontSize:28, color:"var(--navy-900)"}}>{whatIf ? adjusted : baseScore}</span>
                {whatIf && adjusted !== baseScore && (
                  <span className={adjusted > baseScore ? "quiz-foot__delta" : "quiz-foot__delta quiz-foot__delta--down"}>
                    {adjusted > baseScore ? "+" : ""}{adjusted - baseScore} vs baseline
                  </span>
                )}
              </div>
              <div style={{display:"flex", alignItems:"center", gap:6}}>
                <span style={{fontSize:11, color:"var(--ink-500)", textTransform:"uppercase", letterSpacing:"0.1em"}}>Assigned</span>
                <span style={{display:"inline-flex", alignItems:"center", gap:6, padding:"3px 7px", border:"1px dashed var(--border)", borderRadius:4, cursor:"pointer"}}>
                  <Avatar user={lead.assignee} size={18} />
                  <span style={{fontSize:12}}>{lead.assignee?.name || "Unassigned"}</span>
                  <Icon name="down" size={11} style={{color:"var(--ink-400)"}}/>
                </span>
              </div>
              <div style={{display:"flex", alignItems:"center", gap:6}}>
                <span style={{fontSize:11, color:"var(--ink-500)", textTransform:"uppercase", letterSpacing:"0.1em"}}>Status</span>
                <StatusPill status={lead.status} editable />
              </div>
              <div style={{marginLeft:"auto", display:"flex", gap:6, alignItems:"center"}}>
                {lead.tags.map(t => <TagChip key={t}>{t}</TagChip>)}
                <button className="btn btn--sm btn--ghost"><Icon name="plus" size={11}/> tag</button>
                <div className="chip" title="Referral source">
                  <Icon name="link" size={11} /> {lead.source.utm_source}/{lead.source.utm_campaign}
                </div>
              </div>
            </div>
          </div>
        </div>

        <div className="drawer__body">
          <div className="drawer__left">
            <AiAnalysisCard spin={aiRegenSpin} onRegen={() => { setAiRegenSpin(true); setTimeout(() => setAiRegenSpin(false), 1200); }} version={lead.aiVersion} />
            <ApolloCard lead={lead} spin={reenrichSpin} onReenrich={() => { setReenrichSpin(true); setTimeout(() => setReenrichSpin(false), 1000); }} />

            <div className="card">
              <div className="card__head">
                <Icon name="file" size={13} />
                <div className="card__title">Quiz results</div>
                <span className="card__meta">Part 1 · 6 questions &nbsp;·&nbsp; Part 2 · 22 questions &nbsp;·&nbsp; base score <b>{baseScore}</b></span>
                <div className="card__actions">
                  <label style={{display:"inline-flex", alignItems:"center", gap:6, fontSize:11.5, color:"var(--ink-500)"}}>
                    <input type="checkbox" checked={whatIf} onChange={e => setWhatIf(e.target.checked)} />
                    <span>"What if" mode</span>
                  </label>
                </div>
              </div>
              <div className="quiz-tabs">
                <div className={cx("quiz-tab", tab === "quiz1" && "quiz-tab--active")} onClick={() => setTab("quiz1")}>
                  Part 1 · Qualification
                </div>
                <div className={cx("quiz-tab", tab === "quiz2" && "quiz-tab--active")} onClick={() => setTab("quiz2")}>
                  Part 2 · Detailed fit
                </div>
                <div style={{marginLeft:"auto", padding:"8px 14px", fontSize:11.5, color:"var(--ink-500)"}}>
                  {tab === "quiz1" ? "Outcome gate" : `${lead.quiz2.filter(q => q.flag).length} red-flag answers`}
                </div>
              </div>
              {tab === "quiz1" ? (
                lead.quiz1.map((q,i) => (
                  <div key={i} className="quiz-row">
                    <div>
                      <div className="quiz-row__q">{i+1}. {q.q}</div>
                      <div className="quiz-row__a">Answer: {q.a}</div>
                    </div>
                    <div className="quiz-row__pts">{q.points} pts</div>
                    <div className="quiz-row__edit">{whatIf && "edit"}</div>
                  </div>
                ))
              ) : (
                lead.quiz2.map((q,i) => (
                  <div key={i} className={cx("quiz-row", q.flag && "quiz-row--flag")}>
                    <div>
                      <div className="quiz-row__q">
                        {q.flag && <Icon name="warn" size={11} style={{color:"var(--stop-700)", marginRight:4}}/>}
                        {i+1}. {q.q}
                      </div>
                      <div className="quiz-row__a">Answer: {q.a}</div>
                    </div>
                    <div className="quiz-row__pts">{q.points} pts</div>
                    <div className="quiz-row__edit"
                         onClick={() => whatIf && setQuizEdits(e => ({ ...e, [i]: ((e[i]||0) + 3) % 9 - 3 }))}>
                      {whatIf && (quizEdits[i] !== undefined ? `${quizEdits[i] > 0 ? "+" : ""}${quizEdits[i]}` : "edit")}
                    </div>
                  </div>
                ))
              )}
              {whatIf && (
                <div className="quiz-foot">
                  <span>What-if score:</span>
                  <span className="display" style={{fontSize:20, color:"var(--navy-900)"}}>{adjusted}</span>
                  <span className={adjusted >= baseScore ? "quiz-foot__delta" : "quiz-foot__delta quiz-foot__delta--down"}>
                    {adjusted >= baseScore ? "+" : ""}{adjusted - baseScore} from baseline
                  </span>
                  <span style={{marginLeft:"auto", color:"var(--ink-500)", fontSize:11.5}}>click "edit" on any Part 2 row to cycle through point adjustments</span>
                </div>
              )}
            </div>

            <AttachmentsCard />
            <ComplianceCard />
          </div>

          <div className="drawer__right">
            <div className="rail-tabs">
              <div className={cx("rail-tab", railTab === "notes" && "rail-tab--active")} onClick={() => setRailTab("notes")}>Notes</div>
              <div className={cx("rail-tab", railTab === "activity" && "rail-tab--active")} onClick={() => setRailTab("activity")}>Activity</div>
              <div className={cx("rail-tab", railTab === "tasks" && "rail-tab--active")} onClick={() => setRailTab("tasks")}>Tasks</div>
              <div className={cx("rail-tab", railTab === "related" && "rail-tab--active")} onClick={() => setRailTab("related")}>Related</div>
            </div>
            {railTab === "notes"    && <NotesRail />}
            {railTab === "activity" && <ActivityRail />}
            {railTab === "tasks"    && <TasksRail />}
            {railTab === "related"  && <RelatedRail lead={lead} />}
          </div>
        </div>
      </div>
    </>
  );
}

// --- Cards ---

function AiAnalysisCard({ spin, onRegen, version }) {
  const a = APP_DATA.SAMPLE_AI_ANALYSIS;
  return (
    <div className="card">
      <div className="card__head">
        <Icon name="sparkle" size={13} style={{color:"var(--gold-600)"}}/>
        <div className="card__title">AI analysis</div>
        <span className="card__meta">v{version} · generated by Claude · context window 14.2k tokens</span>
        <div className="card__actions">
          <button className="btn btn--sm"><Icon name="download" size={11}/> Markdown</button>
          <button className="btn btn--sm" onClick={onRegen} disabled={spin}>
            <Icon name="refresh" size={11} style={spin ? {animation:"spin 1s linear infinite"} : undefined}/>
            {spin ? "Regenerating…" : "Regenerate"}
          </button>
        </div>
      </div>
      <div className="ai-banner">
        <Icon name="sparkle" size={11} />
        <span>Analysis uses the <b>attorney-v3</b> system prompt · last updated Mar 28</span>
        <span style={{marginLeft:"auto"}}>Confidence <b>0.86</b></span>
      </div>
      <div className="card__body">
        <div className="ai-section">
          <div className="ai-section__label">Program fit</div>
          <div className="ai-section__body">{a.programFit}</div>
        </div>
        <div className="ai-section">
          <div className="ai-section__label">Residency feasibility</div>
          <div className="ai-section__body">{a.residencyFeasibility}</div>
        </div>
        <div className="ai-section">
          <div className="ai-section__label">Risk flags</div>
          <div className="ai-section__body">{a.riskFlags}</div>
        </div>
        <div className="ai-section">
          <div className="ai-section__label">Attorney prep</div>
          <div className="ai-section__body">{a.attorneyPrep}</div>
        </div>
      </div>
    </div>
  );
}

function ApolloCard({ lead, spin, onReenrich }) {
  return (
    <div className="card">
      <div className="card__head">
        <Icon name="link" size={13} />
        <div className="card__title">Apollo enrichment</div>
        <span className="card__meta">fetched 3h ago · person + organization</span>
        <div className="card__actions">
          <button className="btn btn--sm" onClick={onReenrich} disabled={spin}>
            <Icon name="refresh" size={11} style={spin ? {animation:"spin 1s linear infinite"} : undefined}/>
            {spin ? "Re-enriching…" : "Re-enrich"}
          </button>
        </div>
      </div>
      <div className="card__body" style={{display:"grid", gridTemplateColumns:"1fr 1fr", gap:28}}>
        <div>
          <div className="ai-section__label" style={{marginBottom:8}}>Person</div>
          <dl className="kv">
            {APP_DATA.APOLLO_FIELDS.map(([k,v]) => (
              <React.Fragment key={k}><dt>{k}</dt><dd>{v}</dd></React.Fragment>
            ))}
          </dl>
        </div>
        <div>
          <div className="ai-section__label" style={{marginBottom:8}}>Organization</div>
          <dl className="kv">
            {APP_DATA.APOLLO_ORG.map(([k,v]) => (
              <React.Fragment key={k}><dt>{k}</dt><dd>{v}</dd></React.Fragment>
            ))}
          </dl>
        </div>
      </div>
    </div>
  );
}

function AttachmentsCard() {
  const files = [
    { name: "2023 Form 1040 — Arden.pdf",         size: "2.1 MB", by: "M. Rowan",  when: "yesterday" },
    { name: "Orellana K-1 partner schedule.xlsx",  size: "184 KB", by: "C. Kalu",   when: "yesterday" },
    { name: "Engagement letter — DRAFT v1.docx",   size: "72 KB",  by: "M. Rowan",  when: "today"     },
  ];
  return (
    <div className="card">
      <div className="card__head">
        <Icon name="file" size={13} />
        <div className="card__title">Attachments</div>
        <span className="card__meta">{files.length} files</span>
        <div className="card__actions">
          <button className="btn btn--sm"><Icon name="plus" size={11}/> Upload</button>
        </div>
      </div>
      <div>
        {files.map((f,i) => (
          <div key={i} style={{display:"flex", alignItems:"center", gap:10, padding:"8px 14px", borderBottom: i === files.length-1 ? 0 : "1px solid var(--border-soft)", fontSize:12.5}}>
            <Icon name="file" size={14} style={{color:"var(--ink-400)"}}/>
            <span style={{flex:1}}>{f.name}</span>
            <span className="mono" style={{color:"var(--ink-500)", fontSize:11}}>{f.size}</span>
            <span style={{color:"var(--ink-500)", fontSize:11.5}}>{f.by} · {f.when}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

function ComplianceCard() {
  const items = [
    { label: "OFAC / SDN screen",          state: "pass",    note: "Cleared via Apollo — Mar 28" },
    { label: "PEP exposure",               state: "pass",    note: "No matches" },
    { label: "Adverse media (global)",     state: "pending", note: "Awaiting ComplyAdvantage response" },
    { label: "FATCA / FBAR review",        state: "flag",    note: "Non-US exchange holdings disclosed" },
    { label: "Source-of-funds narrative",  state: "pending", note: "Not yet collected" },
  ];
  const dot = {
    pass: "var(--go-700)", pending: "var(--ink-400)", flag: "var(--stop-700)"
  };
  return (
    <div className="card">
      <div className="card__head">
        <Icon name="flag" size={13} />
        <div className="card__title">KYC / AML checklist</div>
        <span className="card__meta">Required for engagement letter</span>
        <div className="card__actions">
          <button className="btn btn--sm">Request docs</button>
        </div>
      </div>
      <div style={{padding:"4px 0"}}>
        {items.map((it,i) => (
          <div key={i} style={{display:"flex", alignItems:"center", gap:10, padding:"7px 14px", fontSize:12.5, borderBottom: i === items.length-1 ? 0 : "1px solid var(--border-soft)"}}>
            <span style={{width:8, height:8, borderRadius:"50%", background: dot[it.state]}}/>
            <span style={{flex:1}}>{it.label}</span>
            <span style={{color:"var(--ink-500)", fontSize:11.5}}>{it.note}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

// --- Rail ---

function NotesRail() {
  return (
    <>
      <div className="note-composer">
        <textarea placeholder="Leave a note… @mention a teammate" defaultValue="" />
        <div className="note-composer__row">
          <button className="btn btn--sm btn--ghost">@ mention</button>
          <button className="btn btn--sm btn--ghost">Template</button>
          <button className="btn btn--sm btn--ghost">Attach</button>
          <div style={{flex:1}}/>
          <span className="note-composer__hint"><Kbd>⌘</Kbd><Kbd>↵</Kbd> post</span>
          <button className="btn btn--sm btn--primary">Post note</button>
        </div>
      </div>
      <div className="timeline">
        {APP_DATA.SAMPLE_NOTES.map(n => (
          <div key={n.id} className="tl-item">
            <div className="tl-item__dot tl-item__dot--note" />
            <div className="tl-item__head">
              <span className="tl-item__who">{n.author}</span>
              <span className="tl-item__when">{n.when}</span>
            </div>
            <div className="tl-item__body" dangerouslySetInnerHTML={{__html: n.body.replace(/@(\w+ \w+)/g, "<span class='mention'>@$1</span>")}}/>
          </div>
        ))}
      </div>
    </>
  );
}

function ActivityRail() {
  return (
    <div className="timeline">
      {APP_DATA.SAMPLE_ACTIVITY.map((a,i) => (
        <div key={i} className="tl-item">
          <div className={cx("tl-item__dot", a.kind === "ai" && "tl-item__dot--ai", a.kind === "status" && "tl-item__dot--status", a.kind === "note" && "tl-item__dot--note")} />
          <div className="tl-item__head">
            <span className="tl-item__who">{a.actor}</span>
            <span className="tl-item__when">{a.when}</span>
          </div>
          <div className="tl-item__body">{a.text}</div>
        </div>
      ))}
    </div>
  );
}

function TasksRail() {
  const [tasks, setTasks] = React.useState(APP_DATA.SAMPLE_TASKS);
  return (
    <>
      <div style={{display:"flex", alignItems:"center", justifyContent:"space-between", marginBottom:8}}>
        <div style={{fontSize:12.5, color:"var(--ink-500)"}}>{tasks.filter(t=>!t.done).length} open · {tasks.filter(t=>t.done).length} done</div>
        <button className="btn btn--sm"><Icon name="plus" size={11}/> Task</button>
      </div>
      {tasks.map(t => (
        <div key={t.id} className={cx("task", t.done && "task--done")}>
          <div className={cx("check", t.done && "check--on")}
               onClick={() => setTasks(ts => ts.map(x => x.id === t.id ? {...x, done: !x.done} : x))}
               style={{marginTop:2}}>
            {t.done && <Icon name="check" size={10} />}
          </div>
          <div style={{flex:1}}>
            <div className="task__body">{t.body}</div>
            <div className="task__meta">
              <span>Due {t.due}</span>
              <span>·</span>
              <span>{APP_DATA.TEAM.find(u => u.initials === t.owner)?.name}</span>
            </div>
          </div>
        </div>
      ))}
      <div style={{marginTop:14, padding:"10px 12px", background:"var(--panel)", border:"1px dashed var(--border)", borderRadius:"var(--r-md)", fontSize:12}}>
        <div style={{fontWeight:500, marginBottom:4, display:"flex", alignItems:"center", gap:6}}>
          <Icon name="bolt" size={12} style={{color:"var(--gold-600)"}}/>
          Follow-up scheduler
        </div>
        <div style={{color:"var(--ink-500)"}}>Nudge the assigned attorney on Slack if no activity in <b className="mono" style={{color:"var(--ink-900)"}}>72h</b>.</div>
      </div>
    </>
  );
}

function RelatedRail({ lead }) {
  const others = APP_DATA.LEADS.filter(l => l.company === lead.company && l.id !== lead.id).slice(0,3);
  return (
    <div>
      <div style={{fontSize:11, textTransform:"uppercase", letterSpacing:"0.12em", color:"var(--ink-400)", marginBottom:6}}>Same company</div>
      {others.length === 0 && <div style={{fontSize:12, color:"var(--ink-500)", padding:"8px 0"}}>No other leads from {lead.company}.</div>}
      {others.map(l => (
        <div key={l.id} style={{padding:"8px 10px", borderBottom:"1px solid var(--border-soft)", display:"flex", alignItems:"center", gap:8}}>
          <Avatar user={l.assignee} size={20} />
          <div style={{flex:1}}>
            <div style={{fontSize:12.5, fontWeight:500}}>{l.name}</div>
            <div style={{fontSize:11, color:"var(--ink-500)"}}>{l.title} · {relTime(l.submittedAt)}</div>
          </div>
          <OutcomePill outcome={l.outcome} />
        </div>
      ))}

      <div style={{fontSize:11, textTransform:"uppercase", letterSpacing:"0.12em", color:"var(--ink-400)", marginTop:16, marginBottom:6}}>Possible duplicate</div>
      <div style={{padding:10, border:"1px solid var(--gold-400)", background:"var(--gold-050)", borderRadius:"var(--r-md)", fontSize:12.5}}>
        <div style={{fontWeight:500, marginBottom:4}}>Re-submission detected</div>
        <div style={{color:"var(--ink-700)"}}>Same email submitted the quiz <b>11 days ago</b>. Merge to preserve history.</div>
        <div style={{marginTop:8, display:"flex", gap:6}}>
          <button className="btn btn--sm btn--primary">Merge record</button>
          <button className="btn btn--sm">Compare</button>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { LeadDetail });