// Organization Chart — แสดงโครงสร้างองค์กร สายงาน → ฝ่าย → แผนก (เป็นหลัก)
// และวางพนักงานไว้ใต้หน่วยงานที่สังกัด (ถ้ามี). แสดงโครงสร้างได้แม้ยังไม่มีพนักงาน
// ใช้ authFetch จาก org-structure.jsx (โหลดก่อนไฟล์นี้ใน index.html)

const OC_PALETTE = ["#4338ca", "#db2777", "#7c3aed", "#0e7490", "#ea580c", "#16a34a", "#b45309"];

function ocInitial(emp) {
  const s = (emp.first_name || emp.full_name || "?").trim();
  return s.charAt(0) || "?";
}

// สร้าง node tree จากโครงสร้างหน่วยงาน + วางพนักงานใต้หน่วยที่ตรงลึกสุด
function buildOrgChart(structure, employees) {
  const lines = (structure && structure.businessLines) || [];
  const emps = employees || [];
  const used = new Set();
  const empNode = (e, color) => ({ kind: "emp", id: "e" + e.id, emp: e, color, children: [] });

  const roots = lines.map((line, i) => {
    const color = OC_PALETTE[i % OC_PALETTE.length];

    const divChildren = (line.divisions || []).map((div) => {
      const deptChildren = (div.departments || []).map((dept) => {
        const deptEmps = emps.filter((e) => !used.has(e.id) &&
          e.business_line === line.name && e.division === div.name && e.department === dept.name);
        deptEmps.forEach((e) => used.add(e.id));
        return { kind: "unit", unitType: "department", id: "d" + dept.id, name: dept.name, color,
          children: deptEmps.map((e) => empNode(e, color)) };
      });
      // พนักงานที่ระบุถึงระดับฝ่าย (ยังไม่ได้ระบุแผนก หรือแผนกไม่ตรง)
      const divEmps = emps.filter((e) => !used.has(e.id) &&
        e.business_line === line.name && e.division === div.name);
      divEmps.forEach((e) => used.add(e.id));
      return { kind: "unit", unitType: "division", id: "v" + div.id, name: div.name, color,
        children: [...deptChildren, ...divEmps.map((e) => empNode(e, color))] };
    });

    // พนักงานที่ระบุถึงระดับสายงาน
    const lineEmps = emps.filter((e) => !used.has(e.id) && e.business_line === line.name);
    lineEmps.forEach((e) => used.add(e.id));
    return { kind: "unit", unitType: "line", id: "l" + line.id, name: line.name, color,
      children: [...divChildren, ...lineEmps.map((e) => empNode(e, color))] };
  });

  // พนักงานที่ยังไม่ได้ระบุหน่วยงาน (ไม่ตรงสายงานใดเลย)
  const rest = emps.filter((e) => !used.has(e.id));
  if (rest.length) {
    roots.push({ kind: "unit", unitType: "none", id: "none", name: "ยังไม่ระบุหน่วยงาน", color: "#94a3b8",
      children: rest.map((e) => empNode(e, "#94a3b8")) });
  }
  return roots;
}

function OrgDiagramScreen({ onBack }) {
  const [structure, setStructure] = React.useState(null);
  const [employees, setEmployees] = React.useState([]);
  const [loading, setLoading] = React.useState(true);

  React.useEffect(() => {
    (async () => {
      const [sRes, tRes] = await Promise.all([
        authFetch("/api/org-structure"),
        authFetch("/api/org-tree"),
      ]);
      const s = await sRes.json();
      const t = await tRes.json();
      setStructure(s);
      setEmployees((t && t.employees) || []);
      setLoading(false);
    })();
  }, []);

  const roots = React.useMemo(() => buildOrgChart(structure, employees), [structure, employees]);
  const hasStructure = structure && (structure.businessLines || []).length > 0;

  return (
    <div className="org-page org-page--fill">
      <div className="org-toolbar">
        <button className="link-btn" onClick={onBack}>&larr; กลับแดชบอร์ด</button>
        <h2>แผนผังองค์กร (Organization Chart)</h2>
      </div>
      <p className="muted small" style={{ marginTop: -8 }}>
        โครงสร้าง สายงาน → ฝ่าย → แผนก (พนักงานจะแสดงใต้หน่วยงานที่สังกัด) — แก้โครงสร้างได้ที่หน้า "ผังองค์กร"
      </p>

      {loading ? (
        <p>กำลังโหลด...</p>
      ) : !hasStructure && roots.length === 0 ? (
        <p className="muted">ยังไม่มีโครงสร้างองค์กร — ไปที่หน้า "ผังองค์กร" เพื่อกำหนดสายงาน/ฝ่าย/แผนกก่อน</p>
      ) : (
        <div className="orgchart-scroll">
          <div className="orgchart">
            <ul className="oc-root">
              {roots.map((root) => (
                <OrgNode key={root.id} node={root} />
              ))}
            </ul>
          </div>
        </div>
      )}
    </div>
  );
}

function OrgNode({ node }) {
  return (
    <li>
      {node.kind === "emp" ? <EmpBox emp={node.emp} color={node.color} /> : <UnitBox node={node} />}
      {node.children.length > 0 && (
        <ul>
          {node.children.map((c) => <OrgNode key={c.id} node={c} />)}
        </ul>
      )}
    </li>
  );
}

function UnitBox({ node }) {
  const tag = node.unitType === "line" ? "สายงาน"
    : node.unitType === "division" ? "ฝ่าย"
    : node.unitType === "department" ? "แผนก" : "";
  return (
    <div className="oc-card oc-unit" style={{ borderTopColor: node.color }}>
      {tag && <span className="oc-utag" style={{ background: node.color }}>{tag}</span>}
      <span className="oc-uname">{node.name}</span>
    </div>
  );
}

function EmpBox({ emp, color }) {
  return (
    <div className="oc-card">
      <div className="oc-avatar" style={{ background: color }}>{ocInitial(emp)}</div>
      <div className="oc-info">
        <div className="oc-name">{emp.full_name}</div>
        <div className="oc-pos" style={{ color }}>{emp.position || "—"}</div>
      </div>
    </div>
  );
}