// booking.jsx — "Next Available" viewer (Fresha-style). Concept prototype for the pitch.
const { useState: useStateB, useEffect: useEffectB } = React;

function NextAvailableModal({ open, onClose }) {
  const firstOpen = DAYS.find((d) => !d.closed);
  const [day, setDay] = useStateB(firstOpen ? firstOpen.key : null);
  const [time, setTime] = useStateB(null);
  const [done, setDone] = useStateB(false);

  useEffectB(() => {
    if (open) { setDay(firstOpen ? firstOpen.key : null); setTime(null); setDone(false); }
  }, [open]);

  useEffectB(() => {
    const esc = (e) => { if (e.key === "Escape") onClose(); };
    if (open) document.addEventListener("keydown", esc);
    document.body.style.overflow = open ? "hidden" : "";
    return () => { document.removeEventListener("keydown", esc); document.body.style.overflow = ""; };
  }, [open]);

  if (!open) return null;
  const dayObj = DAYS.find((d) => d.key === day);

  return (
    <div className="modal-scrim" onClick={(e) => { if (e.target.classList.contains("modal-scrim")) onClose(); }}>
      <div className="modal" role="dialog" aria-modal="true">
        {/* header */}
        <div style={{ padding: "22px 26px", borderBottom: "1px solid var(--ash)", display: "flex", alignItems: "center", justifyContent: "space-between", flexShrink: 0 }}>
          <div>
            <div className="display" style={{ fontSize: 21 }}>NEXT AVAILABLE</div>
            <div className="label" style={{ color: "var(--dim)", fontSize: 10, marginTop: 5, letterSpacing: "0.2em" }}>{SHOP.sub}</div>
          </div>
          <button onClick={onClose} aria-label="Close" style={{ background: "none", border: "1px solid var(--ash)", color: "var(--cream)", width: 38, height: 38, cursor: "pointer", fontSize: 16, borderRadius: 0 }}>✕</button>
        </div>

        {/* body */}
        <div style={{ flex: 1, overflowY: "auto", padding: "24px 26px" }}>
          {!done ? (
            <>
              <div style={{ display: "flex", alignItems: "center", gap: 9, marginBottom: 22 }}>
                <span style={{ color: "var(--yellow)" }}>★★★★★</span>
                <span className="label" style={{ color: "var(--dim)", fontSize: 11, letterSpacing: "0.1em" }}>4.8 ON GOOGLE · 336 REVIEWS</span>
              </div>

              <div className="label" style={{ color: "var(--dim)", fontSize: 12, marginBottom: 12, letterSpacing: "0.16em" }}>PICK A DAY</div>
              <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(58px,1fr))", gap: 8, marginBottom: 28 }}>
                {DAYS.map((d) => (
                  <button key={d.key} disabled={d.closed} className={"chip" + (day === d.key ? " sel" : "")} onClick={() => { setDay(d.key); setTime(null); }} style={{ display: "flex", flexDirection: "column", gap: 3, padding: "10px 2px" }}>
                    <span style={{ fontSize: 10, opacity: 0.7 }}>{d.dow}</span>
                    <span className="display" style={{ fontSize: 19 }}>{d.num}</span>
                  </button>
                ))}
              </div>

              {dayObj && !dayObj.closed && (
                <>
                  <div className="label" style={{ color: "var(--dim)", fontSize: 12, marginBottom: 12, letterSpacing: "0.16em" }}>OPEN TIMES</div>
                  <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(74px,1fr))", gap: 8 }}>
                    {TIMES.map((t, i) => {
                      const taken = (i + dayObj.num) % 3 === 0;
                      return (
                        <button key={t} disabled={taken} className={"chip" + (time === t ? " sel" : "")} onClick={() => setTime(t)}>{t}</button>
                      );
                    })}
                  </div>
                  <div className="label" style={{ color: "var(--faint)", fontSize: 10.5, marginTop: 18, letterSpacing: "0.1em", lineHeight: 1.7 }}>
                    LIVE AVAILABILITY RUNS ON FRESHA · THIS IS A CONCEPT PREVIEW
                  </div>
                </>
              )}
            </>
          ) : (
            <div style={{ textAlign: "center", paddingTop: 36 }}>
              <div style={{ width: 74, height: 74, border: "2px solid var(--yellow)", display: "flex", alignItems: "center", justifyContent: "center", margin: "0 auto 24px", color: "var(--yellow)", fontSize: 34 }}>✓</div>
              <div className="eyebrow" style={{ marginBottom: 14 }}>HOLD SENT TO FRESHA</div>
              <h3 className="display" style={{ fontSize: 34 }}>SEE YOU<br />{dayObj ? dayObj.dow + " " + dayObj.num : ""}.</h3>
              <p style={{ color: "var(--dim)", marginTop: 16 }}>Confirm and pay in the shop. Need to change it? Call {SHOP.phone}.</p>
            </div>
          )}
        </div>

        {/* footer */}
        <div style={{ padding: "18px 26px", borderTop: "1px solid var(--ash)", flexShrink: 0 }}>
          {!done ? (
            <button className="btn btn-yellow" style={{ width: "100%", justifyContent: "center", opacity: time ? 1 : 0.4, pointerEvents: time ? "auto" : "none" }} onClick={() => setDone(true)}>
              {time ? "REQUEST THIS CHAIR" : "PICK A TIME"} <span className="arr">→</span>
            </button>
          ) : (
            <button className="btn btn-ghost" style={{ width: "100%", justifyContent: "center" }} onClick={onClose}>DONE</button>
          )}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { NextAvailableModal });