'use client';

import Link from 'next/link';
import { usePathname } from 'next/navigation';
import {
  LayoutDashboard,
  Calendar,
  Users,
  CreditCard,
  BarChart3,
  Settings,
} from 'lucide-react';
import { cn } from '@/lib/utils';

interface NavItem {
  label: string;
  href: string;
  icon: React.ComponentType<{ className?: string }>;
}

const navItems: NavItem[] = [
  { label: 'Dashboard', href: '/dashboard', icon: LayoutDashboard },
  { label: 'Bookings', href: '/bookings', icon: Calendar },
  { label: 'Players', href: '/clients', icon: Users },
  { label: 'Memberships', href: '/memberships', icon: CreditCard },
  { label: 'Reports', href: '/reports', icon: BarChart3 },
  { label: 'Settings', href: '/settings', icon: Settings },
];

export function Sidebar() {
  const pathname = usePathname();

  return (
    <aside className="fixed left-0 top-0 z-40 h-screen w-64 border-r border-primary-200 bg-white">
      {/* Logo Section */}
      <div className="flex h-16 items-center gap-3 border-b border-primary-200 px-6">
        <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-primary">
          <svg viewBox="0 0 40 40" className="w-7 h-7 text-white" fill="none">
            {/* Lightning bolt / smash icon */}
            <path d="M22 4L8 22h10l-4 14L28 18H18l4-14z" fill="currentColor" />
            {/* Impact spark */}
            <circle cx="32" cy="8" r="2" fill="currentColor" opacity="0.8" />
            <circle cx="35" cy="12" r="1.2" fill="currentColor" opacity="0.6" />
            <circle cx="30" cy="4" r="1" fill="currentColor" opacity="0.5" />
          </svg>
        </div>
        <span className="text-xl font-semibold text-primary-800">Cabo Pickleball</span>
      </div>

      {/* Navigation */}
      <nav className="flex flex-col gap-1 p-4">
        {navItems.map((item) => {
          const isActive = pathname === item.href || pathname.startsWith(`${item.href}/`);
          const Icon = item.icon;

          return (
            <Link
              key={item.href}
              href={item.href}
              className={cn(
                'flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition-colors',
                isActive
                  ? 'bg-primary text-white'
                  : 'text-primary-600 hover:bg-primary-50 hover:text-primary-800'
              )}
            >
              <Icon className="h-5 w-5" />
              {item.label}
            </Link>
          );
        })}
      </nav>
    </aside>
  );
}

export default Sidebar;