"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 { ActivityItem } from "@/lib/api/entertainment";
import type { PlaceFilters } from "@/lib/api/places";
import { useActivitiesStore } from "@/store/entertainment";

function activityModel(a: ActivityItem): PlaceCardModel {
  return {
    key: `a-${a.id}`,
    name: a.name,
    meta: a.address ?? a.city?.name ?? "",
    tags: a.subtype.categories.map((c) => c.name),
    src: a.cover?.url ?? null,
    href: `/life-and-fun/details/experience?id=${a.id}`,
  };
}

/** Entertainment activities from the API, paginated. There is no sample fallback for this list, so failures show a retry. */
export default function ActivityDirectory() {
  const reduce = useReducedMotion();
  const store = useActivitiesStore();

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

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

  const items = store.items.map(activityModel);
  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 experiences" />
        </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 ? "experience" : "experiences"}`}</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 experiences match these filters." : "No experiences 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>
  );
}