import React, { useState } from 'react';
import { 
  LayoutDashboard, Building2, Key, Server, Activity, Database,
  Sun, Moon, LogOut, Shield, ChevronRight, Menu, X, Sparkles, AlertTriangle
} from 'lucide-react';
import { useSuperAdminTheme } from '../store/theme';

interface SidebarProps {
  currentTab: string;
  onTabChange: (tab: string) => void;
  onLogout: () => void;
}

export function Sidebar({ currentTab, onTabChange, onLogout }: SidebarProps) {
  const { theme, toggleTheme } = useSuperAdminTheme();
  const [mobileOpen, setMobileOpen] = useState(false);

  const navItems = [
    { id: 'dashboard', label: 'Tenant Overview', icon: LayoutDashboard, badge: 'LIVE' },
    { id: 'tenants', label: 'Schools Registry', icon: Building2 },
    { id: 'licenses', label: 'Licensing Engine', icon: Key },
    { id: 'instances', label: 'Instance Spawner', icon: Server, badge: 'MULTI' },
    { id: 'telemetry', label: 'Telemetry & Logs', icon: Activity },
    { id: 'supabase', label: 'Supabase Cloud Link', icon: Database },
  ];

  return (
    <>
      {/* Mobile Sticky Header */}
      <header className="lg:hidden fixed top-0 left-0 right-0 h-16 bg-[#002147] border-b border-white/10 text-white z-50 px-4 flex items-center justify-between shadow-lg">
        <div className="flex items-center gap-3">
          <div className="w-10 h-10 rounded-xl bg-gradient-to-tr from-amber-500 to-red-600 p-0.5 shadow-md flex items-center justify-center">
            <div className="w-full h-full bg-[#002147] rounded-[0.7rem] flex items-center justify-center">
              <Shield size={20} className="text-amber-400" />
            </div>
          </div>
          <div>
            <h1 className="text-sm font-black text-white tracking-tight">NextGen LMS</h1>
            <p className="text-[0.65rem] font-bold text-amber-400 uppercase tracking-widest">SuperAdmin Portal</p>
          </div>
        </div>
        <button
          onClick={() => setMobileOpen(!mobileOpen)}
          className="p-2 rounded-lg bg-white/10 text-white hover:bg-white/20 transition-all"
        >
          {mobileOpen ? <X size={20} /> : <Menu size={20} />}
        </button>
      </header>

      {/* Backdrop for mobile overlay */}
      {mobileOpen && (
        <div 
          className="lg:hidden fixed inset-0 bg-black/60 backdrop-blur-sm z-40"
          onClick={() => setMobileOpen(false)}
        />
      )}

      {/* Sidebar Container */}
      <aside className={`
        fixed lg:static top-0 bottom-0 left-0 z-50
        w-72 flex flex-col flex-shrink-0
        bg-[#002147] text-white border-r border-white/10
        transition-transform duration-300 ease-in-out
        ${mobileOpen ? 'translate-x-0' : '-translate-x-full lg:translate-x-0'}
      `}>
        {/* Header Logo */}
        <div className="p-6 border-b border-white/10 flex items-center justify-between">
          <div className="flex items-center gap-3">
            <div className="w-11 h-11 rounded-2xl bg-gradient-to-tr from-amber-500 to-red-600 p-0.5 shadow-lg flex items-center justify-center">
              <div className="w-full h-full bg-[#002147] rounded-[0.85rem] flex items-center justify-center">
                <Shield className="w-6 h-6 text-amber-400" />
              </div>
            </div>
            <div>
              <h1 className="font-black text-base tracking-tight text-white flex items-center gap-1.5 font-heading">
                NextGen LMS
                <span className="text-[0.6rem] px-1.5 py-0.5 rounded bg-amber-500/20 text-amber-400 border border-amber-500/30">SA</span>
              </h1>
              <p className="text-[0.65rem] font-bold text-white/50 uppercase tracking-widest">Platform Owner Console</p>
            </div>
          </div>
        </div>

        {/* Navigation Items */}
        <nav className="flex-1 p-4 space-y-1.5 overflow-y-auto custom-scrollbar">
          <div className="px-3 py-2 text-[0.65rem] font-extrabold uppercase tracking-widest text-white/40">
            Licensing & Tenant Management
          </div>

          {navItems.map((item) => {
            const Icon = item.icon;
            const isActive = currentTab === item.id;
            return (
              <button
                key={item.id}
                onClick={() => {
                  onTabChange(item.id);
                  setMobileOpen(false);
                }}
                className={`
                  w-full flex items-center justify-between px-4 py-3 rounded-xl font-medium text-sm transition-all duration-200 group
                  ${isActive 
                    ? 'bg-amber-500/15 text-amber-400 font-bold border border-amber-500/30 shadow-sm' 
                    : 'text-white/70 hover:bg-white/5 hover:text-white border border-transparent'}
                `}
              >
                <div className="flex items-center gap-3 min-w-0">
                  <Icon className={`w-5 h-5 flex-shrink-0 ${isActive ? 'text-amber-400' : 'text-white/50 group-hover:text-white'}`} />
                  <span className="truncate">{item.label}</span>
                </div>
                {item.badge ? (
                  <span className={`text-[0.6rem] font-black px-2 py-0.5 rounded-full ${isActive ? 'bg-amber-500 text-black' : 'bg-white/10 text-white/70'}`}>
                    {item.badge}
                  </span>
                ) : (
                  <ChevronRight className={`w-4 h-4 opacity-0 group-hover:opacity-100 transition-opacity ${isActive ? 'opacity-100 text-amber-400' : 'text-white/30'}`} />
                )}
              </button>
            );
          })}
        </nav>

        {/* Footer User & Theme Bar */}
        <div className="p-4 border-t border-white/10 space-y-3 bg-black/20">
          {/* User Badge */}
          <div className="flex items-center justify-between px-3 py-2 rounded-xl bg-white/5 border border-white/5">
            <div className="flex items-center gap-2.5 min-w-0">
              <div className="w-8 h-8 rounded-lg bg-amber-500/20 text-amber-400 flex items-center justify-center font-bold text-xs border border-amber-500/30 flex-shrink-0">
                SA
              </div>
              <div className="min-w-0">
                <p className="text-xs font-bold text-white truncate">Platform Owner</p>
                <p className="text-[0.65rem] text-emerald-400 font-mono flex items-center gap-1">
                  <span className="w-1.5 h-1.5 rounded-full bg-emerald-400 animate-pulse"></span>
                  Master Online
                </p>
              </div>
            </div>

            {/* Light / Dark Mode Toggle Button */}
            <button
              onClick={toggleTheme}
              className="p-2 rounded-lg bg-white/10 hover:bg-white/20 text-amber-400 transition-all"
              title="Toggle Light / Dark Theme"
            >
              {theme === 'dark' ? <Sun size={16} /> : <Moon size={16} />}
            </button>
          </div>

          {/* Logout Button */}
          <button
            onClick={onLogout}
            className="w-full flex items-center justify-center gap-2 py-2.5 rounded-xl bg-red-500/10 hover:bg-red-600 text-red-400 hover:text-white border border-red-500/20 text-xs font-bold transition-all duration-200"
          >
            <LogOut size={16} />
            <span>Master Sign Out</span>
          </button>
        </div>
      </aside>
    </>
  );
}
