// Callback modal – calendly-style: date strip + time slots + contact form.
// Lighter intent than ApplicationFlow ("just schedule a call"), so the
// modal lives outside any route and is invokable from anywhere via openCallback().
function CallbackModal({ open, onClose, lang, preset }) {
  const t = (ru, en) => (lang === 'ru' ? ru : en);

  // Build the next 10 business days starting from tomorrow
  const days = React.useMemo(() => {
    const out = [];
    const cursor = new Date();
    cursor.setHours(0, 0, 0, 0);
    cursor.setDate(cursor.getDate() + 1);
    while (out.length < 10) {
      const wd = cursor.getDay(); // 0 sun 6 sat
      if (wd !== 0 && wd !== 6) {
        out.push(new Date(cursor));
      }
      cursor.setDate(cursor.getDate() + 1);
    }
    return out;
  }, [open]);

  const SLOTS = ['10:00', '12:00', '14:00', '16:00', '18:00'];
  const TZ_OPTIONS = [
    { v: 'Europe/Lisbon',   ru: 'Лиссабон (WET)',   en: 'Lisbon (WET)' },
    { v: 'Europe/Moscow',   ru: 'Москва (MSK)',     en: 'Moscow (MSK)' },
    { v: 'America/Sao_Paulo', ru: 'Сан-Паулу (BRT)', en: 'São Paulo (BRT)' },
    { v: 'America/New_York', ru: 'Нью-Йорк (EST)',   en: 'New York (EST)' },
  ];

  const [date, setDate] = React.useState(null);
  const [slot, setSlot] = React.useState(null);
  const [tz, setTz] = React.useState('Europe/Lisbon');
  const [name, setName] = React.useState('');
  const [phone, setPhone] = React.useState('');
  const [contactMode, setContactMode] = React.useState('phone'); // phone | whatsapp | telegram
  const [notes, setNotes] = React.useState('');
  const [consent, setConsent] = React.useState(false);
  const [step, setStep] = React.useState('pick'); // pick | contact | done

  // Reset on open
  React.useEffect(() => {
    if (open) {
      setDate(null); setSlot(null); setName(''); setPhone(''); setNotes('');
      setConsent(false); setStep('pick');
      if (preset && preset.programId) {
        setNotes(t(`Интересует программа: ${preset.programId}`, `Interested in program: ${preset.programId}`));
      }
    }
  }, [open]);

  if (!open) return null;

  const fmtDate = (d) => {
    const days = lang === 'ru'
      ? ['Вс','Пн','Вт','Ср','Чт','Пт','Сб']
      : ['Sun','Mon','Tue','Wed','Thu','Fri','Sat'];
    const months = lang === 'ru'
      ? ['янв','фев','мар','апр','май','июн','июл','авг','сен','окт','ноя','дек']
      : ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
    return { wd: days[d.getDay()], dom: d.getDate(), mon: months[d.getMonth()] };
  };

  const canConfirm = date && slot;
  const canSubmit  = name.trim() && phone.trim() && consent;

  const submit = (e) => {
    e && e.preventDefault();
    if (!canSubmit) return;
    // Prototype: no real submission. In production this hits /v1/migronis-callback.
    setStep('done');
  };

  return (
    <div onClick={onClose} style={{
      position: 'fixed', inset: 0, zIndex: 110,
      background: 'rgba(0,0,0,0.55)',
      backdropFilter: 'blur(12px)', WebkitBackdropFilter: 'blur(12px)',
      display: 'grid', placeItems: 'center',
      padding: 20, animation: 'fade-up .2s var(--ease-out)',
    }}>
      <div onClick={(e) => e.stopPropagation()} className="glass" style={{
        width: 'min(720px, 100%)', maxHeight: '92vh', overflowY: 'auto',
        background: 'var(--bg-elev)', border: '1px solid var(--border-strong)',
        borderRadius: 'var(--r-xl)',
      }}>
        {/* Header */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '18px 22px', borderBottom: '1px solid var(--border)' }}>
          <span style={{ width: 8, height: 8, background: 'var(--accent)', boxShadow: '0 0 10px var(--accent)' }} />
          <div style={{ flex: 1 }}>
            <div style={{ fontWeight: 500, fontSize: 16 }}>
              {step === 'done'
                ? t('Звонок назначен', 'Call scheduled')
                : t('Бесплатная консультация', 'Free consultation')}
            </div>
            <div style={{ fontSize: 12, color: 'var(--fg-muted)' }}>
              {step === 'done'
                ? t('Мы свяжемся в выбранное время', 'We will reach out at the chosen time')
                : t('15 минут · ни к чему не обязывает · бесплатно', '15 minutes · no commitment · free')}
            </div>
          </div>
          <button onClick={onClose} aria-label="Close" className="btn btn-ghost btn-sm" style={{ width: 36, padding: 0 }}>×</button>
        </div>

        {/* Step: pick date + time */}
        {step === 'pick' && (
          <div style={{ padding: 22 }}>
            <div className="eyebrow" style={{ marginBottom: 10 }}>{t('1. Выберите дату', '1. Pick a date')}</div>
            <div style={{ display: 'flex', gap: 8, overflowX: 'auto', paddingBottom: 6, marginBottom: 22 }}>
              {days.map((d, i) => {
                const f = fmtDate(d);
                const selected = date && d.toDateString() === date.toDateString();
                return (
                  <button key={i} onClick={() => setDate(d)} className="lift"
                    style={{
                      flex: '0 0 auto', minWidth: 72, padding: '10px 12px',
                      background: selected ? 'var(--accent-soft)' : 'var(--surface)',
                      border: '1px solid', borderColor: selected ? 'var(--accent)' : 'var(--border)',
                      color: 'var(--fg)', fontFamily: 'var(--f-sans)',
                      display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 2,
                      cursor: 'pointer', transition: 'background .15s, border-color .15s',
                    }}>
                    <span style={{ fontSize: 11, color: 'var(--fg-muted)', textTransform: 'uppercase', letterSpacing: '0.06em' }}>{f.wd}</span>
                    <span className="display" style={{ fontSize: 22, lineHeight: 1 }}>{f.dom}</span>
                    <span style={{ fontSize: 11, color: 'var(--fg-muted)' }}>{f.mon}</span>
                  </button>
                );
              })}
            </div>

            <div className="eyebrow" style={{ marginBottom: 10 }}>{t('2. Время', '2. Time')}</div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 8, marginBottom: 18 }}>
              {SLOTS.map((s) => {
                const selected = slot === s;
                const disabled = !date;
                return (
                  <button key={s} onClick={() => !disabled && setSlot(s)} disabled={disabled}
                    style={{
                      height: 44,
                      background: selected ? 'var(--accent-soft)' : disabled ? 'var(--surface)' : 'var(--surface)',
                      border: '1px solid', borderColor: selected ? 'var(--accent)' : 'var(--border)',
                      color: disabled ? 'var(--fg-dim)' : 'var(--fg)',
                      fontFamily: 'var(--f-mono)', fontSize: 14,
                      cursor: disabled ? 'not-allowed' : 'pointer',
                      opacity: disabled ? 0.5 : 1,
                      transition: 'background .15s, border-color .15s',
                    }}>{s}</button>
                );
              })}
            </div>

            <div className="eyebrow" style={{ marginBottom: 10 }}>{t('Часовой пояс', 'Time zone')}</div>
            <div className="field" style={{ marginBottom: 18 }}>
              <select value={tz} onChange={(e) => setTz(e.target.value)}>
                {TZ_OPTIONS.map((o) => <option key={o.v} value={o.v}>{o[lang]}</option>)}
              </select>
            </div>

            <button className="btn btn-primary"
                    disabled={!canConfirm}
                    onClick={() => setStep('contact')}
                    style={{ width: '100%', height: 52, opacity: canConfirm ? 1 : 0.4 }}>
              {t('Продолжить', 'Continue')} →
            </button>
          </div>
        )}

        {/* Step: contact form */}
        {step === 'contact' && (
          <form onSubmit={submit} style={{ padding: 22, display: 'flex', flexDirection: 'column', gap: 12 }}>
            <div style={{ padding: '12px 14px', background: 'var(--surface)', border: '1px solid var(--border)', display: 'flex', alignItems: 'center', gap: 12, marginBottom: 6 }}>
              <span className="mono" style={{ fontSize: 12, color: 'var(--accent)' }}>{t('Выбрано:', 'Selected:')}</span>
              <span style={{ fontSize: 14 }}>
                {(() => { const f = fmtDate(date); return `${f.wd}, ${f.dom} ${f.mon}`; })()} · {slot} · {TZ_OPTIONS.find((o) => o.v === tz)[lang]}
              </span>
              <button type="button" onClick={() => setStep('pick')}
                      style={{ marginLeft: 'auto', background: 'transparent', border: 0, color: 'var(--accent)', fontSize: 12, cursor: 'pointer' }}>
                {t('Изменить', 'Change')}
              </button>
            </div>

            <div className="field">
              <input value={name} onChange={(e) => setName(e.target.value)}
                     placeholder={t('Имя', 'Name')} autoComplete="name" />
            </div>

            <div>
              <div className="tabs" style={{ width: '100%', marginBottom: 8 }}>
                {[
                  { v: 'phone',    ru: 'Телефон',  en: 'Phone' },
                  { v: 'whatsapp', ru: 'WhatsApp', en: 'WhatsApp' },
                  { v: 'telegram', ru: 'Telegram', en: 'Telegram' },
                ].map((o) => (
                  <button type="button" key={o.v}
                          onClick={() => setContactMode(o.v)}
                          className={`tab ${contactMode === o.v ? 'is-active' : ''}`}
                          style={{ flex: 1 }}>{o[lang]}</button>
                ))}
              </div>
              <div className="field">
                <input value={phone} onChange={(e) => setPhone(e.target.value)}
                       placeholder={contactMode === 'telegram' ? '@username' : '+351 9XX XXX XXX'}
                       autoComplete="tel" />
              </div>
            </div>

            <div className="field" style={{ height: 100, alignItems: 'flex-start', padding: '12px 14px' }}>
              <textarea value={notes} onChange={(e) => setNotes(e.target.value)}
                        placeholder={t('О чём поговорим? (опционально – контекст, программа, бюджет)',
                                       'What should we discuss? (optional – context, program, budget)')}
                        style={{ resize: 'none', height: '100%' }} />
            </div>

            <label style={{ display: 'flex', alignItems: 'flex-start', gap: 10, cursor: 'pointer', fontSize: 12, color: 'var(--fg-muted)' }}>
              <input type="checkbox" checked={consent} onChange={(e) => setConsent(e.target.checked)}
                     style={{ marginTop: 3, accentColor: 'var(--accent)' }} />
              <span>{t('Согласен с обработкой персональных данных. Migronis не передаёт данные третьим лицам.',
                       'I agree to data processing. Migronis does not share data with third parties.')}</span>
            </label>

            <button type="submit" className="btn btn-primary"
                    disabled={!canSubmit}
                    style={{ height: 52, marginTop: 6, opacity: canSubmit ? 1 : 0.4 }}>
              {t('Подтвердить запись', 'Confirm booking')} →
            </button>
          </form>
        )}

        {/* Step: done */}
        {step === 'done' && (
          <div style={{ padding: '40px 22px', textAlign: 'center' }}>
            <div style={{
              width: 72, height: 72, margin: '0 auto 22px',
              background: 'var(--accent-soft)', color: 'var(--accent)',
              display: 'grid', placeItems: 'center', fontSize: 32,
            }}>✓</div>
            <div className="display" style={{ fontSize: 28 }}>
              {t('Звонок назначен', 'Call scheduled')}
            </div>
            <p style={{ color: 'var(--fg-muted)', fontSize: 14, marginTop: 12, maxWidth: 420, marginLeft: 'auto', marginRight: 'auto', lineHeight: 1.55 }}>
              {(() => {
                const f = fmtDate(date);
                return t(
                  `Перезвоним вам ${f.wd} ${f.dom} ${f.mon} в ${slot} (${TZ_OPTIONS.find((o) => o.v === tz).ru}). За час до звонка пришлём напоминание на ${contactMode === 'telegram' ? 'Telegram' : contactMode === 'whatsapp' ? 'WhatsApp' : 'указанный номер'}.`,
                  `We will call you on ${f.wd} ${f.dom} ${f.mon} at ${slot} (${TZ_OPTIONS.find((o) => o.v === tz).en}). A reminder will arrive on ${contactMode === 'telegram' ? 'Telegram' : contactMode === 'whatsapp' ? 'WhatsApp' : 'the phone number provided'} one hour before.`
                );
              })()}
            </p>
            <div style={{ display: 'flex', gap: 10, justifyContent: 'center', marginTop: 24, flexWrap: 'wrap' }}>
              <button className="btn btn-line" onClick={onClose}>
                {t('Закрыть', 'Close')}
              </button>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

window.CallbackModal = CallbackModal;