import { NavLink } from 'react-router-dom'
import {
  LayoutDashboard,
  ScanLine,
  Users,
  Wallet,
  BookOpenText,
  Gavel,
  HeartHandshake,
  ShieldCheck,
  Megaphone,
  MessageSquareWarning,
  UserCog,
  Scale,
  GitBranch,
  Briefcase,
  X
} from 'lucide-react'

const NAV_GROUPS = [
  {
    label: 'Overview',
    items: [{ to: '/', label: 'Dashboard', icon: LayoutDashboard }]
  },
  {
    label: 'Identity & Members',
    items: [
      { to: '/nfc-cards', label: 'NFC Smart Cards', icon: ScanLine },
      { to: '/members', label: 'Member Management', icon: Users },
      { to: '/directory', label: 'Advocate Directory', icon: BookOpenText },
      { to: '/chambers', label: 'Chamber Hierarchy', icon: GitBranch }
    ]
  },
  {
    label: 'Finance & Welfare',
    items: [
      { to: '/fees', label: 'Fee Management', icon: Wallet },
      { to: '/welfare', label: 'Welfare Schemes', icon: HeartHandshake },
      { to: '/insurance', label: 'Insurance', icon: ShieldCheck }
    ]
  },
  {
    label: 'Governance',
    items: [
      { to: '/committees', label: 'Committees', icon: Gavel },
      { to: '/notices', label: 'Notice Board', icon: Megaphone },
      { to: '/grievances', label: 'Grievances', icon: MessageSquareWarning },
      { to: '/legal-aid', label: 'Legal Aid Cell', icon: Scale }
    ]
  },
  {
    label: 'Operations',
    items: [
      { to: '/staff', label: 'Staff Management', icon: UserCog },
      { to: '/employment', label: 'Employment Exchange', icon: Briefcase }
    ]
  }
]

export default function Sidebar({ open, onClose }) {
  return (
    <>
      {open && (
        <div onClick={onClose} className="fixed inset-0 z-30 bg-ink/40 lg:hidden" />
      )}

      <aside
        className={`fixed inset-y-0 left-0 z-40 w-72 shrink-0 transform overflow-y-auto bg-slate-900 transition-transform lg:static lg:translate-x-0 ${
          open ? 'translate-x-0' : '-translate-x-full'
        }`}
      >
        <div className="flex items-center justify-between px-5 pb-4 pt-6">
          <div className="flex items-center gap-3">
            <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-gradient-to-br from-brass-400 to-brass-600 shadow-chip">
              <Scale size={20} className="text-maroon-800" strokeWidth={2.4} />
            </div>
            <div>
              <p className="font-display text-sm font-bold leading-tight text-paper">District Bar</p>
              <p className="text-[11px] uppercase tracking-wide text-slate-400">NFC Governance</p>
            </div>
          </div>
          <button onClick={onClose} className="text-slate-400 hover:text-paper lg:hidden">
            <X size={20} />
          </button>
        </div>

        <nav className="px-3 pb-8">
          {NAV_GROUPS.map(group => (
            <div key={group.label} className="mb-5">
              <p className="mb-1.5 px-3 text-[10px] font-semibold uppercase tracking-[0.14em] text-slate-500">
                {group.label}
              </p>
              <div className="space-y-0.5">
                {group.items.map(item => (
                  <NavLink
                    key={item.to}
                    to={item.to}
                    end={item.to === '/'}
                    onClick={onClose}
                    className={({ isActive }) =>
                      `flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition-colors ${
                        isActive
                          ? 'bg-maroon-600/90 text-paper shadow-sm'
                          : 'text-slate-300 hover:bg-slate-800 hover:text-paper'
                      }`
                    }
                  >
                    <item.icon size={17} strokeWidth={2} />
                    {item.label}
                  </NavLink>
                ))}
              </div>
            </div>
          ))}
        </nav>

        <div className="mx-3 mb-6 rounded-lg border border-slate-700/60 bg-slate-800/60 p-3.5">
          <p className="text-xs font-semibold text-paper">Chamber ID: SIT-BAR-CH-001</p>
          <p className="mt-0.5 text-[11px] text-slate-400">Signed in as Bar Admin Console</p>
        </div>
      </aside>
    </>
  )
}
