import React, { useState } from 'react';
import { cn } from '@/lib/utils';
import { 
  LayoutDashboard, 
  ArrowUpRight, 
  ArrowDownRight, 
  ArrowRightLeft, 
  Settings, 
  ChevronLeft, 
  ChevronRight,
  Search,
  Zap,
  User,
  LogOut,
  HelpCircle
} from 'lucide-react';

export const WorkspaceSidebar = ({ activeScreen, onScreenChange }) => {
  const [collapsed, setCollapsed] = useState(false);
  const [searchTerm, setSearchTerm] = useState('');

  const menuItems = [
    { id: 'dashboard', label: 'Dashboard', icon: LayoutDashboard, category: 'Geral' },
    { id: 'entradas', label: 'Receitas', icon: ArrowUpRight, category: 'Financeiro' },
    { id: 'saidas', label: 'Despesas', icon: ArrowDownRight, category: 'Financeiro' },
    { id: 'conciliacao', label: 'Conciliação', icon: ArrowRightLeft, category: 'Financeiro' },
    { id: 'config', label: 'Ajustes', icon: Settings, category: 'Sistema' },
  ];

  const filteredItems = menuItems.filter(item => 
    item.label.toLowerCase().includes(searchTerm.toLowerCase()) ||
    item.category.toLowerCase().includes(searchTerm.toLowerCase())
  );

  const categories = [...new Set(menuItems.map(item => item.category))];

  return (
    <aside className={cn(
      "bg-[var(--workspace-sec-5-light)] dark:bg-[#0d253a] text-white flex flex-col transition-all duration-500 ease-in-out z-50 shadow-2xl relative",
      collapsed ? "w-20" : "w-72"
    )}>
      {/* Botão de Toggle Flutuante */}
      <button 
        onClick={() => setCollapsed(!collapsed)}
        className="absolute -right-3 top-10 w-6 h-6 bg-[var(--workspace-sec-2-light)] rounded-full flex items-center justify-center shadow-lg hover:scale-110 transition-transform active:scale-95"
      >
        {collapsed ? <ChevronRight size={14} className="text-white" /> : <ChevronLeft size={14} className="text-white" />}
      </button>

      {/* Brand / Logo */}
      <div className="p-8 flex items-center gap-3">
        <div className="w-10 h-10 bg-gradient-to-br from-[#22bb6c] to-[#22c0a3] rounded-2xl flex items-center justify-center shadow-lg shadow-emerald-500/20 group-hover:rotate-12 transition-transform">
          <Zap size={24} className="text-white fill-white" />
        </div>
        {!collapsed && (
          <div className="flex flex-col">
            <span className="text-xl font-black tracking-tighter leading-none italic">iTGUYS</span>
            <span className="text-[10px] uppercase tracking-[0.3em] font-bold text-white/40">Workspace</span>
          </div>
        )}
      </div>

      {/* Busca */}
      {!collapsed && (
        <div className="px-6 mb-6">
          <div className="relative group">
            <Search className="absolute left-3 top-1/2 -translate-y-1/2 text-white/30 group-focus-within:text-[var(--workspace-sec-2-light)] transition-colors" size={16} />
            <input 
              type="text" 
              placeholder="Buscar função..."
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
              className="w-full bg-white/5 border border-white/10 rounded-xl py-2.5 pl-10 pr-4 text-xs focus:ring-2 focus:ring-[var(--workspace-sec-2-light)] focus:bg-white/10 outline-none transition-all placeholder:text-white/20"
            />
          </div>
        </div>
      )}

      {/* Menu scrollable */}
      <nav className="flex-1 overflow-y-auto px-4 space-y-8 custom-scrollbar pb-8">
        {categories.map(category => {
          const items = filteredItems.filter(i => i.category === category);
          if (items.length === 0) return null;

          return (
            <div key={category} className="space-y-2">
              {!collapsed && (
                <h3 className="px-4 text-[10px] font-black uppercase tracking-[0.2em] text-white/20">
                  {category}
                </h3>
              )}
              <div className="space-y-1">
                {items.map(item => {
                  const Icon = item.icon;
                  const isActive = activeScreen === item.id;

                  return (
                    <button
                      key={item.id}
                      onClick={() => onScreenChange(item.id)}
                      className={cn(
                        "w-full flex items-center gap-4 px-4 py-3.5 rounded-2xl transition-all relative group",
                        isActive 
                          ? "bg-white/10 text-white shadow-inner" 
                          : "text-white/50 hover:text-white hover:bg-white/5"
                      )}
                    >
                      <Icon size={20} className={cn(
                        "transition-transform group-hover:scale-110",
                        isActive ? "text-[var(--workspace-sec-2-light)]" : ""
                      )} />
                      {!collapsed && <span className="font-bold text-sm tracking-tight">{item.label}</span>}
                      
                      {isActive && (
                        <div className="absolute left-0 top-1/2 -translate-y-1/2 w-1 h-6 bg-[var(--workspace-sec-2-light)] rounded-r-full shadow-[0_0_15px_var(--workspace-sec-2-light)]" />
                      )}
                    </button>
                  );
                })}
              </div>
            </div>
          );
        })}
      </nav>

      {/* Footer / User Profile */}
      <div className="p-4 border-t border-white/5 bg-black/10">
        <div className={cn(
          "flex items-center gap-3 p-3 rounded-2xl bg-white/5 hover:bg-white/10 transition-colors cursor-pointer group",
          collapsed && "justify-center"
        )}>
          <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-slate-400 to-slate-600 flex items-center justify-center text-sm font-black text-white shadow-lg group-hover:scale-105 transition-transform">
            DA
          </div>
          {!collapsed && (
            <div className="flex-1 min-w-0">
               <p className="text-xs font-bold text-white truncate">Daivid Alves</p>
               <p className="text-[10px] text-white/40 truncate font-medium uppercase tracking-widest">Master Admin</p>
            </div>
          )}
          {!collapsed && <LogOut size={16} className="text-white/20 hover:text-red-400 cursor-pointer" />}
        </div>
      </div>
    </aside>
  );
};
