'use client';

import { useState } from 'react';
import Link from 'next/link';
import { usePathname, useRouter } from 'next/navigation';
import { 
  //ChartBarIcon, 
  UsersIcon, 
  CogIcon, 
  BellIcon,
 // ArrowTrendingUpIcon,
  //CurrencyDollarIcon,
  HomeIcon,
  UserGroupIcon,
  DocumentTextIcon,
  ChartPieIcon,
  Cog6ToothIcon,
  Bars3Icon,
  XMarkIcon,
  MapIcon,
  ChevronLeftIcon,
  ChevronRightIcon,
  WrenchScrewdriverIcon,
  BellAlertIcon,
  CommandLineIcon
} from '@heroicons/react/24/outline';

interface NavItemProps {
  icon: React.ReactNode;
  label: string;
  href: string;
  isCollapsed: boolean;
  disabled?: boolean;
}

const NavItem = ({ icon, label, href, isCollapsed, disabled = false }: NavItemProps) => {
  const pathname = usePathname();
  const router = useRouter();
  const isActive = pathname === href;

  const handleClick = (e: React.MouseEvent) => {
    if (disabled) {
      e.preventDefault();
      return;
    }
    e.preventDefault();
    router.push(href);
  };

  return (
    <Link
      href={href}
      onClick={handleClick}
      className={`flex items-center px-4 py-2 text-sm font-medium rounded-md group ${
        disabled 
          ? 'text-gray-400 cursor-not-allowed opacity-50'
          : isActive
            ? 'bg-gray-200 text-gray-900'
            : 'text-gray-600 hover:bg-gray-100 hover:text-gray-900'
      }`}
      title={isCollapsed ? label : undefined}
    >
      <div className="mr-3">{icon}</div>
      {!isCollapsed && <span>{label}</span>}
      {isCollapsed && (
        <div className="absolute left-full ml-2 px-2 py-1 bg-gray-900 text-white text-sm rounded opacity-0 group-hover:opacity-100 transition-opacity duration-200">
          {label}
        </div>
      )}
    </Link>
  );
};

export default function AdminLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  const [isCollapsed, setIsCollapsed] = useState(false);
  const [sidebarOpen, setSidebarOpen] = useState(true);

  const toggleSidebar = () => {
    setIsCollapsed(!isCollapsed);
  };

  return (
    <div className="min-h-screen bg-gray-100">
      {/* Sidebar */}
      <div
        className={`fixed inset-y-0 left-0 z-50 bg-gray-50 shadow-lg transform transition-all duration-200 ease-in-out ${
          sidebarOpen ? 'translate-x-0' : '-translate-x-full'
        } ${isCollapsed ? 'w-16' : 'w-64'}`}
      >
        <div className="flex items-center justify-between h-16 px-4 border-b border-gray-200">
          {!isCollapsed && (
            <div className="flex items-center space-x-2">
              <CommandLineIcon className="h-6 w-6 text-gray-600" />
              <h2 className="text-lg font-semibold text-gray-900">MonitLog</h2>
            </div>
          )}
          <div className="flex items-center space-x-2">
            <button
              onClick={toggleSidebar}
              className="p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100"
              title={isCollapsed ? "Développer" : "Réduire"}
            >
              {isCollapsed ? (
                <ChevronRightIcon className="h-5 w-5" />
              ) : (
                <ChevronLeftIcon className="h-5 w-5" />
              )}
            </button>
            <button
              onClick={() => setSidebarOpen(false)}
              className="p-2 rounded-md text-gray-400 hover:text-gray-500 lg:hidden"
            >
              <XMarkIcon className="h-6 w-6" />
            </button>
          </div>
        </div>
        <nav className="px-2 py-4 space-y-1 relative">
          <NavItem icon={<HomeIcon className="h-5 w-5" />} label="Tableau de bord" href="/admin" isCollapsed={isCollapsed} />
          <NavItem icon={<BellAlertIcon className="h-5 w-5" />} label="Alertes" href="/admin/alarms" isCollapsed={isCollapsed} />
          <NavItem icon={<MapIcon className="h-5 w-5" />} label="États" href="/admin/states" isCollapsed={isCollapsed} />
          <NavItem icon={<WrenchScrewdriverIcon className="h-5 w-5" />} label="Services" href="/admin/services" isCollapsed={isCollapsed} />
          <NavItem icon={<UserGroupIcon className="h-5 w-5" />} label="Groupes" href="/admin/groups" isCollapsed={isCollapsed} />
          <NavItem icon={<UsersIcon className="h-5 w-5" />} label="Utilisateurs" href="/admin/users" isCollapsed={isCollapsed} disabled />
          <NavItem icon={<DocumentTextIcon className="h-5 w-5" />} label="Rapports" href="/admin/reports" isCollapsed={isCollapsed} disabled />
          <NavItem icon={<ChartPieIcon className="h-5 w-5" />} label="Analytique" href="/admin/analytics" isCollapsed={isCollapsed} disabled />
          <NavItem icon={<Cog6ToothIcon className="h-5 w-5" />} label="Paramètres" href="/admin/settings" isCollapsed={isCollapsed} disabled />
        </nav>
      </div>

      {/* Main Content */}
      <div className={`${sidebarOpen ? (isCollapsed ? 'lg:pl-16' : 'lg:pl-64') : ''} min-h-screen transition-all duration-200 ease-in-out`}>
        {/* Top Navigation */}
        <nav className="bg-white shadow-sm">
          <div className="px-4 sm:px-6 lg:px-8">
            <div className="flex justify-between h-16">
              <div className="flex items-center">
                <button
                  onClick={() => setSidebarOpen(true)}
                  className="p-2 rounded-md text-gray-400 hover:text-gray-500 lg:hidden"
                >
                  <Bars3Icon className="h-6 w-6" />
                </button>
                <h1 className="text-xl font-semibold text-gray-900 ml-4">Tableau de bord administrateur</h1>
              </div>
              <div className="flex items-center space-x-4">
                <button className="p-2 text-gray-400 hover:text-gray-500">
                  <BellIcon className="h-6 w-6" />
                </button>
                <button className="p-2 text-gray-400 hover:text-gray-500">
                  <CogIcon className="h-6 w-6" />
                </button>
              </div>
            </div>
          </div>
        </nav>

        {/* Page Content */}
        <main className="py-6">
          {children}
        </main>
      </div>
    </div>
  );
}