"use client";

import { useEffect, useMemo, useState } from "react";
import Link from "next/link";
import {
  AlertCircle,
  ArrowLeft,
  Award,
  Building2,
  Check,
  CheckCircle2,
  ChevronDown,
  ChevronRight,
  Crown,
  ExternalLink,
  FolderPlus,
  GripVertical,
  Lock,
  Mail,
  Network,
  Pencil,
  Phone,
  Plus,
  RefreshCw,
  Search,
  Settings2,
  Trash2,
  UserCheck,
  Users,
  X,
} from "lucide-react";

interface OrgNode {
  id: number;
  employeeNumber: string;
  firstName: string;
  lastName: string;
  email: string;
  jobTitle: string;
  status: string;
  employmentType: string;
  hireDate: string;
  managerId: number | null;
  departmentId: number | null;
  department: { id: number; name: string } | null;
  salary: number;
}

interface DepartmentInfo {
  id: number | null;
  name: string;
  description: string;
  parentDepartmentId: number | null;
  headEmployeeId: number | null;
  headcount: number;
  head: { id: number; name: string; jobTitle: string; reportsCount: number } | null;
}

interface OrgResponse {
  enabled: boolean;
  totalEmployees: number;
  generatedAt: string;
  nodes: OrgNode[];
  departments: DepartmentInfo[];
}

const DEPARTMENT_ACCENTS: Record<string, string> = {
  Engineering: "border-blue-500 bg-blue-50",
  Marketing: "border-purple-500 bg-purple-50",
  Sales: "border-emerald-500 bg-emerald-50",
  Design: "border-pink-500 bg-pink-50",
  Product: "border-indigo-500 bg-indigo-50",
  Operations: "border-amber-500 bg-amber-50",
  Unassigned: "border-slate-300 bg-slate-50",
};

function accentFor(name: string) {
  return DEPARTMENT_ACCENTS[name] || "border-indigo-400 bg-indigo-50";
}

interface TreeNode extends OrgNode {
  reports: TreeNode[];
  depth: number;
}

function buildTree(nodes: OrgNode[]): TreeNode[] {
  const map = new Map<number, TreeNode>();
  nodes.forEach((node) => map.set(node.id, { ...node, reports: [], depth: 0 }));

  const roots: TreeNode[] = [];
  map.forEach((node) => {
    if (node.managerId && map.has(node.managerId)) {
      const parent = map.get(node.managerId)!;
      node.depth = parent.depth + 1;
      parent.reports.push(node);
    } else {
      roots.push(node);
    }
  });

  const sortNode = (n: TreeNode) => {
    n.reports.sort((a, b) => a.lastName.localeCompare(b.lastName));
    n.reports.forEach((child) => {
      child.depth = n.depth + 1;
      sortNode(child);
    });
  };
  roots.forEach(sortNode);

  return roots;
}

function countReports(node: TreeNode): number {
  return node.reports.reduce((sum, child) => sum + 1 + countReports(child), 0);
}

function isDescendantOf(candidateId: number, targetId: number, allNodes: OrgNode[]): boolean {
  if (candidateId === targetId) return true;
  let current: OrgNode | undefined = allNodes.find((n) => n.id === targetId);
  while (current && current.managerId) {
    if (current.managerId === candidateId) return true;
    const nextManagerId: number = current.managerId;
    current = allNodes.find((n) => n.id === nextManagerId);
  }
  return false;
}

function isDeptDescendantOf(candidateId: number, targetId: number, allDepts: DepartmentInfo[]): boolean {
  if (candidateId === targetId) return true;
  let current = allDepts.find((d) => d.id === targetId);
  while (current && current.parentDepartmentId) {
    if (current.parentDepartmentId === candidateId) return true;
    const nextId: number = current.parentDepartmentId;
    current = allDepts.find((d) => d.id === nextId);
  }
  return false;
}

function NodeCard({
  node,
  onSelect,
  isRoot,
  canEdit,
  isDragging,
  isDropTarget,
  onDragStart,
  onDragOver,
  onDragLeave,
  onDrop,
  departments,
  onEditDept,
  onAddSubDept,
}: {
  node: TreeNode;
  onSelect: (node: OrgNode) => void;
  isRoot: boolean;
  canEdit: boolean;
  isDragging?: boolean;
  isDropTarget?: boolean;
  onDragStart?: (e: React.DragEvent, node: OrgNode) => void;
  onDragOver?: (e: React.DragEvent, node: OrgNode) => void;
  onDragLeave?: (e: React.DragEvent) => void;
  onDrop?: (e: React.DragEvent, node: OrgNode) => void;
  departments?: DepartmentInfo[];
  onEditDept?: (dept: DepartmentInfo) => void;
  onAddSubDept?: (parentId?: number) => void;
}) {
  const accent = accentFor(node.department?.name || "Unassigned");
  const headedDepartments = departments?.filter((d) => d.headEmployeeId === node.id) || [];

  return (
    <div className="flex flex-col items-center group relative z-10">
      {headedDepartments.map((dept) => (
        <div
          key={dept.id}
          className={`w-[270px] -mb-3 pb-4 pt-3 px-4 rounded-t-2xl shadow-sm text-white relative z-0 flex items-center justify-between gap-2`}
          style={{ backgroundColor: "var(--sidebar-bg, #0f172a)" }}
        >
          <div className="min-w-0 flex-1">
            <p className="text-[10px] uppercase font-extrabold text-indigo-200 tracking-wider">Department Head</p>
            <p className="font-bold text-sm truncate">{dept.name}</p>
          </div>
          {canEdit && onEditDept && onAddSubDept && (
            <div className="flex items-center gap-0.5 shrink-0 bg-white/10 rounded-lg p-0.5">
              <button
                onClick={(e) => { e.stopPropagation(); onEditDept(dept); }}
                className="p-1.5 rounded-md hover:bg-white/20 transition-colors"
                title="Edit Department"
              >
                <Pencil className="w-3.5 h-3.5" />
              </button>
              <button
                onClick={(e) => { e.stopPropagation(); if (dept.id) onAddSubDept(dept.id); }}
                className="p-1.5 rounded-md hover:bg-white/20 transition-colors"
                title="Add Sub-Division"
              >
                <Plus className="w-3.5 h-3.5" />
              </button>
            </div>
          )}
        </div>
      ))}
      <div
        draggable={canEdit}
        onDragStart={(e) => onDragStart?.(e, node)}
        onDragOver={(e) => {
          if (!canEdit) return;
          e.preventDefault();
          onDragOver?.(e, node);
        }}
        onDragLeave={onDragLeave}
        onDrop={(e) => {
          if (!canEdit) return;
          e.preventDefault();
          onDrop?.(e, node);
        }}
        className={`relative text-left w-64 rounded-2xl bg-white shadow-sm border-t-4 ${accent.split(" ")[0]} p-4 transition-all select-none z-10 ${
          isRoot && headedDepartments.length === 0 ? "ring-2 ring-indigo-500 ring-offset-2" : ""
        } ${isDragging ? "opacity-40 scale-95 border-dashed" : ""} ${
          isDropTarget ? "ring-4 ring-blue-500 ring-offset-2 bg-blue-50/80 border-blue-600 scale-105 shadow-xl" : headedDepartments.length === 0 ? "hover:shadow-md hover:-translate-y-0.5" : ""
        }`}
      >
        <div className="flex items-center justify-between gap-2">
          <button
            type="button"
            onClick={() => onSelect(node)}
            className="flex items-center gap-3 min-w-0 flex-1 text-left"
          >
            <div
              className={`w-11 h-11 rounded-full flex items-center justify-center font-bold text-sm shrink-0 ${accent.split(" ")[1]} text-slate-800`}
            >
              {node.firstName[0]}
              {node.lastName[0]}
            </div>
            <div className="min-w-0 flex-1">
              <p className="font-bold text-gray-900 truncate group-hover:text-indigo-700">
                {node.firstName} {node.lastName}
              </p>
              <p className="text-[11px] text-gray-500 truncate font-mono">{node.employeeNumber}</p>
            </div>
          </button>

          {canEdit && (
            <span className="p-1 text-gray-300 group-hover:text-indigo-500 cursor-grab active:cursor-grabbing shrink-0" title="Drag to reassign supervisor">
              <GripVertical className="w-4 h-4" />
            </span>
          )}
        </div>

        <button
          type="button"
          onClick={() => onSelect(node)}
          className="w-full text-left mt-3 space-y-1 block"
        >
          <p className="text-sm font-semibold text-gray-800 line-clamp-2 leading-tight">
            {node.jobTitle}
          </p>
          <div className="flex items-center gap-1.5 text-[11px] text-gray-500 pt-1">
            <Building2 className="w-3 h-3" />
            <span className="truncate">{node.department?.name || "Unassigned"}</span>
          </div>
        </button>

        {isDropTarget && (
          <div className="absolute inset-0 bg-indigo-600/10 border-2 border-indigo-600 border-dashed rounded-2xl flex items-center justify-center pointer-events-none">
            <span className="px-2 py-1 bg-indigo-600 text-white font-extrabold text-[10px] rounded-md shadow">
              Make Supervisor
            </span>
          </div>
        )}
      </div>
    </div>
  );
}

function TreeBranch({
  node,
  onSelect,
  collapsed,
  toggleCollapse,
  isRoot,
  canEdit,
  draggedNode,
  dropTargetId,
  onDragStart,
  onDragOver,
  onDragLeave,
  onDrop,
  departments,
  onEditDept,
  onAddSubDept,
}: {
  node: TreeNode;
  onSelect: (node: OrgNode) => void;
  collapsed: Set<number>;
  toggleCollapse: (id: number) => void;
  isRoot: boolean;
  canEdit: boolean;
  draggedNode: OrgNode | null;
  dropTargetId: number | null;
  onDragStart: (e: React.DragEvent, node: OrgNode) => void;
  onDragOver: (e: React.DragEvent, node: OrgNode) => void;
  onDragLeave: (e: React.DragEvent) => void;
  onDrop: (e: React.DragEvent, node: OrgNode) => void;
  departments?: DepartmentInfo[];
  onEditDept?: (dept: DepartmentInfo) => void;
  onAddSubDept?: (parentId?: number) => void;
}) {
  const isCollapsed = collapsed.has(node.id);
  const hasReports = node.reports.length > 0;
  const isDragging = draggedNode?.id === node.id;
  const isDropTarget = dropTargetId === node.id;

  return (
    <div className="flex flex-col items-center relative">
      <NodeCard
        node={node}
        onSelect={onSelect}
        isRoot={isRoot}
        canEdit={canEdit}
        isDragging={isDragging}
        isDropTarget={isDropTarget}
        onDragStart={onDragStart}
        onDragOver={onDragOver}
        onDragLeave={onDragLeave}
        onDrop={onDrop}
        departments={departments}
        onEditDept={onEditDept}
        onAddSubDept={onAddSubDept}
      />

      {hasReports && (
        <button
          onClick={() => toggleCollapse(node.id)}
          className="mt-2 flex items-center gap-1 px-2.5 py-1 text-[11px] font-bold rounded-full bg-slate-100 text-slate-700 hover:bg-slate-200 transition-colors shadow-xs"
        >
          {isCollapsed ? (
            <>
              <ChevronRight className="w-3 h-3" />
              Show {countReports(node)} report{countReports(node) === 1 ? "" : "s"}
            </>
          ) : (
            <>
              <ChevronDown className="w-3 h-3" />
              {node.reports.length} direct report{node.reports.length === 1 ? "" : "s"}
            </>
          )}
        </button>
      )}

      {hasReports && !isCollapsed && (
        <>
          <div className="w-px h-6 bg-slate-300" />
          <div className="relative flex items-start gap-8 justify-center">
            {node.reports.length > 1 && (
              <div
                className="absolute top-0 h-px bg-slate-300"
                style={{ left: "40px", right: "40px" }}
              />
            )}
            {node.reports.map((child) => (
              <div key={child.id} className="flex flex-col items-center relative pt-6">
                <div className="absolute top-0 left-1/2 -translate-x-1/2 w-px h-6 bg-slate-300" />
                <TreeBranch
                  node={child}
                  onSelect={onSelect}
                  collapsed={collapsed}
                  toggleCollapse={toggleCollapse}
                  isRoot={false}
                  canEdit={canEdit}
                  draggedNode={draggedNode}
                  dropTargetId={dropTargetId}
                  onDragStart={onDragStart}
                  onDragOver={onDragOver}
                  onDragLeave={onDragLeave}
                  onDrop={onDrop}
                  departments={departments}
                  onEditDept={onEditDept}
                  onAddSubDept={onAddSubDept}
                />
              </div>
            ))}
          </div>
        </>
      )}
    </div>
  );
}

export default function OrgChartPage() {
  const [data, setData] = useState<OrgResponse | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState("");
  const [notice, setNotice] = useState("");
  const [search, setSearch] = useState("");
  const [deptFilter, setDeptFilter] = useState<string>("all");
  const [selected, setSelected] = useState<OrgNode | null>(null);
  const [collapsed, setCollapsed] = useState<Set<number>>(new Set());
  const [canEditHR, setCanEditHR] = useState(false);

  // Drag and Drop state
  const [draggedNode, setDraggedNode] = useState<OrgNode | null>(null);
  const [dropTargetId, setDropTargetId] = useState<number | null>(null);
  const [pendingReassign, setPendingReassign] = useState<{
    employee: OrgNode;
    newManager: OrgNode | null;
  } | null>(null);
  const [saving, setSaving] = useState(false);

  // Modal selector state
  const [selectedNewManagerId, setSelectedNewManagerId] = useState<string>("");

  // Role editing state (within the employee snapshot modal)
  const [editingRole, setEditingRole] = useState(false);
  const [roleForm, setRoleForm] = useState({ jobTitle: "", departmentId: "" });
  const [savingRole, setSavingRole] = useState(false);

  // Department management state
  const [showDeptModal, setShowDeptModal] = useState(false);
  const [editingDept, setEditingDept] = useState<DepartmentInfo | null>(null);
  const [deptForm, setDeptForm] = useState({ name: "", description: "", parentDepartmentId: "", headEmployeeId: "" });
  const [savingDept, setSavingDept] = useState(false);

  // Active Directory sync state
  const [adSetting, setAdSetting] = useState<any>(null);
  const [showAdModal, setShowAdModal] = useState(false);
  const [adForm, setAdForm] = useState({ enabled: false, mode: "mock", tenantId: "", clientId: "", clientSecret: "", autoProvision: false, overwriteRoles: true });
  const [savingAd, setSavingAd] = useState(false);
  const [syncingAd, setSyncingAd] = useState(false);
  const [lastSyncRun, setLastSyncRun] = useState<any>(null);

  async function loadAll() {
    setLoading(true);
    setError("");
    try {
      const [orgRes, meRes] = await Promise.all([
        fetch("/api/hris/org-chart"),
        fetch("/api/me"),
      ]);
      const [orgData, meData] = await Promise.all([orgRes.json(), meRes.json()]);

      if (!orgRes.ok) {
        setError(orgData.error || "Unable to load org chart.");
        return;
      }

      setData(orgData);
      const role = meData?.user?.role || "interviewer";
      setCanEditHR(["super_admin", "admin", "hr", "hr_manager", "people_ops", "recruiter"].includes(role));

      // Load AD sync config + last run (non-blocking)
      try {
        const [adRes, runsRes] = await Promise.all([
          fetch("/api/settings/active-directory"),
          fetch("/api/hris/active-directory/sync"),
        ]);
        const adData = await adRes.json();
        const runsData = await runsRes.json();
        if (adRes.ok) {
          setAdSetting(adData);
          setAdForm({
            enabled: Boolean(adData.enabled),
            mode: adData.mode || "mock",
            tenantId: adData.tenantId || "",
            clientId: adData.clientId || "",
            clientSecret: adData.clientSecret || "",
            autoProvision: Boolean(adData.autoProvision),
            overwriteRoles: adData.overwriteRoles !== false,
          });
        }
        if (runsRes.ok && Array.isArray(runsData) && runsData.length > 0) {
          setLastSyncRun(runsData[0]);
        }
      } catch { /* ignore */ }
    } catch (err) {
      setError("Failed to load org chart.");
    } finally {
      setLoading(false);
    }
  }

  useEffect(() => {
    loadAll();
  }, []);

  useEffect(() => {
    if (selected) {
      setSelectedNewManagerId(selected.managerId ? String(selected.managerId) : "root");
      setRoleForm({ jobTitle: selected.jobTitle, departmentId: selected.departmentId ? String(selected.departmentId) : "" });
      setEditingRole(false);
    }
  }, [selected]);

  const filteredNodes = useMemo(() => {
    if (!data) return [] as OrgNode[];
    const query = search.trim().toLowerCase();
    return data.nodes.filter((node) => {
      if (deptFilter !== "all" && String(node.departmentId ?? "unassigned") !== deptFilter) {
        return false;
      }
      if (!query) return true;
      return (
        `${node.firstName} ${node.lastName}`.toLowerCase().includes(query) ||
        node.jobTitle.toLowerCase().includes(query) ||
        node.employeeNumber.toLowerCase().includes(query) ||
        (node.department?.name || "").toLowerCase().includes(query)
      );
    });
  }, [data, search, deptFilter]);

  const tree = useMemo(() => (data ? buildTree(filteredNodes) : []), [data, filteredNodes]);

  const totalManagers = useMemo(() => {
    if (!data) return 0;
    const set = new Set<number>();
    data.nodes.forEach((n) => n.managerId && set.add(n.managerId));
    return set.size;
  }, [data]);

  // Group departments into parent -> sub-division tree for the legend
  const departmentTree = useMemo(() => {
    if (!data) return [] as (DepartmentInfo & { children: DepartmentInfo[] })[];
    const withChildren = data.departments.map((d) => ({ ...d, children: [] as DepartmentInfo[] }));
    const byId = new Map(withChildren.map((d) => [d.id, d]));
    const roots: (DepartmentInfo & { children: DepartmentInfo[] })[] = [];
    withChildren.forEach((d) => {
      if (d.parentDepartmentId && byId.has(d.parentDepartmentId)) {
        byId.get(d.parentDepartmentId)!.children.push(d);
      } else {
        roots.push(d);
      }
    });
    return roots;
  }, [data]);

  const toggleCollapse = (id: number) => {
    setCollapsed((prev) => {
      const next = new Set(prev);
      if (next.has(id)) next.delete(id);
      else next.add(id);
      return next;
    });
  };

  async function reloadChart() {
    try {
      const res = await fetch("/api/hris/org-chart");
      const payload = await res.json();
      if (res.ok) setData(payload);
    } catch { /* ignore */ }
  }

  // Handle Drag and Drop
  function handleDragStart(e: React.DragEvent, node: OrgNode) {
    if (!canEditHR) return;
    e.dataTransfer.setData("text/plain", String(node.id));
    e.dataTransfer.effectAllowed = "move";
    setDraggedNode(node);
  }

  function handleDragOver(e: React.DragEvent, node: OrgNode) {
    if (!canEditHR || !draggedNode) return;
    if (draggedNode.id === node.id) return;
    setDropTargetId(node.id);
  }

  function handleDragLeave(e: React.DragEvent) {
    if (!canEditHR) return;
  }

  function handleDrop(e: React.DragEvent, targetNode: OrgNode) {
    if (!canEditHR || !draggedNode) return;
    setDropTargetId(null);

    if (draggedNode.id === targetNode.id) return;

    // Cycle detection check
    if (data?.nodes && isDescendantOf(draggedNode.id, targetNode.id, data.nodes)) {
      setError(`Cannot reassign ${draggedNode.firstName} ${draggedNode.lastName} to report to ${targetNode.firstName} ${targetNode.lastName} because ${targetNode.firstName} reports under ${draggedNode.firstName}.`);
      setDraggedNode(null);
      return;
    }

    setPendingReassign({
      employee: draggedNode,
      newManager: targetNode,
    });
    setDraggedNode(null);
  }

  async function commitSupervisorChange(employeeId: number, newManagerId: number | null) {
    setSaving(true);
    setError("");
    setNotice("");
    try {
      const res = await fetch(`/api/hris/employees/${employeeId}`, {
        method: "PUT",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ managerId: newManagerId }),
      });
      const updated = await res.json();

      if (res.ok) {
        const newManagerObj = data?.nodes.find((n) => n.id === newManagerId);
        const managerTitle = newManagerObj ? `${newManagerObj.firstName} ${newManagerObj.lastName}` : "Top Executive / No Direct Manager";
        setNotice(`Supervisor updated in HRIS! ${updated.firstName} ${updated.lastName} now reports to ${managerTitle}.`);
        setPendingReassign(null);
        setSelected(null);
        await reloadChart();
      } else {
        setError(updated.error || "Failed to update supervisor in HRIS.");
      }
    } catch {
      setError("Network error while updating reporting hierarchy.");
    } finally {
      setSaving(false);
    }
  }

  async function saveRoleChange() {
    if (!selected) return;
    setSavingRole(true);
    setError("");
    setNotice("");
    try {
      const res = await fetch(`/api/hris/employees/${selected.id}`, {
        method: "PUT",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          jobTitle: roleForm.jobTitle,
          departmentId: roleForm.departmentId ? Number(roleForm.departmentId) : null,
        }),
      });
      const updated = await res.json();
      if (res.ok) {
        setNotice(`Role updated! ${updated.firstName} ${updated.lastName} is now ${updated.jobTitle}.`);
        setEditingRole(false);
        setSelected(null);
        await reloadChart();
      } else {
        setError(updated.error || "Failed to update role.");
      }
    } catch {
      setError("Network error while updating role.");
    } finally {
      setSavingRole(false);
    }
  }

  // Department management handlers
  function openAddDepartment(parentId?: number) {
    setDeptForm({ name: "", description: "", parentDepartmentId: parentId ? String(parentId) : "", headEmployeeId: "" });
    setEditingDept(null);
    setShowDeptModal(true);
    setError("");
  }

  function openEditDepartment(dept: DepartmentInfo) {
    setDeptForm({
      name: dept.name,
      description: dept.description || "",
      parentDepartmentId: dept.parentDepartmentId ? String(dept.parentDepartmentId) : "",
      headEmployeeId: dept.headEmployeeId ? String(dept.headEmployeeId) : "",
    });
    setEditingDept(dept);
    setShowDeptModal(true);
    setError("");
  }

  async function handleSaveDepartment(e: React.FormEvent) {
    e.preventDefault();
    setSavingDept(true);
    setError("");
    setNotice("");
    try {
      const payload = {
        name: deptForm.name,
        description: deptForm.description,
        parentDepartmentId: deptForm.parentDepartmentId || null,
        headEmployeeId: deptForm.headEmployeeId || null,
      };

      const res = editingDept
        ? await fetch(`/api/departments/${editingDept.id}`, {
            method: "PUT",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify(payload),
          })
        : await fetch(`/api/departments`, {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify(payload),
          });

      const result = await res.json();
      if (res.ok) {
        setNotice(editingDept ? `Department "${result.name}" updated.` : `Department "${result.name}" created.`);
        setShowDeptModal(false);
        setEditingDept(null);
        await reloadChart();
      } else {
        setError(result.error || "Failed to save department.");
      }
    } catch {
      setError("Network error while saving department.");
    } finally {
      setSavingDept(false);
    }
  }

  async function handleDeleteDepartment(dept: DepartmentInfo) {
    if (!dept.id) return;
    if (!confirm(`Delete department "${dept.name}"? This cannot be undone.`)) return;
    setError("");
    setNotice("");
    try {
      const res = await fetch(`/api/departments/${dept.id}`, { method: "DELETE" });
      const result = await res.json();
      if (res.ok) {
        setNotice(`Department "${dept.name}" deleted.`);
        setShowDeptModal(false);
        await reloadChart();
      } else {
        setError(result.error || "Failed to delete department.");
      }
    } catch {
      setError("Network error while deleting department.");
    }
  }

  async function saveAdSettings() {
    setSavingAd(true);
    setError("");
    try {
      const res = await fetch("/api/settings/active-directory", {
        method: "PUT",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(adForm),
      });
      const data = await res.json();
      if (res.ok) {
        setAdSetting(data);
        setNotice("Active Directory settings saved.");
      } else {
        setError(data.error || "Failed to save Active Directory settings.");
      }
    } catch {
      setError("Network error saving Active Directory settings.");
    } finally {
      setSavingAd(false);
    }
  }

  async function runAdSync() {
    setSyncingAd(true);
    setError("");
    setNotice("");
    try {
      const res = await fetch("/api/hris/active-directory/sync", { method: "POST" });
      const data = await res.json();
      if (res.ok) {
        const r = data.run;
        setLastSyncRun(r);
        setNotice(
          `Active Directory sync complete — ${r.usersFound} directory users found, ${r.employeesMatched} matched, ${r.managerLinksUpdated} reporting lines updated, ${r.employeesCreated} provisioned, ${r.departmentsCreated} departments created.`
        );
        await reloadChart();
      } else {
        if (data.run) setLastSyncRun(data.run);
        setError(data.error || "Active Directory sync failed.");
      }
    } catch {
      setError("Network error running Active Directory sync.");
    } finally {
      setSyncingAd(false);
    }
  }

  function renderDepartmentCard(dept: DepartmentInfo & { children?: DepartmentInfo[] }, depth = 0) {
    const accentClasses = accentFor(dept.name).split(" ");
    return (
      <div key={String(dept.id)} className={depth > 0 ? "ml-5 pl-4 border-l-2 border-dashed border-gray-200" : ""}>
        <div className={`p-4 rounded-2xl border-l-4 ${accentClasses[0]} ${accentClasses[1]} flex items-start justify-between gap-3 mb-2`}>
          <div className="min-w-0 flex-1">
            <div className="flex items-center gap-2 flex-wrap">
              <p className="font-bold text-gray-900 text-sm">{dept.name}</p>
              {depth > 0 && (
                <span className="text-[9px] uppercase font-extrabold px-1.5 py-0.5 bg-white/70 text-gray-600 rounded border border-gray-300">
                  Sub-division
                </span>
              )}
            </div>
            <p className="text-xs text-gray-500 mt-0.5">
              {dept.headcount} teammate{dept.headcount === 1 ? "" : "s"}
              {dept.description ? ` · ${dept.description}` : ""}
            </p>

            {dept.head ? (
              <div className="flex items-center gap-1.5 mt-2 text-xs bg-white/70 rounded-lg px-2.5 py-1.5 border border-gray-200/80 w-fit">
                <Crown className="w-3.5 h-3.5 text-amber-500 shrink-0" />
                <span className="font-bold text-gray-800">{dept.head.name}</span>
                <span className="text-gray-400">·</span>
                <span className="text-gray-600">{dept.head.reportsCount} report{dept.head.reportsCount === 1 ? "" : "s"}</span>
              </div>
            ) : dept.id !== null ? (
              <p className="text-[11px] text-gray-400 italic mt-2">No department head assigned</p>
            ) : null}
          </div>

          {canEditHR && dept.id !== null && (
            <div className="flex items-center gap-1 shrink-0">
              <button
                onClick={() => openAddDepartment(dept.id!)}
                className="p-1.5 text-gray-500 hover:text-indigo-600 hover:bg-white/70 rounded-lg transition-colors"
                title="Add sub-division"
              >
                <FolderPlus className="w-4 h-4" />
              </button>
              <button
                onClick={() => openEditDepartment(dept)}
                className="p-1.5 text-gray-500 hover:text-indigo-600 hover:bg-white/70 rounded-lg transition-colors"
                title="Edit department"
              >
                <Pencil className="w-4 h-4" />
              </button>
            </div>
          )}
        </div>
        {dept.children && dept.children.length > 0 && (
          <div className="space-y-2 mb-2">
            {dept.children.map((child) => renderDepartmentCard(child, depth + 1))}
          </div>
        )}
      </div>
    );
  }

  return (
    <div className="p-6 max-w-[1400px] mx-auto space-y-6">
      <div className="flex items-center gap-2 text-sm text-gray-500">
        <Link href="/hris" className="hover:text-indigo-600 flex items-center gap-1">
          <ArrowLeft className="w-4 h-4" /> HRIS Directory
        </Link>
        <ChevronRight className="w-4 h-4 text-gray-400" />
        <span className="text-gray-900 font-bold">Organizational Chart</span>
      </div>

      {/* Header */}
      <div className="bg-white rounded-3xl border border-gray-200 p-6 shadow-sm flex flex-col md:flex-row md:items-center md:justify-between gap-4">
        <div className="flex items-center gap-3">
          <div className="p-3 bg-indigo-100 text-indigo-600 rounded-2xl">
            <Network className="w-6 h-6" />
          </div>
          <div>
            <div className="flex items-center gap-2">
              <h1 className="text-2xl font-extrabold text-gray-900">Organizational Chart</h1>
              {canEditHR && (
                <span className="text-[10px] uppercase font-bold px-2.5 py-0.5 bg-indigo-100 text-indigo-800 rounded-full border border-indigo-200">
                  Interactive Manipulation On
                </span>
              )}
            </div>
            <p className="text-sm text-gray-500 mt-1">
              Live reporting hierarchy. {canEditHR ? "Drag & drop cards, edit roles, or manage departments directly in HRIS." : "Read-only mode."}
            </p>
          </div>
        </div>
        {data && (
          <div className="grid grid-cols-3 gap-4 md:min-w-[420px]">
            <div className="text-center bg-slate-50 rounded-2xl p-3 border border-slate-200/80">
              <p className="text-2xl font-black text-indigo-700">{data.totalEmployees}</p>
              <p className="text-[10px] uppercase font-bold text-gray-500">Total Employees</p>
            </div>
            <div className="text-center bg-slate-50 rounded-2xl p-3 border border-slate-200/80">
              <p className="text-2xl font-black text-emerald-700">{totalManagers}</p>
              <p className="text-[10px] uppercase font-bold text-gray-500">People Managers</p>
            </div>
            <div className="text-center bg-slate-50 rounded-2xl p-3 border border-slate-200/80">
              <p className="text-2xl font-black text-purple-700">{data.departments.filter((d) => d.id !== null).length}</p>
              <p className="text-[10px] uppercase font-bold text-gray-500">Departments</p>
            </div>
          </div>
        )}
      </div>

      {notice && (
        <div className="p-4 bg-emerald-50 border border-emerald-200 rounded-2xl text-sm font-bold text-emerald-800 flex items-center justify-between shadow-sm">
          <div className="flex items-center gap-2">
            <CheckCircle2 className="w-5 h-5 text-emerald-600" />
            <span>{notice}</span>
          </div>
          <button onClick={() => setNotice("")} className="text-emerald-600 hover:text-emerald-800"><X className="w-4 h-4" /></button>
        </div>
      )}

      {error && (
        <div className="p-4 bg-red-50 border border-red-200 rounded-2xl text-sm font-semibold text-red-700 flex items-center justify-between shadow-sm">
          <div className="flex items-center gap-2">
            <AlertCircle className="w-5 h-5 text-red-600" />
            <span>{error}</span>
          </div>
          <button onClick={() => setError("")} className="text-red-600 hover:text-red-800"><X className="w-4 h-4" /></button>
        </div>
      )}

      {loading && (
        <div className="flex items-center justify-center py-24">
          <div className="animate-spin rounded-full h-10 w-10 border-b-2 border-indigo-600" />
        </div>
      )}

      {data && !error && (
        <>
          {/* Controls */}
          <div className="bg-white rounded-3xl border border-gray-200 p-4 shadow-sm flex flex-col md:flex-row items-stretch md:items-center gap-3">
            <div className="relative flex-1">
              <Search className="w-4 h-4 text-gray-400 absolute left-3 top-1/2 -translate-y-1/2" />
              <input
                type="text"
                value={search}
                onChange={(e) => setSearch(e.target.value)}
                placeholder="Search by name, job title, EMP #, or department..."
                className="w-full pl-9 pr-3 py-2.5 rounded-xl border border-gray-300 text-sm focus:ring-2 focus:ring-indigo-500 focus:outline-none"
              />
            </div>
            <select
              value={deptFilter}
              onChange={(e) => setDeptFilter(e.target.value)}
              className="rounded-xl border border-gray-300 px-3 py-2.5 text-sm focus:ring-2 focus:ring-indigo-500 focus:outline-none"
            >
              <option value="all">All Departments</option>
              {data.departments.map((d) => (
                <option key={String(d.id)} value={String(d.id ?? "unassigned")}>
                  {d.name} ({d.headcount})
                </option>
              ))}
            </select>
            <button
              onClick={() => setCollapsed(new Set())}
              className="px-3 py-2.5 rounded-xl bg-slate-100 hover:bg-slate-200 text-sm font-bold text-slate-700"
            >
              Expand All
            </button>
            <button
              onClick={() => {
                if (!data) return;
                const managerIds = new Set<number>();
                data.nodes.forEach((n) => n.managerId && managerIds.add(n.managerId));
                setCollapsed(managerIds);
              }}
              className="px-3 py-2.5 rounded-xl bg-slate-100 hover:bg-slate-200 text-sm font-bold text-slate-700"
            >
              Collapse All
            </button>
            {canEditHR && (
              <button
                onClick={() => openAddDepartment()}
                className="px-4 py-2.5 rounded-xl bg-indigo-600 hover:bg-indigo-700 text-white text-sm font-bold flex items-center gap-1.5 shadow-sm"
              >
                <FolderPlus className="w-4 h-4" /> Add Department
              </button>
            )}
            {canEditHR && (
              <button
                onClick={() => (adSetting?.enabled ? runAdSync() : setShowAdModal(true))}
                disabled={syncingAd}
                className={`px-4 py-2.5 rounded-xl text-sm font-bold flex items-center gap-1.5 shadow-sm disabled:opacity-60 ${
                  adSetting?.enabled ? "bg-sky-600 hover:bg-sky-700 text-white" : "bg-white border border-sky-300 text-sky-700 hover:bg-sky-50"
                }`}
                title={adSetting?.enabled ? "Sync org chart from Microsoft Active Directory" : "Configure Active Directory sync"}
              >
                <RefreshCw className={`w-4 h-4 ${syncingAd ? "animate-spin" : ""}`} />
                {syncingAd ? "Syncing AD..." : adSetting?.enabled ? "Sync from Active Directory" : "Connect Active Directory"}
              </button>
            )}
            {canEditHR && adSetting?.enabled && (
              <button
                onClick={() => setShowAdModal(true)}
                className="p-2.5 rounded-xl bg-slate-100 hover:bg-slate-200 text-slate-700"
                title="Active Directory settings"
              >
                <Settings2 className="w-4 h-4" />
              </button>
            )}
          </div>

          {/* AD sync status strip */}
          {adSetting?.enabled && lastSyncRun && (
            <div className="bg-sky-50 border border-sky-200 rounded-2xl px-4 py-2.5 text-xs text-sky-800 flex flex-wrap items-center gap-x-4 gap-y-1">
              <span className="font-bold flex items-center gap-1.5">
                <RefreshCw className="w-3.5 h-3.5" />
                Microsoft {lastSyncRun.source === "azure_ad" ? "Entra ID" : "Active Directory (demo)"} sync
              </span>
              <span className={`font-bold px-2 py-0.5 rounded-full uppercase text-[10px] ${lastSyncRun.status === "completed" ? "bg-emerald-100 text-emerald-800" : "bg-red-100 text-red-800"}`}>
                {lastSyncRun.status}
              </span>
              <span>Last run: {new Date(lastSyncRun.startedAt).toLocaleString()}</span>
              <span>{lastSyncRun.usersFound} users · {lastSyncRun.employeesMatched} matched · {lastSyncRun.managerLinksUpdated} reporting lines updated</span>
              {lastSyncRun.errorMessage && <span className="text-red-700 font-medium">{lastSyncRun.errorMessage}</span>}
            </div>
          )}

          {/* Chart Canvas */}
          <div className="bg-slate-50 rounded-3xl border border-gray-200 p-8 shadow-sm overflow-x-auto min-h-[500px]">
            {tree.length === 0 ? (
              <div className="text-center py-16 text-gray-400 flex flex-col items-center gap-3">
                <Users className="w-10 h-10 text-gray-300" />
                <p className="font-bold text-gray-700">No employees match your filters</p>
                <p className="text-xs">Try clearing the search or department filter.</p>
              </div>
            ) : (
              <div className="min-w-max flex justify-center gap-16 py-2 pt-6">
                {tree.map((rootNode) => (
                  <TreeBranch
                    key={rootNode.id}
                    node={rootNode}
                    onSelect={setSelected}
                    collapsed={collapsed}
                    toggleCollapse={toggleCollapse}
                    isRoot
                    canEdit={canEditHR}
                    draggedNode={draggedNode}
                    dropTargetId={dropTargetId}
                    onDragStart={handleDragStart}
                    onDragOver={handleDragOver}
                    onDragLeave={handleDragLeave}
                    onDrop={handleDrop}
                    departments={data.departments}
                    onEditDept={openEditDepartment}
                    onAddSubDept={openAddDepartment}
                  />
                ))}
              </div>
            )}
          </div>

          {/* Department Legend & Management */}
          <div className="bg-white rounded-3xl border border-gray-200 p-5 shadow-sm">
            <div className="flex items-center justify-between mb-4">
              <h3 className="font-bold text-gray-900 flex items-center gap-2">
                <Building2 className="w-4 h-4 text-indigo-600" /> Departments, Sub-Divisions & Heads
              </h3>
              {canEditHR && (
                <button
                  onClick={() => openAddDepartment()}
                  className="text-xs font-bold text-indigo-600 hover:text-indigo-800 flex items-center gap-1"
                >
                  <Plus className="w-3.5 h-3.5" /> New Department
                </button>
              )}
            </div>
            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
              {departmentTree.map((dept) => renderDepartmentCard(dept))}
            </div>
          </div>
        </>
      )}

      {/* Drag & Drop Reassign Confirmation Modal */}
      {pendingReassign && (
        <div className="fixed inset-0 bg-black/60 z-50 flex items-center justify-center p-4">
          <div className="bg-white rounded-3xl shadow-2xl w-full max-w-md overflow-hidden border border-gray-100">
            <div className="px-6 py-5 bg-indigo-600 text-white flex items-center justify-between">
              <h2 className="font-bold text-lg flex items-center gap-2">
                <span>🔄</span> Update Reporting Supervisor
              </h2>
              <button onClick={() => setPendingReassign(null)} className="p-2 text-indigo-100 hover:text-white"><X className="w-5 h-5" /></button>
            </div>
            <div className="p-6 space-y-4 text-sm">
              <p className="text-gray-700 leading-relaxed">
                You are about to modify the organizational structure in HRIS.
              </p>

              <div className="p-4 bg-indigo-50 border border-indigo-100 rounded-2xl space-y-3">
                <div>
                  <p className="text-xs font-bold uppercase text-indigo-800">Employee Record</p>
                  <p className="font-bold text-gray-900 text-base">
                    {pendingReassign.employee.firstName} {pendingReassign.employee.lastName}
                  </p>
                  <p className="text-xs text-gray-500">{pendingReassign.employee.jobTitle}</p>
                </div>

                <div className="pt-2 border-t border-indigo-200/60">
                  <p className="text-xs font-bold uppercase text-indigo-800">New Reporting Supervisor</p>
                  <p className="font-bold text-indigo-900 text-base mt-0.5">
                    {pendingReassign.newManager
                      ? `${pendingReassign.newManager.firstName} ${pendingReassign.newManager.lastName}`
                      : "Top Level Executive (No Direct Manager)"}
                  </p>
                  {pendingReassign.newManager && (
                    <p className="text-xs text-gray-500">{pendingReassign.newManager.jobTitle}</p>
                  )}
                </div>
              </div>

              <p className="text-xs text-gray-500">
                This change will be immediately saved to the HRIS employee database and logged in job history.
              </p>
            </div>

            <div className="px-6 py-4 bg-gray-50 border-t border-gray-100 flex justify-end gap-3">
              <button
                onClick={() => setPendingReassign(null)}
                className="px-4 py-2 text-sm font-bold text-gray-700 hover:bg-gray-200 rounded-xl"
              >
                Cancel
              </button>
              <button
                onClick={() =>
                  commitSupervisorChange(
                    pendingReassign.employee.id,
                    pendingReassign.newManager ? pendingReassign.newManager.id : null
                  )
                }
                disabled={saving}
                className="px-5 py-2 bg-indigo-600 hover:bg-indigo-700 text-white font-bold text-sm rounded-xl shadow-sm disabled:opacity-50 flex items-center gap-1.5"
              >
                <Check className="w-4 h-4" />
                <span>{saving ? "Updating..." : "Confirm & Push to HRIS"}</span>
              </button>
            </div>
          </div>
        </div>
      )}

      {/* Employee Snapshot Modal with Supervisor Re-assignment & Role Editing */}
      {selected && (
        <div className="fixed inset-0 bg-black/60 z-50 flex items-center justify-center p-4">
          <div className="bg-white rounded-3xl shadow-2xl w-full max-w-lg overflow-hidden border border-gray-100 max-h-[90vh] overflow-y-auto">
            <div className="px-6 py-5 bg-indigo-600 text-white flex items-center justify-between sticky top-0 z-10">
              <div>
                <p className="text-xs uppercase font-bold text-indigo-200">Employee HRIS Snapshot</p>
                <h2 className="font-bold text-lg">
                  {selected.firstName} {selected.lastName}
                </h2>
                <p className="text-xs text-indigo-100 font-mono">{selected.employeeNumber}</p>
              </div>
              <button
                onClick={() => setSelected(null)}
                className="p-2 text-indigo-100 hover:text-white rounded-xl text-xs font-bold"
              >
                <X className="w-5 h-5" />
              </button>
            </div>
            <div className="p-6 space-y-4">
              {/* Role & Department Section */}
              <div className="p-4 bg-amber-50/70 border border-amber-100 rounded-2xl space-y-2">
                <div className="flex items-center justify-between">
                  <label className="block text-xs font-bold uppercase text-amber-900">
                    Job Title & Department
                  </label>
                  {canEditHR && !editingRole && (
                    <button
                      onClick={() => setEditingRole(true)}
                      className="text-xs font-bold text-amber-700 hover:text-amber-900 flex items-center gap-1"
                    >
                      <Pencil className="w-3.5 h-3.5" /> Edit Role
                    </button>
                  )}
                </div>

                {!editingRole ? (
                  <div>
                    <p className="font-bold text-gray-900 text-base">{selected.jobTitle}</p>
                    <p className="text-sm text-gray-500 mt-0.5">{selected.department?.name || "Unassigned Department"}</p>
                  </div>
                ) : (
                  <div className="space-y-3">
                    <div>
                      <label className="block text-[11px] font-bold text-gray-500 mb-1">Job Title</label>
                      <input
                        value={roleForm.jobTitle}
                        onChange={(e) => setRoleForm({ ...roleForm, jobTitle: e.target.value })}
                        className="w-full px-3.5 py-2.5 border border-amber-200 rounded-xl text-sm font-semibold text-gray-900 bg-white focus:ring-2 focus:ring-amber-500 focus:outline-none"
                        placeholder="e.g. Senior Product Manager"
                      />
                    </div>
                    <div>
                      <label className="block text-[11px] font-bold text-gray-500 mb-1">Department</label>
                      <select
                        value={roleForm.departmentId}
                        onChange={(e) => setRoleForm({ ...roleForm, departmentId: e.target.value })}
                        className="w-full px-3.5 py-2.5 border border-amber-200 rounded-xl text-sm font-semibold text-gray-900 bg-white focus:ring-2 focus:ring-amber-500 focus:outline-none"
                      >
                        <option value="">Unassigned</option>
                        {data?.departments.filter((d) => d.id !== null).map((d) => (
                          <option key={d.id} value={String(d.id)}>{d.name}</option>
                        ))}
                      </select>
                    </div>
                    <div className="flex items-center gap-2">
                      <button
                        onClick={() => setEditingRole(false)}
                        className="flex-1 py-2 bg-white border border-gray-300 text-gray-700 font-bold text-xs rounded-xl hover:bg-gray-50"
                      >
                        Cancel
                      </button>
                      <button
                        onClick={saveRoleChange}
                        disabled={savingRole || !roleForm.jobTitle.trim()}
                        className="flex-1 py-2 bg-amber-600 hover:bg-amber-700 text-white font-bold text-xs rounded-xl shadow-sm disabled:opacity-50 flex items-center justify-center gap-1.5"
                      >
                        <Check className="w-3.5 h-3.5" />
                        <span>{savingRole ? "Saving..." : "Save Role"}</span>
                      </button>
                    </div>
                  </div>
                )}
              </div>

              {/* Supervisor Selection Block */}
              <div className="p-4 bg-indigo-50/70 border border-indigo-100 rounded-2xl space-y-2">
                <label className="block text-xs font-bold uppercase text-indigo-900">
                  Reporting Supervisor in HRIS
                </label>
                {canEditHR ? (
                  <div className="space-y-3">
                    <select
                      value={selectedNewManagerId}
                      onChange={(e) => setSelectedNewManagerId(e.target.value)}
                      className="w-full px-3.5 py-2.5 border border-indigo-200 rounded-xl text-sm font-semibold text-gray-900 bg-white focus:ring-2 focus:ring-indigo-500 focus:outline-none"
                    >
                      <option value="root">Top Executive (No Supervisor)</option>
                      {data?.nodes
                        .filter((n) => n.id !== selected.id && !isDescendantOf(selected.id, n.id, data.nodes))
                        .map((mgr) => (
                          <option key={mgr.id} value={String(mgr.id)}>
                            {mgr.firstName} {mgr.lastName} — {mgr.jobTitle}
                          </option>
                        ))}
                    </select>
                    {String(selected.managerId ?? "root") !== selectedNewManagerId && (
                      <button
                        onClick={() =>
                          commitSupervisorChange(
                            selected.id,
                            selectedNewManagerId === "root" ? null : Number(selectedNewManagerId)
                          )
                        }
                        disabled={saving}
                        className="w-full py-2 bg-indigo-600 hover:bg-indigo-700 text-white font-bold text-xs rounded-xl shadow-sm transition-colors flex items-center justify-center gap-1.5"
                      >
                        <UserCheck className="w-4 h-4" />
                        <span>{saving ? "Saving..." : "Update Supervisor in HRIS"}</span>
                      </button>
                    )}
                  </div>
                ) : (
                  <p className="text-sm font-semibold text-gray-800">
                    {data?.nodes.find((n) => n.id === selected.managerId)
                      ? `${data.nodes.find((n) => n.id === selected.managerId)!.firstName} ${data.nodes.find((n) => n.id === selected.managerId)!.lastName}`
                      : "Top Executive (No Direct Manager)"}
                  </p>
                )}
              </div>

              <div className="grid grid-cols-2 gap-3 text-xs">
                <div className="p-3 bg-slate-50 rounded-xl border border-slate-100">
                  <p className="text-gray-400 font-bold uppercase">Status</p>
                  <p className="font-bold text-emerald-700 capitalize">{selected.status.replace("_", " ")}</p>
                </div>
                <div className="p-3 bg-slate-50 rounded-xl border border-slate-100">
                  <p className="text-gray-400 font-bold uppercase">Hire Date</p>
                  <p className="font-bold text-gray-900">{selected.hireDate}</p>
                </div>
                <div className="p-3 bg-slate-50 rounded-xl border border-slate-100 col-span-2">
                  <p className="text-gray-400 font-bold uppercase">Contact Email</p>
                  <p className="text-gray-900 font-medium flex items-center gap-1.5 mt-1">
                    <Mail className="w-3.5 h-3.5 text-gray-400" />
                    {selected.email}
                  </p>
                </div>
              </div>

              <div className="flex justify-end gap-2 pt-2">
                <Link
                  href={`/hris/${selected.id}`}
                  className="px-4 py-2.5 bg-indigo-600 text-white text-xs font-bold rounded-xl shadow-sm hover:bg-indigo-700 flex items-center gap-1.5"
                >
                  <span>Open Full Employee Folder</span>
                  <ExternalLink className="w-3.5 h-3.5" />
                </Link>
              </div>
            </div>
          </div>
        </div>
      )}

      {/* Add / Edit Department Modal */}
      {showDeptModal && (
        <div className="fixed inset-0 bg-black/60 z-50 flex items-center justify-center p-4">
          <div className="bg-white rounded-3xl shadow-2xl w-full max-w-lg overflow-hidden border border-gray-100">
            <div className="px-6 py-5 bg-gradient-to-r from-indigo-600 to-purple-700 text-white flex items-center justify-between">
              <h2 className="font-bold text-lg flex items-center gap-2">
                <Settings2 className="w-5 h-5" />
                {editingDept ? "Edit Department" : "Add Department / Sub-Division"}
              </h2>
              <button onClick={() => { setShowDeptModal(false); setEditingDept(null); }} className="p-2 text-indigo-100 hover:text-white"><X className="w-5 h-5" /></button>
            </div>
            <form onSubmit={handleSaveDepartment} className="p-6 space-y-4">
              <div>
                <label className="block text-sm font-bold text-gray-700 mb-1">Department Name *</label>
                <input
                  value={deptForm.name}
                  onChange={(e) => setDeptForm({ ...deptForm, name: e.target.value })}
                  required
                  className="w-full px-3.5 py-2.5 border border-gray-300 rounded-xl text-sm focus:ring-2 focus:ring-indigo-500 focus:outline-none"
                  placeholder="e.g. Customer Success"
                />
              </div>
              <div>
                <label className="block text-sm font-bold text-gray-700 mb-1">Description</label>
                <textarea
                  value={deptForm.description}
                  onChange={(e) => setDeptForm({ ...deptForm, description: e.target.value })}
                  rows={2}
                  className="w-full px-3.5 py-2.5 border border-gray-300 rounded-xl text-sm resize-none focus:ring-2 focus:ring-indigo-500 focus:outline-none"
                  placeholder="Brief description of this department's function"
                />
              </div>
              <div>
                <label className="block text-sm font-bold text-gray-700 mb-1">Parent Department (optional)</label>
                <select
                  value={deptForm.parentDepartmentId}
                  onChange={(e) => setDeptForm({ ...deptForm, parentDepartmentId: e.target.value })}
                  className="w-full px-3.5 py-2.5 border border-gray-300 rounded-xl text-sm focus:ring-2 focus:ring-indigo-500 focus:outline-none"
                >
                  <option value="">None — Top-Level Department</option>
                  {data?.departments
                    .filter((d) => d.id !== null && d.id !== editingDept?.id && !(editingDept && isDeptDescendantOf(editingDept.id!, d.id!, data.departments)))
                    .map((d) => (
                      <option key={d.id} value={String(d.id)}>{d.name}</option>
                    ))}
                </select>
                <p className="text-[11px] text-gray-400 mt-1">Selecting a parent turns this into a sub-division nested under that department.</p>
              </div>
              <div>
                <label className="block text-sm font-bold text-gray-700 mb-1">Department Head</label>
                <select
                  value={deptForm.headEmployeeId}
                  onChange={(e) => setDeptForm({ ...deptForm, headEmployeeId: e.target.value })}
                  className="w-full px-3.5 py-2.5 border border-gray-300 rounded-xl text-sm focus:ring-2 focus:ring-indigo-500 focus:outline-none"
                >
                  <option value="">Auto-detect from hierarchy</option>
                  {data?.nodes.map((n) => (
                    <option key={n.id} value={String(n.id)}>{n.firstName} {n.lastName} — {n.jobTitle}</option>
                  ))}
                </select>
                <p className="text-[11px] text-gray-400 mt-1">The department head's total report count is shown in the org chart legend.</p>
              </div>

              <div className="pt-4 border-t border-gray-100 flex items-center justify-between">
                {editingDept && (
                  <button
                    type="button"
                    onClick={() => handleDeleteDepartment(editingDept)}
                    className="px-4 py-2.5 text-sm font-bold text-red-600 hover:bg-red-50 rounded-xl flex items-center gap-1.5"
                  >
                    <Trash2 className="w-4 h-4" /> Delete
                  </button>
                )}
                <div className="flex items-center gap-3 ml-auto">
                  <button type="button" onClick={() => { setShowDeptModal(false); setEditingDept(null); }} className="px-4 py-2.5 text-sm font-bold text-gray-700 hover:bg-gray-100 rounded-xl">Cancel</button>
                  <button type="submit" disabled={savingDept} className="px-5 py-2.5 bg-indigo-600 text-white font-bold text-sm rounded-xl hover:bg-indigo-700 disabled:opacity-50">
                    {savingDept ? "Saving..." : editingDept ? "Save Changes" : "Create Department"}
                  </button>
                </div>
              </div>
            </form>
          </div>
        </div>
      )}

      {/* Microsoft Active Directory Configuration Modal */}
      {showAdModal && (
        <div className="fixed inset-0 bg-black/60 z-50 flex items-center justify-center p-4">
          <div className="bg-white rounded-3xl shadow-2xl w-full max-w-lg overflow-hidden border border-gray-100 max-h-[90vh] overflow-y-auto">
            <div className="px-6 py-5 bg-gradient-to-r from-sky-600 to-blue-700 text-white flex items-center justify-between sticky top-0 z-10">
              <div>
                <h2 className="font-bold text-lg flex items-center gap-2">
                  <RefreshCw className="w-5 h-5" /> Microsoft Active Directory Sync
                </h2>
                <p className="text-xs text-sky-100 mt-0.5">Drive the org chart from Entra ID (Azure AD) reporting relationships.</p>
              </div>
              <button onClick={() => setShowAdModal(false)} className="p-2 text-sky-100 hover:text-white"><X className="w-5 h-5" /></button>
            </div>

            <div className="p-6 space-y-4">
              <div className="flex items-center justify-between p-4 bg-sky-50 border border-sky-100 rounded-2xl">
                <div>
                  <p className="text-sm font-bold text-gray-900">Enable Active Directory sync</p>
                  <p className="text-xs text-gray-500 mt-0.5">Allow the org chart to be modified from your Microsoft directory.</p>
                </div>
                <button
                  onClick={() => setAdForm({ ...adForm, enabled: !adForm.enabled })}
                  className={`relative inline-flex h-7 w-12 shrink-0 cursor-pointer rounded-full transition-colors ${adForm.enabled ? "bg-sky-600" : "bg-gray-300"}`}
                >
                  <span className={`inline-block h-5 w-5 transform rounded-full bg-white shadow-sm transition-transform mt-1 ${adForm.enabled ? "translate-x-6" : "translate-x-1"}`} />
                </button>
              </div>

              <div>
                <label className="block text-sm font-bold text-gray-700 mb-1">Connection Mode</label>
                <select
                  value={adForm.mode}
                  onChange={(e) => setAdForm({ ...adForm, mode: e.target.value })}
                  className="w-full px-3.5 py-2.5 border border-gray-300 rounded-xl text-sm focus:ring-2 focus:ring-sky-500 focus:outline-none"
                >
                  <option value="mock">Demo Directory (no credentials required)</option>
                  <option value="live">Live — Microsoft Graph / Entra ID</option>
                </select>
                <p className="text-[11px] text-gray-400 mt-1">
                  Demo mode simulates a corporate directory so you can preview the sync. Live mode uses app-only client credentials against Microsoft Graph.
                </p>
              </div>

              {adForm.mode === "live" && (
                <div className="space-y-3 p-4 bg-gray-50 border border-gray-200 rounded-2xl">
                  <div>
                    <label className="block text-xs font-bold text-gray-700 uppercase mb-1">Tenant ID</label>
                    <input
                      value={adForm.tenantId}
                      onChange={(e) => setAdForm({ ...adForm, tenantId: e.target.value })}
                      placeholder="00000000-0000-0000-0000-000000000000"
                      className="w-full px-3.5 py-2.5 border border-gray-300 rounded-xl text-sm font-mono focus:ring-2 focus:ring-sky-500 focus:outline-none"
                    />
                  </div>
                  <div>
                    <label className="block text-xs font-bold text-gray-700 uppercase mb-1">Client ID (App Registration)</label>
                    <input
                      value={adForm.clientId}
                      onChange={(e) => setAdForm({ ...adForm, clientId: e.target.value })}
                      placeholder="Application (client) ID"
                      className="w-full px-3.5 py-2.5 border border-gray-300 rounded-xl text-sm font-mono focus:ring-2 focus:ring-sky-500 focus:outline-none"
                    />
                  </div>
                  <div>
                    <label className="block text-xs font-bold text-gray-700 uppercase mb-1">Client Secret</label>
                    <input
                      type="password"
                      value={adForm.clientSecret}
                      onChange={(e) => setAdForm({ ...adForm, clientSecret: e.target.value })}
                      placeholder={adSetting?.hasSecret ? "•••••• (saved — enter to replace)" : "Client secret value"}
                      className="w-full px-3.5 py-2.5 border border-gray-300 rounded-xl text-sm font-mono focus:ring-2 focus:ring-sky-500 focus:outline-none"
                    />
                    <p className="text-[11px] text-gray-400 mt-1">Requires Graph application permission <code className="font-mono">User.Read.All</code> with admin consent.</p>
                  </div>
                </div>
              )}

              <div className="space-y-2">
                <label className="flex items-center justify-between p-3.5 bg-gray-50 rounded-xl border border-gray-200 cursor-pointer">
                  <div>
                    <p className="text-sm font-semibold text-gray-800">Auto-provision new employees</p>
                    <p className="text-xs text-gray-500">Create HRIS employee records for AD users that don&apos;t exist yet.</p>
                  </div>
                  <input
                    type="checkbox"
                    checked={adForm.autoProvision}
                    onChange={(e) => setAdForm({ ...adForm, autoProvision: e.target.checked })}
                    className="w-4 h-4 rounded border-gray-300"
                  />
                </label>
                <label className="flex items-center justify-between p-3.5 bg-gray-50 rounded-xl border border-gray-200 cursor-pointer">
                  <div>
                    <p className="text-sm font-semibold text-gray-800">Overwrite titles & departments</p>
                    <p className="text-xs text-gray-500">Treat AD as the source of truth for job titles and departments.</p>
                  </div>
                  <input
                    type="checkbox"
                    checked={adForm.overwriteRoles}
                    onChange={(e) => setAdForm({ ...adForm, overwriteRoles: e.target.checked })}
                    className="w-4 h-4 rounded border-gray-300"
                  />
                </label>
              </div>

              <p className="text-[11px] text-gray-400">
                Every sync updates supervisor reporting lines from AD manager relationships, creates missing departments, and logs changes to each employee&apos;s job history.
              </p>
            </div>

            <div className="px-6 py-4 bg-gray-50 border-t border-gray-100 flex items-center justify-between gap-3">
              <button
                onClick={async () => { await saveAdSettings(); }}
                disabled={savingAd}
                className="px-4 py-2.5 text-sm font-bold text-gray-700 bg-white border border-gray-300 hover:bg-gray-100 rounded-xl disabled:opacity-50"
              >
                {savingAd ? "Saving..." : "Save Settings"}
              </button>
              <div className="flex items-center gap-2">
                <button onClick={() => setShowAdModal(false)} className="px-4 py-2.5 text-sm font-bold text-gray-700 hover:bg-gray-200 rounded-xl">Close</button>
                <button
                  onClick={async () => {
                    await saveAdSettings();
                    if (adForm.enabled) {
                      setShowAdModal(false);
                      await runAdSync();
                    }
                  }}
                  disabled={savingAd || syncingAd || !adForm.enabled}
                  className="px-5 py-2.5 bg-sky-600 hover:bg-sky-700 text-white font-bold text-sm rounded-xl shadow-sm disabled:opacity-50 flex items-center gap-1.5"
                >
                  <RefreshCw className={`w-4 h-4 ${syncingAd ? "animate-spin" : ""}`} />
                  Save & Sync Now
                </button>
              </div>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}