/* Schema-driven form engine: Field types + sections + Register/Trial/Survey forms */

function Field({ field: f, value, error, onChange }) {
  const id = 'f_' + f.id;
  const lbl =
  <label htmlFor={id}>
      {f.label}{f.required && <span className="req">*</span>}
      {f.hint && <span className="hint">{f.hint}</span>}
    </label>;


  if (['text', 'email', 'tel', 'number'].includes(f.type)) {
    return (
      <div className="field">
        {lbl}
        <input id={id} className={'input' + (error ? ' bad' : '')} type={f.type === 'number' ? 'number' : f.type === 'email' ? 'email' : f.type === 'tel' ? 'tel' : 'text'}
        placeholder={f.placeholder || ''} value={value || ''} onChange={(e) => onChange(e.target.value)} />
        {error && <div className="err-msg">⚠ {error}</div>}
      </div>);

  }
  if (f.type === 'textarea') {
    return (
      <div className="field">
        {lbl}
        <textarea id={id} className={'input' + (error ? ' bad' : '')} rows={f.rows || 3} placeholder={f.placeholder || ''} value={value || ''} onChange={(e) => onChange(e.target.value)} />
        {error && <div className="err-msg">⚠ {error}</div>}
      </div>);

  }
  if (f.type === 'select') {
    return (
      <div className="field">
        {lbl}
        <select id={id} className={'input' + (error ? ' bad' : '')} value={value || ''} onChange={(e) => onChange(e.target.value)}>
          <option value="" disabled>— Chọn —</option>
          {f.options.map((o) => <option key={o} value={o}>{o}</option>)}
        </select>
        {error && <div className="err-msg">⚠ {error}</div>}
      </div>);

  }
  if (f.type === 'radio') {
    return (
      <div className="field">
        {lbl}
        <div className="choices">
          {f.options.map((o) =>
          <label key={o} className={'choice' + (value === o ? ' on' : '')}>
              <input type="radio" name={id} checked={value === o} onChange={() => onChange(o)} />
              <span>{o}</span>
            </label>
          )}
        </div>
        {error && <div className="err-msg">⚠ {error}</div>}
      </div>);

  }
  if (f.type === 'checkbox') {
    const arr = Array.isArray(value) ? value : [];
    const toggle = (o) => onChange(arr.includes(o) ? arr.filter((x) => x !== o) : [...arr, o]);
    return (
      <div className="field">
        {lbl}
        <div className="choices">
          {f.options.map((o) =>
          <label key={o} className={'choice' + (arr.includes(o) ? ' on' : '')}>
              <input type="checkbox" checked={arr.includes(o)} onChange={() => toggle(o)} />
              <span>{o}</span>
            </label>
          )}
        </div>
        {error && <div className="err-msg">⚠ {error}</div>}
      </div>);

  }
  if (f.type === 'rating') {
    return (
      <div className="field">
        {lbl}
        <div className="rating">
          <div className="stars">
            {Array.from({ length: f.max || 5 }, (_, i) => i + 1).map((n) =>
            <button type="button" key={n} className={'star' + (value >= n ? ' on' : '')} onClick={() => onChange(n)} aria-label={'Chọn ' + n}>{n}</button>
            )}
          </div>
          <div className="ends" style={{ width: (f.max || 5) * 56 }}>
            <span>{f.lowLabel}</span><span>{f.highLabel}</span>
          </div>
        </div>
        {error && <div className="err-msg">⚠ {error}</div>}
      </div>);

  }
  if (f.type === 'matrix') {
    const val = value || {};
    const setRow = (key, patch) => onChange({ ...val, [key]: { ...(val[key] || {}), ...patch } });
    return (
      <div className="field">
        {lbl}
        <div className="mhead"><span>Vị trí / thiết bị</span><span>Số lượng</span><span>Đã có</span></div>
        <div className="matrix">
          {f.rows.map((r) => {
            const cell = val[r.key] || {};
            return (
              <div className="mrow" key={r.key}>
                <div><div className="mlabel">{r.label}</div>{r.note && <div className="mnote">{r.note}</div>}</div>
                <input className="qty" type="number" min="0" inputMode="numeric" placeholder="0" value={cell.qty ?? ''} onChange={(e) => setRow(r.key, { qty: e.target.value })} />
                <label className="mhave"><input type="checkbox" checked={!!cell.have} onChange={(e) => setRow(r.key, { have: e.target.checked })} /> Đã có</label>
              </div>);

          })}
        </div>
        {error && <div className="err-msg">⚠ {error}</div>}
      </div>);

  }
  return null;
}

function FormSection({ section: s, values, errors, onChange, showLetter = true }) {
  // Sync the required (*) marker with validateSections logic for KSCT equipment matrices.
  // Tier "Cần tư vấn" requires only a group ≥1; no individual stars under that path.
  const tier = values.capDoMucTieu || '';
  const equipRequired = {
    thietBiStandard: tier.startsWith('Nhóm 1'),
    thietBiAdvanced: tier.startsWith('Nhóm 2'),
    thietBiPremium: tier.startsWith('Nhóm 3'),
  };
  return (
    <div className="fsection">
      <div className="fsec-head">
        {showLetter && <div className="fsec-letter">{s.letter}</div>}
        <div>
          <h2>{s.title}</h2>
          {s.description && <p>{s.description}</p>}
        </div>
      </div>
      {s.fields.map((f) => {
        const ef = (f.id in equipRequired) ? { ...f, required: equipRequired[f.id] } : f;
        return <Field key={f.id} field={ef} value={values[f.id]} error={errors[f.id]} onChange={(v) => onChange(f.id, v)} />;
      })}
    </div>);

}

// Validate a list of sections; return {errors, firstBadId}.
// Section A choice in `capDoMucTieu` decides which equipment matrix in Section C is required:
//   "Nhóm 1 — Standard ..."     → only thietBiStandard required
//   "Nhóm 2 — Advanced ..."     → only thietBiAdvanced required
//   "Nhóm 3 — Premium ..."      → only thietBiPremium required
//   "Chưa xác định — cần tư vấn" → at least 1 of the 3 must be filled
function validateSections(sections, values) {
  const errors = {};
  let firstBad = null;

  const tier = values.capDoMucTieu || '';
  const isStandard = tier.startsWith('Nhóm 1');
  const isAdvanced = tier.startsWith('Nhóm 2');
  const isPremium = tier.startsWith('Nhóm 3');
  const isAdvisory = tier.startsWith('Chưa xác định');
  const equipIds = ['thietBiStandard', 'thietBiAdvanced', 'thietBiPremium'];
  const equipIdSet = new Set(equipIds);

  sections.forEach((s) => s.fields.forEach((f) => {
    let effectiveField = f;
    if (equipIdSet.has(f.id)) {
      const requireThis =
        (isStandard && f.id === 'thietBiStandard') ||
        (isAdvanced && f.id === 'thietBiAdvanced') ||
        (isPremium && f.id === 'thietBiPremium');
      effectiveField = { ...f, required: requireThis };
    }
    const e = validateField(effectiveField, values[f.id]);
    if (e) {errors[f.id] = e;if (!firstBad) firstBad = f.id;}
  }));

  if (isAdvisory) {
    const matrixHasData = (v) =>
      v && typeof v === 'object' && Object.keys(v).some((k) => {
        const cell = v[k] || {};
        return cell.have || (cell.qty !== undefined && cell.qty !== '');
      });
    if (!equipIds.some((id) => matrixHasData(values[id]))) {
      equipIds.forEach((id) => {
        if (!errors[id]) errors[id] = 'Vui lòng chọn ít nhất 1 nhóm thiết bị (Standard / Advanced / Premium).';
      });
      if (!firstBad) firstBad = 'thietBiStandard';
    }
  }

  return { errors, firstBad };
}

const { useState } = React;

/* ---------- Full single-page schema form (used by Survey) ---------- */
function SchemaForm({ schema, type }) {
  const [values, setValues] = useState({});
  const [errors, setErrors] = useState({});
  const [busy, setBusy] = useState(false);
  const onChange = (id, v) => {setValues((p) => ({ ...p, [id]: v }));setErrors((p) => p[id] ? { ...p, [id]: '' } : p);};

  async function submit(e) {
    e.preventDefault();
    const { errors: er, firstBad } = validateSections(schema.sections, values);
    setErrors(er);
    if (firstBad) {
      window.toast({ kind: 'err', title: 'Còn mục chưa hoàn tất', sub: 'Vui lòng kiểm tra các ô được tô đỏ.' });
      const el = document.getElementById('f_' + firstBad);
      if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 120, behavior: 'smooth' });
      return;
    }
    setBusy(true);
    try {
      await submitForm(schema.formName, { ...values, __type: type });
      window.navigate('/cam-on?type=' + type);
    } catch (err) {
      setBusy(false);
      window.toast({ kind: 'err', title: 'Gửi chưa thành công', sub: 'Vui lòng thử lại sau giây lát. Dữ liệu của bạn vẫn được giữ.' });
    }
  }

  return (
    <form className="form-card" onSubmit={submit} noValidate>
      <div className="form-head">
        <span className="eyebrow">Form sự kiện · {window.VTC.WEBINAR.dateText}</span>
        <h1 style={{ marginTop: 8 }}>{schema.title}</h1>
        <p>{schema.description}</p>
      </div>
      {schema.sections.map((s) =>
      <FormSection key={s.id} section={s} values={values} errors={errors} onChange={onChange} />
      )}
      <input type="text" name="company_url" tabIndex="-1" autoComplete="off" value={values.__honeypot || ''} onChange={(e) => onChange('__honeypot', e.target.value)} style={{ position: 'absolute', left: '-9999px', opacity: 0, height: 0 }} aria-hidden="true" />
      <button className="btn btn-accent btn-lg btn-block" style={{ marginTop: 30 }} disabled={busy}>
        {busy ? <><span className="spin" /> Đang gửi…</> : <>{schema.submitLabel} <Icon name="arrow" /></>}
      </button>
    </form>);

}

/* ---------- "Not a robot" captcha (functional demo) ---------- */
function Captcha({ status, error, onVerify }) {
  // status: 'idle' | 'checking' | 'done'
  const cls = 'captcha' + (status === 'done' ? ' done' : '') + (error ? ' bad' : '');
  return (
    <div>
      <div className={cls}>
        <button type="button" className="cbox" onClick={() => status === 'idle' && onVerify()} aria-label="Xác minh tôi không phải người máy" aria-checked={status === 'done'} role="checkbox">
          {status === 'checking' && <span className="spin" />}
          {status === 'done' && <svg className="tick" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3.5" strokeLinecap="round" strokeLinejoin="round"><path d="M5 13l4 4L19 7" /></svg>}
        </button>
        <span className="clabel">{status === 'done' ? 'Đã xác minh — cảm ơn bạn!' : status === 'checking' ? 'Đang xác minh…' : 'Tôi không phải là người máy'}</span>
        <span className="cbrand"><img src="brand-assets/mark-sun-navy.svg" alt="" /><small>VietCanThi</small></span>
      </div>
      {error && <div className="err-msg">⚠ {error}</div>}
    </div>);

}

/* ---------- Short Register form (inline on landing) ---------- */
function RegisterForm({ compact = true }) {
  const [v, setV] = useState({ consent: true });
  const [errors, setErrors] = useState({});
  const [busy, setBusy] = useState(false);
  const [captcha, setCaptcha] = useState('idle'); // idle | checking | done
  const set = (k, val) => {setV((p) => ({ ...p, [k]: val }));setErrors((p) => p[k] ? { ...p, [k]: '' } : p);};
  const verifyCaptcha = () => {
    setCaptcha('checking');
    setErrors((p) => p.captcha ? { ...p, captcha: '' } : p);
    setTimeout(() => setCaptcha('done'), 900);
  };

  async function submit(e) {
    e.preventDefault();
    const er = {};
    if (!v.hoTen) er.hoTen = 'Vui lòng nhập họ tên.';
    if (!isPhoneVN(v.sdt)) er.sdt = 'Số điện thoại chưa hợp lệ.';
    if (!isEmail(v.email)) er.email = 'Email chưa hợp lệ.';
    if (captcha !== 'done') er.captcha = 'Vui lòng xác minh bạn không phải người máy.';
    setErrors(er);
    if (Object.keys(er).length) {window.toast({ kind: 'err', title: 'Kiểm tra lại thông tin' });return;}
    setBusy(true);
    try {await submitForm('event_registrations', { ...v, captchaVerified: true, __type: 'dangky' });window.navigate('/cam-on?type=dangky');}
    catch {setBusy(false);window.toast({ kind: 'err', title: 'Gửi chưa thành công', sub: 'Vui lòng thử lại.' });}
  }

  return (
    <form className="form-card" onSubmit={submit} noValidate id="dang-ky">
      <div className="form-head" style={{ marginBottom: 20 }}>
        <span className="eyebrow">Miễn phí · Giữ chỗ trước</span>
        <h2 style={{ marginTop: 8, fontSize: '1.7rem' }}>Đăng ký tham dự Webinar</h2>
        <p style={{ marginTop: 8 }}>Để lại thông tin để nhận link Zoom và nhắc lịch trước giờ diễn ra.</p>
      </div>
      <div className="grid g2">
        <div className="field"><label>Họ và tên <span className="req">*</span></label><input className={'input' + (errors.hoTen ? ' bad' : '')} value={v.hoTen || ''} onChange={(e) => set('hoTen', e.target.value)} placeholder="VD: BS. Nguyễn Văn A" />{errors.hoTen && <div className="err-msg">⚠ {errors.hoTen}</div>}</div>
        <div className="field"><label>Số điện thoại <span className="req">*</span></label><input className={'input' + (errors.sdt ? ' bad' : '')} value={v.sdt || ''} onChange={(e) => set('sdt', e.target.value)} placeholder="0901 234 567" />{errors.sdt && <div className="err-msg">⚠ {errors.sdt}</div>}</div>
      </div>
      <div className="grid g2">
        <div className="field"><label>Email <span className="req">*</span></label><input className={'input' + (errors.email ? ' bad' : '')} type="email" value={v.email || ''} onChange={(e) => set('email', e.target.value)} placeholder="email@phongkham.com" />{errors.email && <div className="err-msg">⚠ {errors.email}</div>}</div>
        <div className="field"><label>Tên phòng khám / đơn vị</label><input className="input" value={v.phongKham || ''} onChange={(e) => set('phongKham', e.target.value)} /></div>
      </div>
      <div className="grid g2">
        <div className="field"><label>Vai trò</label><select className="input" value={v.vaiTro || ''} onChange={(e) => set('vaiTro', e.target.value)}><option value="" disabled>— Chọn —</option>{window.VTC.ROLES.map((r) => <option key={r}>{r}</option>)}</select></div>
        <div className="field"><label>Tỉnh / Thành phố</label><input className="input" value={v.tinh || ''} onChange={(e) => set('tinh', e.target.value)} placeholder="VD: TP. Hồ Chí Minh" /></div>
      </div>
      <label className="choice on" style={{ marginTop: 4 }}>
        <input type="checkbox" checked={!!v.consent} onChange={(e) => set('consent', e.target.checked)} />
        <span>Tôi đồng ý nhận thông tin về webinar, tài liệu và giải pháp KSCT từ VietCanThi.</span>
      </label>
      <Captcha status={captcha} error={errors.captcha} onVerify={verifyCaptcha} />
      <input type="text" tabIndex="-1" autoComplete="off" value={v.__honeypot || ''} onChange={(e) => set('__honeypot', e.target.value)} style={{ position: 'absolute', left: '-9999px', opacity: 0, height: 0 }} aria-hidden="true" />
      <button className="btn btn-accent btn-lg btn-block" style={{ marginTop: 22 }} disabled={busy}>
        {busy ? <><span className="spin" /> Đang gửi…</> : <>Đăng ký tham dự <Icon name="arrow" /></>}
      </button>
      <p className="muted center" style={{ fontSize: '.85rem', marginTop: 14 }}>Bằng việc đăng ký, bạn đồng ý với Điều khoản & Chính sách quyền riêng tư của VietCanThi.</p>
    </form>);

}

/* ---------- Software trial registration ---------- */
function TrialForm() {
  const [v, setV] = useState({});
  const [errors, setErrors] = useState({});
  const [busy, setBusy] = useState(false);
  const [captcha, setCaptcha] = useState('idle');
  const set = (k, val) => {setV((p) => ({ ...p, [k]: val }));setErrors((p) => p[k] ? { ...p, [k]: '' } : p);};
  const verifyCaptcha = () => {setCaptcha('checking');setErrors((p) => p.captcha ? { ...p, captcha: '' } : p);setTimeout(() => setCaptcha('done'), 900);};
  async function submit(e) {
    e.preventDefault();
    const er = {};
    if (!v.hoTen) er.hoTen = 'Vui lòng nhập họ tên.';
    if (!isEmail(v.email)) er.email = 'Email chưa hợp lệ.';
    if (!isPhoneVN(v.sdt)) er.sdt = 'Số điện thoại chưa hợp lệ.';
    if (!v.phongKham) er.phongKham = 'Vui lòng nhập tên phòng khám.';
    if (!v.matKhau || v.matKhau.length < 6) er.matKhau = 'Mật khẩu tối thiểu 6 ký tự.';
    if (captcha !== 'done') er.captcha = 'Vui lòng xác minh bạn không phải người máy.';
    setErrors(er);
    if (Object.keys(er).length) {window.toast({ kind: 'err', title: 'Kiểm tra lại thông tin' });return;}
    setBusy(true);
    try {await submitForm('software_trial_requests', { ...v, source: 'webinar', captchaVerified: true, __type: 'dungthu' });window.navigate('/cam-on?type=dungthu');}
    catch {setBusy(false);window.toast({ kind: 'err', title: 'Gửi chưa thành công', sub: 'Vui lòng thử lại.' });}
  }
  return (
    <form className="form-card" onSubmit={submit} noValidate>
      <div className="form-head">
        <span className="eyebrow">Phần mềm VietCanThi</span>
        <h1 style={{ marginTop: 8 }}>Đăng ký tài khoản trải nghiệm</h1>
        <p>Tạo tài khoản dùng thử miễn phí phần mềm Quản lý &amp; Kiểm soát cận thị. Email sẽ là tên đăng nhập.</p>
      </div>
      <div className="fsection">
        <div className="grid g2">
          <div className="field"><label>Họ và tên <span className="req">*</span></label><input className={'input' + (errors.hoTen ? ' bad' : '')} value={v.hoTen || ''} onChange={(e) => set('hoTen', e.target.value)} />{errors.hoTen && <div className="err-msg">⚠ {errors.hoTen}</div>}</div>
          <div className="field"><label>Số điện thoại <span className="req">*</span></label><input className={'input' + (errors.sdt ? ' bad' : '')} value={v.sdt || ''} onChange={(e) => set('sdt', e.target.value)} placeholder="0901 234 567" />{errors.sdt && <div className="err-msg">⚠ {errors.sdt}</div>}</div>
        </div>
        <div className="field"><label>Email (tài khoản đăng nhập) <span className="req">*</span></label><input className={'input' + (errors.email ? ' bad' : '')} type="email" value={v.email || ''} onChange={(e) => set('email', e.target.value)} placeholder="email@phongkham.com" />{errors.email && <div className="err-msg">⚠ {errors.email}</div>}</div>
        <div className="field"><label>Tên phòng khám / đơn vị <span className="req">*</span></label><input className={'input' + (errors.phongKham ? ' bad' : '')} value={v.phongKham || ''} onChange={(e) => set('phongKham', e.target.value)} />{errors.phongKham && <div className="err-msg">⚠ {errors.phongKham}</div>}</div>
        <div className="field" style={{ marginBottom: 0 }}><label>Mật khẩu <span className="req">*</span></label><input className={'input' + (errors.matKhau ? ' bad' : '')} type="password" value={v.matKhau || ''} onChange={(e) => set('matKhau', e.target.value)} placeholder="Tối thiểu 6 ký tự" />{errors.matKhau && <div className="err-msg">⚠ {errors.matKhau}</div>}</div>
      </div>
      <input type="text" tabIndex="-1" autoComplete="off" value={v.__honeypot || ''} onChange={(e) => set('__honeypot', e.target.value)} style={{ position: 'absolute', left: '-9999px', opacity: 0, height: 0 }} aria-hidden="true" />
      <Captcha status={captcha} error={errors.captcha} onVerify={verifyCaptcha} />
      <button className="btn btn-accent btn-lg btn-block" style={{ marginTop: 26 }} disabled={busy}>
        {busy ? <><span className="spin" /> Đang tạo tài khoản…</> : <>Tạo tài khoản trải nghiệm <Icon name="arrow" /></>}
      </button>
    </form>);

}

Object.assign(window, { Field, FormSection, validateSections, SchemaForm, RegisterForm, TrialForm, Captcha });