"use client";

import { useEffect, useState } from "react";
import Link from "next/link";
import api from "@/lib/api";
import { getGuestToken } from "@/lib/guestToken";

import {
  Home,
  Grid3X3,
  ShoppingCart,
  Heart,
  User,
} from "lucide-react";

export default function MobileBottomNav() {
  const [cartCount, setCartCount] = useState(0);
  const [user, setUser] = useState<any>(null);

  const fetchCart = async () => {
    try {
      const res = await api.get("/cart/count", {
        params: {
          guest_token: getGuestToken(),
        },
      });

      setCartCount(res.data.count || 0);
    } catch (error) {
      console.error(error);
    }
  };

  useEffect(() => {
    fetchCart();

    const storedUser = localStorage.getItem("user");

    if (storedUser) {
      setUser(JSON.parse(storedUser));
    }

    window.addEventListener("cart-updated", fetchCart);

    return () => {
      window.removeEventListener("cart-updated", fetchCart);
    };
  }, []);

  const profileHref = user
    ? user.role === "vendor"
      ? "/vendor/dashboard"
      : "/account"
    : "/login";

  return (
    <div className="md:hidden fixed bottom-0 left-0 right-0 z-[9998] bg-white border-t border-slate-200 shadow-[0_-8px_30px_rgba(15,23,42,0.08)]">
      <div className="relative grid grid-cols-5 items-center h-16 px-2">
        <NavItem href="/" icon={<Home size={20} />} label="Home" />

        <NavItem
          href="/categories"
          icon={<Grid3X3 size={20} />}
          label="Categories"
        />

        <Link
          href="/cart"
          className="relative -mt-8 mx-auto w-16 h-16 rounded-full bg-green-600 text-white shadow-xl shadow-green-200 flex items-center justify-center"
        >
          <ShoppingCart size={28} />

          {cartCount > 0 && (
            <span className="absolute -top-1 -right-1 min-w-5 h-5 px-1 rounded-full bg-red-500 text-white text-[11px] font-black flex items-center justify-center">
              {cartCount}
            </span>
          )}
        </Link>

        <NavItem href="/wishlist" icon={<Heart size={20} />} label="Wishlist" />

        <NavItem href={profileHref} icon={<User size={20} />} label="Profile" />
      </div>
    </div>
  );
}

function NavItem({
  href,
  icon,
  label,
}: {
  href: string;
  icon: React.ReactNode;
  label: string;
}) {
  return (
    <Link
      href={href}
      className="flex flex-col items-center justify-center gap-1 text-slate-500 hover:text-green-600 text-[11px] font-black"
    >
      {icon}
      <span>{label}</span>
    </Link>
  );
}