const { useState: useStateRes, useEffect: useEffectRes } = React;

function ReservationModal({ open, onClose, initialRoom }) {
  const [step, setStep] = useStateRes(0);
  const [data, setData] = useStateRes({
    room: initialRoom?.id || "",
    date: "",
    time: "22:00",
    guests: 4,
    name: "",
    phone: "",
    occasion: "",
    bottle: "",
  });

  useEffectRes(() => {
    if (open) {
      setStep(0);
      setData((d) => ({ ...d, room: initialRoom?.id || d.room }));
    }
  }, [open, initialRoom]);

  useEffectRes(() => {
    const onKey = (e) => { if (e.key === "Escape" && open) onClose(); };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [open, onClose]);

  if (!open) return null;

  const steps = ["ROOM", "DATE & GUESTS", "DETAILS", "CONFIRM"];
  const set = (k, v) => setData((d) => ({ ...d, [k]: v }));

  const next = () => setStep((s) => Math.min(s + 1, steps.length - 1));
  const prev = () => setStep((s) => Math.max(s - 1, 0));

  const canProceed = () => {
    if (step === 0) return !!data.room;
    if (step === 1) return !!data.date && !!data.time && data.guests > 0;
    if (step === 2) return !!data.name && !!data.phone;
    return true;
  };

  const selectedRoom = ROOMS.find((r) => r.id === data.room);

  return (
    <div className="modal-backdrop" onClick={onClose}>
      <div className="modal" onClick={(e) => e.stopPropagation()} style={{ maxWidth: 820 }}>
        {/* header */}
        <div style={{
          display: "flex",
          justifyContent: "space-between",
          alignItems: "center",
          padding: "20px 28px",
          borderBottom: "1px solid #0A0A0A",
        }}>
          <div>
            <div className="meta">RESERVATION · STEP {step + 1} / {steps.length}</div>
            <div className="display" style={{ fontSize: 28, letterSpacing: "-0.03em", marginTop: 4 }}>
              {steps[step]}
            </div>
          </div>
          <button onClick={onClose} style={{
            background: "transparent",
            border: "1px solid #0A0A0A",
            width: 40, height: 40,
            fontSize: 18,
            cursor: "pointer",
            fontFamily: "'JetBrains Mono', monospace",
          }}>✕</button>
        </div>

        {/* step progress */}
        <div style={{ display: "grid", gridTemplateColumns: `repeat(${steps.length}, 1fr)` }}>
          {steps.map((_, i) => (
            <div key={i} style={{
              height: 3,
              background: i <= step ? "#2F4BFF" : "rgba(0,0,0,0.1)",
              transition: "background 260ms ease",
            }} />
          ))}
        </div>

        {/* body */}
        <div style={{ padding: 28, minHeight: 380 }}>
          {step === 0 && (
            <div>
              <p className="kr-sans" style={{ fontSize: 14, marginBottom: 24, opacity: 0.7 }}>
                원하시는 방을 선택해주세요. 각 방의 상세 정보는 호버로 확인.
              </p>
              <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 8 }}>
                {ROOMS.map((r) => (
                  <button
                    key={r.id}
                    onClick={() => set("room", r.id)}
                    style={{
                      textAlign: "left",
                      padding: 16,
                      background: data.room === r.id ? "#0A0A0A" : "transparent",
                      color: data.room === r.id ? "#F4F2ED" : "#0A0A0A",
                      border: "1px solid #0A0A0A",
                      cursor: "pointer",
                      display: "flex",
                      flexDirection: "column",
                      gap: 8,
                      transition: "all 160ms ease",
                    }}
                  >
                    <div style={{ display: "flex", justifyContent: "space-between" }}>
                      <span className="mono" style={{ fontSize: 10, letterSpacing: "0.14em", opacity: 0.6 }}>{r.id} · {r.type}</span>
                      {r.accent && <span style={{ color: "#2F4BFF" }}>●</span>}
                    </div>
                    <div className="display" style={{ fontSize: 28, letterSpacing: "-0.03em", lineHeight: 1 }}>{r.name}</div>
                    <div style={{ display: "flex", justifyContent: "space-between" }}>
                      <span className="mono" style={{ fontSize: 10, letterSpacing: "0.14em", opacity: 0.6 }}>{r.capacity} GUESTS</span>
                      <span className="mono tnum" style={{ fontSize: 10, letterSpacing: "0.14em" }}>₩{r.price}K / 2HR</span>
                    </div>
                  </button>
                ))}
              </div>
            </div>
          )}

          {step === 1 && (
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 28, marginTop: 8 }}>
              <div className="field">
                <label>DATE</label>
                <input type="date" value={data.date} onChange={(e) => set("date", e.target.value)} />
              </div>
              <div className="field">
                <label>TIME</label>
                <select value={data.time} onChange={(e) => set("time", e.target.value)}>
                  {["22:00","22:30","23:00","23:30","00:00","00:30","01:00","01:30","02:00"].map((t) => (
                    <option key={t} value={t}>{t}</option>
                  ))}
                </select>
              </div>
              <div className="field" style={{ gridColumn: "span 2" }}>
                <label>GUESTS — {data.guests} 명</label>
                <div style={{ display: "flex", gap: 8, flexWrap: "wrap", marginTop: 4 }}>
                  {[2,3,4,5,6,8,10,12,16].map((n) => (
                    <button key={n} onClick={() => set("guests", n)} className={`chip ${data.guests === n ? "active" : ""}`}>
                      {n}
                    </button>
                  ))}
                </div>
              </div>
              <div className="field" style={{ gridColumn: "span 2" }}>
                <label>DURATION</label>
                <div style={{ display: "flex", gap: 8 }}>
                  {["2HR","3HR","4HR","OPEN BAR"].map((d) => (
                    <button key={d} onClick={() => set("duration", d)} className={`chip ${data.duration === d ? "active blue" : ""}`}>
                      {d}
                    </button>
                  ))}
                </div>
              </div>
            </div>
          )}

          {step === 2 && (
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 28, marginTop: 8 }}>
              <div className="field">
                <label>NAME · 성함</label>
                <input value={data.name} onChange={(e) => set("name", e.target.value)} placeholder="홍길동" />
              </div>
              <div className="field">
                <label>PHONE · 연락처</label>
                <input value={data.phone} onChange={(e) => set("phone", e.target.value)} placeholder="010 0000 0000" />
              </div>
              <div className="field" style={{ gridColumn: "span 2" }}>
                <label>OCCASION · 방문 목적 (선택)</label>
                <div style={{ display: "flex", gap: 8, flexWrap: "wrap", marginTop: 4 }}>
                  {["생일","비즈니스","데이트","친목","VIP 접대","기타"].map((o) => (
                    <button key={o} onClick={() => set("occasion", o)} className={`chip ${data.occasion === o ? "active" : ""}`}>
                      {o}
                    </button>
                  ))}
                </div>
              </div>
              <div className="field" style={{ gridColumn: "span 2" }}>
                <label>BOTTLE · 사전 주문 (선택)</label>
                <select value={data.bottle} onChange={(e) => set("bottle", e.target.value)}>
                  <option value="">— 선택 안 함 —</option>
                  <option>Macallan 25 · ₩2,800K</option>
                  <option>Dom Pérignon P2 2004 · ₩1,800K</option>
                  <option>Hibiki 21 · ₩2,400K</option>
                  <option>Krug Grande Cuvée · ₩980K</option>
                  <option>Juyondai Ryusen · ₩890K</option>
                </select>
              </div>
            </div>
          )}

          {step === 3 && (
            <div>
              <p className="kr-sans" style={{ fontSize: 14, marginBottom: 20, opacity: 0.7 }}>
                아래 정보로 예약을 확정합니다.
              </p>
              <div style={{ border: "1px solid #0A0A0A", padding: 20 }}>
                {[
                  ["ROOM", selectedRoom ? `${selectedRoom.name} · ${selectedRoom.id} · ${selectedRoom.type}` : "—"],
                  ["DATE · TIME", `${data.date || "—"} · ${data.time}`],
                  ["GUESTS", `${data.guests} 명 · ${data.duration || "2HR"}`],
                  ["CONTACT", `${data.name} · ${data.phone}`],
                  ["OCCASION", data.occasion || "—"],
                  ["BOTTLE", data.bottle || "호스트와 상담"],
                ].map(([k, v]) => (
                  <div key={k} style={{
                    display: "grid",
                    gridTemplateColumns: "140px 1fr",
                    padding: "10px 0",
                    borderBottom: "1px solid rgba(0,0,0,0.1)",
                  }}>
                    <span className="mono" style={{ fontSize: 10, letterSpacing: "0.14em", opacity: 0.6 }}>{k}</span>
                    <span className="sans-tight" style={{ fontSize: 14 }}>{v}</span>
                  </div>
                ))}
              </div>
              <p className="kr-sans" style={{ fontSize: 11, opacity: 0.55, marginTop: 16, lineHeight: 1.5 }}>
                * 예약은 호스트 승인 후 확정됩니다. 노쇼 방지 보증금 ₩100K이 예약 시 청구됩니다.
                예약 24시간 전까지 취소 시 전액 환불.
              </p>
            </div>
          )}
        </div>

        {/* footer nav */}
        <div style={{
          display: "flex",
          justifyContent: "space-between",
          padding: "20px 28px",
          borderTop: "1px solid #0A0A0A",
          gap: 12,
        }}>
          <button className="btn" onClick={step === 0 ? onClose : prev}>
            {step === 0 ? "CANCEL" : "← BACK"}
          </button>
          {step < steps.length - 1 ? (
            <button
              className="btn blue"
              disabled={!canProceed()}
              onClick={next}
              style={{ opacity: canProceed() ? 1 : 0.35 }}
            >
              CONTINUE →
            </button>
          ) : (
            <button className="btn blue" onClick={() => { alert(`예약 요청 완료 — ${data.name}님\n호스트가 24시간 내 확인 연락 드립니다.`); onClose(); }}>
              CONFIRM RESERVATION →
            </button>
          )}
        </div>
      </div>
    </div>
  );
}

window.ReservationModal = ReservationModal;