'use client';

import React from 'react';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { useAuth } from '@/context/AuthContext';
import {
  LayoutDashboard,
  BookOpen,
  Video,
  Users,
  ShieldCheck,
  CreditCard,
  Settings,
  GraduationCap,
  Search,
  Receipt,
  User,
  LogOut,
  Globe,
  Mail,
  Image as ImageIcon,
  Calendar,
} from 'lucide-react';

import { useRouter } from 'next/navigation';
import ConfirmLogoutModal from './ConfirmLogoutModal';

interface SidebarProps {
  role: 'admin' | 'student';
  isOpen?: boolean;
  onClose?: () => void;
}

export default function Sidebar({ role, isOpen, onClose }: SidebarProps) {
  const pathname = usePathname();
  const router = useRouter();
  const { user, logout } = useAuth();
  const [showLogoutModal, setShowLogoutModal] = React.useState(false);

  const handleConfirmLogout = () => {
    setShowLogoutModal(false);
    logout();
    router.push('/');
  };

  const adminNav = [
    { label: 'Dashboard', href: '/admin/dashboard', icon: LayoutDashboard },
    { heading: 'User Management' },
    { label: 'Admins', href: '/admin/admins', icon: ShieldCheck },
    { label: 'Students', href: '/admin/students', icon: Users },
    { heading: 'Content Management' },
    { label: 'Banners', href: '/admin/banners', icon: ImageIcon },
    { label: 'Courses', href: '/admin/courses', icon: BookOpen },
    { label: 'Lessons', href: '/admin/lessons', icon: Video },
    { heading: 'Sales & Support' },
    { label: 'Subscriptions', href: '/admin/subscriptions', icon: Calendar },
    { label: 'Orders & Payments', href: '/admin/orders', icon: CreditCard },
    { label: 'Contact Messages', href: '/admin/contacts', icon: Mail },
    { heading: 'System & Account' },
    { label: 'My Profile', href: '/admin/profile', icon: User },
    { label: 'Settings', href: '/admin/settings', icon: Settings },
  ];

  const studentNav = [
    { heading: 'Learning' },
    { label: 'My Courses', href: '/student/dashboard', icon: GraduationCap },
    { heading: 'Account' },
    { label: 'Purchase History', href: '/student/purchases', icon: Receipt },
    { label: 'My Profile', href: '/student/profile', icon: User },
  ];

  const navItems = role === 'admin' ? adminNav : studentNav;

  return (
    <>
      {/* Mobile overlay */}
      {isOpen && (
        <div 
          className="fixed inset-0 z-40 bg-gray-900/50 lg:hidden backdrop-blur-sm transition-opacity"
          onClick={onClose}
        />
      )}

      <aside className={`w-64 bg-white text-gray-900 flex flex-col border-r border-gray-200 shadow-sm h-screen fixed lg:static inset-y-0 left-0 z-50 transform transition-transform duration-300 ease-in-out ${isOpen ? 'translate-x-0' : '-translate-x-full lg:translate-x-0'}`}>
        {/* Logo & Brand Header */}
        <div className="p-6 border-b border-gray-200 flex items-center gap-3.5 shrink-0">
          <div className="relative w-11 h-11 rounded-xl bg-[#FECE00] shadow-sm flex flex-col justify-between overflow-hidden shrink-0 border border-amber-300">
            <div className="flex-1 flex items-center justify-center pt-0.5">
              <span className="text-black font-black text-xl leading-none">B1</span>
            </div>
            <div className="h-1.5 w-full flex">
              <div className="w-1/2 h-full bg-black"></div>
              <div className="w-1/2 h-full bg-[#DC2626]"></div>
            </div>
          </div>
          <div>
            <h2 className="font-extrabold text-base tracking-tight text-gray-900 leading-tight">
              ApkaGermanSchool
            </h2>
          </div>
        </div>

        {/* Navigation Links */}
        <nav className="p-4 space-y-1 flex-1 overflow-y-auto">
          {navItems.map((item, index) => {
            if (item.heading) {
              return (
                <div key={`heading-${index}`} className="pt-4 pb-1 px-4">
                  <span className="text-[11px] font-extrabold text-gray-400 uppercase tracking-wider">
                    {item.heading}
                  </span>
                </div>
              );
            }

            const Icon = item.icon as React.ElementType;
            const isActive = pathname === item.href;
            return (
              <Link
                key={item.href}
                href={item.href!}
                className={`flex items-center gap-3.5 px-4 py-2.5 rounded-xl text-sm font-semibold transition-all ${isActive
                  ? 'bg-[#FECE00] text-black font-extrabold shadow-sm'
                  : 'text-gray-600 hover:bg-gray-100 hover:text-gray-900'
                  }`}
              >
                <Icon className={`w-5 h-5 shrink-0 ${isActive ? 'text-black' : 'text-gray-500'}`} />
                <span>{item.label}</span>
              </Link>
            );
          })}
        </nav>

      {/* User Footer Profile & Logout */}
      <div className="p-4 border-t border-gray-200 bg-gray-50/80 shrink-0">
        {/* <Link
          href={role === 'admin' ? '/admin/profile' : '/student/profile'}
          className="flex items-center gap-3 p-2.5 rounded-xl bg-white border border-gray-200 mb-3 shadow-xs hover:border-[#FECE00] hover:shadow-sm transition group"
        >
          <div className="w-9 h-9 rounded-full bg-[#FECE00] text-black font-bold flex items-center justify-center text-sm uppercase shrink-0 border border-amber-300">
            {user?.name?.charAt(0) || (role === 'admin' ? 'A' : 'S')}
          </div>
          <div className="overflow-hidden flex-1">
            <p className="text-xs font-bold text-gray-900 truncate group-hover:text-[#D8A404] transition-colors">{user?.name || (role === 'admin' ? 'Admin User' : 'Student')}</p>
            <p className="text-[11px] text-gray-500 truncate">{user?.email || (role === 'admin' ? 'admin@apkagermanschool.com' : 'student@example.com')}</p>
          </div>
        </Link> */}

        <button
          onClick={() => setShowLogoutModal(true)}
          className="w-full py-2.5 px-4 rounded-xl bg-red-50 hover:bg-red-600 text-red-600 hover:text-white border border-red-200 font-bold text-xs uppercase tracking-wider transition-colors flex items-center justify-center gap-2 group cursor-pointer"
        >
          <LogOut className="w-4 h-4 text-red-600 group-hover:text-white transition-colors" />
          <span>Logout</span>
        </button>
      </div>
    </aside>

    <ConfirmLogoutModal
      isOpen={showLogoutModal}
      onClose={() => setShowLogoutModal(false)}
      onConfirm={handleConfirmLogout}
    />
    </>
  );
}