"use client";

import { useEffect, useRef } from "react";
import { motion, useInView, useReducedMotion } from "motion/react";
import Icon from "@/components/ui/Icon";
import Photo from "@/components/ui/Photo";
import { useHomeDestinations } from "@/store/home";

const OUT = [0.2, 0.7, 0.2, 1] as const;
/** Resting fan for the three day cards: back-left, front-centre, back-right. */
const FAN = [
  { x: "-70%", y: 28, rotate: -7 },
  { x: "0%", y: 0, rotate: 0 },
  { x: "70%", y: 28, rotate: 7 },
];
const ADD = [
  { icon: "location_on", label: "Places" },
  { icon: "bed", label: "Stays" },
  { icon: "restaurant", label: "Food" },
  { icon: "event", label: "Events" },
];

/** Home closer: a sample three-day trip as fanned photo cards. The cards start stacked and fan out once the section is in view. */
export default function Plan() {
  const reduce = useReducedMotion();
  const stage = useRef<HTMLDivElement>(null);
  const inView = useInView(stage, { once: true, amount: 0.4 });
  const { items, status, load } = useHomeDestinations();

  useEffect(() => {
    if (status === "idle") void load();
  }, [status, load]);

  // One destination per city, so the sample trip moves around the country.
  const live = items.filter((d, i) => items.findIndex((x) => x.city?.id === d.city?.id) === i);
  const pending = status === "idle" || status === "loading";
  const days = (live.length >= 3 ? live : items).slice(0, 3).map((d) => ({ key: String(d.id), name: d.name, city: d.city?.name ?? "", src: d.cover?.url ?? null }));

  const open = inView || reduce;

  return (
    <section className="plan" id="plan" aria-labelledby="plan-h">
      <div className="plan-wrap">
        <div className="plan-card">
          <div className="plan-copy">
            <h2 id="plan-h">Plan your Syria</h2>
            <p>Build a day-by-day trip from places, stays, food and events, and keep it with you on the map.</p>
            <ul className="plan-add" aria-label="What you can add">
              {ADD.map((a) => (
                <li key={a.label}>
                  <Icon name={a.icon} />
                  {a.label}
                </li>
              ))}
            </ul>
            <a className="btn btn-rose" href="#plan">
              Plan Your Trip <Icon name="arrow_forward" className="arrow" />
            </a>
          </div>

          <div className="plan-stage" ref={stage} aria-label="Sample three-day trip">
            {pending && [0, 1, 2].map((i) => (
              <figure key={i} className="plan-day" style={{ zIndex: i === 1 ? 2 : 1, transform: `translate(${FAN[i].x}, ${FAN[i].y}px) rotate(${FAN[i].rotate}deg)` }} aria-hidden="true">
                <div className="plan-day-img"><span className="skel skel-fill" /></div>
              </figure>
            ))}
            {days.map((d, i) => (
              <motion.figure
                key={d.key}
                className="plan-day"
                style={{ zIndex: i === 1 ? 2 : 1 }}
                initial={reduce ? false : { x: "0%", y: 40, rotate: 0, opacity: 0 }}
                animate={open ? { ...FAN[i], opacity: 1 } : undefined}
                whileHover={reduce ? undefined : { y: FAN[i].y - 12, rotate: FAN[i].rotate / 2, transition: { duration: 0.25, ease: OUT } }}
                transition={{ duration: 0.8, delay: 0.1 + (i === 1 ? 0 : 0.12), ease: OUT }}
              >
                <div className="plan-day-img">
                  <Photo src={d.src} label={d.name} alt={d.name} />
                </div>
                {/* The right card shows only its right edge, so its caption aligns there. */}
                <figcaption data-end={i === 2 || undefined}>
                  <span>Day {i + 1}</span>
                  <strong>{d.name}</strong>
                  {d.city && <small>{d.city}</small>}
                </figcaption>
              </motion.figure>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}