/* VERNIS — Booking flow (multi-step modal) */
const { useState, useEffect, useMemo } = React;

function BookingModal({ open, onClose, preset }) {
  const D = window.VERNIS;
  const STEPS = ["Service", "Artist", "Date & Time", "Details", "Done"];
  const [step, setStep] = useState(0);
  const [service, setService] = useState(null);
  const [artist, setArtist] = useState("any");
  const [date, setDate] = useState(null);
  const [time, setTime] = useState(null);
  const [form, setForm] = useState({ name: "", phone: "", email: "", notes: "" });
  const [touched, setTouched] = useState(false);

  // preset service from a service-list click
  useEffect(() => {
    if (open && preset) { setService(preset); setStep(1); }
  }, [open, preset]);

  // reset shortly after close
  useEffect(() => {
    if (!open) {
      const t = setTimeout(() => {
        setStep(0); setService(null); setArtist("any");
        setDate(null); setTime(null); setTouched(false);
        setForm({ name: "", phone: "", email: "", notes: "" });
      }, 350);
      return () => clearTimeout(t);
    }
  }, [open]);

  // esc to close
  useEffect(() => {
    const h = (e) => e.key === "Escape" && onClose();
    if (open) window.addEventListener("keydown", h);
    return () => window.removeEventListener("keydown", h);
  }, [open, onClose]);

  const days = useMemo(() => {
    const arr = []; const now = new Date();
    for (let i = 1; i <= 10; i++) {
      const dd = new Date(now); dd.setDate(now.getDate() + i);
      const dow = dd.getDay();
      arr.push({
        key: dd.toISOString().slice(0, 10),
        dow: dd.toLocaleDateString("en-US", { weekday: "short" }),
        dnum: dd.getDate(),
        mon: dd.toLocaleDateString("en-US", { month: "short" }),
        closed: dow === 1, // Monday closed
        full: dd.toLocaleDateString("en-US", { weekday: "long", month: "long", day: "numeric" }),
      });
    }
    return arr.filter((d) => !d.closed).slice(0, 7);
  }, [open]);

  const times = ["10:00", "10:45", "11:30", "12:15", "1:30", "2:15", "3:00", "4:00", "4:45", "5:30"];
  const offSlots = ["11:30", "3:00"]; // pretend these are booked

  const emailOk = /\S+@\S+\.\S+/.test(form.email);
  const phoneOk = form.phone.replace(/\D/g, "").length >= 10;
  const detailsOk = form.name.trim() && phoneOk && emailOk;

  const canNext =
    (step === 0 && service) ||
    (step === 1 && artist) ||
    (step === 2 && date && time) ||
    (step === 3 && detailsOk);

  const next = () => {
    if (step === 3) { if (!detailsOk) { setTouched(true); return; } }
    setStep((s) => Math.min(s + 1, STEPS.length - 1));
  };
  const back = () => setStep((s) => Math.max(s - 1, 0));

  const artistObj = artist === "any" ? null : D.team.find((t) => t.name === artist);

  return (
    <div className={"book-overlay" + (open ? " open" : "")} onMouseDown={onClose}>
      <div className="book-modal" onMouseDown={(e) => e.stopPropagation()}>
        <div className="book-head">
          <div>
            <div className="t">{step === 4 ? "You're booked" : "Book an appointment"}</div>
            <div className="sub">{D.studio.name} · {D.studio.tagline}</div>
          </div>
          <button className="book-x" onClick={onClose} aria-label="Close">✕</button>
        </div>

        {step < 4 && (
          <div className="book-steps">
            {STEPS.slice(0, 4).map((s, i) => (
              <div key={s} className={"seg" + (i < step ? " done" : i === step ? " active" : "")}>
                <i />
              </div>
            ))}
          </div>
        )}

        <div className="book-body">
          {step === 0 && (
            <>
              <div className="q">What can we do for you?</div>
              <div className="qsub">Choose a service to begin — you can add art and extras at the studio.</div>
              {D.services.map((g) => (
                <div key={g.cat}>
                  <div className="svc-cat-label">{g.cat}</div>
                  <div className="opt-list">
                    {g.items.map((it) => {
                      const sel = service && service.name === it.name;
                      return (
                        <div key={it.name} className={"opt" + (sel ? " sel" : "")}
                             onClick={() => setService({ ...it, cat: g.cat })}>
                          <div className="info">
                            <div className="nm">{it.name}</div>
                            <div className="ds">{it.dur}</div>
                          </div>
                          <div className="pr">${it.price}{it.plus ? "+" : ""}</div>
                          <div className="check" />
                        </div>
                      );
                    })}
                  </div>
                </div>
              ))}
            </>
          )}

          {step === 1 && (
            <>
              <div className="q">Pick your artist</div>
              <div className="qsub">No preference? We'll match you with the best available.</div>
              <div className="opt-list">
                <div className={"opt" + (artist === "any" ? " sel" : "")} onClick={() => setArtist("any")}>
                  <div className="av ghost">✶</div>
                  <div className="info">
                    <div className="nm">Any available artist</div>
                    <div className="ds">Earliest opening · recommended</div>
                  </div>
                  <div className="check" />
                </div>
                {D.team.map((t) => (
                  <div key={t.name} className={"opt" + (artist === t.name ? " sel" : "")}
                       onClick={() => setArtist(t.name)}>
                    <div className="av">{t.initials}</div>
                    <div className="info">
                      <div className="nm">{t.name}</div>
                      <div className="ds">{t.role}</div>
                    </div>
                    <div className="check" />
                  </div>
                ))}
              </div>
            </>
          )}

          {step === 2 && (
            <>
              <div className="q">Choose a time</div>
              <div className="qsub">Showing the next available days. We're closed Mondays.</div>
              <div className="date-row">
                {days.map((d) => (
                  <div key={d.key} className={"date-chip" + (date && date.key === d.key ? " sel" : "")}
                       onClick={() => { setDate(d); setTime(null); }}>
                    <div className="dow">{d.dow}</div>
                    <div className="dnum">{d.dnum}</div>
                    <div className="mon">{d.mon}</div>
                  </div>
                ))}
              </div>
              {date && (
                <div className="time-grid">
                  {times.map((t) => {
                    const off = offSlots.includes(t);
                    return (
                      <div key={t} className={"time-chip" + (off ? " off" : "") + (time === t ? " sel" : "")}
                           onClick={() => !off && setTime(t)}>
                        {t}
                      </div>
                    );
                  })}
                </div>
              )}
            </>
          )}

          {step === 3 && (
            <>
              <div className="q">Almost there</div>
              <div className="qsub">We'll send a confirmation and a reminder the day before.</div>
              <div className={"field" + (touched && !form.name.trim() ? " err" : "")}>
                <label>Full name</label>
                <input value={form.name} placeholder="Jordan Avery"
                       onChange={(e) => setForm({ ...form, name: e.target.value })} />
              </div>
              <div className={"field" + (touched && !phoneOk ? " err" : "")}>
                <label>Phone</label>
                <input value={form.phone} placeholder="(503) 555-0114"
                       onChange={(e) => setForm({ ...form, phone: e.target.value })} />
                {touched && !phoneOk && <div className="msg">Enter a valid phone number.</div>}
              </div>
              <div className={"field" + (touched && !emailOk ? " err" : "")}>
                <label>Email</label>
                <input value={form.email} placeholder="you@email.com"
                       onChange={(e) => setForm({ ...form, email: e.target.value })} />
                {touched && !emailOk && <div className="msg">Enter a valid email address.</div>}
              </div>
              <div className="field">
                <label>Notes <span style={{ color: "var(--muted)", fontWeight: 400 }}>(optional)</span></label>
                <textarea value={form.notes} placeholder="Inspo links, allergies, accessibility needs…"
                          onChange={(e) => setForm({ ...form, notes: e.target.value })} />
              </div>
              <div className="summary">
                <div className="srow"><span className="k">Service</span><span className="v">{service?.name}</span></div>
                <div className="srow"><span className="k">Artist</span><span className="v">{artistObj ? artistObj.name : "Any available"}</span></div>
                <div className="srow"><span className="k">When</span><span className="v">{date?.full}, {time}</span></div>
                <div className="srow"><span className="k total">Estimate</span><span className="v total">${service?.price}{service?.plus ? "+" : ""}</span></div>
              </div>
            </>
          )}

          {step === 4 && (
            <div className="confirm">
              <div className="ring">✓</div>
              <h3>See you soon, {form.name.split(" ")[0] || "friend"}!</h3>
              <p>Your {service?.name.toLowerCase()} with {artistObj ? artistObj.name : "our team"} is held for <b>{date?.full} at {time}</b>.</p>
              <p>A confirmation is on its way to {form.email}.</p>
            </div>
          )}
        </div>

        {step < 4 ? (
          <div className="book-foot">
            {step > 0 ? <button className="back" onClick={back}>← Back</button> : <span />}
            <div className="spacer" />
            <button className="btn btn-primary" disabled={!canNext}
                    style={!canNext ? { opacity: .45, cursor: "not-allowed" } : null}
                    onClick={next}>
              {step === 3 ? "Confirm booking" : "Continue"}
              <span className="arrow">→</span>
            </button>
          </div>
        ) : (
          <div className="book-foot">
            <div className="spacer" />
            <button className="btn btn-primary" onClick={onClose}>Done</button>
          </div>
        )}
      </div>
    </div>
  );
}

window.BookingModal = BookingModal;