"use client";
import Link from "next/link";
import { usePathname, useRouter } from "next/navigation";
import { useEffect, type ReactNode } from "react";
import { understood } from "@sheikbras/domain";
import { BottomNav, Footer, Header, Sprite, Toast, UiProvider } from "@sheikbras/ui-web";
import { NAV_CATEGORIES } from "../lib/nav";
import { useStore } from "../lib/store";

const ACTIVE: Record<string, number> = { "": 0, busca: 1, categorias: 1, p: 1, carrinho: 2, checkout: 2, pedidos: 3, pedido: 3, conta: 4, favoritos: 4 };
/** Casca comum: sprite, header, navegação inferior, rodapé e toast. */
export function Shell({ children }: { children: ReactNode }) {
  const path = usePathname() ?? "/"; const router = useRouter(); const { cart, toast, notify } = useStore();
  const seg = path.split("/")[1] ?? ""; const count = cart.reduce((a, i) => a + i.q, 0);
  useEffect(() => { document.body.classList.toggle("pdp", seg === "p"); }, [seg]);
  return (
    <UiProvider Link={Link as never}>
      <Sprite />
      <Header cartCount={count} categories={NAV_CATEGORIES} onBell={() => notify("Você não tem notificações novas")}
        hrefs={{ home: "/", favorites: "/favoritos", orders: "/pedidos", cart: "/carrinho", account: "/conta", offers: "/busca?c=Ofertas", category: (c) => `/busca?c=${encodeURIComponent(c)}` }}
        search={{ recent: ["fone bluetooth", "cafeteira", "teclado mecânico"], trending: ["celular vento 256gb", "notebook gamer", "tênis de corrida", "air fryer"], understand: understood,
          hrefFor: (q) => `/busca?q=${encodeURIComponent(q)}`, onSubmit: (q) => router.push(`/busca?q=${encodeURIComponent(q)}`) }} />
      {children}
      <Footer />
      <BottomNav active={ACTIVE[seg] ?? 0} cartCount={count} ordersDot hrefs={["/", "/categorias", "/carrinho", "/pedidos", "/conta"]} />
      <Toast message={toast} />
    </UiProvider>
  );
}