import React, { useEffect, useMemo, useRef, useState } from "react";
import { MapPin, SlidersHorizontal, X, Beer, Utensils, Search, RotateCcw, ChevronDown, Menu, Database, Wifi } from "lucide-react";

const MOCK_DATA = {
  bares: [
    { id: 1, nombre: "Bar Laurel", lat: 42.4666, lng: -2.4455, asientos: 18, terraza: true, direccion: "Calle del Laurel, 12" },
    { id: 2, nombre: "La Esquina", lat: 42.4646, lng: -2.4488, asientos: 42, terraza: false, direccion: "Calle Portales, 31" },
    { id: 3, nombre: "Café Bretón", lat: 42.4627, lng: -2.4511, asientos: 70, terraza: true, direccion: "Bretón de los Herreros, 8" },
  ],
  restaurantes: [
    { id: 101, nombre: "Sabores del Ebro", lat: 42.4682, lng: -2.4496, cocina: "Riojana", precio: 2, direccion: "Calle Mayor, 18" },
    { id: 102, nombre: "Verde Oliva", lat: 42.4654, lng: -2.4409, cocina: "Mediterránea", precio: 3, direccion: "Av. de la Paz, 22" },
    { id: 103, nombre: "Mesa Norte", lat: 42.4609, lng: -2.4472, cocina: "Fusión", precio: 2, direccion: "Gran Vía, 44" },
  ],
};

const COLORS = { bar: "#2563eb", restaurante: "#f97316" };

function loadLeaflet() {
  return new Promise((resolve, reject) => {
    if (window.L) return resolve(window.L);
    if (!document.querySelector('link[data-leaflet]')) {
      const link = document.createElement("link");
      link.rel = "stylesheet";
      link.href = "https://unpkg.com/leaflet@1.9.4/dist/leaflet.css";
      link.dataset.leaflet = "true";
      document.head.appendChild(link);
    }
    const existing = document.querySelector('script[data-leaflet]');
    if (existing) {
      existing.addEventListener("load", () => resolve(window.L));
      return;
    }
    const script = document.createElement("script");
    script.src = "https://unpkg.com/leaflet@1.9.4/dist/leaflet.js";
    script.dataset.leaflet = "true";
    script.onload = () => resolve(window.L);
    script.onerror = reject;
    document.head.appendChild(script);
  });
}

function markerIcon(L, type) {
  const color = COLORS[type];
  const symbol = type === "bar" ? "B" : "R";
  return L.divIcon({
    className: "custom-marker",
    html: `<div style="width:38px;height:38px;border-radius:14px 14px 14px 4px;transform:rotate(-45deg);background:${color};border:3px solid white;box-shadow:0 8px 20px rgba(15,23,42,.23);display:grid;place-items:center"><span style="transform:rotate(45deg);color:white;font:bold 14px system-ui">${symbol}</span></div>`,
    iconSize: [42, 42], iconAnchor: [20, 39], popupAnchor: [0, -37]
  });
}

function MapArea({ points, selected, onSelect }) {
  const elRef = useRef(null);
  const mapRef = useRef(null);
  const layerRef = useRef(null);

  useEffect(() => {
    let active = true;
    loadLeaflet().then((L) => {
      if (!active || mapRef.current) return;
      const map = L.map(elRef.current, { zoomControl: false }).setView([42.4654, -2.4470], 15);
      L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
        maxZoom: 19,
        attribution: '&copy; https://www.openstreetmap.org/copyright'
      }).addTo(map);
      L.control.zoom({ position: "bottomright" }).addTo(map);
      mapRef.current = map;
      layerRef.current = L.layerGroup().addTo(map);
      setTimeout(() => map.invalidateSize(), 100);
    });
    return () => { active = false; };
  }, []);

  useEffect(() => {
    if (!mapRef.current || !layerRef.current || !window.L) return;
    const L = window.L;
    layerRef.current.clearLayers();
    points.forEach((p) => {
      const marker = L.marker([p.lat, p.lng], { icon: markerIcon(L, p.tipo) }).addTo(layerRef.current);
      marker.on("click", () => onSelect(p));
      marker.bindTooltip(p.nombre, { direction: "top", offset: [0, -30], opacity: 0.95 });
    });
  }, [points, onSelect]);

  useEffect(() => {
    if (selected && mapRef.current) mapRef.current.flyTo([selected.lat, selected.lng], 17, { duration: 0.7 });
  }, [selected]);

  return <div ref={elRef} className="h-full w-full bg-slate-200" aria-label="Mapa interactivo de localizaciones" />;
}

function Toggle({ checked, onChange, color, children }) {
  return (
    <label className="flex cursor-pointer items-center justify-between gap-3 rounded-xl p-2 hover:bg-slate-50">
      <span className="flex items-center gap-3 text-sm font-semibold text-slate-700">{children}</span>
      <button type="button" role="switch" aria-checked={checked} onClick={() => onChange(!checked)} className={`relative h-6 w-11 rounded-full transition ${checked ? color : "bg-slate-300"}`}>
        <span className={`absolute top-1 h-4 w-4 rounded-full bg-white shadow transition ${checked ? "left-6" : "left-1"}`} />
      </button>
    </label>
  );
}

export default function App() {
  const [showBars, setShowBars] = useState(true);
  const [showRestaurants, setShowRestaurants] = useState(true);
  const [minSeats, setMinSeats] = useState(0);
  const [terraceOnly, setTerraceOnly] = useState(false);
  const [cuisine, setCuisine] = useState("Todas");
  const [query, setQuery] = useState("");
  const [filtersOpen, setFiltersOpen] = useState(false);
  const [selected, setSelected] = useState(null);

  const points = useMemo(() => {
    const q = query.trim().toLowerCase();
    const bars = showBars ? MOCK_DATA.bares
      .filter(x => x.asientos >= minSeats && (!terraceOnly || x.terraza))
      .map(x => ({ ...x, tipo: "bar" })) : [];
    const restaurants = showRestaurants ? MOCK_DATA.restaurantes
      .filter(x => cuisine === "Todas" || x.cocina === cuisine)
      .map(x => ({ ...x, tipo: "restaurante" })) : [];
    return [...bars, ...restaurants].filter(x => !q || x.nombre.toLowerCase().includes(q) || x.direccion.toLowerCase().includes(q));
  }, [showBars, showRestaurants, minSeats, terraceOnly, cuisine, query]);

  const reset = () => { setShowBars(true); setShowRestaurants(true); setMinSeats(0); setTerraceOnly(false); setCuisine("Todas"); setQuery(""); };

  const Filters = () => (
    <div className="space-y-5">
      <div>
        <div className="mb-2 flex items-center justify-between">
          <h2 className="text-sm font-bold uppercase tracking-wider text-slate-400">Categorías</h2>
          <button onClick={reset} className="flex items-center gap-1 text-xs font-semibold text-blue-600 hover:text-blue-800"><RotateCcw size={13}/> Restablecer</button>
        </div>
        <Toggle checked={showBars} onChange={setShowBars} color="bg-blue-600"><span className="grid h-8 w-8 place-items-center rounded-lg bg-blue-50 text-blue-600"><Beer size={17}/></span>Bares</Toggle>
        <Toggle checked={showRestaurants} onChange={setShowRestaurants} color="bg-orange-500"><span className="grid h-8 w-8 place-items-center rounded-lg bg-orange-50 text-orange-600"><Utensils size={17}/></span>Restaurantes</Toggle>
      </div>

      <div className={`space-y-3 border-t border-slate-100 pt-4 transition ${showBars ? "opacity-100" : "pointer-events-none opacity-40"}`}>
        <div className="flex items-center gap-2 font-bold text-slate-800"><Beer size={16} className="text-blue-600"/> Propiedades de bares</div>
        <label className="block text-sm text-slate-600">
          <span className="mb-2 flex justify-between"><span>Mínimo de asientos</span><strong className="text-slate-900">{minSeats}</strong></span>
          <input className="w-full accent-blue-600" type="range" min="0" max="80" step="10" value={minSeats} onChange={e => setMinSeats(Number(e.target.value))}/>
        </label>
        <Toggle checked={terraceOnly} onChange={setTerraceOnly} color="bg-blue-600"><span className="text-sm font-medium">Solo con terraza</span></Toggle>
      </div>

      <div className={`space-y-3 border-t border-slate-100 pt-4 transition ${showRestaurants ? "opacity-100" : "pointer-events-none opacity-40"}`}>
        <div className="flex items-center gap-2 font-bold text-slate-800"><Utensils size={16} className="text-orange-600"/> Propiedades de restaurantes</div>
        <label className="block text-sm text-slate-600">Tipo de cocina</label>
        <div className="relative">
          <select value={cuisine} onChange={e => setCuisine(e.target.value)} className="w-full appearance-none rounded-xl border border-slate-200 bg-white px-3 py-2.5 pr-9 text-sm outline-none focus:border-orange-400 focus:ring-2 focus:ring-orange-100">
            {["Todas", "Riojana", "Mediterránea", "Fusión"].map(x => <option key={x}>{x}</option>)}
          </select>
          <ChevronDown size={16} className="pointer-events-none absolute right-3 top-3 text-slate-400"/>
        </div>
      </div>
    </div>
  );

  return (
    <div className="flex h-screen min-h-[600px] flex-col overflow-hidden bg-slate-100 font-sans text-slate-900">
      <header className="z-[1001] flex h-16 shrink-0 items-center gap-3 border-b border-slate-200 bg-white px-4 shadow-sm md:px-6">
        <div className="grid h-10 w-10 shrink-0 place-items-center rounded-xl bg-gradient-to-br from-blue-600 to-cyan-500 text-white shadow-lg shadow-blue-200"><MapPin size={22}/></div>
        <div className="mr-auto"><h1 className="text-base font-extrabold tracking-tight md:text-lg">Localiza<span className="text-blue-600">+</span></h1><p className="hidden text-xs text-slate-400 sm:block">Explora lugares en el mapa</p></div>
        <div className="relative hidden w-full max-w-md sm:block">
          <Search size={17} className="absolute left-3 top-2.5 text-slate-400"/>
          <input value={query} onChange={e=>setQuery(e.target.value)} placeholder="Buscar por nombre o dirección…" className="w-full rounded-xl border border-slate-200 bg-slate-50 py-2 pl-10 pr-3 text-sm outline-none focus:border-blue-400 focus:bg-white focus:ring-2 focus:ring-blue-100"/>
        </div>
        <div className="hidden items-center gap-2 rounded-full bg-emerald-50 px-3 py-1.5 text-xs font-bold text-emerald-700 lg:flex"><Wifi size={14}/> API conectada</div>
        <button onClick={()=>setFiltersOpen(true)} className="flex items-center gap-2 rounded-xl bg-slate-900 px-3 py-2.5 text-sm font-bold text-white md:hidden"><SlidersHorizontal size={17}/> Filtros</button>
      </header>

      <main className="relative flex min-h-0 flex-1">
        <aside className="hidden w-80 shrink-0 overflow-y-auto border-r border-slate-200 bg-white p-5 md:block"><Filters/></aside>
        <section className="relative min-w-0 flex-1">
          <MapArea points={points} selected={selected} onSelect={setSelected}/>
          <div className="absolute left-3 top-3 z-[500] flex items-center gap-2 rounded-xl border border-white/70 bg-white/95 px-3 py-2 text-sm font-bold shadow-lg backdrop-blur md:left-4 md:top-4"><MapPin size={16} className="text-blue-600"/><span>{points.length} ubicaciones</span></div>
          <div className="absolute bottom-4 left-1/2 z-[500] flex -translate-x-1/2 gap-3 rounded-2xl border border-white/80 bg-white/95 px-4 py-2.5 text-xs font-semibold shadow-xl backdrop-blur">
            <span className="flex items-center gap-2"><i className="h-3 w-3 rounded-full bg-blue-600"/> Bares</span><span className="flex items-center gap-2"><i className="h-3 w-3 rounded-full bg-orange-500"/> Restaurantes</span>
          </div>
          {selected && <div className="absolute bottom-20 left-3 right-3 z-[600] mx-auto max-w-sm rounded-2xl border border-slate-200 bg-white p-4 shadow-2xl md:bottom-6 md:left-auto md:right-6 md:mx-0">
            <button onClick={()=>setSelected(null)} aria-label="Cerrar" className="absolute right-3 top-3 grid h-7 w-7 place-items-center rounded-full bg-slate-100 text-slate-500 hover:bg-slate-200"><X size={15}/></button>
            <div className="flex gap-3 pr-7"><div className={`grid h-11 w-11 shrink-0 place-items-center rounded-xl text-white ${selected.tipo === "bar" ? "bg-blue-600" : "bg-orange-500"}`}>{selected.tipo === "bar" ? <Beer size={21}/> : <Utensils size={21}/>}</div><div><span className="text-[11px] font-bold uppercase tracking-wider text-slate-400">{selected.tipo}</span><h3 className="font-extrabold text-slate-900">{selected.nombre}</h3><p className="mt-1 text-xs text-slate-500">{selected.direccion}</p></div></div>
            <div className="mt-4 flex gap-2 text-xs font-semibold">{selected.tipo === "bar" ? <><span className="rounded-lg bg-blue-50 px-2.5 py-1.5 text-blue-700">{selected.asientos} asientos</span><span className="rounded-lg bg-slate-100 px-2.5 py-1.5 text-slate-700">{selected.terraza ? "Con terraza" : "Sin terraza"}</span></> : <><span className="rounded-lg bg-orange-50 px-2.5 py-1.5 text-orange-700">Cocina {selected.cocina}</span><span className="rounded-lg bg-slate-100 px-2.5 py-1.5 text-slate-700">{"€".repeat(selected.precio)}</span></>}</div>
          </div>}
        </section>
      </main>

      {filtersOpen && <div className="fixed inset-0 z-[2000] md:hidden"><button aria-label="Cerrar filtros" onClick={()=>setFiltersOpen(false)} className="absolute inset-0 bg-slate-950/45 backdrop-blur-sm"/><div className="absolute bottom-0 left-0 right-0 max-h-[88vh] overflow-y-auto rounded-t-3xl bg-white p-5 shadow-2xl"><div className="mb-5 flex items-center justify-between"><div><h2 className="text-xl font-extrabold">Filtros</h2><p className="text-sm text-slate-500">Configura lo que aparece en el mapa</p></div><button onClick={()=>setFiltersOpen(false)} className="grid h-10 w-10 place-items-center rounded-xl bg-slate-100"><X size={20}/></button></div><div className="relative mb-5"><Search size={17} className="absolute left-3 top-3 text-slate-400"/><input value={query} onChange={e=>setQuery(e.target.value)} placeholder="Buscar localización…" className="w-full rounded-xl border border-slate-200 bg-slate-50 py-2.5 pl-10 pr-3 text-sm outline-none"/></div><Filters/><button onClick={()=>setFiltersOpen(false)} className="mt-6 w-full rounded-xl bg-slate-900 py-3 text-sm font-extrabold text-white">Ver {points.length} resultados</button></div></div>}
    </div>
  );
}