"use client";

import { useEffect, useState } from "react";
import { CitySelect, Select } from "@/components/life/Controls";
import { LifeNotice, LifeSkeleton } from "@/components/life/LifeStatus";
import Pager from "@/components/life/Pager";
import PlaceCard from "@/components/life/PlaceCard";
import Icon from "@/components/ui/Icon";
import { useCitiesStore } from "@/store/cities";
import { useNearbyStore } from "@/store/nearby";

const RADII = [5, 10, 20, 50, 100].map((n) => ({ value: String(n), label: `${n} km` }));

/** Places around the visitor: browser location, or a city centre when location is refused. */
export default function NearbyDirectory() {
  const store = useNearbyStore();
  const cities = useCitiesStore((s) => s.items);
  const [cityId, setCityId] = useState<number | undefined>();
  const [geo, setGeo] = useState<"idle" | "asking" | "denied" | "unsupported">("idle");
  const { lat, lng } = store.filters;
  const located = lat !== undefined && lng !== undefined;

  useEffect(() => {
    if (located) void store.load();
  }, [store.filters, store.load, located]);

  const locate = () => {
    if (!navigator.geolocation) return setGeo("unsupported");
    setGeo("asking");
    navigator.geolocation.getCurrentPosition(
      (pos) => {
        setGeo("idle");
        setCityId(undefined);
        store.setFilters({ lat: pos.coords.latitude, lng: pos.coords.longitude, page: 1 });
      },
      () => setGeo("denied"),
      { timeout: 10000 },
    );
  };

  const pickCity = (id: number | undefined) => {
    setCityId(id);
    const c = cities.find((x) => x.id === id);
    if (c?.latitude && c?.longitude) store.setFilters({ lat: Number(c.latitude), lng: Number(c.longitude), page: 1 });
  };

  const loading = store.status === "idle" || store.status === "loading";
  const total = store.meta?.total ?? store.items.length;

  return (
    <div className="lf">
      <div className="lf-toolbar">
        <div className="lf-tools">
          <div className="lf-field">
            <span className="lf-label">Your location</span>
            <button type="button" className="btn btn-rose btn-sm" onClick={locate} disabled={geo === "asking"}>
              <Icon name="my_location" />
              {geo === "asking" ? "Locating" : "Use my location"}
            </button>
          </div>
          <CitySelect value={cityId} onChange={pickCity} />
          <Select label="Within" value={String(store.filters.radius_km)} options={RADII} onChange={(v) => store.setFilters({ radius_km: Number(v), page: 1 })} />
        </div>
      </div>

      {geo !== "idle" && geo !== "asking" && (
        <p className="lf-muted" role="status">
          {geo === "denied" ? "Location access was refused. Pick a city to search around it instead." : "This browser cannot share a location. Pick a city instead."}
        </p>
      )}

      {!located ? (
        <div className="lf-empty">
          <p>Share your location or pick a city to see what is close by.</p>
        </div>
      ) : (
        <>
          <LifeNotice status={store.status} error={store.error} hasFallback={false} onRetry={() => void store.load()} />
          <p className="lf-count" aria-live="polite">{loading ? "Loading" : `${total} ${total === 1 ? "place" : "places"} within ${store.filters.radius_km} km`}</p>
          {loading && store.items.length === 0 ? (
            <LifeSkeleton />
          ) : store.items.length > 0 ? (
            <div className="lf-grid">
              {store.items.map((p, i) => (
                <PlaceCard
                  key={p.id}
                  index={Math.min(i, 6)}
                  item={{ key: `n-${p.id}`, name: p.name, meta: `${p.distance_km.toFixed(1)} km away${p.city ? `, ${p.city.name}` : ""}`, tags: [], src: p.cover?.url ?? null, href: null }}
                />
              ))}
            </div>
          ) : (
            <div className="lf-empty">
              <p>Nothing within {store.filters.radius_km} km. Try a wider radius.</p>
            </div>
          )}
          <Pager meta={store.meta} onPage={(page) => store.setFilters({ page })} />
        </>
      )}
    </div>
  );
}