/* global React, ChromeBlob, ChromeDrop, VideoPH, PhotoPH, MagneticBtn, Arrow, TOURS, ROOMS */
const { useState: bState, useEffect: bEffect } = React;

function BookingFlow({ tourId, roomId, onNav }) {
  const tour = TOURS.find(t => t.id === tourId) || TOURS[1];
  const initRoom = ROOMS.find(r => r.id === roomId) || ROOMS[2];
  const [step, setStep] = bState(roomId ? 1 : 0);
  const [room, setRoom] = bState(initRoom);
  const [guests, setGuests] = bState(2);
  const [form, setForm] = bState({
    firstName: '', lastName: '', email: '', phone: '',
    instagram: '', city: '', extras: [], notes: '',
  });

  const total = room.price * guests;

  const steps = ['Номер', 'Гості', 'Дані', 'Готово'];

  return (
    <div className="page-fade" style={{ minHeight: '100vh', paddingTop: 100, paddingBottom: 80, position: 'relative' }}>
      <div className="blob-layer">
        <div style={{ position: 'absolute', right: '-12%', top: '5%', opacity: .55 }}>
          <ChromeBlob shape="loop" size={500} hue={285} />
        </div>
        <div style={{ position: 'absolute', left: '-10%', bottom: '5%', opacity: .55 }}>
          <ChromeBlob shape="drop" size={400} hue={295} />
        </div>
      </div>

      <div className="container" style={{ position: 'relative', maxWidth: 1180 }}>
        <div className="flex gap-3 center" style={{ marginBottom: 30 }}>
          <button onClick={() => onNav('tour', tour.id)} style={{ fontSize: 13, color: 'var(--fg-2)' }}>← назад до туру</button>
          <span style={{ color: 'var(--fg-3)' }}>/</span>
          <span className="mono" style={{ fontSize: 12 }}>{tour.tag} · {tour.title}</span>
        </div>

        {/* Progress */}
        <div className="booking-steps-bar card" style={{ padding: 20, marginBottom: 24, display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 12 }}>
          {steps.map((s, i) => (
            <div key={i} style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              <div style={{ height: 4, borderRadius: 2, background: i <= step ? 'var(--violet)' : 'var(--line-strong)', transition: 'background .4s var(--ease)' }} />
              <div className="flex gap-2 center">
                <span className="mono" style={{ fontSize: 10, color: i <= step ? 'var(--violet-soft)' : 'var(--fg-3)' }}>0{i+1}</span>
                <span style={{ fontSize: 13, fontWeight: i === step ? 600 : 400, color: i === step ? 'var(--fg)' : 'var(--fg-2)' }}>{s}</span>
              </div>
            </div>
          ))}
        </div>

        <div className="booking-layout" style={{ display: 'grid', gridTemplateColumns: '1.5fr 1fr', gap: 24, alignItems: 'start' }}>
          <div className="card" style={{ padding: 36 }}>
            {step === 0 && (
              <Step title="Обери тип номера" sub="Все включено в ціну: проживання, харчування, активності, нічна програма.">
                <div className="stack gap-3">
                  {ROOMS.map(r => (
                    <button key={r.id} onClick={() => setRoom(r)}
                      style={{ textAlign: 'left', padding: 18, borderRadius: 16, border: room.id === r.id ? '2px solid var(--violet)' : '1px solid var(--line)', background: room.id === r.id ? 'rgba(140,90,255,.08)' : 'transparent', display: 'grid', gridTemplateColumns: '80px 1fr auto', gap: 16, alignItems: 'center', cursor: 'pointer', transition: 'all .3s var(--ease)' }}>
                      <PhotoPH label="" hue={r.hue} style={{ width: 80, height: 80, aspectRatio: '1/1', borderRadius: 12 }} />
                      <div>
                        <div style={{ fontFamily: 'Unbounded', fontWeight: 600, fontSize: 16 }}>{r.name}</div>
                        <div className="mono" style={{ fontSize: 11, color: 'var(--fg-2)', marginTop: 4, letterSpacing: 0.1 }}>{r.capacity} · {r.size} · {r.available} шт.</div>
                      </div>
                      <div style={{ textAlign: 'right' }}>
                        <div style={{ fontFamily: 'Unbounded', fontSize: 18, fontWeight: 700 }}>€{r.price}</div>
                        <div className="mono" style={{ fontSize: 10, color: 'var(--fg-2)' }}>/ гість</div>
                      </div>
                    </button>
                  ))}
                </div>
              </Step>
            )}

            {step === 1 && (
              <Step title="Скільки вас буде?" sub="Більшість номерів розраховані на 2 гостей. Можемо підлаштувати, якщо їдете родиною або групою.">
                <div className="grid" style={{ gridTemplateColumns: 'repeat(4, 1fr)', gap: 12 }}>
                  {[1, 2, 3, 4].map(n => (
                    <button key={n} onClick={() => setGuests(n)}
                      style={{ padding: '24px 20px', borderRadius: 16, border: guests === n ? '2px solid var(--violet)' : '1px solid var(--line)', background: guests === n ? 'rgba(140,90,255,.08)' : 'transparent', textAlign: 'left' }}>
                      <div style={{ fontFamily: 'Unbounded', fontSize: 32, fontWeight: 700 }}>{n}</div>
                      <div style={{ fontSize: 13, color: 'var(--fg-2)' }}>{n === 1 ? 'гість' : n < 5 ? 'гостя' : 'гостей'}</div>
                    </button>
                  ))}
                </div>

                <div className="mt-12">
                  <h4 style={{ fontFamily: 'Unbounded', fontSize: 18, fontWeight: 600 }}>Додатково</h4>
                  <div className="stack gap-3 mt-6">
                    {[
                      { id: 'transfer', t: 'Трансфер з аеропорту Львова', p: 60 },
                      { id: 'spa', t: 'SPA-пакет на двох', p: 120 },
                      { id: 'photo', t: 'Персональні фото від фотографа', p: 80 },
                      { id: 'paragliding', t: 'Політ на параплані', p: 140 },
                    ].map(ex => (
                      <label key={ex.id} className="flex between center"
                        style={{ padding: 16, borderRadius: 12, border: '1px solid var(--line)', cursor: 'pointer' }}>
                        <div className="flex gap-3 center">
                          <input
                            type="checkbox"
                            checked={form.extras.includes(ex.id)}
                            onChange={() => {
                              const has = form.extras.includes(ex.id);
                              setForm({ ...form, extras: has ? form.extras.filter(x => x !== ex.id) : [...form.extras, ex.id] });
                            }}
                            style={{ accentColor: 'var(--violet)', width: 18, height: 18 }}
                          />
                          <span style={{ fontSize: 14 }}>{ex.t}</span>
                        </div>
                        <span className="mono" style={{ fontSize: 13, color: 'var(--violet-soft)' }}>+€{ex.p}</span>
                      </label>
                    ))}
                  </div>
                </div>
              </Step>
            )}

            {step === 2 && (
              <Step title="Розкажи про себе" sub="Ці дані потрібні для оформлення та короткого онлайн-знайомства до туру.">
                <div className="grid" style={{ gridTemplateColumns: '1fr 1fr', gap: 16 }}>
                  <BField label="Ім'я" v={form.firstName} on={(v) => setForm({ ...form, firstName: v })} placeholder="Анна" />
                  <BField label="Прізвище" v={form.lastName} on={(v) => setForm({ ...form, lastName: v })} placeholder="Коваль" />
                  <BField label="Email" v={form.email} on={(v) => setForm({ ...form, email: v })} placeholder="anna@mail.com" type="email" />
                  <BField label="Телефон" v={form.phone} on={(v) => setForm({ ...form, phone: v })} placeholder="+380..." />
                  <BField label="Instagram" v={form.instagram} on={(v) => setForm({ ...form, instagram: v })} placeholder="@username" />
                  <BField label="Місто" v={form.city} on={(v) => setForm({ ...form, city: v })} placeholder="Київ" />
                </div>
                <BField mt label="Що для тебе важливо в цьому турі? (опціонально)" v={form.notes} on={(v) => setForm({ ...form, notes: v })} placeholder="Розкажи, чого очікуєш..." multi />

                <div className="mt-8" style={{ padding: 16, borderRadius: 14, background: 'rgba(140,90,255,.07)', border: '1px solid rgba(140,90,255,.2)' }}>
                  <div className="flex gap-3" style={{ alignItems: 'start' }}>
                    <span style={{ fontSize: 20, lineHeight: 1 }}>💬</span>
                    <p style={{ fontSize: 13, color: 'var(--fg-1)', lineHeight: 1.55 }}>
                      Після заявки ми зв'яжемося з тобою в <strong>Telegram або Instagram</strong> протягом <strong>24 годин</strong> — обговоримо деталі та підтвердимо місце.
                    </p>
                  </div>
                </div>
              </Step>
            )}

            {step === 3 && (
              <div style={{ textAlign: 'center', padding: '40px 20px' }}>
                <div style={{ position: 'relative', width: 140, height: 140, margin: '0 auto' }}>
                  <ChromeBlob shape="knot" size={140} hue={285} spin={false} />
                  <div style={{ position: 'absolute', inset: 0, display: 'grid', placeItems: 'center' }}>
                    <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="3" style={{ filter: 'drop-shadow(0 4px 12px rgba(0,0,0,.4))' }}><path d="M5 12l5 5L20 7" strokeLinecap="round" /></svg>
                  </div>
                </div>
                <h2 className="h-xl mt-12">Заявку прийнято!</h2>
                <p className="mt-6" style={{ fontSize: 17, color: 'var(--fg-1)', maxWidth: 520, margin: '24px auto 0' }}>
                  {form.firstName ? `${form.firstName}, д` : 'Д'}якуємо за інтерес до туру <strong>{tour.month} · {tour.title}</strong>. Ми зв'яжемося з тобою найближчим часом.
                </p>

                <div className="card mt-12" style={{ padding: 24, maxWidth: 480, margin: '48px auto 0', textAlign: 'left' }}>
                  <div className="flex between" style={{ paddingBottom: 14, borderBottom: '1px solid var(--line)' }}>
                    <span className="mono" style={{ fontSize: 11, color: 'var(--fg-2)', letterSpacing: 0.12 }}>ЗАЯВКА №</span>
                    <span className="mono" style={{ fontSize: 12 }}>PVO-{tour.tag}-{Math.floor(Math.random() * 9000 + 1000)}</span>
                  </div>
                  <div className="flex between mt-4">
                    <span style={{ color: 'var(--fg-2)' }}>Тур</span>
                    <span>{tour.month} · {tour.title}</span>
                  </div>
                  <div className="flex between mt-4">
                    <span style={{ color: 'var(--fg-2)' }}>Номер</span>
                    <span>{room.name} · {guests} {guests === 1 ? 'гість' : 'гостя'}</span>
                  </div>
                  <div className="flex between mt-4">
                    <span style={{ color: 'var(--fg-2)' }}>Орієнтовна вартість</span>
                    <span style={{ color: 'var(--violet-soft)', fontWeight: 600 }}>€{total}</span>
                  </div>
                  {form.instagram && <div className="flex between mt-4">
                    <span style={{ color: 'var(--fg-2)' }}>Instagram</span>
                    <span>{form.instagram}</span>
                  </div>}
                </div>

                <div className="mt-8" style={{ padding: 20, background: 'rgba(140,90,255,.08)', borderRadius: 16, maxWidth: 480, margin: '24px auto 0', textAlign: 'left' }}>
                  <div className="mono" style={{ fontSize: 11, color: 'var(--violet-soft)', letterSpacing: 0.12, textTransform: 'uppercase', marginBottom: 12 }}>ЩО ДАЛІ</div>
                  <div className="stack gap-3">
                    {[
                      'Менеджер напише тобі в Telegram або Instagram',
                      'Короткий дзвінок-знайомство (5-10 хв)',
                      'Підтвердження місця та реквізити для депозиту',
                      'Запрошення в закритий чат туру',
                    ].map((t, i) => (
                      <div key={i} className="flex gap-3" style={{ alignItems: 'center' }}>
                        <span className="mono" style={{ fontSize: 11, color: 'var(--violet-soft)', flexShrink: 0 }}>0{i+1}</span>
                        <span style={{ fontSize: 14 }}>{t}</span>
                      </div>
                    ))}
                  </div>
                </div>

                <div className="mt-12" style={{ display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap' }}>
                  <MagneticBtn className="btn btn-primary" onClick={() => onNav('home')}>На головну <span className="arrow"><Arrow /></span></MagneticBtn>
                  <button className="btn btn-ghost" onClick={() => onNav('tour', tour.id)}>Повернутись до туру</button>
                </div>
              </div>
            )}

            {step < 3 && (
              <div className="flex between mt-12" style={{ paddingTop: 24, borderTop: '1px solid var(--line)' }}>
                <button className="btn btn-ghost" onClick={() => step === 0 ? onNav('tour', tour.id) : setStep(step - 1)}>← Назад</button>
                <MagneticBtn
                  className="btn btn-primary"
                  onClick={() => {
                    if (step === 2 && (!form.firstName || !form.email)) return;
                    setStep(step + 1);
                  }}>
                  {step === 2 ? 'Надіслати заявку' : 'Далі'} <span className="arrow"><Arrow /></span>
                </MagneticBtn>
              </div>
            )}
          </div>

          {/* Summary */}
          {step < 3 && (
            <div style={{ position: 'sticky', top: 100 }}>
              <div className="card" style={{ padding: 24 }}>
                <div className="mono" style={{ fontSize: 10, color: 'var(--violet-soft)', letterSpacing: 0.12, textTransform: 'uppercase' }}>ВАШЕ БРОНЮВАННЯ</div>
                <PhotoPH label={`${tour.tag} · ${tour.title}`} hue={tour.hue} style={{ marginTop: 16 }} />
                <h3 className="h-md mt-6">{tour.month}. {tour.title}</h3>
                <div className="mono" style={{ fontSize: 12, color: 'var(--fg-2)', marginTop: 4 }}>{tour.dates} · 6 днів</div>

                <div className="stack gap-3 mt-8" style={{ paddingTop: 20, borderTop: '1px solid var(--line)' }}>
                  <Row k="Номер" v={room.name} />
                  <Row k="Гостей" v={guests} />
                  <Row k="Базова ціна" v={`€${room.price} × ${guests}`} />
                  {form.extras.length > 0 && <Row k="Додатково" v={`${form.extras.length} опц.`} />}
                </div>

                <div className="flex between mt-8" style={{ alignItems: 'baseline', paddingTop: 20, borderTop: '1px solid var(--line)' }}>
                  <span className="mono" style={{ fontSize: 11, color: 'var(--fg-2)', textTransform: 'uppercase' }}>Орієнтовно</span>
                  <div style={{ fontFamily: 'Unbounded', fontSize: 32, fontWeight: 800 }}>€{total}</div>
                </div>
                <div className="mono mt-2" style={{ fontSize: 10, color: 'var(--fg-3)', textAlign: 'right' }}>оплата — після підтвердження</div>
              </div>

              <div className="card mt-4" style={{ padding: 20, background: 'rgba(140,90,255,.06)' }}>
                <div className="mono" style={{ fontSize: 10, color: 'var(--violet-soft)', letterSpacing: 0.12 }}>ГАРАНТІЯ</div>
                <div style={{ fontSize: 13, marginTop: 8, lineHeight: 1.5 }}>Безкоштовна відміна за 45 днів. Якщо нам не зайде на онлайн-знайомстві — повертаємо 100%.</div>
              </div>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

function Step({ title, sub, children }) {
  return (
    <div>
      <h2 style={{ fontFamily: 'Unbounded', fontSize: 32, fontWeight: 700, letterSpacing: '-0.02em' }}>{title}</h2>
      {sub && <p className="mt-4" style={{ color: 'var(--fg-2)', maxWidth: 540 }}>{sub}</p>}
      <div className="mt-12">{children}</div>
    </div>
  );
}

function BField({ label, v, on, placeholder, type, multi, mt }) {
  return (
    <label style={{ display: 'block', marginTop: mt ? 16 : 0 }}>
      <span className="mono" style={{ fontSize: 10, color: 'var(--fg-2)', letterSpacing: 0.12, textTransform: 'uppercase', display: 'block', marginBottom: 8 }}>{label}</span>
      {multi ? (
        <textarea value={v} onChange={e => on(e.target.value)} placeholder={placeholder} rows={3}
          style={{ width: '100%', padding: '14px 16px', background: 'var(--input-bg)', border: '1px solid var(--line-strong)', borderRadius: 12, color: 'var(--fg)', fontFamily: 'inherit', fontSize: 14, resize: 'vertical', outline: 'none' }}
          onFocus={e => e.target.style.borderColor = 'var(--violet)'}
          onBlur={e => e.target.style.borderColor = 'var(--line-strong)'}
        />
      ) : (
        <input value={v} onChange={e => on(e.target.value)} placeholder={placeholder} type={type || 'text'}
          style={{ width: '100%', padding: '14px 16px', background: 'var(--input-bg)', border: '1px solid var(--line-strong)', borderRadius: 12, color: 'var(--fg)', fontFamily: 'inherit', fontSize: 15, outline: 'none' }}
          onFocus={e => e.target.style.borderColor = 'var(--violet)'}
          onBlur={e => e.target.style.borderColor = 'var(--line-strong)'}
        />
      )}
    </label>
  );
}

function Row({ k, v }) {
  return (
    <div className="flex between">
      <span style={{ fontSize: 13, color: 'var(--fg-2)' }}>{k}</span>
      <span style={{ fontSize: 13, fontWeight: 500 }}>{v}</span>
    </div>
  );
}

Object.assign(window, { BookingFlow });