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

const navLinks = [
  { label: "Home", href: "/" },
  { label: "Courses", href: "/courses" },
  { label: "About", href: "/about" },
  { label: "Contact", href: "/contact" },
];

/**
 * Generic branded navbar for a tenant storefront. Logo / name come from the
 * resolved tenant's branding; links are tenant-relative (so the ?tenant=
 * preview override survives navigation in dev).
 */
const TenantNavbar = () => {
  const [mobileOpen, setMobileOpen] = useState(false);
  const { url } = usePage();
  const pathname = url.split("?")[0];
  const { branding, companyName } = useTenant();
  const tenantHref = useTenantHref();
  const { user, signOut, hasRole } = useAuth();
  const { itemCount } = useCart();

  const landingRoute = user?.landing_route ?? "/admin";
  const displayName = user?.full_name?.split(" ")[0] || user?.name || user?.email?.split("@")[0];
  const brandName = companyName || "Training";

  const isActive = (href: string) => {
    const path = href.split("?")[0];
    return pathname === path || (path !== "/" && pathname.startsWith(path));
  };

  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={tenantHref("/")} className="flex items-center gap-3">
          {branding?.logo_url ? (
            <img src={branding.logo_url} alt={brandName} className="h-10 object-contain" />
          ) : (
            <div className="font-bold text-xl text-foreground">{brandName}</div>
          )}
        </Link>

        <div className="hidden lg:flex items-center gap-6">
          {navLinks.map((link) => (
            <Link
              key={link.label}
              href={tenantHref(link.href)}
              className={`text-sm transition-colors ${
                isActive(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(tenantHref("/cart"))}
            aria-label="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>
                )}
                <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-1 max-h-[70vh] overflow-y-auto">
          {navLinks.map((link) => (
            <Link
              key={link.label}
              href={tenantHref(link.href)}
              className={`block text-sm py-2 transition-colors ${
                isActive(link.href) ? "text-primary font-medium" : "text-muted-foreground hover:text-foreground"
              }`}
              onClick={() => setMobileOpen(false)}
            >
              {link.label}
            </Link>
          ))}
          <Link
            href={tenantHref("/cart")}
            className="block text-sm py-2 text-muted-foreground hover:text-foreground"
            onClick={() => setMobileOpen(false)}
          >
            Cart{itemCount > 0 ? ` (${itemCount})` : ""}
          </Link>
          <div className="border-t border-border pt-3 mt-3 flex gap-3">
            {user ? (
              <>
                <button
                  className="text-sm text-muted-foreground hover:text-foreground"
                  onClick={() => { setMobileOpen(false); router.visit(landingRoute); }}
                >
                  Dashboard
                </button>
                <button
                  className="text-sm text-destructive"
                  onClick={() => { setMobileOpen(false); signOut(); }}
                >
                  Sign Out
                </button>
              </>
            ) : (
              <>
                <Link href="/login" className="text-sm text-muted-foreground hover:text-foreground" onClick={() => setMobileOpen(false)}>
                  Login
                </Link>
                <Link href="/register" onClick={() => setMobileOpen(false)}>
                  <Button size="sm">Register</Button>
                </Link>
              </>
            )}
          </div>
        </div>
      )}
    </nav>
  );
};

export default TenantNavbar;