/* ZY console — 平台经营：各平台店铺数据 + 双口径利润。 */
const DSPLAT = window.ZYDesignSystem_d746df;

function KitPlatforms({ onPlatform, focus }) {
  const { Card, SectionHead, Pill, Delta, Icon } = DSPLAT;
  const K = window.KIT;
  const PERIODS = [{ k: "day", label: "按日", hint: "今日", mult: 1 }, { k: "week", label: "按周", hint: "本周", mult: 7 }, { k: "month", label: "按月", hint: "本月", mult: 30 }];
  const [pk, setPk] = React.useState("day");
  const period = PERIODS.find(p => p.k === pk);
  const scale = (v) => Math.round(v * period.mult);
  const focusP = focus ? K.platforms.find(p => p.id === focus) : null;
  const base = focusP ? [focusP] : K.platforms;
  const matrix = base.map(p => ({ ...p, gmv: scale(p.gmv), profitEmp: scale(p.profitEmp), profitBoss: scale(p.profitBoss) }));
  const gmv = matrix.reduce((s, p) => s + p.gmv, 0);
  const emp = matrix.reduce((s, p) => s + p.profitEmp, 0);
  const boss = matrix.reduce((s, p) => s + p.profitBoss, 0);
  const tpl = "1.5fr 0.9fr 1fr 0.7fr 1fr 1fr 0.7fr";

  return (
    <div className="view viewfade">
      <Card className="ovstrip">
        <div className="ovstrip__head">
          <span className="ovstrip__orb"><Icon name="Store" size={20} /></span>
          <div className="ovstrip__id">
            <div className="ovstrip__title">{focusP ? focusP.name + " · 平台经营" : "平台经营"}<span className="ovstrip__mode"><span className="ovstrip__dot" />只读观察</span></div>
          </div>
          <div className="ovstrip__src">
            <span className="ovstrip__srclabel">数据源</span>
            <span className="ovstrip__srcval">店铺汇总 · store_summaries</span>
            <Pill tone="good" soft>已接入</Pill>
          </div>
        </div>
      </Card>

      <div className="kpigrid">
        <Card className="kpi" hover><div className="kpi__top"><span className="kpi__label">{focusP ? "运营 COO" : "平台数"}</span><Icon name={focusP ? "UserCog" : "Store"} size={15} style={{ color: "var(--fg-3)" }} /></div>
          <div className={"kpi__val" + (focusP ? "" : " num")}>{focusP ? focusP.coo : K.platforms.length}</div><div className="kpi__hint">{focusP ? focusP.group : "含运营 COO"}</div></Card>
        <Card className="kpi kpi--feat" hover><div className="kpi__top"><span className="kpi__label">GMV 合计</span><Delta value={9.4} /></div>
          <div className="kpi__val num">{window.yuan(gmv)}</div><div className="kpi__hint">{period.hint}境内店铺(CNY)</div></Card>
        <Card className="kpi" hover><div className="kpi__top"><span className="kpi__label">员工视角利润</span><Icon name="User" size={15} style={{ color: "var(--fg-3)" }} /></div>
          <div className="kpi__val num">{window.yuan(emp)}</div><div className="kpi__hint">提成口径 · 不含运费</div></Card>
        <Card className="kpi" hover><div className="kpi__top"><span className="kpi__label">老板视角利润</span><Icon name="Crown" size={15} style={{ color: "var(--accent)" }} /></div>
          <div className="kpi__val num">{window.yuan(boss)}</div><div className="kpi__hint">全成本口径</div></Card>
      </div>

      <Card>
        <SectionHead title="平台 · 店铺矩阵" icon="Store" sub="点击任意平台打开经营详情 · 双口径利润 / 近期订单 · 本表境内店铺(CNY)，不与 Shopify/TikTok 等跨币种店铺合并求和"
          right={<div style={{ display: "flex", alignItems: "center", gap: 12, flexWrap: "wrap" }}>
            <div className="fchips">{PERIODS.map(p => <button key={p.k} className={"fchip" + (pk === p.k ? " is-on" : "")} onClick={() => setPk(p.k)}>{p.label}</button>)}</div>
            <Pill tone="neutral">GMV 合计 {window.yuan(gmv)}</Pill>
          </div>} />
        <div className="dtscroll">
          <div className="dt" style={{ minWidth: 880 }}>
            <div className="dt__head" style={{ gridTemplateColumns: tpl }}>
              <span>平台 · 分组</span><span>运营 COO</span><span>GMV</span><span>同比</span><span>员工视角利润</span><span>老板视角利润</span><span>毛利率</span>
            </div>
            {matrix.map((p, i) => (
              <React.Fragment key={p.id}>
                <div className="dt__row dt__row--click" style={{ gridTemplateColumns: tpl, borderBottom: p.gmvSourceNote ? "none" : undefined }} onClick={() => onPlatform(p)}>
                  <span className="dt__name"><b><i className="platdot" style={{ background: p.color, display: "inline-block", marginRight: 7 }} />{p.name}</b><span className="dt__sub">{p.group}</span></span>
                  <span className="dt__item">{p.coo}</span>
                  <span className="num">{window.yuan(p.gmv)}</span>
                  <span><Delta value={p.delta} /></span>
                  <span className="num">{window.yuan(p.profitEmp)}</span>
                  <span className="num" style={{ color: "var(--accent-ink)" }}>{window.yuan(p.profitBoss)}</span>
                  <span className={"num" + (p.margin < 20 ? " ovstat--warn" : "")}>{p.margin}%</span>
                </div>
                {p.gmvSourceNote && (
                  <div className="dt__sub" style={{ padding: "0 4px 12px", color: "var(--fg-3)", fontSize: 11, borderBottom: i === matrix.length - 1 ? "none" : "1px solid var(--border-soft)" }}>
                    ⚠ {p.gmvSourceNote}
                  </div>
                )}
              </React.Fragment>
            ))}
          </div>
        </div>
      </Card>
    </div>
  );
}

Object.assign(window, { KitPlatforms });