'use client';

import React, { useState } from 'react';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import AppLogo from '@/components/ui/AppLogo';
import { LayoutDashboard, ShoppingCart, Package, Users, Truck, BarChart3, Wallet, Settings, ChevronLeft, ChevronRight, ShieldCheck, Building2, ScrollText, Bell,  } from 'lucide-react';
import Icon from '@/components/ui/AppIcon';


interface NavItem {
  id: string;
  label: string;
  href: string;
  icon: React.ComponentType<{ size?: number; className?: string }>;
  badge?: number;
  group: string;
}

const navItems: NavItem[] = [
  { id: 'nav-dashboard', label: 'Dashboard', href: '/dashboard', icon: LayoutDashboard, group: 'main' },
  { id: 'nav-pos', label: 'POS Terminal', href: '/pos-terminal', icon: ShoppingCart, badge: 0, group: 'main' },
  { id: 'nav-products', label: 'Products', href: '/dashboard', icon: Package, group: 'inventory' },
  { id: 'nav-inventory', label: 'Inventory', href: '/dashboard', icon: ScrollText, badge: 7, group: 'inventory' },
  { id: 'nav-customers', label: 'Customers', href: '/dashboard', icon: Users, group: 'crm' },
  { id: 'nav-suppliers', label: 'Suppliers', href: '/dashboard', icon: Truck, group: 'crm' },
  { id: 'nav-purchases', label: 'Purchases', href: '/dashboard', icon: ShoppingCart, group: 'crm' },
  { id: 'nav-reports', label: 'Reports', href: '/dashboard', icon: BarChart3, group: 'analytics' },
  { id: 'nav-finance', label: 'Finance', href: '/dashboard', icon: Wallet, group: 'analytics' },
  { id: 'nav-users', label: 'Users & Roles', href: '/dashboard', icon: ShieldCheck, group: 'admin' },
  { id: 'nav-branches', label: 'Branches', href: '/dashboard', icon: Building2, group: 'admin' },
  { id: 'nav-settings', label: 'Settings', href: '/dashboard', icon: Settings, group: 'admin' },
];

const groups = [
  { key: 'main', label: 'Operations' },
  { key: 'inventory', label: 'Inventory' },
  { key: 'crm', label: 'Commerce' },
  { key: 'analytics', label: 'Analytics' },
  { key: 'admin', label: 'Admin' },
];

interface SidebarProps {
  collapsed: boolean;
  onToggle: () => void;
}

export default function Sidebar({ collapsed, onToggle }: SidebarProps) {
  const pathname = usePathname();

  const isActive = (href: string) => {
    if (href === '/dashboard' && pathname === '/dashboard') return true;
    if (href === '/pos-terminal' && pathname === '/pos-terminal') return true;
    if (href === '/' && pathname === '/') return true;
    return pathname === href;
  };

  return (
    <aside
      className={`sidebar-transition flex flex-col bg-card border-r border-border h-screen sticky top-0 z-30 ${
        collapsed ? 'w-16' : 'w-60'
      }`}
    >
      {/* Logo */}
      <div className={`flex items-center h-16 border-b border-border px-3 ${collapsed ? 'justify-center' : 'gap-2'}`}>
        <AppLogo size={32} />
        {!collapsed && (
          <div className="flex flex-col min-w-0">
            <span className="font-bold text-sm text-foreground leading-tight truncate">CloudCorePOS</span>
            <span className="text-xs text-muted-foreground truncate">Retail ERP</span>
          </div>
        )}
      </div>

      {/* Navigation */}
      <nav className="flex-1 overflow-y-auto scrollbar-thin py-3 px-2">
        {groups.map((group) => {
          const items = navItems.filter((item) => item.group === group.key);
          return (
            <div key={`group-${group.key}`} className="mb-4">
              {!collapsed && (
                <p className="text-xs font-600 uppercase tracking-widest text-muted-foreground px-2 mb-1">
                  {group.label}
                </p>
              )}
              {collapsed && <div className="h-px bg-border mx-1 mb-2" />}
              <ul className="space-y-0.5">
                {items.map((item) => {
                  const Icon = item.icon;
                  const active = isActive(item.href);
                  return (
                    <li key={item.id}>
                      <Link
                        href={item.href}
                        className={`group relative flex items-center gap-2.5 px-2 py-2 rounded-md text-sm font-medium transition-all duration-150 ${
                          active
                            ? 'bg-primary/10 text-primary' :'text-secondary-foreground hover:bg-muted hover:text-foreground'
                        } ${collapsed ? 'justify-center' : ''}`}
                        title={collapsed ? item.label : undefined}
                      >
                        <Icon size={18} className={active ? 'text-primary' : 'text-muted-foreground group-hover:text-foreground'} />
                        {!collapsed && (
                          <span className="flex-1 truncate">{item.label}</span>
                        )}
                        {!collapsed && item.badge !== undefined && item.badge > 0 && (
                          <span className="flex items-center justify-center w-5 h-5 text-xs font-700 rounded-full bg-danger text-white">
                            {item.badge}
                          </span>
                        )}
                        {collapsed && item.badge !== undefined && item.badge > 0 && (
                          <span className="absolute top-1 right-1 w-2 h-2 rounded-full bg-danger" />
                        )}
                        {collapsed && (
                          <div className="absolute left-full ml-2 px-2 py-1 bg-foreground text-background text-xs rounded whitespace-nowrap opacity-0 group-hover:opacity-100 pointer-events-none transition-opacity duration-150 z-50">
                            {item.label}
                          </div>
                        )}
                      </Link>
                    </li>
                  );
                })}
              </ul>
            </div>
          );
        })}
      </nav>

      {/* Footer */}
      <div className="border-t border-border p-2">
        {!collapsed && (
          <div className="flex items-center gap-2 px-2 py-2 mb-1">
            <div className="w-7 h-7 rounded-full bg-primary/10 flex items-center justify-center flex-shrink-0">
              <span className="text-xs font-700 text-primary">AM</span>
            </div>
            <div className="flex-1 min-w-0">
              <p className="text-xs font-600 text-foreground truncate">Amara Mwangi</p>
              <p className="text-xs text-muted-foreground truncate">Store Manager</p>
            </div>
            <button className="p-1 rounded hover:bg-muted text-muted-foreground hover:text-foreground transition-colors">
              <Bell size={14} />
            </button>
          </div>
        )}
        <button
          onClick={onToggle}
          className={`w-full flex items-center gap-2 px-2 py-2 rounded-md text-xs text-muted-foreground hover:bg-muted hover:text-foreground transition-all duration-150 ${collapsed ? 'justify-center' : ''}`}
        >
          {collapsed ? <ChevronRight size={16} /> : <><ChevronLeft size={16} /><span>Collapse</span></>}
        </button>
      </div>
    </aside>
  );
}