// ผังองค์กร: ระดับตำแหน่งกลาง (ladder) + ฝ่าย/แผนก (org units)
// ใช้ authFetch จาก org-structure.jsx (โหลดก่อนไฟล์นี้ใน index.html)

function OrgChartScreen({ onBack }) {
  const [businessLines, setBusinessLines] = 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);
    const r = await authFetch("/api/org-structure");
    const data = await r.json();
    setBusinessLines(Array.isArray(data.businessLines) ? data.businessLines : []);
    setPositions(Array.isArray(data.positions) ? data.positions : []);
    setLoading(false);
  }

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

  async function call(url, method, body) {
    setErrMsg("");
    const r = await authFetch(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 addLine() {
    if (!newLine.trim()) return;
    const ok = await call("/api/org-structure/business-lines", "POST", { name: newLine, sort_order: businessLines.length + 1 });
    if (ok) setNewLine("");
  }

  return (
    <div className="org-page">
      <div className="org-toolbar">
        <button className="link-btn" onClick={onBack}>&larr; กลับแดชบอร์ด</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} />
          </section>

          {/* ===== สายงาน / ฝ่าย / แผนก ===== */}
          <section className="org-col">
            <h3 className="col-title">สายงาน / ฝ่าย / แผนก</h3>
            <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" && addLine()}
              />
              <button onClick={addLine}>+ เพิ่มสายงาน</button>
            </div>

            {businessLines.length === 0 ? (
              <p className="muted">ยังไม่มีสายงาน เริ่มจากเพิ่มสายงานแรกด้านบน</p>
            ) : (
              <div className="chart-tree">
                {businessLines.map((line) => (
                  <BusinessLineNode key={line.id} line={line} onChange={call} />
                ))}
              </div>
            )}
          </section>
        </div>
      )}
    </div>
  );
}

function BusinessLineNode({ line, onChange }) {
  const [editing, setEditing] = React.useState(false);
  const [name, setName] = React.useState(line.name);
  const [newDiv, setNewDiv] = React.useState("");
  const [adding, setAdding] = React.useState(false);

  async function saveEdit() {
    if (await onChange(`/api/org-structure/business-lines/${line.id}`, "PATCH", { name, sort_order: line.sort_order })) {
      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">
        <span className="node-tag line">สายงาน</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(line.name); }}>ยกเลิก</button>
          </React.Fragment>
        ) : (
          <React.Fragment>
            <strong>{line.name}</strong>
            <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/business-lines/${line.id}`, "DELETE")}>ลบ</button>
            </span>
          </React.Fragment>
        )}
      </div>

      {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>
    </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);

  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">
        <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>

      {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>
    </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={() => onChange(`/api/org-structure/departments/${department.id}`, "DELETE")}>ลบ</button>
            </span>
          </React.Fragment>
        )}
      </div>
    </div>
  );
}