'use client';

import React from 'react';
import Link from 'next/link';
import Image from 'next/image';
import { ShoppingBag, Search, MapPin, Zap, Sparkles, ShieldCheck, Store, User as UserIcon } from 'lucide-react';
import { City } from '@/types';
import { useBrand } from '@/context/BrandContext';
import { useAuth } from '@/context/AuthContext';

interface NavbarProps {
  cartCount: number;
  onOpenCart: () => void;
  selectedCity: City;
  onOpenCitySelector: () => void;
  searchQuery: string;
  onSearchChange: (q: string) => void;
}

export const Navbar: React.FC<NavbarProps> = ({
  cartCount,
  onOpenCart,
  selectedCity,
  onOpenCitySelector,
  searchQuery,
  onSearchChange,
}) => {
  const { currentBrand } = useBrand();
  const { user, openAuthModal } = useAuth();

  return (
    <header className={`sticky top-0 z-40 backdrop-blur-xl border-b ${currentBrand.colors.headerBg}`}>
      {/* Top Banner Urgency */}
      <div className={`bg-gradient-to-r ${currentBrand.colors.primaryGradient} text-white text-xs font-bold py-1.5 px-3 shadow-xs`}>
        <div className="max-w-7xl mx-auto flex items-center justify-between">
          <div className="flex items-center space-x-2">
            <Sparkles className="w-4 h-4 text-white animate-pulse" />
            <span>🔥 ENVÍOS CONTRAENTREGA EN {selectedCity.name.toUpperCase()} Y TODO COLOMBIA</span>
          </div>
          <div className="hidden sm:flex items-center space-x-3 text-white/95">
            <span className="flex items-center">
              <Zap className="w-3.5 h-3.5 mr-1" />
              Separa tu par con solo $10.000 COP
            </span>
            <span>•</span>
            <span className="flex items-center">
              <ShieldCheck className="w-3.5 h-3.5 mr-1 text-emerald-400" />
              {selectedCity.firstExchangeFree
                ? `1er Cambio GRATIS en ${selectedCity.name}`
                : `Garantía de Cambio (${selectedCity.name})`}
            </span>
          </div>
        </div>
      </div>

      {/* Main Navbar */}
      <div className="max-w-7xl mx-auto px-4 py-3 flex items-center justify-between gap-3">
        {/* Brand Logo Fusion */}
        <Link href="/" className="flex items-center space-x-3 shrink-0 group">
          <div className="relative w-12 h-12 rounded-2xl overflow-hidden border border-purple-500/40 shadow-[0_0_20px_rgba(168,85,247,0.45)] group-hover:scale-105 group-hover:border-purple-400 transition-all duration-300 bg-neutral-950 flex items-center justify-center p-0.5">
            <Image
              src="/d-emblem.png"
              alt="DripZone Emblem"
              width={48}
              height={48}
              priority
              className="object-cover w-full h-full rounded-xl"
            />
          </div>
          <div>
            <div className="flex items-center space-x-1">
              <span className="font-black text-xl tracking-tight text-white">DRIP</span>
              <span className={`font-black text-xl tracking-tight text-transparent bg-clip-text bg-gradient-to-r ${currentBrand.colors.primaryGradient}`}>
                ZONE
              </span>
            </div>
            <p className="text-[10px] text-neutral-400 uppercase tracking-widest font-bold -mt-0.5">{currentBrand.tagline}</p>
          </div>
        </Link>

        {/* City Selector Pill */}
        <button
          onClick={onOpenCitySelector}
          className={`hidden md:flex items-center space-x-1.5 bg-neutral-900/80 hover:bg-neutral-800 text-neutral-200 text-xs font-semibold px-3.5 py-2 rounded-full border ${currentBrand.colors.border} transition-all cursor-pointer`}
        >
          <MapPin className="w-3.5 h-3.5 text-purple-400" />
          <span>Entrega en: <strong className="text-white underline">{selectedCity.name}</strong></span>
          <span className="text-[10px] bg-white/10 px-1.5 py-0.5 rounded-full font-bold">
            {selectedCity.shippingCost === 0 ? 'Gratis' : `$${selectedCity.shippingCost.toLocaleString()}`}
          </span>
        </button>

        {/* Search Bar */}
        <div className="flex-1 max-w-md relative">
          <div className="relative">
            <input
              type="text"
              placeholder="Buscar Nike, Jordan, Campus, tallas..."
              value={searchQuery}
              onChange={(e) => onSearchChange(e.target.value)}
              className="w-full bg-neutral-900/90 text-white placeholder-neutral-400 text-xs sm:text-sm rounded-full pl-10 pr-4 py-2 border border-neutral-700 focus:border-purple-400 focus:ring-2 focus:ring-purple-500/20 transition-all outline-hidden"
            />
            <Search className="w-4 h-4 text-neutral-400 absolute left-3.5 top-1/2 -translate-y-1/2" />
          </div>
        </div>

        {/* Right Actions */}
        <div className="flex items-center space-x-2 shrink-0">
          {/* User Auth Button */}
          <button
            onClick={openAuthModal}
            className="flex items-center space-x-1.5 text-xs font-bold text-neutral-200 bg-neutral-900/90 hover:bg-neutral-800 px-3 py-2 rounded-full border border-neutral-700 transition-all cursor-pointer"
          >
            {user ? (
              <>
                <div className={`w-5 h-5 rounded-full bg-gradient-to-br ${currentBrand.colors.primaryGradient} text-white font-black text-[10px] flex items-center justify-center`}>
                  {user.name.charAt(0).toUpperCase()}
                </div>
                <span className="hidden sm:inline">{user.name.split(' ')[0]}</span>
              </>
            ) : (
              <>
                <UserIcon className="w-4 h-4 text-purple-400" />
                <span className="hidden sm:inline">Ingresar</span>
              </>
            )}
          </button>

          {/* Admin Link - Solo para Administradores */}
          {user && (user.role === 'admin' || user.role === 'operator') && (
            <Link
              href="/admin"
              className="hidden sm:flex items-center space-x-1 text-xs font-semibold text-neutral-300 hover:text-purple-400 bg-neutral-900/80 hover:bg-neutral-800 px-3 py-2 rounded-full border border-neutral-700 transition-all"
              title="Panel de Administración"
            >
              <Store className="w-4 h-4 text-purple-400" />
              <span className="hidden lg:inline">Admin</span>
            </Link>
          )}

          {/* Cart Button */}
          <button
            onClick={onOpenCart}
            className={`relative bg-gradient-to-r ${currentBrand.colors.primaryGradient} text-white font-bold text-xs sm:text-sm px-4 py-2 rounded-full flex items-center space-x-2 ${currentBrand.colors.accentGlow} hover:scale-105 active:scale-95 transition-all cursor-pointer`}
          >
            <ShoppingBag className="w-4 h-4" />
            <span className="hidden sm:inline">Carrito</span>
            {cartCount > 0 && (
              <span className={`font-black text-xs px-2 py-0.5 rounded-full shadow-md animate-bounce ${currentBrand.colors.cartBadge}`}>
                {cartCount}
              </span>
            )}
          </button>
        </div>
      </div>
    </header>
  );
};