import React, { useState } from 'react';
import { 
  LayoutDashboard, 
  Tag, 
  MapPin, 
  Users, 
  Package, 
  FileText, 
  HelpCircle, 
  LogOut, 
  ChevronDown, 
  ChevronRight,
  Layers,
  Type,
  FileBox,
  Settings
} from 'lucide-react';
import { cn } from '../ui/utils';
import { ScrollArea } from '../ui/scroll-area';
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 },
      ]
    },
    { type: 'header', name: 'MANAGEMENT' },
    { name: 'Location Manager', icon: MapPin, type: 'item' },
    { type: 'header', name: 'SYSTEM MANAGEMENT' },
    { name: 'Account Management', icon: Users, type: 'item' },
    { name: 'Menu Management', icon: Package, type: 'item' },
    { name: 'System Menu', icon: Settings, type: 'item' },
    { name: 'Reports', icon: FileText, type: 'item' },
    { name: 'Support', icon: HelpCircle, type: 'item' },
    { name: 'Log Out', icon: LogOut, type: 'item' },
  ];

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

      <ScrollArea className="flex-1 py-4">
        <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 text-blue-300 uppercase tracking-wider">
                  {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",
                      "hover:bg-blue-800/50 text-blue-100"
                    )}
                  >
                    <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-blue-800 border-blue-400 text-white"
                              : "border-transparent hover:bg-blue-800/30 text-blue-200 hover:text-white"
                          )}
                        >
                          <div className="w-1 h-1 rounded-full bg-current" />
                          {child.name}
                        </button>
                      ))}
                    </div>
                  )}
                </div>
              );
            }

            return (
              <button
                key={index}
                onClick={() => 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",
                  currentView === item.name
                    ? "bg-blue-700 text-white shadow-md shadow-blue-900/20"
                    : item.name === 'Log Out'
                      ? "text-red-300 hover:bg-red-900/20 hover:text-red-200"
                      : "text-blue-100 hover:bg-blue-800 hover:text-white"
                )}
              >
                <item.icon className="w-4 h-4" />
                {item.name}
              </button>
            );
          })}
        </div>
      </ScrollArea>
    </div>
  );
}