'use client';

import React, { useState, useEffect } from 'react';
import Link from 'next/link';
import { Home, Search, ShoppingBag, MessageCircle, Download, User } from 'lucide-react';
import { useBrand } from '@/context/BrandContext';

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

export const MobileBottomDock: React.FC<MobileBottomDockProps> = ({
  cartCount,
  onOpenCart,
  onOpenSearch,
  onOpenInstallModal,
}) => {
  const { currentBrand } = useBrand();
  const [activeTab, setActiveTab] = useState('home');
  const [isInsideApp, setIsInsideApp] = useState(false);

  useEffect(() => {
    const isNativeApp =
      typeof window !== 'undefined' &&
      (!!(window as any).Capacitor?.isNativePlatform?.() ||
        (window as any).Capacitor?.getPlatform?.() === 'android' ||
        (window as any).Capacitor?.getPlatform?.() === 'ios' ||
        window.matchMedia?.('(display-mode: standalone)')?.matches ||
        (window.navigator as any)?.standalone === true);
    setIsInsideApp(isNativeApp);
  }, []);

  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');
  };

  return (
    <div className="sm:hidden fixed bottom-0 left-0 right-0 z-40 bg-zinc-950/90 backdrop-blur-xl border-t border-zinc-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 ${
            activeTab === 'home' ? 'text-white' : 'text-zinc-400 hover:text-zinc-200'
          }`}
        >
          <Home className={`w-5 h-5 ${activeTab === 'home' ? 'stroke-[2.5]' : ''}`} />
          <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-zinc-400 hover:text-zinc-200'
          }`}
        >
          <Search className="w-5 h-5" />
          <span className="text-[10px] font-bold">Buscar</span>
        </button>

        {/* 3. Carrito con Badge */}
        <button
          onClick={() => {
            setActiveTab('cart');
            onOpenCart();
          }}
          className="relative flex flex-col items-center gap-0.5 cursor-pointer text-zinc-400 hover:text-white"
        >
          <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 Asesoría */}
        <button
          onClick={handleWhatsApp}
          className="flex flex-col items-center gap-0.5 cursor-pointer text-emerald-400 hover:text-emerald-300"
        >
          <MessageCircle className="w-5 h-5 fill-emerald-500/20" />
          <span className="text-[10px] font-bold">WhatsApp</span>
        </button>

        {/* 5. App Móvil (solo en Web) vs Perfil/Admin (si ya está en la App) */}
        {!isInsideApp ? (
          <button
            onClick={onOpenInstallModal}
            className="flex flex-col items-center gap-0.5 cursor-pointer text-orange-400 hover:text-orange-300"
          >
            <div className="relative">
              <Download className="w-5 h-5 animate-bounce" />
            </div>
            <span className="text-[10px] font-bold">App Móvil</span>
          </button>
        ) : (
          <Link
            href="/admin"
            className="flex flex-col items-center gap-0.5 cursor-pointer text-zinc-400 hover:text-white"
          >
            <User className="w-5 h-5" />
            <span className="text-[10px] font-bold">Admin</span>
          </Link>
        )}
      </div>
    </div>
  );
};