// Hotel Walks — Guest-facing cancellation page.
// Standalone page (no app chrome). Linked from the walk letter or a guest SMS.
// Standardised verbiage: "Under the circumstances, the hotel has released your
// obligation to return…"

(function() {
  const { useState } = React;
  const { Caps, Btn, Pill, Hr, money } = window.UI;
  const { SmartKey, Lockup } = window.HW;
  const { ME, SENT } = window.HW_DATA;

  function Guest({ id }) {
    // Fake: tie the page to W-77412 (Maya Klein, sent to 1 Hotel Brooklyn Bridge)
    const walk = SENT.find(w => w.id === id) || SENT[0];
    const [choice, setChoice] = useState(null); // null | "return" | "cancel" | "done"

    if (choice === "done") {
      const word = (walk.id === "_") ? "return" : (walk._lastChoice || "");
      return (
        <Page>
          <div style={{ maxWidth: 640, margin: "0 auto", padding: "120px 32px 160px", textAlign: "center" }}>
            <SmartKey size={56} />
            <div className="serif-i" style={{ fontSize: 52, lineHeight: 1.04, marginTop: 36, marginBottom: 16 }}>
              Thank you.
            </div>
            <p style={{ fontSize: 16, lineHeight: 1.6, color: "var(--muted)", maxWidth: "38ch", margin: "0 auto" }}>
              {ME.property.name} has been notified of your choice. A confirmation has been sent to the email on your reservation.
            </p>
            <div style={{ marginTop: 48 }}>
              <Btn kind="ghost" onClick={() => setChoice(null)}>← Change my answer</Btn>
            </div>
          </div>
        </Page>
      );
    }

    return (
      <Page>
        <div style={{
          maxWidth: 720, margin: "0 auto",
          padding: "80px 32px 100px",
        }}>
          {/* Letterhead */}
          <header style={{
            display: "flex", alignItems: "center", gap: 16,
            paddingBottom: 28, borderBottom: "1px solid var(--rule)",
          }}>
            <SmartKey size={44} />
            <div>
              <div className="serif-i" style={{ fontSize: 22, lineHeight: 1 }}>{ME.property.name}</div>
              <div style={{ marginTop: 6 }}><Caps>{ME.property.area}</Caps></div>
            </div>
          </header>

          {/* Salutation */}
          <section style={{ paddingTop: 44, paddingBottom: 24 }}>
            <Caps>A note for the guest of</Caps>
            <div className="serif-i" style={{ fontSize: 56, lineHeight: 1.02, marginTop: 18 }}>
              {walk.guest.name}
            </div>
          </section>

          {/* The verbiage */}
          <section style={{ paddingBottom: 32 }}>
            <p style={{
              fontFamily: "'Spectral', serif", fontWeight: 300, fontStyle: "italic",
              fontSize: 22, lineHeight: 1.5, color: "var(--ink)", margin: 0,
            }}>
              Under the circumstances, the hotel has released your obligation
              to return to the hotel for the remainder of your reservation.
              Please select whether you will be returning on
              {" "}<span style={{ borderBottom: "1px solid var(--ink)", paddingBottom: 2 }}>{formatDate(walk.guest.arrival)}</span>,
              or if you would like to cancel the remaining dates of your reservation at no charge.
            </p>
          </section>

          {/* Reservation summary */}
          <section style={{
            display: "grid", gridTemplateColumns: "1fr 1fr 1fr",
            gap: 24,
            padding: "24px 0",
            borderTop: "1px solid var(--rule)",
            borderBottom: "1px solid var(--rule)",
          }} className="res-grid">
            <Sm k="Confirmation" v={walk.guest.confirmation} mono />
            <Sm k="Arrival" v={formatDate(walk.guest.arrival)} />
            <Sm k="Re-housed at" v={walk.to?.name || "—"} />
          </section>

          {/* Choices */}
          <section style={{ paddingTop: 44 }}>
            <Caps style={{ marginBottom: 16 }}>Choose one</Caps>
            <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
              <ChoiceCard
                label="I will return"
                sub={`Returning to ${ME.property.name} on ${formatDate(walk.guest.arrival)}`}
                selected={choice === "return"}
                onClick={() => setChoice("return")}
              />
              <ChoiceCard
                label="Cancel the remaining dates"
                sub="No charge for the remaining nights of my reservation"
                selected={choice === "cancel"}
                onClick={() => setChoice("cancel")}
              />
            </div>

            <div style={{ marginTop: 36, display: "flex", justifyContent: "space-between", alignItems: "center", gap: 16, flexWrap: "wrap" }}>
              <div style={{ fontSize: 12, color: "var(--muted)", maxWidth: "44ch" }}>
                A confirmation will be sent to the email on your reservation. You can change this answer up until your scheduled arrival.
              </div>
              <Btn size="lg" disabled={!choice} onClick={() => { walk._lastChoice = choice; setChoice("done"); }}>
                Confirm my answer
              </Btn>
            </div>
          </section>

          {/* Footer note */}
          <footer style={{ marginTop: 80, paddingTop: 24, borderTop: "1px solid var(--rule)", display: "flex", justifyContent: "space-between", flexWrap: "wrap", gap: 12 }}>
            <Caps>Sent via Hotel Walks · communication only</Caps>
            <Caps>{walk.serial || "260521-K-WYTHE-1HBB-0027841"}</Caps>
          </footer>
        </div>
      </Page>
    );
  }

  function ChoiceCard({ label, sub, selected, onClick }) {
    return (
      <button onClick={onClick} style={{
        textAlign: "left", display: "flex", alignItems: "center", gap: 18,
        padding: "22px 24px",
        background: selected ? "var(--ink)" : "transparent",
        color: selected ? "var(--bone)" : "var(--ink)",
        border: "1px solid var(--ink)",
        cursor: "pointer",
        transition: "background 0.12s, color 0.12s",
        width: "100%",
      }}>
        <span style={{
          width: 20, height: 20, borderRadius: 20,
          border: "1px solid " + (selected ? "var(--bone)" : "var(--ink)"),
          background: selected ? "var(--bone)" : "transparent",
          flexShrink: 0,
        }}/>
        <div>
          <div className="serif-i" style={{ fontSize: 22 }}>{label}</div>
          <div style={{ marginTop: 4, fontSize: 13, opacity: 0.7 }}>{sub}</div>
        </div>
      </button>
    );
  }

  function Sm({ k, v, mono }) {
    return (
      <div>
        <Caps>{k}</Caps>
        <div className={mono ? "mono" : "serif-i"} style={{ marginTop: 6, fontSize: mono ? 14 : 20 }}>{v}</div>
      </div>
    );
  }

  function Page({ children }) {
    return (
      <div style={{ minHeight: "100vh", background: "var(--bone)", color: "var(--ink)" }}>
        <style>{`
          @media (max-width: 560px) {
            .res-grid { grid-template-columns: 1fr !important; }
          }
        `}</style>
        {children}
      </div>
    );
  }

  function formatDate(iso) {
    if (!iso) return "—";
    try {
      const d = new Date(iso + "T00:00:00");
      return d.toLocaleDateString(undefined, { weekday: "long", month: "long", day: "numeric" });
    } catch (e) { return iso; }
  }

  window.Screens = window.Screens || {};
  window.Screens.Guest = Guest;
})();