"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 { useHomeFood } from "@/store/home";

type Card = { key: string; name: string; sub: string; photo: string; src: string | null; href: string | null; rating?: string; price?: string; dist?: string; open?: boolean };

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

  const pending = status === "idle" || status === "loading";
  const cards: Card[] = items.slice(0, 4).map((r) => ({
          key: `r-${r.id}`,
          name: r.name,
          sub: [...r.subtype.cuisines.map((c) => c.name), r.city?.name].filter(Boolean).join(", "),
          photo: r.name,
          src: r.cover?.url ?? null,
          href: `/life-and-fun/details/restaurant?id=${r.id}`,
        }));

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

  return (
    <section className="band band-amber" id="food">
      <div className="wrap">
        <Reveal className="head">
          <div>
            <span className="eyebrow">Food</span>
            <h2 className="h2">Where to eat</h2>
          </div>
          <Link className="link-arrow" href="/life-and-fun/food-and-beverage">
            All restaurants <Icon name="arrow_forward" />
          </Link>
        </Reveal>
        <div className="food-grid">
          {pending && [0, 1, 2, 3].map((i) => (
            <article className="food" key={i} aria-hidden="true">
              <div className="food-img"><span className="skel skel-fill" /></div>
              <span className="skel skel-line w-70" />
              <span className="skel skel-line w-40" />
            </article>
          ))}
          {cards.map((r, i) => {
            const body = (
              <>
                <div className="food-img">
                  <Photo src={r.src} label={r.photo} alt={r.name} />
                  {r.open && <span className="open">Open now</span>}
                </div>
                <div className="food-row">
                  <div>
                    <h3>{r.name}</h3>
                    <p>{r.sub}</p>
                  </div>
                  {r.rating && (
                    <div className="food-meta">
                      <span className="rating"><Icon name="star" filled />{r.rating}</span>
                      <span>{r.price} · {r.dist}</span>
                    </div>
                  )}
                </div>
              </>
            );
            return (
              <Reveal as="article" className="food" key={r.key} delay={i * 0.07}>
                {r.href ? <Link href={r.href} className="food-link">{body}</Link> : body}
              </Reveal>
            );
          })}
        </div>
      </div>
    </section>
  );
}