'use client';

import Link from 'next/link';
import { usePathname, useRouter } from 'next/navigation';
import Cookies from 'js-cookie';
import { Fragment, memo, useCallback, useMemo, useRef, useState } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { useUI } from '@/components/ui-context';
import { useAuth, clearMenuCache, type MenuNode } from '@/components/auth-context';

interface SubMenuItem {
  label: string;
  href: string;
  permission?: string; // if set, only shown when user has this permission
}

interface NavItem {
  label: string;
  href: string;
  icon: React.ReactNode;
  enabled: boolean;
  permission?: string;
  adminOnly?: boolean;
  subMenu?: SubMenuItem[];
}

// ─── Submenu wrapper ──────────────────────────────────────────────────────────
// Expanded sidebar  → click to toggle inline submenu
// Collapsed sidebar → hover to show floating flyout panel

const NavItemWrapper = memo(function NavItemWrapper({
  item,
  sidebarOpen,
  isActive,
  pathname,
  closeOnMobile,
}: {
  item: NavItem;
  sidebarOpen: boolean;
  isActive: boolean;
  pathname: string;
  closeOnMobile: () => void;
}) {
  const [clickOpen, setClickOpen] = useState(false);
  const [hoverOpen, setHoverOpen] = useState(false);
  const [hoverTop, setHoverTop] = useState(0);

  const wrapperRef = useRef<HTMLDivElement>(null);
  const hoverCloseTimer = useRef<ReturnType<typeof setTimeout> | null>(null);

  const openHover = () => {
    if (hoverCloseTimer.current) clearTimeout(hoverCloseTimer.current);
    setHoverTop(wrapperRef.current?.getBoundingClientRect().top ?? 0);
    setHoverOpen(true);
  };
  const scheduleCloseHover = () => {
    hoverCloseTimer.current = setTimeout(() => setHoverOpen(false), 180);
  };

  const collapsedHoverProps = !sidebarOpen
    ? { onMouseEnter: openHover, onMouseLeave: scheduleCloseHover }
    : {};

  const isSubActive = (sub: SubMenuItem) =>
    pathname === sub.href || pathname.startsWith(`${sub.href}/`);
  const isParentActive = item.subMenu?.some(isSubActive) ?? false;
  const shouldOpen = sidebarOpen && (clickOpen || isParentActive || isActive);
  const parentActive = isActive || isParentActive;

  return (
    <div ref={wrapperRef} className="relative" {...collapsedHoverProps}>
      {/* Parent nav button */}
      <button
        onClick={sidebarOpen ? (e) => { e.preventDefault(); setClickOpen((v) => !v); } : undefined}
        className={`w-full flex items-center rounded-none text-[13px] font-medium transition duration-200 ${sidebarOpen ? 'gap-3 px-4 py-2.5' : 'justify-center py-2.5'
          } ${parentActive || shouldOpen
            ? 'bg-white/15 text-white'
            : 'text-[#abb9e8] hover:text-white hover:bg-white/10'
          }`}
        title={!sidebarOpen ? item.label : undefined}
      >
        {item.icon}
        {sidebarOpen && (
          <>
            <span className="flex-1 text-left">{item.label}</span>
            <svg
              className={`w-3.5 h-3.5 shrink-0 transition-transform duration-200 ${shouldOpen ? 'rotate-180' : ''}`}
              fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}
            >
              <path strokeLinecap="round" strokeLinejoin="round" d="M19 9l-7 7-7-7" />
            </svg>
          </>
        )}
      </button>

      {/* Inline submenu — expanded sidebar */}
      <AnimatePresence initial={false}>
        {shouldOpen && item.subMenu && (
          <motion.div
            initial={{ height: 0, opacity: 0 }}
            animate={{ height: 'auto', opacity: 1 }}
            exit={{ height: 0, opacity: 0 }}
            transition={{ duration: 0.22, ease: [0.4, 0, 0.2, 1] }}
            className="overflow-hidden"
          >
            <div className="mt-0.5 ml-3 pl-3 border-l-2 border-white/15 py-1 space-y-0.5">
              {item.subMenu.map((sub, i) => (
                <Link
                  key={i}
                  href={sub.href}
                  onClick={() => { closeOnMobile(); setClickOpen(false); }}
                  className={`flex items-center gap-2 px-3 py-2 rounded-none text-xs font-medium transition-all duration-150 ${isSubActive(sub)
                    ? 'bg-white/15 text-white'
                    : 'text-[#9aa8d8] hover:text-white hover:bg-white/10'
                    }`}
                >
                  <span className="w-1 h-1 rounded-full bg-current shrink-0" />
                  {sub.label}
                </Link>
              ))}
            </div>
          </motion.div>
        )}
      </AnimatePresence>

      {/* Floating flyout — collapsed sidebar, hover-triggered */}
      <AnimatePresence>
        {hoverOpen && !sidebarOpen && item.subMenu && (
          <motion.div
            initial={{ opacity: 0, x: -8 }}
            animate={{ opacity: 1, x: 0 }}
            exit={{ opacity: 0, x: -8 }}
            transition={{ duration: 0.2, ease: [0.4, 0, 0.2, 1] }}
            onMouseEnter={openHover}
            onMouseLeave={scheduleCloseHover}
            className="fixed left-[68px] z-[200] bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-700 rounded-none shadow-2xl py-2 w-[260px]"
            style={{ top: hoverTop }}
          >
            <div className="px-4 pb-2 pt-1 border-b border-slate-100 dark:border-slate-800 mb-1">
              <p className="text-xs font-black uppercase tracking-widest text-indigo-500 dark:text-indigo-400">
                {item.label}
              </p>
            </div>
            {item.subMenu.map((sub, i) => (
              <Link
                key={i}
                href={sub.href}
                onClick={() => { closeOnMobile(); setHoverOpen(false); }}
                className={`flex items-center gap-3 px-4 py-2.5 text-sm font-medium transition-colors duration-150 ${pathname === sub.href
                  ? 'bg-indigo-50 dark:bg-indigo-950/60 text-indigo-600 dark:text-indigo-400'
                  : 'text-slate-700 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-800/60 hover:text-slate-900 dark:hover:text-white'
                  }`}
              >
                <span className={`w-1.5 h-1.5 rounded-full shrink-0 ${pathname === sub.href ? 'bg-indigo-500' : 'bg-slate-300 dark:bg-slate-600'
                  }`} />
                {sub.label}
              </Link>
            ))}
          </motion.div>
        )}
      </AnimatePresence>
    </div>
  );
});

// ─── Sidebar ──────────────────────────────────────────────────────────────────

export default function Sidebar() {
  const pathname = usePathname();
  const router = useRouter();
  const { sidebarOpen, setSidebarOpen } = useUI();
  const { menus, menusLoading } = useAuth();

  const handleLogout = () => {
    clearMenuCache();   // don't leak the previous user's menu tree into the next session
    Cookies.remove('access_token');
    Cookies.remove('refresh_token');
    router.push('/login');
  };

  // Stable identity so the memoized NavItemWrapper isn't invalidated every render.
  const closeOnMobile = useCallback(() => {
    if (window.matchMedia('(max-width: 767px)').matches) setSidebarOpen(false);
  }, [setSidebarOpen]);

  // Menu tree comes from the AuthProvider (fetched once per session from
  // GET /menus/, already filtered for this user's permissions).
  const visibleItems = useMemo<NavItem[]>(() => {
    const toNavItem = (node: MenuNode): NavItem => {
      const children = node.children ?? [];
      return {
        label: node.name,
        href: node.route || '#',
        icon: <i className={`${node.icon || 'fa-solid fa-circle'} fa-fw text-lg`}></i>,
        enabled: true,
        subMenu: children.length
          ? children.map((c) => ({ label: c.name, href: c.route || '#' }))
          : undefined,
      };
    };
    return menus.map(toNavItem);
  }, [menus]);

  return (
    <>
      {/* In-flow spacer (desktop only) */}
      <div
        className={`hidden md:block shrink-0 transition-all duration-300 ${sidebarOpen ? 'w-64' : 'w-16'}`}
        aria-hidden
      />

      {/* Mobile backdrop */}
      {sidebarOpen && (
        <div
          className="md:hidden fixed inset-0 bg-slate-950/60 backdrop-blur-sm z-40"
          onClick={() => setSidebarOpen(false)}
        />
      )}

      <aside
        className={`fixed top-0 left-0 h-screen bg-[#405189] border-r border-black/10 flex flex-col justify-between z-50 transition-all duration-300 ${sidebarOpen ? 'w-64 translate-x-0' : 'w-16 -translate-x-full md:translate-x-0'
          }`}
      >
        {/* Branding */}
        <div className="min-h-0 flex-1 flex flex-col">
          <div className="border-b border-white/10 flex items-center justify-center transition-all duration-300 min-h-[70px] px-4">
            <Link
              href="/dashboard"
              onClick={closeOnMobile}
              className="text-xl font-bold tracking-widest uppercase text-white hover:opacity-80 transition text-center"
              title="Go to Dashboard"
            >
              {sidebarOpen ? 'ATS Dashboard' : 'ATS'}
            </Link>
          </div>

          {/* Navigation */}
          <nav className={`py-6 space-y-1.5 overflow-y-auto custom-scrollbar transition-all duration-300 relative ${sidebarOpen ? 'px-4' : 'px-2'}`}>
            {/* Cold start only: nothing cached yet and the tree is still loading.
                On every later load the cached tree paints immediately instead. */}
            {menusLoading && visibleItems.length === 0 && (
              <div className="space-y-1.5" aria-hidden>
                {Array.from({ length: 6 }).map((_, i) => (
                  <div
                    key={i}
                    className={`h-9 rounded-none bg-white/10 animate-pulse ${sidebarOpen ? '' : 'mx-1'}`}
                  />
                ))}
              </div>
            )}
            {visibleItems.map((item, idx) => {
              const isActive = pathname === item.href;

              let node: React.ReactNode;
              if (!item.enabled) {
                node = (
                  <div
                    className={`flex items-center rounded-none text-slate-400 dark:text-slate-600 cursor-not-allowed select-none text-sm font-semibold transition duration-200 ${sidebarOpen ? 'px-4 py-3 justify-between' : 'py-3 justify-center'
                      }`}
                    title={`${item.label} (Coming Soon)`}
                  >
                    <div className={`flex items-center ${sidebarOpen ? 'gap-3' : 'justify-center'}`}>
                      {item.icon}
                      {sidebarOpen && <span>{item.label}</span>}
                    </div>
                    {sidebarOpen && (
                      <span className="text-[10px] tracking-wider uppercase bg-slate-200 dark:bg-slate-950 px-1.5 py-0.5 rounded-none text-slate-500 border border-slate-300 dark:border-slate-800 animate-in fade-in duration-200">
                        Soon
                      </span>
                    )}
                  </div>
                );
              } else if (item.subMenu) {
                node = (
                  <NavItemWrapper
                    item={item}
                    sidebarOpen={sidebarOpen}
                    isActive={isActive}
                    pathname={pathname}
                    closeOnMobile={closeOnMobile}
                  />
                );
              } else {
                node = (
                  <Link
                    href={item.href}
                    onClick={closeOnMobile}
                    className={`flex items-center rounded-none text-[13px] font-medium transition duration-200 ${sidebarOpen ? 'gap-3 px-4 py-2.5' : 'justify-center py-2.5'
                      } ${isActive
                        ? 'bg-white/15 text-white'
                        : 'text-[#abb9e8] hover:text-white hover:bg-white/10'
                      }`}
                    title={!sidebarOpen ? item.label : undefined}
                  >
                    {item.icon}
                    {sidebarOpen && <span>{item.label}</span>}
                  </Link>
                );
              }

              return <Fragment key={idx}>{node}</Fragment>;
            })}
          </nav>
        </div>

        {/* Sign Out */}
        <div className={`border-t border-white/10 shrink-0 transition-all duration-300 ${sidebarOpen ? 'p-4' : 'p-2'
          }`}>
          <button
            onClick={handleLogout}
            className={`w-full flex items-center justify-center rounded-none text-[13px] font-medium bg-white/5 hover:bg-white/15 border border-white/10 text-[#abb9e8] hover:text-white transition duration-200 cursor-pointer ${sidebarOpen ? 'gap-2 px-4 py-2.5' : 'py-2.5'
              }`}
            title={!sidebarOpen ? 'Sign Out' : undefined}
          >
            <span className="w-4 h-4 flex items-center justify-center">
              <i className="fa-solid fa-right-from-bracket text-xs"></i>
            </span>
            {sidebarOpen && <span>Sign Out</span>}
          </button>
        </div>
      </aside>
    </>
  );
}