// form.jsx — анкета мастера (final призыв) + thank-you
const { useState } = React;

const STATUS = ["Частный мастер","Самозанятый","ИП","Бригада","Компания"];
const WORKS = ["Сантехника","Электрика","Сборка мебели","Двери","Кондиционеры","Мелкий ремонт","Отделка","Другое"];

function formatPhone(v){
  let d = v.replace(/\D/g,"");
  if(d.startsWith("8")) d = "7"+d.slice(1);
  if(!d.startsWith("7")) d = "7"+d;
  d = d.slice(0,11);
  let out = "+7";
  if(d.length>1) out += " ("+d.slice(1,4);
  if(d.length>=4) out += ") "+d.slice(4,7);
  if(d.length>=7) out += "-"+d.slice(7,9);
  if(d.length>=9) out += "-"+d.slice(9,11);
  return out;
}

function FieldText({label,req,value,onChange,placeholder,err,type="text",inputMode,hint}){
  return (
    <div className="field">
      <label>{label}{req && <span className="req"> *</span>}{hint && <span className="hint"> {hint}</span>}</label>
      <input className={"control"+(err?" bad":"")} type={type} inputMode={inputMode}
        value={value} placeholder={placeholder} onChange={e=>onChange(e.target.value)} />
      {err && <span className="err">{err}</span>}
    </div>
  );
}

function Anketa(){
  const [f,setF] = useState({name:"",phone:"",status:"",works:[],region:"",agree:false});
  const [errs,setErrs] = useState({});
  const [sent,setSent] = useState(false);
  const [sending,setSending] = useState(false);
  const set = (k,v)=>{ setF(s=>({...s,[k]:v})); if(errs[k]) setErrs(e=>({...e,[k]:null})); };
  const toggleWork = (w)=> set("works", f.works.includes(w)? f.works.filter(x=>x!==w) : [...f.works,w]);

  const submit = async ()=>{
    const e={};
    if(!f.name.trim()) e.name="Как к вам обращаться?";
    if(f.phone.replace(/\D/g,"").length<11) e.phone="Введите номер телефона полностью";
    if(!f.status) e.status="Выберите статус";
    if(f.works.length===0) e.works="Отметьте хотя бы одну категорию";
    if(!f.region.trim()) e.region="Укажите районы выезда";
    if(!f.agree) e.agree="Нужно согласие на обработку данных";
    setErrs(e);
    if(Object.keys(e).length>0) return;

    setSending(true);
    try{
      const res = await fetch("/api/anketa", {
        method:"POST",
        headers:{ "Content-Type":"application/json" },
        body:JSON.stringify(f),
      });
      const data = await res.json().catch(()=>({}));
      if(!res.ok || !data.ok){
        setErrs(data.errors || { form:data.error || "Не удалось отправить анкету. Попробуйте ещё раз." });
        return;
      }
      setSent(true);
    }catch(_){
      setErrs({ form:"Не удалось отправить анкету. Проверьте соединение и попробуйте ещё раз." });
    }finally{
      setSending(false);
    }
  };

  if(sent){
    return (
      <div className="form-card thanks">
        <div className="thanks-badge"><Ic.check size={46} color="#fff" sw={2.4} /></div>
        <h3>Спасибо! Анкета отправлена</h3>
        <p>Мы проверим профиль и сообщим о следующих шагах подключения. После регистрации вы получите инструкцию по работе с сервисом — как принимать заявки, подтверждать время и закрывать работу.</p>
        <div className="thanks-pills">
          <span className="pill pill-accent"><Ic.free size={16} />Профиль на проверке</span>
          <span className="pill pill-accent"><Ic.phone size={16} />Мы свяжемся с вами</span>
        </div>
        <button className="btn btn-ghost btn-block" style={{marginTop:8}} onClick={()=>{setSent(false);setErrs({});setF({name:"",phone:"",status:"",works:[],region:"",agree:false});}}>Заполнить ещё одну анкету</button>
      </div>
    );
  }

  return (
    <div className="form-card" id="anketa-card">
      <h3 className="form-title">Анкета мастера</h3>
      <p className="form-sub">Заполните данные о себе, укажите виды работ и районы выезда. Это займёт пару минут.</p>
      <div className="form-grid">
        <FieldText label="Имя" req value={f.name} onChange={v=>set("name",v)} placeholder="Например, Сергей" err={errs.name} />
        <FieldText label="Телефон" req type="tel" inputMode="tel" value={f.phone} onChange={v=>set("phone",formatPhone(v))} placeholder="+7 (___) ___-__-__" err={errs.phone} />

        <div className="field span2">
          <label>Статус<span className="req"> *</span></label>
          <div className={"chips"+(errs.status?" bad-chips":"")}>
            {STATUS.map(s=>(<button type="button" key={s} className={"chip"+(f.status===s?" on":"")} onClick={()=>set("status",s)}>{s}</button>))}
          </div>
          {errs.status && <span className="err">{errs.status}</span>}
        </div>

        <div className="field span2">
          <label>Категории работ<span className="req"> *</span><span className="hint"> можно несколько</span></label>
          <div className={"chips"+(errs.works?" bad-chips":"")}>
            {WORKS.map(w=>(<button type="button" key={w} className={"chip"+(f.works.includes(w)?" on":"")} onClick={()=>toggleWork(w)}>{f.works.includes(w)&&<Ic.check size={14} color="#fff" sw={2.6} />}{w}</button>))}
          </div>
          {errs.works && <span className="err">{errs.works}</span>}
        </div>

        <div className="field span2">
          <FieldText label="Районы выезда" req value={f.region} onChange={v=>set("region",v)} placeholder="Краснодар: Центр, ЮМР" err={errs.region} />
        </div>
      </div>

      <label className={"agree"+(errs.agree?" bad-agree":"")}>
        <input type="checkbox" checked={f.agree} onChange={e=>set("agree",e.target.checked)} />
        <span className="box">{f.agree && <Ic.check size={15} color="#fff" sw={2.6} />}</span>
        <span className="agree-txt">Согласен на обработку персональных данных и получение сообщений о подключении к VOVO. С правилами сервиса ознакомлюсь при регистрации.</span>
      </label>

      {errs.form && <span className="err form-err">{errs.form}</span>}
      {f.agree && (
        <button className="btn btn-orange btn-block btn-lg" onClick={submit} disabled={sending}>{sending?"Отправляем...":"Зарегистрироваться"}</button>
      )}
      <p className="form-foot"><Ic.free size={16} color="var(--accent-600)" />После проверки профиля мы сообщим о следующих шагах.</p>
    </div>
  );
}

function FormSection(){
  return (
    <section className="sec form-sec" id="anketa">
      <div className="wrap form-layout">
        <div className="form-pitch">
          <div className="eyebrow">Начните с анкеты</div>
          <h2>Подключитесь к VOVO в Краснодаре</h2>
          <p>Заполните данные о себе, укажите виды работ и районы выезда. Мы проверим профиль и сообщим о следующих шагах подключения.</p>
          <ul className="pitch-list">
            <li><span className="pl-ico"><Ic.pin2 size={20} /></span>Заявки от клиентов рядом с вами</li>
            <li><span className="pl-ico"><Ic.toggle size={20} /></span>Вы выбираете районы, услуги и заявки</li>
            <li><span className="pl-ico"><Ic.phone size={20} /></span>Свяжемся и расскажем о следующих шагах</li>
          </ul>
        </div>
        <Anketa />
      </div>
    </section>
  );
}

Object.assign(window, { FormSection });