async function authFetch(url, opts = {}) {
  const token = await window.OKR_AUTH.getAccessToken();
  const headers = { ...(opts.headers || {}) };
  if (token) headers.Authorization = `Bearer ${token}`;
  if (opts.body) headers["Content-Type"] = "application/json";
  return fetch(url, { ...opts, headers });
}

const PREFIX_OPTIONS = ["นาย", "นาง", "นางสาว"];

// รหัสพนักงานถัดไป: SHM + เลขรันนิ่ง 5 หลัก (นับต่อจากรหัสรูปแบบ SHMxxxxx ที่มีอยู่)
function nextEmpCode(employees) {
  let max = 0;
  for (const e of employees) {
    const m = /^SHM(\d+)$/.exec(e.emp_code || "");
    if (m) max = Math.max(max, parseInt(m[1], 10));
  }
  return "SHM" + String(max + 1).padStart(5, "0");
}

function OrgStructureScreen({ onBack }) {
  const [employees, setEmployees] = React.useState([]);
  const [businessLines, setBusinessLines] = React.useState([]);
  const [positions, setPositions] = React.useState([]);
  const [loading, setLoading] = React.useState(true);
  const [formEmployee, setFormEmployee] = React.useState(null); // null=closed, {}=new, {...}=edit
  const [expandedId, setExpandedId] = React.useState(null);
  const [detail, setDetail] = React.useState(null);
  const [detailLoading, setDetailLoading] = React.useState(false);
  const [addManagerType, setAddManagerType] = React.useState("solid");
  const [addManagerId, setAddManagerId] = React.useState("");
  const [errMsg, setErrMsg] = React.useState("");

  async function loadEmployees() {
    setLoading(true);
    const r = await authFetch("/api/employees");
    const data = await r.json();
    setEmployees(Array.isArray(data) ? data : []);
    setLoading(false);
  }

  async function loadOrgData() {
    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 : []);
  }

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

  async function loadDetail(id) {
    setDetailLoading(true);
    const r = await authFetch(`/api/employees/${id}`);
    const data = await r.json();
    setDetail(data);
    setDetailLoading(false);
  }

  function toggleExpand(emp) {
    setErrMsg("");
    if (expandedId === emp.id) {
      setExpandedId(null);
      setDetail(null);
      return;
    }
    setExpandedId(emp.id);
    setDetail(null);
    setAddManagerId("");
    setAddManagerType("solid");
    loadDetail(emp.id);
  }

  async function handleSaveEmployee(form) {
    const isEdit = !!form.id;
    const url = isEdit ? `/api/employees/${form.id}` : "/api/employees";
    const method = isEdit ? "PATCH" : "POST";
    const r = await authFetch(url, { method, body: JSON.stringify(form) });
    if (!r.ok) {
      const err = await r.json();
      throw new Error(err.error || "บันทึกไม่สำเร็จ");
    }
    setFormEmployee(null);
    await loadEmployees();
    if (expandedId) loadDetail(expandedId);
  }

  async function handleAddManager() {
    if (!addManagerId) return;
    setErrMsg("");
    const r = await authFetch(`/api/employees/${expandedId}/managers`, {
      method: "POST",
      body: JSON.stringify({ managerId: Number(addManagerId), type: addManagerType }),
    });
    if (!r.ok) {
      const err = await r.json();
      setErrMsg(err.error || "เพิ่มไม่สำเร็จ");
      return;
    }
    setAddManagerId("");
    loadDetail(expandedId);
  }

  async function handleRemoveManager(relationshipId) {
    await authFetch(`/api/reporting-relationships/${relationshipId}`, { method: "DELETE" });
    loadDetail(expandedId);
  }

  async function handleDeleteEmployee(emp) {
    if (!window.confirm(`ยืนยันลบพนักงาน "${emp.full_name}"?\nสายบังคับบัญชาที่เกี่ยวข้องจะถูกลบไปด้วย และไม่สามารถกู้คืนได้`)) return;
    const r = await authFetch(`/api/employees/${emp.id}`, { method: "DELETE" });
    if (!r.ok) {
      const err = await r.json().catch(() => ({}));
      setErrMsg(err.error || "ลบไม่สำเร็จ");
      return;
    }
    if (expandedId === emp.id) { setExpandedId(null); setDetail(null); }
    loadEmployees();
  }

  return (
    <div className="org-page">
      <div className="org-toolbar">
        <button className="link-btn" onClick={onBack}>&larr; กลับแดชบอร์ด</button>
        <h2>จัดการพนักงาน / สายการบังคับบัญชา</h2>
        <button onClick={() => setFormEmployee({})}>+ เพิ่มพนักงาน</button>
      </div>

      {loading ? (
        <p>กำลังโหลด...</p>
      ) : employees.length === 0 ? (
        <p className="muted">ยังไม่มีพนักงานในระบบ กด "เพิ่มพนักงาน" เพื่อเริ่มต้น</p>
      ) : (
        <div className="table-scroll">
        <table className="org-table">
          <thead>
            <tr>
              <th>รหัส</th><th>ชื่อ-สกุล</th><th>ตำแหน่ง</th><th>สายงาน</th><th>ฝ่าย</th><th>แผนก</th><th>สถานะ</th><th></th>
            </tr>
          </thead>
          <tbody>
            {employees.map((emp) => (
              <React.Fragment key={emp.id}>
                <tr className={expandedId === emp.id ? "row-expanded" : ""}>
                  <td>{emp.emp_code || "-"}</td>
                  <td>{emp.full_name}</td>
                  <td>{emp.position || "-"}</td>
                  <td>{emp.business_line || "-"}</td>
                  <td>{emp.division || "-"}</td>
                  <td>{emp.department || "-"}</td>
                  <td><span className={`status-pill ${emp.status}`}>{emp.status === "active" ? "ทำงาน" : "พ้นสภาพ"}</span></td>
                  <td className="row-actions">
                    <button className="link-btn" onClick={() => toggleExpand(emp)}>
                      {expandedId === emp.id ? "ปิด" : "สายบังคับบัญชา"}
                    </button>
                    <button className="link-btn" onClick={() => setFormEmployee(emp)}>แก้ไข</button>
                    <button className="link-btn danger" onClick={() => handleDeleteEmployee(emp)}>ลบ</button>
                  </td>
                </tr>
                {expandedId === emp.id && (
                  <tr className="detail-row">
                    <td colSpan={8}>
                      {detailLoading || !detail ? (
                        <p>กำลังโหลด...</p>
                      ) : (
                        <div className="manager-panel">
                          <h4>ผู้บังคับบัญชาของ {emp.full_name}</h4>
                          {detail.managers.length === 0 ? (
                            <p className="muted">ยังไม่มีผู้บังคับบัญชา</p>
                          ) : (
                            <ul className="manager-list">
                              {detail.managers.map((m) => (
                                <li key={m.relationship_id}>
                                  <span className={`type-pill ${m.type}`}>{m.type === "solid" ? "สายตรง" : "สายประสาน"}</span>
                                  {m.full_name} ({m.position || "-"})
                                  <button className="link-btn danger" onClick={() => handleRemoveManager(m.relationship_id)}>ลบ</button>
                                </li>
                              ))}
                            </ul>
                          )}
                          <div className="add-manager-row">
                            <select value={addManagerId} onChange={(e) => setAddManagerId(e.target.value)}>
                              <option value="">-- เลือกผู้บังคับบัญชา --</option>
                              {employees.filter((e) => e.id !== emp.id).map((e) => (
                                <option key={e.id} value={e.id}>{e.full_name} ({e.position || "-"})</option>
                              ))}
                            </select>
                            <select value={addManagerType} onChange={(e) => setAddManagerType(e.target.value)}>
                              <option value="solid">สายตรง (solid)</option>
                              <option value="dotted">สายประสาน (dotted)</option>
                            </select>
                            <button onClick={handleAddManager}>+ เพิ่ม</button>
                          </div>
                          {errMsg && <div className="error-msg">{errMsg}</div>}
                        </div>
                      )}
                    </td>
                  </tr>
                )}
              </React.Fragment>
            ))}
          </tbody>
        </table>
        </div>
      )}

      {formEmployee && (
        <EmployeeFormModal
          employee={formEmployee}
          businessLines={businessLines}
          positions={positions}
          suggestedCode={nextEmpCode(employees)}
          onCancel={() => setFormEmployee(null)}
          onSave={handleSaveEmployee}
        />
      )}
    </div>
  );
}

function EmployeeFormModal({ employee, businessLines, positions, suggestedCode, onCancel, onSave }) {
  const [form, setForm] = React.useState({
    id: employee.id,
    emp_code: employee.emp_code || (employee.id ? "" : (suggestedCode || "")),
    prefix: employee.prefix || "",
    first_name: employee.first_name || "",
    last_name: employee.last_name || "",
    email: employee.email || "",
    position: employee.position || "",
    department: employee.department || "",
    division: employee.division || "",
    business_line: employee.business_line || "",
    status: employee.status || "active",
  });
  const [busy, setBusy] = React.useState(false);
  const [errMsg, setErrMsg] = React.useState("");

  function update(field, value) { setForm((f) => ({ ...f, [field]: value })); }

  const hasOrgData = (businessLines && businessLines.length > 0) || (positions && positions.length > 0);

  // สายงาน -> ฝ่าย -> แผนก เป็น cascade (หน่วยงาน); ตำแหน่ง = ระดับตำแหน่งกลาง (อิสระ)
  const selectedLine = businessLines.find((l) => l.name === form.business_line);
  const divOptions = selectedLine ? selectedLine.divisions : [];
  const selectedDiv = divOptions.find((d) => d.name === form.division);
  const deptOptions = selectedDiv ? selectedDiv.departments : [];

  function changeLine(name) {
    setForm((f) => ({ ...f, business_line: name, division: "", department: "" }));
  }
  function changeDivision(name) {
    setForm((f) => ({ ...f, division: name, department: "" }));
  }
  function changeDepartment(name) {
    setForm((f) => ({ ...f, department: name }));
  }

  async function handleSubmit(e) {
    e.preventDefault();
    setBusy(true);
    setErrMsg("");
    try {
      await onSave(form);
    } catch (err) {
      setErrMsg(err.message);
    } finally {
      setBusy(false);
    }
  }

  // ถ้าค่าเดิมของพนักงานไม่มีในผังองค์กร ให้เพิ่มเป็นตัวเลือกไว้ กันข้อมูลหาย
  const lineChoices = businessLines.map((l) => l.name);
  if (form.business_line && !lineChoices.includes(form.business_line)) lineChoices.push(form.business_line);
  const divChoices = divOptions.map((d) => d.name);
  if (form.division && !divChoices.includes(form.division)) divChoices.push(form.division);
  const deptChoices = deptOptions.map((d) => d.name);
  if (form.department && !deptChoices.includes(form.department)) deptChoices.push(form.department);
  const posChoices = positions.map((p) => p.name);
  if (form.position && !posChoices.includes(form.position)) posChoices.push(form.position);

  return (
    <div className="modal-backdrop" onClick={onCancel}>
      <form className="modal-card" onClick={(e) => e.stopPropagation()} onSubmit={handleSubmit}>
        <h3>{form.id ? "แก้ไขพนักงาน" : "เพิ่มพนักงาน"}</h3>

        {!hasOrgData && (
          <div className="notice">
            ยังไม่มีผังองค์กร — ไปที่หน้า "ผังองค์กร" เพื่อกำหนดสายงาน/ฝ่าย/แผนก และระดับตำแหน่งก่อน แล้วจะเลือกได้ที่นี่
          </div>
        )}

        <div className="form-grid">
          <label>รหัสพนักงาน<input value={form.emp_code} onChange={(e) => update("emp_code", e.target.value)} placeholder="เช่น SHM00001" /></label>
          <label>
            คำนำหน้า
            <select value={form.prefix} onChange={(e) => update("prefix", e.target.value)}>
              <option value="">-- เลือกคำนำหน้า --</option>
              {PREFIX_OPTIONS.map((p) => <option key={p} value={p}>{p}</option>)}
              {form.prefix && !PREFIX_OPTIONS.includes(form.prefix) && (
                <option value={form.prefix}>{form.prefix}</option>
              )}
            </select>
          </label>
          <label>ชื่อ*<input value={form.first_name} onChange={(e) => update("first_name", e.target.value)} required /></label>
          <label>นามสกุล*<input value={form.last_name} onChange={(e) => update("last_name", e.target.value)} required /></label>
          <label>อีเมล (ถ้ามีสิทธิ์ login)<input type="email" value={form.email} onChange={(e) => update("email", e.target.value)} /></label>

          <label>
            สายงาน
            <select value={form.business_line} onChange={(e) => changeLine(e.target.value)}>
              <option value="">-- เลือกสายงาน --</option>
              {lineChoices.map((l) => <option key={l} value={l}>{l}</option>)}
            </select>
          </label>
          <label>
            ฝ่าย
            <select value={form.division} onChange={(e) => changeDivision(e.target.value)} disabled={!form.business_line}>
              <option value="">-- เลือกฝ่าย --</option>
              {divChoices.map((d) => <option key={d} value={d}>{d}</option>)}
            </select>
          </label>
          <label>
            แผนก
            <select value={form.department} onChange={(e) => changeDepartment(e.target.value)} disabled={!form.division}>
              <option value="">-- เลือกแผนก --</option>
              {deptChoices.map((d) => <option key={d} value={d}>{d}</option>)}
            </select>
          </label>
          <label>
            ตำแหน่ง (ระดับ)
            <select value={form.position} onChange={(e) => update("position", e.target.value)}>
              <option value="">-- เลือกตำแหน่ง --</option>
              {posChoices.map((p) => <option key={p} value={p}>{p}</option>)}
            </select>
          </label>

          {form.id && (
            <label>สถานะ
              <select value={form.status} onChange={(e) => update("status", e.target.value)}>
                <option value="active">ทำงาน</option>
                <option value="inactive">พ้นสภาพ</option>
              </select>
            </label>
          )}
        </div>
        {errMsg && <div className="error-msg">{errMsg}</div>}
        <div className="modal-actions">
          <button type="button" className="secondary" onClick={onCancel}>ยกเลิก</button>
          <button type="submit" disabled={busy}>{busy ? "กำลังบันทึก..." : "บันทึก"}</button>
        </div>
      </form>
    </div>
  );
}