'use client';

import { useState } from 'react';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import {
  LayoutDashboard,
  Receipt,
  Users,
  User,
  Shield,
  Menu,
  X,
} from 'lucide-react';
import { cn } from '@/lib/utils';
import { useNotifications } from '@/hooks/useNotifications';
import { Badge } from '@/components/ui/badge';

const NAV_ITEMS: Array<{ href: string; label: string; icon: typeof LayoutDashboard }> = [
  { href: '/dashboard', label: 'Dashboard', icon: LayoutDashboard },
  { href: '/dashboard/transactions', label: 'Transactions', icon: Receipt },
  { href: '/dashboard/referral', label: 'Referral', icon: Users },
  { href: '/dashboard/profile', label: 'Profile', icon: User },
  { href: '/dashboard/appeals', label: 'Appeal', icon: Shield },
];

function NavItems({ onNavigate }: { onNavigate?: () => void }) {
  const pathname = usePathname();
  const { unreadCount } = useNotifications(1, 20);

  return (
    <nav className="flex flex-col gap-1">
      {NAV_ITEMS.map((item) => {
        const isActive =
          pathname === item.href ||
          (item.href !== '/dashboard' && pathname.startsWith(item.href));
        const isNotifications = item.href === '/dashboard/notifications';
        return (
          <Link
            key={item.href}
            href={item.href}
            onClick={onNavigate}
            className={cn(
              'flex items-center gap-2.5 rounded-lg px-3 py-2 text-sm transition-colors',
              isActive
                ? 'bg-primary-100 font-medium text-primary-700 dark:bg-primary-500/15 dark:text-primary-300'
                : 'text-ink-muted hover:bg-surface-raised hover:text-ink',
            )}
          >
            <item.icon className="h-4 w-4 shrink-0" />
            {item.label}
            {isNotifications && unreadCount > 0 && (
              <Badge variant="danger" className="ml-auto h-5 min-w-[20px] rounded-full px-1.5 text-[10px] font-bold">
                {unreadCount > 9 ? '9+' : unreadCount}
              </Badge>
            )}
          </Link>
        );
      })}
    </nav>
  );
}

export function Sidebar({ mobileOpen, onMobileClose, onMobileOpen }: { mobileOpen?: boolean; onMobileClose?: () => void; onMobileOpen?: () => void } = {}) {
  const [internalOpen, setInternalOpen] = useState(false);

  const isOpen = mobileOpen ?? internalOpen;

  const open = () => {
    if (onMobileOpen) onMobileOpen();
    else setInternalOpen(true);
  };

  const close = () => {
    if (onMobileClose) onMobileClose();
    else setInternalOpen(false);
  };

  return (
    <>
      {/* Desktop sidebar */}
      <aside className="hidden w-64 shrink-0 border-r border-line md:block">
        <div className="sticky top-0 h-screen overflow-y-auto p-4">
          <NavItems />
        </div>
      </aside>

      {/* Mobile header toggle */}
      <div className="fixed bottom-4 left-4 z-50 md:hidden">
        <button
          onClick={open}
          className="flex h-12 w-12 items-center justify-center rounded-full bg-primary-600 text-white shadow-lg"
          aria-label="Open menu"
        >
          <Menu className="h-5 w-5" />
        </button>
      </div>

      {/* Mobile drawer */}
      {isOpen && (
        <div className="fixed inset-0 z-50 md:hidden">
          <div
            className="absolute inset-0 bg-black/50 backdrop-blur-sm"
            onClick={close}
          />
          <div className="absolute left-0 top-0 h-full w-72 overflow-y-auto bg-surface p-4 shadow-xl">
            <div className="mb-4 flex items-center justify-between">
              <span className="text-sm font-semibold text-ink">Menu</span>
              <button
                onClick={close}
                className="rounded-lg p-1.5 text-ink-muted hover:bg-surface-raised"
                aria-label="Close menu"
              >
                <X className="h-5 w-5" />
              </button>
            </div>
            <NavItems onNavigate={close} />
          </div>
        </div>
      )}
    </>
  );
}