almeira-web/dripzone-app/src/components/mobile/MobileBottomDock.tsx

'use client';

import React, { useState } from 'react';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { Home, Search, ShoppingBag, MessageCircle, User, Shield } from 'lucide-react';
import { useBrand } from '@/context/BrandContext';
import { useAuth } from '@/context/AuthContext';

interface MobileBottomDockProps {
  cartCount: number;
  onOpenCart: () => void;
  onOpenSearch?: () => void;
  onOpenInstallModal?: () => void;
}

export const MobileBottomDock: React.FC<MobileBottomDockProps> = ({
  cartCount,
  onOpenCart,
  onOpenSearch,
}) => {
  const { currentBrand } = useBrand();
  const { user, openAuthModal } = useAuth();
  const pathname = usePathname();
  const [activeTab, setActiveTab] = useState('home');

  const handleWhatsApp = () => {
    const text = encodeURIComponent(
      `Hola ${currentBrand.name}! 👋 Quiero consultar la disponibilidad de unas zapatillas para despacho contraentrega en 24 horas.`
    );
    window.open(`https://wa.me/${currentBrand.whatsappNumber}?text=${text}`, '_blank');
  };

  const isAdmin = Boolean(user && (user.role === 'admin' || user.role === 'operator'));
  const isAdminActive = pathname?.startsWith('/admin');
  const isHomeActive = pathname === '/' && activeTab === 'home';

  return (
    <nav
      aria-label="Navegación principal móvil"
      className="sm:hidden fixed bottom-0 left-0 right-0 z-40 bg-neutral-950/90 backdrop-blur-xl border-t border-neutral-800/80 px-3 py-2"
    >
      <div className="flex items-center justify-around">
        {/* 1. Inicio */}
        <Link
          href="/"
          onClick={() => setActiveTab('home')}
          className={`flex flex-col items-center gap-0.5 cursor-pointer transition-all ${
            isHomeActive ? 'text-white' : 'text-neutral-400 hover:text-neutral-200'
          }`}
        >
          <Home className={`w-5 h-5 ${isHomeActive ? 'stroke-[2.5] text-white' : ''}`} />
          <span className="text-[10px] font-bold">Inicio</span>
        </Link>

        {/* 2. Buscar */}
        <button
          onClick={() => {
            setActiveTab('search');
            if (onOpenSearch) onOpenSearch();
            else {
              window.scrollTo({ top: 350, behavior: 'smooth' });
            }
          }}
          className={`flex flex-col items-center gap-0.5 cursor-pointer transition-all ${
            activeTab === 'search' ? 'text-white' : 'text-neutral-400 hover:text-neutral-200'
          }`}
        >
          <Search className="w-5 h-5" />
          <span className="text-[10px] font-bold">Buscar</span>
        </button>

        {/* 3. Carrito */}
        <button
          onClick={() => {
            setActiveTab('cart');
            onOpenCart();
          }}
          className="relative flex flex-col items-center gap-0.5 cursor-pointer text-neutral-400 hover:text-white transition-all"
        >
          <div className="relative">
            <ShoppingBag className="w-5 h-5 text-white" />
            {cartCount > 0 && (
              <span
                className={`absolute -top-1.5 -right-2 bg-gradient-to-r ${currentBrand.colors.primaryGradient} text-white font-black text-[9px] w-4 h-4 rounded-full flex items-center justify-center shadow-md animate-pulse`}
              >
                {cartCount}
              </span>
            )}
          </div>
          <span className="text-[10px] font-bold text-white">Carrito</span>
        </button>

        {/* 4. WhatsApp */}
        <button
          onClick={handleWhatsApp}
          className="flex flex-col items-center gap-0.5 cursor-pointer text-emerald-400 hover:text-emerald-300 transition-all"
        >
          <MessageCircle className="w-5 h-5 fill-emerald-500/20" />
          <span className="text-[10px] font-bold">WhatsApp</span>
        </button>

        {/* 5. Solo Administradores: Acceso Admin | Clientes / Visitantes: Mi Cuenta / Ingresar */}
        {isAdmin ? (
          <Link
            href="/admin"
            onClick={() => setActiveTab('admin')}
            className={`flex flex-col items-center gap-0.5 cursor-pointer transition-all ${
              isAdminActive || activeTab === 'admin' ? 'text-purple-300' : 'text-neutral-400 hover:text-neutral-200'
            }`}
          >
            <Shield className={`w-5 h-5 ${isAdminActive ? 'stroke-[2.5] text-purple-400' : 'text-purple-400'}`} />
            <span className="text-[10px] font-bold">Admin</span>
          </Link>
        ) : (
          <button
            onClick={() => {
              setActiveTab('profile');
              openAuthModal();
            }}
            className="flex flex-col items-center gap-0.5 cursor-pointer text-neutral-400 hover:text-white transition-all"
          >
            <User className="w-5 h-5" />
            <span className="text-[10px] font-bold">{user ? 'Mi Cuenta' : 'Ingresar'}</span>
          </button>
        )}
      </div>
    </nav>
  );
};