// booking.jsx — multi-step booking component
const { useState, useMemo } = React;

function Booking() {
  const [step, setStep] = useState(0);
  const [selected, setSelected] = useState([]); // service ids
  const [barber, setBarber] = useState(null);
  const [day, setDay] = useState(null);
  const [slot, setSlot] = useState(null);
  const [form, setForm] = useState({ name: '', phone: '', email: '', note: '' });
  const [confirmed, setConfirmed] = useState(false);

  const toggleService = (id) => {
    setSelected(s => s.includes(id) ? s.filter(x => x !== id) : [...s, id]);
  };

  const total = useMemo(() =>
    selected.reduce((sum, id) => sum + (SERVICES.find(s => s.id === id)?.price || 0), 0)
  , [selected]);

  const totalDur = useMemo(() =>
    selected.reduce((sum, id) => {
      const d = SERVICES.find(s => s.id === id)?.dur || '0 min';
      return sum + parseInt(d);
    }, 0)
  , [selected]);

  // Generate next 14 days
  const days = useMemo(() => {
    const out = [];
    const dow = ['So','Mo','Di','Mi','Do','Fr','Sa'];
    const mon = ['JAN','FEB','MÄR','APR','MAI','JUN','JUL','AUG','SEP','OKT','NOV','DEZ'];
    const now = new Date();
    for (let i = 0; i < 14; i++) {
      const d = new Date(now); d.setDate(now.getDate() + i);
      out.push({
        key: d.toISOString().slice(0,10),
        dow: dow[d.getDay()],
        d: d.getDate(),
        mon: mon[d.getMonth()],
        closed: d.getDay() === 0,
        label: `${dow[d.getDay()]}, ${d.getDate()}. ${mon[d.getMonth()]}`,
      });
    }
    return out;
  }, []);

  const slots = useMemo(() => {
    if (!day) return [];
    const all = ['09:00','09:30','10:00','10:30','11:00','11:30','12:00','13:00','13:30','14:00','14:30','15:00','15:30','16:00','16:30','17:00','17:30','18:00'];
    // pseudo-random unavailable pattern based on day
    const seed = day.split('-').join('').slice(-4);
    return all.map((t, i) => ({ t, unavailable: (parseInt(seed) + i) % 5 === 0 }));
  }, [day]);

  const selectedBarber = BARBERS.find(b => b.id === barber);
  const selectedDay = days.find(d => d.key === day);
  const selectedServices = selected.map(id => SERVICES.find(s => s.id === id)).filter(Boolean);

  const stepValid = [
    selected.length > 0,
    !!barber,
    !!day && !!slot,
    form.name.length > 1 && form.phone.length > 5,
  ];

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

  const submit = () => {
    const lines = [
      'Hallo House Des Barbers, ich möchte folgenden Termin buchen:',
      '',
      `• Termin: ${selectedDay?.label} um ${slot}`,
      `• Barber: ${barber === 'any' ? 'Egal wer' : selectedBarber?.name}`,
      `• Services: ${selectedServices.map(s => s.name).join(', ')}`,
      `• Dauer: ca. ${totalDur} min`,
      `• Gesamt: ${total} €`,
      '',
      `Name: ${form.name}`,
      `Telefon: ${form.phone}`,
      form.email ? `Email: ${form.email}` : null,
      form.note ? `Wunsch: ${form.note}` : null,
    ].filter(Boolean).join('\n');
    window.open(buildWhatsAppUrl(lines), '_blank', 'noopener');
    setConfirmed(true);
  };

  if (confirmed) {
    return (
      <div className="booking-wrap" style={{ textAlign: 'center', padding: '80px 40px' }}>
        <div style={{ display: 'inline-grid', placeItems: 'center', width: 80, height: 80, border: '1px solid var(--gold)', borderRadius: '50%', color: 'var(--gold)', marginBottom: 32 }}>
          <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M20 6L9 17l-5-5"/></svg>
        </div>
        <h3 className="display" style={{ fontSize: 56, color: 'var(--white)' }}>WhatsApp geöffnet</h3>
        <p style={{ color: 'var(--ink-dim)', marginTop: 12, maxWidth: 520, margin: '12px auto 32px' }}>
          Wir haben dir WhatsApp mit deiner Anfrage geöffnet. Tippe auf <span style={{color: 'var(--gold)'}}>Senden</span> und wir bestätigen deinen Termin innerhalb 1h.
        </p>
        <div style={{ background: 'var(--bg-3)', border: '1px solid var(--line)', padding: 32, maxWidth: 480, margin: '0 auto', textAlign: 'left' }}>
          <div className="summary-row"><span className="k">Termin</span><span className="v">{selectedDay?.label} · {slot}</span></div>
          <div className="summary-row"><span className="k">Barber</span><span className="v">{selectedBarber?.name}</span></div>
          <div className="summary-row"><span className="k">Services</span><span className="v">{selectedServices.map(s => s.name).join(', ')}</span></div>
          <div className="summary-total"><span className="k">Gesamt</span><span className="v">{total} €</span></div>
        </div>
        <div style={{ display: 'flex', gap: 12, justifyContent: 'center', marginTop: 32 }}>
          <button className="btn btn-ghost" onClick={() => {
            setConfirmed(false); setStep(0); setSelected([]); setBarber(null); setDay(null); setSlot(null); setForm({ name: '', phone: '', email: '', note: '' });
          }}>Weiteren Termin buchen</button>
        </div>
      </div>
    );
  }

  return (
    <div className="booking-wrap">
      <div className="booking-grid">
        <div>
          <div className="step-dots">
            {['Service','Barber','Termin','Kontakt'].map((label, i) => (
              <React.Fragment key={i}>
                <div className={`step-dot ${step === i ? 'active' : ''} ${step > i ? 'done' : ''}`}>
                  <div className="circle">{step > i ? Ic.check : String(i+1).padStart(2,'0')}</div>
                  <span>{label}</span>
                </div>
                {i < 3 && <div className={`step-connector ${step > i ? 'done' : ''}`}/>}
              </React.Fragment>
            ))}
          </div>

          {step === 0 && (
            <div className="step-panel">
              <h3>Wähle deinen Service</h3>
              <p className="sub">Mehrfachauswahl möglich — kombiniere für das volle Programm.</p>
              <div className="chip-grid">
                {SERVICES.map(s => (
                  <button key={s.id} className={`chip ${selected.includes(s.id) ? 'selected' : ''}`} onClick={() => toggleService(s.id)}>
                    <div>
                      <div className="n">{s.name}</div>
                      <div className="m">{s.dur} · {s.cat}</div>
                    </div>
                    <div className="p">{s.price}€</div>
                  </button>
                ))}
              </div>
            </div>
          )}

          {step === 1 && (
            <div className="step-panel">
              <h3>Wähle deinen Barber</h3>
              <p className="sub">Unsere Meister stehen für dich bereit.</p>
              <div className="barber-chips">
                {BARBERS.map(b => (
                  <button key={b.id} className={`b-chip ${barber === b.id ? 'selected' : ''}`} onClick={() => setBarber(b.id)}>
                    <div className="avatar" style={{ backgroundImage: `url(${b.img})` }}/>
                    <div>
                      <div className="name">{b.name}</div>
                      <div className="role">{b.role}</div>
                    </div>
                  </button>
                ))}
                <button className={`b-chip ${barber === 'any' ? 'selected' : ''}`} onClick={() => setBarber('any')}>
                  <div className="avatar" style={{ background: 'var(--bg-2)', display: 'grid', placeItems: 'center', color: 'var(--gold)', fontFamily: 'Bebas Neue', fontSize: 22 }}>?</div>
                  <div>
                    <div className="name">Egal wer</div>
                    <div className="role">Erster verfügbarer</div>
                  </div>
                </button>
              </div>
            </div>
          )}

          {step === 2 && (
            <div className="step-panel">
              <h3>Wähle Datum & Uhrzeit</h3>
              <p className="sub">Verfügbar in den nächsten 14 Tagen.</p>
              <div className="cal">
                {days.map(d => (
                  <button key={d.key} className={`cal-day ${day === d.key ? 'selected' : ''} ${d.closed ? 'disabled' : ''}`}
                    disabled={d.closed}
                    onClick={() => { setDay(d.key); setSlot(null); }}>
                    <div className="dow">{d.dow}</div>
                    <div className="d">{d.d}</div>
                    <div className="mon">{d.mon}</div>
                  </button>
                ))}
              </div>
              {day ? (
                <div className="slots">
                  {slots.map(s => (
                    <button key={s.t} className={`slot ${slot === s.t ? 'selected' : ''} ${s.unavailable ? 'unavailable' : ''}`}
                      disabled={s.unavailable}
                      onClick={() => setSlot(s.t)}>{s.t}</button>
                  ))}
                </div>
              ) : (
                <div style={{ color: 'var(--ink-mute)', fontSize: 13, padding: 20, textAlign: 'center', border: '1px dashed var(--line)' }}>
                  Bitte erst ein Datum wählen.
                </div>
              )}
            </div>
          )}

          {step === 3 && (
            <div className="step-panel">
              <h3>Deine Daten</h3>
              <p className="sub">Beim Absenden öffnet sich WhatsApp mit deiner fertigen Anfrage — du schickst sie mit einem Tap.</p>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
                <div>
                  <label className="input-label">Name</label>
                  <input className="input-field" value={form.name} onChange={e => setForm({...form, name: e.target.value})} placeholder="Max Mustermann"/>
                </div>
                <div>
                  <label className="input-label">Telefon</label>
                  <input className="input-field" value={form.phone} onChange={e => setForm({...form, phone: e.target.value})} placeholder="+49 ..."/>
                </div>
                <div style={{ gridColumn: '1 / -1' }}>
                  <label className="input-label">Email (optional)</label>
                  <input className="input-field" value={form.email} onChange={e => setForm({...form, email: e.target.value})} placeholder="max@email.de"/>
                </div>
                <div style={{ gridColumn: '1 / -1' }}>
                  <label className="input-label">Besondere Wünsche</label>
                  <textarea className="input-field" rows="3" value={form.note} onChange={e => setForm({...form, note: e.target.value})} placeholder="z.B. Skin Fade, bestimmte Länge..." style={{ resize: 'vertical', fontFamily: 'inherit' }}/>
                </div>
              </div>
            </div>
          )}

          <div className="step-nav">
            <button className="btn btn-ghost" onClick={prev} disabled={step === 0} style={{ opacity: step === 0 ? 0.3 : 1, pointerEvents: step === 0 ? 'none' : 'auto' }}>← Zurück</button>
            {step < 3 ? (
              <button className="btn btn-primary" onClick={next} disabled={!stepValid[step]} style={{ opacity: stepValid[step] ? 1 : 0.4, pointerEvents: stepValid[step] ? 'auto' : 'none' }}>Weiter {Ic.arrow}</button>
            ) : (
              <button className="btn btn-primary" onClick={submit} disabled={!stepValid[3]} style={{ opacity: stepValid[3] ? 1 : 0.4, pointerEvents: stepValid[3] ? 'auto' : 'none' }}>Per WhatsApp buchen {Ic.wa}</button>
            )}
          </div>
        </div>

        <div>
          <div className="summary">
            <h4>Deine Buchung</h4>
            <div className="summary-row"><span className="k">Services</span>
              <span className={`v ${selectedServices.length ? '' : 'empty'}`}>
                {selectedServices.length ? selectedServices.map(s => s.name).join(', ') : 'Noch nicht gewählt'}
              </span>
            </div>
            <div className="summary-row"><span className="k">Dauer</span>
              <span className={`v ${totalDur ? '' : 'empty'}`}>{totalDur ? `${totalDur} min` : '—'}</span>
            </div>
            <div className="summary-row"><span className="k">Barber</span>
              <span className={`v ${barber ? '' : 'empty'}`}>
                {barber === 'any' ? 'Egal wer' : (selectedBarber?.name || 'Noch nicht gewählt')}
              </span>
            </div>
            <div className="summary-row"><span className="k">Datum</span>
              <span className={`v ${day ? '' : 'empty'}`}>{selectedDay?.label || '—'}</span>
            </div>
            <div className="summary-row"><span className="k">Uhrzeit</span>
              <span className={`v ${slot ? '' : 'empty'}`}>{slot || '—'}</span>
            </div>
            <div className="summary-total">
              <span className="k">Gesamt</span>
              <span className="v">{total}€</span>
            </div>
            <div style={{ marginTop: 20, fontSize: 11, color: 'var(--ink-mute)', letterSpacing: '0.08em', lineHeight: 1.6 }}>
              Bezahlung vor Ort · bar oder Karte. Kostenlose Stornierung bis 2h vorher.
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { Booking });