/* Reeve — the product screens. Theme-agnostic React; one set of components
   renders identically in both directions, styled only via CSS vars. */
const E = window.EMBER;
const EC = E.cases;

/* ---------- action card ---------- */
function ActionCard({ c, full }) {
  const watching = c.group === "watching";
  return (
    <div className={`acard ${c.group}`}>
      <div className="acard-head">
        <div className="acard-title">{c.title}</div>
        <Chev />
      </div>
      <div className="acard-sub">{c.sub}</div>
      <div className="acard-foot">
        <Chip tone={c.group === "now" ? "now" : "mute"}>{c.ball}</Chip>
        <Chip tone="ghost">{c.aged}</Chip>
        {full && c.actionVerb ? <span className="hold-hint">长按批准 ›</span> : null}
        {watching ? <span className="hold-hint mute"><i className="dotpulse" />Reeve 盯着</span> : null}
      </div>
    </div>
  );
}

/* ---------- 1. HOME ---------- */
function HomeScreen() {
  return (
    <React.Fragment>
      <AppTop />
      <div className="home-lead">现在需要你点头的，<b>1 件</b></div>
      <div className="home-scroll">
        {E.homeGroups.map(g => (
          <div className={`agroup ${g.id === "watching" ? "watch" : ""}`} key={g.id}>
            <div className="group-label">{g.label}</div>
            {g.cards.map(k => <ActionCard key={k} c={EC[k]} full={g.id === "now"} />)}
          </div>
        ))}
        <div className="home-src">本页全部内容来自真实线索 · {E.SRC}</div>
      </div>
      <QuickBar />
    </React.Fragment>
  );
}

/* ---------- 2. DETAIL ---------- */
function DetailScreen() {
  const c = EC.confirm;
  return (
    <React.Fragment>
      <BackTop title="动作" />
      <div className="screen-pad">
        <div className="kicker">Reeve 准备这样做</div>
        <div className="prep-card">{c.prepared}</div>

        <HoldButton label={"长按批准 · " + c.actionVerb} />
        <div className="dualbtn">
          <button className="btn ghost">改语气 / 时间</button>
          <button className="btn ghost">看原文</button>
        </div>

        <div className="why-head">为什么是现在</div>
        <ol className="why">{c.why.map((w, i) => <li key={i}>{w}</li>)}</ol>

        <div className="src-head">读到的原文</div>
        <div className="src-list">
          {c.sources.map((s, i) => (
            <div className="srcq" key={i}><span className="srcq-from">{s.from}</span>{s.text}</div>
          ))}
        </div>
        <div className="home-src">{E.SRC} · Fwd: Quotes?</div>
      </div>
    </React.Fragment>
  );
}

/* ---------- long-press CTA (teaches the core interaction in onboarding) ---------- */
function HoldCta({ className, onComplete, children, hint }) {
  const [holding, setHolding] = useState(false);
  const timer = useRef(null);
  const start = (e) => { e.preventDefault(); setHolding(true); timer.current = setTimeout(() => { setHolding(false); onComplete && onComplete(); }, 820); };
  const cancel = () => { setHolding(false); clearTimeout(timer.current); };
  useEffect(() => () => clearTimeout(timer.current), []);
  return (
    <button className={`holdcta ${className || ""} ${holding ? "is-holding" : ""}`}
      onPointerDown={start} onPointerUp={cancel} onPointerLeave={cancel} onContextMenu={(e) => e.preventDefault()}>
      <span className="hold-fill" />
      <span className="holdcta-in">{children}</span>
      {hint ? <span className="holdcta-hint" aria-hidden="true">长按</span> : null}
    </button>
  );
}

/* ---------- insight charts ---------- */
function SavedAreaChart({ days, series, total, unit, note }) {
  const W = 248, H = 70, pad = 6;
  const max = Math.max(...series) * 1.18;
  const stepX = (W - pad * 2) / (series.length - 1);
  const pts = series.map((v, i) => [pad + i * stepX, H - pad - (v / max) * (H - pad * 2)]);
  const line = pts.map((p, i) => (i ? "L" : "M") + p[0].toFixed(1) + "," + p[1].toFixed(1)).join(" ");
  const area = line + ` L${(W - pad).toFixed(1)},${H - pad} L${pad},${H - pad} Z`;
  return (
    <div className="ins-hero">
      <div className="ins-hero-top">
        <div>
          <div className="ins-hero-v">{total}<span>{unit}</span></div>
          <div className="ins-hero-k">本周省下的时间</div>
        </div>
        <span className="ins-hero-badge">估算</span>
      </div>
      <svg className="ins-area" viewBox={`0 0 ${W} ${H}`} preserveAspectRatio="none">
        <defs>
          <linearGradient id="insFill" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0" stopColor="var(--accent)" stopOpacity="0.28" />
            <stop offset="1" stopColor="var(--accent)" stopOpacity="0" />
          </linearGradient>
        </defs>
        <path className="ins-area-fill" d={area} fill="url(#insFill)" />
        <path className="ins-area-line" d={line} fill="none" stroke="var(--accent)" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" />
        {pts.map((p, i) => <circle key={i} cx={p[0]} cy={p[1]} r={i === pts.length - 1 ? 3.6 : 2} className={i === pts.length - 1 ? "ins-dot last" : "ins-dot"} />)}
      </svg>
      <div className="ins-days">{days.map((d, i) => <span key={i}>周{d}</span>)}</div>
      <div className="ins-hero-note">{note}</div>
    </div>
  );
}

function DraftedBar({ drafted }) {
  const total = drafted.reduce((a, b) => a + b.n, 0);
  return (
    <div className="ins-drafted">
      <div className="ins-card-h"><b>替你起草</b><span>{total} 封</span></div>
      <div className="ins-seg">
        {drafted.map((d, i) => <span key={i} className={`seg s${i}`} style={{ flex: d.n }} />)}
      </div>
      <div className="ins-legend">
        {drafted.map((d, i) => <span key={i} className="lg"><i className={`dot s${i}`} />{d.k} {d.n}</span>)}
      </div>
    </div>
  );
}

/* ---------- PROFILE 个人主页: identity + Gmail auth + insights dashboard ---------- */
function ProfileScreen({ onBack }) {
  const P = E.profile;
  const sp = E.specialist || {};
  const [specOn, setSpec] = useSpecialist();
  const ins = P.insights;
  const [sub, setSub] = useState("main"); // main | memory | settings
  if (sub === "memory") return <MemoryScreen onBack={() => setSub("main")} />;
  if (sub === "settings") return <SettingsScreen onBack={() => setSub("main")} />;
  return (
    <React.Fragment>
      <BackTop title="个人" onBack={onBack} />
      <div className="screen-pad pf-pad">
        <div className="pf-id">
          <span className="pf-avatar">D</span>
          <div className="pf-id-tx">
            <b>{P.user.name}</b>
            <span>{P.user.role} · {P.user.account}</span>
          </div>
        </div>

        <div className="pf-sec-h">Gmail 授权</div>
        <div className="pf-gmail">
          <span className="pf-gmail-ic"><GoogleG /></span>
          <div className="pf-gmail-tx">
            <b>{P.gmail.label}</b>
            <span>{P.gmail.scope}</span>
          </div>
          <button className="pf-revoke">取消授权</button>
        </div>
        <button className="pf-add">＋ 连接另一个 Gmail 账号</button>

        <div className="pf-sec-h">管理</div>
        <div className="pf-nav">
          <button className="pf-row" onClick={() => setSub("memory")}>
            <span className="pf-row-ic"><ReeveMark size={15} /></span>
            <span className="pf-row-tx"><b>记忆</b><span>Reeve 记住的偏好与跟进习惯</span></span>
            <Chev />
          </button>
          <button className="pf-row" onClick={() => setSub("settings")}>
            <span className="pf-row-ic gear" aria-hidden="true">⚙</span>
            <span className="pf-row-tx"><b>权限 · 自动 vs 批准</b><span>哪些 Reeve 自动做，哪些等你</span></span>
            <Chev />
          </button>
        </div>

        <div className="pf-sec-h">专家</div>
        <div className="pf-spec">
          <span className="pf-spec-mk"><SpecMark size={20} stroke={2} /></span>
          <div className="pf-spec-tx">
            <b>{sp.role || "保险专家"}</b>
            <span>{sp.can}</span>
          </div>
          <button className={`pf-spec-tg ${specOn ? "on" : ""}`} onClick={() => setSpec(!specOn)}
            role="switch" aria-checked={specOn} aria-label="启用保险专家"><i /></button>
        </div>

        <div className="pf-sec-h ins-sec">数据洞见</div>
        <SavedAreaChart {...ins.saved} />
        <div className="ins-tiles">
          {ins.tiles.map((t, i) => (
            <div className="ins-tile" key={i}>
              <div className="ins-tile-v">{t.v}{t.unit ? <span>{t.unit}</span> : null}</div>
              <div className="ins-tile-k">{t.k}</div>
              <div className="ins-tile-s">{hiTime(t.s)}</div>
            </div>
          ))}
        </div>
        <DraftedBar drafted={ins.drafted} />
        <div className="home-src">全部数据来自真实线索 · {E.SRC}</div>
      </div>
    </React.Fragment>
  );
}

/* ---------- 3. MEMORY ---------- */
function MemoryScreen({ onBack }) {
  const M = E.memory;
  return (
    <React.Fragment>
      <BackTop title="记忆" onBack={onBack} />
      <div className="screen-pad">
        <div className="mem-hero">
          <div className="mem-hero-k"><ReeveMark size={15} /><span>{M.lead}</span></div>
          <p className="mem-hero-sub">{M.sub}</p>
          <div className="mem-conf"><i className="dotpulse" />{M.confidence}</div>
        </div>
        {M.groups.map((g, gi) => (
          <div className="mem-group" key={gi}>
            <div className="mem-cat"><b>{g.cat}</b><i>{g.note}</i></div>
            <div className="mem-fields">
              {g.items.map((m, i) => (
                <div className="mem-field" key={i}>
                  <div className="mem-field-top">
                    <span className="mem-fk">{m.k}</span>
                    <button className="mem-edit" aria-label="编辑">改</button>
                  </div>
                  <div className="mem-fv">{hiTime(m.v)}</div>
                  <div className="mem-src">{m.src}</div>
                </div>
              ))}
            </div>
          </div>
        ))}
        <div className="mem-rule">
          <div className="rule-k">只读你的记忆 · 只能改</div>
          <div className="rule-v">这里只展示 Reeve 对你的理解，你只能改写或删字段 —— Reeve 不会替你加事实、也不在发送 / 报价 / 签字前自动动手。</div>
        </div>
      </div>
    </React.Fragment>
  );
}

/* ---------- 4. SETTINGS ---------- */
function SettingsScreen({ onBack }) {
  const s = E.settings;
  return (
    <React.Fragment>
      <BackTop title="Reeve 设置" onBack={onBack} />
      <div className="screen-pad">
        <div className="set-block">
          <div className="set-h"><span className="set-badge auto">自动</span>Reeve 可以替你做</div>
          <div className="set-list">
            {s.auto.map((x, i) => <div className="set-row" key={i}><i className="tick">✓</i><span>{x}</span></div>)}
          </div>
        </div>
        <div className="set-block">
          <div className="set-h"><span className="set-badge must">永远等你</span>这些一定要你批准</div>
          <div className="set-list">
            {s.approve.map((x, i) => <div className="set-row" key={i}><i className="lock">●</i><span>{x}</span></div>)}
          </div>
        </div>
        <div className="set-block">
          <div className="set-h"><span className="set-badge plain">节奏</span>盯人与隐私</div>
          <div className="set-toggles">
            {s.toggles.map((t, i) => (
              <div className="trow" key={i}>
                <div><div className="trow-k">{t.k}</div><div className="trow-v">{t.v}</div></div>
                <span className={`toggle ${t.on ? "on" : ""}`} />
              </div>
            ))}
          </div>
        </div>
      </div>
    </React.Fragment>
  );
}

/* ---------- 5. APPROVE → EXECUTE → DONE (interactive) ---------- */
function HoldButton({ label, onApprove }) {
  const [holding, setHolding] = useState(false);
  const timer = useRef(null);
  const start = () => {
    setHolding(true);
    timer.current = setTimeout(() => { setHolding(false); onApprove && onApprove(); }, 900);
  };
  const cancel = () => { setHolding(false); clearTimeout(timer.current); };
  useEffect(() => () => clearTimeout(timer.current), []);
  return (
    <button className={`hold ${holding ? "is-holding" : ""}`}
      onPointerDown={start} onPointerUp={cancel} onPointerLeave={cancel}>
      <span className="hold-fill" />
      <span className="hold-label">{label}</span>
    </button>
  );
}

function ApproveScreen() {
  const c = EC.confirm;
  const [state, setState] = useState("ready"); // ready | running | done
  const [left, setLeft] = useState(5);
  const tick = useRef(null);
  const finish = useRef(null);

  const approve = () => {
    setState("running"); setLeft(5);
    tick.current = setInterval(() => setLeft(v => (v > 1 ? v - 1 : v)), 1000);
    finish.current = setTimeout(() => { clearInterval(tick.current); setState("done"); }, 5000);
  };
  const undo = () => { clearInterval(tick.current); clearTimeout(finish.current); setState("ready"); setLeft(5); };
  const reset = () => setState("ready");
  useEffect(() => () => { clearInterval(tick.current); clearTimeout(finish.current); }, []);

  return (
    <React.Fragment>
      <BackTop title="批准" />
      <div className="screen-pad">
        <div className="kicker">Reeve 准备发送</div>
        <div className="approve-action">{c.actionVerb}</div>
        <div className="draft-card"><span className="draft-tag">草稿 · 你可改</span>{c.draft}</div>

        {state === "ready" && (
          <div className="approve-zone">
            <HoldButton label="长按批准发送" onApprove={approve} />
            <div className="approve-note">长按住直到填满即发送。发送前你随时能停。</div>
          </div>
        )}

        {state === "running" && (
          <div className="exec-card">
            <div className="exec-row">
              <span className="exec-spin" />
              <div><b>执行中 · 正在发送</b><span>发出后我会盯 Sherrell 的回复</span></div>
            </div>
            <button className="undo" onClick={undo}>
              <span className="undo-ring" style={{ "--p": (left / 5) }} />撤回（{left}s）
            </button>
          </div>
        )}

        {state === "done" && (
          <div className="done-card">
            <div className="done-row"><span className="done-tick"><ReeveMark size={16} /></span>
              <div><b>已发送给 Sherrell</b><span>这条线接住了。</span></div>
            </div>
            <div className="done-next"><b>接下来我会</b>{c.autoNext}</div>
            <button className="btn ghost wide" onClick={reset}>再看一遍这一步</button>
          </div>
        )}
      </div>
    </React.Fragment>
  );
}

/* ---------- email footer (appended to the agent's sent email) ---------- */
function EmailFooter() {
  const S = E.share;
  return (
    <div className="ef-wrap">
      <div className="ef-mailbody">
        <div className="ef-mh"><b>Re: Quotes?</b><span>收件人：Sherrell</span></div>
        <p className="ef-mtx">Hi Sherrell — attaching PDFs of all the plans. The UHC Choice Plus PPO and the Multiplan PHCS PPO are very similar in coverage, just different networks…</p>
        <p className="ef-msig">— Demarco</p>
        <div className="ef-divider" />
        <div className="ef-foot">
          <span className="ef-mk"><ReeveMark size={16} /></span>
          <div className="ef-foot-tx">
            <b>这封邮件由 AI 助理 Reeve 代 {S.footer.by} 整理</b>
            <span>Reeve 把方案整理成一页，方便你对比</span>
          </div>
        </div>
        <button className="ef-cta">{S.footer.cta}<span aria-hidden="true">→</span></button>
      </div>
      <div className="ef-cap">↑ 追加在每封代发邮件尾部 · 客户点击进入下方 H5</div>
    </div>
  );
}

/* ---------- H5 share landing (client / counterparty side) ---------- */
function ShareH5() {
  const S = E.share;
  const [sent, setSent] = useState(false);
  return (
    <div className="h5">
      <div className="h5-top">
        <span className="h5-mk"><ReeveMark size={18} /></span>
        <div className="h5-top-tx"><b>Reeve</b><span>帮你读 Demarco 的这条线程</span></div>
        <span className="h5-secure" aria-hidden="true">🔒 只读</span>
      </div>
      <div className="h5-scroll">
        <div className="h5-hello">Hi {S.forClient}，</div>
        <div className="h5-intro">{S.intro}</div>

        <div className="h5-convo">
          {S.convo.map((m, i) => (
            <div className={`h5-msg ${m.role}`} key={i}>
              <div className="h5-msg-h"><b>{m.who}</b><span>{hiTime(m.date)}</span></div>
              <div className="h5-msg-tx">{m.text}</div>
            </div>
          ))}
        </div>

        <div className="h5-analysis">
          <div className="h5-an-h">
            <ReeveMark size={14} /><b>Reeve 帮你看了一眼</b>
            <span className="h5-verdict">{S.verdict.label}</span>
          </div>
          <p className="h5-reco">{S.verdict.note}</p>
          <ul className="h5-an-list">
            {S.analysis.map((a, i) => (
              <li className={a.g ? "good" : "warn"} key={i}><i aria-hidden="true">{a.g ? "✓" : "!"}</i>{a.t}</li>
            ))}
          </ul>
          <div className="h5-suggest"><b>Reeve 建议</b>{S.suggest}</div>
        </div>

        {!sent ? (
          <React.Fragment>
            <div className="h5-draft">
              <div className="h5-draft-h"><ReeveMark size={13} /><b>替你拟好的回复</b><span>可改</span></div>
              <p className="h5-draft-tx">{hiTime(S.draftReply)}</p>
            </div>
            <button className="h5-cta" onClick={() => setSent(true)}>{S.sendCta}</button>
            <div className="h5-trust">{S.trust}</div>
          </React.Fragment>
        ) : (
          <div className="h5-convert">
            <div className="h5-convert-tick"><ReeveMark size={20} /></div>
            <div className="h5-convert-sent"><b>{S.appstore.sent}</b><span>{S.appstore.sentSub}</span></div>
            <div className="h5-convert-card">
              <div className="h5-gift">{S.appstore.gift}</div>
              <div className="h5-convert-promo">{S.appstore.promo}</div>
              <button className="h5-appstore">{S.appstore.cta}</button>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

Object.assign(window, {
  ActionCard, HomeScreen, DetailScreen, MemoryScreen, SettingsScreen, HoldButton, HoldCta, ProfileScreen, ApproveScreen,
  SavedAreaChart, DraftedBar, EmailFooter, ShareH5,
});