/* Reeve — cold-start triage/reflect + the case thread as one evolving card.
   Real thread: Sherrell ↔ Demarco (6a222302). Home shows ONE thread card whose
   STATUS updates as Reeve follows up; detail shows that thread's timeline. */
const { useState: useStateTL, useEffect: useEffectTL } = React;

/* ---- cold-start: pick which thread-types Reeve should auto-follow ---- */
function InboxTriage({ onDone }) {
  const T = window.EMBER.triage;
  const [on, setOn] = useStateTL(() => Object.fromEntries(T.threads.map((t) => [t.id, t.on])));
  const toggle = (id) => setOn((s) => ({ ...s, [id]: !s[id] }));
  return (
    <div className="ob">
      <h1 className="ob-h1">你刚收到第一封<br />客户邮件。</h1>
      <p className="ob-sub">这是 Reeve 读到的最近几封。勾选你想让我盯的那类 —— 以后这类我默认读取、自动跟进，其余不碰。</p>
      <div className="triage-list">
        {T.threads.map((t) =>
        <button className={`triage ${on[t.id] ? "on" : ""} ${t.real ? "real" : ""}`} key={t.id} onClick={() => toggle(t.id)}>
            <span className="tg-check" aria-hidden="true">{on[t.id] ? "✓" : ""}</span>
            <span className="tg-body">
              <span className="tg-top"><b>{t.from}</b><i>{t.kind}</i></span>
              <span className="tg-sub">{t.subject}</span>
            </span>
          </button>
        )}
      </div>
      <div className="ob-spacer" />
      <HoldCta className="ob-cta" onComplete={onDone} hint>记住并开始</HoldCta>
    </div>);
}

/* ---- cold-start: agent reflects + commits the rule to memory ---- */
function AgentReflect({ onDone }) {
  const T = window.EMBER.triage;
  const [n, setN] = useStateTL(0);
  useEffectTL(() => {
    const ts = [setTimeout(() => setN(1), 600), setTimeout(() => setN(2), 1300), setTimeout(() => setN(3), 2150)];
    return () => ts.forEach(clearTimeout);
  }, []);
  return (
    <div className="ob">
      <h1 className="ob-h1">记住了。<br />这一类我来盯。</h1>
      <div className="reflect">
        <div className={`rf-row ${n >= 1 ? "in" : ""}`}><span className="rf-k keep">默认跟进</span><span className="rf-v">{T.keep}</span></div>
        <div className={`rf-row ${n >= 2 ? "in" : ""}`}><span className="rf-k drop">不处理</span><span className="rf-v">{T.drop}</span></div>
      </div>
      <div className={`reflect-note ${n >= 3 ? "in" : ""}`}><ReeveMark size={15} /><span>这条记忆随时可改 —— 在「记忆」里加一类、去一类都行。</span></div>
      <div className="ob-spacer" />
      <HoldCta className="ob-cta" onComplete={onDone} hint>处理第一条线</HoldCta>
    </div>);
}

/* ---- the thread card: one card, status changes per state ---- */
function StatusHead({ st }) {
  return (
    <div className={`tc-status ${st.tone}`}>
      <span className="tc-status-dot" />
      <b>{hiTime(st.status)}</b>
      <span>{hiTime(st.statusSub)}</span>
    </div>);
}

/* watching = following up (no action) · act = drafted, awaiting long-press */
function ThreadCard({ st, mode, onApprove, onOpen }) {
  return (
    <div className={`thread-card ${st.tone}`}>
      <StatusHead st={st} />
      <button className="tc-open" onClick={onOpen}>
        <div className="tc-subj">{st.subject}</div>
        <Chev />
      </button>
      <div className="tc-meta">{hiTime(st.meta || st.incomingMeta)}</div>

      {mode === "watching" &&
      <React.Fragment>
          <div className="tc-line">{hiTime(st.line)}</div>
          <div className="tc-watchfoot"><i className="dotpulse" />{st.foot}</div>
        </React.Fragment>}

      {mode === "act" &&
      <React.Fragment>
          {st.incoming && <div className="tc-incoming"><span className="tc-inq">“{hiTime(st.incoming)}”</span></div>}
          <div className="tc-act">
            <div className="tc-act-head"><ReeveMark size={13} /><span>{hiTime(st.head)}</span></div>
            <ul className="tc-why">{st.why.map((w, i) => <li key={i}>{hiTime(w)}</li>)}</ul>
            <div className="draft-card"><span className="draft-tag">草稿 · 你可改</span>{st.draft}</div>
            {st.advise && <div className="tc-advise"><i className="dotpulse" />{hiTime(st.advise)}</div>}
            <HoldButton label={"长按批准 · " + st.verb} onApprove={onApprove} />
            <button className="btn ghost wide tc-source" onClick={onOpen}>看原文 thread ↗</button>
          </div>
        </React.Fragment>}
    </div>);
}

/* ---- home: base layer + slide-in (iOS push) for detail/profile ---- */
function getThreadObj(id) { return id === "marcus" ? window.EMBER.thread2 : id === "school" ? window.EMBER.thread3 : id === "family" ? window.EMBER.thread4 : window.EMBER.thread; }

/* ---- home feed: list of thread cards across both threads; slide-in detail ---- */
function HomeFeed({ day }) {
  const F = window.EMBER.homeFeed[day];
  const [view, setView] = useStateTL(null);      // null | "profile" | thread id
  const [entered, setEntered] = useStateTL(false);
  const [approved, setApproved] = useStateTL({});
  const open = (v) => setView(v);
  const close = () => { setEntered(false); setTimeout(() => setView(null), 340); };
  useEffectTL(() => {
    if (view) { const id = requestAnimationFrame(() => setEntered(true)); return () => cancelAnimationFrame(id); }
    setEntered(false);
  }, [view]);
  return (
    <React.Fragment>
      <div className={`push-base ${view ? "pushed" : ""}`}>
        <div className="apptop tl-top">
          <span className="brandrow">
            <span className="bm"><ReeveMark size={18} /></span>
            <b>Reeve</b>
          </span>
          <button className="avatar-btn" onClick={() => open("profile")} aria-label="个人"><Avatar dot /></button>
        </div>
        <div className="home-lead"><b>{F.lead}</b></div>
        <div className="home-scroll tl-scroll feed">
          {F.groups.map((g) =>
          <div className={`feed-group ${g.id}`} key={g.id}>
              <div className="group-label">{g.label}</div>
              {g.items.map((it) => {
              const t = getThreadObj(it.thread);
              const st = t[it.state];
              const key = it.thread + it.state;
              const mode = st.tone === "watch" ? "watching" : "act";
              return approved[key] ?
              <div className="thread-card act" key={key}>
                    <StatusHead st={{ tone: "watch", status: "已发送给 " + t.client, statusSub: "Reeve 接着 follow-up 这条线" }} />
                    <div className="tc-sent"><span className="tc-sent-tick">✓</span>{st.verb} —— 发出后我盯着回复，到点没动静再替你拟下一条。</div>
                  </div> :
              <ThreadCard key={key} st={st} mode={mode} onApprove={() => setApproved((a) => ({ ...a, [key]: true }))} onOpen={() => open(it.thread)} />;
            })}
            </div>
          )}
        </div>
        <QuickBar />
      </div>
      {view &&
        <div className={`push-over ${entered ? "in" : ""}`}>
          {view === "profile" ? <ProfileScreen onBack={close} /> : <ThreadDetail thread={getThreadObj(view)} onBack={close} />}
        </div>}
    </React.Fragment>);
}

/* ---- detail: the thread's own timeline + slide-up original email ---- */
function MailSheet({ open, onClose, raw }) {
  const R = raw || window.EMBER.thread.raw;
  return (
    <div className={`sheet-scrim ${open ? "in" : ""}`} onClick={onClose}>
      <div className="mail-sheet" onClick={(e) => e.stopPropagation()}>
        <div className="sheet-grab" />
        <div className="sheet-head">
          <div className="sheet-h-tx"><b>邮件原文</b><span>{R.src}</span></div>
          <button className="sheet-x" onClick={onClose} aria-label="关闭">✕</button>
        </div>
        <div className="sheet-scroll">
          <div className="ms-hilites">
            <span className="ms-hl-k">Reeve 圈出的关键</span>
            <div className="ms-hl-row">{R.highlights.map((h, i) => <span className="ms-hl-chip" key={i}>{h}</span>)}</div>
          </div>
          <div className="ms-subj">{R.subject}</div>
          {R.messages.map((m, i) => (
            <div className="ms-msg" key={i}>
              <div className="ms-msg-h"><b>{m.from}</b><span>→ {m.to} · {hiTime(m.date)}</span></div>
              <p className="ms-body">
                {m.body.map((seg, j) => seg.hi ? <mark className="ms-mark" key={j}>{seg.t}</mark> : <React.Fragment key={j}>{seg.t}</React.Fragment>)}
              </p>
            </div>
          ))}
          <div className="ms-foot">Reeve 只读这条线程 · 高亮为自动识别的核心信息</div>
        </div>
      </div>
    </div>
  );
}

function ThreadDetail({ onBack, thread }) {
  const TH = thread || window.EMBER.thread;
  const [sheet, setSheet] = useStateTL(false);
  const [sent, setSent] = useStateTL(false);
  const act = [TH.callday, TH.reply, TH.card, TH.nudge].find((x) => x && x.draft);
  return (
    <React.Fragment>
      <BackTop title="Thread 详情" onBack={onBack} />
      <div className="screen-pad td-pad">
        <div className="td-head">
          <div className="td-subj">{TH.subject}</div>
          <div className="td-sub">{TH.client} · 健康险 · {window.EMBER.SRC}</div>
        </div>
        <div className="td-rail">
          {TH.detail.map((e, i) =>
          <div className={`td-item ${e.t}`} key={i}>
              <span className="td-node">{e.t === "recv" ? "↙" : e.t === "sent" ? "↗" : e.t === "sched" ? "⏰" : ""}</span>
              <div className="td-body">
                {e.who && <div className="td-who"><b>{e.who}</b><span>{hiTime(e.time)}</span></div>}
                <div className="td-text">{hiTime(e.text)}</div>
                {(e.t === "recv" || e.t === "sent") &&
                  <button className="td-src" onClick={() => setSheet(true)}>看原文 ↗</button>}
              </div>
            </div>
          )}
        </div>
        {TH.actions &&
        <div className="td-actions">
          <div className="td-act-lead"><ReeveMark size={13} /><span>Reeve 把这封拆成 {TH.actions.length} 步：</span></div>
          {TH.actions.map((a, i) =>
          <div className="td-act-card" key={i}>
              <span className="td-act-n">{i + 1}</span>
              <div className="td-act-tx"><b>{a.head}</b><span>{hiTime(a.sub)}</span></div>
              <span className="td-act-verb">{a.verb} ›</span>
            </div>
          )}
        </div>}
        {act &&
        <div className="td-approve">
          {sent
            ? <div className="tc-sent"><span className="tc-sent-tick">✓</span>{act.verb} —— 发出后我盯着回复，到点没动静再替你拟下一条。</div>
            : <React.Fragment>
                <div className="td-approve-lead"><ReeveMark size={13} /><span>{act.head}</span></div>
                <div className="draft-card"><span className="draft-tag">草稿 · 你可改</span>{act.draft}</div>
                <HoldButton label={"长按批准 · " + act.verb} onApprove={() => setSent(true)} />
              </React.Fragment>}
        </div>}
      </div>
      <MailSheet open={sheet} onClose={() => setSheet(false)} raw={TH.raw} />
    </React.Fragment>);
}

/* ---- cold-start: process the first thread, then end on "following up" ---- */
function ColdFirstThread({ onApprove }) {
  const st = {
    subject: "Quotes?", tone: "act",
    status: "第一条线 · 报价请求", statusSub: "Reeve 已起草回复 · 等你拍板",
    incomingMeta: "Sherrell · 健康险报价 · 周一 5:48 PM",
    incoming: "想要之前聊过的几个健康险报价。",
    head: "发送报价对比给 Sherrell",
    why: [
    "客户主动来要报价、球在你 —— 正是你刚勾选「自动跟进」的那类线。",
    "按你一贯口径起草：UHC Choice Plus PPO 与 Multiplan PHCS PPO 对比 + 牙科 / 视力。"],

    draft: "Hi Sherrell — attaching PDFs of all the plans. The UnitedHealthcare Choice Plus PPO and the Multiplan PHCS PPO are very similar in coverage, just different networks — UHC is more widely accepted. Both: no copays, $0 deductible. Dental & vision brochures included below. — Demarco",
    verb: "发送报价给 Sherrell"
  };
  return (
    <div className="ob ob-thread">
      <h1 className="ob-h1 sm">第一条线，<br />我替你拟好了。</h1>
      <ThreadCard st={st} mode="act" onApprove={onApprove} onOpen={() => {}} />
    </div>);
}

function ColdFollowUp({ onEnter }) {
  return (
    <div className="ob ob-end">
      <div className="ob-spacer" />
      <div className="end-ring"><ReeveMark size={54} stroke={1.8} /></div>
      <h1 className="ob-h1 ctr">已发出。<br />Reeve 在 follow-up 这条线。</h1>
      <p className="ob-sub ctr">报价已发给 Sherrell。我盯着她的回复，到点没动静会替你拟跟进 —— 你不用守着，回头回来看就行。</p>
      <div className="end-chips">
        <span>盯回复</span><span>到点拟跟进</span><span>只在该你拍板时叫你</span>
      </div>
      <div className="ob-spacer" />
      {onEnter
        ? <button className="ob-cta" onClick={onEnter}>进入 Reeve · 看我的会话 →</button>
        : <p className="ob-tiny">这条线现在出现在首页 · 状态：Reeve 在 follow-up</p>}
    </div>);
}

/* ---- voice / manual capture: speak a family to-do, Reeve makes it a loop ---- */
function VoiceCapture() {
  const V = window.EMBER.voiceCase;
  const [st, setSt] = useStateTL("idle"); // idle | listening | parsed | saved
  const t1 = React.useRef(null), t2 = React.useRef(null);
  useEffectTL(() => () => { clearTimeout(t1.current); clearTimeout(t2.current); }, []);
  const start = () => {
    setSt("listening");
    t1.current = setTimeout(() => setSt("parsed"), 1900);
  };
  const reset = () => { clearTimeout(t1.current); clearTimeout(t2.current); setSt("idle"); };
  return (
    <React.Fragment>
      <div className="apptop tl-top">
        <span className="brandrow"><span className="bm"><ReeveMark size={18} /></span><b>Reeve</b></span>
        <button className="cs-replay" onClick={reset} aria-label="重来">↻</button>
      </div>
      <div className="home-scroll tl-scroll vc-scroll">
        {st === "saved"
          ? <React.Fragment>
              <div className="vc-done"><span className="tc-sent-tick">✓</span>记下了 —— 这条现在出现在你的首页「个人」里。</div>
              <ThreadCard st={V.saved} mode="watching" onApprove={() => {}} onOpen={() => {}} />
            </React.Fragment>
          : st === "parsed"
          ? <div className="vc-parsed">
              <div className="vc-said"><span className="vc-q">“{V.spoken}”</span><i>你刚说的</i></div>
              <div className="vc-head"><ReeveMark size={13} /><span>Reeve 听懂了，整理成一条：</span></div>
              <div className="vc-fields">
                {V.parsed.map((p, i) => <div className="vc-field" key={i}><span className="vc-k">{p.k}</span><span className="vc-v">{hiTime(p.v)}</span></div>)}
              </div>
              <HoldButton label="长按记下 · 让 Reeve 替我盯着" onApprove={() => setSt("saved")} />
            </div>
          : <div className="vc-intro">
              <div className="vc-orb-wrap"><span className={`vc-orb ${st === "listening" ? "on" : ""}`}><i /><i /><i /><i /><i /></span></div>
              <div className="vc-tip">{st === "listening" ? "在听… 把要盯的事说给我" : V.prompt}</div>
              {st === "listening" && <div className="vc-live">{V.spoken}</div>}
            </div>}
      </div>
      <button className={`quickbar vc-bar ${st === "listening" ? "rec" : ""}`} onClick={st === "idle" ? start : undefined}>
        <span className="qb-field">{st === "idle" ? "交给我一件要盯的事…" : st === "listening" ? "正在听…" : "已记下"}</span>
        <span className="qb-mic" aria-hidden="true"><i /><i /><i /></span>
        <span className="qb-send" aria-hidden="true">{st === "listening" ? "■" : "🎤"}</span>
      </button>
    </React.Fragment>);
}

Object.assign(window, { InboxTriage, AgentReflect, ThreadCard, HomeFeed, ThreadDetail, ColdFirstThread, ColdFollowUp, VoiceCapture });