'use client';

import { signOut } from 'next-auth/react';
import { FiHome, FiCalendar, FiMapPin, FiCamera, FiUsers, FiSettings, FiLogOut, FiTruck, FiPackage, FiGrid, FiBook } from 'react-icons/fi';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { useState } from 'react';

interface DashboardSidebarProps {
  user: any;
}

export default function DashboardSidebar({ user }: DashboardSidebarProps) {
  const pathname = usePathname();
  const [projectsOpen, setProjectsOpen] = useState(false);

  const isActive = (path: string) => {
    if (path === '/dashboard') {
      return pathname === '/dashboard';
    }
    return pathname?.startsWith(path);
  };

  const navItems = [
    { href: '/dashboard', icon: FiHome, label: 'Dashboard' },
    { href: '/dashboard/kalender', icon: FiBook, label: 'Kalender' },
    { href: '/dashboard/bookings', icon: FiCalendar, label: 'Buchungen' },
    { href: '/dashboard/tours', icon: FiTruck, label: 'Touren' },
    { href: '/dashboard/locations', icon: FiMapPin, label: 'Standorte' },
    { href: '/dashboard/photoboxes', icon: FiCamera, label: 'Fotoboxen' },
    { href: '/dashboard/inventory', icon: FiPackage, label: 'Inventar' },
    { href: '/dashboard/drivers', icon: FiUsers, label: 'Fahrer' },
    { href: '/dashboard/settings', icon: FiSettings, label: 'Einstellungen' },
  ];

  const projects = [
    { href: '/dashboard/projects/fotoboxjungs', label: 'Die Fotoboxjungs', color: 'blue' },
    { href: '/dashboard/projects/kloenbox', label: 'Die Klönbox', color: 'green' },
    { href: '/dashboard/projects/hochzeitsbuchstaben', label: 'Hochzeitsbuchstaben', color: 'pink' },
    { href: '/dashboard/projects/forte-dj', label: 'Forte & Friends', color: 'purple' },
    { href: '/dashboard/projects/melobox', label: 'Melobox', color: 'yellow' },
  ];

  return (
    <aside className="w-64 bg-gradient-to-br from-gray-800 to-gray-900 border-r border-gray-700 shadow-lg min-h-screen flex flex-col">
      <div className="p-6 border-b border-gray-700">
        <h1 className="text-xl font-bold text-white">
          SaveTheMoment <span className="text-red-400">Atlas</span>
        </h1>
        <p className="text-sm text-gray-400 mt-1">{user?.name || 'Benutzer'}</p>
      </div>

      <nav className="p-4 space-y-2 flex-1 overflow-y-auto">
        {navItems.map((item) => {
          const Icon = item.icon;
          const active = isActive(item.href);
          
          return (
            <Link
              key={item.href}
              href={item.href}
              className={`flex items-center gap-3 px-4 py-3 rounded-lg font-medium transition-colors ${
                active
                  ? 'text-white bg-gradient-to-r from-red-600/20 to-pink-600/20 border border-red-500/50'
                  : 'text-gray-300 hover:bg-gray-700/50'
              }`}
            >
              <Icon /> {item.label}
            </Link>
          );
        })}

        {/* Weitere Projekte */}
        <div className="pt-4 border-t border-gray-700">
          <button
            onClick={() => setProjectsOpen(!projectsOpen)}
            className="flex items-center justify-between w-full px-4 py-3 text-gray-300 hover:bg-gray-700/50 rounded-lg transition-colors"
          >
            <div className="flex items-center gap-3">
              <FiGrid />
              <span>Weitere Projekte</span>
            </div>
            <span className={`transition-transform ${projectsOpen ? 'rotate-90' : ''}`}>›</span>
          </button>
          
          {projectsOpen && (
            <div className="mt-2 ml-4 space-y-1">
              {projects.map((project) => (
                <Link
                  key={project.href}
                  href={project.href}
                  className={`block px-4 py-2 text-sm rounded-lg transition-colors ${
                    isActive(project.href)
                      ? 'text-white bg-gray-700'
                      : 'text-gray-400 hover:text-gray-300 hover:bg-gray-700/50'
                  }`}
                >
                  <span className="inline-block w-2 h-2 rounded-full mr-2" style={{ backgroundColor: project.color }}></span>
                  {project.label}
                </Link>
              ))}
            </div>
          )}
        </div>
      </nav>

      <div className="p-4 border-t border-gray-700">
        <button
          onClick={() => signOut({ callbackUrl: '/' })}
          className="flex items-center justify-center gap-2 px-4 py-2 text-sm text-gray-300 hover:bg-red-500/20 hover:text-red-400 rounded-lg transition-colors border border-gray-700 hover:border-red-500/50 w-full"
        >
          <FiLogOut size={16} /> Abmelden
        </button>
      </div>
    </aside>
  );
}