import { useNavigate } from "react-router-dom";
import { Link, Outlet, useLocation } from "react-router-dom";
import { AppShell } from "@eden/ui";
import type { AppShellNavItem } from "@eden/ui";
import { useAuth } from "../lib/auth/AuthContext.js";

/** `href === "/"` only matches the exact dashboard path — every other item matches by exact path or a `/` prefix boundary (so `/companies` never lights up for `/companies-other`). */
function isNavItemActive(href: string, pathname: string): boolean {
  if (href === "/") return pathname === "/";
  return pathname === href || pathname.startsWith(`${href}/`);
}

export function AuthenticatedLayout() {
  const { user, logout } = useAuth();
  const navigate = useNavigate();
  const location = useLocation();

  const navItems: AppShellNavItem[] = [
    { key: "dashboard", label: "Painel", href: "/" },
    { key: "companies", label: "Empresas", href: "/companies" },
    { key: "products", label: "Produtos", href: "/products" },
    { key: "resellers", label: "Revendas", href: "/resellers" },
    { key: "leads", label: "CRM", href: "/leads" },
    { key: "quotes", label: "Ofertas", href: "/quotes" },
    { key: "client-registrations", label: "Clientes", href: "/client-registrations" },
    { key: "contracts", label: "Contratos", href: "/contracts" },
  ].map((item) => ({ ...item, active: isNavItemActive(item.href, location.pathname) }));

  async function handleLogout() {
    await logout();
    navigate("/login", { replace: true });
  }

  return (
    <AppShell
      appName="EDEN Core"
      logoSrc="/eden-logo-horizontal.png"
      navItems={navItems}
      userName={user?.fullName ?? user?.email}
      userRole={user?.roleKey}
      onLogout={handleLogout}
      LinkComponent={({ href, className, children }) => (
        <Link to={href} className={className}>
          {children}
        </Link>
      )}
    >
      <Outlet />
    </AppShell>
  );
}