'use client';

import Link from 'next/link';
import { usePathname } from 'next/navigation';
import {
  Plane,
  LayoutDashboard,
  Map,
  Building2,
  Bus,
  Calendar,
  FileText,
  Users,
  Settings,
  BarChart3,
  Receipt,
  CreditCard,
  ChevronLeft,
  ChevronRight,
  Globe,
} from 'lucide-react';
import { cn } from '@/lib/utils';
import { Button } from '@/components/ui/button';
import { useState } from 'react';

const menuItems = [
  {
    title: 'Dashboard',
    href: '#admin',
    icon: LayoutDashboard,
  },
  {
    title: 'Tours',
    href: '#admin-tours',
    icon: Map,
    submenu: [
      { title: 'Todos os Tours', href: '#admin-tours' },
      { title: 'Categorias', href: '#admin-tour-categories' },
      { title: 'Reservas', href: '#admin-tour-bookings' },
    ],
  },
  {
    title: 'Alojamentos',
    href: '#admin-accommodations',
    icon: Building2,
    submenu: [
      { title: 'Todos os Alojamentos', href: '#admin-accommodations' },
      { title: 'Tipos', href: '#admin-accommodation-types' },
      { title: 'Quartos', href: '#admin-rooms' },
      { title: 'Reservas', href: '#admin-accommodation-bookings' },
    ],
  },
  {
    title: 'Voos',
    href: '#admin-flights',
    icon: Plane,
  },
  {
    title: 'Autocarros',
    href: '#admin-bus',
    icon: Bus,
    submenu: [
      { title: 'Empresas', href: '#admin-bus-companies' },
      { title: 'Rotas', href: '#admin-bus-routes' },
      { title: 'Partidas', href: '#admin-bus-departures' },
      { title: 'Bilhetes', href: '#admin-bus-tickets' },
    ],
  },
  {
    title: 'Eventos',
    href: '#admin-events',
    icon: Calendar,
    submenu: [
      { title: 'Todos os Eventos', href: '#admin-events' },
      { title: 'Categorias', href: '#admin-event-categories' },
      { title: 'Reservas', href: '#admin-event-bookings' },
    ],
  },
  {
    title: 'Vistos',
    href: '#admin-visa',
    icon: FileText,
    submenu: [
      { title: 'Pedidos', href: '#admin-visa-requests' },
      { title: 'Países', href: '#admin-visa-countries' },
      { title: 'Tipos', href: '#admin-visa-types' },
    ],
  },
  {
    title: 'Destinos',
    href: '#admin-destinations',
    icon: Globe,
  },
  {
    title: 'Reservas',
    href: '#admin-bookings',
    icon: CreditCard,
  },
  {
    title: 'Contabilidade',
    href: '#admin-accounting',
    icon: Receipt,
    submenu: [
      { title: 'Dashboard', href: '#admin-accounting' },
      { title: 'Plano de Contas', href: '#admin-chart-of-accounts' },
      { title: 'Lançamentos', href: '#admin-journal-entries' },
      { title: 'Facturas', href: '#admin-invoices' },
      { title: 'Impostos', href: '#admin-taxes' },
      { title: 'Relatórios', href: '#admin-reports' },
    ],
  },
  {
    title: 'Utilizadores',
    href: '#admin-users',
    icon: Users,
  },
  {
    title: 'API B2B',
    href: '#admin-api',
    icon: BarChart3,
  },
  {
    title: 'Configurações',
    href: '#admin-settings',
    icon: Settings,
  },
];

export function AdminSidebar() {
  const pathname = usePathname();
  const [collapsed, setCollapsed] = useState(false);
  const [expandedMenus, setExpandedMenus] = useState<string[]>([]);

  const toggleSubmenu = (title: string) => {
    setExpandedMenus((prev) =>
      prev.includes(title)
        ? prev.filter((m) => m !== title)
        : [...prev, title]
    );
  };

  return (
    <aside
      className={cn(
        'fixed left-0 top-0 z-40 h-screen bg-gray-900 text-white transition-all duration-300',
        collapsed ? 'w-16' : 'w-64'
      )}
    >
      {/* Logo */}
      <div className="flex h-16 items-center justify-between border-b border-gray-800 px-4">
        {!collapsed && (
          <Link href="/" className="flex items-center gap-2">
            <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-gradient-to-br from-orange-500 to-red-600">
              <Plane className="h-5 w-5 text-white" />
            </div>
            <div className="flex flex-col">
              <span className="text-sm font-bold">Sincetur</span>
              <span className="text-xs text-orange-400">Admin</span>
            </div>
          </Link>
        )}
        <Button
          variant="ghost"
          size="icon"
          onClick={() => setCollapsed(!collapsed)}
          className="text-gray-400 hover:text-white"
        >
          {collapsed ? (
            <ChevronRight className="h-4 w-4" />
          ) : (
            <ChevronLeft className="h-4 w-4" />
          )}
        </Button>
      </div>

      {/* Navigation */}
      <nav className="flex-1 overflow-y-auto py-4">
        <ul className="space-y-1 px-2">
          {menuItems.map((item) => {
            const isActive = pathname === item.href;
            const isExpanded = expandedMenus.includes(item.title);

            return (
              <li key={item.title}>
                {item.submenu ? (
                  <>
                    <button
                      onClick={() => toggleSubmenu(item.title)}
                      className={cn(
                        'flex w-full items-center gap-3 rounded-lg px-3 py-2 text-gray-300 hover:bg-gray-800 hover:text-white transition-colors',
                        isActive && 'bg-gray-800 text-white'
                      )}
                    >
                      <item.icon className="h-5 w-5 flex-shrink-0" />
                      {!collapsed && (
                        <>
                          <span className="flex-1 text-left text-sm">
                            {item.title}
                          </span>
                          <ChevronRight
                            className={cn(
                              'h-4 w-4 transition-transform',
                              isExpanded && 'rotate-90'
                            )}
                          />
                        </>
                      )}
                    </button>
                    {!collapsed && isExpanded && (
                      <ul className="mt-1 ml-6 space-y-1 border-l border-gray-700 pl-3">
                        {item.submenu.map((subItem) => (
                          <li key={subItem.title}>
                            <Link
                              href={subItem.href}
                              className="block rounded-lg px-3 py-2 text-sm text-gray-400 hover:bg-gray-800 hover:text-white transition-colors"
                            >
                              {subItem.title}
                            </Link>
                          </li>
                        ))}
                      </ul>
                    )}
                  </>
                ) : (
                  <Link
                    href={item.href}
                    className={cn(
                      'flex items-center gap-3 rounded-lg px-3 py-2 text-gray-300 hover:bg-gray-800 hover:text-white transition-colors',
                      isActive && 'bg-gray-800 text-white'
                    )}
                  >
                    <item.icon className="h-5 w-5 flex-shrink-0" />
                    {!collapsed && <span className="text-sm">{item.title}</span>}
                  </Link>
                )}
              </li>
            );
          })}
        </ul>
      </nav>

      {/* User info */}
      {!collapsed && (
        <div className="border-t border-gray-800 p-4">
          <div className="flex items-center gap-3">
            <div className="flex h-10 w-10 items-center justify-center rounded-full bg-orange-600">
              <span className="text-sm font-semibold">AD</span>
            </div>
            <div className="flex-1 min-w-0">
              <p className="text-sm font-medium truncate">Administrador</p>
              <p className="text-xs text-gray-400 truncate">admin@sincetur.com</p>
            </div>
          </div>
        </div>
      )}
    </aside>
  );
}