'use client';

import React from 'react';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { useAuth } from '@/contexts/AuthContext';
import {
  HomeIcon,
  BanknotesIcon,
  DocumentTextIcon,
  UsersIcon,
  ChartBarIcon,
  TrophyIcon,
  CogIcon,
  ChevronLeftIcon,
  ChevronRightIcon,
  BookOpenIcon
} from '@heroicons/react/24/outline';

interface AdminSidebarProps {
  collapsed: boolean;
  onToggle: () => void;
}

interface NavigationItem {
  id: string;
  label: string;
  icon: React.ComponentType<{ className?: string }>;
  path: string;
  description: string;
  children?: NavigationItem[];
}

const navigationItems: NavigationItem[] = [
  {
    id: 'dashboard',
    label: 'Dashboard',
    icon: HomeIcon,
    path: '/admin',
    description: 'Ringkasan aktivitas dan statistik utama'
  },
  {
    id: 'question-bank',
    label: 'Bank Soal',
    icon: BanknotesIcon,
    path: '/admin/questions',
    description: 'Kelola soal, kategori, dan import data',
    children: [
      {
        id: 'questions-manage',
        label: 'Kelola Soal',
        icon: DocumentTextIcon,
        path: '/admin/questions/manage',
        description: 'CRUD soal dan pengaturan'
      },
      {
        id: 'questions-categories',
        label: 'Kategori & Tag',
        icon: DocumentTextIcon,
        path: '/admin/questions/categories',
        description: 'Organisasi soal berdasarkan topik'
      }
    ]
  },
  {
    id: 'exam-management',
    label: 'Manajemen Ujian',
    icon: DocumentTextIcon,
    path: '/admin/exams',
    description: 'Jadwal, monitor, dan kelola ujian',
    children: [
      {
        id: 'exams-schedule',
        label: 'Jadwal Ujian',
        icon: DocumentTextIcon,
        path: '/admin/exams/schedule',
        description: 'Buat dan atur jadwal ujian'
      },
      {
        id: 'exams-monitor',
        label: 'Monitor Ujian',
        icon: DocumentTextIcon,
        path: '/admin/exams/monitor',
        description: 'Pantau ujian yang sedang berlangsung'
      }
    ]
  },
  {
    id: 'courses',
    label: 'Kursus',
    icon: BookOpenIcon,
    path: '/admin/courses',
    description: 'Kelola daftar kursus'
  },
  {
    id: 'user-management',
    label: 'Manajemen User',
    icon: UsersIcon,
    path: '/admin/users',
    description: 'Kelola peserta, pengawas, dan admin'
  },
  {
    id: 'analytics',
    label: 'Laporan & Analitik',
    icon: ChartBarIcon,
    path: '/admin/analytics',
    description: 'Insight dan laporan komprehensif'
  },
  {
    id: 'certificates',
    label: 'Sertifikat',
    icon: TrophyIcon,
    path: '/admin/certificates',
    description: 'Kelola sertifikat dan validasi'
  },
  {
    id: 'settings',
    label: 'Pengaturan Sistem',
    icon: CogIcon,
    path: '/admin/settings',
    description: 'Konfigurasi sistem dan integrasi'
  }
];

export default function AdminSidebar({ collapsed, onToggle }: AdminSidebarProps) {
  const pathname = usePathname();
  const { user } = useAuth();

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

  return (
    <div className={`fixed left-0 top-0 h-full bg-white border-r border-gray-200 transition-all duration-300 z-30 ${
      collapsed ? 'w-16' : 'w-64'
    }`}>
      {/* Header */}
      <div className="flex items-center justify-between p-4 border-b border-gray-200">
        {!collapsed && (
          <div className="flex items-center space-x-3">
            <div className="w-8 h-8 bg-gradient-to-r from-blue-500 to-purple-600 rounded-lg flex items-center justify-center">
              <span className="text-white font-bold text-sm">A</span>
            </div>
            <div>
              <h1 className="font-semibold text-gray-900">Admin LMS</h1>
              <p className="text-xs text-gray-500">Panel Administrator</p>
            </div>
          </div>
        )}
        <button
          onClick={onToggle}
          className="p-1.5 rounded-lg hover:bg-gray-100 transition-colors"
        >
          {collapsed ? (
            <ChevronRightIcon className="w-5 h-5 text-gray-600" />
          ) : (
            <ChevronLeftIcon className="w-5 h-5 text-gray-600" />
          )}
        </button>
      </div>

      {/* User Profile */}
      {!collapsed && (
        <div className="p-4 border-b border-gray-200">
          <div className="flex items-center space-x-3">
            <div className="w-10 h-10 bg-gradient-to-r from-blue-500 to-purple-600 rounded-full flex items-center justify-center">
              <span className="text-white font-medium text-sm">
                {user?.name?.split(' ').map(n => n[0]).join('').toUpperCase()}
              </span>
            </div>
            <div className="flex-1 min-w-0">
              <p className="text-sm font-medium text-gray-900 truncate">{user?.name}</p>
              <p className="text-xs text-gray-500 capitalize">{user?.role}</p>
            </div>
          </div>
        </div>
      )}

      {/* Navigation */}
      <nav className="flex-1 p-4 space-y-2">
        {navigationItems.map((item) => (
          <div key={item.id}>
            <Link
              href={item.path}
              className={`flex items-center space-x-3 px-3 py-2.5 rounded-lg transition-colors group ${
                isActive(item.path)
                  ? 'bg-blue-50 text-blue-700 border border-blue-200'
                  : 'text-gray-700 hover:bg-gray-50'
              }`}
              title={collapsed ? item.label : undefined}
            >
              <item.icon className={`w-5 h-5 ${
                isActive(item.path) ? 'text-blue-600' : 'text-gray-500'
              }`} />
              {!collapsed && (
                <div className="flex-1 min-w-0">
                  <p className="text-sm font-medium truncate">{item.label}</p>
                  <p className="text-xs text-gray-500 truncate">{item.description}</p>
                </div>
              )}
            </Link>
            
            {/* Sub-navigation */}
            {!collapsed && item.children && isActive(item.path) && (
              <div className="ml-8 mt-2 space-y-1">
                {item.children.map((child) => (
                  <Link
                    key={child.id}
                    href={child.path}
                    className={`flex items-center space-x-2 px-3 py-2 rounded-md text-sm transition-colors ${
                      pathname === child.path
                        ? 'bg-blue-50 text-blue-700'
                        : 'text-gray-600 hover:bg-gray-50'
                    }`}
                  >
                    <div className="w-1.5 h-1.5 rounded-full bg-current opacity-50" />
                    <span className="truncate">{child.label}</span>
                  </Link>
                ))}
              </div>
            )}
          </div>
        ))}
      </nav>

      {/* Footer */}
      {!collapsed && (
        <div className="p-4 border-t border-gray-200">
          <div className="text-xs text-gray-500 text-center">
            <p>LMS Admin v1.0</p>
            <p>© 2024 Badan Gizi Nasional</p>
          </div>
        </div>
      )}
    </div>
  );
}