/* hotels — live (generated) results per destination with corporate rates,
   filters, plus Tour Packages list + package detail. */

function HotelCard({ h }) {
  const { t, lang } = useLang();
  const { nav, setPendingBooking, nights } = useStore();
  const name = lang === "ar" ? h.ar : h.name;
  const area = lang === "ar" ? h.areaAr : h.area;
  const book = () => { setPendingBooking({ type: "hotel", item: h, amount: h.corp * nights, unit: h.corp, nights, title: `${name} · ${nights} ${nights > 1 ? t("common.nights") : t("common.night")}` }); nav("booking"); };
  return (
    <article className="card hover-lift" style={{ overflow: "hidden", display: "flex", flexDirection: "column" }}>
      <div style={{ position: "relative" }}>
        <Placeholder slot={"hotel_" + h.id} label={h.img} h={196} r="0" tone="sky" />
        <div style={{ position: "absolute", top: 14, insetInlineStart: 14, display: "flex", gap: 6 }}>
          <span className="chip chip-gold" style={{ background: "rgba(246,239,221,.95)", backdropFilter: "blur(4px)" }}><Icon name="shield" size={13} /> {t("hotels.corpRate")}</span>
        </div>
        <div style={{ position: "absolute", top: 14, insetInlineEnd: 14, background: "rgba(255,255,255,.95)", borderRadius: 100, padding: "5px 11px", backdropFilter: "blur(4px)" }}>
          <Stars value={h.rating} />
        </div>
      </div>
      <div style={{ padding: 22, display: "flex", flexDirection: "column", flex: 1 }}>
        <h3 style={{ fontFamily: "var(--serif)", fontSize: 23, fontWeight: 600, lineHeight: 1.15 }}>{name}</h3>
        <div className="muted" style={{ fontSize: 13.5, marginTop: 5, display: "flex", alignItems: "center", gap: 6 }}><Icon name="pin" size={14} /> {area} · {t("hotels.reviews", { count: h.reviews.toLocaleString() })}</div>
        <div style={{ display: "flex", flexWrap: "wrap", gap: 7, marginTop: 14 }}>
          {h.tags.map((tag, i) => <span key={i} className="chip" style={{ fontSize: 11.5, padding: "4px 10px" }}>{lang === "ar" ? tag[1] : tag[0]}</span>)}
        </div>
        <div style={{ flex: 1 }}></div>
        <div className="hr" style={{ margin: "18px 0 14px" }}></div>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end" }}>
          <div>
            <span style={{ textDecoration: "line-through", color: "var(--ink-3)", fontSize: 14, marginInlineEnd: 8 }}><Money value={h.price} sar={false} /></span>
            <div style={{ display: "flex", alignItems: "baseline", gap: 6 }}>
              <span style={{ fontSize: 24, fontWeight: 700 }}><Money value={h.corp} /></span>
              <span className="muted" style={{ fontSize: 12.5 }}>{t("hotels.perNight")}</span>
            </div>
          </div>
          <button className="btn btn-primary btn-sm" onClick={book}>{t("select")} <Icon name="arrow" size={15} className="flip-rtl" /></button>
        </div>
      </div>
    </article>
  );
}

/* live Hotelbeds availability when configured, else the local engine */
function useLiveHotels(ctx) {
  const city = ctx.destination || ctx.to;
  const localGen = () => (window.generateHotels ? generateHotels(city, ctx.depart) : []);
  const [state, setState] = React.useState(() => ({ hotels: localGen(), source: "local", loading: false }));
  React.useEffect(() => {
    let alive = true;
    if (!window.apiConfig) { setState({ hotels: localGen(), source: "local", loading: false }); return; }
    setState((s) => ({ ...s, loading: true }));
    (async () => {
      await apiConfig();
      if (!alive) return;
      if (!providerLive("hotelbeds")) { setState({ hotels: localGen(), source: "local", loading: false }); return; }
      const r = await apiHotels({ city, checkin: ctx.depart, checkout: ctx.ret, adults: ctx.guests, rooms: ctx.rooms });
      if (!alive) return;
      if (r && r.hotels && r.hotels.length) setState({ hotels: r.hotels, source: "hotelbeds", loading: false });
      else setState({ hotels: localGen(), source: "local", loading: false });
    })();
    return () => { alive = false; };
    // eslint-disable-next-line
  }, [city, ctx.depart, ctx.ret, ctx.guests, ctx.rooms]);
  return state;
}

function HotelsPage() {
  const { t, lang } = useLang();
  const { searchCtx, airportByCode } = useStore();
  const { hotels: all, source, loading } = useLiveHotels(searchCtx);
  const [sort, setSort] = React.useState("rec");
  const [minRating, setMinRating] = React.useState(0);
  const [maxRate, setMaxRate] = React.useState(0);
  const [showSearch, setShowSearch] = React.useState(false);
  const rateMax = React.useMemo(() => all.reduce((m, h) => Math.max(m, h.corp), 0), [all]);
  React.useEffect(() => { setMaxRate(rateMax); }, [rateMax]);

  let list = all.filter(h => h.rating >= minRating && (!maxRate || h.corp <= maxRate));
  list = [...list].sort((a, b) => sort === "price" ? a.corp - b.corp : sort === "rating" ? b.rating - a.rating : (b.rating * 100 - b.corp / 50) - (a.rating * 100 - a.corp / 50));
  const city = airportByCode(searchCtx.destination || searchCtx.to);
  const cityName = lang === "ar" ? city.ar : city.city;
  const dates = `${searchCtx.depart} → ${searchCtx.ret}`;

  return (
    <main style={{ paddingTop: 96, background: "var(--paper)", minHeight: "100vh" }}>
      <div className="wrap" style={{ paddingTop: 28, paddingBottom: 70 }}>
        {showSearch && <div style={{ marginBottom: 24 }}><SmartSearch compact /></div>}
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 16, marginBottom: 28 }}>
          <div>
            <h1 style={{ fontFamily: "var(--serif)", fontSize: 34, fontWeight: 600 }}>{t("hotels.title", { city: cityName })}</h1>
            <p className="muted" style={{ marginTop: 4 }}>{t("hotels.sub", { dates, count: list.length })}</p>
          </div>
          <div style={{ display: "flex", gap: 10, alignItems: "center" }}>
            <select className="select" value={sort} onChange={e => setSort(e.target.value)} style={{ width: "auto" }}>
              <option value="rec">{t("hotels.sort.rec")}</option>
              <option value="price">{t("hotels.sort.price")}</option>
              <option value="rating">{t("hotels.sort.rating")}</option>
            </select>
            <button className="btn btn-ghost btn-sm" onClick={() => setShowSearch(s => !s)}><Icon name="search" size={15} /> {t("hotels.modify")}</button>
          </div>
        </div>
        <div className="split" style={{ display: "grid", gridTemplateColumns: "240px 1fr", gap: 26, alignItems: "start" }}>
          <FilterShell count={list.length}>
            <div className="hide-mobile" style={{ fontFamily: "var(--serif)", fontSize: 20, fontWeight: 600, marginBottom: 16 }}>{t("hotels.filters")}</div>
            <div className="filt-h">{t("hotels.minRating")}</div>
            <div style={{ display: "flex", flexDirection: "column", gap: 6, marginBottom: 18 }}>
              {[[0, "—"], [4.3, "4.3+"], [4.6, "4.6+"], [4.8, "4.8+"]].map(([v, l]) => (
                <label key={v} className="filt-row"><input type="radio" name="minrating" checked={minRating === v} onChange={() => setMinRating(v)} style={{ accentColor: "var(--emerald)" }} /> {l}</label>
              ))}
            </div>
            {rateMax > 0 && <>
              <div className="filt-h">{t("hotels.maxRate")}: <Money value={maxRate || rateMax} sar={false} /></div>
              <input type="range" min={Math.min(...all.map(h => h.corp)) || 0} max={rateMax} value={maxRate || rateMax} onChange={e => setMaxRate(+e.target.value)} style={{ width: "100%", accentColor: "var(--emerald)" }} />
            </>}
            <div className="hr" style={{ margin: "18px 0" }}></div>
            <div className="chip chip-emerald" style={{ width: "100%", justifyContent: "center" }}><Icon name="shield" size={14} /> {t("flights.corpRates")}</div>
          </FilterShell>
          <div className="rcol-2" style={{ display: "grid", gridTemplateColumns: "repeat(2,1fr)", gap: 22, alignContent: "start" }}>
            {source === "hotelbeds" && <div style={{ gridColumn: "1/-1", marginBottom: -6 }}><span className="chip chip-emerald" style={{ fontSize: 12 }}><span className="badge-dot" style={{ background: "var(--ok)" }}></span> {lang === "ar" ? "توفّر مباشر · Hotelbeds" : "Live availability · Hotelbeds"}</span></div>}
            {loading && all.length === 0
              ? [0, 1, 2, 3].map(i => <div key={i} className="card" style={{ height: 360, background: "linear-gradient(90deg,var(--paper-2),var(--card),var(--paper-2))", backgroundSize: "200% 100%", animation: "shimmer 1.3s linear infinite" }} />)
              : <>
                  {list.map(h => <HotelCard key={h.id} h={h} />)}
                  {list.length === 0 && <div className="card card-pad center muted" style={{ gridColumn: "1/-1" }}>{t("hotels.empty")}</div>}
                </>}
          </div>
        </div>
      </div>
    </main>
  );
}

function PackagesPage() {
  const { t, lang } = useLang();
  const { PACKAGES, nav } = useStore();
  return (
    <main style={{ paddingTop: 96, background: "var(--paper)", minHeight: "100vh" }}>
      <section style={{ background: "linear-gradient(160deg,#2f2114,#1c130a)", color: "#fff", padding: "56px 0 64px" }}>
        <div className="wrap">
          <SectionHead light eyebrow={t("vision.eyebrow")} title={t("vision.title")} sub={t("vision.sub")} />
        </div>
      </section>
      <div className="wrap" style={{ paddingTop: 48, paddingBottom: 80 }}>
        <div className="rcol" style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 24 }}>
          {(PACKAGES || []).map(p => (
            <article key={p.id} className="card hover-lift" style={{ overflow: "hidden", display: "flex", flexDirection: "column" }}>
              <div style={{ position: "relative", cursor: "pointer" }} onClick={() => nav("package", { id: p.id })}>
                <Placeholder slot={"pkg_" + p.id} label={p.img} h={260} r="0" tone="sand" />
                <span className="chip chip-gold" style={{ position: "absolute", top: 14, insetInlineStart: 14, background: "rgba(246,239,221,.95)" }}><Icon name="spark" size={13} /> {loc(p, "tag", lang)}</span>
              </div>
              <div style={{ padding: 24, display: "flex", flexDirection: "column", flex: 1 }}>
                <h3 style={{ fontFamily: "var(--serif)", fontSize: 25, fontWeight: 600 }}>{loc(p, "name", lang)}</h3>
                <div className="muted" style={{ fontSize: 13.5, marginTop: 6 }}>{t("pkg.includes", { nights: p.nights })}</div>
                <p className="muted" style={{ fontSize: 14, marginTop: 10, lineHeight: 1.55 }}>{loc(p, "desc", lang)}</p>
                <div style={{ flex: 1 }}></div>
                <div className="hr" style={{ margin: "18px 0 14px" }}></div>
                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end" }}>
                  <div><span className="muted" style={{ fontSize: 12.5 }}>{t("from.price")}</span><div style={{ fontSize: 24, fontWeight: 700 }}><Money value={p.price} /></div></div>
                  <button className="btn btn-ghost btn-sm" onClick={() => nav("package", { id: p.id })}>{t("pkg.detailCta")} <Icon name="arrow" size={15} className="flip-rtl" /></button>
                </div>
              </div>
            </article>
          ))}
        </div>
      </div>
    </main>
  );
}

function PackageDetailPage() {
  const { t, lang } = useLang();
  const { PACKAGES, params, nav, setPendingBooking, setSearchCtx, searchCtx } = useStore();
  const p = (PACKAGES || []).find(x => x.id === params.id) || (PACKAGES || [])[0];
  if (!p) return <main style={{ paddingTop: 120 }} className="wrap"><div className="card card-pad center">—</div></main>;
  const book = () => { setSearchCtx({ ...searchCtx, destination: p.city }); setPendingBooking({ type: "package", item: p, amount: p.price, title: loc(p, "name", lang), nights: p.nights }); nav("booking"); };
  return (
    <main style={{ paddingTop: 72, background: "var(--paper)", minHeight: "100vh" }}>
      <section style={{ position: "relative", height: 380, overflow: "hidden" }}>
        <Placeholder slot={"pkghero_" + p.id} label={p.img} h={380} r="0" tone="sand" style={{ height: 380 }} />
        <div style={{ position: "absolute", inset: 0, background: "linear-gradient(to top,rgba(20,14,8,.88),transparent 60%)" }}></div>
        <div className="wrap" style={{ position: "absolute", insetInline: 0, bottom: 0, paddingBottom: 32 }}>
          <button className="btn btn-ghost btn-sm" onClick={() => nav("packages")} style={{ background: "rgba(255,255,255,.14)", color: "#fff", border: "1px solid rgba(255,255,255,.3)", marginBottom: 16 }}><Icon name="arrowL" size={15} className="flip-rtl" /> {t("nav.packages")}</button>
          <span className="chip chip-gold" style={{ marginInlineStart: 0 }}><Icon name="spark" size={13} /> {loc(p, "tag", lang)}</span>
          <h1 className="display" style={{ color: "#fff", fontSize: "clamp(34px,5vw,62px)", marginTop: 12 }}>{loc(p, "name", lang)}</h1>
        </div>
      </section>
      <div className="wrap split" style={{ display: "grid", gridTemplateColumns: "1.4fr .9fr", gap: 40, paddingTop: 48, paddingBottom: 80, alignItems: "start" }}>
        <div>
          <p className="lead">{loc(p, "desc", lang)}</p>
          <h2 className="section-title" style={{ fontSize: 30, marginTop: 36, marginBottom: 20 }}>{t("pkg.highlights")}</h2>
          <div style={{ display: "grid", gap: 14 }}>
            {p.highlights.map((h, i) => (
              <div key={i} style={{ display: "flex", gap: 14, alignItems: "flex-start", padding: 18, background: "var(--card)", border: "1px solid var(--line)", borderRadius: "var(--r-lg)" }}>
                <div style={{ width: 38, height: 38, borderRadius: 10, background: "var(--emerald-wash)", color: "var(--emerald)", display: "grid", placeItems: "center", flexShrink: 0, fontFamily: "var(--serif)", fontWeight: 700 }}>{i + 1}</div>
                <div style={{ fontWeight: 600, fontSize: 15.5, paddingTop: 7 }}>{lang === "ar" ? h[1] : h[0]}</div>
              </div>
            ))}
          </div>
        </div>
        <aside className="card card-pad sticky-aside" style={{ position: "sticky", top: 92 }}>
          <div className="muted" style={{ fontSize: 12.5 }}>{t("from.price")}</div>
          <div style={{ fontFamily: "var(--serif)", fontSize: 44, fontWeight: 600, color: "var(--emerald)" }}><Money value={p.price} /></div>
          <div className="muted" style={{ fontSize: 13.5, marginTop: 4 }}>{t("pkg.includes", { nights: p.nights })}</div>
          <div className="hr" style={{ margin: "20px 0" }}></div>
          <button className="btn btn-primary btn-lg btn-block" onClick={book}>{t("pkg.book")} <Icon name="arrow" size={17} className="flip-rtl" /></button>
          <div style={{ marginTop: 16, display: "flex", flexDirection: "column", gap: 10 }}>
            {[["check", "pkg.inc.transfers"], ["hotel", "pkg.inc.stays"], ["shield", "pkg.inc.support"]].map(([ic, l]) => (
              <div key={l} style={{ display: "flex", gap: 10, alignItems: "center", fontSize: 13.5, color: "var(--ink-2)" }}><Icon name={ic} size={16} color="var(--emerald)" /> {t(l)}</div>
            ))}
          </div>
        </aside>
      </div>
    </main>
  );
}

Object.assign(window, { HotelsPage, HotelCard, PackagesPage, PackageDetailPage });