// จัดองค์กร: ระดับตำแหน่งกลาง (ladder) + ประธานบริหาร/ผู้อำนวยการ/สายงาน/ฝ่าย/แผนก (org units)
// พอร์ตจาก OKR Evaluation System — ใช้ window.MEI_API.orgStructure()/raw() แทน authFetch เดิม

function OrgChartScreen({ onBack }) {
  const [presidents, setPresidents] = React.useState([]);
  const [unassignedLines, setUnassignedLines] = React.useState([]);
  const [positions, setPositions] = React.useState([]);
  const [loading, setLoading] = React.useState(true);
  const [errMsg, setErrMsg] = React.useState("");
  const [newLine, setNewLine] = React.useState("");

  async function loadData() {
    setLoading(true);
    let data = await window.MEI_API.orgStructure();
    // ประธานบริหารมีคนเดียวเสมอ — ถ้ายังไม่มีให้สร้างอัตโนมัติ (ไม่มีปุ่มเพิ่มให้ผู้ใช้)
    if (!Array.isArray(data.presidents) || data.presidents.length === 0) {
      await window.MEI_API.raw("/api/org-structure/presidents", { method: "POST", body: JSON.stringify({ name: "ประธานบริหาร", sort_order: 1 }) });
      data = await window.MEI_API.orgStructure();
    }
    setPresidents(Array.isArray(data.presidents) ? data.presidents : []);
    setUnassignedLines(Array.isArray(data.unassignedBusinessLines) ? data.unassignedBusinessLines : []);
    setPositions(Array.isArray(data.positions) ? data.positions : []);
    setLoading(false);
  }

  React.useEffect(() => { loadData(); }, []);

  async function call(url, method, body) {
    setErrMsg("");
    const r = await window.MEI_API.raw(url, { method, body: body ? JSON.stringify(body) : undefined });
    if (!r.ok) {
      const err = await r.json().catch(() => ({}));
      setErrMsg(err.error || "ทำรายการไม่สำเร็จ");
      return false;
    }
    await loadData();
    return true;
  }

  async function addUnassignedLine() {
    if (!newLine.trim()) return;
    const ok = await call("/api/org-structure/business-lines", "POST", { name: newLine, sort_order: unassignedLines.length + 1 });
    if (ok) setNewLine("");
  }

  // สลับลำดับสายงานที่ยังไม่ระบุผู้อำนวยการ กับตัวข้างบน/ล่าง (swap sort_order) — เหมือน moveDir/moveLine
  async function moveUnassignedLine(index, delta) {
    const a = unassignedLines[index], b = unassignedLines[index + delta];
    if (!a || !b) return;
    const sa = a.sort_order, sb = b.sort_order;
    const [na, nb] = sa === sb ? [index + delta, index] : [sb, sa];
    await call(`/api/org-structure/business-lines/${a.id}`, "PATCH", { name: a.name, sort_order: na });
    await call(`/api/org-structure/business-lines/${b.id}`, "PATCH", { name: b.name, sort_order: nb });
  }

  // รายชื่อผู้อำนวยการแบบแบน (พร้อมชื่อประธานบริหารที่สังกัด) — ใช้เป็นตัวเลือกย้ายสายงาน
  const directorChoices = React.useMemo(() => {
    const list = [];
    for (const p of presidents) {
      for (const d of p.directors) list.push({ id: d.id, label: `${d.name} (${p.name})` });
    }
    return list;
  }, [presidents]);

  // กลุ่มสายงานของแต่ละผู้อำนวยการ (director_id -> [group]) — ใช้เป็นตัวเลือก "จัดกลุ่ม" ในฟอร์มแก้ไขสายงาน
  const groupsByDirectorId = React.useMemo(() => {
    const map = {};
    for (const p of presidents) for (const d of p.directors) map[d.id] = d.groups || [];
    return map;
  }, [presidents]);

  return (
    <div className="org-page">
      <div className="org-toolbar">
        {onBack && <button className="link-btn" onClick={onBack}>‹ กลับ</button>}
        <h2>จัดองค์กร</h2>
      </div>

      {errMsg && <div className="error-msg">{errMsg}</div>}

      {loading ? (
        <p>กำลังโหลด...</p>
      ) : (
        <div className="org-columns">
          {/* ===== ระดับตำแหน่ง (ladder) + เพิ่มสายงาน ===== */}
          <section className="org-col">
            <h3 className="col-title">ระดับตำแหน่ง (ทั้งบริษัท)</h3>
            <p className="muted small">ลำดับชั้นเดียวใช้ร่วมทุกหน่วยงาน — บนสุด = ระดับสูงสุด</p>
            <PositionLadder positions={positions} onChange={call} />

            <h4 className="unassigned-title">เพิ่มสายงานใหม่</h4>
            <p className="muted small">เพิ่มสายงานที่นี่ แล้วไปกำหนดผู้อำนวยการที่ปุ่ม "แก้ไข" ของสายงานในผังด้านขวา</p>
            <div className="add-division-bar">
              <input
                placeholder="ชื่อสายงานใหม่ เช่น สายงานปฏิบัติการ"
                value={newLine}
                onChange={(e) => setNewLine(e.target.value)}
                onKeyDown={(e) => e.key === "Enter" && addUnassignedLine()}
              />
              <button onClick={addUnassignedLine}>+ เพิ่มสายงาน</button>
            </div>
          </section>

          {/* ===== ประธานบริหาร / ผู้อำนวยการ / สายงาน / ฝ่าย / แผนก ===== */}
          <section className="org-col">
            <h3 className="col-title">ประธานบริหาร / ผู้อำนวยการ / สายงาน / ฝ่าย / แผนก</h3>
            <p className="muted small">กำหนดว่าผู้อำนวยการแต่ละคนดูแลสายงานไหนบ้าง (แก้ที่ปุ่ม "แก้ไข" ของสายงาน)</p>

            <div className="chart-tree">
              {presidents.map((pres) => (
                <PresidentNode key={pres.id} president={pres} directorChoices={directorChoices}
                  groupsByDirectorId={groupsByDirectorId} onChange={call} />
              ))}
            </div>

            {unassignedLines.length > 0 && (
              <React.Fragment>
                <h4 className="unassigned-title">สายงานที่ยังไม่ระบุผู้อำนวยการ</h4>
                <div className="chart-tree">
                  {unassignedLines.map((line, i) => (
                    <BusinessLineNode key={line.id} line={line} directorChoices={directorChoices}
                      groupsByDirectorId={groupsByDirectorId} onChange={call}
                      isFirst={i === 0} isLast={i === unassignedLines.length - 1}
                      onMoveUp={() => moveUnassignedLine(i, -1)} onMoveDown={() => moveUnassignedLine(i, 1)} />
                  ))}
                </div>
              </React.Fragment>
            )}
          </section>
        </div>
      )}
    </div>
  );
}

function PresidentNode({ president, directorChoices, groupsByDirectorId, onChange }) {
  const [editing, setEditing] = React.useState(false);
  const [name, setName] = React.useState(president.name);
  const [newDir, setNewDir] = React.useState("");
  const [adding, setAdding] = React.useState(false);
  const [collapsed, setCollapsed] = React.useState(false);

  async function saveEdit() {
    if (await onChange(`/api/org-structure/presidents/${president.id}`, "PATCH", { name, sort_order: president.sort_order })) {
      setEditing(false);
    }
  }
  async function addDir() {
    if (!newDir.trim()) return;
    if (await onChange("/api/org-structure/directors", "POST", {
      president_id: president.id, name: newDir, sort_order: (president.directors.length || 0) + 1,
    })) { setNewDir(""); setAdding(false); }
  }

  // สลับลำดับผู้อำนวยการกับตัวข้างบน/ล่าง (swap sort_order)
  async function moveDir(index, delta) {
    const list = president.directors;
    const a = list[index], b = list[index + delta];
    if (!a || !b) return;
    const sa = a.sort_order, sb = b.sort_order;
    // ถ้า sort_order เท่ากัน ให้ใช้ตำแหน่ง index มาแยกความต่าง
    const [na, nb] = sa === sb ? [index + delta, index] : [sb, sa];
    await onChange(`/api/org-structure/directors/${a.id}`, "PATCH", { name: a.name, sort_order: na });
    await onChange(`/api/org-structure/directors/${b.id}`, "PATCH", { name: b.name, sort_order: nb });
  }

  return (
    <div className="node node-president">
      <div className="node-head">
        <button className="node-toggle" onClick={() => setCollapsed(!collapsed)} title={collapsed ? "กาง" : "หุบ"}>{collapsed ? "▶" : "▼"}</button>
        <span className="node-tag president">ประธานบริหาร</span>
        {editing ? (
          <React.Fragment>
            <input className="node-edit" value={name} onChange={(e) => setName(e.target.value)} />
            <button className="link-btn" onClick={saveEdit}>บันทึก</button>
            <button className="link-btn" onClick={() => { setEditing(false); setName(president.name); }}>ยกเลิก</button>
          </React.Fragment>
        ) : (
          <React.Fragment>
            <strong>{president.name}</strong>
            <span className="node-actions">
              <button className="link-btn" onClick={() => setAdding(!adding)}>+ ผู้อำนวยการ</button>
              <button className="link-btn" onClick={() => setEditing(true)}>แก้ไข</button>
            </span>
          </React.Fragment>
        )}
      </div>

      {!collapsed && (
        <React.Fragment>
          {adding && (
            <div className="add-inline">
              <input placeholder="เช่น Front Office (ไม่ต้องพิมพ์คำว่า &quot;ผู้อำนวยการ&quot; ซ้ำ มีป้ายกำกับให้แล้ว)" value={newDir}
                onChange={(e) => setNewDir(e.target.value)}
                onKeyDown={(e) => e.key === "Enter" && addDir()} autoFocus />
              <button className="link-btn" onClick={addDir}>เพิ่ม</button>
            </div>
          )}

          <div className="node-children">
            {president.directors.length === 0 ? (
              <p className="muted small">ยังไม่มีผู้อำนวยการ</p>
            ) : (
              president.directors.map((dir, i) => (
                <DirectorNode key={dir.id} director={dir} directorChoices={directorChoices}
                  groupsByDirectorId={groupsByDirectorId} onChange={onChange}
                  isFirst={i === 0} isLast={i === president.directors.length - 1}
                  onMoveUp={() => moveDir(i, -1)} onMoveDown={() => moveDir(i, 1)} />
              ))
            )}
          </div>
        </React.Fragment>
      )}
    </div>
  );
}

function DirectorNode({ director, directorChoices, groupsByDirectorId, onChange, isFirst, isLast, onMoveUp, onMoveDown }) {
  const [editing, setEditing] = React.useState(false);
  const [name, setName] = React.useState(director.name);
  const [newLine, setNewLine] = React.useState("");
  const [adding, setAdding] = React.useState(false);
  const [newGroupName, setNewGroupName] = React.useState("");
  const [addingGroup, setAddingGroup] = React.useState(false);
  const [collapsed, setCollapsed] = React.useState(false);

  async function saveEdit() {
    if (await onChange(`/api/org-structure/directors/${director.id}`, "PATCH", { name, sort_order: director.sort_order })) {
      setEditing(false);
    }
  }
  async function addLine() {
    if (!newLine.trim()) return;
    if (await onChange("/api/org-structure/business-lines", "POST", {
      name: newLine, director_id: director.id, sort_order: (director.businessLines.length || 0) + 1,
    })) { setNewLine(""); setAdding(false); }
  }
  async function addGroup() {
    if (!newGroupName.trim()) return;
    if (await onChange("/api/org-structure/business-line-groups", "POST", {
      director_id: director.id, name: newGroupName, sort_order: (director.groups.length || 0) + 1,
    })) { setNewGroupName(""); setAddingGroup(false); }
  }

  // สลับลำดับกลุ่มสายงานภายใต้ผู้อำนวยการคนนี้ กับตัวข้างบน/ล่าง (swap sort_order) — เหมือน moveDir
  async function moveGroup(index, delta) {
    const list = director.groups;
    const a = list[index], b = list[index + delta];
    if (!a || !b) return;
    const sa = a.sort_order, sb = b.sort_order;
    const [na, nb] = sa === sb ? [index + delta, index] : [sb, sa];
    await onChange(`/api/org-structure/business-line-groups/${a.id}`, "PATCH", { name: a.name, sort_order: na });
    await onChange(`/api/org-structure/business-line-groups/${b.id}`, "PATCH", { name: b.name, sort_order: nb });
  }

  // สายงานที่ยังไม่ได้จัดกลุ่ม (หรือกลุ่มที่อ้างถึงถูกลบไปแล้ว) — แสดงแยกทีละกล่องตามเดิม
  const groupIds = new Set(director.groups.map((g) => g.id));
  const ungroupedLines = director.businessLines.filter((l) => !l.group_id || !groupIds.has(l.group_id));

  // สลับลำดับสายงานที่ไม่ได้จัดกลุ่ม กับตัวข้างบน/ล่าง (swap sort_order) — เหมือน moveDir
  async function moveLine(index, delta) {
    const a = ungroupedLines[index], b = ungroupedLines[index + delta];
    if (!a || !b) return;
    const sa = a.sort_order, sb = b.sort_order;
    const [na, nb] = sa === sb ? [index + delta, index] : [sb, sa];
    await onChange(`/api/org-structure/business-lines/${a.id}`, "PATCH", { name: a.name, sort_order: na });
    await onChange(`/api/org-structure/business-lines/${b.id}`, "PATCH", { name: b.name, sort_order: nb });
  }

  return (
    <div className="node node-director">
      <div className="node-head">
        <button className="node-toggle" onClick={() => setCollapsed(!collapsed)} title={collapsed ? "กาง" : "หุบ"}>{collapsed ? "▶" : "▼"}</button>
        <span className="node-tag director">ผู้อำนวยการ</span>
        {editing ? (
          <React.Fragment>
            <input className="node-edit" value={name} onChange={(e) => setName(e.target.value)} />
            <button className="link-btn" onClick={saveEdit}>บันทึก</button>
            <button className="link-btn" onClick={() => { setEditing(false); setName(director.name); }}>ยกเลิก</button>
          </React.Fragment>
        ) : (
          <React.Fragment>
            <span className="node-name">{director.name}</span>
            <span className="node-actions">
              {onMoveUp && <button className="link-btn" title="เลื่อนขึ้น" disabled={isFirst} onClick={onMoveUp}>▲</button>}
              {onMoveDown && <button className="link-btn" title="เลื่อนลง" disabled={isLast} onClick={onMoveDown}>▼</button>}
              <button className="link-btn" onClick={() => setAdding(!adding)}>+ สายงาน</button>
              <button className="link-btn" onClick={() => setAddingGroup(!addingGroup)}>+ กลุ่มสายงาน</button>
              <button className="link-btn" onClick={() => setEditing(true)}>แก้ไข</button>
              <button className="link-btn danger" onClick={() => onChange(`/api/org-structure/directors/${director.id}`, "DELETE")}>ลบ</button>
            </span>
          </React.Fragment>
        )}
      </div>

      {!collapsed && (
        <React.Fragment>
          {adding && (
            <div className="add-inline">
              <input placeholder="ชื่อสายงานใหม่" value={newLine}
                onChange={(e) => setNewLine(e.target.value)}
                onKeyDown={(e) => e.key === "Enter" && addLine()} autoFocus />
              <button className="link-btn" onClick={addLine}>เพิ่ม</button>
            </div>
          )}
          {addingGroup && (
            <div className="add-inline">
              <input placeholder="ชื่อกลุ่มสายงาน เช่น Sourcing" value={newGroupName}
                onChange={(e) => setNewGroupName(e.target.value)}
                onKeyDown={(e) => e.key === "Enter" && addGroup()} autoFocus />
              <button className="link-btn" onClick={addGroup}>เพิ่ม</button>
            </div>
          )}

          <div className="node-children">
            {director.groups.map((g, i) => (
              <GroupNode key={g.id} group={g}
                lines={director.businessLines.filter((l) => l.group_id === g.id)}
                directorChoices={directorChoices} groupsByDirectorId={groupsByDirectorId} onChange={onChange}
                isFirst={i === 0} isLast={i === director.groups.length - 1}
                onMoveUp={() => moveGroup(i, -1)} onMoveDown={() => moveGroup(i, 1)} />
            ))}
            {director.groups.length === 0 && ungroupedLines.length === 0 ? (
              <p className="muted small">ยังไม่มีสายงาน</p>
            ) : (
              ungroupedLines.map((line, i) => (
                <BusinessLineNode key={line.id} line={line} directorChoices={directorChoices}
                  groupsByDirectorId={groupsByDirectorId} onChange={onChange}
                  isFirst={i === 0} isLast={i === ungroupedLines.length - 1}
                  onMoveUp={() => moveLine(i, -1)} onMoveDown={() => moveLine(i, 1)} />
              ))
            )}
          </div>
        </React.Fragment>
      )}
    </div>
  );
}

// กลุ่มสายงาน — ยุบรวมหลายสายงานเป็นกล่องเดียวในผังองค์กร (ตั้งชื่อเอง ไม่มีตำแหน่งหัวหน้ากลุ่ม)
function GroupNode({ group, lines, directorChoices, groupsByDirectorId, onChange, isFirst, isLast, onMoveUp, onMoveDown }) {
  const [editing, setEditing] = React.useState(false);
  const [name, setName] = React.useState(group.name);
  // เริ่มแบบหุบไว้ก่อน — หน้านี้แสดงถึงระดับสายงานเป็นหลัก ไม่ต้องกางลึกไปถึงฝ่าย/แผนกทันที
  const [collapsed, setCollapsed] = React.useState(true);

  async function saveEdit() {
    if (await onChange(`/api/org-structure/business-line-groups/${group.id}`, "PATCH", { name, sort_order: group.sort_order })) {
      setEditing(false);
    }
  }

  return (
    <div className="node node-linegroup">
      <div className="node-head">
        <button className="node-toggle" onClick={() => setCollapsed(!collapsed)} title={collapsed ? "กาง" : "หุบ"}>{collapsed ? "▶" : "▼"}</button>
        <span className="node-tag linegroup">กลุ่มสายงาน</span>
        {editing ? (
          <React.Fragment>
            <input className="node-edit" value={name} onChange={(e) => setName(e.target.value)} />
            <button className="link-btn" onClick={saveEdit}>บันทึก</button>
            <button className="link-btn" onClick={() => { setEditing(false); setName(group.name); }}>ยกเลิก</button>
          </React.Fragment>
        ) : (
          <React.Fragment>
            <strong>{group.name}</strong>
            <span className="muted small">({lines.length} สายงาน)</span>
            <span className="node-actions">
              {onMoveUp && <button className="link-btn" title="เลื่อนขึ้น" disabled={isFirst} onClick={onMoveUp}>▲</button>}
              {onMoveDown && <button className="link-btn" title="เลื่อนลง" disabled={isLast} onClick={onMoveDown}>▼</button>}
              <button className="link-btn" onClick={() => setEditing(true)}>แก้ไข</button>
              <button className="link-btn danger" onClick={() => onChange(`/api/org-structure/business-line-groups/${group.id}`, "DELETE")}>ลบกลุ่ม</button>
            </span>
          </React.Fragment>
        )}
      </div>

      {!collapsed && (
        <div className="node-children">
          {lines.length === 0 ? (
            <p className="muted small">ยังไม่มีสายงานในกลุ่มนี้ — ไปที่ปุ่ม "แก้ไข" ของสายงาน แล้วเลือกกลุ่มนี้</p>
          ) : (
            lines.map((line) => (
              <BusinessLineNode key={line.id} line={line} directorChoices={directorChoices}
                groupsByDirectorId={groupsByDirectorId} onChange={onChange} />
            ))
          )}
        </div>
      )}
    </div>
  );
}

function BusinessLineNode({ line, directorChoices, groupsByDirectorId, onChange, isFirst, isLast, onMoveUp, onMoveDown }) {
  const [editing, setEditing] = React.useState(false);
  const [name, setName] = React.useState(line.name);
  const [directorId, setDirectorId] = React.useState(line.director_id ? String(line.director_id) : "");
  const [groupId, setGroupId] = React.useState(line.group_id ? String(line.group_id) : "");
  const [newDiv, setNewDiv] = React.useState("");
  const [adding, setAdding] = React.useState(false);
  // เริ่มแบบหุบไว้ก่อน — หน้านี้แสดงถึงระดับสายงานเป็นหลัก ไม่ต้องกางลึกไปถึงฝ่าย/แผนกทันที
  const [collapsed, setCollapsed] = React.useState(true);
  const groupChoices = (directorId && groupsByDirectorId && groupsByDirectorId[directorId]) || [];

  async function saveEdit() {
    if (await onChange(`/api/org-structure/business-lines/${line.id}`, "PATCH", {
      name, sort_order: line.sort_order, director_id: directorId || null, group_id: groupId || null,
    })) {
      setEditing(false);
    }
  }
  async function addDiv() {
    if (!newDiv.trim()) return;
    if (await onChange("/api/org-structure/divisions", "POST", {
      business_line_id: line.id, name: newDiv, sort_order: (line.divisions.length || 0) + 1,
    })) { setNewDiv(""); setAdding(false); }
  }

  return (
    <div className="node node-line">
      <div className="node-head">
        <button className="node-toggle" onClick={() => setCollapsed(!collapsed)} title={collapsed ? "กาง" : "หุบ"}>{collapsed ? "▶" : "▼"}</button>
        <span className="node-tag line">สายงาน</span>
        {editing ? (
          <React.Fragment>
            <input className="node-edit" value={name} onChange={(e) => setName(e.target.value)} />
            <select className="node-edit" value={directorId}
              onChange={(e) => { setDirectorId(e.target.value); setGroupId(""); }}>
              <option value="">-- ไม่ระบุผู้อำนวยการ --</option>
              {directorChoices.map((d) => <option key={d.id} value={d.id}>{d.label}</option>)}
            </select>
            <select className="node-edit" value={groupId} onChange={(e) => setGroupId(e.target.value)} disabled={!directorId}>
              <option value="">-- ไม่จัดกลุ่ม --</option>
              {groupChoices.map((g) => <option key={g.id} value={g.id}>{g.name}</option>)}
            </select>
            <button className="link-btn" onClick={saveEdit}>บันทึก</button>
            <button className="link-btn" onClick={() => {
              setEditing(false); setName(line.name);
              setDirectorId(line.director_id ? String(line.director_id) : "");
              setGroupId(line.group_id ? String(line.group_id) : "");
            }}>ยกเลิก</button>
          </React.Fragment>
        ) : (
          <React.Fragment>
            <strong>{line.name}</strong>
            <span className="node-actions">
              {onMoveUp && <button className="link-btn" title="เลื่อนขึ้น" disabled={isFirst} onClick={onMoveUp}>▲</button>}
              {onMoveDown && <button className="link-btn" title="เลื่อนลง" disabled={isLast} onClick={onMoveDown}>▼</button>}
              <button className="link-btn" onClick={() => setAdding(!adding)}>+ ฝ่าย</button>
              <button className="link-btn" onClick={() => setEditing(true)}>แก้ไข</button>
              <button className="link-btn danger" onClick={() => onChange(`/api/org-structure/business-lines/${line.id}`, "DELETE")}>ลบ</button>
            </span>
          </React.Fragment>
        )}
      </div>

      {!collapsed && (
        <React.Fragment>
          {adding && (
            <div className="add-inline">
              <input placeholder="ชื่อฝ่ายใหม่" value={newDiv}
                onChange={(e) => setNewDiv(e.target.value)}
                onKeyDown={(e) => e.key === "Enter" && addDiv()} autoFocus />
              <button className="link-btn" onClick={addDiv}>เพิ่ม</button>
            </div>
          )}

          <div className="node-children">
            {line.divisions.length === 0 ? (
              <p className="muted small">ยังไม่มีฝ่าย</p>
            ) : (
              line.divisions.map((div) => (
                <DivisionNode key={div.id} division={div} onChange={onChange} />
              ))
            )}
          </div>
        </React.Fragment>
      )}
    </div>
  );
}

function PositionLadder({ positions, onChange }) {
  const [newPos, setNewPos] = React.useState("");

  async function addPos() {
    if (!newPos.trim()) return;
    if (await onChange("/api/org-structure/positions", "POST", { name: newPos })) setNewPos("");
  }

  // สลับ level กับตัวข้างบน/ล่างเพื่อจัดลำดับ
  async function move(index, dir) {
    const a = positions[index];
    const b = positions[index + dir];
    if (!a || !b) return;
    await onChange(`/api/org-structure/positions/${a.id}`, "PATCH", { level: b.level });
    await onChange(`/api/org-structure/positions/${b.id}`, "PATCH", { level: a.level });
  }

  return (
    <div className="ladder">
      {positions.map((pos, i) => (
        <React.Fragment key={pos.id}>
          <LadderNode
            position={pos}
            isFirst={i === 0}
            isLast={i === positions.length - 1}
            onUp={() => move(i, -1)}
            onDown={() => move(i, 1)}
            onChange={onChange}
          />
          {i < positions.length - 1 && <div className="ladder-connector" />}
        </React.Fragment>
      ))}

      <div className="add-inline ladder-add">
        <input placeholder="เพิ่มระดับตำแหน่งใหม่ (ต่อท้ายล่างสุด)" value={newPos}
          onChange={(e) => setNewPos(e.target.value)}
          onKeyDown={(e) => e.key === "Enter" && addPos()} />
        <button className="link-btn" onClick={addPos}>+ เพิ่ม</button>
      </div>
    </div>
  );
}

function LadderNode({ position, isFirst, isLast, onUp, onDown, onChange }) {
  const [editing, setEditing] = React.useState(false);
  const [name, setName] = React.useState(position.name);

  async function saveEdit() {
    if (await onChange(`/api/org-structure/positions/${position.id}`, "PATCH", { name })) setEditing(false);
  }

  return (
    <div className="ladder-box">
      <span className="level-badge">{position.level}</span>
      {editing ? (
        <React.Fragment>
          <input className="node-edit" value={name} onChange={(e) => setName(e.target.value)} autoFocus />
          <span className="ladder-actions">
            <button className="link-btn" onClick={saveEdit}>บันทึก</button>
            <button className="link-btn" onClick={() => { setEditing(false); setName(position.name); }}>ยกเลิก</button>
          </span>
        </React.Fragment>
      ) : (
        <React.Fragment>
          <span className="ladder-name">{position.name}</span>
          <span className="ladder-actions">
            <button className="chip-btn" title="เลื่อนขึ้น" disabled={isFirst} onClick={onUp}>▲</button>
            <button className="chip-btn" title="เลื่อนลง" disabled={isLast} onClick={onDown}>▼</button>
            <button className="chip-btn" title="แก้ไข" onClick={() => setEditing(true)}>✎</button>
            <button className="chip-btn danger" title="ลบ" onClick={() => onChange(`/api/org-structure/positions/${position.id}`, "DELETE")}>✕</button>
          </span>
        </React.Fragment>
      )}
    </div>
  );
}

function DivisionNode({ division, onChange }) {
  const [editing, setEditing] = React.useState(false);
  const [name, setName] = React.useState(division.name);
  const [newDept, setNewDept] = React.useState("");
  const [adding, setAdding] = React.useState(false);
  const [collapsed, setCollapsed] = React.useState(false);

  async function saveEdit() {
    if (await onChange(`/api/org-structure/divisions/${division.id}`, "PATCH", { name, sort_order: division.sort_order })) {
      setEditing(false);
    }
  }
  async function addDept() {
    if (!newDept.trim()) return;
    if (await onChange("/api/org-structure/departments", "POST", {
      division_id: division.id, name: newDept, sort_order: (division.departments.length || 0) + 1,
    })) { setNewDept(""); setAdding(false); }
  }

  return (
    <div className="node node-division">
      <div className="node-head">
        <button className="node-toggle" onClick={() => setCollapsed(!collapsed)} title={collapsed ? "กาง" : "หุบ"}>{collapsed ? "▶" : "▼"}</button>
        <span className="node-tag division">ฝ่าย</span>
        {editing ? (
          <React.Fragment>
            <input className="node-edit" value={name} onChange={(e) => setName(e.target.value)} />
            <button className="link-btn" onClick={saveEdit}>บันทึก</button>
            <button className="link-btn" onClick={() => { setEditing(false); setName(division.name); }}>ยกเลิก</button>
          </React.Fragment>
        ) : (
          <React.Fragment>
            <span className="node-name">{division.name}</span>
            <span className="node-actions">
              <button className="link-btn" onClick={() => setAdding(!adding)}>+ แผนก</button>
              <button className="link-btn" onClick={() => setEditing(true)}>แก้ไข</button>
              <button className="link-btn danger" onClick={() => onChange(`/api/org-structure/divisions/${division.id}`, "DELETE")}>ลบ</button>
            </span>
          </React.Fragment>
        )}
      </div>

      {!collapsed && (
        <React.Fragment>
          {adding && (
            <div className="add-inline">
              <input placeholder="ชื่อแผนกใหม่" value={newDept}
                onChange={(e) => setNewDept(e.target.value)}
                onKeyDown={(e) => e.key === "Enter" && addDept()} autoFocus />
              <button className="link-btn" onClick={addDept}>เพิ่ม</button>
            </div>
          )}

          <div className="node-children dept-children">
            {division.departments.length === 0 ? (
              <p className="muted small">ยังไม่มีแผนก</p>
            ) : (
              division.departments.map((dept) => (
                <DepartmentNode key={dept.id} department={dept} onChange={onChange} />
              ))
            )}
          </div>
        </React.Fragment>
      )}
    </div>
  );
}

function DepartmentNode({ department, onChange }) {
  const [editing, setEditing] = React.useState(false);
  const [name, setName] = React.useState(department.name);

  async function saveEdit() {
    if (await onChange(`/api/org-structure/departments/${department.id}`, "PATCH", { name, sort_order: department.sort_order })) {
      setEditing(false);
    }
  }

  return (
    <div className="node node-department">
      <div className="node-head">
        <span className="node-tag department">แผนก</span>
        {editing ? (
          <React.Fragment>
            <input className="node-edit" value={name} onChange={(e) => setName(e.target.value)} />
            <button className="link-btn" onClick={saveEdit}>บันทึก</button>
            <button className="link-btn" onClick={() => { setEditing(false); setName(department.name); }}>ยกเลิก</button>
          </React.Fragment>
        ) : (
          <React.Fragment>
            <span>{department.name}</span>
            <span className="node-actions">
              <button className="link-btn" onClick={() => setEditing(true)}>แก้ไข</button>
              <button className="link-btn danger" onClick={() => {
                // ลบแผนกได้เสมอ — ถ้ามีพนักงานสังกัดอยู่ API จะปลดออกจากแผนกให้ (ย้ายไปอยู่ระดับฝ่าย ไม่ถูกลบ)
                if (window.confirm(`ยืนยันลบแผนก "${department.name}"?\nหากมีพนักงานสังกัดแผนกนี้ จะถูกย้ายออกไปอยู่ระดับฝ่ายโดยอัตโนมัติ (ข้อมูลพนักงานไม่ถูกลบ)`)) {
                  onChange(`/api/org-structure/departments/${department.id}`, "DELETE");
                }
              }}>ลบ</button>
            </span>
          </React.Fragment>
        )}
      </div>
    </div>
  );
}