"use client";

import Link from "next/link";
import { Home, LayoutGrid, MessageSquare, Search, ShoppingBag } from "lucide-react";
import { getReadableTextColor } from "@/lib/color-contrast";
import { useCart } from "@/context/CartContext";
import { useEffect, useState } from "react";

type CatalogMobileBottomNavProps = {
  slug: string;
  primaryColor: string;
  categoriesHref: string;
  whatsappDigits?: string;
  isSearchActive?: boolean;
  isCategoriesActive?: boolean;
  onHomeClick?: () => void;
  onSearchClick?: () => void;
  onCategoriesClick?: () => void;
};

export default function CatalogMobileBottomNav({
  slug,
  primaryColor,
  categoriesHref,
  whatsappDigits,
  isSearchActive = false,
  isCategoriesActive = false,
  onHomeClick,
  onSearchClick,
  onCategoriesClick,
}: CatalogMobileBottomNavProps) {
  const { toggleCart, cartCount, items } = useCart();
  const [mounted, setMounted] = useState(false);
  const primaryTextColor = getReadableTextColor(primaryColor);

  useEffect(() => {
    // eslint-disable-next-line react-hooks/set-state-in-effect
    setMounted(true);
  }, []);

  const showMobileCartBadge = mounted && Number(cartCount) > 0 && items.length > 0;

  return (
    <div className="md:hidden fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 z-[60] pb-[env(safe-area-inset-bottom)]">
      <div className="flex items-center justify-around h-16 px-2 relative">
        <Link
          href={`/${slug}`}
          onClick={onHomeClick}
          className="flex flex-col items-center justify-center w-14 gap-1 text-gray-500 hover:text-gray-900 group"
        >
          <Home strokeWidth={2.5} size={22} className="group-hover:scale-110 transition-transform" />
          <span className="text-[10px] font-medium">Início</span>
        </Link>

        {onSearchClick ? (
          <button
            onClick={onSearchClick}
            className={`flex flex-col items-center justify-center w-14 gap-1 group ${isSearchActive ? "text-gray-900 font-bold" : "text-gray-500 hover:text-gray-900"}`}
          >
            <Search strokeWidth={2.5} size={22} className="group-hover:scale-110 transition-transform" />
            <span className="text-[10px] font-medium">Busca</span>
          </button>
        ) : (
          <Link href={`/${slug}`} className="flex flex-col items-center justify-center w-14 gap-1 text-gray-500 hover:text-gray-900 group">
            <Search strokeWidth={2.5} size={22} className="group-hover:scale-110 transition-transform" />
            <span className="text-[10px] font-medium">Busca</span>
          </Link>
        )}

        <div className="relative -top-5">
          <button
            onClick={toggleCart}
            className="flex items-center justify-center w-14 h-14 rounded-full shadow-xl border-4 border-gray-50 transition-transform active:scale-95 relative"
            style={{ backgroundColor: primaryColor, color: primaryTextColor }}
          >
            <ShoppingBag size={24} strokeWidth={2.5} />
            {showMobileCartBadge && (
              <span className="absolute -top-1 -right-1 bg-red-500 text-white text-[10px] font-bold w-5 h-5 flex items-center justify-center rounded-full border-2 border-white">
                {cartCount}
              </span>
            )}
          </button>
          <span className="absolute -bottom-5 left-1/2 -translate-x-1/2 text-[10px] font-bold text-gray-500 w-full text-center">Carrinho</span>
        </div>

        {onCategoriesClick ? (
          <button
            onClick={onCategoriesClick}
            className={`flex flex-col items-center justify-center w-14 gap-1 group ${isCategoriesActive ? "text-gray-900 font-bold" : "text-gray-500 hover:text-gray-900"}`}
          >
            <LayoutGrid strokeWidth={2.5} size={22} className="group-hover:scale-110 transition-transform" />
            <span className="text-[10px] font-medium">Categorias</span>
          </button>
        ) : (
          <Link href={categoriesHref} className="flex flex-col items-center justify-center w-14 gap-1 text-gray-500 hover:text-gray-900 group">
            <LayoutGrid strokeWidth={2.5} size={22} className="group-hover:scale-110 transition-transform" />
            <span className="text-[10px] font-medium">Categorias</span>
          </Link>
        )}

        {whatsappDigits ? (
          <a
            href={`https://wa.me/${whatsappDigits}`}
            target="_blank"
            rel="noopener noreferrer"
            className="flex flex-col items-center justify-center w-14 gap-1 text-gray-500 hover:text-green-600 group"
          >
            <MessageSquare strokeWidth={2.5} size={22} className="group-hover:scale-110 transition-transform" />
            <span className="text-[10px] font-medium">Contato</span>
          </a>
        ) : (
          <div className="w-14" />
        )}
      </div>
    </div>
  );
}