/* CONTACT FORM with validation */

function Contact() {
  const [form, setForm] = React.useState({
    name: '', email: '', company: '', telegram: '', budget: '', message: ''
  });
  const EMPTY_FORM = { name: '', email: '', company: '', telegram: '', budget: '', message: '' };
  const [errors, setErrors] = React.useState({});
  const [sent, setSent] = React.useState(false);
  const [sending, setSending] = React.useState(false);
  const formRef = React.useRef(null);

  const BUDGETS = [
    'Лендинг / Бот · до 150 K ₽',
    'Сайт / MVP · 150 K – 1 млн ₽',
    'Продукт · 1 – 3 млн ₽',
    '3+ млн ₽',
    'T&M · от 250 K ₽/мес',
    'Обсудим — бюджет не определён',
  ];

  React.useEffect(() => {
    const el = formRef.current;
    if (!el) return;
    const onMove = (e) => {
      const r = el.getBoundingClientRect();
      el.style.setProperty('--fx', ((e.clientX - r.left)/r.width*100) + '%');
      el.style.setProperty('--fy', ((e.clientY - r.top)/r.height*100) + '%');
    };
    el.addEventListener('mousemove', onMove);
    return () => el.removeEventListener('mousemove', onMove);
  }, []);

  const set = (k, v) => {
    setForm(f => ({...f, [k]: v}));
    if (errors[k]) setErrors(e => ({...e, [k]: null}));
  };

  // Soft validation for the optional Telegram field. We allow @user, user,
  // https://t.me/user. The server normalizes anyway, but inline feedback helps
  // catch a typo before submit. Returns true when value is empty OR valid.
  const isTelegramValid = (v) => {
    const s = String(v || '').trim();
    if (!s) return true;
    const stripped = s
      .replace(/^https?:\/\/(t\.me|telegram\.me|telegram\.dog)\//i, '')
      .replace(/^t\.me\//i, '')
      .replace(/^@+/, '')
      .split(/[\/\?#]/)[0];
    return /^[A-Za-z0-9_]{5,32}$/.test(stripped);
  };

  const validate = () => {
    const e = {};
    if (!form.name.trim() || form.name.trim().length < 2) e.name = 'Укажите имя';
    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email)) e.email = 'Невалидный email';
    if (!isTelegramValid(form.telegram)) e.telegram = 'Формат: @username, t.me/username или username (5–32 символа: буквы, цифры, _)';
    if (!form.budget) e.budget = 'Выберите диапазон';
    if (!form.message.trim() || form.message.trim().length < 12) e.message = 'Опишите задачу — мин. 12 символов';
    setErrors(e);
    return Object.keys(e).length === 0;
  };

  const submit = async (ev) => {
    ev.preventDefault();
    if (!validate()) return;
    setSending(true);
    try {
      const r = await fetch('/api/requests', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        credentials: 'same-origin',
        body: JSON.stringify(form),
      });
      const j = await r.json().catch(() => ({}));
      if (!r.ok) {
        setErrors({ _form: j.error || 'Не удалось отправить. Попробуйте позже.' });
        return;
      }
      setSent(true);
    } catch (_) {
      setErrors({ _form: 'Сервер недоступен. Попробуйте позже.' });
    } finally {
      setSending(false);
    }
  };

  return (
    <section className="section container" id="contact">
      <div className="section-head">
        <h2>Запуск. <span className="italic">Расскажите о&nbsp;задаче.</span></h2>
        <div className="num">08 / КОНТАКТ</div>
      </div>

      <div className="contact-wrap">
        <div className="contact-side">
          <h3>Ответим <span className="italic">в&nbsp;течение дня.</span></h3>
          <p>
            Назначим короткий созвон, чтобы понять контекст. После — продакт‑бриф и
            техническое предложение в&nbsp;течение 5 рабочих дней.
          </p>
          <div className="contact-meta">
            <div className="row">
              <span className="k">EMAIL</span>
              <a href="mailto:ipavmakeev@yandex.ru" className="contact-link">ipavmakeev@yandex.ru</a>
            </div>
            <div className="row">
              <span className="k">TELEGRAM</span>
              <a href="https://t.me/skuzhi" target="_blank" rel="noopener noreferrer" className="contact-link">@skuzhi</a>
            </div>
            <div className="row">
              <span className="k">HQ</span>
              <span>Екатеринбург</span>
            </div>
            <div className="row">
              <span className="k">HOURS</span>
              <span>Пн–Пт · 09:00–18:00 GMT+5</span>
            </div>
          </div>
        </div>

        <form ref={formRef} className="contact-form" onSubmit={submit} noValidate>
          {sent ? (
            <div className="form-success">
              <div className="check">
                <svg width="28" height="28" viewBox="0 0 24 24" fill="none">
                  <path d="M5 12.5l4 4L19 7" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"/>
                </svg>
              </div>
              <h4>Запрос отправлен</h4>
              <p>Свяжемся с&nbsp;вами в&nbsp;течение рабочего дня по&nbsp;{form.email}.</p>
              <button type="button" className="btn-sm" style={{marginTop: 24}}
                onClick={() => { setSent(false); setForm(EMPTY_FORM); }}>
                Отправить ещё один
              </button>
            </div>
          ) : (
            <React.Fragment>
              <div className="admin-edit grid-2" style={{padding: 0, marginBottom: 0, display:'grid', gridTemplateColumns:'1fr 1fr', gap:14}}>
                <div className={"field " + (errors.name ? "error" : "")}>
                  <label>Имя</label>
                  <input value={form.name} onChange={e => set('name', e.target.value)} placeholder="Анна Петрова"/>
                  {errors.name && <div className="err-msg">{errors.name}</div>}
                </div>
                <div className={"field " + (errors.email ? "error" : "")}>
                  <label>Email</label>
                  <input value={form.email} onChange={e => set('email', e.target.value)} placeholder="anna@company.com"/>
                  {errors.email && <div className="err-msg">{errors.email}</div>}
                </div>
              </div>

              <div className="admin-edit grid-2" style={{padding: 0, marginBottom: 0, display:'grid', gridTemplateColumns:'1fr 1fr', gap:14}}>
                <div className="field">
                  <label>Компания (необязательно)</label>
                  <input value={form.company} onChange={e => set('company', e.target.value)} placeholder="Acme Inc."/>
                </div>
                <div className={"field " + (errors.telegram ? "error" : "")}>
                  <label>Telegram (необязательно)</label>
                  <input
                    value={form.telegram}
                    onChange={e => set('telegram', e.target.value)}
                    placeholder="@username"
                    autoComplete="off"
                    inputMode="text"
                    spellCheck={false}
                  />
                  {errors.telegram && <div className="err-msg">{errors.telegram}</div>}
                </div>
              </div>

              <div className={"field " + (errors.budget ? "error" : "")}>
                <label>Бюджет</label>
                <div className="budget-chips">
                  {BUDGETS.map(b => (
                    <button type="button" key={b}
                      className={"b-chip " + (form.budget === b ? "active" : "")}
                      onClick={() => set('budget', b)}>{b}</button>
                  ))}
                </div>
                {errors.budget && <div className="err-msg">{errors.budget}</div>}
              </div>

              <div className={"field " + (errors.message ? "error" : "")}>
                <label>О&nbsp;проекте</label>
                <textarea value={form.message} onChange={e => set('message', e.target.value)}
                  placeholder="Что нужно построить, какие сроки, какие технологические ограничения…"/>
                {errors.message && <div className="err-msg">{errors.message}</div>}
              </div>

              {errors._form && (
                <div className="err-msg" style={{marginBottom: 10, textAlign: 'center'}}>
                  {errors._form}
                </div>
              )}
              <button type="submit" className="form-submit" disabled={sending}>
                {sending ? 'Отправка…' : <React.Fragment>Отправить запрос <ArrowIcon/></React.Fragment>}
              </button>
            </React.Fragment>
          )}
        </form>
      </div>
    </section>
  );
}

window.Contact = Contact;