/* ZY console — 订单中心：全部订单 / 异常处理 / 待审核。订单只有一个家：页内分段切换。 */
const DSORD = window.ZYDesignSystem_d746df;

const ORD_TABS = ["全部订单", "异常处理"];
const SHIP_TONE = { "已发货": "good", "待发货": "warn", "已签收": "good", "已退款": "neutral" };
const EXC_TONE = { "待处理": "warn", "处理中": "accent", "已修正": "good", "已关闭": "neutral" };
const SEV_TONE = { "高": "danger", "中": "warn", "低": "neutral" };
const RV_TONE = { "待审核": "warn", "已通过": "good", "已拒绝": "danger" };

/* —— 全部订单 —— */
const PERIOD_META = {
  "日": { mult: 1, hint: "当日聚合 · 最新业务日", scope: "今日" },
  "周": { mult: 6.4, hint: "近 7 日聚合", scope: "本周" },
  "月": { mult: 25.8, hint: "本月累计 · 权威月度汇总", scope: "本月" },
};

function AllOrders({ onOrder, period }) {
  const { Card, SectionHead, Pill, Icon, Delta } = DSORD;
  const K = window.KIT;
  const plats = ["全部", ...Array.from(new Set(K.orders.map(o => o.plat)))];
  const [plat, setPlat] = React.useState("全部");
  const [abnOnly, setAbnOnly] = React.useState(false);
  let rows = plat === "全部" ? K.orders : K.orders.filter(o => o.plat === plat);
  if (abnOnly) rows = rows.filter(o => o.abn);

  const pm = PERIOD_META[period] || PERIOD_META["日"];
  const scale = v => Math.round(v * pm.mult);
  const gmv = scale(rows.reduce((s, o) => s + o.amount, 0));
  const profit = scale(rows.reduce((s, o) => s + o.profit, 0));
  const empProfit = scale(rows.reduce((s, o) => s + o.profit + o.freightOut, 0));
  const orderN = scale(rows.length);
  const abnN = rows.filter(o => o.abn).length;
  const tpl = "0.8fr 1.3fr 0.9fr 0.8fr 1.5fr 0.5fr 0.8fr 0.7fr 0.7fr";

  return (
    <div className="view">
      <div className="kpigrid">
        <Card className="kpi kpi--feat" hover><div className="kpi__top"><span className="kpi__label">销售额</span><Delta value={9.4} /></div>
          <div className="kpi__val num">{window.yuan(gmv)}</div><div className="kpi__hint">{orderN} 单 · {pm.hint}</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(empProfit)}</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(profit)}</div><div className="kpi__hint">全成本口径 · {pm.scope}</div></Card>
        <Card className="kpi" hover><div className="kpi__top"><span className="kpi__label">异常订单</span><Pill tone={abnN ? "warn" : "good"} soft>{abnN ? "需处理" : "正常"}</Pill></div>
          <div className={"kpi__val num" + (abnN ? " ovstat--warn" : "")}>{abnN}</div><div className="kpi__hint">缺货 / 改址 / 负毛利</div></Card>
      </div>

      <Card>
        <SectionHead title="销售订单明细" icon="ScrollText" sub="点击任意订单打开详情抽屉 · 物流 / 成本 / 双口径利润"
          right={<div className="rvbar__sels" style={{ alignItems: "center" }}>
            <div className="rvsel" style={{ flexDirection: "row", alignItems: "center", gap: 7 }}>
              <span className="rvsel__l">平台</span>
              <select className="rvsel__s" style={{ minWidth: 120, padding: "6px 10px" }} value={plat} onChange={e => setPlat(e.target.value)}>
                {plats.map(p => <option key={p} value={p}>{p}</option>)}
              </select>
            </div>
            <button className={"fchip" + (abnOnly ? " is-on" : "")} onClick={() => setAbnOnly(v => !v)}>仅异常</button>
          </div>} />
        {rows.length === 0 ? (
          <div className="emptyrow"><Icon name="CircleCheck" size={16} />当前筛选下没有订单</div>
        ) : (
          <div className="dtscroll">
            <div className="dt" style={{ minWidth: 940 }}>
              <div className="dt__head" style={{ gridTemplateColumns: tpl }}>
                <span>时间</span><span>平台 · 店铺</span><span>买家</span><span>业务员</span><span>SKU</span><span>数量</span><span>销售额</span><span>发货</span><span>状态</span>
              </div>
              {rows.map(o => (
                <div className={"dt__row dt__row--click" + (o.abn ? " is-bad" : "")} style={{ gridTemplateColumns: tpl }} key={o.id} onClick={() => onOrder(o)}>
                  <span className="dt__date">{o.at}</span>
                  <span className="dt__name"><b>{o.plat}</b><span className="dt__sub">{o.store}</span></span>
                  <span className="dt__item">{o.buyer}</span>
                  <span className="dt__item">{o.rep}</span>
                  <span className="dt__item">{o.sku}</span>
                  <span className="num dt__qty">{o.qty}</span>
                  <span className="num">{window.yuan(o.amount)}</span>
                  <span><Pill tone={SHIP_TONE[o.ship] || "neutral"} soft>{o.ship}</Pill></span>
                  <span>{o.abn ? <Pill tone="warn" soft>{o.abnType}</Pill> : <Pill tone="good" soft>正常</Pill>}</span>
                </div>
              ))}
            </div>
          </div>
        )}
      </Card>
    </div>
  );
}

/* —— 异常处理 —— */
function ExceptionOrders({ onException }) {
  const { Card, SectionHead, Pill, Icon } = DSORD;
  const K = window.KIT;
  const FILTERS = ["全部", "待处理", "处理中", "已修正", "已关闭"];
  const [sf, setSf] = React.useState("全部");
  const [highOnly, setHighOnly] = React.useState(false);
  let rows = sf === "全部" ? K.exceptions : K.exceptions.filter(r => r.status === sf);
  if (highOnly) rows = rows.filter(r => r.sev === "高");

  const pending = K.exceptions.filter(r => r.status === "待处理").length;
  const highPending = K.exceptions.filter(r => r.status === "待处理" && r.sev === "高").length;
  const inProg = K.exceptions.filter(r => r.status === "处理中").length;
  const done = K.exceptions.filter(r => r.status === "已修正" || r.status === "已关闭").length;
  const tpl = "0.8fr 0.6fr 0.9fr 1.2fr 1.3fr 0.7fr 0.8fr";

  return (
    <div className="view">
      <Card className="ovstrip">
        <div className="ovstrip__head">
          <span className="ovstrip__orb"><Icon name="TriangleAlert" size={20} /></span>
          <div className="ovstrip__id">
            <div className="ovstrip__title">异常订单处理台<span className="ovstrip__mode"><span className="ovstrip__dot" />业务处理</span></div>
            <div className="ovstrip__judge">缺货 / 错发 / 物流停滞 / 破损 / 退款纠纷 · 受理、关闭与金额修正</div>
          </div>
          <div className="ovstrip__src">
            <span className="ovstrip__srclabel">数据源</span>
            <span className="ovstrip__srcval">聚水潭 · abnormal_read_model</span>
            <Pill tone="good" soft>已接入</Pill>
          </div>
        </div>
        <div className="ovstrip__intro"><Icon name="Info" size={14} />
          <span>异常单已接入真实处理：受理 / 关闭（状态更新）与修正金额 / 运费 / 成本 / 提成（订单修正）。修正会<b>触发重算</b>，系统<b>不自动退款</b>。</span>
        </div>
      </Card>

      <div className="kpigrid">
        <Card className="kpi" hover><div className="kpi__top"><span className="kpi__label">待处理异常</span><Pill tone="warn" soft>需处理</Pill></div>
          <div className={"kpi__val num" + (pending ? " ovstat--warn" : "")}>{pending}</div><div className="kpi__hint">尚未受理</div></Card>
        <Card className="kpi kpi--feat" hover><div className="kpi__top"><span className="kpi__label">高优先级待处理</span><Pill tone="danger" soft>优先</Pill></div>
          <div className={"kpi__val num" + (highPending ? " ovstat--danger" : "")}>{highPending}</div><div className="kpi__hint">缺货 / 负毛利 / 退款纠纷</div></Card>
        <Card className="kpi" hover><div className="kpi__top"><span className="kpi__label">处理中</span><Pill tone="accent" soft>跟进</Pill></div>
          <div className="kpi__val num">{inProg}</div><div className="kpi__hint">已受理待闭环</div></Card>
        <Card className="kpi" hover><div className="kpi__top"><span className="kpi__label">已修正 / 已关闭</span></div>
          <div className="kpi__val num">{done}</div><div className="kpi__hint">处理完成</div></Card>
      </div>

      <Card>
        <SectionHead title="异常订单明细" icon="TriangleAlert" sub="点击任意异常单打开处理详情 · 受理 / 关闭 / 修正"
          right={<div className="fchips">
            {FILTERS.map(s => <button key={s} className={"fchip" + (sf === s ? " is-on" : "")} onClick={() => setSf(s)}>{s}</button>)}
            <button className={"fchip" + (highOnly ? " is-on" : "")} onClick={() => setHighOnly(v => !v)}>仅高优先级</button>
          </div>} />
        {rows.length === 0 ? (
          <div className="emptyrow"><Icon name="CircleCheck" size={16} />当前筛选下没有异常单</div>
        ) : (
          <div className="dtscroll">
            <div className="dt" style={{ minWidth: 820 }}>
              <div className="dt__head" style={{ gridTemplateColumns: tpl }}>
                <span>异常号</span><span>严重</span><span>类型</span><span>店铺</span><span>SKU</span><span>金额</span><span>状态</span>
              </div>
              {rows.map(r => (
                <div className="dt__row dt__row--click" style={{ gridTemplateColumns: tpl }} key={r.id} onClick={() => onException(r)}>
                  <span className="dt__id num">{r.id}</span>
                  <span><Pill tone={SEV_TONE[r.sev]} soft>{r.sev}</Pill></span>
                  <span className="dt__item">{r.type}</span>
                  <span className="dt__sub2">{r.store}</span>
                  <span className="dt__sub2">{r.sku}</span>
                  <span className="num">{window.yuan(r.amount)}</span>
                  <span><Pill tone={EXC_TONE[r.status]} soft>{r.status}</Pill></span>
                </div>
              ))}
            </div>
          </div>
        )}
      </Card>
    </div>
  );
}

/* —— 提成核发已统一归入「财务 COO › 提成核发」(employee_commissions)，
   订单中心不再重复做逐单提成审核：销售 COO 只管订单流转 + 异常处理。 —— */

function KitOrders({ onOrder, onException }) {
  const { Icon, Segmented } = DSORD;
  const K = window.KIT;
  const [tab, setTab] = React.useState("全部订单");
  const [period, setPeriod] = React.useState("日");
  const abN = K.exceptions.filter(e => e.status === "待处理").length;
  const meta = {
    "全部订单": { ic: "ScrollText", s: "全平台订单明细 · 物流 / 成本 / 双口径利润", b: null },
    "异常处理": { ic: "TriangleAlert", s: "缺货 / 错发 / 退款纠纷 · 受理 / 关闭 / 修正", b: abN },
  };
  return (
    <div className="view viewfade">
      <div className="periodbar">
        <span className="periodbar__l"><Icon name="CalendarRange" size={15} />数据口径</span>
        <Segmented options={["日", "周", "月"]} value={period} onChange={setPeriod} />
      </div>
      <div className="hubtabs">
        {ORD_TABS.map(t => {
          const m = meta[t];
          return (
            <button key={t} className={"hubtab" + (tab === t ? " is-on" : "")} onClick={() => setTab(t)}>
              <span className="hubtab__ic"><Icon name={m.ic} size={16} /></span>
              <span className="hubtab__tx">
                <span className="hubtab__t">{t}{m.b > 0 && <span className="hubtab__badge num">{m.b}</span>}</span>
                <span className="hubtab__s">{m.s}</span>
              </span>
            </button>
          );
        })}
      </div>
      {tab === "全部订单" && <AllOrders onOrder={onOrder} period={period} />}
      {tab === "异常处理" && <ExceptionOrders onException={onException} />}
    </div>
  );
}

Object.assign(window, { KitOrders });