"use client";

import { useEffect } from "react";
import Link from "next/link";
import Icon from "@/components/ui/Icon";
import Photo from "@/components/ui/Photo";
import Reveal from "@/components/ui/Reveal";
import { useHomeStays } from "@/store/home";

type Card = { key: string; name: string; area: string; rating: string; tags: string[]; price: string; photo: string; src: string | null; href: string | null };

export default function Stays() {
  const { items, status, load } = useHomeStays();
  useEffect(() => {
    if (status === "idle") void load();
  }, [status, load]);

  const pending = status === "idle" || status === "loading";
  const cards: Card[] = items.slice(0, 2).map((s) => ({
          key: `s-${s.id}`,
          name: s.name,
          area: s.address ?? s.city?.name ?? "",
          rating: s.subtype.star_rating ? String(s.subtype.star_rating) : "",
          tags: s.subtype.features.slice(0, 3).map((f) => f.name),
          // ponytail: the API sends no currency, so the price shows as a bare number.
          price: s.subtype.base_price ? String(Number(s.subtype.base_price)) : "",
          photo: s.name,
          src: s.cover?.url ?? null,
          href: `/stays/details?id=${s.id}`,
        }));

  if (!pending && cards.length === 0) return null;

  return (
    <section className="sec" id="stays">
      <div className="wrap">
        <Reveal className="head">
          <div>
            <span className="eyebrow">Places to stay</span>
            <h2 className="h2">Explore an incredible range of accommodation</h2>
          </div>
        </Reveal>
        <div className="stay-grid">
          {pending && [0, 1].map((i) => (
            <article className="stay" key={i} aria-hidden="true">
              <div className="stay-img"><span className="skel skel-fill" /></div>
              <div className="stay-body">
                <span className="skel skel-line w-40" />
                <span className="skel skel-line w-70" />
                <span className="skel skel-line" />
              </div>
            </article>
          ))}
          {cards.map((s, i) => (
            <Reveal as="article" className="stay" key={s.key} delay={i * 0.08}>
              <div className="stay-img">
                <Photo src={s.src} label={s.photo} alt={s.name} />
              </div>
              <div className="stay-body">
                <div className="stay-top">
                  <span>{s.area}</span>
                  {s.rating && (
                    <span className="rating" aria-label={`${s.rating} stars`}>
                      <Icon name="star" filled />
                      {s.rating}
                    </span>
                  )}
                </div>
                <h3>{s.name}</h3>
                <div className="tags">{s.tags.map((t) => <span key={t}>{t}</span>)}</div>
                <div className="stay-foot">
                  {s.price ? <div><b>{s.price}</b><span> / night</span></div> : <div />}
                  {s.href && (
                    <Link className="btn btn-outline btn-sm" href={s.href}>
                      View
                    </Link>
                  )}
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}