'use client';

import Link from 'next/link';
import { useState, useEffect } from 'react';
import { usePathname } from 'next/navigation';
import { Menu, X } from 'lucide-react';
import { prefetchManager } from '@/lib/prefetch-manager';

const NAV_ITEMS: Array<{ href: string; label: string }> = [
  { href: '/super-admin/dashboard', label: 'System Overview' },
  { href: '/super-admin/users', label: 'All Users' },
  { href: '/super-admin/admins', label: 'Admins' },
  { href: '/super-admin/super-admins', label: 'Super Admins' },
  { href: '/super-admin/trading-rules', label: 'Trading & Commission Rules' },
  { href: '/super-admin/feature-flags', label: 'Feature Flags' },
  { href: '/super-admin/settings', label: 'System Settings' },
  { href: '/super-admin/settings/payment-addresses', label: 'Payment Addresses' },
  { href: '/super-admin/maintenance', label: 'Maintenance' },
  { href: '/super-admin/logs', label: 'Logs Dashboard' },
  { href: '/super-admin/logs/login', label: 'Login Logs' },
  { href: '/super-admin/logs/transactions', label: 'Transaction Logs' },
  { href: '/super-admin/logs/admin', label: 'Admin Logs' },
  { href: '/super-admin/logs/errors', label: 'Error Logs' },
  { href: '/super-admin/logs/system', label: 'System Logs' },
  { href: '/super-admin/logs/requests', label: 'Request Logs' },
  { href: '/super-admin/logs/search', label: 'Search Logs' },
  { href: '/super-admin/security', label: 'Security' },
  { href: '/super-admin/developer', label: 'Developer / System' },
  { href: '/super-admin/history', label: 'History' },
  { href: '/super-admin/verification-settings', label: 'Verification Settings' },
  { href: '/super-admin/backup/dashboard', label: 'Backup Dashboard' },
  { href: '/super-admin/backup/history', label: 'Backup History' },
  { href: '/super-admin/backup/manual-backup', label: 'Manual Backup' },
  { href: '/super-admin/backup/restore', label: 'Restore' },
  { href: '/super-admin/backup/verification', label: 'Verification' },
  { href: '/super-admin/backup/retention', label: 'Retention Settings' },
  { href: '/super-admin/verifications', label: 'KYC Verifications' },
  { href: '/super-admin/payment-verifications', label: 'Payment Verifications' },
  { href: '/super-admin/appeals', label: 'Appeals' },
  { href: '/super-admin/fines', label: 'Fines' },
  { href: '/super-admin/fine-settings', label: 'Fine Settings' },
  { href: '/super-admin/subscriptions', label: 'Subscriptions' },
  { href: '/super-admin/subscription-settings', label: 'Subscription Settings' },
  { href: '/super-admin/import-export', label: 'Import / Export' },
  { href: '/super-admin/email-config', label: 'Email Configuration' },
  { href: '/super-admin/terms-of-service', label: 'Terms & Privacy Policy' },
];

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

  useEffect(() => {
    setMounted(true);
  }, []);

  const isOpen = mobileOpen ?? internalOpen;

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

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

  const handleMouseEnter = (href: string) => {
    if (mounted) {
      prefetchManager.prefetchImmediate('SUPER_ADMIN', href);
    }
  };

  // Use a consistent active state for SSR and client
  const isActive = (href: string) => {
    if (!mounted) return false;
    return pathname === href;
  };

  return (
    <>
      {/* Desktop sidebar */}
      <aside className="hidden w-72 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">Super Admin</div>
          <nav className="flex flex-col gap-1">
            {NAV_ITEMS.map((item) => (
              <Link
                key={item.href}
                href={item.href}
                onMouseEnter={() => handleMouseEnter(item.href)}
                onClick={close}
                className={`rounded-lg px-3 py-2 text-sm transition-colors ${
                  isActive(item.href)
                    ? 'bg-white/10 text-slate-100'
                    : '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">Super Admin</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>
      )}
    </>
  );
}