// Module configuration screen — KPI process tree on left, dense form on right.
// Form fields mirror the structural pattern in 模块 1.png but with original copy.

const moduleSections = [
  {
    title: "估价管理流程", processes: [
      { id: "01", code: "01/04", label: "【新增】新报价单", active: true },
      { id: "02", code: "02/04", label: "审核报价单->客户确认->二次确认" },
      { id: "03", code: "03/04", label: "客户确认->二次确认" },
      { id: "04", code: "04/04", label: "报价单->销售订单" },
      { id: "05", code: "04/04", label: "报价单->转拼版单" },
      { id: "06", code: "04/07", label: "主管审核报价单" },
      { id: "07", code: "05/07", label: "业务确认报价单" },
    ],
  },
  { title: "订单生产流程", collapsed: true },
  { title: "自动拼版流程", collapsed: true },
  { title: "销售送货流程", collapsed: true },
  { title: "物料采购流程", collapsed: true },
  { title: "物料领用流程", collapsed: true },
  { title: "发外加工流程", collapsed: true },
  { title: "质量管理流程", collapsed: true },
  { title: "财务收付款流程", collapsed: true },
];

const ModuleScreen = () => {
  const [mode, setMode] = React.useState("view"); // 'view' | 'edit'
  const [activeProcess] = React.useState("01");

  const initial = {
    displayCategory: "印刷业务",
    deptEn: "Pricing Personnel",
    deptCn: "报价员",
    permissionVisible: true,
    seq: "1",
    saveProc: "Sp_Check_sQtt",
    storageUrl: "/indexPage/quotationPackTl...",
    showOpt: false,
    nodes: "-1752556899000998290E",
    deptId: "",
    flowId: "20250303094458291296...",
    uniqueId: "10125124011501607650...",
    flowEnName: "",
    flowReqName: "",
    titleCn: "01/04【新增】新报价单",
    mobileLogo: "",
    nameEn: "Quotation Document",
    nameNotice: "常规产品报价单据",
    showCategory: "待处理",
    deptManager: "报价人员",
    storeProc: "Sp_Calc_sQtt",
    quickShow: "",
    addId: "",
    modType: "quotation/quotation/quotati",
    calcProc: "Sp_Quotation_CalcDataPac",
    saveAfterProc: "Sp_beforeSave_sQtt",
    parent: "1752562484000281572E",
  };

  const [form, setForm] = React.useState(initial);
  const set = (k, v) => setForm((s) => ({ ...s, [k]: v }));

  const startEdit = () => setMode("edit");
  const save = () => { setMode("view"); };
  const cancel = () => { setForm(initial); setMode("view"); };

  const disabled = mode === "view";

  return (
    <div style={{ display: "flex", flexDirection: "column", height: "100%", background: "var(--bg-app)" }}>
      {/* Light blue toolbar */}
      <div style={{
        display: "flex", alignItems: "center", gap: 6, flexWrap: "wrap", rowGap: 6,
        padding: "6px 8px", background: "#eaf1f7",
        borderBottom: "1px solid var(--border)", flex: "none",
      }}>
        <ToolbarBtnLight icon={<Ic.plus size={12} />} primary disabled={mode === "edit"}>添加节点</ToolbarBtnLight>
        <ToolbarBtnLight icon={<Ic.plus size={12} />} primary disabled={mode === "edit"}>添加子节点</ToolbarBtnLight>
        <ToolbarBtnLight icon={<Ic.edit size={12} />} primary disabled={mode === "edit"} onClick={startEdit}>修 改</ToolbarBtnLight>
        <ToolbarBtnLight icon={<Ic.clipboard size={12} />} primary disabled={mode === "edit"}>复制节点</ToolbarBtnLight>
        <ToolbarBtnLight icon={<Ic.save size={12} />} success disabled={mode !== "edit"} onClick={save}>保 存</ToolbarBtnLight>
        <ToolbarBtnLight icon={<Ic.cancel size={12} />} disabled={mode !== "edit"} onClick={cancel}>取 消</ToolbarBtnLight>
        <ToolbarBtnLight icon={<Ic.trash size={12} />} danger disabled={mode === "edit"}>删除节点</ToolbarBtnLight>
        <div style={{ flex: 1 }} />
        <ToolbarBtnLight icon={<Ic.settings size={12} />} primary>生成监听器单</ToolbarBtnLight>
      </div>

      {/* Body: form only (tree lives in main sidebar) */}
      <div style={{ flex: 1, display: "flex", overflow: "hidden", minHeight: 0 }}>
        {/* Form panel */}
        <div style={{ flex: 1, overflow: "auto", padding: 12, minWidth: 0 }}>
          <div style={{
            display: "grid",
            gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))",
            rowGap: 8, columnGap: 14,
            background: "#fff", padding: "14px 14px 16px",
            border: "1px solid var(--border)",
          }}>
            <Field label="显示类别(默认)" required>
              <Select value={form.displayCategory} onChange={(v) => set("displayCategory", v)} disabled={disabled} required options={["印刷业务", "包装业务", "物流业务", "数码印刷"]} />
            </Field>
            <Field label="所有节点ID">
              <Input value={form.nodes} disabled mono />
            </Field>
            <Field label="存储过程(算)">
              <Input value={form.storeProc} onChange={(v) => set("storeProc", v)} disabled={disabled} mono />
            </Field>
            <Field label="模块类型">
              <Input value={form.modType} onChange={(v) => set("modType", v)} disabled={disabled} mono />
            </Field>

            <Field label="管理部门英文">
              <Input value={form.deptEn} onChange={(v) => set("deptEn", v)} disabled={disabled} />
            </Field>
            <Field label="管理部门ID">
              <Input value={form.deptId} onChange={(v) => set("deptId", v)} disabled={disabled} mono />
            </Field>
            <Field label="快速下单显示">
              <Select value={form.quickShow} onChange={(v) => set("quickShow", v)} disabled={disabled} options={["显示", "隐藏"]} />
            </Field>
            <Field label="加载ID">
              <Input value={form.addId} onChange={(v) => set("addId", v)} disabled={disabled} mono />
            </Field>

            <Field label="权限是否显示" required>
              <div style={{ flex: 1, height: "var(--input-h)", display: "flex", alignItems: "center", paddingLeft: 4, background: !disabled ? "#fff8e1" : "transparent", border: "1px solid var(--border-input)" }}>
                <Checkbox checked={form.permissionVisible} onChange={(v) => set("permissionVisible", v)} disabled={disabled} />
              </div>
            </Field>
            <Field label="流程ID">
              <Input value={form.flowId} disabled mono />
            </Field>
            <Field label="流程名称">
              <Select value={form.flowEnName} onChange={(v) => set("flowEnName", v)} disabled={disabled} options={["主流程", "子流程"]} />
            </Field>
            <Field label="流程英文名称">
              <Input value={form.flowReqName} onChange={(v) => set("flowReqName", v)} disabled={disabled} />
            </Field>

            <Field label="序号" required>
              <Input value={form.seq} onChange={(v) => set("seq", v)} disabled={disabled} required />
            </Field>
            <Field label="唯一ID">
              <Input value={form.uniqueId} disabled mono />
            </Field>
            <Field label="计算过程名">
              <Input value={form.calcProc} onChange={(v) => set("calcProc", v)} disabled={disabled} mono />
            </Field>
            <Field label="保存前校验过...">
              <Input value={form.saveAfterProc} onChange={(v) => set("saveAfterProc", v)} disabled={disabled} mono />
            </Field>

            <Field label="保存过程名">
              <Input value={form.saveProc} onChange={(v) => set("saveProc", v)} disabled={disabled} mono />
            </Field>
            <Field label="界面名中文">
              <Input value={form.titleCn} onChange={(v) => set("titleCn", v)} disabled={disabled} />
            </Field>
            <Field label="删除过程名">
              <Input value={form.deleteProc || ""} onChange={(v) => set("deleteProc", v)} disabled={disabled} mono />
            </Field>
            <Field label="父级">
              <Input value={form.parent} disabled mono />
            </Field>

            <Field label="存储页面URL路...">
              <Input value={form.storageUrl} onChange={(v) => set("storageUrl", v)} disabled={disabled} mono />
            </Field>
            <Field label="手机端LOGO">
              <Input value={form.mobileLogo} onChange={(v) => set("mobileLogo", v)} disabled={disabled} />
            </Field>
            <Field label="界面名英文">
              <Input value={form.nameEn} onChange={(v) => set("nameEn", v)} disabled={disabled} />
            </Field>
            <Field label="界面名备注">
              <Input value={form.nameNotice} onChange={(v) => set("nameNotice", v)} disabled={disabled} />
            </Field>

            <Field label="是否显示">
              <div style={{ flex: 1, height: "var(--input-h)", display: "flex", alignItems: "center", paddingLeft: 4, border: "1px solid var(--border-input)", background: disabled ? "var(--bg-disabled)" : "var(--bg-input)" }}>
                <Checkbox checked={form.showOpt} onChange={(v) => set("showOpt", v)} disabled={disabled} />
              </div>
            </Field>
            <Field label="是否消息通知">
              <Select value={form.notice || ""} onChange={(v) => set("notice", v)} disabled={disabled} options={["开启", "关闭"]} />
            </Field>
            <Field label="显示类型">
              <Select value={form.showCategory} onChange={(v) => set("showCategory", v)} disabled={disabled} options={["待处理", "已处理", "全部"]} />
            </Field>
            <Field label="管理部门">
              <Select value={form.deptManager} onChange={(v) => set("deptManager", v)} disabled={disabled} options={["报价人员", "业务员", "主管", "财务"]} />
            </Field>

            <div style={{ gridColumn: "1 / -1", display: "flex", gap: 8, marginTop: 4, paddingTop: 8, borderTop: "1px dashed var(--border)" }}>
              <ToolbarBtnLight icon={<Ic.import size={12} />} disabled={disabled}>上传</ToolbarBtnLight>
              <span style={{ fontSize: 11, color: "var(--text-faint)", lineHeight: "26px" }}>
                关联文件（PDF / 图片，≤ 5 MB）
              </span>
            </div>
          </div>

          <div style={{ marginTop: 8, padding: "6px 12px", background: "#fff", border: "1px solid var(--border)", fontSize: 11, color: "var(--text-muted)", display: "flex", justifyContent: "space-between" }}>
            <span>当前节点：{activeProcess} 【新增】新报价单</span>
            <span>状态：<span style={{ color: mode === "edit" ? "var(--warning)" : "var(--success)", fontWeight: 500 }}>{mode === "edit" ? "编辑中" : "只读"}</span></span>
          </div>
        </div>
      </div>
    </div>
  );
};

window.ModuleScreen = ModuleScreen;