"use client";

import { useEffect, useState } from "react";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
import Icon from "@/components/ui/Icon";
import Photo from "@/components/ui/Photo";
import Reveal from "@/components/ui/Reveal";
import { useHomeExperiences } from "@/store/home";

const ease = [0.2, 0.7, 0.2, 1] as const;

export default function Experiences() {
  const reduce = useReducedMotion();
  const { items, status, load } = useHomeExperiences();
  useEffect(() => {
    if (status === "idle") void load();
  }, [status, load]);

  const pending = status === "idle" || status === "loading";
  const experiences = items.map((e) => ({
          id: String(e.id),
          chip: e.name,
          icon: "explore",
          title: e.name,
          desc: e.description ?? "",
          photo: e.name,
          src: e.cover?.url ?? null,
          href: `/explore/tour-guides/details/experience?id=${e.id}`,
          meta: [
            ...(e.days ? [{ icon: "schedule", text: e.days === 1 ? "1 day" : `${e.days} days` }] : []),
            ...(e.city ? [{ icon: "location_on", text: e.city.name }] : []),
          ],
        }));
  const [picked, setActive] = useState<string | null>(null);
  const active = picked ?? experiences[0]?.id;
  const x = experiences.find((e) => e.id === active) ?? experiences[0];

  // 250ms swap, slight blur to bridge the two states (blur kept small).
  const swap = reduce
    ? { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 } }
    : {
        initial: { opacity: 0, y: 12, filter: "blur(4px)" },
        animate: { opacity: 1, y: 0, filter: "blur(0px)" },
        exit: { opacity: 0, filter: "blur(4px)" },
      };

  if (!pending && !x) return null;

  return (
    <section className="sheet-xp" id="experiences">
      <div className="xp">
        <div className="wrap xp-in">
          <Reveal>
            <h2>
              Find your kind of <em>Syria</em>
            </h2>
          </Reveal>

          <Reveal delay={0.1}>
            <div className="xp-chips" role="group" aria-label="Filter experiences">
              {pending && [0, 1, 2].map((i) => <span key={i} className="skel" style={{ width: 120, height: 40, borderRadius: 999 }} aria-hidden="true" />)}
              {experiences.map((e) => (
                <button key={e.id} className="chip" aria-pressed={active === e.id} onClick={() => setActive(e.id)}>
                  <Icon name={e.icon} />
                  {e.chip}
                </button>
              ))}
            </div>
          </Reveal>

          {pending || !x ? (
            <div className="xp-stage" aria-hidden="true">
              <div className="xp-photo"><span className="skel skel-fill" /></div>
              <div>
                <span className="skel skel-line w-70" style={{ height: 28 }} />
                <span className="skel skel-line" />
                <span className="skel skel-line w-40" />
              </div>
            </div>
          ) : (
          <div className="xp-stage" aria-live="polite">
            <AnimatePresence mode="wait" initial={false}>
              <motion.div
                key={x.id}
                className="xp-photo"
                {...swap}
                transition={{ duration: 0.25, ease }}
              >
                <Photo src={x.src} label={x.photo} alt={x.title} />
              </motion.div>
            </AnimatePresence>
            <AnimatePresence mode="wait" initial={false}>
              <motion.div key={x.id} {...swap} transition={{ duration: 0.25, ease, delay: reduce ? 0 : 0.04 }}>
                <h3 className="xp-title">{x.title}</h3>
                <p className="xp-desc">{x.desc}</p>
                <div className="xp-meta">
                  {x.meta.map((m) => (
                    <span key={m.text}>
                      <Icon name={m.icon} />
                      {m.text}
                    </span>
                  ))}
                </div>
                <a className="btn btn-white" href={(x as { href?: string }).href ?? "#plan"}>
                  Explore this experience <Icon name="arrow_forward" className="arrow" />
                </a>
              </motion.div>
            </AnimatePresence>
          </div>
          )}
        </div>
      </div>
    </section>
  );
}