// pages/room-detail.jsx — single room detail with gallery, amenities, policy

function RoomDetailPage() {
  const { t, lang, navigate, currency, route } = useApp();
  const idx = (route.params && route.params.roomIdx) || 0;
  const card = t.rooms.cards[idx] || t.rooms.cards[0];
  const photos = photosFor(idx);
  const [activeImg, setActiveImg] = useState(0);
  const safeActive = Math.min(activeImg, Math.max(0, photos.length - 1));

  return (
    <div className="page-enter">
      <section style={{ paddingTop: 140, paddingBottom: 0 }}>
        <div className="container">
          <button className="btn-line" style={{ background: "none", marginBottom: 32, color: "var(--ink-2)", display: "inline-flex", alignItems: "center", gap: 10 }} onClick={() => navigate("rooms")}>
            <Ic.arrowL /> {t.roomDetail.back}
          </button>
          <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 60, alignItems: "end", marginBottom: 48 }}>
            <div>
              <div className="eyebrow" style={{ marginBottom: 20 }}>{card.tag} · 0{idx + 1} / 0{t.rooms.cards.length}</div>
              <h1 style={{ fontFamily: "var(--font-display)", fontSize: "clamp(48px, 6vw, 80px)", fontWeight: 400, lineHeight: 1, marginBottom: 24 }}>
                {card.name}
              </h1>
              <p className="lead" style={{ maxWidth: "60ch" }}>{card.desc}</p>
            </div>
            <div style={{ background: "var(--bg-2)", padding: 28, borderLeft: "2px solid var(--accent)" }}>
              <div className="uppercase" style={{ color: "var(--ink-3)", marginBottom: 8 }}>{t.common.from}</div>
              <div style={{ fontFamily: "var(--font-display)", fontSize: 56, lineHeight: 1, color: "var(--ink)", marginBottom: 4 }}>
                {formatPrice(card.priceFrom, currency)}
              </div>
              <div style={{ fontSize: 13, color: "var(--ink-2)", marginBottom: 24 }}>{t.common.perNight} · {lang === "pl" ? "bez śniadania" : "no breakfast"}</div>
              <button className="btn" style={{ width: "100%", justifyContent: "center" }} onClick={() => navigate("reservation", { roomIdx: idx })}>
                {t.common.bookNow}
              </button>
            </div>
          </div>
        </div>
      </section>

      <section style={{ paddingTop: 0, paddingBottom: 60 }}>
        <div className="container">
          {photos.length > 0 && (
            <>
              <Photo src={photos[safeActive]} alt={`${card.name} — ${safeActive + 1}`} ratio="16/9" style={{ marginBottom: 16 }} />
              <div style={{ display: "grid", gridTemplateColumns: `repeat(${photos.length}, 1fr)`, gap: 16 }}>
                {photos.map((src, i) => (
                  <button key={src}
                    onClick={() => setActiveImg(i)}
                    style={{ background: "none", border: 0, padding: 0, cursor: "pointer", opacity: safeActive === i ? 1 : 0.55, outline: safeActive === i ? "2px solid var(--accent)" : "none", outlineOffset: 4, transition: "opacity .3s" }}
                  >
                    <Photo src={src} alt={`${card.name} — ${i + 1}`} ratio="4/3" />
                  </button>
                ))}
              </div>
            </>
          )}
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 60 }}>
            <div>
              <div className="eyebrow" style={{ marginBottom: 24 }}>{t.roomDetail.amenitiesTitle}</div>
              <ul style={{ listStyle: "none", padding: 0, margin: 0 }}>
                {t.roomDetail.amenities.map((a, i) => (
                  <li key={i} style={{ display: "flex", alignItems: "center", gap: 12, padding: "10px 0", borderBottom: "1px dashed var(--line)", fontSize: 14 }}>
                    <Ic.check color="var(--accent)" />
                    <span>{a}</span>
                  </li>
                ))}
              </ul>
            </div>
            <div>
              <div className="eyebrow" style={{ marginBottom: 24 }}>{t.roomDetail.includesTitle}</div>
              <ul style={{ listStyle: "none", padding: 0, margin: 0 }}>
                {t.roomDetail.includes.map((a, i) => (
                  <li key={i} style={{ display: "flex", alignItems: "flex-start", gap: 14, padding: "16px 0", borderBottom: "1px dashed var(--line)" }}>
                    <span style={{ fontFamily: "var(--font-display)", fontStyle: "italic", fontSize: 18, color: "var(--accent)", lineHeight: 1 }}>0{i + 1}</span>
                    <span style={{ fontSize: 14, color: "var(--ink-2)" }}>{a}</span>
                  </li>
                ))}
              </ul>
            </div>
            <div style={{ background: "var(--bg-2)", padding: 32 }}>
              <div className="eyebrow" style={{ marginBottom: 24 }}>{t.roomDetail.policyTitle}</div>
              {t.roomDetail.policy.map(([k, v], i) => (
                <div key={i} style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", padding: "16px 0", borderBottom: i < t.roomDetail.policy.length - 1 ? "1px dashed var(--line-2)" : "none" }}>
                  <span className="uppercase" style={{ color: "var(--ink-3)" }}>{k}</span>
                  <span style={{ fontSize: 14, color: "var(--ink)" }}>{v}</span>
                </div>
              ))}
              <Divider />
              <p style={{ fontSize: 13, color: "var(--ink-2)", marginTop: 16 }}>
                {lang === "pl"
                  ? "Wszystkie nasze stawki są transparentne — bez ukrytych dopłat. Podatek VAT i opłata klimatyczna w cenie."
                  : "All our rates are transparent — no hidden fees. VAT and local tax are included."}
              </p>
            </div>
          </div>
        </div>
      </section>

      <section className="section" style={{ background: "var(--bg-2)" }}>
        <div className="container">
          <div className="split-2" style={{ alignItems: "center" }}>
            <Photo src="images/hostel/kitchen.jpg" alt={lang === "pl" ? "Wspólna kuchnia" : "Shared kitchen"} ratio="4/5" />
            <div>
              <div className="eyebrow" style={{ marginBottom: 24 }}>{lang === "pl" ? "Szczegóły" : "Details"}</div>
              <h2 className="h2" style={{ marginBottom: 28, maxWidth: "14ch" }}>
                {lang === "pl"
                  ? <>Pokój własny,<br /><em style={{ fontStyle: "italic", color: "var(--accent)" }}>kuchnia wspólna.</em></>
                  : <>Your own room,<br /><em style={{ fontStyle: "italic", color: "var(--accent)" }}>a shared kitchen.</em></>}
              </h2>
              <p className="lead" style={{ marginBottom: 24 }}>
                {lang === "pl"
                  ? "Każdy gość ma własny pokój z prywatną łazienką, pełen spokój na noc. Do tego dostęp 24h do wspólnej kuchni z pełnym wyposażeniem."
                  : "Every guest has their own room with a private bathroom — full quiet at night. Plus 24-hour access to a fully equipped shared kitchen."}
              </p>
              <p className="muted" style={{ fontSize: 14 }}>
                {lang === "pl"
                  ? "Płyta indukcyjna, mikrofalówka, lodówka, ekspres do kawy, toster, czajnik elektryczny i podstawowe naczynia. Możliwość prasowania na prośbę."
                  : "Induction hob, microwave, fridge, espresso machine, toaster, electric kettle, and basic crockery. Iron and ironing board available on request."}
              </p>
            </div>
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "end", marginBottom: 40, gap: 40, flexWrap: "wrap" }}>
            <div>
              <div className="eyebrow" style={{ marginBottom: 20 }}>{lang === "pl" ? "Drugi pokój" : "The other room"}</div>
              <h2 className="h2">
                {lang === "pl" ? "Może spodoba się też..." : "You may also like..."}
              </h2>
            </div>
            <button className="btn-line" onClick={() => navigate("rooms")}>
              {lang === "pl" ? "Wszystkie pokoje" : "All rooms"} <Ic.arrow />
            </button>
          </div>
          {(() => {
            const otherIdx = (idx + 1) % t.rooms.cards.length;
            const other = t.rooms.cards[otherIdx];
            return (
              <RoomRow card={other} idx={otherIdx} reverse={false}
                onView={() => navigate("room-detail", { roomIdx: otherIdx })}
                onBook={() => navigate("reservation", { roomIdx: otherIdx })}
              />
            );
          })()}
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { RoomDetailPage });