/* eslint-disable */
// BOOK PAGE — multi-step mock flow

const PB_B = window.PB_DATA;

// Curated booking-flow service set with mock prices (clearly tagged "estimate" — research has only colour verified).
const BOOK_SERVICES = [
  { id: 'airtouch-crown',  name: 'Airtouch Crown',        cat: 'Hair Colour',   dur: '3 hr',        price: 1000, verified: true },
  { id: 'balayage',        name: 'Balayage / Shatush',    cat: 'Hair Colour',   dur: '5 hr 20 min', price: 1200, verified: true, from: true },
  { id: 'roots-colour',    name: 'Roots Colour',          cat: 'Hair Colour',   dur: '2 hr',        price: 357,  verified: true },
  { id: 'blow-dry',        name: 'Signature Blow Dry',    cat: 'Hair Styling',  dur: '40 min',      consult: true },
  { id: 'buccal',          name: 'Buccal Cosmetology',    cat: 'Skin',          dur: '60 min',      consult: true },
  { id: 'salmon-dna',      name: 'Salmon DNA Facial',     cat: 'Skin',          dur: '75 min',      consult: true },
  { id: 'gua-sha',         name: 'Gua Sha Facial',        cat: 'Skin',          dur: '60 min',      consult: true },
  { id: 'jp-mani',         name: 'Japanese Manicure',     cat: 'Nails',         dur: '60 min',      consult: true },
];

const BOOK_STYLISTS = [
  { id: 'any',       name: 'Any available', role: '— First open chair',     rating: null,  img: null },
  { id: 'anastasia', name: 'Anastasiia',    role: 'Hair Stylist',           rating: 5.0,   img: 'media/team-anastasia.webp' },
  { id: 'iness',     name: 'Ines',          role: 'Hair Stylist',           rating: 5.0,   img: 'media/team-iness.webp' },
  { id: 'ayan',      name: 'Ayan',          role: 'Hair Stylist',           rating: 5.0,   img: 'media/team-ayan.webp' },
  { id: 'joanne',    name: 'Jo Anne',       role: 'Masseur',                rating: 5.0,   img: 'media/team-joanne.webp' },
  { id: 'diane',     name: 'Diana May',     role: 'Nail Technician',        rating: 4.9,   img: 'media/team-diane.webp' },
  { id: 'namarig',   name: 'Namarig',       role: 'Cosmetologist',          rating: 4.8,   img: 'media/team-namarig.webp' },
];

function generateDays() {
  // Next 14 days starting today
  const out = [];
  const start = new Date('2026-05-22T10:00:00'); // pinned for reproducibility
  const dow = ['SUN','MON','TUE','WED','THU','FRI','SAT'];
  for (let i = 0; i < 14; i++) {
    const d = new Date(start.getTime() + i * 86400000);
    out.push({
      key: d.toISOString().slice(0,10),
      dow: dow[d.getDay()],
      dt: d.getDate(),
      month: d.toLocaleString('en-US',{ month: 'short' }),
      disabled: false, // open Mon-Sun
    });
  }
  return out;
}

const TIME_SLOTS = ['10:00','10:30','11:00','11:30','12:00','12:30','13:00','13:30','14:00','14:30','15:00','15:30','16:00','16:30','17:00','17:30','18:00','18:30','19:00','19:30'];
const DISABLED_SLOTS = new Set(['12:00','15:30','17:00']); // fake "booked" times

function StepBar({ step }) {
  const labels = ['Service', 'Stylist', 'Date & Time', 'Your details', 'Confirm'];
  return (
    <div className="steps">
      {labels.map((l, i) => (
        <div key={l} className={'step' + (step === i ? ' is-active' : step > i ? ' is-done' : '')}>
          <span className="ix">{step > i ? '✓' : String(i + 1).padStart(2,'0')}</span>
          <span>{l}</span>
        </div>
      ))}
    </div>
  );
}

function PageBook() {
  const [step, setStep] = React.useState(0);
  const [svc, setSvc] = React.useState(null);
  const [stylist, setStylist] = React.useState(BOOK_STYLISTS[0]);
  const [day, setDay] = React.useState(null);
  const [slot, setSlot] = React.useState(null);
  const [details, setDetails] = React.useState({ name: '', phone: '', email: '', notes: '' });

  const days = React.useMemo(generateDays, []);

  const canNext = () => {
    if (step === 0) return !!svc;
    if (step === 1) return !!stylist;
    if (step === 2) return !!day && !!slot;
    if (step === 3) return details.name && details.phone;
    return true;
  };

  const next = () => setStep((s) => Math.min(s + 1, 4));
  const back = () => setStep((s) => Math.max(s - 1, 0));

  return (
    <div data-screen-label="Book">
      <section className="page-head shell-wide">
        <div className="crumbs"><a href="#/">Home</a><span className="sep">/</span>Book</div>
        <h1>Reserve<br />your <em>chair</em>.</h1>
        <p className="sub">
          Book online in under a minute — or send us a note on WhatsApp. Every appointment
          opens with a complimentary consultation.
        </p>
      </section>

      <section className="shell-wide">
        <div className="book-layout">
          {/* LEFT — flow */}
          <div className="book-flow">
            {step < 4 && <StepBar step={step} />}

            {/* STEP 0: SERVICE */}
            {step === 0 && (
              <div data-screen-label="Book / 01 Service">
                <h2 className="book-q">What would you like to book?</h2>
                <div className="svc-pick-grid">
                  {BOOK_SERVICES.map((s) => (
                    <button
                      key={s.id}
                      type="button"
                      className={'svc-pick' + (svc?.id === s.id ? ' is-active' : '')}
                      onClick={() => setSvc(s)}
                    >
                      <div className="dur">{s.cat} · {s.dur}</div>
                      <div className="nm">{s.name}</div>
                      <div className="pr">
                        {s.consult ? 'on consultation' : (s.from ? 'from ' : '') + 'AED ' + s.price.toLocaleString('en-US')}
                      </div>
                    </button>
                  ))}
                </div>
              </div>
            )}

            {/* STEP 1: STYLIST */}
            {step === 1 && (
              <div data-screen-label="Book / 02 Stylist">
                <h2 className="book-q">Which specialist?</h2>
                <p className="lede" style={{ marginBottom: 32, maxWidth: '52ch' }}>
                  Our clients return for specific stylists. Choose by name, or pick the first open chair.
                </p>
                <div className="stylist-pick">
                  {BOOK_STYLISTS.map((s) => (
                    <button
                      key={s.id}
                      type="button"
                      className={'stylist-opt' + (stylist?.id === s.id ? ' is-active' : '')}
                      onClick={() => setStylist(s)}
                    >
                      <div className="av">
                        {s.img ? <img src={s.img} alt={s.name} /> : (
                          <div style={{ width: '100%', height: '100%', display: 'grid', placeItems: 'center', background: 'var(--silver-light)', color: 'var(--ink-faint)', fontFamily: 'var(--f-display)', fontSize: 20 }}>?</div>
                        )}
                      </div>
                      <div className="nm">{s.name}</div>
                      <div className="rl">{s.role}</div>
                      {s.rating && <div className="rt">★ {s.rating.toFixed(1)}</div>}
                    </button>
                  ))}
                </div>
              </div>
            )}

            {/* STEP 2: DATE & TIME */}
            {step === 2 && (
              <div data-screen-label="Book / 03 DateTime">
                <h2 className="book-q">Pick a date.</h2>
                <div className="cal">
                  {days.slice(0,14).map((d) => (
                    <button
                      key={d.key}
                      type="button"
                      className={'cal-day' + (day === d.key ? ' is-active' : '') + (d.disabled ? ' is-disabled' : '')}
                      onClick={() => !d.disabled && setDay(d.key)}
                    >
                      <div className="dow">{d.dow}</div>
                      <div className="dt">{d.dt}</div>
                      <div className="dow" style={{ marginTop: 4, fontSize: 9 }}>{d.month}</div>
                    </button>
                  ))}
                </div>
                <h3 className="book-q" style={{ fontSize: 22, marginTop: 40 }}>Then a time.</h3>
                <div className="slots">
                  {TIME_SLOTS.map((t) => {
                    const dis = DISABLED_SLOTS.has(t);
                    return (
                      <button
                        key={t}
                        type="button"
                        className={'slot' + (slot === t ? ' is-active' : '') + (dis ? ' is-disabled' : '')}
                        onClick={() => !dis && setSlot(t)}
                      >
                        {t}
                      </button>
                    );
                  })}
                </div>
              </div>
            )}

            {/* STEP 3: DETAILS */}
            {step === 3 && (
              <div data-screen-label="Book / 04 Details">
                <h2 className="book-q">Just your details.</h2>
                <div className="book-form">
                  <div className="field">
                    <label>Full name</label>
                    <input type="text" value={details.name} onChange={(e)=>setDetails({...details, name: e.target.value})} placeholder="As you'd like us to greet you" />
                  </div>
                  <div className="field">
                    <label>Mobile</label>
                    <input type="tel" value={details.phone} onChange={(e)=>setDetails({...details, phone: e.target.value})} placeholder="+971 ..." />
                  </div>
                  <div className="field">
                    <label>Email (optional)</label>
                    <input type="email" value={details.email} onChange={(e)=>setDetails({...details, email: e.target.value})} placeholder="you@email.com" />
                  </div>
                  <div className="field">
                    <label>Notes for your stylist (optional)</label>
                    <textarea rows="3" value={details.notes} onChange={(e)=>setDetails({...details, notes: e.target.value})} placeholder="Inspiration photos, hair history, allergies, anything we should know..." />
                  </div>
                  <div style={{ marginTop: 8, fontSize: 11, letterSpacing: '0.08em', color: 'var(--ink-faint)' }}>
                    By booking you agree to our cancellation policy. Confirmation by SMS.
                  </div>
                </div>
              </div>
            )}

            {/* STEP 4: CONFIRMATION */}
            {step === 4 && (
              <div data-screen-label="Book / 05 Confirmed" className="book-confirm">
                <div className="chk">✓</div>
                <h2>You’re booked, {details.name.split(' ')[0] || 'beautiful'}.</h2>
                <p>
                  We’ve held <strong>{svc.name}</strong> with <strong>{stylist.name}</strong> on <strong>{day}</strong> at <strong>{slot}</strong>.
                  A confirmation is on its way to your mobile.
                </p>
                <div style={{ marginTop: 40, display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap' }}>
                  <a href="#/" className="btn btn-ghost">Back to home</a>
                  <a href={PB_B.brand.whatsappHref} target="_blank" rel="noopener" className="btn btn-primary">WhatsApp the salon</a>
                </div>
                <div style={{ marginTop: 48, paddingTop: 32, borderTop: '1px solid var(--hairline)', fontSize: 12, color: 'var(--ink-faint)', letterSpacing: '0.08em' }}>
                  Demo flow — no real reservation has been made. Connect to Fresha or GoHighLevel to go live.
                </div>
              </div>
            )}

            {/* Step actions */}
            {step < 4 && (
              <div className="step-actions">
                <button
                  type="button"
                  className="btn btn-link"
                  onClick={back}
                  disabled={step === 0}
                  style={{ visibility: step === 0 ? 'hidden' : 'visible' }}
                >
                  ← Back
                </button>
                <button
                  type="button"
                  className={'btn ' + (canNext() ? 'btn-primary btn-arrow' : 'btn-ghost')}
                  onClick={canNext() ? next : null}
                  disabled={!canNext()}
                  style={{ opacity: canNext() ? 1 : 0.4, cursor: canNext() ? 'pointer' : 'not-allowed' }}
                >
                  {step === 3 ? 'Confirm booking' : 'Continue'}
                </button>
              </div>
            )}
          </div>

          {/* RIGHT — summary */}
          <div className="book-summary">
            <Eyebrow>Your appointment</Eyebrow>
            <div style={{ marginTop: 32 }}>
              <div className="summary-row">
                <span className="k">Service</span>
                <span className="v">{svc ? svc.name : <span className="empty">Not yet selected</span>}</span>
              </div>
              <div className="summary-row">
                <span className="k">Stylist</span>
                <span className="v">{stylist?.name && step >= 1 ? stylist.name : <span className="empty">—</span>}</span>
              </div>
              <div className="summary-row">
                <span className="k">When</span>
                <span className="v">
                  {day && slot ? (
                    <>{days.find(d=>d.key===day)?.dow} {days.find(d=>d.key===day)?.dt} {days.find(d=>d.key===day)?.month}<br />
                    <span style={{ fontSize: 13, color: 'var(--ink-muted)', fontFamily: 'var(--f-body)', letterSpacing: '0.06em' }}>{slot}</span></>
                  ) : <span className="empty">—</span>}
                </span>
              </div>
              <div className="summary-row">
                <span className="k">Duration</span>
                <span className="v">{svc ? svc.dur : <span className="empty">—</span>}</span>
              </div>
              <div className="summary-total">
                <span className="k">Estimate</span>
                <span className="v">
                  {svc ? (svc.consult ? <span style={{ fontSize: 18, fontStyle: 'italic' }}>on consultation</span> : 'AED ' + svc.price.toLocaleString('en-US')) : '—'}
                </span>
              </div>
            </div>

            <div style={{ marginTop: 32, paddingTop: 24, borderTop: '1px solid var(--hairline)' }}>
              <div className="eyebrow" style={{ marginBottom: 12 }}><span className="dot" />Or contact us directly</div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 10, fontSize: 14 }}>
                <a href={PB_B.brand.whatsappHref} target="_blank" rel="noopener">WhatsApp · {PB_B.brand.whatsapp} ↗</a>
                <a href={PB_B.brand.phoneCallHref}>Call · {PB_B.brand.phoneCall}</a>
                <a href={PB_B.brand.emailHref}>Email · {PB_B.brand.email}</a>
              </div>
            </div>

            <div style={{ marginTop: 32, fontSize: 11, color: 'var(--ink-faint)', letterSpacing: '0.08em', lineHeight: 1.6 }}>
              {PB_B.brand.addressLines.join(' · ')}<br/>
              {PB_B.brand.hours}
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { PageBook });