// 干部管理系统 — 钉钉移动端扩展子视图（6 个）
// 包含：晋升管理 / 奖惩记录 / 人才九宫格 / 操作记录 / 消息通知 / 审批详情
// 依赖 shared.jsx 暴露的 window.Icon / Avatar / Badge / CADRES / DEPARTMENTS / LEVELS
// 通过 window.MOBILE_MODULES 暴露给 mobile-app.jsx 使用
(function () {
  "use strict";
  const { useState, useMemo } = React;
  const Icon = window.Icon;
  const Avatar = window.Avatar;
  const Badge = window.Badge;
  const CADRES = window.CADRES;
  const LEVELS = window.LEVELS;

  // ============ 通用：标题栏（带返回） ============
  function SubHeader({ title, onBack, rightIcon }) {
    return (
      <div className="app-header" style={{ paddingBottom: "12px" }}>
        <div className="ah-top">
          <button className="ah-back" onClick={onBack}><Icon name="back" /></button>
          <div className="ah-title">{title}</div>
          {rightIcon ? <div className="ah-ico"><Icon name={rightIcon} /></div> : <div style={{ width: 30 }}></div>}
        </div>
      </div>
    );
  }

  function toneColors(tone) {
    const bg = { r: "var(--red-light)", b: "var(--blue-light)", y: "var(--gold-light)", g: "#DCFCE7" };
    const fg = { r: "var(--red)", b: "var(--blue)", y: "var(--gold)", g: "var(--success)" };
    return { bg: bg[tone] || bg.b, fg: fg[tone] || fg.b };
  }

  // =========================================================================
  // 1. 晋升管理移动版
  // =========================================================================
  const PROMOTION_STAGES = ["民主推荐", "组织考察", "讨论决定", "任前公示", "任职"];

  function PromotionMobile({ onBack, onOpen }) {
    const cases = [
      { id: "PC2026-001", cadreId: "C20260008", name: "郑文涛", avatar: "郑", gender: "男", from: "副主任 · 副处级", to: "主任 · 正处级", dept: "技术研发中心", stage: 3, status: "公示中", statusTone: "y", initiator: "林海峰", time: "06-22" },
      { id: "PC2026-002", cadreId: "C20260011", name: "何静", avatar: "何", gender: "女", from: "副主任 · 副处级", to: "主任 · 正处级", dept: "党委办公室", stage: 2, status: "待讨论", statusTone: "b", initiator: "党委办", time: "06-18" },
      { id: "PC2026-003", cadreId: "C20260015", name: "韩雪", avatar: "韩", gender: "女", from: "副处长 · 副科级", to: "处长 · 正科级", dept: "组织部", stage: 1, status: "考察中", statusTone: "g", initiator: "组织部", time: "06-25" },
    ];
    const done = [
      { cadreId: "C20260018", name: "秦海洋", avatar: "秦", gender: "男", from: "副部长", to: "部长", dept: "市场营销部", date: "2026-05" },
      { cadreId: "C20260007", name: "吴永康", avatar: "吴", gender: "男", from: "副部长", to: "部长", dept: "安全生产部", date: "2026-03" },
      { cadreId: "C20260006", name: "周敏", avatar: "周", gender: "女", from: "薪酬主管", to: "副部长", dept: "人力资源部", date: "2026-01" },
    ];

    return (
      <div className="app-body slide">
        <SubHeader title="晋升管理" onBack={onBack} rightIcon="filter" />

        <div className="ap-summary">
          <div className="ap-stat"><div className="ap-num" style={{ color: "var(--red)" }}>{cases.length}</div><div className="ap-lbl">在办提拔</div></div>
          <div className="ap-stat"><div className="ap-num">1</div><div className="ap-lbl">公示中</div></div>
          <div className="ap-stat"><div className="ap-num">{done.length}</div><div className="ap-lbl">本月任职</div></div>
        </div>

        <div className="section-h" style={{ padding: "4px 18px 10px" }}><h3>在办案例</h3></div>
        <div style={{ paddingBottom: 14 }}>
          {cases.map((pc) => (
            <div className="ap-card" key={pc.id} onClick={() => onOpen(pc.cadreId)} style={{ cursor: "pointer" }}>
              <div className="ap-head">
                <Avatar cadre={pc} size={36} />
                <div className="ap-main">
                  <div className="ap-type">{pc.name} · {pc.dept}</div>
                  <div className="ap-time">{pc.initiator} 发起 · {pc.time}</div>
                </div>
                <span className={"ap-status st-" + pc.statusTone}>{pc.status}</span>
              </div>
              <div className="ap-title" style={{ marginBottom: 12 }}>{pc.from} <span style={{ color: "var(--text3)" }}>→</span> <span style={{ color: "var(--red)" }}>{pc.to}</span></div>
              <div className="stage-track">
                {PROMOTION_STAGES.map((s, i) => (
                  <div key={s} className={"stg" + (i < pc.stage ? " done" : i === pc.stage ? " cur" : "")}>
                    <span className="stg-dot">{i < pc.stage ? "✓" : i + 1}</span>
                    <span className="stg-lbl">{s}</span>
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>

        <div className="section-h" style={{ padding: "4px 18px 10px" }}><h3>本月任职记录</h3></div>
        <div className="card" style={{ margin: "0 14px 18px", padding: 0 }}>
          {done.map((d) => (
            <div key={d.cadreId} className="person" onClick={() => onOpen(d.cadreId)}>
              <Avatar cadre={d} size={36} />
              <div className="pc">
                <div className="pn" style={{ fontSize: 13.5 }}>{d.name}</div>
                <div className="pd">{d.from} → <span style={{ color: "var(--red)", fontWeight: 600 }}>{d.to}</span></div>
              </div>
              <span style={{ fontSize: 11, color: "var(--text3)" }}>{d.date}</span>
            </div>
          ))}
        </div>
      </div>
    );
  }

  // =========================================================================
  // 2. 奖惩记录移动版
  // =========================================================================
  function RewardMobile({ onBack, onOpen }) {
    const [seg, setSeg] = useState("all");

    const items = useMemo(() => {
      const list = [];
      CADRES.forEach((c) => {
        c.rewards.forEach((r) => list.push({
          id: c.id + "-r-" + r.title, cadreId: c.id, name: c.name, avatar: c.avatar, gender: c.gender,
          dept: c.dept, kind: "reward", title: r.title, org: r.org, type: r.type, date: r.date,
        }));
        c.punish.forEach((p) => list.push({
          id: c.id + "-p-" + p.title, cadreId: c.id, name: c.name, avatar: c.avatar, gender: c.gender,
          dept: c.dept, kind: "punish", title: p.title, org: p.org, type: p.type, date: p.date,
        }));
      });
      return list.sort((a, b) => (a.date < b.date ? 1 : -1));
    }, []);

    const filtered = items.filter((r) => seg === "all" || r.kind === seg);
    const rewardCount = items.filter((r) => r.kind === "reward").length;
    const punishCount = items.filter((r) => r.kind === "punish").length;
    const thisYear = items.filter((r) => r.date.startsWith("2026")).length;

    return (
      <div className="app-body slide">
        <SubHeader title="奖惩记录" onBack={onBack} rightIcon="plus" />

        <div className="ap-summary">
          <div className="ap-stat"><div className="ap-num" style={{ color: "var(--success)" }}>{rewardCount}</div><div className="ap-lbl">累计表彰</div></div>
          <div className="ap-stat"><div className="ap-num" style={{ color: "var(--danger)" }}>{punishCount}</div><div className="ap-lbl">惩戒</div></div>
          <div className="ap-stat"><div className="ap-num">{thisYear}</div><div className="ap-lbl">本年新增</div></div>
        </div>

        <div className="seg-tabs seg-three">
          <button className={seg === "all" ? "active" : ""} onClick={() => setSeg("all")}>全部 ({items.length})</button>
          <button className={seg === "reward" ? "active" : ""} onClick={() => setSeg("reward")}>表彰</button>
          <button className={seg === "punish" ? "active" : ""} onClick={() => setSeg("punish")}>惩戒</button>
        </div>

        <div style={{ paddingBottom: 18 }}>
          {filtered.map((r) => {
            const c = toneColors(r.kind === "reward" ? "y" : "r");
            return (
              <div className="ap-card" key={r.id} onClick={() => onOpen(r.cadreId)} style={{ cursor: "pointer" }}>
                <div className="ap-head">
                  <div className="ap-ic" style={{ background: c.bg, color: c.fg }}><Icon name={r.kind === "reward" ? "award" : "flag"} /></div>
                  <div className="ap-main">
                    <div className="ap-type">{r.name} · {r.dept}</div>
                    <div className="ap-time">{r.date} · {r.org}</div>
                  </div>
                  <span className={"ap-status st-" + (r.kind === "reward" ? "y" : "r")}>{r.kind === "reward" ? "表彰" : "惩戒"}</span>
                </div>
                <div className="ap-title">{r.title}</div>
                <div className="ap-sub">{r.type}</div>
              </div>
            );
          })}
          {filtered.length === 0 && <div className="mempty"><Icon name="award" /><div>暂无记录</div></div>}
        </div>
      </div>
    );
  }

  // =========================================================================
  // 3. 人才九宫格移动版
  // =========================================================================
  function band(s) { return s >= 4 ? "h" : s === 3 ? "m" : "l"; }

  const TALENT_ZONES = [
    { key: "l-h", label: "潜力股", tone: "blue" },
    { key: "m-h", label: "明日之星", tone: "gold" },
    { key: "h-h", label: "明星", tone: "red" },
    { key: "l-m", label: "待发展", tone: "gray" },
    { key: "m-m", label: "中坚", tone: "blue" },
    { key: "h-m", label: "业绩骨干", tone: "green" },
    { key: "l-l", label: "需关注", tone: "orange" },
    { key: "m-l", label: "稳定", tone: "gray" },
    { key: "h-l", label: "老黄牛", tone: "green" },
  ];

  function TalentMobile({ onBack, onOpen }) {
    const placed = useMemo(() => CADRES.map((c) => ({ ...c, _zone: band(c.performance) + "-" + band(c.potential) })), []);
    const [selZone, setSelZone] = useState("h-h");

    const selCadres = placed.filter((c) => c._zone === selZone);
    const selZoneInfo = TALENT_ZONES.find((z) => z.key === selZone);

    return (
      <div className="app-body slide">
        <SubHeader title="人才九宫格" onBack={onBack} rightIcon="download" />

        <div className="cycle-card">
          <div className="cy-title">业绩 × 潜力 分布</div>
          <div className="cy-sub" style={{ marginTop: 4 }}>共 {CADRES.length} 名干部 · 5 分制综合评定</div>
        </div>

        <div style={{ padding: "0 14px" }}>
          <div className="tb-grid-mini">
            {TALENT_ZONES.map((z) => {
              const n = placed.filter((c) => c._zone === z.key).length;
              return (
                <div key={z.key} className={"tb-cell-mini tone-" + z.tone + (selZone === z.key ? " sel" : "")} onClick={() => setSelZone(z.key)}>
                  <div className="tb-num-mini">{n}</div>
                  <div className="tb-lbl-mini">{z.label}</div>
                </div>
              );
            })}
          </div>
          <div className="board-axes-mini">
            <span>← 业绩</span>
            <span>潜力 ↓</span>
          </div>
        </div>

        <div className="section-h" style={{ padding: "14px 18px 10px" }}>
          <h3>{selZoneInfo.label} <span style={{ fontSize: 11, color: "var(--text3)", fontWeight: 400 }}>· {selCadres.length} 人</span></h3>
        </div>
        <div className="card" style={{ margin: "0 14px 18px", padding: 0 }}>
          {selCadres.map((c) => (
            <div key={c.id} className="person" onClick={() => onOpen(c.id)}>
              <Avatar cadre={c} size={36} />
              <div className="pc">
                <div className="pn" style={{ fontSize: 13.5 }}>{c.name}</div>
                <div className="pd">{c.position} · {c.dept}</div>
              </div>
              <Icon name="chevronRight" style={{ color: "var(--text3)", width: 16, height: 16 }} />
            </div>
          ))}
          {selCadres.length === 0 && <div className="mempty"><Icon name="users" /><div>该梯队暂无干部</div></div>}
        </div>
      </div>
    );
  }

  // =========================================================================
  // 4. 操作记录移动版
  // =========================================================================
  const OPERATION_LOGS = [
    { user: "林海峰", avatar: "林", action: "编辑干部信息", target: "陈志远 C20260001 · 职务字段", ip: "10.18.2.31", time: "今天 09:32", cat: "edit" },
    { user: "林海峰", avatar: "林", action: "数据导入", target: "朗新同步 · 11 条变动", ip: "10.18.2.31", time: "今天 09:14", cat: "upload" },
    { user: "系统", avatar: "系", action: "自动同步任务", target: "朗新定时增量同步", ip: "—", time: "今天 02:00", cat: "system" },
    { user: "王建华", avatar: "王", action: "新增奖惩记录", target: "高芸 · 三八红旗手", ip: "10.18.2.55", time: "昨天 16:08", cat: "edit" },
    { user: "林海峰", avatar: "林", action: "导出花名册", target: "全部门 24 条", ip: "10.18.2.31", time: "昨天 14:45", cat: "download" },
    { user: "曹建国", avatar: "曹", action: "查看干部详情", target: "朱国强 C20260017", ip: "10.18.3.12", time: "06-26 10:22", cat: "view" },
    { user: "韩雪", avatar: "韩", action: "发起晋升流程", target: "韩雪 · 副科长 → 处长", ip: "10.18.2.40", time: "06-25 11:04", cat: "edit" },
    { user: "林海峰", avatar: "林", action: "修改角色权限", target: "部门管理员 · R03", ip: "10.18.2.31", time: "06-24 17:30", cat: "system" },
  ];

  function OperationLogMobile({ onBack }) {
    const [filter, setFilter] = useState("all");
    const filters = [
      { id: "all", label: "全部" },
      { id: "edit", label: "编辑" },
      { id: "upload", label: "导入" },
      { id: "download", label: "导出" },
      { id: "system", label: "系统" },
    ];
    const filtered = OPERATION_LOGS.filter((l) => {
      if (filter === "all") return true;
      if (filter === "system") return l.cat === "system" || l.user === "系统";
      return l.cat === filter;
    });

    return (
      <div className="app-body slide">
        <SubHeader title="操作记录" onBack={onBack} rightIcon="download" />

        <div className="chips">
          {filters.map((f) => (
            <span key={f.id} className={"chip" + (filter === f.id ? " active" : "")} onClick={() => setFilter(f.id)}>{f.label}</span>
          ))}
        </div>

        <div className="card" style={{ margin: "0 14px 18px", padding: 0 }}>
          {filtered.map((l, i) => (
            <div key={i} className="log-row">
              <div className="av-mini" style={{ background: l.user === "系统" ? "var(--text3)" : "linear-gradient(135deg,var(--red),var(--red-dark))" }}>{l.avatar}</div>
              <div className="log-main">
                <div className="log-title"><b>{l.user}</b> · {l.action}</div>
                <div className="log-sub">{l.target}</div>
                <div className="log-meta">{l.time} · IP {l.ip}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    );
  }

  // =========================================================================
  // 5. 消息通知移动版
  // =========================================================================
  const MESSAGES = [
    { id: 1, icon: "trendUp", tone: "r", title: "郑文涛 晋升审批待您处理", sub: "技术研发中心副主任 → 主任 · 林海峰发起", time: "10 分钟前", read: false, cat: "审批" },
    { id: 2, icon: "assessment", tone: "b", title: "2026 年度考核 · 上级评价阶段已开始", sub: "请于 07-15 前完成 5 名下属干部的评价", time: "1 小时前", read: false, cat: "考核" },
    { id: 3, icon: "award", tone: "y", title: "陈志远 表彰待确认", sub: "优秀党务工作者 · 市委颁授", time: "3 小时前", read: false, cat: "奖惩" },
    { id: 4, icon: "sync", tone: "g", title: "朗新系统同步完成", sub: "本次同步 11 条变动数据，已入库", time: "昨天 02:00", read: true, cat: "系统" },
    { id: 5, icon: "briefcase", tone: "b", title: "秦海洋 任职决定抄送", sub: "市场营销部副部长 → 部长 · 已任职", time: "06-25", read: true, cat: "任职" },
    { id: 6, icon: "bell", tone: "r", title: "密码即将到期提醒", sub: "您的账户密码将在 7 天后到期，请及时修改", time: "06-24", read: true, cat: "系统" },
  ];

  function MessageCenterMobile({ onBack }) {
    const [seg, setSeg] = useState("unread");
    const filtered = seg === "all" ? MESSAGES : seg === "unread" ? MESSAGES.filter((m) => !m.read) : MESSAGES.filter((m) => m.read);
    const unreadCount = MESSAGES.filter((m) => !m.read).length;

    return (
      <div className="app-body slide">
        <SubHeader title="消息通知" onBack={onBack} rightIcon="check" />

        <div className="seg-tabs seg-three">
          <button className={seg === "unread" ? "active" : ""} onClick={() => setSeg("unread")}>未读 ({unreadCount})</button>
          <button className={seg === "read" ? "active" : ""} onClick={() => setSeg("read")}>已读</button>
          <button className={seg === "all" ? "active" : ""} onClick={() => setSeg("all")}>全部</button>
        </div>

        <div style={{ paddingBottom: 18 }}>
          {filtered.map((m) => {
            const c = toneColors(m.tone);
            return (
              <div className={"ap-card" + (m.read ? " read" : "")} key={m.id}>
                <div className="ap-head">
                  <div className="ap-ic" style={{ background: c.bg, color: c.fg }}><Icon name={m.icon} /></div>
                  <div className="ap-main">
                    <div className="ap-type">{m.cat}</div>
                    <div className="ap-time">{m.time}</div>
                  </div>
                  {!m.read && <span className="unread-dot"></span>}
                </div>
                <div className="ap-title">{m.title}</div>
                <div className="ap-sub">{m.sub}</div>
              </div>
            );
          })}
          {filtered.length === 0 && <div className="mempty"><Icon name="check" /><div>暂无消息</div></div>}
        </div>
      </div>
    );
  }

  // =========================================================================
  // 6. 审批详情移动版（钉钉工作流样式）
  // =========================================================================
  function ApprovalDetailMobile({ item, onBack, onOpen }) {
    const nodes = [
      { name: "发起申请", user: item?.from || "林海峰", role: "组织部部长", time: "06-22 14:30", status: "done", comment: "提交 " + (item?.title || "郑文涛") + " 同志的提拔考察申请，请审批。" },
      { name: "部门初审", user: "蒋小平", role: "技术研发中心副主任", time: "06-23 10:15", status: "done", comment: "同意。该同志业务能力突出，群众基础好。" },
      { name: "组织考察", user: "王建华", role: "组织部副部长", time: "06-25 16:40", status: "done", comment: "考察合格。民主推荐得票 87%，廉政鉴定无问题。" },
      { name: "党委讨论", user: "党委会议", role: "党委班子", time: "07-01 09:00", status: "current", comment: "待党委会议讨论决定。" },
      { name: "任前公示", user: "—", role: "—", time: "待定", status: "todo", comment: "公示 5 个工作日" },
      { name: "正式任职", user: "—", role: "—", time: "待定", status: "todo", comment: "下发任职文件" },
    ];
    const attachments = [
      { name: "考察材料.pdf", size: "1.2 MB", icon: "doc" },
      { name: "民主推荐结果.xlsx", size: "28 KB", icon: "file" },
      { name: "廉政鉴定.pdf", size: "412 KB", icon: "shield" },
      { name: "工作业绩清单.docx", size: "186 KB", icon: "doc" },
    ];
    const statusTone = item?.tone || "r";
    const c = toneColors(statusTone);

    return (
      <div className="app-body slide">
        <SubHeader title="审批详情" onBack={onBack} rightIcon="more" />

        {/* 状态 banner */}
        <div className="detail-banner" style={{ background: "linear-gradient(135deg," + (statusTone === "y" ? "#a98c00,#dbb000" : statusTone === "g" ? "#0c7a3e,#16A34A" : statusTone === "b" ? "#062A18,#0A3B24" : "#003d1f,#005d30") + ")" }}>
          <div className="db-status">{item?.status || "待审批"}</div>
          <div className="db-sub">{item?.title || "郑文涛 · 职务提拔"}</div>
          <div className="db-action">{item?.action || "副主任 → 主任 · 正处级"}</div>
        </div>

        {/* 申请信息 */}
        <div className="dt-card" style={{ marginTop: 12 }}>
          <div className="ch"><Icon name="briefcase" />申请内容</div>
          <div className="cb">
            <div className="kv"><div className="k">申请人</div><div className="v">{item?.from || "林海峰"}</div></div>
            <div className="kv"><div className="k">申请类型</div><div className="v">{item?.type || "晋升审批"}</div></div>
            <div className="kv"><div className="k">申请时间</div><div className="v">{item?.time || "2026-06-22 14:30"}</div></div>
            <div className="kv"><div className="k">当前节点</div><div className="v" style={{ color: "var(--red)" }}>党委讨论</div></div>
            <div className="kv"><div className="k">流程编号</div><div className="v" style={{ fontFamily: "ui-monospace,monospace" }}>{item?.id ? "PC2026-" + String(item.id).padStart(3, "0") : "PC2026-001"}</div></div>
          </div>
        </div>

        {/* 审批轨迹 */}
        <div className="dt-card">
          <div className="ch"><Icon name="history" />审批轨迹</div>
          <div className="cb">
            <div className="dt-tl">
              {nodes.map((n, i) => (
                <div key={i} className={"ti" + (n.status === "done" ? " done" : n.status === "current" ? " now" : " todo")}>
                  <div className="td">{n.time}</div>
                  <div className="tx">
                    <div className="tl-node">{n.name}</div>
                    <div className="tl-meta">{n.user} · {n.role}</div>
                    <div className="tl-comment">{n.comment}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>

        {/* 附件 */}
        <div className="dt-card">
          <div className="ch"><Icon name="doc" />附件 ({attachments.length})</div>
          <div className="cb">
            {attachments.map((a, i) => (
              <div key={i} className="att-row">
                <div className="att-ic"><Icon name={a.icon} /></div>
                <div className="att-main">
                  <div className="att-name">{a.name}</div>
                  <div className="att-size">{a.size}</div>
                </div>
                <Icon name="download" style={{ color: "var(--text3)", width: 18, height: 18 }} />
              </div>
            ))}
          </div>
        </div>

        {/* 相关干部 */}
        {item?.openId && (
          <div className="dt-card">
            <div className="ch"><Icon name="user" />相关干部</div>
            <div className="cb">
              <div className="person" style={{ padding: "4px 0" }} onClick={() => onOpen(item.openId)}>
                {(() => {
                  const cd = CADRES.find((cc) => cc.id === item.openId);
                  return cd ? <><Avatar cadre={cd} size={36} /><div className="pc"><div className="pn" style={{ fontSize: 13.5 }}>{cd.name}</div><div className="pd">{cd.position} · {cd.dept}</div></div><Icon name="chevronRight" style={{ color: "var(--text3)", width: 16, height: 16 }} /></> : null;
                })()}
              </div>
            </div>
          </div>
        )}

        {/* 底部操作栏 */}
        <div className="detail-actions">
          <button className="ap-reject" style={{ flex: 1 }} onClick={onBack}>拒绝</button>
          <button className="mbtn r" style={{ flex: 2 }} onClick={onBack}>同意</button>
        </div>
      </div>
    );
  }

  // ============ 暴露到 window ============
  Object.assign(window, {
    MOBILE_MODULES: { PromotionMobile, RewardMobile, TalentMobile, OperationLogMobile, MessageCenterMobile, ApprovalDetailMobile },
  });
})();