// BOOK SHEET — Service → Barber → Date+Time → Review → Confirmed
// User is logged in so we pre-fill name/phone/email and skip the details step.

const BookSheet = ({ user, bookings, userBookings, daysOff, onClose, onConfirm }) => {
  const D = window.CHYAKO_DATA;
  const [step, setStep] = React.useState(0);
  const [selectedServices, setSelectedServices] = React.useState([]);
  const [selectedBarber, setSelectedBarber] = React.useState(null);
  const [selectedDate, setSelectedDate] = React.useState(null);
  const [selectedSlot, setSelectedSlot] = React.useState(null);
  const [friend, setFriend] = React.useState(false);
  const [savedId, setSavedId] = React.useState(null);
  const [submitting, setSubmitting] = React.useState(false);
  const [submitError, setSubmitError] = React.useState(null);

  const stepLabels = ["SERVICE", "BARBER", "DATE + TIME", "REVIEW", "CONFIRMED"];

  const totalPrice =selectedServices.reduce((s, id) => s + D.services.find(x => x.id === id).price, 0) * (friend ? 2 : 1);
  const totalMins = selectedServices.reduce((s, id) => s + D.services.find(x => x.id === id).mins, 0);
  const dueAtChair = totalPrice;

  const canAdvance = () => {
    if (step === 0) return selectedServices.length > 0;
    if (step === 1) return selectedBarber !== null;
    if (step === 2) {
      if (!selectedDate || !selectedSlot) return false;
      const alreadyBooked = (userBookings || []).some(b =>
        b.status !== "cancelled" && b.status !== "deleted" && b.dateIso === selectedDate
      );
      return !alreadyBooked;
    }
    if (step === 3) return true;
    return false;
  };

  const toggleService = (id) => setSelectedServices(selectedServices.includes(id) ? selectedServices.filter(x => x !== id) : [...selectedServices, id]);
  const days = React.useMemo(() => D.next14Days(), []);

  const handleSelectBarber = (barberId) => {
    setSelectedBarber(barberId);
    if (selectedDate && !D.isBarberAvailableOn(barberId, selectedDate)) {
      setSelectedDate(null);
      setSelectedSlot(null);
    }
  };

  const handleConfirm = async () => {
    // Re-check availability at submit time to guard against race conditions
    if (D.isSlotTaken(selectedDate, selectedSlot, selectedBarber || "any", bookings, daysOff, totalMins)) {
      setSubmitError("That slot was just taken — go back and pick another time.");
      return;
    }
    const payload = {
      services: selectedServices,
      barberId: selectedBarber,
      dateIso: selectedDate,
      slot: selectedSlot,
      friend,
      total: totalPrice,
      dueAtChair,
      durationMins: totalMins,
    };
    setSubmitting(true);
    setSubmitError(null);
    try {
      const id = await onConfirm(payload);
      setSavedId(id);
      setStep(4);
    } catch {
      setSubmitError("Couldn't save your booking. Please try again.");
    } finally {
      setSubmitting(false);
    }
  };

  const barberObj = selectedBarber === "any" ? null : D.barbers.find(b => b.id === selectedBarber);

  return (
    <div className="sheet">
      <window.StatusBar/>

      <div className="sheet-head">
        <div>
          <div className="sheet-num">0{step + 1}/05</div>
          <div className="sheet-title">{stepLabels[step]}</div>
        </div>
        <button className="sheet-close" onClick={onClose} aria-label="Close">
          <svg width="14" height="14" viewBox="0 0 14 14"><path d="M1 1l12 12M13 1L1 13" stroke="currentColor" strokeWidth="1.8"/></svg>
        </button>
      </div>

      <div className="sheet-prog">
        {stepLabels.map((_, i) => (
          <div key={i} className={`prog-bar ${i <= step ? "active" : ""}`}/>
        ))}
      </div>

      <div className="sheet-body">
        {/* STEP 0 — SERVICES */}
        {step === 0 && (
          <div className="step">
            <div className="step-intro">PICK YOUR CUTS — STACK 'EM UP.</div>
            {D.services.map((s, i) => {
              const checked = selectedServices.includes(s.id);
              return (
                <button key={s.id} className={`svc-card ${checked ? "checked" : ""}`} onClick={() => toggleService(s.id)}>
                  <div className="svc-card-l">
                    <div className="svc-card-num">{String(i + 1).padStart(2, "0")}</div>
                    <div>
                      <div className="svc-card-name">{s.name}</div>
                      <div className="svc-card-meta">{s.mins} MIN{s.popular ? " · ★" : ""}</div>
                    </div>
                  </div>
                  <div className="svc-card-r">
                    <div className="svc-card-price">£{s.price}</div>
                    <div className={`svc-card-check ${checked ? "on" : ""}`}>
                      {checked && <svg width="10" height="8" viewBox="0 0 10 8"><path d="M1 4l3 3 5-6" stroke="#000" strokeWidth="2" fill="none"/></svg>}
                    </div>
                  </div>
                </button>
              );
            })}
          </div>
        )}

        {/* STEP 1 — BARBER */}
        {step === 1 && (
          <div className="step">
            <div className="step-intro">CHOOSE YOUR BLADE.</div>
            {D.barbers.map((b, i) => (
              <button key={b.id} className={`barber ${selectedBarber === b.id ? "checked" : ""}`} onClick={() => handleSelectBarber(b.id)}>
                <div className="barber-avatar">
                  <span className="barber-init">{b.initials}</span>
                  <span className="barber-tag">/{String(i + 1).padStart(2, "0")}</span>
                </div>
                <div className="barber-mid">
                  <div className="barber-name">{b.name.toUpperCase()}</div>
                  <div className="barber-role">{b.role.toUpperCase()} · {b.years}Y</div>
                  <div className="barber-spec">{b.specialty}</div>
                  {b.workingDayIdx && b.workingDayIdx.length < 7 && (
                    <div style={{ marginTop: 6, display: "inline-flex", alignItems: "center", gap: 5, fontSize: "11px", letterSpacing: "0.15em", fontWeight: 600, color: "rgba(232,194,104,0.68)", border: "1px solid rgba(232,194,104,0.2)", borderRadius: 2, padding: "2px 7px" }}>
                      <svg width="9" height="9" viewBox="0 0 10 10" fill="none" style={{ flexShrink: 0 }}><circle cx="5" cy="5" r="4" stroke="rgba(232,194,104,0.68)" strokeWidth="1.5"/><path d="M5 2.5V5l1.5 1.5" stroke="rgba(232,194,104,0.68)" strokeWidth="1.5" strokeLinecap="round"/></svg>
                      FRI – SUN ONLY
                    </div>
                  )}
                </div>
              </button>
            ))}
            <button className={`barber ${selectedBarber === "any" ? "checked" : ""}`} onClick={() => handleSelectBarber("any")}>
              <div className="barber-avatar"><span className="barber-init">?</span></div>
              <div className="barber-mid">
                <div className="barber-name">ANYONE</div>
                <div className="barber-role">FIRST AVAILABLE</div>
                <div className="barber-spec">We'll pair you fast.</div>
              </div>
            </button>
          </div>
        )}

        {/* STEP 2 — DATE + TIME */}
        {step === 2 && (
          <div className="step">
            <div className="step-intro">WHEN ARE YOU PULLING UP?</div>
            {selectedBarber === "b3" && (
              <div style={{ marginBottom: 12 }}>
                <div style={{ display: "inline-flex", alignItems: "center", gap: 6, fontSize: "11px", letterSpacing: "0.15em", fontWeight: 600, color: "rgba(232,194,104,0.82)", background: "rgba(232,194,104,0.07)", border: "1px solid rgba(232,194,104,0.2)", borderRadius: 2, padding: "5px 10px" }}>
                  <svg width="10" height="10" viewBox="0 0 10 10" fill="none" style={{ flexShrink: 0 }}><circle cx="5" cy="5" r="4" stroke="rgba(232,194,104,0.82)" strokeWidth="1.5"/><path d="M5 2.5V5l1.5 1.5" stroke="rgba(232,194,104,0.82)" strokeWidth="1.5" strokeLinecap="round"/></svg>
                  BARBER 03 · AVAILABLE FRI – SUN
                </div>
              </div>
            )}
            <div className="days">
              {days.map(d => {
                const unavailable = !D.isBarberAvailableOn(selectedBarber || "any", d.iso, daysOff)
                || (selectedBarber === "any" && D.getAvailableBarbers(d.iso, daysOff).length === 0);
                const alreadyBooked = (userBookings || []).some(b =>
                  b.status !== "cancelled" && b.status !== "deleted" && b.dateIso === d.iso
                );
                return (
                  <button key={d.iso} disabled={unavailable} className={`day ${selectedDate === d.iso ? "checked" : ""} ${unavailable ? "taken" : ""}`} onClick={() => { setSelectedDate(d.iso); setSelectedSlot(null); }} style={{ position: "relative" }}>
                    <span className="day-name">{d.isToday ? "TDY" : d.day.toUpperCase()}</span>
                    <span className="day-num">{d.dayNum}</span>
                    {alreadyBooked && !unavailable && (
                      <span aria-hidden="true" style={{ position: "absolute", bottom: 4, left: "50%", transform: "translateX(-50%)", width: 5, height: 5, borderRadius: "50%", background: "var(--gold)", display: "block" }}/>
                    )}
                  </button>
                );
              })}
            </div>
            {selectedDate && (() => {
              const alreadyBooked = (userBookings || []).some(b =>
                b.status !== "cancelled" && b.status !== "deleted" && b.dateIso === selectedDate
              );
              if (alreadyBooked) {
                return (
                  <div style={{ marginTop: 18, padding: "14px 16px", background: "rgba(232,194,104,0.07)", border: "1px solid rgba(232,194,104,0.25)", borderRadius: 3 }}>
                    <div style={{ fontSize: "11px", letterSpacing: "0.15em", fontWeight: 700, color: "var(--gold)", marginBottom: 4 }}>CHAIR ALREADY LOCKED</div>
                    <div style={{ fontSize: "12px", color: "var(--cream-dim)", lineHeight: 1.5 }}>
                      You already have a chair this day. Head to <strong style={{ color: "var(--cream)" }}>BOOKINGS</strong> to reschedule or cancel it first.
                    </div>
                  </div>
                );
              }
              const dayObj = days.find(x => x.iso === selectedDate);
              const allSlots = D.generateSlots(dayObj.dayIdx);
              const morning = allSlots.filter(s => D.slotToMins(s) < 720);
              const afternoon = allSlots.filter(s => { const m = D.slotToMins(s); return m >= 720 && m < 1020; });
              const evening = allSlots.filter(s => D.slotToMins(s) >= 1020);
              const renderSection = (label, sectionSlots) => {
                if (sectionSlots.length === 0) return null;
                return (
                  <div key={label}>
                    <div className="step-intro" style={{ marginTop: 18, marginBottom: 8 }}>{label}</div>
                    <div className="slots">
                      {sectionSlots.map(slot => {
                        const taken = D.isSlotTaken(selectedDate, slot, selectedBarber || "any", bookings, daysOff, totalMins) || D.isSlotPast(selectedDate, slot);
                        return (
                          <button key={slot} disabled={taken} className={`slot ${selectedSlot === slot ? "checked" : ""} ${taken ? "taken" : ""}`} onClick={() => setSelectedSlot(slot)}>
                            {slot}
                          </button>
                        );
                      })}
                    </div>
                  </div>
                );
              };
              return (
                <>
                  {renderSection("MORNING", morning)}
                  {renderSection("AFTERNOON", afternoon)}
                  {renderSection("EVENING", evening)}
                </>
              );
            })()}
          </div>
        )}

        {/* STEP 3 — REVIEW */}
        {step === 3 && (
          <div className="step">
            <div className="step-intro">REVIEW &amp; LOCK IN.</div>

            <div className="review-block">
              <div className="review-row">
                <span className="review-label">WHO</span>
                <span className="review-val">{(user.name || "—").toUpperCase()}</span>
              </div>
              <div className="review-row">
                <span className="review-label">PHONE</span>
                <span className="review-val">{user.phone || "—"}</span>
              </div>
              <div className="review-row">
                <span className="review-label">EMAIL</span>
                <span className="review-val">{user.email || "—"}</span>
              </div>
              <p className="review-hint">Wrong details? Update in Account before booking.</p>
            </div>

            <div className="review-block">
              <div className="review-row">
                <span className="review-label">WHEN</span>
                <span className="review-val">{window.formatDayLabel(selectedDate)} · {selectedSlot}</span>
              </div>
              <div className="review-row">
                <span className="review-label">BARBER</span>
                <span className="review-val">{barberObj ? barberObj.name.toUpperCase() : "ANYONE"}</span>
              </div>
              <div className="review-row">
                <span className="review-label">DURATION</span>
                <span className="review-val">{totalMins} MIN</span>
              </div>
            </div>

            <div className="review-block">
              <div className="review-block-head">SERVICES</div>
              {selectedServices.map(id => {
                const s = D.services.find(x => x.id === id);
                return (
                  <div key={id} className="review-row">
                    <span className="review-val">{s.name.toUpperCase()}</span>
                    <span className="review-label" style={{ color: 'var(--gold)' }}>£{s.price}</span>
                  </div>
                );
              })}
              {friend && (
                <div className="review-row">
                  <span className="review-val">+ FRIEND (×2)</span>
                  <span className="review-label" style={{ color: 'var(--gold)' }}>×2</span>
                </div>
              )}
            </div>

            <button className={`friend-card ${friend ? "on" : ""}`} onClick={() => setFriend(!friend)}>
              <div className="friend-icon">+1</div>
              <div className="friend-mid">
                <div className="friend-name">BRING A FRIEND</div>
                <div className="friend-sub">2 CHAIRS · PRICE ×2</div>
              </div>
              <div className={`svc-card-check ${friend ? "on" : ""}`}>
                {friend && <svg width="10" height="8" viewBox="0 0 10 8"><path d="M1 4l3 3 5-6" stroke="#000" strokeWidth="2" fill="none"/></svg>}
              </div>
            </button>

            <div className="review-block pay-block">
              <div className="review-block-head">PAYMENT</div>
              <div className="review-row">
                <span className="review-val">SERVICE TOTAL</span>
                <span className="review-label" style={{ color: 'var(--cream-dim)' }}>£{totalPrice}</span>
              </div>
              <div className="review-row">
                <span className="review-val">DUE AT CHAIR</span>
                <span className="review-label" style={{ color: 'var(--cream-dim)' }}>£{dueAtChair}</span>
              </div>
            </div>
          </div>
        )}

        {/* STEP 4 — CONFIRMED */}
        {step === 4 && (
          <div className="step confirm">
            <div className="confirm-badge">
              <div className="confirm-mark">✓</div>
              <div className="confirm-rings"/>
            </div>
            <div className="confirm-eyebrow">CHAIR LOCKED IN</div>
            <h2 className="confirm-title">{(user.name || "YOU").split(" ")[0].toUpperCase()},<br/>WE GOT YOU.</h2>

            <div className="ticket">
              <div className="ticket-head">
                <span>CHYAKO//CUTZ</span>
                <span>#{savedId ? savedId.slice(-4).toUpperCase() : "—"}</span>
              </div>
              <div className="ticket-when">
                <div className="ticket-day">{window.formatDayLabel(selectedDate)}</div>
                <div className="ticket-time">{selectedSlot}</div>
              </div>
              <div className="ticket-row">
                <span>BARBER</span>
                <span>{barberObj ? barberObj.name.toUpperCase() : "ANYONE"}</span>
              </div>
              {selectedServices.map(id => {
                const s = D.services.find(x => x.id === id);
                return <div key={id} className="ticket-row"><span>{s.name.toUpperCase()}</span><span>£{s.price}</span></div>;
              })}
              {friend && <div className="ticket-row"><span>+ FRIEND</span><span>×2</span></div>}
              <div className="ticket-divider"/>
              <div className="ticket-total"><span>DUE AT CHAIR</span><span>£{dueAtChair}</span></div>
            </div>

            <button className="btn btn-primary confirm-done" onClick={onClose}>
              <span>DONE</span>
              <span className="btn-arrow">
                <svg width="12" height="12" viewBox="0 0 14 14"><path d="M2 12L12 2M5 2h7v7" stroke="currentColor" strokeWidth="1.8" fill="none"/></svg>
              </span>
            </button>
          </div>
        )}
      </div>

      {step < 4 && (
        <div className="sheet-foot">
          <div className="sheet-summary">
            <div>
              <div className="summary-label">{`${selectedServices.length} SVC · ${totalMins}MIN${friend ? " · ×2" : ""}`}</div>
              <div className="summary-total">£{totalPrice}</div>
            </div>
            <button className="sheet-cta" disabled={!canAdvance() || submitting} onClick={() => step === 3 ? handleConfirm() : setStep(step + 1)}>
              <span>{submitting ? "BOOKING…" : step === 3 ? "LOCK IN" : "NEXT"}</span>
              {!submitting && <div className="btn-arrow">
                <svg width="12" height="12" viewBox="0 0 14 14"><path d="M2 12L12 2M5 2h7v7" stroke="currentColor" strokeWidth="1.8" fill="none"/></svg>
              </div>}
            </button>
          </div>
          {submitError && <div className="sheet-submit-error">{submitError}</div>}
          {step > 0 && <button className="sheet-back" onClick={() => setStep(step - 1)}>← BACK</button>}
        </div>
      )}
    </div>
  );
};

window.BookSheet = BookSheet;