import { useState, useRef, useEffect } from 'react';
import { Link, router, usePage } from '@inertiajs/react';
import { Menu, X, ShoppingCart, ChevronDown, LayoutDashboard, LogOut, Shield, Store, User as UserIcon } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import { useAuth } from '@/hooks/useAuth';
import { useCart } from '@/contexts/CartContext';
import { useCategories } from '@/hooks/useCategories';
import { useTrainingCourses } from '@/hooks/useTrainingCourses';
import { useTenant } from '@/contexts/TenantContext';
import TenantNavbar from '@/components/tenant/TenantNavbar';

type CourseLink = { label: string; href: string };
type NavItem = { label: string; href: string; children?: CourseLink[] };

// The "Training Courses" parent. Its submenu is built at render time from the
// admin-curated set returned by /api/nav/training-courses (see useTrainingCourses),
// distinct from the dynamic category nav items pulled from /api/categories.
const trainingCoursesBase: NavItem = { label: 'Training Courses', href: '/courses' };

const SimpleDropdown = ({ item, isActive }: { item: NavItem; isActive: boolean }) => {
  const [open, setOpen] = useState(false);
  const timeoutRef = useRef<ReturnType<typeof setTimeout>>();

  useEffect(() => () => { if (timeoutRef.current) clearTimeout(timeoutRef.current); }, []);

  const handleMouseEnter = () => { if (timeoutRef.current) clearTimeout(timeoutRef.current); setOpen(true); };
  const handleMouseLeave = () => { timeoutRef.current = setTimeout(() => setOpen(false), 150); };

  return (
    <div className="relative" onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
      <Link
        href={item.href}
        className={`inline-flex items-center gap-1 text-sm transition-colors ${
          isActive ? 'text-primary font-medium' : 'text-muted-foreground hover:text-foreground'
        }`}
      >
        {item.label}
        <ChevronDown className={`w-3.5 h-3.5 transition-transform ${open ? 'rotate-180' : ''}`} />
      </Link>

      {open && (
        <div className="absolute top-full left-0 pt-2 z-50">
          <div className="bg-card border border-border rounded-lg shadow-xl py-2 min-w-[260px] max-h-[70vh] overflow-y-auto">
            {item.children!.map((child) => (
              <Link
                key={child.href + child.label}
                href={child.href}
                onClick={() => setOpen(false)}
                className="block px-4 py-2 text-sm text-muted-foreground hover:text-foreground hover:bg-secondary/80 transition-colors"
              >
                {child.label}
              </Link>
            ))}
          </div>
        </div>
      )}
    </div>
  );
};

const MobileAccordion = ({ item, onNavigate }: { item: NavItem; onNavigate: () => void }) => {
  const [open, setOpen] = useState(false);

  return (
    <div>
      <button
        onClick={() => setOpen(!open)}
        className="flex items-center justify-between w-full text-sm text-muted-foreground hover:text-foreground transition-colors py-1"
      >
        {item.label}
        <ChevronDown className={`w-3.5 h-3.5 transition-transform ${open ? 'rotate-180' : ''}`} />
      </button>
      {open && (
        <div className="pl-4 mt-1 space-y-1 border-l border-border ml-2">
          {item.children!.map((child) => (
            <Link
              key={child.href + child.label}
              href={child.href}
              className="block text-sm text-muted-foreground hover:text-foreground transition-colors py-1"
              onClick={onNavigate}
            >
              {child.label}
            </Link>
          ))}
        </div>
      )}
    </div>
  );
};

const Navbar = () => {
  const [mobileOpen, setMobileOpen] = useState(false);
  const { url } = usePage();
  const pathname = url.split('?')[0];
  const { user, signOut, hasRole } = useAuth();
  const { itemCount } = useCart();
  const { isTenantMode } = useTenant();
  const { data: mainCategories = [] } = useCategories('main');
  const { data: navCourses = [] } = useTrainingCourses();

  // On a tenant subdomain the whole site is that tenant's storefront, so swap
  // in the branded navbar. Hooks above run unconditionally to satisfy rules-of-hooks.
  if (isTenantMode) {
    return <TenantNavbar />;
  }

  // Main categories the admin flagged for the nav (Admin → Categories →
  // "Main Menu"), shown in their saved sort_order.
  const categoryNavItems: NavItem[] = mainCategories
    .filter((c) => c.show_in_menu)
    .slice()
    .sort((a, b) => a.sort_order - b.sort_order)
    .map((c) => ({ label: c.name, href: c.href || '/courses' }));

  // Build the Training Courses submenu from the admin-curated set. When nothing
  // is selected it falls back to a plain link to the full catalog.
  const trainingChildren: CourseLink[] = navCourses.map((c) => ({
    label: c.title,
    href: `/course/${c.slug}`,
  }));
  const trainingCoursesItem: NavItem = trainingChildren.length
    ? { ...trainingCoursesBase, children: [{ label: 'All Training Courses', href: '/courses' }, ...trainingChildren] }
    : trainingCoursesBase;

  const navLinks: NavItem[] = [
    { label: 'Home', href: '/' },
    trainingCoursesItem,
    ...categoryNavItems,
    { label: 'About', href: '/about' },
    { label: 'Contact', href: '/contact' },
  ];

  const isLinkActive = (href: string) =>
    pathname === href || (href !== '/' && pathname.startsWith(href));
  const landingRoute = user?.landing_route ?? '/admin';
  const displayName = user?.full_name?.split(' ')[0] || user?.name || user?.email?.split('@')[0];

  return (
    <nav className="fixed top-0 left-0 right-0 z-50 bg-background/95 backdrop-blur-md border-b border-border">
      <div className="container mx-auto flex items-center justify-between h-16 px-4">
        <Link href="/" className="flex items-center">
          <img src="/assets/images/utc-lockup-dark.svg" alt="Utility Training Centre logo" className="h-10 w-auto" />
        </Link>

        <div className="hidden lg:flex items-center gap-6">
          {navLinks.map((link) =>
            link.children ? (
              <SimpleDropdown key={link.label} item={link} isActive={isLinkActive(link.href)} />
            ) : (
              <Link
                key={link.label}
                href={link.href}
                className={`text-sm transition-colors ${
                  isLinkActive(link.href)
                    ? 'text-primary font-medium'
                    : 'text-muted-foreground hover:text-foreground'
                }`}
              >
                {link.label}
              </Link>
            ),
          )}
        </div>

        <div className="hidden lg:flex items-center gap-3">
          <button
            className="text-muted-foreground hover:text-foreground transition-colors relative"
            onClick={() => router.visit('/cart')}
          >
            <ShoppingCart className="w-5 h-5" />
            {itemCount > 0 && (
              <Badge className="absolute -top-2 -right-2 h-4 w-4 p-0 flex items-center justify-center text-[10px]">
                {itemCount}
              </Badge>
            )}
          </button>

          {user ? (
            <DropdownMenu>
              <DropdownMenuTrigger asChild>
                <Button variant="outline" size="sm" className="gap-2">
                  <UserIcon className="w-4 h-4" />
                  <span className="max-w-[120px] truncate">{displayName}</span>
                  <ChevronDown className="w-3.5 h-3.5" />
                </Button>
              </DropdownMenuTrigger>
              <DropdownMenuContent align="end" className="w-56">
                <DropdownMenuLabel className="text-xs">
                  <div className="font-medium text-foreground truncate">{user.full_name || user.name}</div>
                  <div className="text-muted-foreground truncate font-normal">{user.email}</div>
                </DropdownMenuLabel>
                <DropdownMenuSeparator />
                <DropdownMenuItem onClick={() => router.visit(landingRoute)} className="gap-2">
                  <LayoutDashboard className="w-4 h-4" /> Dashboard
                </DropdownMenuItem>
                {hasRole('company_manager') && (
                  <DropdownMenuItem onClick={() => router.visit('/company-site')} className="gap-2">
                    <Store className="w-4 h-4" /> Storefront Settings
                  </DropdownMenuItem>
                )}
                {pathname.startsWith('/company-portal') && hasRole('company_manager') && (
                  <DropdownMenuItem onClick={() => router.visit('/admin')} className="gap-2">
                    <Shield className="w-4 h-4" /> Admin
                  </DropdownMenuItem>
                )}
                <DropdownMenuSeparator />
                <DropdownMenuItem onClick={signOut} className="gap-2 text-destructive">
                  <LogOut className="w-4 h-4" /> Sign Out
                </DropdownMenuItem>
              </DropdownMenuContent>
            </DropdownMenu>
          ) : (
            <>
              <Link href="/login" className="text-sm text-muted-foreground hover:text-foreground transition-colors">
                Login
              </Link>
              <Link href="/register">
                <Button size="sm">Register</Button>
              </Link>
            </>
          )}
        </div>

        <button className="lg:hidden text-foreground" onClick={() => setMobileOpen(!mobileOpen)}>
          {mobileOpen ? <X className="w-6 h-6" /> : <Menu className="w-6 h-6" />}
        </button>
      </div>

      {mobileOpen && (
        <div className="lg:hidden bg-background border-t border-border px-4 py-4 space-y-3 max-h-[70vh] overflow-y-auto shadow-xl">
          {navLinks.map((link) =>
            link.children ? (
              <MobileAccordion key={link.label} item={link} onNavigate={() => setMobileOpen(false)} />
            ) : (
              <Link
                key={link.label}
                href={link.href}
                className={`block text-sm py-1 transition-colors ${
                  isLinkActive(link.href)
                    ? 'text-primary font-medium'
                    : 'text-muted-foreground hover:text-foreground'
                }`}
                onClick={() => setMobileOpen(false)}
              >
                {link.label}
              </Link>
            ),
          )}
          <div className="flex gap-3 pt-3 border-t border-border">
            {user ? (
              <>
                <button
                  className="text-sm text-muted-foreground"
                  onClick={() => {
                    setMobileOpen(false);
                    router.visit(landingRoute);
                  }}
                >
                  Dashboard
                </button>
                {hasRole('company_manager') && (
                  <button
                    className="text-sm text-muted-foreground"
                    onClick={() => {
                      setMobileOpen(false);
                      router.visit('/company-site');
                    }}
                  >
                    Storefront
                  </button>
                )}
                <button
                  className="text-sm text-destructive"
                  onClick={() => {
                    setMobileOpen(false);
                    signOut();
                  }}
                >
                  Sign Out
                </button>
              </>
            ) : (
              <>
                <Link href="/login" className="text-sm text-muted-foreground" onClick={() => setMobileOpen(false)}>Login</Link>
                <Link href="/register" onClick={() => setMobileOpen(false)}>
                  <Button size="sm">Register</Button>
                </Link>
              </>
            )}
          </div>
        </div>
      )}
    </nav>
  );
};

export default Navbar;