'use client';

import Link from 'next/link';
import { usePathname } from 'next/navigation';
import {
  LayoutDashboard,
  Upload,
  Globe,
  HardDrive,
  Users,
  Activity,
  Settings,
  Fingerprint,
  Shield,
  LogOut,
  Clock,
} from 'lucide-react';

const NAV_ITEMS = [
  { href: '/dashboard', label: 'Dashboard', icon: LayoutDashboard },
  { href: '/upload', label: 'Upload', icon: Upload },
  { href: '/explorer', label: 'Explorer', icon: Globe },
  { href: '/pins', label: 'Pins', icon: HardDrive },
  { href: '/history', label: 'History', icon: Clock },
  { href: '/ipns', label: 'IPNS', icon: Fingerprint },
  { href: '/peers', label: 'Peers', icon: Activity },
  { href: '/users', label: 'Users', icon: Users },
  { href: '/admin/payment', label: 'Payment Admin', icon: Shield },
  { href: '/settings', label: 'Settings', icon: Settings },
];

export default function PortalSidebar() {
  const pathname = usePathname();

  function handleDisconnect() {
    window.location.href = '/';
  }

  return (
    <aside className="fixed left-0 top-0 bottom-0 w-56 flex flex-col glass border-r border-surface-800 z-50">
      {/* Logo */}
      <div className="flex items-center gap-2.5 px-5 h-14 border-b border-surface-800 shrink-0">
        <div className="w-7 h-7 rounded-lg bg-gradient-to-br from-brand-500 to-accent-purple flex items-center justify-center text-xs font-bold text-white">
          M
        </div>
        <span className="text-sm font-semibold text-white">IPFS Portal</span>
      </div>

      {/* Nav */}
      <nav className="flex-1 p-3 space-y-1 overflow-y-auto">
        {NAV_ITEMS.map((item) => {
          const active = pathname === item.href;
          return (
            <Link
              key={item.href}
              href={item.href}
              className={`flex items-center gap-3 px-3 py-2 rounded-lg text-sm transition-all duration-150 ${
                active
                  ? 'bg-brand-500/10 text-brand-400 border border-brand-500/20'
                  : 'text-surface-400 hover:text-surface-200 hover:bg-surface-800/50 border border-transparent'
              }`}
            >
              <item.icon className="w-4 h-4 shrink-0" />
              {item.label}
            </Link>
          );
        })}
      </nav>

      {/* Disconnect */}
      <div className="p-3 border-t border-surface-800">
        <button
          onClick={handleDisconnect}
          className="flex items-center gap-3 w-full px-3 py-2 rounded-lg text-sm text-surface-500 hover:text-accent-rose hover:bg-accent-rose/5 transition-all duration-150"
        >
          <LogOut className="w-4 h-4 shrink-0" />
          Disconnect
        </button>
      </div>
    </aside>
  );
}