'use client';

import React from 'react';
import { 
  LayoutDashboard, 
  CheckSquare, 
  Flame, 
  Calendar as CalendarIcon, 
  Wallet, 
  BookOpen, 
  Timer, 
  Sparkles,
  ChevronLeft,
  ChevronRight,
  UserCheck,
  Dumbbell
} from 'lucide-react';
import { ActiveModule } from '@/lib/types';

interface SidebarProps {
  activeModule: ActiveModule;
  onSelectModule: (module: ActiveModule) => void;
  isCollapsed: boolean;
  onToggleCollapse: () => void;
  pendingTasksCount: number;
  habitsCount: number;
}

export const Sidebar: React.FC<SidebarProps> = ({
  activeModule,
  onSelectModule,
  isCollapsed,
  onToggleCollapse,
  pendingTasksCount,
  habitsCount,
}) => {
  const navItems = [
    {
      id: 'dashboard' as ActiveModule,
      label: 'Command Center',
      icon: LayoutDashboard,
      badge: null,
      glowColor: 'group-hover:text-cyan-400',
      activeBg: 'bg-cyan-500/10 text-cyan-400 border-cyan-500/40',
    },
    {
      id: 'fitness' as ActiveModule,
      label: 'Fitness Lab',
      icon: Dumbbell,
      badge: 'MPS',
      glowColor: 'group-hover:text-lime-400',
      activeBg: 'bg-lime-500/10 text-lime-400 border-lime-500/40',
    },
    {
      id: 'pomodoro' as ActiveModule,
      label: 'Focus Timer',
      icon: Timer,
      badge: '25m',
      glowColor: 'group-hover:text-amber-400',
      activeBg: 'bg-amber-500/10 text-amber-400 border-amber-500/40',
    },
    {
      id: 'tasks' as ActiveModule,
      label: 'Tasks & Kanban',
      icon: CheckSquare,
      badge: pendingTasksCount > 0 ? `${pendingTasksCount}` : null,
      glowColor: 'group-hover:text-emerald-400',
      activeBg: 'bg-emerald-500/10 text-emerald-400 border-emerald-500/40',
    },
    {
      id: 'habits' as ActiveModule,
      label: 'Habits & Streaks',
      icon: Flame,
      badge: habitsCount > 0 ? `${habitsCount}` : null,
      glowColor: 'group-hover:text-orange-400',
      activeBg: 'bg-orange-500/10 text-orange-400 border-orange-500/40',
    },
    {
      id: 'calendar' as ActiveModule,
      label: 'Calendar Planner',
      icon: CalendarIcon,
      badge: null,
      glowColor: 'group-hover:text-blue-400',
      activeBg: 'bg-blue-500/10 text-blue-400 border-blue-500/40',
    },
    {
      id: 'finance' as ActiveModule,
      label: 'Budget & Finance',
      icon: Wallet,
      badge: null,
      glowColor: 'group-hover:text-teal-400',
      activeBg: 'bg-teal-500/10 text-teal-400 border-teal-500/40',
    },
    {
      id: 'notes' as ActiveModule,
      label: 'Notes & Journal',
      icon: BookOpen,
      badge: null,
      glowColor: 'group-hover:text-purple-400',
      activeBg: 'bg-purple-500/10 text-purple-400 border-purple-500/40',
    },
  ];

  return (
    <aside 
      className={`relative flex flex-col justify-between h-screen bg-[#0a0f1d] border-r border-slate-800/80 transition-all duration-300 z-30 select-none ${
        isCollapsed ? 'w-20' : 'w-64'
      }`}
    >
      {/* Brand Header */}
      <div className="p-4 border-b border-slate-800/70">
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-3 overflow-hidden">
            <div className="w-10 h-10 rounded-xl bg-gradient-to-tr from-cyan-500 to-blue-600 flex items-center justify-center shadow-lg shadow-cyan-500/20 shrink-0">
              <Sparkles className="w-5 h-5 text-white" />
            </div>
            {!isCollapsed && (
              <div className="flex flex-col">
                <span className="font-bold text-base text-slate-100 tracking-tight whitespace-nowrap">
                  Parth&apos;s Life
                </span>
                <span className="text-[11px] font-semibold text-cyan-400 tracking-wider uppercase">
                  Command Center
                </span>
              </div>
            )}
          </div>
          <button
            onClick={onToggleCollapse}
            className="p-1.5 rounded-lg text-slate-400 hover:text-slate-200 hover:bg-slate-800/60 transition-colors"
            title={isCollapsed ? "Expand sidebar" : "Collapse sidebar"}
          >
            {isCollapsed ? <ChevronRight className="w-4 h-4" /> : <ChevronLeft className="w-4 h-4" />}
          </button>
        </div>
      </div>

      {/* Navigation List */}
      <div className="flex-1 py-4 px-3 space-y-1.5 overflow-y-auto">
        <div className="text-[11px] font-semibold text-slate-500 px-3 uppercase tracking-wider mb-2">
          {!isCollapsed ? 'Modules' : '•••'}
        </div>
        {navItems.map((item) => {
          const Icon = item.icon;
          const isActive = activeModule === item.id;

          return (
            <button
              key={item.id}
              onClick={() => onSelectModule(item.id)}
              className={`w-full flex items-center gap-3.5 px-3 py-2.5 rounded-xl text-sm font-medium transition-all group relative border ${
                isActive
                  ? item.activeBg
                  : 'text-slate-400 border-transparent hover:text-slate-200 hover:bg-slate-800/40 hover:border-slate-800/50'
              }`}
              title={isCollapsed ? item.label : undefined}
            >
              <Icon className={`w-5 h-5 shrink-0 transition-transform group-hover:scale-110 ${isActive ? '' : item.glowColor}`} />
              
              {!isCollapsed && (
                <span className="flex-1 text-left truncate">
                  {item.label}
                </span>
              )}

              {!isCollapsed && item.badge && (
                <span className={`text-[11px] font-bold px-2 py-0.5 rounded-full ${
                  isActive 
                    ? 'bg-white/10 text-white' 
                    : 'bg-slate-800 text-slate-400 border border-slate-700/50'
                }`}>
                  {item.badge}
                </span>
              )}

              {/* Collapsed Badge Dot */}
              {isCollapsed && item.badge && (
                <span className="absolute top-2 right-2 w-2 h-2 rounded-full bg-cyan-400" />
              )}
            </button>
          );
        })}
      </div>

      {/* User / Status Footer */}
      <div className="p-3 border-t border-slate-800/70">
        <div className={`flex items-center gap-3 p-2 rounded-xl bg-slate-900/60 border border-slate-800/60 ${isCollapsed ? 'justify-center' : ''}`}>
          <div className="relative shrink-0">
            <div className="w-9 h-9 rounded-full bg-gradient-to-br from-violet-500 via-indigo-500 to-cyan-400 flex items-center justify-center text-white font-bold text-sm shadow-md">
              P
            </div>
            <span className="absolute bottom-0 right-0 w-2.5 h-2.5 bg-emerald-400 border-2 border-[#0a0f1d] rounded-full"></span>
          </div>
          {!isCollapsed && (
            <div className="flex-1 min-w-0">
              <p className="text-xs font-semibold text-slate-200 truncate">Parth</p>
              <div className="flex items-center gap-1 text-[10px] text-emerald-400 font-medium">
                <UserCheck className="w-3 h-3" />
                <span>Focus Active</span>
              </div>
            </div>
          )}
        </div>
      </div>
    </aside>
  );
};