/* ZY console — boss cockpit (overview). Conclusion-first per the design spec. */
const DSO = window.ZYDesignSystem_d746df;

/* small trend line chart (area + dashed comparison), lifted from production ui.jsx */
function KitLineChart({ data, data2, h = 196, color, color2 }) {
  if (!data || !data.length) return null;
  const w = 640;
  const all = data2 ? data.concat(data2) : data;
  const min = Math.min(...all), max = Math.max(...all), rng = max - min || 1;
  const padB = 22, padT = 10, stepX = w / (data.length - 1);
  const map = arr => arr.map((v, i) => [i * stepX, padT + (h - padB - padT) * (1 - (v - min) / rng)]);
  const path = pts => pts.map((p, i) => (i ? "L" : "M") + p[0].toFixed(1) + " " + p[1].toFixed(1)).join(" ");
  const p1 = map(data), p2 = data2 ? map(data2) : null;
  const c = color || "var(--accent)", c2 = color2 || "var(--fg-3)";
  const uid = "lg" + Math.random().toString(36).slice(2, 7);
  const gridY = [0.25, 0.5, 0.75].map(f => padT + (h - padB - padT) * f);
  return (
    <svg width="100%" height={h} viewBox={`0 0 ${w} ${h}`} className="linechart" preserveAspectRatio="none">
      <defs><linearGradient id={uid} x1="0" y1="0" x2="0" y2="1">
        <stop offset="0%" stopColor={c} stopOpacity="0.16" /><stop offset="100%" stopColor={c} stopOpacity="0" />
      </linearGradient></defs>
      {gridY.map((y, i) => <line key={i} x1="0" y1={y} x2={w} y2={y} stroke="var(--border)" strokeWidth="1" strokeDasharray="2 5" />)}
      <path d={path(p1) + ` L ${w} ${h - padB} L 0 ${h - padB} Z`} fill={`url(#${uid})`} />
      {p2 && <path d={path(p2)} fill="none" stroke={c2} strokeWidth="1.75" strokeDasharray="4 4" strokeLinecap="round" />}
      <path d={path(p1)} fill="none" stroke={c} strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

function KitOverview({ onHermes, onApproval, onPlatform, onNav }) {
  const { Card, SectionHead, Pill, Delta, Sparkline, Bar, Icon, Button, kfmtSkip } = DSO;
  const K = window.KIT;
  const STATE_TONE = { "正常": "good", "需关注": "warn", "需 COO 处理": "accent", "需老板拍板": "danger" };
  const ICON = { warn: "TriangleAlert", danger: "OctagonAlert", info: "Info", good: "CircleCheck" };
  const totalGmv = K.platforms.reduce((s, p) => s + p.gmv, 0);
  const totalProfitBoss = K.platforms.reduce((s, p) => s + p.profitBoss, 0);
  const totalProfitEmp = K.platforms.reduce((s, p) => s + p.profitEmp, 0);
  // null=未知渲「—」——window.yuan(null)='¥0' 会把「口径监督中」显成「利润 ¥0」误导;非 ¥ 卡 null 直接崩
  const fmt = (v, u) => (v === null || v === undefined) ? "—" : u === "¥" ? window.yuan(v) : u === "%" ? v + "%" : v.toLocaleString("zh-CN") + (u || "");
  // cockpit 块 live 后:平台分布/双趋势线无生产者(meta.sections_not_served)——两卡挂诚实横幅,利润脚注不显示 mock 合计
  const cockpitLive = !!(K.cockpitMeta && K.cockpitMeta.served);

  const scrollToApprovals = () => {
    const host = document.querySelector(".scroll");
    const card = document.querySelector(".apprlist") && document.querySelector(".apprlist").closest(".card");
    if (!host || !card) return;
    const target = Math.max(0, host.scrollTop + (card.getBoundingClientRect().top - host.getBoundingClientRect().top) - 16);
    host.scrollTop = target;
    card.classList.add("card--flash"); setTimeout(() => card.classList.remove("card--flash"), 1100);
  };
  // cockpit live 后委派数据从真实 todos 派生（按 domain 分组 top3）;写死 4/3/2 只在 mock 模式出现
  const delegates = cockpitLive
    ? Object.entries((K.todos || []).reduce((m, t) => { const k = t.domain || "运营异常"; m[k] = m[k] || { n: 0, view: t.target }; m[k].n += 1; return m; }, {}))
        .sort((a, b) => b[1].n - a[1].n).slice(0, 3)
        .map(([label, v]) => ({ label, n: v.n, view: v.view || "ops.todo", meta: "运营执行台 · 真实待办" }))
    : [
      { label: "提成核发", n: 4, view: "fin.commission", meta: "财务 COO · 逐单提成核发" },
      { label: "客户绑定", n: 3, view: "sales.crm", meta: "销售 COO · 企微 ↔ 聚水潭" },
      { label: "补货复核", n: 2, view: "proc.reco", meta: "采购 COO · 建议待复核" },
    ];
  const delegTotal = cockpitLive ? (K.todos || []).length : delegates.reduce((s, d) => s + d.n, 0);

  // Hermes 全局学习信号（可选，per hermes-feedback-ui-contract.md）——汇总各 COO 已上线的
  // learning_applied.active_memory_total（目前只有采购/仓储/TikTok Shop 三条日报有这个字段），
  // 诚实标注这是「已接入 COO」的部分合计，不是全公司口径（还有多个 COO 尚未接入 Hermes 记忆队列）。
  const hermesSources = [window.KIT.procDigest, window.KIT.whCycle, window.KIT.tiktokCooDailyReport]
    .filter(d => d && d.learning_applied && typeof d.learning_applied.active_memory_total === "number");
  const hermesLearned = hermesSources.reduce((s, d) => s + d.learning_applied.active_memory_total, 0);

  return (
    <div className="view viewfade">
      <div className="greet">
        <div className="greet__l">
          <div className="greet__hi">早安，老板 👋</div>
          <div className="greet__sum">已接入系统真实只读数据。<b>{K.approvals.length} 件</b>需你拍板，COO 已发现 <b>{K.insights.length} 项</b>经营风险，<b>{delegTotal} 项</b>可交给 COO / 员工继续处理。</div>
        </div>
        <button className="greet__hermes" onClick={() => onHermes()}>
          <span className="greet__orb"><Icon name="Sparkles" size={16} /></span>
          <span className="greet__hermestxt">
            <b>Hermes 今日早报</b>
            <span>问问 AI 副手 · 复盘与建议</span>
          </span>
          {hermesSources.length > 0 && (
            <span className="hermespanel__chip" title={"已接入 " + hermesSources.length + " 个 COO 的学习队列（采购/仓储/TikTok Shop），其余 COO 尚未接入"}>
              Hermes 已学会 {hermesLearned} 条
            </span>
          )}
          <Icon name="ArrowRight" size={16} stroke={2} />
        </button>
      </div>

      <div className="today3">
        <div className="t3 t3--decide">
          <div className="t3__head"><span className="t3__tag">必须老板拍板</span><span className="t3__n num">{K.approvals.length}</span></div>
          <div className="t3__lines">{K.approvals.map(a => (
            <button className="t3line" key={a.id} onClick={() => onApproval(a)}>
              <span className="t3line__body">
                <span className="t3line__title">{a.title}</span>
                <span className="t3line__meta"><span className="t3line__tag">{a.type}</span>{a.from} · {a.time}{a.amount ? " · " : ""}{a.amount ? <b className="num">{window.yuan(a.amount)}</b> : null}</span>
              </span>
              <Icon name="ChevronRight" size={16} stroke={2} />
            </button>
          ))}</div>
          <button className="t3__foot t3__foot--btn" onClick={scrollToApprovals}>下方集中审批 <Icon name="ArrowDown" size={13} stroke={2} /></button>
        </div>
        <div className="t3 t3--risk">
          <div className="t3__head"><span className="t3__tag">COO 已发现的风险</span><span className="t3__n num">{K.insights.length}</span></div>
          <div className="t3__lines">{K.insights.map(i => (
            <button className="t3line" key={i.id} onClick={() => onHermes(i)}>
              <span className="t3line__body">
                <span className="t3line__title"><i className={"t3line__sev t3line__sev--" + i.level} />{i.title}</span>
                <span className="t3line__meta"><span className="t3line__tag">{i.tag}</span>→ {i.evidence}</span>
              </span>
              <Icon name="ChevronRight" size={16} stroke={2} />
            </button>
          ))}</div>
          <button className="t3__foot t3__foot--btn" onClick={() => onHermes()}>查看 Hermes 洞察 <Icon name="ArrowRight" size={13} stroke={2} /></button>
        </div>
        <div className="t3 t3--deleg">
          <div className="t3__head"><span className="t3__tag">可交给 COO / 员工处理</span><span className="t3__n num">{delegTotal}</span></div>
          <div className="t3__lines">{delegates.map(d => (
            <button className="t3line" key={d.label} onClick={() => onNav && onNav(d.view)}>
              <span className="t3line__body">
                <span className="t3line__title">{d.label} · <b className="num">{d.n}</b></span>
                <span className="t3line__meta">{d.meta}</span>
              </span>
              <Icon name="ChevronRight" size={16} stroke={2} />
            </button>
          ))}</div>
          <button className="t3__foot t3__foot--btn" onClick={() => onNav && onNav("ops.todo")}>去运营执行台 · 自动写入：策略禁止 <Icon name="ArrowRight" size={13} stroke={2} /></button>
        </div>
      </div>

      <Card>
        <SectionHead title="COO 状态" sub="平级汇报 · 每个 COO 只看一个结论状态" icon="Network"
          right={<div className="statelegend">
            {["正常", "需关注", "需 COO 处理", "需老板拍板"].map(s => (
              <span className="statelegend__i" key={s}><i className={"sdot sdot--" + STATE_TONE[s]} />{s}</span>
            ))}
          </div>} />
        <div className="coostatus">{K.cooStatus.map((c, i) => (
          <button className="costat" key={i} onClick={() => onNav && onNav(c.view)}>
            <div className="costat__top"><span className="costat__name">{c.group}</span><Pill tone={STATE_TONE[c.state]} soft>{c.state}</Pill></div>
            <div className="costat__note">{c.note}</div>
            <div className="costat__go">前往工作台 <Icon name="ArrowRight" size={12} stroke={2} /></div>
          </button>
        ))}</div>
      </Card>

      <div className="kpigrid">{K.kpis.map((k, i) => (
        <Card key={k.id} className="kpi" hover>
          <div className="kpi__top"><span className="kpi__label">{k.label}</span><Delta value={k.delta} /></div>
          <div className="kpi__val num">{fmt(k.value, k.unit)}</div>
          <div className="kpi__bottom"><span className="kpi__hint">{k.hint}</span><Sparkline data={k.spark} w={i === 0 ? 130 : 92} h={30} /></div>
        </Card>
      ))}</div>

      <div className="ovgrid">
        <Card>
          <SectionHead title="近 30 日 · 销售额与净利润" sub="全平台合计"
            right={<div className="statelegend">
              <span className="statelegend__i"><i className="sdot" style={{ background: "var(--accent)" }} />销售额</span>
              <span className="statelegend__i"><i className="sdot" style={{ background: "var(--fg-3)" }} />净利润</span>
            </div>} />
          <KitLineChart data={K.gmvTrend} data2={K.profitTrend} />
          {cockpitLive && <div className="finmix"><span>趋势曲线数据源待接（读模型未上线）· 本卡曲线为示例数据,不代表真实经营</span></div>}
          {cockpitLive ? (
            <div className="trendfoot">
              <div><span className="trendfoot__k">本月销售额</span><span className="trendfoot__v num">—（数据源待接）</span></div>
              <div><span className="trendfoot__k">利润口径</span><span className="trendfoot__v">财务监督中 · 不发布利润数字</span></div>
            </div>
          ) : (
            <div className="trendfoot">
              <div><span className="trendfoot__k">本月销售额</span><span className="trendfoot__v num">{window.yuan(totalGmv)}</span></div>
              <div><span className="trendfoot__k">员工视角利润</span><span className="trendfoot__v num">{window.yuan(totalProfitEmp)}</span></div>
              <div><span className="trendfoot__k">老板视角利润</span><span className="trendfoot__v num" style={{ color: "var(--accent-ink)" }}>{window.yuan(totalProfitBoss)}</span></div>
              <div><span className="trendfoot__k">老板口径利润率</span><span className="trendfoot__v num">28.9%</span></div>
            </div>
          )}
        </Card>
        <Card>
          <SectionHead title="Hermes 今日洞察" icon="Sparkles"
            right={<button className="textlink" onClick={() => onHermes()}>全部 <Icon name="ArrowRight" size={13} stroke={2} /></button>} />
          <div className="insightlist">{K.insights.map(ins => (
            <button className={"insight insight--" + ins.level} key={ins.id} onClick={() => onHermes(ins)}>
              <span className="insight__ic"><Icon name={ICON[ins.level]} size={16} /></span>
              <span className="insight__body">
                <span className="insight__title">{ins.title}</span>
                <span className="insight__text">{ins.body}</span>
                {ins.source_label && (
                  <span className="insight__text" style={{ color: "var(--fg-3)", fontSize: 11 }}>
                    {ins.source_live ? "数据来源：" : "⚠ 数据来源（尚未完全接入）："}{ins.source_label}
                  </span>
                )}
                <span className="insight__foot"><span className="insight__tag">{ins.tag}</span>
                  <span className="insight__act">{ins.action} <Icon name="ArrowRight" size={13} stroke={2} /></span></span>
              </span>
            </button>
          ))}</div>
        </Card>
      </div>

      <div className="ovgrid ovgrid--2">
        <Card>
          <SectionHead title="平台销售分布" sub="今日 GMV 占比 · 境内店铺(CNY)，Shopify/TikTok 另计币种见分平台" icon="Store" />
          {cockpitLive && <div className="finmix"><span>平台分布数据源待接（读模型未上线）· 本卡金额为示例数据,不代表真实经营</span></div>}
          <div className="platshare">{K.platforms.map(p => (
            <div key={p.id}>
              <button className="platshare__row" onClick={() => onPlatform(p)} style={{ background: "none", textAlign: "left", padding: "2px 0" }}>
                <span className="platshare__name"><i className="platdot" style={{ background: p.color }} />{p.name}<span className="platshare__grp">{p.group}</span></span>
                <span><Bar pct={(p.gmv / totalGmv) * 100} /></span>
                <span className="platshare__val num">{window.yuan(p.gmv)}</span>
                <Delta value={p.delta} />
              </button>
              {p.gmvSourceNote && (
                <div style={{ fontSize: 11, color: "var(--fg-3)", padding: "0 0 4px 21px" }}>
                  ⚠ {p.gmvSourceNote}
                </div>
              )}
            </div>
          ))}</div>
        </Card>
        <Card>
          <SectionHead title="待审批" sub="OpenClaw · COO 上报" icon="Inbox"
            right={<Pill tone="warn" soft>{K.approvals.length} 项待处理</Pill>} />
          <div className="apprlist">{K.approvals.map(a => (
            <div className="approw" key={a.id}>
              <div className="approw__l">
                <Pill tone="accent" soft>{a.type}</Pill>
                <div><div className="approw__title">{a.title}</div>
                  <div className="approw__meta">{a.from} · {a.time}{a.amount ? " · " + window.yuan(a.amount) : ""}</div>
                  {a.source_label && (
                    <div className="approw__meta" style={{ color: "var(--fg-3)" }}>
                      {a.source_live ? "数据来源：" : "⚠ 数据来源（尚未完全接入）："}{a.source_label}
                    </div>
                  )}</div>
              </div>
              <Button variant="ghost" size="sm" onClick={() => onApproval(a)}>只读查看</Button>
            </div>
          ))}</div>
        </Card>
      </div>
    </div>
  );
}

Object.assign(window, { KitOverview });