'use client';

import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { useAuthStore } from '@/lib/auth-store';
import {
  LayoutDashboard, Users, UserPlus, FileText, CreditCard,
  ArrowLeftRight, Ticket, BarChart3, ScrollText, Settings,
} from 'lucide-react';

const navItems = [
  { label: 'Dashboard',   href: '/dashboard',    icon: LayoutDashboard, roles: [] },
  { label: 'Clients',     href: '/clients',       icon: Users,           roles: [] },
  { label: 'Leads',       href: '/leads',         icon: UserPlus,        roles: ['admin', 'staff'] },
  { label: 'Invoices',    href: '/invoices',      icon: FileText,        roles: [] },
  { label: 'Payments',    href: '/payments',      icon: CreditCard,      roles: [] },
  { label: 'Remittances', href: '/remittances',   icon: ArrowLeftRight,  roles: ['admin', 'collector'] },
  { label: 'Tickets',     href: '/tickets',       icon: Ticket,          roles: [] },
  { label: 'Reports',     href: '/reports',       icon: BarChart3,       roles: ['admin', 'staff'] },
  { label: 'Audit Log',   href: '/audit-log',     icon: ScrollText,      roles: ['admin'] },
  { label: 'Settings',    href: '/settings',      icon: Settings,        roles: ['admin'] },
];

export default function Sidebar() {
  const pathname = usePathname();
  const user = useAuthStore((s) => s.user);
  const userRoles: string[] = (user?.roles ?? []).map((r: string) => r.toLowerCase());

  const visibleItems = navItems.filter(
    (item) => item.roles.length === 0 || item.roles.some((r) => userRoles.includes(r))
  );

  return (
    <aside className="flex flex-col w-64 min-h-screen" style={{ backgroundColor: '#0F172A' }}>
      {/* Logo */}
      <div className="flex items-center gap-2 px-6 py-5 border-b border-slate-700">
        <div className="w-8 h-8 rounded-lg flex items-center justify-center text-white font-bold text-sm"
          style={{ backgroundColor: '#0891B2' }}>F</div>
        <span className="text-white font-semibold text-lg">FiberOps</span>
      </div>

      {/* Nav */}
      <nav className="flex-1 px-3 py-4 space-y-0.5 overflow-y-auto">
        {visibleItems.map((item) => {
          const Icon = item.icon;
          const isActive = pathname === item.href || pathname.startsWith(item.href + '/');
          return (
            <Link key={item.href} href={item.href}
              className="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium transition-colors cursor-pointer"
              style={{
                backgroundColor: isActive ? '#0891B2' : 'transparent',
                color: isActive ? '#fff' : '#94A3B8',
              }}
              onMouseEnter={e => { if (!isActive) (e.currentTarget as HTMLElement).style.backgroundColor = '#1E293B'; }}
              onMouseLeave={e => { if (!isActive) (e.currentTarget as HTMLElement).style.backgroundColor = 'transparent'; }}>
              <Icon size={18} />{item.label}
            </Link>
          );
        })}
      </nav>

      <div className="px-6 py-4 border-t border-slate-700">
        <p className="text-slate-500 text-xs">FiberOps v1.0</p>
      </div>
    </aside>
  );
}