"use client";

import { useState, useEffect, useTransition, Suspense } from "react";
import Link from "next/link";
import Image from "next/image";
import { useRouter, usePathname, useSearchParams } from "next/navigation";
import {
  Phone, Mail, Facebook, Twitter, Linkedin, Instagram, Youtube,
  User, Grid, Search, X, ChevronDown, Menu
} from "lucide-react";

const CATEGORIAS_ICONS: Record<string, string> = {
  "Barbería y Peluquería": "✂️",
  "Belleza y Estética": "💅",
  "Repostería y Pastelería": "🎂",
  "Informática y Tecnología": "💻",
  "Diseño Gráfico": "🎨",
  "Mecánica Automotriz": "🔧",
  "Electricidad Industrial": "⚡",
  "Cocina y Gastronomía": "🍳",
  "Costura y Modistería": "🧵",
  "Idiomas": "🌐",
  "Música y Arte": "🎵",
  "Construcción y Manualidades": "🏗️",
  "Salud y Bienestar": "🏥",
  "Administración y Negocios": "📊",
  "Fotografía y Video": "📷",
};

const CATEGORIAS = Object.keys(CATEGORIAS_ICONS);

// Subcomponente que usa useSearchParams — envuelto en Suspense en Navbar
function NavbarSearchSection({ catOpen, setCatOpen, mobMenuOpen }: {
  catOpen: boolean;
  setCatOpen: (v: boolean | ((prev: boolean) => boolean)) => void;
  mobMenuOpen: boolean;
}) {
  const router = useRouter();
  const pathname = usePathname();
  const searchParams = useSearchParams();

  const [, startTransition] = useTransition();
  const [query, setQuery] = useState(searchParams.get("query") || "");

  useEffect(() => {
    setQuery(searchParams.get("query") || "");
  }, [searchParams]);

  const handleSearch = (e: React.FormEvent) => {
    e.preventDefault();
    const params = new URLSearchParams();
    if (query) params.set("query", query);
    const cat = searchParams.get("categoria");
    if (cat) params.set("categoria", cat);
    startTransition(() =>
      router.push(`/cursos${params.toString() ? "?" + params.toString() : ""}`)
    );
  };

  const handleCategoria = (cat: string) => {
    setCatOpen(false);
    const params = new URLSearchParams();
    if (query) params.set("query", query);
    params.set("categoria", cat);
    startTransition(() => router.push(`/cursos?${params.toString()}`));
  };

  const isCursosPage = pathname.startsWith("/cursos");

  return (
    <>
      {/* Dropdown de Categorías */}
      <div className="relative hidden md:block">
        <button
          onClick={() => setCatOpen(v => !v)}
          className="flex items-center gap-2 text-sm font-semibold text-gray-700 bg-gray-50 border border-gray-200 px-4 py-2.5 rounded-lg hover:bg-gray-100 transition-all"
        >
          <Grid className="w-4 h-4" />
          Categorías
          <ChevronDown className={`w-3.5 h-3.5 transition-transform ${catOpen ? 'rotate-180' : ''}`} />
        </button>

        {catOpen && (
          <>
            <div className="fixed inset-0 z-10" onClick={() => setCatOpen(false)} />
            <div className="absolute top-full left-0 mt-2 w-72 bg-white border border-gray-100 rounded-xl shadow-2xl z-20 overflow-hidden">
              <div className="py-1 max-h-80 overflow-y-auto">
                <Link href="/cursos" onClick={() => setCatOpen(false)}
                  className="flex items-center gap-3 px-4 py-3 text-sm font-semibold text-gray-500 hover:bg-gray-50 transition-colors border-b border-gray-50">
                  🌐 Todos los cursos
                </Link>
                {CATEGORIAS.map(cat => (
                  <button
                    key={cat}
                    onClick={() => handleCategoria(cat)}
                    className="w-full flex items-center gap-3 px-4 py-2.5 text-sm text-gray-700 hover:bg-blue-50 hover:text-blue-700 transition-colors text-left"
                  >
                    <span className="text-base w-6">{CATEGORIAS_ICONS[cat]}</span>
                    {cat}
                  </button>
                ))}
              </div>
            </div>
          </>
        )}
      </div>

      {/* Buscador central */}
      <form onSubmit={handleSearch} className="flex-1 max-w-xl">
        <div className="relative">
          <Search className="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400 pointer-events-none" />
          <input
            type="text"
            value={query}
            onChange={e => setQuery(e.target.value)}
            placeholder="Buscar un Curso..."
            className="w-full pl-11 pr-10 py-2.5 bg-gray-50 border border-gray-200 rounded-lg text-sm focus:ring-2 focus:ring-[#0066ff] focus:border-transparent outline-none transition-all"
          />
          {query && (
            <button type="button" onClick={() => { setQuery(""); if (isCursosPage) router.push("/cursos"); }}
              className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600">
              <X className="w-4 h-4" />
            </button>
          )}
        </div>
      </form>

      {/* Menú Móvil categorías */}
      <div className={`fixed inset-0 z-[99999] transition-opacity duration-300 lg:hidden ${mobMenuOpen ? 'opacity-100 pointer-events-auto' : 'opacity-0 pointer-events-none'}`}>
        <div className="absolute inset-0 bg-black/50 backdrop-blur-sm" />
        <div className={`absolute left-0 top-0 bottom-0 w-3/4 max-w-xs bg-white shadow-2xl transition-transform duration-300 transform ${mobMenuOpen ? 'translate-x-0' : '-translate-x-full'} flex flex-col`}>
          <div className="flex-1 overflow-y-auto py-6 px-6">
            <div className="flex flex-col gap-4 text-sm text-gray-600 font-medium mt-20">
              {CATEGORIAS.slice(0, 5).map(cat => (
                <button key={cat} onClick={() => { handleCategoria(cat); }} className="flex items-center gap-3 text-left hover:text-[#f57c00]">
                  <span>{CATEGORIAS_ICONS[cat]}</span>
                  {cat}
                </button>
              ))}
              <Link href="/cursos" className="text-[#f57c00] font-bold mt-2">Ver todas las categorías →</Link>
            </div>
          </div>
        </div>
      </div>
    </>
  );
}

export default function Navbar() {
  const [catOpen, setCatOpen] = useState(false);
  const [mobMenuOpen, setMobMenuOpen] = useState(false);

  return (
    <>
      {/* Top Bar */}
      <div className="bg-[#1e2a47] text-gray-300 text-xs py-2 px-8 flex justify-between items-center hide-on-mobile">
        <div className="flex items-center gap-6">
          <div className="flex items-center gap-2">
            <Phone className="w-3.5 h-3.5 text-[#0066ff]" />
            <span>0414-4399278</span>
          </div>
          <div className="flex items-center gap-2">
            <Mail className="w-3.5 h-3.5 text-[#0066ff]" />
            <span>info@cursos.nirgua.com.ve</span>
          </div>
        </div>
        <div className="flex items-center gap-6">
          <div className="flex items-center gap-4 border-r border-gray-600 pr-6">
            <Facebook className="w-3.5 h-3.5 hover:text-white cursor-pointer transition-colors" />
            <Twitter className="w-3.5 h-3.5 hover:text-white cursor-pointer transition-colors" />
            <Linkedin className="w-3.5 h-3.5 hover:text-white cursor-pointer transition-colors" />
            <Instagram className="w-3.5 h-3.5 hover:text-white cursor-pointer transition-colors" />
            <Youtube className="w-3.5 h-3.5 hover:text-white cursor-pointer transition-colors" />
          </div>
          <div className="flex gap-2 items-center font-bold mr-4 border-r border-gray-600 pr-6 text-[11px]">
            <span className="text-white cursor-pointer hover:text-[#0066ff] transition-colors">ES</span>
            <span className="text-gray-500">|</span>
            <span className="text-gray-500 cursor-pointer hover:text-white transition-colors">EN</span>
          </div>
          <Link href="/contacto" className="flex items-center gap-2 hover:text-white transition-colors font-medium">
            <User className="w-3.5 h-3.5 text-[#0066ff]" />
            Registro de Usuarios
          </Link>
          <Link href="/signin" className="flex items-center gap-2 hover:text-white transition-colors font-medium ml-4 border-l border-gray-600 pl-4">
            <span className="text-gray-400">¿Ya tienes cuenta?</span> Entrar
          </Link>
        </div>
      </div>

      {/* Navbar principal */}
      <nav className="bg-white shadow-sm sticky top-0 z-50">
        <div className="flex items-center justify-between px-8 py-4 gap-4">
          {/* Logo */}
          <div className="flex items-center gap-4 shrink-0">
            <button
              className="lg:hidden text-gray-700 hover:text-[#f57c00] transition-colors"
              onClick={() => setMobMenuOpen(true)}
            >
              <Menu className="w-6 h-6" />
            </button>
            <Link href="/" className="font-extrabold text-2xl tracking-tight text-[#3e2723] flex items-center gap-2">
              <Image src="/images/logo/logo.png" alt="CursosNirgua Logo" width={180} height={50} className="object-contain drop-shadow-md" />
            </Link>

            {/* Sección de búsqueda y categorías — envuelta en Suspense */}
            <Suspense fallback={
              <div className="hidden md:flex w-8 h-8 bg-gray-100 rounded-lg animate-pulse" />
            }>
              <NavbarSearchSection catOpen={catOpen} setCatOpen={setCatOpen} mobMenuOpen={mobMenuOpen} />
            </Suspense>
          </div>

          {/* Nav links */}
          <ul className="hidden lg:flex items-center gap-6 text-sm font-semibold text-gray-700 shrink-0">
            <li><Link href="/" className="hover:text-[#f57c00] transition-colors">Inicio</Link></li>
            <li><Link href="/nosotros" className="hover:text-[#f57c00] transition-colors">Nosotros</Link></li>
            <li><Link href="/cursos" className="hover:text-[#f57c00] transition-colors">Cursos</Link></li>
            <li><Link href="/sedes" className="hover:text-[#f57c00] transition-colors">Instituciones</Link></li>
            <li><Link href="/noticias" className="hover:text-[#f57c00] transition-colors">Noticias</Link></li>
            <li><Link href="/contacto" className="hover:text-[#f57c00] transition-colors">Contacto</Link></li>
          </ul>
        </div>
      </nav>

      {/* Menú Móvil overlay */}
      <div className={`fixed inset-0 z-[99999] transition-opacity duration-300 lg:hidden ${mobMenuOpen ? 'opacity-100 pointer-events-auto' : 'opacity-0 pointer-events-none'}`}>
        <div className="absolute inset-0 bg-black/50 backdrop-blur-sm" onClick={() => setMobMenuOpen(false)} />
        <div className={`absolute left-0 top-0 bottom-0 w-3/4 max-w-xs bg-white shadow-2xl transition-transform duration-300 transform ${mobMenuOpen ? 'translate-x-0' : '-translate-x-full'} flex flex-col`}>
          <div className="p-6 border-b border-gray-100 flex items-center justify-between">
            <span className="font-extrabold text-xl text-[#3e2723]">Menú</span>
            <button onClick={() => setMobMenuOpen(false)} className="p-2 text-gray-500 hover:text-[#f57c00] transition-colors bg-gray-50 rounded-full">
              <X className="w-5 h-5" />
            </button>
          </div>
          
          <div className="flex-1 overflow-y-auto py-6 px-6">
            <ul className="flex flex-col gap-6 text-base font-bold text-gray-800">
              <li><Link href="/" onClick={() => setMobMenuOpen(false)} className="block w-full hover:text-[#f57c00] transition-colors">Inicio</Link></li>
              <li><Link href="/nosotros" onClick={() => setMobMenuOpen(false)} className="block w-full hover:text-[#f57c00] transition-colors">Nosotros</Link></li>
              <li><Link href="/cursos" onClick={() => setMobMenuOpen(false)} className="block w-full hover:text-[#f57c00] transition-colors">Cursos Disponibles</Link></li>
              <li><Link href="/sedes" onClick={() => setMobMenuOpen(false)} className="block w-full hover:text-[#f57c00] transition-colors">Instituciones</Link></li>
              <li><Link href="/noticias" onClick={() => setMobMenuOpen(false)} className="block w-full hover:text-[#f57c00] transition-colors">Noticias</Link></li>
              <li><Link href="/contacto" onClick={() => setMobMenuOpen(false)} className="block w-full hover:text-[#f57c00] transition-colors">Contacto</Link></li>
            </ul>
          </div>
          <div className="p-6 bg-gray-50 border-t border-gray-100 mt-auto">
            <Link href="/contacto" onClick={() => setMobMenuOpen(false)} className="w-full flex items-center justify-center gap-2 bg-[#f57c00] text-white py-3 rounded-xl font-bold hover:bg-[#e65100] transition-colors shadow-lg shadow-[#f57c00]/30 shadow-md">
              <User className="w-4 h-4" /> Registro de Institución / Alumno
            </Link>
            <Link href="/signin" onClick={() => setMobMenuOpen(false)} className="w-full flex items-center justify-center gap-2 mt-4 text-gray-500 py-2 rounded-xl font-semibold hover:text-[#f57c00] transition-colors">
              Iniciar Sesión
            </Link>
          </div>
        </div>
      </div>
    </>
  );
}