window.FB = window.FB || {};
// v20 共用 UI 件 — 全局挂载, 不是构建系统 (架构不变)
// 设计语言: 严重度四级色 + 白卡左竖条 + 圆角三级(区块2xl/卡xl/药丸md) + SVG 线性图标 1.6px

FB.UI = {};

// ── 色板 ──
// 严重度(数据语言): s1 已断 / s2 来不及 / s3 要注意 / s4 正常
// brand(动作语言): 按钮/导航沿用 red-700, 和严重度红有意区分
FB.UI.C = {
  s1: "#A81E12", s2: "#C2540A", s3: "#A07A06", s4: "#4A7A1C",
  bg1: "#FCEDEA", bg2: "#FDF2E8", bg3: "#FBF6E4", bg4: "#F0F6E8",
  brand: "#B91C1C", ink: "#1C1917", sub: "#78716C", faint: "#A8A29E", line: "#E7E5E4",
};

// ── SVG 图标库 ──
FB.UI.PATHS = {
  dashboard: "M4 13h6V4H4zM14 20h6v-9h-6zM4 20h6v-4H4zM14 8h6V4h-6z",
  review: "M12 4v16M5 8l-3 6h6zM19 8l-3 6h6zM6 8l12-2",
  receive: "M3 13h4l2 3h6l2-3h4M4 13l2-7h12l2 7v5a2 2 0 01-2 2H6a2 2 0 01-2-2z",
  task: "M9 11l2 2 4-4M4 5h16v14H4z",
  production: "M12 3c1.5 3-1 4.5-1 6.5a3 3 0 006 0c0-1-.4-2-1-2.7M7 13a5 5 0 1010 0",
  shipping: "M3 8l9-4 9 4v8l-9 4-9-4zM12 12l9-4M12 12L3 8M12 12v8",
  stock: "M4 4h7v7H4zM13 4h7v7h-7zM4 13h7v7H4zM13 13h7v7h-7z",
  baseline: "M12 4a8 8 0 108 8M12 8.5a3.5 3.5 0 103.5 3.5M12 12h.01M12 2v2M22 12h-2",
  sop: "M5 4h11a3 3 0 013 3v13H8a3 3 0 00-3 3zM5 4v16M9 8h6M9 12h4",
  clockin: "M12 4a8 8 0 108 8 8 8 0 00-8-8zM12 8v4l2.5 2.5",
  attendance: "M5 6h14v14H5zM5 10h14M9 4v4M15 4v4",
  settings: "M12 9a3 3 0 100 6 3 3 0 000-6zM12 2v3M12 19v3M3.3 7l2.6 1.5M18.1 15.5L20.7 17M3.3 17l2.6-1.5M18.1 8.5L20.7 7",
  menu: "M3 6h18M3 12h18M3 18h18",
  logout: "M9 4H5v16h4M14 8l4 4-4 4M8 12h10",
  chev: "M9 5l7 7-7 7",
  back: "M19 12H5M11 6l-6 6 6 6",
  camera: "M4 8h3l2-3h6l2 3h3v11H4zM12 17a3.5 3.5 0 100-7 3.5 3.5 0 000 7z",
  file: "M6 3h9l4 4v14H6zM14 3v5h5",
  image: "M4 5h16v14H4zM4 15l4-4 5 5M14 13l2-2 4 4M9.5 9a1 1 0 100 .01",
  paste: "M9 4h6v3H9zM7 6H5v14h14V6h-2M9 12h6M9 15h4",
  copy: "M9 9h10v12H9zM5 15V3h10v2",
  check: "M20 6L9 17l-5-5",
  x: "M18 6L6 18M6 6l12 12",
  plus: "M12 5v14M5 12h14",
  minus: "M5 12h14",
  search: "M11 4a7 7 0 100 14 7 7 0 000-14zM20 20l-3.5-3.5",
  edit: "M4 20l4.5-1L19 8.5l-3.5-3.5L5 15.5zM13.5 7l3.5 3.5",
  trash: "M4 7h16M9 7V4h6v3M6 7l1 13h10l1-13M10 11v5M14 11v5",
  spark: "M12 3l1.6 4.9L18.5 9.5l-4.9 1.6L12 16l-1.6-4.9L5.5 9.5l4.9-1.6zM18.5 15l.7 2.1 2.1.7-2.1.7-.7 2.1-.7-2.1-2.1-.7 2.1-.7z",
  history: "M4.5 12a7.5 7.5 0 107.5-7.5M4.5 4.5V9H9M12 8.5V12l2.5 2",
  ordering: "M9 4h6v3H9zM7 6H5v14h14V6h-2M12 11v6M9 14h6",
  today: "M4 6h16v14H4zM4 10h16M8 3v4M16 3v4M9 15l2 2 4-4",
};

FB.UI.Icon = function Icon({ name, size, style, className }) {
  return (
    <svg width={size || 18} height={size || 18} viewBox="0 0 24 24" fill="none"
      stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"
      className={"shrink-0 " + (className || "")} style={style} aria-hidden="true">
      <path d={FB.UI.PATHS[name] || ""} />
    </svg>
  );
};

// 折叠箭头 (跟随展开态旋转)
FB.UI.Chev = function Chev({ open, size }) {
  return (
    <FB.UI.Icon name="chev" size={size || 13}
      className="transition-transform" style={{ transform: open ? "rotate(90deg)" : "none" }} />
  );
};

// ── 分段选择器 (盘点ABC / 收货类型 / 审核tab / 考勤view 共用) ──
FB.UI.Seg = function Seg({ options, value, onChange, small }) {
  return (
    <div className="flex gap-1 bg-white border border-stone-200 rounded-xl p-1">
      {options.map(([k, lb]) => (
        <button key={k} onClick={() => onChange(k)}
          className={"flex-1 rounded-lg font-medium transition-colors " +
            (small ? "py-1.5 text-[11px] " : "py-2 text-[13px] ") +
            (value === k ? "bg-red-700 text-white" : "text-stone-500")}>
          {lb}
        </button>
      ))}
    </div>
  );
};

// ── 进度条 ──
FB.UI.Progress = function Progress({ num, den, color, label, right }) {
  const pct = den > 0 ? Math.min(100, (num / den) * 100) : 0;
  return (
    <div className="mb-3">
      {(label || right) ? (
        <div className="flex justify-between text-[11px] text-stone-500 px-0.5 mb-1">
          <span>{label}</span><span>{right}</span>
        </div>
      ) : null}
      <div className="h-[5px] bg-stone-200 rounded-full overflow-hidden">
        <div className="h-full rounded-full transition-all" style={{ width: pct + "%", background: color || FB.UI.C.brand }} />
      </div>
    </div>
  );
};

// ── 底部弹层 (贴单 / 确认 / 表单 共用) ──
FB.UI.Sheet = function Sheet({ onClose, children }) {
  return (
    <div className="fixed inset-0 z-40 flex items-end" style={{ background: "rgba(28,25,23,.45)" }}
      onClick={onClose}>
      <div className="bg-white w-full rounded-t-3xl p-4 pb-safe max-h-[88vh] overflow-y-auto"
        onClick={(e) => e.stopPropagation()}>
        {children}
      </div>
    </div>
  );
};

// ── 吸底提交栏 (盘点/出货/生产/收货/基线 共用, 统一渐变背景) ──
FB.UI.Sticky = function Sticky({ children }) {
  return (
    <div className="fixed bottom-14 left-0 right-0 px-4 py-3 pb-safe"
      style={{ background: "linear-gradient(to top,#FAFAF9 70%,transparent)" }}>
      {children}
    </div>
  );
};

// ── 数量步进器: − [可打字] ＋ (出货/生产 共用; 贴单先填一轮, 打字是补充) ──
FB.UI.Qty = function Qty({ value, onChange, unit, size }) {
  const s = size || 40;
  const btn = "rounded-xl border border-stone-200 text-stone-500 flex items-center justify-center shrink-0 active:bg-stone-100";
  return (
    <div className="flex items-center gap-1.5 shrink-0">
      <button onClick={() => onChange(Math.max(0, (Number(value) || 0) - 1))}
        className={btn} style={{ width: s, height: s }}><FB.UI.Icon name="minus" size={16} /></button>
      <div className="flex flex-col items-center">
        <input type="number" inputMode="decimal" value={value === 0 ? "0" : (value || "")}
          onChange={(e) => { const v = parseFloat(e.target.value); onChange(isNaN(v) ? 0 : Math.max(0, v)); }}
          className="w-14 text-center rounded-xl border border-stone-200 font-bold tabular-nums text-stone-900"
          style={{ height: s, fontSize: 17 }} />
        {unit ? <span className="text-[9px] text-stone-400 leading-none mt-0.5">{unit}</span> : null}
      </div>
      <button onClick={() => onChange((Number(value) || 0) + 1)}
        className={btn} style={{ width: s, height: s }}><FB.UI.Icon name="plus" size={16} /></button>
    </div>
  );
};

// ── 状态小药丸 ──
FB.UI.Chip = function Chip({ tone, children }) {
  const C = FB.UI.C;
  const m = { s1: [C.bg1, C.s1], s2: [C.bg2, C.s2], s3: [C.bg3, C.s3], s4: [C.bg4, C.s4], g: ["#F5F5F4", C.sub] };
  const [bg, tx] = m[tone] || m.g;
  return (
    <span className="text-[10px] font-semibold px-1.5 py-0.5 rounded shrink-0 whitespace-nowrap"
      style={{ background: bg, color: tx }}>{children}</span>
  );
};

// ── 圆圈勾 (任务/出货备货 共用) ──
FB.UI.CheckCircle = function CheckCircle({ on, size, square }) {
  const s = size || 28;
  return (
    <span className={"flex items-center justify-center shrink-0 transition-colors " + (square ? "rounded-xl" : "rounded-full")}
      style={{
        width: s, height: s,
        border: "2px solid " + (on ? FB.UI.C.s4 : "#D6D3D1"),
        background: on ? FB.UI.C.s4 : "#fff", color: "#fff",
      }}>
      {on ? <FB.UI.Icon name="check" size={Math.round(s * 0.55)} /> : null}
    </span>
  );
};