"use client";

import React from "react";
import { useCart } from "@/context/CartContext";
import {
  Home,
  Grid,
  Heart,
  ShoppingCart,
  MessageCircle,
} from "lucide-react";

interface MobileBottomNavProps {
  onSelectCategory: (id: string) => void;
  selectedCategory: string;
}

export const MobileBottomNav: React.FC<MobileBottomNavProps> = ({
  onSelectCategory,
  selectedCategory,
}) => {
  const { totalCartItemsCount, wishlist, setIsCartOpen } = useCart();

  return (
    <div className="lg:hidden fixed bottom-0 left-0 right-0 z-40 bg-white/95 backdrop-blur-md border-t border-slate-200 shadow-2xl py-2 px-3">
      <div className="grid grid-cols-5 gap-1 text-center">
        <button
          onClick={() => {
            onSelectCategory("all");
            window.scrollTo({ top: 0, behavior: "smooth" });
          }}
          className={`flex flex-col items-center justify-center py-1 transition-colors ${
            selectedCategory === "all" ? "text-amber-600 font-extrabold" : "text-slate-600 hover:text-slate-900"
          }`}
        >
          <Home className="w-5 h-5" />
          <span className="text-[10px] mt-0.5 font-medium">Home</span>
        </button>

        <button
          onClick={() => {
            const el = document.getElementById("catalog-section");
            if (el) el.scrollIntoView({ behavior: "smooth" });
          }}
          className="flex flex-col items-center justify-center py-1 text-slate-600 hover:text-slate-900 transition-colors"
        >
          <Grid className="w-5 h-5" />
          <span className="text-[10px] mt-0.5 font-medium">Catalog</span>
        </button>

        <a
          href="https://wa.me/27712345678?text=Hi%20Diverse%20Stationery,%20I%20need%20assistance%20with%20stationery%20supplies"
          target="_blank"
          rel="noopener noreferrer"
          className="flex flex-col items-center justify-center py-1 text-emerald-600 transition-colors"
        >
          <MessageCircle className="w-5 h-5 fill-emerald-600 text-emerald-600" />
          <span className="text-[10px] mt-0.5 font-bold">WhatsApp</span>
        </a>

        <button
          onClick={() => {
            if (wishlist.length > 0) {
              alert(`You have ${wishlist.length} saved items in your wishlist!`);
            } else {
              alert("Your wishlist is empty. Tap the heart on products to save.");
            }
          }}
          className="relative flex flex-col items-center justify-center py-1 text-slate-600 hover:text-rose-600 transition-colors"
        >
          <Heart className="w-5 h-5" />
          {wishlist.length > 0 && (
            <span className="absolute top-0 right-3 bg-rose-600 text-white text-[9px] font-bold w-4 h-4 rounded-full flex items-center justify-center">
              {wishlist.length}
            </span>
          )}
          <span className="text-[10px] mt-0.5 font-medium">Wishlist</span>
        </button>

        <button
          onClick={() => setIsCartOpen(true)}
          className="relative flex flex-col items-center justify-center py-1 text-blue-950 font-bold transition-colors"
        >
          <div className="relative">
            <ShoppingCart className="w-5 h-5 text-amber-500" />
            {totalCartItemsCount > 0 && (
              <span className="absolute -top-1.5 -right-2 bg-amber-500 text-slate-950 text-[10px] font-black w-4 h-4 rounded-full flex items-center justify-center">
                {totalCartItemsCount}
              </span>
            )}
          </div>
          <span className="text-[10px] mt-0.5 font-bold text-slate-900">Cart</span>
        </button>
      </div>
    </div>
  );
};