// Модальное окно «Заказать» — для товаров под заказ

function TelegramIcon({ size = 16 }) {
  return <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor"><path d="M9.78 18.65 10.06 14.42 17.74 7.5C18.08 7.19 17.67 7.04 17.22 7.31L7.74 13.3 3.64 12C2.76 11.75 2.75 11.14 3.84 10.7L19.81 4.54C20.54 4.21 21.24 4.72 20.96 5.84L18.24 18.65C18.05 19.56 17.5 19.78 16.74 19.36L12.6 16.3L10.61 18.23C10.38 18.46 10.19 18.65 9.78 18.65Z"/></svg>;
}

function OrderModal({ product, onClose }) {
  const [contactType, setContactType] = React.useState('phone'); // phone | max | telegram
  const [phone, setPhone] = React.useState('');
  const [email, setEmail] = React.useState('');
  const [name, setName] = React.useState('');
  const [comment, setComment] = React.useState('');
  const [agree, setAgree] = React.useState(true);
  const [touched, setTouched] = React.useState({});
  const [submitting, setSubmitting] = React.useState(false);
  const [done, setDone] = React.useState(null); // { orderId }
  const phoneRef = React.useRef(null);
  const dialogRef = React.useRef(null);

  // ----- Bottom-sheet swipe-down (mobile only) -----
  // Тачи слушаем только на «ручке» сверху диалога — внутренний скролл формы
  // должен работать обычным образом. На десктопе обработчики висят, но
  // window.innerWidth > 767 → сразу выходим.
  const [dragY, setDragY] = React.useState(0);
  const touchStartY = React.useRef(null);
  const onHandleTouchStart = (e) => {
    if (window.innerWidth > 767) return;
    touchStartY.current = e.touches[0].clientY;
  };
  const onHandleTouchMove = (e) => {
    if (touchStartY.current == null) return;
    const dy = e.touches[0].clientY - touchStartY.current;
    if (dy > 0) setDragY(dy);
  };
  const onHandleTouchEnd = () => {
    if (touchStartY.current == null) return;
    if (dragY > 120) onClose();
    else setDragY(0);
    touchStartY.current = null;
  };

  // Автофокус + блокировка скролла + закрытие по Esc
  React.useEffect(() => {
    const prevOverflow = document.body.style.overflow;
    document.body.style.overflow = 'hidden';
    setTimeout(() => phoneRef.current?.focus(), 50);
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    window.addEventListener('keydown', onKey);
    return () => {
      document.body.style.overflow = prevOverflow;
      window.removeEventListener('keydown', onKey);
    };
  }, [onClose]);

  // Маска телефона: +7 (___) ___-__-__
  const formatPhone = (raw) => {
    const digits = raw.replace(/\D/g, '').replace(/^8/, '7').replace(/^(?!7)/, '7').slice(0, 11);
    const d = digits.slice(1); // без ведущей 7
    let out = '+7';
    if (d.length > 0) out += ' (' + d.slice(0, 3);
    if (d.length >= 3) out += ') ' + d.slice(3, 6);
    if (d.length >= 6) out += '-' + d.slice(6, 8);
    if (d.length >= 8) out += '-' + d.slice(8, 10);
    return out;
  };
  const onPhoneChange = (e) => {
    const val = e.target.value;
    // Разрешим очистить полностью
    if (!val.replace(/\D/g, '')) { setPhone(''); return; }
    setPhone(formatPhone(val));
  };

  const phoneDigits = phone.replace(/\D/g, '');
  const phoneValid = phoneDigits.length === 11;
  const emailValid = !email || /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
  const canSubmit = phoneValid && emailValid && agree && !submitting;

  const submit = (e) => {
    e.preventDefault();
    setTouched({ phone: true, email: true });
    if (!canSubmit) return;
    setSubmitting(true);
    // Имитация запроса
    setTimeout(() => {
      setSubmitting(false);
      setDone({ orderId: 'ПЭ-' + String(Math.floor(Math.random() * 90000) + 10000) });
    }, 900);
  };

  const backdropClick = (e) => {
    if (e.target === e.currentTarget) onClose();
  };

  const inputBase = {
    width: '100%', height: 52, padding: '0 16px', borderRadius: 12,
    border: '1.5px solid var(--line)', background: '#fff', fontFamily: 'var(--rc)',
    fontSize: 16, color: 'var(--text)', outline: 'none', transition: 'border-color .15s'
  };
  const errorStyle = { borderColor: '#E53324' };
  const labelStyle = { fontFamily: 'var(--rc)', fontSize: 13, color: 'var(--text-2)', marginBottom: 6, display: 'block' };

  return (
    <div onClick={backdropClick} className="om-overlay" style={{
      position:'fixed', inset:0, zIndex: 100,
      background:'rgba(32,30,30,0.55)', backdropFilter:'blur(4px)',
      display:'flex', alignItems:'center', justifyContent:'center',
      padding: 20, animation: 'om-fade .18s ease-out'
    }}>
      <style>{`
        @keyframes om-fade { from { opacity: 0 } to { opacity: 1 } }
        @keyframes om-pop { from { opacity: 0; transform: translateY(8px) scale(.98) } to { opacity: 1; transform: translateY(0) scale(1) } }
        @keyframes om-slide-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
        .om-contact-tab { flex:1; height:44px; border-radius:10px; font-family:var(--rc); font-size: 15px; color:var(--text-2); display:inline-flex; align-items:center; justify-content:center; gap:6px; transition: all .15s; cursor:pointer; border:none; background:transparent; }
        .om-contact-tab.on { background:#fff; color:var(--text); box-shadow:0 1px 3px rgba(0,0,0,.08); }
        .om-input:focus { border-color: var(--text) !important; }
        .om-input.err { border-color: #E53324 !important; }
        .om-err-msg { font-family:var(--rc); font-size: 13px; color:#E53324; margin-top:4px; }
        .om-check { width:20px; height:20px; flex-shrink:0; border-radius:5px; border:1.5px solid var(--line); background:#fff; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; transition: all .15s; }
        .om-check.on { background:var(--red); border-color:var(--red); color:#fff; }
        .om-handle { display: none; }
        /* ----- Bottom-sheet на мобиле (≤ 767 px) -----
           Inline-стили выше задают центрированный modal — на узких экранах
           перекрываем !important: align-items: flex-end, диалог во всю
           ширину, скругление 24/24/0/0, slide-up анимация и drag-handle. */
        @media (max-width: 767px) {
          .om-overlay {
            align-items: flex-end !important;
            padding: 0 !important;
          }
          .om-dialog {
            width: 100% !important;
            max-width: 100% !important;
            max-height: 92vh !important;
            border-radius: 24px 24px 0 0 !important;
            animation: om-slide-up .25s cubic-bezier(.2,.7,.3,1) !important;
            box-shadow: 0 -20px 60px rgba(0,0,0,0.25) !important;
            transition: transform .15s ease-out;
          }
          .om-dialog.dragging { transition: none; }
          /* Drag-handle сверху — визуальная подсказка свайпа вниз */
          .om-handle {
            display: flex;
            justify-content: center;
            padding: 8px 0 4px;
            cursor: grab;
            touch-action: none;
            user-select: none;
            background: #fff;
            border-radius: 24px 24px 0 0;
            position: sticky;
            top: 0;
            z-index: 2;
          }
          .om-handle::after {
            content: '';
            width: 36px;
            height: 4px;
            border-radius: 2px;
            background: var(--line);
          }
          /* Сжимаем внутренние паддинги под mobile */
          .om-section-head { padding: 4px 20px 0 !important; }
          .om-section-head h3 { font-size: 22px !important; }
          .om-section-prod { margin: 16px 20px 0 !important; }
          .om-form { padding: 16px 20px 24px !important; }
          .om-success { padding: 32px 20px 24px !important; }
          /* Кнопки в футере — стекаем вертикально, primary первой */
          .om-footer-btns {
            flex-direction: column-reverse !important;
            gap: 8px !important;
          }
          .om-footer-btns > button {
            width: 100% !important;
            flex: 0 0 auto !important;
          }
        }
      `}</style>

      <div ref={dialogRef} role="dialog" aria-modal="true" aria-labelledby="om-title"
        className={'om-dialog' + (dragY > 0 ? ' dragging' : '')}
        style={{
          width: 520, maxWidth:'100%', maxHeight:'calc(100vh - 40px)', overflowY:'auto',
          background:'#fff', borderRadius: 24, boxShadow:'0 30px 80px rgba(0,0,0,0.25)',
          animation:'om-pop .22s ease-out',
          transform: dragY > 0 ? `translateY(${dragY}px)` : undefined
        }}>
        {/* Drag-handle для свайпа вниз — виден только на мобиле */}
        <div className="om-handle"
          onTouchStart={onHandleTouchStart}
          onTouchMove={onHandleTouchMove}
          onTouchEnd={onHandleTouchEnd}
          onTouchCancel={onHandleTouchEnd}
        />
        {!done ? (
          <>
            {/* Header */}
            <div className="om-section-head" style={{ padding:'24px 28px 0', position:'relative' }}>
              <button onClick={onClose} aria-label="Закрыть" style={{
                position:'absolute', top:16, right:16, width:36, height:36, borderRadius:'50%',
                background:'var(--bg-soft)', display:'inline-flex', alignItems:'center', justifyContent:'center',
                color:'var(--text-2)', cursor:'pointer', border:'none', transition:'background .15s'
              }} onMouseEnter={e => e.currentTarget.style.background='var(--line-2)'}
                 onMouseLeave={e => e.currentTarget.style.background='var(--bg-soft)'}>
                <Icon.Close style={{ width:18, height:18 }} />
              </button>
              <h3 id="om-title" style={{
                fontFamily:'var(--rc)', fontWeight:600, fontSize:24, letterSpacing:'-0.02em',
                color:'var(--text)', margin:'0 48px 6px 0', lineHeight:1.2
              }}>Заказ под заказ</h3>
              <div style={{ fontFamily:'var(--rc)', fontSize:14, color:'var(--text-2)' }}>
                Перезвоним в течение 15 минут в рабочее время (9:00–19:00 МСК)
              </div>
            </div>

            {/* Карточка товара */}
            {product && (
              <div className="om-section-prod" style={{
                margin:'20px 28px 0', padding:12, background:'var(--bg-soft)',
                borderRadius:14, display:'flex', gap:12, alignItems:'center'
              }}>
                <div style={{
                  width:56, height:56, borderRadius:10, overflow:'hidden',
                  background:'#fff', border:'1px solid var(--line-2)', flexShrink:0, position:'relative'
                }}>
                  {typeof ProductPlaceholder !== 'undefined' && <ProductPlaceholder variant={0} label={product.brand} />}
                </div>
                <div style={{ minWidth:0, flex:1 }}>
                  <div style={{
                    fontFamily:'var(--rc)', fontSize:14, color:'var(--text)', fontWeight:500,
                    lineHeight:1.3, display:'-webkit-box', WebkitLineClamp:2, WebkitBoxOrient:'vertical', overflow:'hidden'
                  }}>{product.name}</div>
                  <div style={{ fontFamily:'var(--rc)', fontSize:12, color:'var(--text-3)', marginTop:2 }}>
                    Арт. {product.art} · {fmtPrice(product.price)}
                  </div>
                </div>
              </div>
            )}

            <form className="om-form" onSubmit={submit} style={{ padding:'20px 28px 24px' }}>
              {/* Способ связи */}
              <div style={labelStyle}>Удобный способ связи</div>
              <div style={{
                display:'flex', gap:4, padding:4, background:'var(--bg-soft)',
                borderRadius:12, marginBottom:16
              }}>
                <button type="button" className={`om-contact-tab ${contactType==='phone'?'on':''}`} onClick={()=>setContactType('phone')}>
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></svg>
                  Звонок
                </button>
                <button type="button" className={`om-contact-tab ${contactType==='max'?'on':''}`} onClick={()=>setContactType('max')}>
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
                    <path d="M12 2C6.48 2 2 6.17 2 11.3c0 2.76 1.33 5.23 3.46 6.93l-.82 3.2c-.11.43.35.78.73.55l3.62-2.22c.97.27 2 .42 3.01.42 5.52 0 10-4.17 10-9.3S17.52 2 12 2Zm-1.2 11.6-2.55-3.4a.4.4 0 0 1 .56-.56l2.1 1.58 3.1-3.3a.4.4 0 0 1 .62.5l-3.2 4.8a.5.5 0 0 1-.63.38Z"/>
                  </svg>
                  Макс
                </button>
                <button type="button" className={`om-contact-tab ${contactType==='telegram'?'on':''}`} onClick={()=>setContactType('telegram')}>
                  <TelegramIcon />
                  Telegram
                </button>
              </div>

              {/* Имя */}
              <label style={labelStyle} htmlFor="om-name">Как к вам обращаться</label>
              <input id="om-name" className="om-input" value={name} onChange={e=>setName(e.target.value)}
                placeholder="Имя" style={inputBase} />

              {/* Телефон */}
              <label style={{...labelStyle, marginTop:14}} htmlFor="om-phone">
                Телефон <span style={{ color:'#E53324' }}>*</span>
              </label>
              <input id="om-phone" ref={phoneRef} className={`om-input ${touched.phone && !phoneValid ? 'err' : ''}`}
                value={phone} onChange={onPhoneChange}
                onBlur={()=>setTouched(t=>({...t, phone:true}))}
                placeholder="+7 (___) ___-__-__"
                inputMode="tel" autoComplete="tel"
                style={inputBase} />
              {touched.phone && !phoneValid && <div className="om-err-msg">Укажите корректный номер телефона</div>}

              {/* Email */}
              <label style={{...labelStyle, marginTop:14}} htmlFor="om-email">
                Электронная почта <span style={{ color:'var(--text-3)', fontWeight:400 }}>(необязательно)</span>
              </label>
              <input id="om-email" className={`om-input ${touched.email && !emailValid ? 'err' : ''}`}
                type="email" value={email} onChange={e=>setEmail(e.target.value)}
                onBlur={()=>setTouched(t=>({...t, email:true}))}
                placeholder="name@company.ru" autoComplete="email"
                style={inputBase} />
              {touched.email && !emailValid && <div className="om-err-msg">Некорректный адрес электронной почты</div>}

              {/* Комментарий */}
              <label style={{...labelStyle, marginTop:14}} htmlFor="om-comment">
                Комментарий <span style={{ color:'var(--text-3)', fontWeight:400 }}>(количество, сроки, вопросы)</span>
              </label>
              <textarea id="om-comment" className="om-input" value={comment} onChange={e=>setComment(e.target.value)}
                placeholder="Например: нужно 3 шт. к 15 мая, интересует доставка до Екатеринбурга"
                rows={3}
                style={{ ...inputBase, height:'auto', padding:'12px 16px', resize:'vertical', minHeight:80, lineHeight:1.4 }} />

              {/* Согласие */}
              <label style={{
                display:'flex', gap:10, alignItems:'flex-start', marginTop:18, cursor:'pointer',
                fontFamily:'var(--rc)', fontSize:13, color:'var(--text-2)', lineHeight:1.4
              }}>
                <span className={`om-check ${agree ? 'on' : ''}`} onClick={(e)=>{e.preventDefault(); setAgree(!agree);}}>
                  {agree && <Icon.Check style={{ width:14, height:14 }} />}
                </span>
                <input type="checkbox" checked={agree} onChange={e=>setAgree(e.target.checked)} style={{ display:'none' }} />
                <span>
                  Согласен на обработку <a href="#" style={{ color:'var(--red)', textDecoration:'underline', textDecorationColor:'var(--line)' }}>персональных данных</a> и условия <a href="#" style={{ color:'var(--red)', textDecoration:'underline', textDecorationColor:'var(--line)' }}>оферты</a>
                </span>
              </label>

              {/* Кнопки */}
              <div className="om-footer-btns" style={{ display:'flex', gap:10, marginTop:22 }}>
                <button type="button" onClick={onClose} className="btn btn-outline"
                  style={{ flex:'0 0 auto', height:52, borderRadius:26, padding:'0 20px', fontSize:15 }}>
                  Отмена
                </button>
                <button type="submit" disabled={!canSubmit} className="btn btn-primary"
                  style={{
                    flex:1, height:52, borderRadius:26, fontSize:15,
                    opacity: canSubmit ? 1 : 0.5, cursor: canSubmit ? 'pointer' : 'not-allowed'
                  }}>
                  {submitting ? 'Отправка…' : 'Отправить заявку'}
                </button>
              </div>

              <div style={{
                marginTop:14, display:'flex', alignItems:'center', gap:8,
                fontFamily:'var(--rc)', fontSize:12, color:'var(--text-3)'
              }}>
                <Icon.Shield style={{ width:14, height:14 }} />
                Мы не передаём данные третьим лицам
              </div>
            </form>
          </>
        ) : (
          // Успех
          <div className="om-success" style={{ padding:'40px 28px 32px', textAlign:'center' }}>
            <div style={{
              width:72, height:72, borderRadius:'50%', background:'#E8F5D8',
              display:'inline-flex', alignItems:'center', justifyContent:'center',
              margin:'0 auto 16px', color:'var(--green)'
            }}>
              <Icon.Check style={{ width:36, height:36 }} />
            </div>
            <h3 style={{
              fontFamily:'var(--rc)', fontWeight:600, fontSize:24, letterSpacing:'-0.02em',
              color:'var(--text)', margin:'0 0 8px'
            }}>Заявка принята</h3>
            <div style={{ fontFamily:'var(--rc)', fontSize:15, color:'var(--text)', lineHeight:1.5, marginBottom:20 }}>
              Номер обращения <b style={{ color:'var(--text)' }}>{done.orderId}</b><br/>
              Менеджер свяжется с вами в течение 15 минут.
            </div>
            <div style={{
              padding:14, background:'var(--bg-soft)', borderRadius:12,
              fontFamily:'var(--rc)', fontSize:13, color:'var(--text-2)', marginBottom:20, textAlign:'left'
            }}>
              <div style={{ marginBottom:6 }}><b style={{ color:'var(--text)' }}>Что дальше?</b></div>
              <div>1. Проверим наличие у поставщика и уточним сроки</div>
              <div>2. Согласуем цену и условия договора</div>
              <div>3. Отправим счёт и спецификацию на электронную почту</div>
            </div>
            <button onClick={onClose} className="btn btn-primary"
              style={{ width:'100%', height:52, borderRadius:26, fontSize:15 }}>
              Понятно
            </button>
          </div>
        )}
      </div>
    </div>
  );
}

Object.assign(window, { OrderModal });