'use client';

import Link from 'next/link';
import { useState } from 'react';
import { Menu, X } from 'lucide-react';

const NAV_ITEMS: Array<{ href: string; label: string }> = [
  { href: '/admin/dashboard', label: 'Dashboard' },
  { href: '/admin/users', label: 'Users' },
  { href: '/admin/wallet-management', label: 'Wallet Management' },
  { href: '/admin/orders', label: 'Orders' },
  { href: '/admin/transactions', label: 'Transactions' },
  { href: '/admin/support-tickets', label: 'Support Tickets' },
  { href: '/admin/commission-management', label: 'Commission Management' },
  { href: '/admin/analytics', label: 'Analytics' },
  { href: '/admin/roles', label: 'Roles & Permissions' },
  { href: '/admin/settings', label: 'Settings' },
  { href: '/admin/notifications', label: 'Notifications' },
  { href: '/admin/announcements', label: 'Announcements' },
  { href: '/admin/logs', label: 'Logs' },
  { href: '/admin/backup', label: 'Backup Dashboard' },
  { href: '/admin/backup/history', label: 'Backup History' },
  { href: '/admin/backup/restore', label: 'Restore' },
  { href: '/admin/backup/verification', label: 'Verification' },
];

export function AdminSidebar({ 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-white/5 md:block">
        <div className="sticky top-0 h-[calc(100vh)] overflow-y-auto p-4">
          <div className="mb-4 text-xs font-semibold text-slate-300">Admin Console</div>
          <nav className="flex flex-col gap-1">
            {NAV_ITEMS.map((item) => (
              <Link
                key={item.href}
                href={item.href}
                className="rounded-lg px-3 py-2 text-sm text-slate-300 hover:bg-white/5 hover:text-slate-100"
              >
                {item.label}
              </Link>
            ))}
          </nav>
        </div>
      </aside>

      {/* Mobile header toggle */}
      <div className="fixed top-4 left-4 z-50 md:hidden">
        <button
          onClick={open}
          className="flex h-10 w-10 items-center justify-center rounded-lg bg-slate-800 text-white shadow-lg border border-white/10"
          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-slate-900 p-4 shadow-xl border-r border-white/10">
            <div className="mb-4 flex items-center justify-between">
              <span className="text-sm font-semibold text-white">Admin Console</span>
              <button
                onClick={close}
                className="rounded-lg p-1.5 text-slate-400 hover:text-white hover:bg-white/10"
                aria-label="Close menu"
              >
                <X className="h-5 w-5" />
              </button>
            </div>
            <nav className="flex flex-col gap-1">
              {NAV_ITEMS.map((item) => (
                <Link
                  key={item.href}
                  href={item.href}
                  onClick={close}
                  className="rounded-lg px-3 py-2 text-sm text-slate-300 hover:bg-white/5 hover:text-slate-100"
                >
                  {item.label}
                </Link>
              ))}
            </nav>
          </div>
        </div>
      )}
    </>
  );
}