"use client";

import { useEffect } from "react";
import { motion, AnimatePresence, useReducedMotion } from "motion/react";
import { CitySelect, SearchField, Chip } from "@/components/life/Controls";
import { LifeNotice, LifeSkeleton } from "@/components/life/LifeStatus";
import Pager from "@/components/life/Pager";
import PlaceCard, { type PlaceCardModel } from "@/components/life/PlaceCard";
import type { GuideItem } from "@/lib/api/guides";
import type { PlaceFilters } from "@/lib/api/places";
import { useGuidesStore } from "@/store/guides";

function guideModel(g: GuideItem): PlaceCardModel {
  return { key: `g-${g.id}`, name: g.name, meta: g.city?.name ?? "", tags: [], src: g.cover?.url ?? null, href: `/explore/tour-guides/details/guide?id=${g.id}` };
}

/** Tour guides from the API, paginated. No sample fallback, so failures show a retry. */
export default function GuideDirectory() {
  const reduce = useReducedMotion();
  const store = useGuidesStore();

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

  const setFilters = (patch: Partial<PlaceFilters>) => store.setFilters({ page: 1, ...patch });

  const items = store.items.map(guideModel);
  const filtered = Boolean(store.filters.city_id || store.filters.q);
  const loading = store.status === "idle" || store.status === "loading";
  const total = store.meta?.total ?? items.length;

  return (
    <div className="lf">
      <div className="lf-toolbar">
        <div className="lf-tools">
          <CitySelect value={store.filters.city_id} onChange={(city_id) => setFilters({ city_id })} />
          <SearchField value={store.filters.q ?? ""} onChange={(q) => setFilters({ q })} placeholder="Search guides" />
        </div>
      </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 ? "guide" : "guides"}`}</p>

      {loading && items.length === 0 ? (
        <LifeSkeleton />
      ) : items.length > 0 ? (
        <motion.div layout className="lf-grid">
          <AnimatePresence mode="popLayout">
            {items.map((item, i) => (
              <PlaceCard key={item.key} item={item} index={reduce ? 0 : Math.min(i, 6)} />
            ))}
          </AnimatePresence>
        </motion.div>
      ) : (
        <div className="lf-empty">
          <p>{filtered ? "No guides match these filters." : "No guides are listed yet."}</p>
          {filtered && (
            <Chip pressed={false} onClick={() => setFilters({ city_id: undefined, q: "" })}>
              Clear filters
            </Chip>
          )}
        </div>
      )}

      <Pager meta={store.meta} onPage={(page) => store.setFilters({ page })} />
    </div>
  );
}