'use client';

import { useState } from 'react';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import {
  LayoutDashboard,
  Users,
  BookOpen,
  GraduationCap,
  ClipboardList,
  FileText,
  Settings,
  LogOut,
  Menu,
  X,
} from 'lucide-react';
import { cn } from '@/lib/utils';
import { useAuth } from '@/lib/hooks/useAuth';

interface SidebarProps {
  user: {
    role: 'admin' | 'guru' | 'siswa';
    username: string;
  };
}

export function Sidebar({ user }: SidebarProps) {
  const [isOpen, setIsOpen] = useState(false);
  const pathname = usePathname();
  const { logout } = useAuth();

  const menuItems = {
    admin: [
      { icon: LayoutDashboard, label: 'Dashboard', href: '/admin' },
      { icon: Users, label: 'Guru', href: '/admin/guru' },
      { icon: GraduationCap, label: 'Siswa', href: '/admin/siswa' },
      { icon: BookOpen, label: 'Kelas', href: '/admin/kelas' },
      { icon: FileText, label: 'Mata Pelajaran', href: '/admin/mata-pelajaran' },
    ],
    guru: [
      { icon: LayoutDashboard, label: 'Dashboard', href: '/guru' },
      { icon: BookOpen, label: 'Materi', href: '/guru/materi' },
      { icon: ClipboardList, label: 'Tugas', href: '/guru/tugas' },
      { icon: GraduationCap, label: 'Penilaian', href: '/guru/penilaian' },
    ],
    siswa: [
      { icon: LayoutDashboard, label: 'Dashboard', href: '/siswa' },
      { icon: BookOpen, label: 'Materi', href: '/siswa/materi' },
      { icon: ClipboardList, label: 'Tugas', href: '/siswa/tugas' },
      { icon: GraduationCap, label: 'Nilai', href: '/siswa/nilai' },
    ],
  };

  const items = menuItems[user.role as keyof typeof menuItems] || [];

  return (
    <>
      {/* Mobile Menu Button */}
      <button
        className="lg:hidden fixed top-4 left-4 z-50 p-2 rounded-md bg-white shadow-md"
        onClick={() => setIsOpen(!isOpen)}
      >
        {isOpen ? <X size={24} /> : <Menu size={24} />}
      </button>

      {/* Overlay */}
      {isOpen && (
        <div
          className="lg:hidden fixed inset-0 bg-black bg-opacity-50 z-40"
          onClick={() => setIsOpen(false)}
        />
      )}

      {/* Sidebar */}
      <aside
        className={cn(
          'fixed lg:static inset-y-0 left-0 z-40 w-64 bg-white border-r border-gray-200 transition-transform duration-300 transform',
          isOpen ? 'translate-x-0' : '-translate-x-full lg:translate-x-0'
        )}
      >
        <div className="flex flex-col h-full">
          {/* Logo */}
          <div className="p-6 border-b border-gray-200">
            <h1 className="text-xl font-bold text-primary">
              {process.env.NEXT_PUBLIC_APP_NAME}
            </h1>
            <p className="text-sm text-gray-500 capitalize">{user.role}</p>
          </div>

          {/* Navigation */}
          <nav className="flex-1 p-4 space-y-1 overflow-y-auto">
            {items.map((item) => {
              const isActive = pathname === item.href;
              return (
                <Link
                  key={item.href}
                  href={item.href}
                  className={cn(
                    'flex items-center gap-3 px-3 py-2 rounded-md transition-colors',
                    isActive
                      ? 'bg-primary text-white'
                      : 'text-gray-700 hover:bg-gray-100'
                  )}
                  onClick={() => setIsOpen(false)}
                >
                  <item.icon size={20} />
                  <span>{item.label}</span>
                </Link>
              );
            })}
          </nav>

          {/* Footer */}
          <div className="p-4 border-t border-gray-200 space-y-2">
            <Link
              href="/settings"
              className="flex items-center gap-3 px-3 py-2 text-gray-700 hover:bg-gray-100 rounded-md"
            >
              <Settings size={20} />
              <span>Pengaturan</span>
            </Link>
            <button
              onClick={logout}
              className="w-full flex items-center gap-3 px-3 py-2 text-red-600 hover:bg-red-50 rounded-md"
            >
              <LogOut size={20} />
              <span>Logout</span>
            </button>
          </div>
        </div>
      </aside>
    </>
  );
}