/**
 * Settings page — role and member management (Discord-like UI)
 * Two tabs: "Roles" and "Members"
 * Left sidebar + right panel layout
 */

"use client";

import { useState, useEffect, useCallback } from "react";
import { useRouter } from "next/navigation";
import {
  Shield,
  Users,
  Plus,
  X,
  Check,
  Trash2,
  ChevronDown,
  ChevronRight,
  Edit2,
  AlertTriangle,
  ArrowLeft,
} from "lucide-react";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import {
  fetchCustomRoles,
  createCustomRole,
  updateCustomRole,
  deleteCustomRole,
  getUserPermissions,
  fetchEmployeesWithRoles,
  assignRoleToEmployee,
  removeRoleFromEmployee,
  removeEmployee,
} from "@/lib/supabase/rbac-actions";
import { PERMISSIONS_LIST, PERMISSION_CATEGORIES } from "@/lib/permissions";
import type { Permission } from "@/lib/permissions";
import PageSkeleton from "@/app/(app)/pages/PageSkeleton";

const ROLE_COLORS = [
  "#1D9E75", "#6366F1", "#F59E0B", "#EF4444", "#EC4899",
  "#8B5CF6", "#06B6D4", "#10B981", "#F97316", "#6B7280",
];

export default function SettingsPage() {
  const router = useRouter();
  const [tab, setTab] = useState<"roles" | "members">("roles");
  const [loading, setLoading] = useState(true);
  const [canManage, setCanManage] = useState(false);
  const [roles, setRoles] = useState<any[]>([]);
  const [employees, setEmployees] = useState<any[]>([]);

  // Selected items
  const [selectedRoleId, setSelectedRoleId] = useState<string | null>(null);
  const [selectedEmployeeId, setSelectedEmployeeId] = useState<string | null>(null);

  // Role editing
  const [editingRole, setEditingRole] = useState<any>(null);
  const [roleName, setRoleName] = useState("");
  const [roleColor, setRoleColor] = useState(ROLE_COLORS[0]);
  const [roleHierarchy, setRoleHierarchy] = useState(3);
  const [rolePerms, setRolePerms] = useState<Set<Permission>>(new Set());
  const [canManageLower, setCanManageLower] = useState(false);
  const [savingRole, setSavingRole] = useState(false);
  const [showDeleteRole, setShowDeleteRole] = useState(false);

  // Member editing
  const [assigningRole, setAssigningRole] = useState<string | null>(null);

  useEffect(() => {
    let cancelled = false;
    Promise.all([
      getUserPermissions().catch(() => ({ orgRole: "employee" })),
      fetchCustomRoles().catch(() => []),
      fetchEmployeesWithRoles().catch(() => []),
    ])
      .then(([perms, r, e]) => {
        if (!cancelled) {
          setCanManage(perms.orgRole === "owner" || perms.orgRole === "admin");
          setRoles(r);
          setEmployees(e);
        }
      })
      .catch(() => {})
      .finally(() => { if (!cancelled) setLoading(false); });
    return () => { cancelled = true; };
  }, []);

  // Open role editor
  const openRoleEditor = useCallback((role: any | null) => {
    setSelectedRoleId(role?.id || null);
    setEditingRole(role);
    setRoleName(role?.name || "");
    setRoleColor(role?.color || ROLE_COLORS[0]);
    setRoleHierarchy(role?.hierarchy_level || 3);
    setCanManageLower(role?.can_manage_lower || false);
    const perms = new Set<Permission>((role?.role_permissions || []).map((p: any) => p.permission) as Permission[]);
    setRolePerms(perms);
    setShowDeleteRole(false);
  }, []);

  // Open member panel
  const openMemberPanel = useCallback((emp: any) => {
    setSelectedEmployeeId(emp.id);
    setAssigningRole(null);
  }, []);

  // Save role
  const handleSaveRole = async () => {
    if (!roleName.trim()) return;
    setSavingRole(true);
    try {
      if (editingRole) {
        await updateCustomRole(editingRole.id, roleName, roleHierarchy, Array.from(rolePerms), roleColor, canManageLower);
      } else {
        await createCustomRole(roleName, roleHierarchy, Array.from(rolePerms), roleColor, canManageLower);
      }
      const updated = await fetchCustomRoles();
      setRoles(updated);
      setSelectedRoleId(null);
      setEditingRole(null);
    } catch (e: any) {
      alert(e.message || "Failed to save role");
    } finally {
      setSavingRole(false);
    }
  };

  // Delete role
  const handleDeleteRole = async () => {
    if (!editingRole) return;
    try {
      await deleteCustomRole(editingRole.id);
      const updated = await fetchCustomRoles();
      setRoles(updated);
      setSelectedRoleId(null);
      setEditingRole(null);
    } catch (e: any) {
      alert(e.message || "Failed to delete role");
    }
    setShowDeleteRole(false);
  };

  // Assign role to employee
  const handleAssignRole = async (employeeId: string, roleId: string) => {
    await assignRoleToEmployee(employeeId, roleId);
    const emps = await fetchEmployeesWithRoles();
    setEmployees(emps);
    setAssigningRole(null);
  };

  // Remove role from employee
  const handleRemoveRole = async (employeeId: string, roleId: string) => {
    await removeRoleFromEmployee(employeeId, roleId);
    const emps = await fetchEmployeesWithRoles();
    setEmployees(emps);
  };

  // Remove employee
  const handleRemoveEmployee = async (employeeId: string) => {
    if (!confirm("Remove this employee? This cannot be undone.")) return;
    await removeEmployee(employeeId);
    const emps = await fetchEmployeesWithRoles();
    setEmployees(emps);
    setSelectedEmployeeId(null);
  };

  if (loading) return <PageSkeleton name="Settings" />;
  if (!canManage) {
    return (
      <div className="flex items-center justify-center h-full">
        <div className="text-center">
          <Shield className="w-12 h-12 text-gray-300 mx-auto mb-3" />
          <p className="text-gray-500">You don't have permission to manage settings.</p>
          <Button variant="outline" onClick={() => router.push("/home")} className="mt-4 cursor-pointer">Go Home</Button>
        </div>
      </div>
    );
  }

  const selectedRole = roles.find((r) => r.id === selectedRoleId) || null;
  const selectedEmployee = employees.find((e) => e.id === selectedEmployeeId) || null;

  return (
    <div className="flex h-[calc(100vh-4rem)] bg-gray-100">
      {/* Left Sidebar */}
      <div className="w-64 bg-white border-r border-gray-200 flex flex-col">
        {/* Tabs */}
        <div className="flex border-b border-gray-200">
          <button
            onClick={() => setTab("roles")}
            className={`flex-1 py-3 text-sm font-medium flex items-center justify-center gap-1.5 cursor-pointer ${
              tab === "roles" ? "text-teal-700 border-b-2 border-teal-600" : "text-gray-500 hover:text-gray-700"
            }`}
          >
            <Shield className="w-4 h-4" /> Roles
          </button>
          <button
            onClick={() => setTab("members")}
            className={`flex-1 py-3 text-sm font-medium flex items-center justify-center gap-1.5 cursor-pointer ${
              tab === "members" ? "text-teal-700 border-b-2 border-teal-600" : "text-gray-500 hover:text-gray-700"
            }`}
          >
            <Users className="w-4 h-4" /> Members
          </button>
        </div>

        {/* Tab Content */}
        <div className="flex-1 overflow-y-auto p-3">
          {tab === "roles" && (
            <div className="space-y-1">
              <div className="flex items-center justify-between px-2 mb-2">
                <span className="text-xs font-semibold text-gray-400 uppercase tracking-wider">Roles</span>
                <button onClick={() => openRoleEditor(null)} className="p-1 hover:bg-gray-100 rounded cursor-pointer" title="Create role">
                  <Plus className="w-3.5 h-3.5 text-gray-500" />
                </button>
              </div>
              {/* System roles */}
              <div className="text-xs text-gray-400 px-2 py-1">System Roles</div>
              {[
                { name: "Owner", color: "#EF4444", level: 10, system: true },
                { name: "Admin", color: "#F59E0B", level: 9, system: true },
                { name: "Employee", color: "#6B7280", level: 1, system: true },
              ].map((r) => (
                <div key={r.name} className="flex items-center gap-2 px-2 py-1.5 rounded hover:bg-gray-50">
                  <div className="w-3 h-3 rounded-full flex-shrink-0" style={{ backgroundColor: r.color }} />
                  <span className="text-sm text-gray-700">{r.name}</span>
                  <span className="text-[10px] text-gray-300 ml-auto">Level {r.level}</span>
                </div>
              ))}

              {/* Custom roles */}
              {roles.length > 0 && (
                <>
                  <div className="text-xs text-gray-400 px-2 py-1 mt-3">Custom Roles</div>
                  {roles
                    .sort((a, b) => (b.hierarchy_level || 0) - (a.hierarchy_level || 0))
                    .map((role) => (
                      <button
                        key={role.id}
                        onClick={() => openRoleEditor(role)}
                        className={`w-full flex items-center gap-2 px-2 py-1.5 rounded hover:bg-gray-50 cursor-pointer ${
                          selectedRoleId === role.id ? "bg-teal-50 text-teal-700" : ""
                        }`}
                      >
                        <div className="w-3 h-3 rounded-full flex-shrink-0" style={{ backgroundColor: role.color || ROLE_COLORS[0] }} />
                        <span className="text-sm truncate">{role.name}</span>
                        <span className="text-[10px] text-gray-300 ml-auto">Level {role.hierarchy_level}</span>
                      </button>
                    ))}
                </>
              )}
            </div>
          )}

          {tab === "members" && (
            <div className="space-y-1">
              <div className="text-xs font-semibold text-gray-400 uppercase tracking-wider px-2 mb-2">
                Members ({employees.length})
              </div>
              {employees.map((emp) => (
                <button
                  key={emp.id}
                  onClick={() => openMemberPanel(emp)}
                  className={`w-full flex items-center gap-2 px-2 py-1.5 rounded hover:bg-gray-50 cursor-pointer ${
                    selectedEmployeeId === emp.id ? "bg-teal-50" : ""
                  }`}
                >
                  <div className={`w-7 h-7 rounded-full bg-gray-300 flex items-center justify-center text-white text-[10px] font-semibold flex-shrink-0`}>
                    {emp.first_name[0]}{emp.last_name[0]}
                  </div>
                  <div className="flex-1 min-w-0 text-left">
                    <p className="text-sm text-gray-900 truncate">{emp.first_name} {emp.last_name}</p>
                    <div className="flex flex-wrap gap-0.5 mt-0.5">
                      {emp.org_role && (
                        <span className="text-[9px] bg-gray-100 text-gray-500 px-1 rounded">{emp.org_role}</span>
                      )}
                      {(emp.employee_roles || []).map((er: any) => (
                        <span
                          key={er.role_id}
                          className="text-[9px] px-1 rounded text-white"
                          style={{ backgroundColor: er.role?.color || ROLE_COLORS[0] }}
                        >
                          {er.role?.name}
                        </span>
                      ))}
                    </div>
                  </div>
                </button>
              ))}
            </div>
          )}
        </div>
      </div>

      {/* Right Panel */}
      <div className="flex-1 overflow-y-auto bg-white">
        {tab === "roles" && selectedRole && (
          <div className="max-w-xl mx-auto p-8">
            <div className="flex items-center justify-between mb-6">
              <h2 className="text-lg font-semibold text-gray-900">
                {editingRole ? "Edit Role" : "Create Role"}
              </h2>
              <div className="flex items-center gap-2">
                {editingRole && !showDeleteRole && (
                  <button onClick={() => setShowDeleteRole(true)} className="p-1.5 text-gray-400 hover:text-red-500 rounded cursor-pointer">
                    <Trash2 className="w-4 h-4" />
                  </button>
                )}
                {showDeleteRole ? (
                  <div className="flex gap-1">
                    <Button variant="outline" size="sm" onClick={() => setShowDeleteRole(false)} className="cursor-pointer text-xs">Cancel</Button>
                    <Button size="sm" onClick={handleDeleteRole} className="bg-red-500 hover:bg-red-600 text-white text-xs cursor-pointer">Delete</Button>
                  </div>
                ) : (
                  <button onClick={() => { setSelectedRoleId(null); setEditingRole(null); }} className="p-1.5 text-gray-400 hover:text-gray-600 rounded cursor-pointer">
                    <X className="w-4 h-4" />
                  </button>
                )}
              </div>
            </div>

            <div className="space-y-6">
              {/* Name */}
              <div>
                <label className="text-xs font-semibold text-gray-600 uppercase tracking-wider">Role Name</label>
                <input value={roleName} onChange={(e) => setRoleName(e.target.value)} placeholder="e.g. Finance Lead"
                  className="mt-2 w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-teal-300 focus:border-teal-400" />
              </div>

              {/* Color */}
              <div>
                <label className="text-xs font-semibold text-gray-600 uppercase tracking-wider">Color</label>
                <div className="flex gap-2 mt-2 flex-wrap">
                  {ROLE_COLORS.map((c) => (
                    <button key={c} onClick={() => setRoleColor(c)}
                      className={`w-8 h-8 rounded-full border-2 transition-transform hover:scale-110 cursor-pointer ${roleColor === c ? "border-gray-900 scale-110" : "border-transparent"}`}
                      style={{ backgroundColor: c }} />
                  ))}
                </div>
              </div>

              {/* Hierarchy Level */}
              <div>
                <label className="text-xs font-semibold text-gray-600 uppercase tracking-wider">
                  Hierarchy Level: {roleHierarchy}
                </label>
                <input type="range" min="1" max="8" value={roleHierarchy} onChange={(e) => setRoleHierarchy(parseInt(e.target.value))}
                  className="w-full mt-2 accent-teal-600" />
                <p className="text-xs text-gray-400 mt-1">Higher roles can manage lower roles in the hierarchy.</p>
              </div>

              {/* Can Manage Lower Roles */}
              <div className="flex items-center gap-3 p-3 bg-gray-50 rounded-lg">
                <input type="checkbox" checked={canManageLower} onChange={(e) => setCanManageLower(e.target.checked)}
                  className="rounded border-gray-300 text-teal-600 focus:ring-teal-500" />
                <div>
                  <p className="text-sm font-medium text-gray-900">Can manage roles below this level</p>
                  <p className="text-xs text-gray-500">Users with this role can assign/remove roles with a lower hierarchy level.</p>
                </div>
              </div>

              {/* Permissions */}
              <div>
                <label className="text-xs font-semibold text-gray-600 uppercase tracking-wider">Permissions</label>
                <div className="mt-3 space-y-4">
                  {PERMISSION_CATEGORIES.map((cat) => (
                    <div key={cat}>
                      <p className="text-xs font-medium text-gray-500 mb-2">{cat}</p>
                      <div className="grid grid-cols-2 gap-2">
                        {PERMISSIONS_LIST.filter((p) => p.category === cat).map((perm) => (
                          <label key={perm.key} className="flex items-center gap-2 p-2 rounded hover:bg-gray-50 cursor-pointer">
                            <input
                              type="checkbox"
                              checked={rolePerms.has(perm.key)}
                              onChange={(e) => {
                                const next = new Set(rolePerms);
                                if (e.target.checked) next.add(perm.key);
                                else next.delete(perm.key);
                                setRolePerms(next);
                              }}
                              className="rounded border-gray-300 text-teal-600 focus:ring-teal-500"
                            />
                            <span className="text-sm text-gray-700">{perm.label}</span>
                          </label>
                        ))}
                      </div>
                    </div>
                  ))}
                </div>
              </div>

              {/* Save */}
              <Button onClick={handleSaveRole} disabled={savingRole || !roleName.trim()}
                className="w-full bg-teal-600 hover:bg-teal-700 text-white gap-2 cursor-pointer">
                {savingRole ? <span className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin" /> : <Check className="w-4 h-4" />}
                {savingRole ? "Saving..." : (editingRole ? "Save Changes" : "Create Role")}
              </Button>
            </div>
          </div>
        )}

        {tab === "roles" && !selectedRole && (
          <div className="flex items-center justify-center h-full">
            <div className="text-center">
              <Shield className="w-12 h-12 text-gray-200 mx-auto mb-3" />
              <p className="text-gray-400">Select a role to edit, or click + to create one.</p>
            </div>
          </div>
        )}

        {tab === "members" && selectedEmployee && (
          <div className="max-w-xl mx-auto p-8">
            <div className="flex items-center justify-between mb-6">
              <div className="flex items-center gap-3">
                <div className="w-12 h-12 rounded-full bg-gray-300 flex items-center justify-center text-white text-lg font-semibold">
                  {selectedEmployee.first_name[0]}{selectedEmployee.last_name[0]}
                </div>
                <div>
                  <h2 className="text-lg font-semibold text-gray-900">{selectedEmployee.first_name} {selectedEmployee.last_name}</h2>
                  <p className="text-sm text-gray-500">{selectedEmployee.job_title || "No title"}</p>
                </div>
              </div>
              <div className="flex items-center gap-2">
                <button onClick={() => setSelectedEmployeeId(null)} className="p-1.5 text-gray-400 hover:text-gray-600 rounded cursor-pointer">
                  <X className="w-4 h-4" />
                </button>
              </div>
            </div>

            <div className="space-y-6">
              {/* Details */}
              <div className="space-y-3">
                {[
                  { label: "Email", value: selectedEmployee.email },
                  { label: "Phone", value: selectedEmployee.phone || "—" },
                  { label: "Department", value: selectedEmployee.department_name || "—" },
                  { label: "Org Role", value: selectedEmployee.org_role || "Employee" },
                  { label: "Status", value: selectedEmployee.status },
                ].map(({ label, value }) => (
                  <div key={label} className="flex justify-between py-2 border-b border-gray-100">
                    <span className="text-sm text-gray-500">{label}</span>
                    <span className="text-sm font-medium text-gray-900">{value}</span>
                  </div>
                ))}
              </div>

              {/* Roles */}
              <div>
                <div className="flex items-center justify-between mb-3">
                  <label className="text-xs font-semibold text-gray-600 uppercase tracking-wider">Assigned Roles</label>
                  <Button variant="outline" size="sm" onClick={() => setAssigningRole(assigningRole ? null : selectedEmployee.id)}
                    className="gap-1 cursor-pointer text-xs">
                    <Plus className="w-3 h-3" /> Add Role
                  </Button>
                </div>

                {assigningRole === selectedEmployee.id && (
                  <div className="mb-3 p-3 bg-gray-50 rounded-lg space-y-1">
                    {roles.length === 0 ? (
                      <p className="text-xs text-gray-400">No custom roles created.</p>
                    ) : (
                      roles.map((role: any) => {
                        const isAssigned = (selectedEmployee.employee_roles || []).some((er: any) => er.role_id === role.id);
                        return (
                          <div key={role.id} className="flex items-center justify-between py-1.5">
                            <div className="flex items-center gap-2">
                              <div className="w-2.5 h-2.5 rounded-full" style={{ backgroundColor: role.color || ROLE_COLORS[0] }} />
                              <span className="text-sm text-gray-900">{role.name}</span>
                            </div>
                            {isAssigned ? (
                              <span className="text-xs text-teal-600">Assigned</span>
                            ) : (
                              <button onClick={() => handleAssignRole(selectedEmployee.id, role.id)} className="text-xs text-teal-600 hover:underline cursor-pointer">Assign</button>
                            )}
                          </div>
                        );
                      })
                    )}
                  </div>
                )}

                {(selectedEmployee.employee_roles || []).length === 0 ? (
                  <p className="text-xs text-gray-400">No custom roles assigned.</p>
                ) : (
                  <div className="space-y-1">
                    {(selectedEmployee.employee_roles as any[]).map((er: any) => (
                      <div key={er.role_id} className="flex items-center justify-between p-2 bg-gray-50 rounded">
                        <div className="flex items-center gap-2">
                          <div className="w-2.5 h-2.5 rounded-full" style={{ backgroundColor: er.role?.color || ROLE_COLORS[0] }} />
                          <span className="text-sm text-gray-900">{er.role?.name}</span>
                          <span className="text-[10px] text-gray-400">Level {er.role?.hierarchy_level}</span>
                        </div>
                        <button onClick={() => handleRemoveRole(selectedEmployee.id, er.role_id)} className="p-1 text-gray-400 hover:text-red-500 cursor-pointer">
                          <X className="w-3.5 h-3.5" />
                        </button>
                      </div>
                    ))}
                  </div>
                )}
              </div>

              {/* Remove */}
              <Button variant="outline" onClick={() => handleRemoveEmployee(selectedEmployee.id)}
                className="w-full gap-2 cursor-pointer text-red-600 border-red-200 hover:bg-red-50">
                <Trash2 className="w-4 h-4" /> Remove Member
              </Button>
            </div>
          </div>
        )}

        {tab === "members" && !selectedEmployee && (
          <div className="flex items-center justify-center h-full">
            <div className="text-center">
              <Users className="w-12 h-12 text-gray-200 mx-auto mb-3" />
              <p className="text-gray-400">Select a member to view details.</p>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}