/* global React */
const { useState: useGiftState } = React;

function GiftDrawer({ open, onClose }) {
  const [amt, setAmt] = useGiftState(100);
  const [custom, setCustom] = useGiftState(false);
  const [data, setData] = useGiftState({});
  const [sent, setSent] = useGiftState(false);
  const set = (p) => setData(d => ({ ...d, ...p }));

  const close = () => {
    onClose();
    setTimeout(() => { setSent(false); setData({}); setAmt(100); setCustom(false); }, 500);
  };

  const denominations = [50, 100, 200, 300];

  return (
    <div className={"book-overlay" + (open ? " open" : "")} onClick={(e) => { if (e.target.classList.contains("book-overlay")) close(); }}>
      <div className="book-drawer">
        <div className="book-head">
          <div>
            <div style={{ fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: "0.25em", color: "var(--stone)", textTransform: "uppercase", marginBottom: 4 }}>Voucher</div>
            <div className="title">{sent ? "贈呈完了" : "Gift the onsen"}</div>
          </div>
          <button className="close" onClick={close} aria-label="Close">
            <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M1 1l12 12M13 1L1 13" stroke="currentColor" strokeWidth="1.4" /></svg>
          </button>
        </div>

        <div className="book-body">
          {!sent && (
            <>
              <div className="book-step">
                <h3>A quiet hour, given.</h3>
                <p className="sub">Vouchers are delivered as a designed PDF. Valid for 12 months. Redeemable against any service.</p>

                <label style={{ fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: "0.2em", color: "var(--stone)", textTransform: "uppercase", display: "block", marginBottom: 12, marginTop: 24 }}>Amount</label>
                {denominations.map(d => (
                  <div
                    key={d}
                    className={"gift-card" + ((!custom && amt === d) ? " selected" : "")}
                    onClick={() => { setCustom(false); setAmt(d); }}
                  >
                    <div className="amt">${d}</div>
                    <div className="desc">{d === 50 ? "A facial, or a 60-minute massage." : d === 100 ? "Our most-given amount — covers a treatment with onsen." : d === 200 ? "The Three-Hour Body Care, with a coffee after." : "An extravagance. A whole afternoon, twice."}</div>
                  </div>
                ))}
                <div
                  className={"gift-card" + (custom ? " selected" : "")}
                  onClick={() => setCustom(true)}
                  style={{ gridTemplateColumns: "1fr" }}
                >
                  <div style={{ display: "flex", alignItems: "center", gap: 16 }}>
                    <div className="amt">$</div>
                    <input
                      type="number" min="20" max="2000"
                      placeholder="Custom amount"
                      value={custom ? (amt || "") : ""}
                      onClick={() => setCustom(true)}
                      onChange={e => setAmt(parseInt(e.target.value, 10) || 0)}
                      style={{ fontFamily: "var(--font-display)", fontSize: 28, background: "transparent", border: "none", width: 200, color: "var(--ink)", outline: "none" }}
                    />
                  </div>
                </div>

                <div style={{ marginTop: 32 }}>
                  <h4 style={{ fontFamily: "var(--font-display)", fontSize: 22, marginBottom: 4 }}>For whom</h4>
                  <p className="sub">Optional — leave blank to receive the voucher yourself and deliver it in person.</p>
                </div>

                <div className="field-group" style={{ marginTop: 16 }}>
                  <div className="field"><label>Recipient name</label><input value={data.toName||""} onChange={e=>set({toName:e.target.value})} placeholder="Lina" /></div>
                  <div className="field"><label>Recipient email</label><input value={data.toEmail||""} onChange={e=>set({toEmail:e.target.value})} placeholder="lina@example.com" /></div>
                  <div className="field full">
                    <label>A note (optional)</label>
                    <textarea value={data.note||""} onChange={e=>set({note:e.target.value})} placeholder="An afternoon for you, with my love." />
                  </div>
                </div>

                <div style={{ marginTop: 24 }}>
                  <h4 style={{ fontFamily: "var(--font-display)", fontSize: 22, marginBottom: 16 }}>Your details</h4>
                  <div className="field-group">
                    <div className="field"><label>Your name</label><input value={data.fromName||""} onChange={e=>set({fromName:e.target.value})} /></div>
                    <div className="field"><label>Your email</label><input type="email" value={data.fromEmail||""} onChange={e=>set({fromEmail:e.target.value})} /></div>
                  </div>
                </div>
              </div>

              <div className="book-foot">
                <div className="book-summary">
                  <span>Voucher</span>
                  <strong>${amt || 0}</strong>
                </div>
                <button
                  className="btn btn-red"
                  disabled={!amt || !data.fromName || !data.fromEmail}
                  style={{ opacity: (amt && data.fromName && data.fromEmail) ? 1 : 0.4 }}
                  onClick={() => (amt && data.fromName && data.fromEmail) && setSent(true)}
                >
                  Continue to payment
                  <svg width="14" height="10" viewBox="0 0 14 10" fill="none"><path d="M1 5h12m0 0L9 1m4 4L9 9" stroke="currentColor" strokeWidth="1.4" /></svg>
                </button>
              </div>
            </>
          )}

          {sent && (
            <div className="book-step confirm">
              <div className="stamp-big"><img src="assets/logo.jpg" alt="Nik Onsen" /></div>
              <h3 className="serif">Voucher sent</h3>
              <p className="lede">A designed PDF voucher is on its way to {data.toEmail || data.fromEmail}. Redeem at <strong>nikonsen.com/redeem</strong> or in person.</p>
              <div className="confirm-card">
                <div className="row"><span className="k">Code</span><span className="v">NIK·{Math.random().toString(36).slice(2, 8).toUpperCase()}</span></div>
                <div className="row"><span className="k">Value</span><span className="v">${amt}</span></div>
                <div className="row"><span className="k">From</span><span className="v">{data.fromName}</span></div>
                <div className="row"><span className="k">To</span><span className="v">{data.toName || "—"}</span></div>
                <div className="row"><span className="k">Expires</span><span className="v">{new Date(Date.now() + 365*24*60*60*1000).toLocaleDateString("en", { month: "short", day: "numeric", year: "numeric" })}</span></div>
              </div>
              <div style={{ marginTop: 32 }}>
                <button className="btn btn-ghost" onClick={close}>Close</button>
              </div>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

window.GiftDrawer = GiftDrawer;