import React, { useState } from 'react';
import { 
  Tag, 
  MapPin, 
  Users, 
  Package, 
  FileText, 
  HelpCircle, 
  LogOut, 
  ChevronDown, 
  ChevronRight,
  Layers,
  Type,
  FileBox,
  Settings,
  AlertTriangle,
  ListTodo,
  Activity,
  Apple,
  FileDigit,
  Smartphone,
  Receipt,
  QrCode,
  Code,
  LayoutDashboard
} from 'lucide-react';
import { cn } from '../ui/utils';
import logo from "figma:asset/773f0c39e1986271e9144596caac519f934a6ae6.png";

interface SidebarProps {
  currentView: string;
  setCurrentView: (view: string) => void;
}

export function Sidebar({ currentView, setCurrentView }: SidebarProps) {
  const [labelingOpen, setLabelingOpen] = useState(true);

  const menuItems = [
    { name: 'Dashboard', icon: LayoutDashboard, type: 'item' },
    { type: 'header', name: 'MODULES' },
    { 
      name: 'Labeling', 
      icon: Tag, 
      type: 'sub', 
      isOpen: labelingOpen, 
      toggle: () => setLabelingOpen(!labelingOpen),
      children: [
        { name: 'Labels', icon: Tag },
        { name: 'Label Categories', icon: Layers },
        { name: 'Label Types', icon: Type },
        { name: 'Label Templates', icon: FileBox },
        { name: 'Multiple Options', icon: Settings },
      ]
    },
    { name: 'Training', icon: ListTodo, type: 'item' },
    { name: 'Alerts', icon: AlertTriangle, type: 'item' },
    { name: 'Tasks', icon: ListTodo, type: 'item' },
    { name: 'Sensors', icon: Activity, type: 'item' },
    { name: 'Food Waste', icon: Apple, type: 'item' },
    { name: 'E-Label', icon: FileDigit, type: 'item' },
    { type: 'header', name: 'MANAGEMENT' },
    { name: 'Location Manager', icon: MapPin, type: 'item' },
    { name: 'Account Management', icon: Users, type: 'item' },
    { name: 'Menu Manager', icon: Package, type: 'item' },
    { name: 'Devices', icon: Smartphone, type: 'item', highlight: true },
    { name: 'Invoices', icon: Receipt, type: 'item' },
    { name: 'Reports', icon: FileText, type: 'item' },
    { name: 'QR Codes', icon: QrCode, type: 'item' },
    { name: 'API', icon: Code, type: 'item' },
    { name: 'Support', icon: HelpCircle, type: 'action' },
    { name: 'Log Out', icon: LogOut, type: 'action', isLogout: true },
  ];

  return (
    <div className="w-64 bg-[#1e3a8a] text-white flex flex-col h-full min-h-0 border-r border-blue-800 shadow-xl z-20 shrink-0">
      <div className="shrink-0 flex items-center justify-center border-b border-blue-800/50 bg-white" style={{ height: 'var(--header-bar-height, 90px)' }}>
        <img src={logo} alt="MedVantage" className="h-14 w-auto object-contain" />
      </div>

      <div className="flex-1 min-h-0 overflow-y-auto py-4" style={{ flexBasis: 0 }}>
        <div className="px-3 space-y-1">
          {menuItems.map((item, index) => {
            if (item.type === 'header') {
              return (
                <div
                  key={index}
                  className="px-4 py-2 mt-4 text-xs font-semibold uppercase tracking-wider"
                  style={{ color: '#99CCFF' }}
                >
                  {item.name}
                </div>
              );
            }

            if (item.type === 'sub') {
              return (
                <div key={index} className="space-y-1">
                  <button
                    onClick={item.toggle}
                    className={cn(
                      "w-full flex items-center justify-between px-4 py-2.5 text-sm font-medium rounded-lg transition-colors text-white",
                      "hover:bg-blue-800/50"
                    )}
                  >
                    <div className="flex items-center gap-3">
                      <item.icon className="w-4 h-4" />
                      {item.name}
                    </div>
                    {item.isOpen ? <ChevronDown className="w-4 h-4" /> : <ChevronRight className="w-4 h-4" />}
                  </button>
                  
                  {item.isOpen && (
                    <div className="pl-4 space-y-1">
                      {item.children?.map((child, childIndex) => (
                        <button
                          key={childIndex}
                          onClick={() => setCurrentView(child.name)}
                          className={cn(
                            "w-full flex items-center gap-3 px-4 py-2 text-sm font-medium rounded-lg transition-colors border-l-2",
                            currentView === child.name
                              ? "bg-orange-500 border-orange-400 text-white"
                              : "border-transparent text-white hover:bg-blue-800/30 hover:text-white"
                          )}
                        >
                          <div className="w-1 h-1 rounded-full bg-current" />
                          {child.name}
                        </button>
                      ))}
                    </div>
                  )}
                </div>
              );
            }

            const isAction = item.type === 'action';
            const isLogout = 'isLogout' in item && item.isLogout;
            return (
              <button
                key={index}
                onClick={() => !isAction && setCurrentView(item.name)}
                className={cn(
                  "w-full flex items-center gap-3 px-4 py-2.5 text-sm font-medium rounded-lg transition-colors",
                  isLogout && "text-red-300 hover:bg-red-900/20",
                  !isLogout && (currentView === item.name
                    ? "bg-orange-500 text-white shadow-md shadow-orange-900/20"
                    : "text-white hover:bg-blue-800 hover:text-white")
                )}
              >
                <item.icon className="w-4 h-4" />
                {item.name}
              </button>
            );
          })}
        </div>
      </div>
    </div>
  );
}