const { Button, Input, Badge, Card, StarRating } = window.GDVExpressDesignSystem_766357;

/* Member-rate checkout for a selected stay. Confirms into a saved booking. */
function CheckoutScreen({ stay, onBack, onConfirm }) {
  const [done, setDone] = React.useState(false);
  const s = stay || {};
  const price = parseInt((s.price || "$0").replace(/[^0-9]/g, ""), 10) || 0;
  const taxes = Math.round(price * 0.12);
  const total = price + taxes;

  if (done) {
    return (
      <div style={{ maxWidth: "720px", margin: "0 auto", padding: "48px 30px 80px", textAlign: "center" }}>
        <div style={{ width: "62px", height: "62px", borderRadius: "50%", background: "var(--green-100)", color: "var(--green-600)", display: "flex", alignItems: "center", justifyContent: "center", fontSize: "30px", margin: "0 auto 16px" }}>✓</div>
        <h1 style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: "28px", color: "var(--navy-800)", margin: "0 0 8px" }}>You're booked, Dana!</h1>
        <p style={{ color: "var(--muted)", fontSize: "15px", maxWidth: "440px", margin: "0 auto 6px", lineHeight: 1.5 }}>
          <b style={{ color: "var(--ink-700)" }}>{s.title}</b> is confirmed. We've emailed your confirmation and saved it to your account.
        </p>
        <div style={{ display: "inline-block", background: "var(--surface-sunken)", borderRadius: "var(--radius-pill)", padding: "7px 16px", fontSize: "13px", fontWeight: 700, color: "var(--navy-800)", margin: "10px 0 26px" }}>
          Confirmation # GX-{(8349 + price).toString().slice(-6)}
        </div>
        <div style={{ display: "flex", gap: "12px", justifyContent: "center" }}>
          <Button variant="primary" onClick={() => onConfirm && onConfirm("history")}>View travel history</Button>
          <Button variant="secondary" onClick={onBack}>Back to stays</Button>
        </div>
      </div>
    );
  }

  return (
    <div style={{ maxWidth: "920px", margin: "0 auto", padding: "22px 30px 70px" }}>
      <button onClick={onBack} style={{ background: "none", border: "none", cursor: "pointer", color: "var(--navy-600)", fontFamily: "var(--font-sans)", fontWeight: 700, fontSize: "13px", padding: "8px 0 16px" }}>← Back to stays</button>
      <div style={{ display: "grid", gridTemplateColumns: "1.5fr 1fr", gap: "22px", alignItems: "start" }}>
        <div style={{ display: "flex", flexDirection: "column", gap: "18px" }}>
          <Card padding="0" style={{ overflow: "hidden" }}>
            <div style={{ height: "180px", position: "relative", background: s.image ? `center/cover url('../../assets/photos/${s.image}')` : "linear-gradient(135deg,#41A7DE,#1d6ea0)", display: "flex", alignItems: "flex-end", padding: "16px", color: "#fff" }}>
              <div style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.6))" }}></div>
              <div style={{ position: "relative" }}>
                <div style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: "20px", textShadow: "0 1px 4px rgba(0,0,0,.45)" }}>{s.title}</div>
                <div style={{ fontSize: "13px", opacity: 0.95, textShadow: "0 1px 4px rgba(0,0,0,.45)" }}>{s.location}</div>
              </div>
            </div>
            <div style={{ padding: "16px" }}>
              <div style={{ display: "flex", alignItems: "center", gap: "12px", marginBottom: "8px" }}>
                <StarRating value={s.rating || 4} size={14} />
                {s.preferred && <Badge tone="pref">Member pick</Badge>}
              </div>
              <div style={{ fontSize: "13.5px", color: "var(--muted)" }}>{s.meta}</div>
            </div>
          </Card>

          <Card padding="18px">
            <div style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: "16px", color: "var(--navy-800)", marginBottom: "14px" }}>Who's travelling</div>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "12px" }}>
              <Input label="First name" defaultValue="Dana" />
              <Input label="Last name" defaultValue="Whitfield" />
              <Input label="Email" defaultValue="dana@example.com" />
              <Input label="Phone" defaultValue="(555) 014-2280" />
            </div>
          </Card>
        </div>

        <Card padding="18px" style={{ position: "sticky", top: "82px" }}>
          <div style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: "16px", color: "var(--navy-800)", marginBottom: "14px" }}>Price summary</div>
          {[["Member rate · 7 nights", `$${price}`], ["Taxes & resort fees", `$${taxes}`]].map(([k, v]) => (
            <div key={k} style={{ display: "flex", justifyContent: "space-between", fontSize: "13.5px", color: "var(--muted)", padding: "5px 0" }}>
              <span>{k}</span><span style={{ color: "var(--ink-700)", fontWeight: 600 }}>{v}</span>
            </div>
          ))}
          <div style={{ display: "flex", justifyContent: "space-between", borderTop: "1px solid var(--line)", marginTop: "8px", paddingTop: "12px" }}>
            <span style={{ fontWeight: 800, color: "var(--navy-800)" }}>Total</span>
            <span style={{ fontWeight: 800, fontSize: "20px", color: "var(--navy-800)" }}>${total}</span>
          </div>
          <div style={{ background: "var(--gold-100)", borderRadius: "var(--radius-sm)", padding: "9px 11px", fontSize: "12px", color: "#6B4A12", margin: "14px 0", lineHeight: 1.4 }}>
            Your member rate is already applied — the price you see is the price you pay.
          </div>
          <Button variant="primary" style={{ width: "100%" }} onClick={() => setDone(true)}>Confirm &amp; book</Button>
        </Card>
      </div>
    </div>
  );
}
window.CheckoutScreen = CheckoutScreen;