/* Booking flow — 3 steps: guest info → payment → confirmation */
const { useState: useStateB, useEffect: useEffectB } = React;

function fmtPriceB(n) { return n.toLocaleString('ru-RU').replace(/,/g,' ') + ' ₸'; }
function fmtDateB(d) { return d ? new Date(d).toLocaleDateString('ru-RU', { day: '2-digit', month: 'long', year: 'numeric' }) : '—'; }

function StepDots({ step }) {
  return (
    <div className="bk-steps">
      {[1, 2, 3].map(n => (
        <div key={n} className={"bk-step" + (step >= n ? " is-done" : "")}>
          <span className="bk-step-num">{n}</span>
          <span className="bk-step-lbl">
            {n === 1 ? 'Гость' : n === 2 ? 'Оплата' : 'Готово'}
          </span>
        </div>
      ))}
    </div>
  );
}

function BookingFlow({ booking, onClose }) {
  const [step, setStep] = useStateB(1);
  const [guest, setGuest] = useStateB({ name: '', phone: '', email: '', note: '' });
  const [pay, setPay] = useStateB('kaspi'); // kaspi | card | cash

  useEffectB(() => {
    const onKey = e => { if (e.key === 'Escape') onClose(); };
    document.addEventListener('keydown', onKey);
    document.body.style.overflow = 'hidden';
    return () => { document.removeEventListener('keydown', onKey); document.body.style.overflow = ''; };
  }, []);

  const { apt, checkIn, checkOut, nights, total } = booking;
  const canStep1 = guest.name.trim().length > 1 && guest.phone.replace(/\D/g, '').length >= 10;

  return (
    <div className="bk-overlay" onClick={onClose}>
      <div className="bk-modal" onClick={e => e.stopPropagation()}>
        <button className="bk-close" onClick={onClose} aria-label="Закрыть">×</button>

        <div className="bk-grid">
          <div className="bk-main">
            <div className="bk-eyebrow">Бронирование</div>
            <StepDots step={step} />

            {step === 1 && (
              <div className="bk-step-pane">
                <h2 className="bk-h">Контактные данные</h2>
                <p className="bk-sub">Мы пришлём подтверждение в WhatsApp и на email.</p>

                <div className="bk-form">
                  <label className="bk-field">
                    <span className="bk-label">Имя и фамилия</span>
                    <input type="text" value={guest.name}
                      onChange={e => setGuest({ ...guest, name: e.target.value })}
                      placeholder="Айдар Серикулы" />
                  </label>
                  <label className="bk-field">
                    <span className="bk-label">Телефон</span>
                    <input type="tel" value={guest.phone}
                      onChange={e => setGuest({ ...guest, phone: e.target.value })}
                      placeholder="+7 (___) ___-__-__" />
                  </label>
                  <label className="bk-field">
                    <span className="bk-label">Email <span className="bk-opt">— по желанию</span></span>
                    <input type="email" value={guest.email}
                      onChange={e => setGuest({ ...guest, email: e.target.value })}
                      placeholder="you@mail.com" />
                  </label>
                  <label className="bk-field bk-field-wide">
                    <span className="bk-label">Комментарий <span className="bk-opt">— ранний заезд, питомец и т.п.</span></span>
                    <textarea rows="3" value={guest.note}
                      onChange={e => setGuest({ ...guest, note: e.target.value })}
                      placeholder="" />
                  </label>
                </div>

                <div className="bk-actions">
                  <button className="bk-back" onClick={onClose}>← Назад к&nbsp;объекту</button>
                  <button className="bk-next" disabled={!canStep1} onClick={() => setStep(2)}>Далее →</button>
                </div>
              </div>
            )}

            {step === 2 && (
              <div className="bk-step-pane">
                <h2 className="bk-h">Способ оплаты</h2>
                <p className="bk-sub">Полная оплата за проживание + депозит 10&nbsp;000&nbsp;₸ при заезде (возвращается).</p>

                <div className="bk-pay">
                  {[
                    { id: 'kaspi', name: 'Kaspi Pay', sub: 'Перевод по номеру · подтверждение мгновенно', icon: 'K' },
                    { id: 'card',  name: 'Банковская карта', sub: 'Visa · Mastercard · 3-D Secure', icon: '▭' },
                    { id: 'cash',  name: 'Наличными при заезде', sub: 'Подтверждение от менеджера', icon: '₸' }
                  ].map(p => (
                    <label key={p.id} className={"bk-pay-row" + (pay === p.id ? " is-sel" : "")}>
                      <input type="radio" name="pay" checked={pay === p.id} onChange={() => setPay(p.id)} />
                      <span className="bk-pay-icon">{p.icon}</span>
                      <span className="bk-pay-body">
                        <span className="bk-pay-name">{p.name}</span>
                        <span className="bk-pay-sub">{p.sub}</span>
                      </span>
                      <span className="bk-pay-check"></span>
                    </label>
                  ))}
                </div>

                <div className="bk-policies">
                  <p>При отмене бронирования предоплата не возвращается. Депозит 10&nbsp;000&nbsp;₸ возвращается до 17:00 в день выезда после проверки квартиры.</p>
                </div>

                <div className="bk-actions">
                  <button className="bk-back" onClick={() => setStep(1)}>← Назад</button>
                  <button className="bk-next" onClick={() => setStep(3)}>
                    Подтвердить и оплатить · {fmtPriceB(total)} →
                  </button>
                </div>
              </div>
            )}

            {step === 3 && (
              <div className="bk-step-pane bk-confirm">
                <div className="bk-success">
                  <svg viewBox="0 0 64 64" width="56" height="56">
                    <circle cx="32" cy="32" r="28" fill="none" stroke="#A0805D" strokeWidth="1.5" />
                    <path d="M20 33 L29 41 L45 24" fill="none" stroke="#A0805D" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
                  </svg>
                </div>
                <h2 className="bk-h">Бронь принята</h2>
                <p className="bk-sub">
                  Заявка №&nbsp;<strong>{('MA' + Math.floor(Math.random() * 90000 + 10000))}</strong> отправлена менеджеру.
                  Подтверждение придёт в&nbsp;WhatsApp на&nbsp;{guest.phone || 'указанный номер'} в&nbsp;течение часа.
                </p>

                <div className="bk-confirm-card">
                  <div className="bk-cc-row"><span>Объект</span><span>{apt.title}</span></div>
                  <div className="bk-cc-row"><span>Адрес</span><span>{apt.building}, {apt.address}</span></div>
                  <div className="bk-cc-row"><span>Заезд</span><span>{fmtDateB(checkIn)} · после&nbsp;14:00</span></div>
                  <div className="bk-cc-row"><span>Выезд</span><span>{fmtDateB(checkOut)} · до&nbsp;12:00</span></div>
                  <div className="bk-cc-row"><span>Оплата</span><span>{pay === 'kaspi' ? 'Kaspi Pay' : pay === 'card' ? 'Карта' : 'Наличные при заезде'}</span></div>
                  <div className="bk-cc-row bk-cc-total"><span>Сумма</span><span>{fmtPriceB(total)}</span></div>
                </div>

                <div className="bk-actions bk-actions-center">
                  <button className="bk-next" onClick={onClose}>Готово</button>
                </div>
              </div>
            )}
          </div>

          <aside className="bk-summary">
            <div className="bk-sum-photo">
              <img src={apt.cover} alt={apt.title} />
              <div className="bk-sum-tone" />
            </div>
            <div className="bk-sum-body">
              <div className="bk-sum-eyebrow">{apt.building}</div>
              <h3 className="bk-sum-title">{apt.title}</h3>
              <div className="bk-sum-meta">
                {apt.area} м² · до {apt.guests} гостей · {apt.type}
              </div>

              <hr className="bk-sum-rule" />

              <div className="bk-sum-row">
                <span>Заезд</span>
                <strong>{fmtDateB(checkIn)}</strong>
              </div>
              <div className="bk-sum-row">
                <span>Выезд</span>
                <strong>{fmtDateB(checkOut)}</strong>
              </div>
              <div className="bk-sum-row">
                <span>Ночей</span>
                <strong>{nights}</strong>
              </div>

              <hr className="bk-sum-rule" />

              <div className="bk-sum-row"><span>{fmtPriceB(apt.price)} × {nights}</span><span>{fmtPriceB(apt.price * nights)}</span></div>
              <div className="bk-sum-row"><span>Уборка</span><span>{fmtPriceB(5000)}</span></div>
              <div className="bk-sum-row bk-sum-muted"><span>Депозит (возвр.)</span><span>{fmtPriceB(10000)}</span></div>

              <div className="bk-sum-total">
                <span>Итого</span>
                <strong>{fmtPriceB(total)}</strong>
              </div>
            </div>
          </aside>
        </div>
      </div>
    </div>
  );
}

window.BookingFlow = BookingFlow;