/* ZY console — 1688 · 投流 COO：leadgen 独立看板（1688_ads_daily_digest.leadgen.v1）。
   与电商 ROAS 渠道（KitAds/Sales.jsx）刻意分开：核心指标是 消耗/线索/询盘，
   ROI = 询盘成本(spend ÷ inquiries，越低越优)，绝不出现 ROAS/GMV 字样，也绝不共享其 KPI 头。
   本渠道现跑「智能投放」托管产品，平台侧无离散调价/暂停控件 —— 本页面【不建】任何受控写
   （无 KitGatedWrite/KitControlledAction 调用），建议只走「去 1688 后台调整」外链 + Hermes 反馈。 */
const DSADS1688 = window.ZYDesignSystem_d746df;

// 门店状态枚举 —— 与「投流 COO」ROAS 三态、与下面 attention 的 4 态判定枚举，均为不同词表，
// 各自独立映射，不共用一份颜色表（KitEnumBadge 约定）。
const STORE_STATUS_MAP = {
  "止损": { label: "止损", tone: "danger" },
  "注意": { label: "注意", tone: "warn" },
  "健康": { label: "健康", tone: "good" },
  "数据未取到": { label: "数据未取到", tone: "muted" },
  // data.js 现有第 5 态（学习期新计划，尚未产生询盘数据）——独立渲染为学习期保护徽标，
  // 不強行并入上面 4 态，也不当"数据未取到"处理（成因不同：一个是抓取失败，一个是新计划尚在保护期）。
  "学习期": { label: "学习期·暂不动", tone: "accent" },
};

// attention 卡片的判定枚举 —— 止损/观察/限流/加码（健康不进 attention，上游已过滤）。
// data.js 当前样例里也出现"注意"（店铺态词汇），这里一并兜底映射，避免裸值兜底成 fallbackTone。
const ASSESSMENT_STATUS_MAP = {
  "止损": { label: "止损", tone: "danger" },
  "观察": { label: "观察", tone: "warn" },
  "注意": { label: "观察", tone: "warn" },
  "限流": { label: "限流", tone: "warn" },
  "加码": { label: "加码 · 优质", tone: "good" },
};

// suggested_direction → 箭头图标（枚举：down/up/watch/pause）。data.js 目前把这个字段填成了
// 一句中文提示（"去 1688 后台调整"）而不是四选一枚举原值；两种取值都兜底渲染，不崩、不裸英文。
const DIRECTION_ICON = { down: "↓降", up: "↑加", watch: "👁盯", pause: "⏸暂停" };

// Hermes 反馈三选一（A6）：suppress / adopt / reject；止损卡仍显示反馈入口，但选"别再提醒"时
// 要额外提示"止损不可静音"，不能真的抑制掉。
const FEEDBACK_OPTS = [
  { decision: "suppress", label: "别再提醒这个 / 这是正常的" },
  { decision: "adopt", label: "采纳了，这就去调" },
  { decision: "reject", label: "不接受 / 撤销" },
];

function fmtInquiryCost(v) {
  return (v === null || v === undefined || Number.isNaN(v)) ? "—" : ("¥" + Number(v).toFixed(2));
}

/* 单店 4 态判定 + 学习期保护，都走同一个 KitEnumBadge，只是各自传自己的 map（不共享通用色表）。 */
function StoreStatusBadge({ status }) {
  const EnumBadge = window.KitEnumBadge;
  return <EnumBadge value={status} map={STORE_STATUS_MAP} fallbackTone="muted" />;
}

function AssessmentStatusBadge({ status }) {
  const EnumBadge = window.KitEnumBadge;
  return <EnumBadge value={status} map={ASSESSMENT_STATUS_MAP} fallbackTone="muted" />;
}

/* 1688 Hermes 反馈弹层 —— 不复用 KitHermesFeedback（那是仓储/采购的抑制/解决/记一笔三选一，
   词表不同）；这里按 A6 契约做 suppress/adopt/reject 三选一 + 可选备注，一键提交=已审批
   （网关按登录会话补 reviewer/decision_ref，本页不采集、不传老板写入口令 —— A6 明确写明
   这不是业务写，是给 Hermes 的学习偏好）。 */
function Ads1688FeedbackModal({ item, onClose, onSubmit }) {
  const { Icon } = DSADS1688;
  const isStoploss = item.status === "止损";
  const [decision, setDecision] = React.useState(isStoploss ? "adopt" : FEEDBACK_OPTS[0].decision);
  const [note, setNote] = React.useState("");
  const [warnSuppress, setWarnSuppress] = React.useState(false);
  const [showPayload, setShowPayload] = React.useState(false);
  const payload = {
    store: item.store,
    assessment: { product: item.product, name: item.name, status: item.status },
    decision, note: note.trim(),
  };
  const pick = (d) => {
    if (d === "suppress" && isStoploss) { setWarnSuppress(true); return; }
    setWarnSuppress(false);
    setDecision(d);
  };
  const submit = () => {
    if (decision === "suppress" && isStoploss) { setWarnSuppress(true); return; }
    onSubmit(item, decision, note.trim());
  };
  return (
    <div className="camodal__scrim" onClick={onClose}>
      <div className="camodal camodal--sm" onClick={e => e.stopPropagation()}>
        <div className="camodal__head">
          <span className="camodal__ic camodal__ic--hermes"><Icon name="Sparkles" size={20} /></span>
          <div>
            <div className="camodal__t">Hermes 反馈 · 1688 投流</div>
            <div className="camodal__sub">{item.store_name} · {item.product || item.name}</div>
          </div>
          <button className="camodal__x" onClick={onClose}><Icon name="X" size={17} /></button>
        </div>
        <div className="camodal__body">
          <div className="fbadv"><Icon name="Info" size={14} /><span>教 Hermes 而已 —— 只改明日投流日报<b>推送什么</b>，<b>不改预算、不改出价、不暂停投放</b>。你就是审批人，审批人/审批引用由网关按登录会话补全。</span></div>
          <div className="fbopts">
            {FEEDBACK_OPTS.map(o => (
              <button key={o.decision} className={"fbopt" + (decision === o.decision ? " is-on" : "")} onClick={() => pick(o.decision)}>
                <span className="fbopt__dot" />
                <span className="fbopt__l">{o.label}</span>
              </button>
            ))}
          </div>
          {isStoploss && (
            <div className="fbadv" style={{ borderColor: "var(--negative)" }}>
              <Icon name="ShieldAlert" size={14} />
              <span><b>止损不可静音</b> —— 止损卡即使选择"别再提醒"，明日仍会重新出现，不会被抑制掉。</span>
            </div>
          )}
          {warnSuppress && (
            <div className="fbadv" style={{ borderColor: "var(--warning)" }}>
              <Icon name="TriangleAlert" size={14} />
              <span>止损项不可抑制，已为你保留"采纳了，这就去调"。</span>
            </div>
          )}
          <textarea className="fbnote" placeholder="补一句话（可选，例如：这个款季节性的，这周这样正常）" value={note} onChange={e => setNote(e.target.value)} />
          <button className="fbpayload__t" onClick={() => setShowPayload(v => !v)}>
            <Icon name={showPayload ? "ChevronDown" : "ChevronRight"} size={13} />系统审计 · 提交材料
          </button>
          {showPayload && (
            <div className="popayload">
              <div className="popayload__cap"><Icon name="Code" size={12} />审批人 / 审批引用由网关按登录会话补全，不在此发送</div>
              <pre>{JSON.stringify(payload, null, 2)}</pre>
            </div>
          )}
        </div>
        <div className="camodal__foot">
          <span className="camodal__note"><Icon name="Sparkles" size={13} />advisory · 不产生任何投流业务写</span>
          <span style={{ display: "flex", gap: 8 }}>
            <button className="btn btn--ghost" onClick={onClose}>取消</button>
            <button className="btn btn--solid" onClick={submit}>提交反馈</button>
          </span>
        </div>
      </div>
    </div>
  );
}

function KitAds1688() {
  const { Card, SectionHead, Pill, Button, Icon, EmptyBox } = DSADS1688;
  const K = window.KIT, S = window.KitStrip, Kp = window.KitKpi, fmtMoney = window.fmtMoney;
  const D = K.ads1688Digest;

  const [fb, setFb] = React.useState(null); // attention item currently in feedback flow
  const [feedback, setFeedback] = React.useState({}); // priority-key -> { decision, note }

  if (!D) {
    return (
      <div className="view viewfade">
        <S icon="Megaphone" title="1688 · 投流 COO" mode="投流监督（引流口径）" judge="1688 投流日报读模型尚未接入" src="1688 投流日报 · 询盘口径（只读）" tone="neutral" toneLabel="待接入" />
        <EmptyBox title="1688 投流 · 未接入真实只读数据" reason="该渠道尚未连接真实投流日报接口；按系统规则，缺源时显示空状态，不使用演示数据补位。接入后这里显示消耗/询盘/询盘成本与门店状态判定。" />
      </div>
    );
  }

  const t = D.totals || {};
  const stores = D.stores || [];
  const attention = [...(D.attention || [])].sort((a, b) => (b.priority || 0) - (a.priority || 0));
  const learn = D.learning_applied || {};

  const feedbackKey = (item) => item.store + "|" + item.product + "|" + item.name + "|" + item.status;
  const submitFeedback = (item, decision, note) => {
    // POST /ops/boss/1688-ads-coo/hermes/feedback { store, assessment:{product,name,status}, decision, note }
    // reviewer / decision_ref 由网关按登录会话补全，本页不采集、不发送。
    setFeedback(m => ({ ...m, [feedbackKey(item)]: { decision, note } }));
    setFb(null);
  };
  const undoFeedback = (item) => setFeedback(m => { const n = { ...m }; delete n[feedbackKey(item)]; return n; });

  const tplStore = "1.1fr 0.9fr 0.9fr 0.9fr 1.6fr 1fr";

  return (
    <div className="view viewfade">
      <S icon="Megaphone" title="1688 · 投流 COO" mode="投流监督 · 引流口径（询盘成本）"
        judge="智能投放托管产品 · 只读监督，不改预算/出价/暂停 · 询盘成本越低越优，学习期计划不做降价/暂停/加码建议"
        src="1688 投流日报 · 询盘口径（只读）" tone="good" toneLabel="只读已接入" />

      <div className="pqhead">
        <Icon name="Siren" size={16} />
        <span className="pqhead__t">{D.headline}</span>
        <span className="pqhead__at"><Icon name="Clock" size={12} />生成于 {D.generated_at}</span>
      </div>

      <div className="kpigrid">
        <Kp label="总消耗" value={fmtMoney(t.spend, "CNY")} hint="今日 · 4 店合计" icon="Wallet" />
        <Kp label="询盘" value={t.inquiries ?? "—"} hint="今日线索转询盘" feat />
        <Kp label="平均询盘成本" value={fmtInquiryCost(t.blended_inquiry_cost)} hint="消耗 ÷ 询盘 · 越低越优" />
        <Kp label="在投店数" value={t.store_count ?? "—"} hint={t.ready_store_count != null && t.ready_store_count !== t.store_count ? "数据就绪 " + t.ready_store_count + " / " + t.store_count : "数据就绪"} />
      </div>

      <div className="ovgrid ovgrid--2">
        <Card>
          <SectionHead title="4 店总览" icon="Store" sub="门店级消耗 / 询盘成本 / 红线 / 最差产品 · 数据未取到=灰态，不计入异常"
            right={<Pill tone="neutral" soft>{stores.length} 店</Pill>} />
          <div className="dtscroll"><div className="dt" style={{ minWidth: 720 }}>
            <div className="dt__head" style={{ gridTemplateColumns: tplStore }}>
              <span>门店</span><span>状态</span><span>消耗</span><span>询盘成本</span><span>最差产品</span><span>周期</span>
            </div>
            {stores.map((st, i) => {
              const blocked = st.status === "数据未取到";
              return (
                <div className={"dt__row" + (blocked ? " whalert--mute" : "") + (st.store_inquiry_cost_redline_breached ? " is-bad" : "")} style={{ gridTemplateColumns: tplStore }} key={st.store + i}>
                  <span className="dt__name"><b>{st.store_name}</b>{blocked && st.blocked_reason && <span className="dt__sub">{st.blocked_reason}</span>}</span>
                  <span><StoreStatusBadge status={st.status} /></span>
                  <span className="num">{st.total_spend === 0 ? <span className="pqmuted">未投放</span> : fmtMoney(st.total_spend, "CNY")}</span>
                  <span className={"num" + (st.store_inquiry_cost_redline_breached ? " ovstat--danger" : "")}>
                    {fmtInquiryCost(st.blended_inquiry_cost)}
                    {st.store_inquiry_cost_redline_breached && <span className="whalert__src" style={{ marginLeft: 6 }}>破红线</span>}
                  </span>
                  <span>
                    {(st.top_problems || []).length > 0
                      ? <span style={{ display: "flex", flexWrap: "wrap", gap: 4 }}>
                          {st.top_problems.slice(0, 5).map((p, pi) => (
                            <span key={pi} style={{ display: "inline-flex", alignItems: "center", gap: 4, fontSize: 11.5 }}>
                              {p.name}<StoreStatusBadge status={p.status} />
                            </span>
                          ))}
                        </span>
                      : <span className="pqmuted">{blocked ? "—" : "无"}</span>}
                  </span>
                  <span className="dt__sub2">{st.date_range || "—"}</span>
                </div>
              );
            })}
            {stores.length === 0 && <div className="emptyrow"><Icon name="Store" size={14} />暂无门店数据</div>}
          </div></div>
        </Card>

        <Card>
          <SectionHead title="需关注" icon="TriangleAlert" sub="跨店按 priority 降序 · 止损红置顶 · 学习期计划不给方向性建议"
            right={<Pill tone={attention.length ? "warn" : "good"} soft>{attention.length} 条</Pill>} />
          <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
            {attention.map((a, i) => {
              const key = feedbackKey(a);
              const fbState = feedback[key];
              const learning = (a.signals || []).some(s => s === "in_learning_phase" || String(s).includes("学习期"));
              const rec = a.recommendation || {};
              const dirRaw = rec.suggested_direction;
              const dirIcon = DIRECTION_ICON[dirRaw]; // data.js 现填的是一句中文提示而非四选一枚举，兜底原样显示
              return (
                <div key={key + i} className={"whalert" + (a.status === "止损" ? " whalert--neg" : "")} style={{ alignItems: "flex-start" }}>
                  <span className={"whalert__sev whalert__sev--" + (a.status === "止损" ? "danger" : a.status === "加码" ? "neutral" : "warn")}>{i + 1}</span>
                  <div className="whalert__b">
                    <div className="whalert__t">
                      {a.store_name}<span className="dt__sub"> · {a.product || a.name}</span>
                      <AssessmentStatusBadge status={a.status} />
                      {learning && <Pill tone="accent" soft>学习期·暂不动</Pill>}
                    </div>
                    <div className="whalert__m">
                      {(a.signals || []).map((s, si) => <Pill key={si} tone="neutral" soft>{s}</Pill>)}
                    </div>
                    {rec.action && (
                      <div className="pqhint" style={{ marginTop: 6 }}>
                        <Icon name="ArrowRight" size={11} />
                        建议方向：{rec.action}{dirIcon ? " " + dirIcon : ""}{rec.rationale ? " · " + rec.rationale : ""}
                      </div>
                    )}
                    {rec.before && (
                      <div className="whalert__m" style={{ marginTop: 4 }}>
                        <span className="dt__sub2">当前询盘成本 <b className="num">{fmtInquiryCost(rec.before.inquiry_cost)}</b></span>
                        <span className="dt__sub2">当前消耗 <b className="num">{fmtMoney(rec.before.spend, "CNY")}</b></span>
                      </div>
                    )}
                  </div>
                  <div className="whalert__act" style={{ flexDirection: "column", alignItems: "flex-end", gap: 6 }}>
                    <a className="ttlink" href="https://p4p.1688.com" target="_blank" rel="noopener noreferrer">去 1688 后台调整<Icon name="ArrowUpRight" size={12} /></a>
                    {fbState
                      ? <span className="fbdone" title={fbState.note || fbState.decision}><Icon name="Sparkles" size={12} />已反馈·明日生效<button className="fbdone__u" onClick={() => undoFeedback(a)}>撤销</button></span>
                      : <Button variant="ghost" size="sm" onClick={() => setFb(a)}>反馈 / 教 Hermes</Button>}
                  </div>
                </div>
              );
            })}
            {attention.length === 0 && <div className="emptyrow"><Icon name="CircleCheck" size={16} />当前无需关注项</div>}
          </div>
        </Card>
      </div>

      <Card>
        <SectionHead title="Hermes 学习" icon="Sparkles" sub="advisory · 仅影响明日推送，不产生任何投流业务写" />
        <div className="hlearn" style={{ fontSize: 13 }}>
          <Icon name="Sparkles" size={14} />
          Hermes 今天替你挡掉 {D.suppressed_count ?? 0} 条噪音，共 {learn.suppression_rules ?? 0} 条已学规则
        </div>
        <div className="finnote">
          <div className="finnote__i"><Icon name="Undo2" size={13} />想撤销某条已学规则？在上方对应卡片点「反馈 / 教 Hermes」→选「不接受 / 撤销」即可归档（reject），不在此处集中管理明细。</div>
          <div className="finnote__i"><Icon name="ShieldCheck" size={13} />本页只读 · read_only={String(!!D.read_only)} · executable={String(!!D.executable)} · 无业务写发生</div>
        </div>
      </Card>

      {fb && <Ads1688FeedbackModal item={fb} onClose={() => setFb(null)} onSubmit={submitFeedback} />}
    </div>
  );
}

Object.assign(window, { KitAds1688 });