'use client';

import React, { useState } from 'react';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import AppLogo from '@/components/ui/AppLogo';
import { Package, Users, ClipboardList, ChevronLeft, ChevronRight, BarChart2, Settings, LogOut, AlertCircle,  } from 'lucide-react';

interface NavItem {
  label: string;
  href: string;
  icon: React.ReactNode;
  badge?: number;
  group?: string;
}

const navItems: NavItem[] = [
  { label: 'Dispatch ONT', href: '/', icon: <Package size={20} />, badge: 3, group: 'Operasional' },
  { label: 'Form Pemasangan', href: '/technician-installation-form', icon: <ClipboardList size={20} />, group: 'Operasional' },
  { label: 'Manajemen Teknisi', href: '/technician-assignment-management', icon: <Users size={20} />, badge: 5, group: 'Manajemen' },
];

const bottomItems = [
  { label: 'Laporan', href: '#', icon: <BarChart2 size={20} /> },
  { label: 'Pengaturan', href: '#', icon: <Settings size={20} /> },
];

export default function Sidebar() {
  const [collapsed, setCollapsed] = useState(false);
  const pathname = usePathname();

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

      {/* Nav */}
      <nav className="flex-1 overflow-y-auto py-3 px-2 space-y-0.5">
        {/* Group: Operasional */}
        {!collapsed && (
          <p className="section-label px-2 pt-2 pb-1">Operasional</p>
        )}
        {navItems
          .filter((i) => i.group === 'Operasional')
          .map((item) => (
            <NavLink key={`nav-${item.href}`} item={item} collapsed={collapsed} active={pathname === item.href} />
          ))}

        {!collapsed && (
          <p className="section-label px-2 pt-4 pb-1">Manajemen</p>
        )}
        {collapsed && <div className="my-2 border-t border-border" />}
        {navItems
          .filter((i) => i.group === 'Manajemen')
          .map((item) => (
            <NavLink key={`nav-${item.href}`} item={item} collapsed={collapsed} active={pathname === item.href} />
          ))}
      </nav>

      {/* Bottom */}
      <div className="px-2 py-3 border-t border-border space-y-0.5">
        {bottomItems.map((item) => (
          <NavLink
            key={`nav-bottom-${item.href}`}
            item={item}
            collapsed={collapsed}
            active={false}
          />
        ))}

        {/* Alert indicator */}
        {!collapsed && (
          <div className="mt-2 mx-1 px-3 py-2 rounded-lg bg-amber-50 border border-amber-200 flex items-start gap-2">
            <AlertCircle size={14} className="text-warning mt-0.5 shrink-0" />
            <p className="text-xs text-amber-700 leading-tight">
              5 ONT belum dikonfirmasi instalasi
            </p>
          </div>
        )}

        {/* User */}
        <div className={`flex items-center gap-3 px-2 py-2 mt-2 rounded-lg hover:bg-muted cursor-pointer transition-colors ${collapsed ? 'justify-center' : ''}`}>
          <div className="w-7 h-7 rounded-full bg-primary flex items-center justify-center shrink-0">
            <span className="text-xs font-bold text-primary-foreground">AG</span>
          </div>
          {!collapsed && (
            <div className="flex-1 min-w-0">
              <p className="text-sm font-medium text-foreground truncate">Admin Gudang</p>
              <p className="text-xs text-muted-foreground truncate">Warehouse</p>
            </div>
          )}
          {!collapsed && <LogOut size={15} className="text-muted-foreground shrink-0" />}
        </div>
      </div>

      {/* Collapse toggle */}
      <button
        onClick={() => setCollapsed(!collapsed)}
        className="absolute top-[72px] -right-3 w-6 h-6 rounded-full bg-card border border-border flex items-center justify-center shadow-sm hover:bg-muted transition-colors z-40"
        aria-label={collapsed ? 'Expand sidebar' : 'Collapse sidebar'}
      >
        {collapsed ? <ChevronRight size={12} /> : <ChevronLeft size={12} />}
      </button>
    </aside>
  );
}

function NavLink({
  item,
  collapsed,
  active,
}: {
  item: NavItem;
  collapsed: boolean;
  active: boolean;
}) {
  return (
    <Link
      href={item.href}
      title={collapsed ? item.label : undefined}
      className={`flex items-center gap-3 px-2 py-2 text-sm font-medium transition-colors relative group ${
        active ? 'nav-item-active' : 'nav-item-inactive'
      } ${collapsed ? 'justify-center' : ''}`}
    >
      <span className="shrink-0">{item.icon}</span>
      {!collapsed && <span className="flex-1 truncate">{item.label}</span>}
      {!collapsed && item.badge !== undefined && item.badge > 0 && (
        <span className="ml-auto text-xs font-bold bg-primary text-primary-foreground rounded-full px-1.5 py-0.5 min-w-[20px] text-center leading-none">
          {item.badge}
        </span>
      )}
      {collapsed && item.badge !== undefined && item.badge > 0 && (
        <span className="absolute top-1 right-1 w-2 h-2 rounded-full bg-primary" />
      )}
      {collapsed && (
        <span className="absolute left-full ml-2 px-2 py-1 text-xs font-medium bg-foreground text-background rounded-md opacity-0 pointer-events-none group-hover:opacity-100 transition-opacity whitespace-nowrap z-50">
          {item.label}
        </span>
      )}
    </Link>
  );
}