"use client";
import React, { useEffect, useRef, useState, useCallback } from "react";
import Link from "next/link";
import Image from "next/image";
import { usePathname, useRouter } from "next/navigation";
import { useSidebar } from "../context/SidebarContext";
import { BookText, ClipboardList, Fingerprint, FingerprintIcon, Folders, NewspaperIcon, User, UserRoundCheck, Users, ChevronLeft, ChevronRight, ChevronUp, ChevronDown } from 'lucide-react';
import {
  BoxCubeIcon,
  CalenderIcon,
  ChevronDownIcon,
  GridIcon,
  HorizontaLDots,
  ListIcon,
  PageIcon,
  PieChartIcon,
  PlugInIcon,
  TableIcon,
  UserCircleIcon,
} from "../icons/index";
import SidebarWidget from "./SidebarWidget";
import { Button } from "@/components/ui/button";
import { getClients } from "@/helpers/axios_helper";
import { Client } from "@/types/types";
import { useSession } from "next-auth/react";

type NavItem = {
  name: string;
  icon: React.ReactNode;
  path?: string;
  subItems?: { name: string; path: string; pro?: boolean; new?: boolean }[];
};

interface Manager {
  id: number;
  firstName: string;
  lastName: string;
  email: string;
}

const navItems: NavItem[] = [
  {
    icon: <Users />,
    name: "Admin",
    path: "/admin-dashboard",
  },
];

const AppSidebar: React.FC = () => {
  const { isExpanded, isMobileOpen, isHovered, setHovered, toggleSidebar } = useSidebar();
  const pathname = usePathname();
  const router = useRouter();
  const { data: session } = useSession();
  const [openSubmenu, setOpenSubmenu] = useState<{
    type: "main" | "others";
    index: number;
  } | null>(null);
  const subMenuRefs = useRef<{ [key: string]: HTMLDivElement | null }>({});
  const subMenuHeight = useRef<{ [key: string]: number }>({});
  const [clients, setClients] = useState<Client[]>([]);
  const [managers, setManagers] = useState<Manager[]>([]);
  const [selectedClient, setSelectedClient] = useState<Client | null>(null);
  const [showClientList, setShowClientList] = useState(true);
  const [showManagerList, setShowManagerList] = useState(true);
  const [loadingImpersonation, setLoadingImpersonation] = useState<number | null>(null);

  const isActive = (path: string) => {
    return pathname === path;
  };

  const handleSubmenuToggle = (index: number, menuType: "main" | "others") => {
    setOpenSubmenu((prev) =>
      prev?.type === menuType && prev?.index === index
        ? null
        : { type: menuType, index }
    );
  };

  const handleImpersonateManager = async (managerId: number, managerName: string) => {
    try {
      setLoadingImpersonation(managerId);
      const response = await fetch('/api/impersonate', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ userId: managerId }),
      });
      const data = await response.json();
      if (response.ok && data.success) {
        localStorage.setItem('impersonatedManagerId', managerId.toString());
        localStorage.setItem('impersonatedManagerName', managerName);
        alert(`Vous êtes maintenant connecté en tant que ${managerName}`);
        window.location.href = data.redirectUrl || `/`;
      } else {
        alert(data.error || "Erreur lors de l'usurpation d'identité.");
        setLoadingImpersonation(null);
      }
    } catch (e) {
      alert("Erreur réseau lors de l'usurpation d'identité.");
      setLoadingImpersonation(null);
    }
  };

  const renderMenuItems = (
    navItems: NavItem[],
    menuType: "main" | "others"
  ) => (
    <ul className="flex flex-col gap-4">
      {navItems.map((nav, index) => (
        <li key={nav.name}>
          {nav.subItems ? (
            <button
              onClick={() => handleSubmenuToggle(index, menuType)}
              className={`menu-item group ${
                openSubmenu?.type === menuType && openSubmenu?.index === index
                  ? "menu-item-active"
                  : "menu-item-inactive"
              } cursor-pointer ${
                !isExpanded && !isHovered
                  ? "lg:justify-center"
                  : "lg:justify-start"
              }`}
            >
              <span
                className={`${
                  openSubmenu?.type === menuType && openSubmenu?.index === index
                    ? "menu-item-icon-active"
                    : "menu-item-icon-inactive"
                }`}
              >
                {nav.icon}
              </span>
              {(isExpanded || isHovered || isMobileOpen) && (
                <span className={`menu-item-text`}>{nav.name}</span>
              )}
              {(isExpanded || isHovered || isMobileOpen) && (
                <ChevronDownIcon
                  className={`ml-auto w-5 h-5 transition-transform duration-200 ${
                    openSubmenu?.type === menuType && openSubmenu?.index === index
                      ? "rotate-180 text-brand-500"
                      : ""
                  }`}
                />
              )}
            </button>
          ) : (
            nav.path && (
              <Link
                href={nav.path}
                className={`menu-item group ${
                  isActive(nav.path) ? "menu-item-active" : "menu-item-inactive"
                }`}
              >
                <span
                  className={`${
                    isActive(nav.path)
                      ? "menu-item-icon-active"
                      : "menu-item-icon-inactive"
                  }`}
                >
                  {nav.icon}
                </span>
                {(isExpanded || isHovered || isMobileOpen) && (
                  <span className={`menu-item-text`}>{nav.name}</span>
                )}
              </Link>
            )
          )}
          {nav.subItems && (isExpanded || isHovered || isMobileOpen) && (
            <div
              ref={(el) => {
                subMenuRefs.current[`${menuType}-${index}`] = el;
              }}
              className="overflow-hidden transition-all duration-300"
              style={{
                height:
                  openSubmenu?.type === menuType && openSubmenu?.index === index
                    ? `${subMenuHeight[`${menuType}-${index}`]}px`
                    : "0px",
              }}
            >
              <ul className="mt-2 space-y-1 ml-9">
                {nav.subItems.map((subItem) => (
                  <li key={subItem.name}>
                    <Link
                      href={subItem.path}
                      className={`menu-dropdown-item ${
                        isActive(subItem.path)
                          ? "menu-dropdown-item-active"
                          : "menu-dropdown-item-inactive"
                      }`}
                    >
                      {subItem.name}
                      <span className="flex items-center gap-1 ml-auto">
                        {subItem.new && (
                          <span
                            className={`ml-auto ${
                              isActive(subItem.path)
                                ? "menu-dropdown-badge-active"
                                : "menu-dropdown-badge-inactive"
                            } menu-dropdown-badge`}
                          >
                            new
                          </span>
                        )}
                        {subItem.pro && (
                          <span
                            className={`ml-auto ${
                              isActive(subItem.path)
                                ? "menu-dropdown-badge-active"
                                : "menu-dropdown-badge-inactive"
                            } menu-dropdown-badge`}
                          >
                            pro
                          </span>
                        )}
                      </span>
                    </Link>
                  </li>
                ))}
              </ul>
            </div>
          )}
        </li>
      ))}
    </ul>
  );

  useEffect(() => {
    getClients().then(setClients);
    // Récupérer la liste des managers seulement si l'utilisateur est admin
    if (session?.user?.role === "ADMIN") {
      const fetchManagers = async () => {
        try {
          const response = await fetch('/api/managers/list');
          if (response.ok) {
            const managersData = await response.json();
            setManagers(managersData);
          }
        } catch (error) {
          console.error('Erreur lors du chargement des managers:', error);
        }
      };
      fetchManagers();
    }
  }, [session?.user?.role]);

  // Filtrer les navItems selon le rôle
  const filteredNavItems = navItems.filter(nav => {
    if (nav.name === "Admin") {
      return session?.user?.role === "ADMIN";
    }
    return true;
  });

  return (
    <aside className={`fixed top-0 left-0 h-full bg-gradient-to-b from-white to-gray-50 shadow-xl z-40 transition-all duration-300 ${isExpanded ? 'w-48' : 'w-12'} border-r border-gray-200 dark:from-gray-900 dark:to-gray-800 dark:border-gray-700`}>
      <div className="flex items-center justify-between px-3 py-4 border-b border-gray-100 dark:border-gray-800 bg-gradient-to-r from-blue-600 to-blue-700">
        <span className="font-bold text-xl text-white">{isExpanded ? 'Datanope' : ''}</span>
        <button onClick={toggleSidebar} className="p-2 rounded-lg hover:bg-blue-800 transition-all duration-200 text-white">
          {isExpanded ? <ChevronLeft className="w-5 h-5" /> : <ChevronRight className="w-5 h-5" />}
        </button>
      </div>
      <div className="h-screen bg-gradient-to-b from-white to-gray-50 dark:from-gray-900 dark:to-gray-800 border-r border-gray-200 dark:border-gray-700 w-48 flex flex-col items-center pt-6 overflow-y-auto">
        <div className="flex flex-col items-center gap-3 py-6">
          <div className="relative">
            <Image
              src="/logo.png"
              alt="Logo"
              width={56}
              height={56}
              className="rounded-xl shadow-lg"
            />
            <div className="absolute -bottom-1 -right-1 w-6 h-6 bg-green-500 rounded-full border-2 border-white dark:border-gray-800"></div>
          </div>
          <span className="text-xl font-bold text-gray-900 dark:text-white">Datanope</span>
          <div className="w-12 h-1 bg-gradient-to-r from-blue-500 to-purple-500 rounded-full"></div>
        </div>
        
        {/* Liste des Managers - Uniquement pour les admins */}
        {session?.user?.role === "ADMIN" && (
          <div className="w-full px-4 pb-4">
            <div className="flex items-center justify-between mt-4 mb-2">
              <h2 className="text-md font-semibold">Gestionnaires</h2>
              <button onClick={() => setShowManagerList(v => !v)} className="p-1 rounded hover:bg-gray-200 dark:hover:bg-gray-700 transition">
                {showManagerList ? <ChevronUp className="w-4 h-4" /> : <ChevronDown className="w-4 h-4" />}
              </button>
            </div>
            {showManagerList && (
              <ul className="space-y-1">
                {managers.map((manager) => (
                  <li
                    key={manager.id}
                    className={`text-gray-800 hover:text-blue-600 cursor-pointer px-2 py-1 rounded hover:bg-gray-100 dark:hover:bg-gray-700 transition ${loadingImpersonation === manager.id ? 'opacity-50 cursor-not-allowed' : ''}`}
                    onClick={() => {
                      if (loadingImpersonation !== manager.id) {
                        // Impersonation du manager
                        handleImpersonateManager(manager.id, `${manager.firstName} ${manager.lastName}`);
                      }
                    }}
                  >
                    {manager.firstName} {manager.lastName}
                  </li>
                ))}
              </ul>
            )}
          </div>
        )}

        {/* Liste des Clients */}
        <div className="w-full px-4 pb-4">
          <div className="flex items-center justify-between mt-4 mb-2">
            <h2 className="text-md font-semibold">Client Liste</h2>
            <button onClick={() => setShowClientList(v => !v)} className="p-1 rounded hover:bg-gray-200 dark:hover:bg-gray-700 transition">
              {showClientList ? <ChevronUp className="w-4 h-4" /> : <ChevronDown className="w-4 h-4" />}
            </button>
          </div>
          {showClientList && (
            <ul className="space-y-1">
              {clients.map((client) => (
                <li
                  key={client.id}
                  className={`text-gray-800 hover:text-blue-600 cursor-pointer px-2 py-1 rounded hover:bg-gray-100 dark:hover:bg-gray-700 transition ${selectedClient?.id === client.id ? "font-bold bg-gray-200" : ""}`}
                  onClick={() => router.push(`/clients/${client.id}`)}
                >
                  {client.firstName} {client.lastName}
                </li>
              ))}
            </ul>
          )}
        </div>

        {/* Menu principal filtré par rôle */}
        <nav className="w-full px-4 pb-4">
          {renderMenuItems(filteredNavItems, "main")}
        </nav>
      </div>
    </aside>
  );
};

export default AppSidebar;