// Category rail + property cards (both grid + list variants)

const CategoryRail = ({ active, onPick }) => {
  return (
    <div className="cat-rail hide-scroll">
      {window.SLS_DATA.categories.map(c => (
        <div key={c.id}
          className={"cat " + (active === c.id ? "active" : "")}
          onClick={() => onPick(c.id)}>
          <div className="ico"><Icon name={c.ico} size={22} /></div>
          <div>{c.label}</div>
        </div>
      ))}
    </div>
  );
};

const FAVS_KEY = "sls_favs";
const getFavs = () => { try { return JSON.parse(localStorage.getItem(FAVS_KEY) || "[]"); } catch { return []; } };
const setFavs = (arr) => localStorage.setItem(FAVS_KEY, JSON.stringify(arr));

const PropertyCard = ({ p, onOpen }) => {
  const [liked, setLiked] = React.useState(() => getFavs().includes(p.id));
  const [imgIdx, setImgIdx] = React.useState(0);
  const [hovered, setHovered] = React.useState(false);
  const [autoPlay, setAutoPlay] = React.useState(true);
  const timerRef = React.useRef(null);
  const images = p.images || [p.img];
  const typeLabel = p.type === "house" ? "Hus" : p.type === "room" ? "Rum" : "Lägenhet";
  const visibleTags = (p.tags || []).slice(0, 3);

  React.useEffect(() => {
    clearInterval(timerRef.current);
    if (hovered && autoPlay && images.length > 1) {
      timerRef.current = setInterval(() => {
        setImgIdx(i => (i + 1) % images.length);
      }, 1800);
    }
    return () => clearInterval(timerRef.current);
  }, [hovered, autoPlay, images.length]);

  const goTo = (idx, e) => {
    e.stopPropagation();
    clearInterval(timerRef.current);
    setAutoPlay(false);
    setImgIdx(((idx % images.length) + images.length) % images.length);
  };

  return (
    <div className="card"
      onClick={() => onOpen && onOpen(p)}
      onMouseEnter={() => { setHovered(true); setAutoPlay(true); }}
      onMouseLeave={() => { setHovered(false); setImgIdx(0); setAutoPlay(true); }}>
      <div className="media">
        {images.map((src, i) => (
          <img key={i} src={src} alt={p.title} loading="lazy"
            className={"card-slide-img" + (i === imgIdx ? " active" : "")} />
        ))}
        <button className={"heart " + (liked ? "on" : "")}
          onClick={(e) => {
            e.stopPropagation();
            setLiked(x => {
              const next = !x;
              const favs = getFavs();
              setFavs(next ? [...favs, p.id] : favs.filter(f => f !== p.id));
              return next;
            });
          }}>
          <Icon name={liked ? "heart-fill" : "heart"} size={16} />
        </button>
        {p.erbjudande && <div className="badge-erbjudande">ERBJUDANDE!</div>}
        {!p.erbjudande && (p.featured || p.rating >= 4.9) && <div className="badge-popular">Populärt</div>}
        {images.length > 1 && (
          <>
            <button className={"card-img-arrow prev" + (hovered ? " visible" : "")}
              onClick={(e) => goTo(imgIdx - 1, e)} aria-label="Previous image">
              <Icon name="chev-left" size={14} />
            </button>
            <button className={"card-img-arrow next" + (hovered ? " visible" : "")}
              onClick={(e) => goTo(imgIdx + 1, e)} aria-label="Next image">
              <Icon name="chev-right" size={14} />
            </button>
            <div className={"card-img-dots" + (hovered ? " visible" : "")}>
              {images.map((_, i) => (
                <button key={i}
                  className={"card-img-dot" + (i === imgIdx ? " active" : "")}
                  onClick={(e) => goTo(i, e)} aria-label={"Image " + (i + 1)} />
              ))}
            </div>
          </>
        )}
      </div>
      <div className="card-body">
        <div className="card-top">
          <span className="card-location">{p.area}, {p.city}</span>
          <span className="card-rating"><Icon name="star" size={11} /> {p.rating} <span className="card-reviews">({p.reviews})</span></span>
        </div>
        <div className="card-title">{p.title}</div>
        <div className="card-stats">
          <span><Icon name="bed" size={12} /> {p.beds} {p.beds === 1 ? "sovrum" : "sovrum"}</span>
          <span className="card-dot">·</span>
          <span>{p.sqm} m²</span>
          <span className="card-dot">·</span>
          <span><Icon name="people" size={12} /> {p.guests} pers</span>
        </div>
        <div className="card-foot">
          {visibleTags.length > 0 && (
            <div className="card-tags">
              {visibleTags.map(t => <span key={t} className="card-tag">{t}</span>)}
            </div>
          )}
          <div className="card-price">
            <span className="card-from">Fr. </span><b>{p.price.toLocaleString("sv-SE")} kr</b><span className="card-unit"> /natt</span>
          </div>
        </div>
      </div>
    </div>
  );
};

const PropertyRow = ({ p, active, onOpen, onHover }) => {
  const [liked, setLiked] = React.useState(false);
  const img = (p.images && p.images[0]) || p.img;
  return (
    <div className={"rcard" + (active ? " active" : "")}
      onClick={() => onOpen && onOpen(p)}
      onMouseEnter={() => onHover && onHover(p.id)}
      onMouseLeave={() => onHover && onHover(null)}>
      <div className="rmedia">
        <img src={img} alt={p.title} loading="lazy"/>
        <button className={"heart " + (liked ? "on" : "")}
          onClick={(e) => { e.stopPropagation(); setLiked(x => !x); }}>
          <Icon name={liked ? "heart-fill" : "heart"} size={16} />
        </button>
        {p.erbjudande && <div className="badge-erbjudande">ERBJUDANDE!</div>}
        {p.featured && !p.erbjudande && <div className="badge">Verified</div>}
      </div>
      <div className="rbody">
        <div className="top">
          <div>
            <div className="city">{p.type === "house" ? "Hus" : p.type === "room" ? "Rum" : "Lägenhet"} i {p.area}, {p.city}</div>
            <h3>{p.title}</h3>
          </div>
          <div className="rate" style={{ display: "inline-flex", gap: 4, alignItems: "center", fontSize: 13 }}>
            <Icon name="star" size={12}/> {p.rating} <span style={{ color: "var(--ink-3)" }}>({p.reviews})</span>
          </div>
        </div>
        <div className="amen">{p.beds} rum · {p.baths} bad · {p.sqm} m² · Värd: {p.host}</div>
        <div className="tags">
          {p.tags.map(t => <span key={t}>{t}</span>)}
        </div>
        <div className="foot">
          <div className="city">{p.dates}</div>
          <div className="price">{p.price.toLocaleString()} kr <span className="per">/natt</span></div>
        </div>
      </div>
    </div>
  );
};

const PropertyCarousel = ({ properties, onOpen }) => {
  const railRef = React.useRef(null);
  const [canPrev, setCanPrev] = React.useState(false);
  const [canNext, setCanNext] = React.useState(true);
  const drag = React.useRef({ active: false, startX: 0, scrollLeft: 0 });

  const updateArrows = () => {
    const el = railRef.current;
    if (!el) return;
    setCanPrev(el.scrollLeft > 4);
    setCanNext(el.scrollLeft < el.scrollWidth - el.clientWidth - 4);
  };

  const scrollBy = (dir) => {
    const el = railRef.current;
    if (!el) return;
    const cardW = el.querySelector(".card")?.offsetWidth || 300;
    el.scrollBy({ left: dir * (cardW + 28) * 4, behavior: "smooth" });
  };

  const onMouseDown = (e) => {
    drag.current = { active: true, startX: e.pageX - railRef.current.offsetLeft, scrollLeft: railRef.current.scrollLeft };
    railRef.current.style.cursor = "grabbing";
  };
  const onMouseMove = (e) => {
    if (!drag.current.active) return;
    e.preventDefault();
    const x = e.pageX - railRef.current.offsetLeft;
    railRef.current.scrollLeft = drag.current.scrollLeft - (x - drag.current.startX);
  };
  const onMouseUp = () => {
    drag.current.active = false;
    if (railRef.current) railRef.current.style.cursor = "grab";
  };

  React.useEffect(() => {
    const el = railRef.current;
    if (!el) return;
    el.addEventListener("scroll", updateArrows, { passive: true });
    updateArrows();
    return () => el.removeEventListener("scroll", updateArrows);
  }, [properties]);

  return (
    <div className="carousel-wrap">
      <button className={"carousel-arrow prev" + (canPrev ? "" : " hidden")} onClick={() => scrollBy(-1)} aria-label="Previous">
        <Icon name="chev-left" size={18} />
      </button>
      <div className="card-rail" ref={railRef}
        onMouseDown={onMouseDown} onMouseMove={onMouseMove}
        onMouseUp={onMouseUp} onMouseLeave={onMouseUp}>
        {properties.map(p => <PropertyCard key={p.id} p={p} onOpen={onOpen} />)}
      </div>
      <button className={"carousel-arrow next" + (canNext ? "" : " hidden")} onClick={() => scrollBy(1)} aria-label="Next">
        <Icon name="chev-right" size={18} />
      </button>
    </div>
  );
};

Object.assign(window, { CategoryRail, PropertyCard, PropertyRow, PropertyCarousel });