"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import { signOut } from "next-auth/react";
import {
  School,
  ShoppingCart,
  Home,
  ClipboardList,
  LogOut,
} from "lucide-react";
import { cn } from "@/lib/utils";
import { useCarrinho } from "@/lib/carrinho-store";

export function LojaNav({ usuario }: { usuario: any }) {
  const pathname = usePathname();
  const totalItens = useCarrinho((s) => s.totalItens());

  return (
    <>
      {/* Top bar */}
      <header className="bg-primary-800 text-white sticky top-0 z-40 shadow-sm safe-top">
        <div className="max-w-2xl mx-auto px-4 h-14 flex items-center justify-between">
          <div className="flex items-center gap-2">
            <School size={20} />
            <span className="font-bold">Loja Escolar</span>
          </div>
          <div className="flex items-center gap-3">
            <span className="text-primary-200 text-sm hidden sm:block">
              {usuario?.name?.split(" ")[0]}
            </span>
            <button
              onClick={() => signOut({ callbackUrl: "/auth/responsavel" })}
              className="text-primary-200 hover:text-white p-1"
            >
              <LogOut size={18} />
            </button>
          </div>
        </div>
      </header>

      {/* Bottom nav mobile */}
      <nav className="fixed bottom-0 left-0 right-0 z-40 bg-white border-t border-gray-200 safe-bottom">
        <div className="max-w-2xl mx-auto grid grid-cols-3">
          {[
            { href: "/loja", label: "Loja", Icon: Home },
            {
              href: "/loja/carrinho",
              label: "Carrinho",
              Icon: ShoppingCart,
              badge: totalItens,
            },
            { href: "/loja/pedidos", label: "Pedidos", Icon: ClipboardList },
          ].map(({ href, label, Icon, badge }) => {
            const ativo =
              href === "/loja" ? pathname === "/loja" : pathname.startsWith(href);
            return (
              <Link
                key={href}
                href={href}
                className={cn(
                  "flex flex-col items-center justify-center py-3 relative",
                  ativo ? "text-primary-700" : "text-gray-400"
                )}
              >
                <div className="relative">
                  <Icon size={22} />
                  {badge ? (
                    <span className="absolute -top-2 -right-2 bg-red-500 text-white text-[10px] font-bold w-4 h-4 rounded-full flex items-center justify-center">
                      {badge > 9 ? "9+" : badge}
                    </span>
                  ) : null}
                </div>
                <span className="text-[10px] mt-0.5 font-medium">{label}</span>
              </Link>
            );
          })}
        </div>
      </nav>
    </>
  );
}