"use client";
import dynamic from "next/dynamic";
import { useSearchParams } from "next/navigation";
import { Suspense, useCallback, useEffect, useMemo, useState } from "react";
import { Loader2, Moon, Search, Sun } from "lucide-react";

import { MusicianCard } from "@/components/MusicianCard";
import { Navbar } from "@/components/Navbar";
import { api } from "@/lib/api";
import type { Musician, ServiceType } from "@/lib/types";
import { cn } from "@/lib/utils";

// El mapa se carga solo en el cliente (Leaflet toca window/document).
const MapView = dynamic(() => import("@/components/MapView"), {
  ssr: false,
  loading: () => (
    <div className="grid h-full w-full place-items-center bg-bg-elev text-ink-mute">Cargando mapa…</div>
  ),
});

// Fallback si el usuario niega la geolocalización: centro de Caracas.
const DEFAULT_CENTER: [number, number] = [10.4806, -66.9036];

function BuscarInner() {
  const params = useSearchParams();
  const [center, setCenter] = useState<[number, number]>(DEFAULT_CENTER);
  const [serviceTypes, setServiceTypes] = useState<ServiceType[]>([]);
  const [service, setService] = useState(params.get("service") || "");
  const [radius, setRadius] = useState(50);
  const [availableOnly, setAvailableOnly] = useState(true);
  const [musicians, setMusicians] = useState<Musician[]>([]);
  const [activeId, setActiveId] = useState<number | null>(null);
  const [loading, setLoading] = useState(false);
  const [night, setNight] = useState(false);

  // Catálogo + ubicación + día/noche automático al montar.
  useEffect(() => {
    api.serviceTypes().then(setServiceTypes).catch(() => {});
    const h = new Date().getHours();
    if (h >= 19 || h < 7) setNight(true);
    navigator.geolocation?.getCurrentPosition(
      (pos) => setCenter([pos.coords.latitude, pos.coords.longitude]),
      () => {},
      { enableHighAccuracy: true, timeout: 5000 },
    );
  }, []);

  const runSearch = useCallback(async () => {
    setLoading(true);
    try {
      const results = await api.search({
        lat: center[0],
        lng: center[1],
        radius_km: radius,
        service_type: service || undefined,
        available_only: availableOnly,
      });
      setMusicians(results);
    } catch {
      setMusicians([]);
    } finally {
      setLoading(false);
    }
  }, [center, radius, service, availableOnly]);

  useEffect(() => {
    runSearch();
  }, [runSearch]);

  const emojiFor = useMemo(
    () => (m: Musician) => serviceTypes.find((s) => s.slug === m.service_types[0])?.emoji ?? "🎵",
    [serviceTypes],
  );

  return (
    <div className="flex h-screen flex-col">
      <Navbar />

      <div className="flex flex-1 overflow-hidden">
        {/* Panel: filtros + resultados */}
        <aside className="flex w-full max-w-md flex-col border-r border-line bg-bg">
          <div className="flex flex-col gap-3 border-b border-line p-4">
            {/* Chips de tipo */}
            <div className="flex gap-2 overflow-x-auto pb-1 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
              <Chip active={service === ""} onClick={() => setService("")}>
                Todos
              </Chip>
              {serviceTypes.map((s) => (
                <Chip key={s.slug} active={service === s.slug} onClick={() => setService(s.slug)}>
                  {s.emoji} {s.name}
                </Chip>
              ))}
            </div>

            {/* Radio */}
            <div>
              <div className="mb-1.5 flex justify-between text-xs">
                <span className="text-ink-soft">Radio de búsqueda</span>
                <span className="font-bold text-accent-deep">{radius} km</span>
              </div>
              <input
                type="range"
                min={5}
                max={1000}
                step={5}
                value={radius}
                onChange={(e) => setRadius(Number(e.target.value))}
                className="w-full accent-accent"
              />
              <div className="mt-1 text-[11px] text-ink-mute">
                Ampliá el radio para alcanzar otras ciudades o todo el país.
              </div>
            </div>

            {/* Toggle disponibles */}
            <button
              onClick={() => setAvailableOnly((v) => !v)}
              className="flex items-center gap-2 text-sm text-ink-soft"
            >
              <span
                className={cn(
                  "relative h-[22px] w-[38px] rounded-full transition-colors",
                  availableOnly ? "bg-accent" : "bg-line",
                )}
              >
                <span
                  className={cn(
                    "absolute top-0.5 h-[18px] w-[18px] rounded-full bg-white transition-all",
                    availableOnly ? "right-0.5" : "left-0.5",
                  )}
                />
              </span>
              Solo disponibles ahora
            </button>
          </div>

          {/* Header de resultados */}
          <div className="flex items-center justify-between px-4 pb-1.5 pt-3 text-xs text-ink-mute">
            <span>{loading ? "Buscando…" : `${musicians.length} músicos cerca`}</span>
            <span className="inline-flex items-center gap-1.5 text-success">
              {loading ? (
                <Loader2 size={13} className="animate-spin" />
              ) : (
                <span className="h-1.5 w-1.5 rounded-full bg-success" />
              )}
              En vivo · por cercanía
            </span>
          </div>

          {/* Lista */}
          <div className="flex flex-1 flex-col gap-2.5 overflow-y-auto p-3">
            {!loading && musicians.length === 0 && (
              <p className="rounded-xl border border-dashed border-line p-6 text-center text-sm text-ink-mute">
                No hay músicos en este radio. Ampliá la distancia o cambiá el servicio.
              </p>
            )}
            {musicians.map((m) => (
              <MusicianCard
                key={m.id}
                musician={m}
                serviceTypes={serviceTypes}
                active={m.id === activeId}
                onHover={(mm) => setActiveId(mm.id)}
              />
            ))}
          </div>
        </aside>

        {/* Mapa */}
        <div className="relative flex-1">
          <MapView
            center={center}
            musicians={musicians}
            emojiFor={emojiFor}
            radiusKm={radius}
            activeId={activeId}
            night={night}
            onMarkerClick={(m) => setActiveId(m.id)}
          />

          {/* Badge */}
          <div className="pointer-events-none absolute left-4 top-4 z-[1000] inline-flex items-center gap-2 rounded-full border border-line bg-bg/90 px-3 py-2 text-xs text-ink-soft shadow-soft backdrop-blur">
            <span className="h-1.5 w-1.5 rounded-full bg-success" /> {musicians.length} músicos en tu radio
          </div>

          {/* Día / noche */}
          <button
            onClick={() => setNight((v) => !v)}
            className="absolute right-4 top-4 z-[1000] inline-flex items-center gap-2 rounded-full border border-line bg-bg/90 px-3 py-2 text-xs font-semibold shadow-soft backdrop-blur"
          >
            {night ? <Moon size={14} className="text-accent-soft" /> : <Sun size={14} className="text-star" />}
            {night ? "Noche" : "Día"}
          </button>

          {/* Buscar en esta zona */}
          <button
            onClick={runSearch}
            className="absolute bottom-6 left-1/2 z-[1000] inline-flex -translate-x-1/2 items-center gap-2 rounded-full border border-line bg-bg/95 px-5 py-2.5 text-sm font-semibold text-accent-deep shadow-soft backdrop-blur"
          >
            <Search size={15} /> Buscar en esta zona
          </button>
        </div>
      </div>
    </div>
  );
}

function Chip({
  active,
  onClick,
  children,
}: {
  active: boolean;
  onClick: () => void;
  children: React.ReactNode;
}) {
  return (
    <button
      onClick={onClick}
      className={cn(
        "flex-none whitespace-nowrap rounded-full border px-3.5 py-1.5 text-[13px] transition-colors",
        active
          ? "border-accent bg-accent font-medium text-white"
          : "border-line bg-bg-card text-ink-soft hover:border-accent/60 hover:text-ink",
      )}
    >
      {children}
    </button>
  );
}

export default function BuscarPage() {
  return (
    <Suspense fallback={<div className="p-8 text-ink-mute">Cargando…</div>}>
      <BuscarInner />
    </Suspense>
  );
}