"use client";

import { useState, useEffect, useCallback } from "react";
import {
  Shield, Plus, Trash2, Check, X,
  Users, Sparkles, Loader2, AlertCircle,
} from "lucide-react";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import {
  fetchCustomRoles,
  createCustomRole,
  updateCustomRole,
  deleteCustomRole,
  getUserPermissions,
} from "@/lib/supabase/rbac-actions";
import { suggestPermissionsAction } from "@/lib/supabase/ai-actions";
import { PERMISSIONS_LIST, PERMISSION_CATEGORIES, type Permission, DEFAULT_CUSTOM_ROLES, enforceDependencies, DEPENDENT_MAP, PERMISSION_DEPENDENCIES } from "@/lib/permissions";
import PageSkeleton from "./PageSkeleton";

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

// ── AI Suggestion Popup ──────────────────────────────────────

function AISuggestionPopup({
  roleName,
  onApply,
  onClose,
}: {
  roleName: string;
  onApply: (perms: Permission[]) => void;
  onClose: () => void;
}) {
  const [loading, setLoading] = useState(true);
  const [question, setQuestion] = useState<string | null>(null);
  const [answer, setAnswer] = useState("");
  const [perms, setPerms] = useState<Permission[]>([]);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    suggestPermissionsAction(roleName)
      .then((res) => {
        if (!res.success) {
          setError(res.blocked ? "AI usage limit reached." : res.error || "Failed");
          setLoading(false);
          return;
        }
        if (res.result?.askForInfo) {
          setQuestion(res.result.askForInfo);
        } else {
          setPerms(res.result?.permissions || []);
        }
        setLoading(false);
      })
      .catch(() => { setError("AI request failed"); setLoading(false); });
  }, [roleName]);

  const handleAnswerSubmit = async () => {
    if (!question || !answer.trim()) return;
    setLoading(true);
    setQuestion(null);
    try {
      const res = await suggestPermissionsAction(roleName, answer.trim());
      if (!res.success) {
        setError(res.error || "Failed");
        setLoading(false);
        return;
      }
      if (res.result?.askForInfo) {
        setQuestion(res.result.askForInfo);
        setAnswer("");
      } else {
        setPerms(res.result?.permissions || []);
      }
    } catch {
      setError("AI request failed");
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="fixed inset-0 bg-black/40 flex items-center justify-center z-[60]" onClick={onClose}>
      <div className="bg-white rounded-xl shadow-xl w-full max-w-md p-6 space-y-4 animate-in zoom-in-95 duration-200" onClick={(e) => e.stopPropagation()}>
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-2">
            <Sparkles className="w-5 h-5 text-teal-600" />
            <h3 className="text-sm font-semibold text-gray-900">AI Permission Suggestion</h3>
          </div>
          <button onClick={onClose} className="p-1 hover:bg-gray-100 rounded cursor-pointer">
            <X className="w-4 h-4 text-gray-400" />
          </button>
        </div>

        {loading && (
          <div className="flex items-center gap-3 py-4">
            <Loader2 className="w-5 h-5 animate-spin text-teal-600" />
            <p className="text-sm text-gray-500">Analyzing role &quot;{roleName}&quot;...</p>
          </div>
        )}

        {error && (
          <div className="flex items-start gap-2 p-3 bg-red-50 rounded-lg">
            <AlertCircle className="w-4 h-4 text-red-500 shrink-0 mt-0.5" />
            <p className="text-sm text-red-700">{error}</p>
          </div>
        )}

        {question && !loading && (
          <div className="space-y-3">
            <div className="p-3 bg-teal-50 rounded-lg">
              <p className="text-xs font-medium text-teal-700">AI needs more info:</p>
              <p className="text-sm text-teal-900 mt-1">{question}</p>
            </div>
            <textarea
              value={answer}
              onChange={(e) => setAnswer(e.target.value)}
              placeholder="e.g. Yes, they manage payroll but not hiring..."
              className="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-teal-300 min-h-[80px]"
              onKeyDown={(e) => { if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); handleAnswerSubmit(); } }}
            />
            <Button onClick={handleAnswerSubmit} disabled={!answer.trim()} className="w-full bg-teal-600 hover:bg-teal-700 text-white text-sm cursor-pointer">
              Submit Answer
            </Button>
          </div>
        )}

        {!loading && !question && perms.length > 0 && (
          <div className="space-y-3">
            <p className="text-xs text-gray-500">Suggested {perms.length} permissions for &quot;{roleName}&quot;:</p>
            <div className="max-h-48 overflow-y-auto space-y-1">
              {PERMISSION_CATEGORIES.map((cat) => {
                const catPerms = perms.filter((p) => PERMISSIONS_LIST.find((d) => d.key === p)?.category === cat);
                if (catPerms.length === 0) return null;
                return (
                  <div key={cat}>
                    <p className="text-[10px] font-medium text-gray-500 mb-0.5">{cat}</p>
                    {catPerms.map((p) => {
                      const def = PERMISSIONS_LIST.find((d) => d.key === p);
                      return (
                        <div key={p} className="flex items-center gap-1.5 py-0.5">
                          <Check className="w-3 h-3 text-teal-500" />
                          <span className="text-xs text-gray-700">{def?.label || p}</span>
                        </div>
                      );
                    })}
                  </div>
                );
              })}
            </div>
            <div className="flex gap-2">
              <Button variant="outline" size="sm" onClick={onClose} className="flex-1 cursor-pointer text-xs">Cancel</Button>
              <Button size="sm" onClick={() => onApply(perms)} className="flex-1 bg-teal-600 hover:bg-teal-700 text-white text-xs cursor-pointer">
                Apply {perms.length} Permissions
              </Button>
            </div>
          </div>
        )}

        {!loading && !question && perms.length === 0 && !error && (
          <p className="text-sm text-gray-400 text-center py-4">No specific suggestions for this role.</p>
        )}
      </div>
    </div>
  );
}

// ── Main Page ────────────────────────────────────────────────

export default function RolesPage() {
  const [loading, setLoading] = useState(true);
  const [canManage, setCanManage] = useState(false);
  const [roles, setRoles] = useState<any[]>([]);

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

  useEffect(() => {
    let cancelled = false;
    Promise.all([
      getUserPermissions().catch(() => ({ orgRole: "guest", permissions: new Set<Permission>(), hierarchyLevel: 0 })),
      fetchCustomRoles().catch(() => []),
    ])
      .then(([perms, r]) => {
        if (!cancelled) {
          setCanManage(perms.orgRole === "owner" || perms.orgRole === "admin" || perms.orgRole === "it_team");
          setRoles(r);
        }
      })
      .catch(() => {})
      .finally(() => { if (!cancelled) setLoading(false); });
    return () => { cancelled = true; };
  }, []);

  const openRoleEditor = useCallback((role: any | null) => {
    setEditingRole(role);
    setRoleName(role?.name || "");
    setRoleColor(role?.color || ROLE_COLORS[0]);
    setRoleHierarchy(role?.hierarchy_level || 5);
    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);
  }, []);

  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);
      setEditingRole(null);
    } catch (e: any) {
      alert(e.message || "Failed to save role");
    } finally {
      setSavingRole(false);
    }
  };

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

  const togglePerm = (perm: Permission) => {
    setRolePerms((prev) => {
      const next = new Set(prev);
      if (next.has(perm)) {
        next.delete(perm);
      } else {
        next.add(perm);
      }
      // Enforce dependency rules (auto-enable deps, auto-disable parents)
      return enforceDependencies(next);
    });
  };

  const toggleCategory = (cat: string) => {
    const catPerms = PERMISSIONS_LIST.filter((p) => p.category === cat).map((p) => p.key);
    const allSelected = catPerms.every((p) => rolePerms.has(p));
    setRolePerms((prev) => {
      const next = new Set(prev);
      if (allSelected) catPerms.forEach((p) => next.delete(p));
      else catPerms.forEach((p) => next.add(p));
      // Enforce dependency rules
      return enforceDependencies(next);
    });
  };

  if (loading) return <PageSkeleton name="Roles" />;

  return (
    <div className="p-6 lg:p-8 space-y-6">
      {/* Header */}
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-3xl font-serif font-bold text-gray-900">Roles & Members</h1>
          <p className="text-gray-500 mt-1">Manage roles, permissions, and member assignments</p>
        </div>
        {canManage && (
          <Button onClick={() => openRoleEditor(null)} className="bg-[#1D9E75] hover:bg-[#1a8b66] text-white gap-2 cursor-pointer">
            <Plus className="w-4 h-4" />
            Create Role
          </Button>
        )}
      </div>

      {/* Role Editor Modal */}
      {editingRole && (
        <div className="fixed inset-0 bg-black/40 flex items-center justify-center z-50" onClick={() => setEditingRole(null)}>
          <div className="bg-white rounded-xl shadow-xl w-full max-w-lg max-h-[90vh] overflow-y-auto p-6 space-y-5" onClick={(e) => e.stopPropagation()}>
            <div className="flex items-center justify-between">
              <h3 className="text-sm font-semibold text-gray-900">{editingRole ? "Edit Role" : "Create Role"}</h3>
              <button onClick={() => setEditingRole(null)} className="p-1 hover:bg-gray-100 rounded cursor-pointer">
                <X className="w-4 h-4 text-gray-400" />
              </button>
            </div>

            {showDeleteRole ? (
              <div className="p-4 bg-red-50 rounded-lg space-y-3">
                <p className="text-sm text-red-700 font-medium">Delete this role permanently?</p>
                <div className="flex gap-2">
                  <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>
              </div>
            ) : (
              <>
                {/* Role Name */}
                <div>
                  <label className="text-xs font-semibold text-gray-600 uppercase">Role Name</label>
                  <div className="flex gap-2 mt-1.5">
                    <input value={roleName} onChange={(e) => setRoleName(e.target.value)} placeholder="e.g. Finance Lead"
                      className="flex-1 border border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-teal-300" />
                    {/* AI Suggest Button */}
                    <Button
                      variant="outline"
                      size="sm"
                      onClick={() => { setAiRoleName(roleName || "Untitled"); setShowAiPopup(true); }}
                      disabled={!roleName.trim()}
                      className="gap-1.5 cursor-pointer text-xs shrink-0"
                    >
                      <Sparkles className="w-3.5 h-3.5" />
                      AI Suggest
                    </Button>
                  </div>
                </div>

                {/* Color */}
                <div>
                  <label className="text-xs font-semibold text-gray-600 uppercase">Color</label>
                  <div className="flex gap-2 mt-1.5 flex-wrap">
                    {ROLE_COLORS.map((c) => (
                      <button key={c} onClick={() => setRoleColor(c)}
                        className={`w-7 h-7 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">Hierarchy Level: {roleHierarchy}</label>
                  <input type="range" min="0" max="100" value={roleHierarchy} onChange={(e) => setRoleHierarchy(parseInt(e.target.value))}
                    className="w-full mt-1.5 accent-teal-600" />
                  <p className="text-xs text-gray-400 mt-1">Higher roles manage lower roles. Owner=100, Admin=99, Employee=1, Guest=0.</p>
                </div>

                {/* Manage lower roles toggle */}
                <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 can assign/remove roles with lower hierarchy levels.</p>
                  </div>
                </div>

                {/* Administrator toggle */}
                <div className="flex items-center gap-3 p-3 bg-amber-50 border border-amber-200 rounded-lg">
                  <input type="checkbox" checked={rolePerms.has("can_manage_admin")} onChange={(e) => togglePerm("can_manage_admin")}
                    className="rounded border-gray-300 text-teal-600 focus:ring-teal-500" />
                  <div>
                    <p className="text-sm font-medium text-amber-900">Administrator — grants ALL permissions</p>
                    <p className="text-xs text-amber-700">This role bypasses all permission checks.</p>
                  </div>
                </div>

                {/* Permissions */}
                <div>
                  <div className="flex items-center justify-between mb-2">
                    <label className="text-xs font-semibold text-gray-600 uppercase">Permissions</label>
                    <div className="flex gap-2">
                      <button onClick={() => setRolePerms(new Set())} className="text-[10px] text-gray-400 hover:text-gray-600 cursor-pointer">Clear all</button>
                    </div>
                  </div>
                  <div className="space-y-3 max-h-56 overflow-y-auto">
                    {PERMISSION_CATEGORIES.map((cat) => {
                      const catPerms = PERMISSIONS_LIST.filter((p) => p.category === cat);
                      const allSelected = catPerms.every((p) => rolePerms.has(p.key));
                      const someSelected = catPerms.some((p) => rolePerms.has(p.key));
                      return (
                        <div key={cat}>
                          <div className="flex items-center gap-2 mb-1">
                            <button
                              onClick={() => toggleCategory(cat)}
                              className="text-[10px] font-medium text-gray-500 hover:text-gray-700 cursor-pointer"
                            >
                              {cat}
                            </button>
                            <input
                              type="checkbox"
                              checked={allSelected}
                              ref={(el) => { if (el) el.indeterminate = someSelected && !allSelected; }}
                              onChange={() => toggleCategory(cat)}
                              className="rounded border-gray-300 text-teal-600 focus:ring-teal-500 w-3 h-3"
                            />
                          </div>
                          <div className="grid grid-cols-2 gap-1">
                            {catPerms.map((perm) => {
                              const isChecked = rolePerms.has(perm.key);
                              // Check if this perm is a dependency (has parents that depend on it)
                              const parents = DEPENDENT_MAP[perm.key] || [];
                              const activeParents = parents.filter((p) => rolePerms.has(p));
                              // Check if this is a child (depends on another permission)
                              const deps = PERMISSION_DEPENDENCIES[perm.key] || [];

                              return (
                                <label key={perm.key} className="flex items-center gap-1 py-0.5 cursor-pointer group" title={perm.description}>
                                  <input
                                    type="checkbox"
                                    checked={isChecked}
                                    onChange={() => togglePerm(perm.key)}
                                    disabled={rolePerms.has("can_manage_admin")}
                                    className="rounded border-gray-300 text-teal-600 focus:ring-teal-500"
                                  />
                                  <span className={`text-xs group-hover:text-gray-900 ${isChecked ? "text-gray-700" : "text-gray-400"}`}>{perm.label}</span>
                                  {activeParents.length > 0 && (
                                    <span className="text-[9px] text-gray-300" title={`Required by: ${activeParents.join(", ")}`}>←</span>
                                  )}
                                  {deps.length > 0 && (
                                    <span className="text-[9px] text-gray-300" title={`Requires: ${deps.join(", ")}`}>→</span>
                                  )}
                                </label>
                              );
                            })}
                          </div>
                        </div>
                      );
                    })}
                  </div>
                </div>

                {/* Actions */}
                <div className="flex gap-2 pt-2 border-t border-gray-100">
                  {editingRole && (
                    <Button variant="outline" size="sm" onClick={() => setShowDeleteRole(true)} className="gap-1 cursor-pointer text-xs text-red-600 border-red-200">
                      <Trash2 className="w-3 h-3" /> Delete
                    </Button>
                  )}
                  <div className="flex-1" />
                  <Button onClick={handleSaveRole} disabled={savingRole || !roleName.trim()} className="bg-teal-600 hover:bg-teal-700 text-white gap-1 cursor-pointer">
                    {savingRole ? <span className="w-3.5 h-3.5 border-2 border-white border-t-transparent rounded-full animate-spin" /> : <Check className="w-3.5 h-3.5" />}
                    {savingRole ? "Saving..." : (editingRole ? "Save" : "Create")}
                  </Button>
                </div>
              </>
            )}
          </div>
        </div>
      )}

      {/* AI Suggestion Popup */}
      {showAiPopup && (
        <AISuggestionPopup
          roleName={aiRoleName}
          onApply={(perms) => {
            setRolePerms(new Set(perms));
            setShowAiPopup(false);
          }}
          onClose={() => setShowAiPopup(false)}
        />
      )}

      {/* System Roles */}
      <div className="space-y-3">
        <h2 className="text-sm font-semibold text-gray-500 uppercase tracking-wider">System Roles</h2>
        {[
          { name: "Owner", color: "#EF4444", level: 100, perms: "All permissions (can manage all roles including self)", desc: "Only one Owner Owner. Can delete org." },
          { name: "Admin", color: "#F59E0B", level: 99, perms: "All permissions (can manage roles below)", desc: "Multiple admins allowed." },
          { name: "IT Team", color: "#06B6D4", level: 98, perms: "All permissions (system access)", desc: "Technical administrators." },
          { name: "Employee", color: "#6B7280", level: 1, perms: "Basic access (comms, portal, directory)", desc: "Default for reassigned users." },
          { name: "Guest", color: "#D1D5DB", level: 0, perms: "No access — pending role assignment", desc: "Newly joined users start as Guest." },
        ].map((r) => (
          <div key={r.name} className="bg-white rounded-lg border border-gray-200 p-4">
            <div className="flex items-start gap-3">
              <div className="w-4 h-4 rounded-full mt-0.5 shrink-0" style={{ backgroundColor: r.color }} />
              <div className="flex-1 min-w-0">
                <div className="flex items-center gap-2 flex-wrap">
                  <span className="text-sm font-semibold text-gray-900">{r.name}</span>
                  <span className="text-xs text-gray-400">Level {r.level}</span>
                </div>
                <p className="text-xs text-gray-500 mt-0.5">{r.desc}</p>
                <p className="text-xs text-gray-400 mt-1">{r.perms}</p>
              </div>
            </div>
          </div>
        ))}

        {/* Custom Roles */}
        {roles.length > 0 && (
          <>
            <h2 className="text-sm font-semibold text-gray-500 uppercase tracking-wider mt-6">Custom Roles</h2>
            {roles
              .sort((a, b) => (b.hierarchy_level || 0) - (a.hierarchy_level || 0))
              .map((role) => {
                return (
                  <div key={role.id} className="bg-white rounded-lg border border-gray-200 overflow-hidden">
                    <div
                      onClick={() => openRoleEditor(role)}
                      className="w-full flex items-center gap-3 px-4 py-3 hover:bg-gray-50 cursor-pointer group"
                    >
                      <div className="w-4 h-4 rounded-full shrink-0" style={{ backgroundColor: role.color || ROLE_COLORS[0] }} />
                      <span className="text-sm font-semibold text-gray-900 group-hover:text-teal-700 transition-colors">{role.name}</span>
                      <span className="text-xs text-gray-400">Level {role.hierarchy_level}</span>
                      <Badge variant="outline" className="text-[10px] border-gray-200">
                        {(role.role_permissions || []).length} perm{(role.role_permissions || []).length !== 1 ? "s" : ""}
                      </Badge>
                      <span className="text-xs text-gray-300 group-hover:text-teal-500 transition-colors ml-auto shrink-0">Click to edit</span>
                    </div>
                  </div>
                );
              })}
          </>
        )}
      </div>
    </div>
  );
}