'use client';

import React from 'react';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import Image from 'next/image';
import { useAuth } from '@/contexts/AuthContext';
import { 
  HomeIcon,
  BookOpenIcon,
  AcademicCapIcon,
  DocumentTextIcon,
  ClipboardDocumentListIcon,
  TrophyIcon,
  CalendarIcon,
  ChartBarIcon,
  CogIcon,
  XMarkIcon,
  Bars3Icon,
  BanknotesIcon,
  ShieldCheckIcon
} from '@heroicons/react/24/outline';
import { cn } from '@/utils/cn';

interface SidebarProps {
  isOpen: boolean;
  isCollapsed: boolean;
  onClose: () => void;
  onToggleCollapse: () => void;
}

const navigation = [
  { name: 'Dashboard', href: '/', icon: HomeIcon },
  { name: 'Kursus Saya', href: '/courses', icon: BookOpenIcon, badge: '3' },
  { name: 'Jadwal', href: '/schedule', icon: CalendarIcon },
  { name: 'Penugasan', href: '/assignments', icon: DocumentTextIcon, badge: '2' },
  { name: 'Ujian', href: '/exams', icon: ClipboardDocumentListIcon },
  { name: 'Sertifikat', href: '/certificates', icon: TrophyIcon },
  { name: 'AI Assistant', href: '/ai-assistant', icon: AcademicCapIcon },
  { name: 'Laporan', href: '/reports', icon: ChartBarIcon },
  { name: 'Pengaturan', href: '/settings', icon: CogIcon },
];

const addons = [
  { name: 'Payroll Reward System', href: '/payroll-demo', icon: BanknotesIcon },
  { name: 'Admin Payroll', href: '/admin/payroll', icon: ShieldCheckIcon },
];

export function Sidebar({ isOpen, isCollapsed, onClose, onToggleCollapse }: SidebarProps) {
  const pathname = usePathname();
  const { user } = useAuth();

  return (
    <>
      {/* Desktop sidebar */}
      <div className={cn(
        'fixed inset-y-0 left-0 z-50 flex flex-col transition-all duration-300 ease-in-out',
        'bg-primary-900 border-r border-primary-800',
        isCollapsed ? 'w-16' : 'w-64',
        'hidden lg:flex'
      )}>
        {/* Logo */}
        <div className="flex h-16 items-center justify-between px-4">
          {!isCollapsed && (
            <div className="flex items-center space-x-2">
              <div className="h-8 w-8">
                <Image
                  src="https://upload.wikimedia.org/wikipedia/id/thumb/2/29/Logo_Badan_Gizi_Nasional.svg/480px-Logo_Badan_Gizi_Nasional.svg.png"
                  alt="Logo Badan Gizi Nasional"
                  width={32}
                  height={32}
                  className="rounded"
                  priority
                />
              </div>
            <div className="text-white">
              <div className="text-sm font-bold">LMS BGN</div>
              <div className="text-xs text-secondary-300">Badan Gizi Nasional</div>
            </div>
            </div>
          )}
          <button
            onClick={onToggleCollapse}
            className="rounded-lg p-1.5 text-primary-400 hover:bg-primary-800 hover:text-white"
          >
            <Bars3Icon className="h-5 w-5" />
          </button>
        </div>

        {/* Navigation */}
        <nav className="flex-1 space-y-1 px-2 py-4">
          {navigation.map((item) => {
            const isActive = pathname === item.href;
            return (
              <Link
                key={item.name}
                href={item.href}
                className={cn(
                  'group flex items-center rounded-lg px-2 py-2 text-sm font-medium transition-colors',
                  isActive
                    ? 'bg-gold-500 text-white shadow-md'
                    : 'text-sidebar-300 hover:bg-sidebar-800 hover:text-white',
                  isCollapsed ? 'justify-center' : 'justify-between'
                )}
              >
                <div className="flex items-center">
                  <item.icon className={cn(
                    'flex-shrink-0',
                    isCollapsed ? 'h-6 w-6' : 'mr-3 h-5 w-5'
                  )} />
                  {!isCollapsed && (
                    <span className="truncate">{item.name}</span>
                  )}
                </div>
                {!isCollapsed && item.badge && (
                  <span className={cn(
                    'inline-flex items-center justify-center px-2 py-1 text-xs font-bold rounded-full',
                    isActive 
                      ? 'bg-white text-gold-600'
                      : 'bg-success-500 text-white'
                  )}>
                    {item.badge}
                  </span>
                )}
              </Link>
            );
          })}

          {/* Add-ons section */}
          {!isCollapsed && (
            <div className="mt-4 mb-1 px-2 text-xs font-semibold text-primary-300 uppercase tracking-wider">
              Add-ons
            </div>
          )}
          {addons
            .filter(item => !item.href.startsWith('/admin') || user?.role === 'admin')
            .map((item) => {
            const isActive = pathname === item.href;
            return (
              <Link
                key={item.name}
                href={item.href}
                className={cn(
                  'group flex items-center rounded-lg px-2 py-2 text-sm font-medium transition-colors',
                  isActive
                    ? 'bg-indigo-600 text-white shadow-md'
                    : 'text-sidebar-300 hover:bg-sidebar-800 hover:text-white',
                  isCollapsed ? 'justify-center' : 'justify-start'
                )}
              >
                <item.icon className={cn(
                  'flex-shrink-0',
                  isCollapsed ? 'h-6 w-6' : 'mr-3 h-5 w-5'
                )} />
                {!isCollapsed && (
                  <span className="truncate">{item.name}</span>
                )}
              </Link>
            );
          })}
        </nav>

        {/* User info */}
        {!isCollapsed && (
          <div className="border-t border-primary-800 p-4">
            <div className="flex items-center space-x-3">
              <div className="h-8 w-8 rounded-full bg-gradient-to-r from-gold-500 to-gold-600 flex items-center justify-center">
              <span className="text-sm font-medium text-white">JD</span>
            </div>
            <div className="flex-1 min-w-0">
              <p className="text-sm font-medium text-white truncate">John Doe</p>
              <p className="text-xs text-secondary-300 truncate">john@example.com</p>
            </div>
            </div>
          </div>
        )}
      </div>

      {/* Mobile sidebar */}
      <div className={cn(
        'fixed inset-y-0 left-0 z-50 flex w-64 flex-col transition-transform duration-300 ease-in-out lg:hidden',
        'bg-primary-900 border-r border-primary-800',
        isOpen ? 'translate-x-0' : '-translate-x-full'
      )}>
        {/* Mobile header */}
        <div className="flex h-16 items-center justify-between px-4">
          <div className="flex items-center space-x-2">
            <div className="h-8 w-8">
              <Image
                src="https://upload.wikimedia.org/wikipedia/id/thumb/2/29/Logo_Badan_Gizi_Nasional.svg/480px-Logo_Badan_Gizi_Nasional.svg.png"
                alt="Logo Badan Gizi Nasional"
                width={32}
                height={32}
                className="rounded"
                priority
              />
            </div>
            <div className="text-white">
              <div className="text-sm font-bold">LMS BGN</div>
              <div className="text-xs text-primary-300">Badan Gizi Nasional</div>
            </div>
          </div>
          <button
            onClick={onClose}
            className="rounded-lg p-1.5 text-primary-400 hover:bg-primary-800 hover:text-white"
          >
            <XMarkIcon className="h-5 w-5" />
          </button>
        </div>

        {/* Mobile navigation */}
        <nav className="flex-1 space-y-1 px-2 py-4">
          {navigation.map((item) => {
            const isActive = pathname === item.href;
            return (
              <Link
                key={item.name}
                href={item.href}
                onClick={onClose}
                className={cn(
                  'group flex items-center justify-between rounded-lg px-2 py-2 text-sm font-medium transition-colors',
                  isActive
                    ? 'bg-gold-500 text-white shadow-md'
                    : 'text-sidebar-300 hover:bg-sidebar-800 hover:text-white'
                )}
              >
                <div className="flex items-center">
                  <item.icon className="mr-3 h-5 w-5 flex-shrink-0" />
                  <span className="truncate">{item.name}</span>
                </div>
                {item.badge && (
                  <span className={cn(
                    'inline-flex items-center justify-center px-2 py-1 text-xs font-bold rounded-full',
                    isActive 
                      ? 'bg-white text-gold-600'
                      : 'bg-success-500 text-white'
                  )}>
                    {item.badge}
                  </span>
                )}
              </Link>
            );
          })}

          {/* Add-ons section */}
          <div className="mt-4 mb-1 px-2 text-xs font-semibold text-primary-300 uppercase tracking-wider">
            Add-ons
          </div>
          {addons
            .filter(item => !item.href.startsWith('/admin') || user?.role === 'admin')
            .map((item) => {
            const isActive = pathname === item.href;
            return (
              <Link
                key={item.name}
                href={item.href}
                onClick={onClose}
                className={cn(
                  'group flex items-center justify-between rounded-lg px-2 py-2 text-sm font-medium transition-colors',
                  isActive
                    ? 'bg-indigo-600 text-white shadow-md'
                    : 'text-sidebar-300 hover:bg-sidebar-800 hover:text-white'
                )}
              >
                <div className="flex items-center">
                  <item.icon className="mr-3 h-5 w-5 flex-shrink-0" />
                  <span className="truncate">{item.name}</span>
                </div>
              </Link>
            );
          })}
        </nav>

        {/* Mobile user info */}
        <div className="border-t border-primary-800 p-4">
          <div className="flex items-center space-x-3">
            <div className="h-8 w-8 rounded-full bg-gradient-to-r from-secondary-400 to-gold-500 flex items-center justify-center">
              <span className="text-sm font-medium text-white">JD</span>
            </div>
            <div className="flex-1 min-w-0">
              <p className="text-sm font-medium text-white truncate">John Doe</p>
              <p className="text-xs text-primary-400 truncate">john@example.com</p>
            </div>
          </div>
        </div>
      </div>
    </>
  );
}

export default Sidebar;