'use client';

import React from 'react';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import {
  LayoutDashboard, Users, UserRound, Shield, Trophy, Calendar, Flame, Award,
  Wallet, FileCheck2, ScrollText, Settings, ChevronRight, Radio,
} from 'lucide-react';

const navItems = [
  { href: '/admin', label: 'Dashboard', icon: LayoutDashboard, exact: true },
  { href: '/admin/users', label: 'Users', icon: UserRound },
  { href: '/admin/players', label: 'Player Master', icon: Users },
  { href: '/admin/teams', label: 'Team Master', icon: Shield },
  { href: '/admin/scorers', label: 'Scorer Management', icon: Award },
  { href: '/admin/matches', label: 'Match Management', icon: Calendar },
  { href: '/admin/tournaments', label: 'Tournaments', icon: Trophy },
  { href: '/admin/contests', label: 'Contest & Rules', icon: Flame },
  { href: '/admin/heroes', label: 'Pick Your Heroes', icon: Award },
  { href: '/admin/wallet', label: 'Wallet & Ledger', icon: Wallet },
  { href: '/admin/kyc', label: 'KYC Approvals', icon: FileCheck2 },
  { href: '/admin/membership', label: 'Membership', icon: Award },
  { href: '/admin/cms', label: 'CMS', icon: ScrollText },
  { href: '/admin/settings', label: 'Settings', icon: Settings },
  { href: '/admin/audit', label: 'Audit Trail', icon: ScrollText },
];

export const Sidebar: React.FC = () => {
  const pathname = usePathname();
  return (
    <aside className="admin-sidebar">
      <div className="admin-sidebar-scroll">
        <div className="admin-nav-label">Admin Operations</div>
        {navItems.map((item) => {
          const Icon = item.icon;
          const isActive = item.exact ? pathname === item.href : pathname.startsWith(item.href);
          return (
            <Link key={item.href} href={item.href} className={`admin-nav-item ${isActive ? 'active' : ''}`}>
              <span className="admin-nav-icon"><Icon /></span>
              <span className="flex-1">{item.label}</span>
              {isActive && <ChevronRight className="admin-nav-arrow" />}
            </Link>
          );
        })}
      </div>
      <div className="admin-sidebar-footer">
        <div className="flex items-center gap-2 text-[10px] font-bold uppercase tracking-[0.18em] text-zinc-500">
          <Radio className="h-3 w-3 text-red-500" />
          Live Control
        </div>
        <div className="mt-1 text-xs font-semibold text-zinc-200">MY11s Admin Console</div>
        <div className="mt-1 text-[10px] text-zinc-500">Phase 1 build · WIP</div>
      </div>
    </aside>
  );
};