/* Pages: Survey (single page), Clinic checklist (stepper + draft), Thank You */
const { useState: useSt, useEffect: useEf, useRef: useRf } = React;

function SurveyPage() {
  return (
    <div className="form-page">
      <a className="muted" style={{ fontWeight: 700, cursor: 'pointer', display: 'inline-flex', gap: 6, marginBottom: 18 }} onClick={() => window.navigate('/')}>← Về trang webinar</a>
      <SchemaForm schema={window.VTC.surveySchema} type="khaosat" />
    </div>
  );
}

const DRAFT_KEY = 'vtc_clinic_draft_v1';

function ClinicPage() {
  const schema = window.VTC.clinicSchema;
  const sections = schema.sections;
  const [step, setStep] = useSt(0);
  const [values, setValues] = useSt(() => {
    try { return JSON.parse(localStorage.getItem(DRAFT_KEY)) || {}; } catch { return {}; }
  });
  const [errors, setErrors] = useSt({});
  const [busy, setBusy] = useSt(false);
  const [savedAt, setSavedAt] = useSt(null);
  const top = useRf(null);

  // persist draft
  useEf(() => {
    const id = setTimeout(() => {
      try { localStorage.setItem(DRAFT_KEY, JSON.stringify(values)); setSavedAt(Date.now()); } catch {}
    }, 400);
    return () => clearTimeout(id);
  }, [values]);

  const onChange = (id, v) => { setValues((p) => ({ ...p, [id]: v })); setErrors((p) => (p[id] ? { ...p, [id]: '' } : p)); };
  const cur = sections[step];
  const pct = Math.round(((step + 1) / sections.length) * 100);

  const validateStep = () => {
    const { errors: er, firstBad } = validateSections([cur], 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 ô tô đỏ.' });
      const el = document.getElementById('f_' + firstBad);
      if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 150, behavior: 'smooth' });
      return false;
    }
    return true;
  };
  const goTop = () => { if (top.current) window.scrollTo({ top: top.current.getBoundingClientRect().top + window.scrollY - 90, behavior: 'smooth' }); };
  const next = () => { if (validateStep()) { setStep((s) => Math.min(s + 1, sections.length - 1)); goTop(); } };
  const back = () => { setStep((s) => Math.max(s - 1, 0)); goTop(); };
  const jump = (i) => { if (i <= step || validateStep()) { setStep(i); goTop(); } };

  async function submit() {
    const { errors: er, firstBad } = validateSections(sections, values);
    setErrors(er);
    if (firstBad) {
      // jump to the section containing the first bad field
      const idx = sections.findIndex((s) => s.fields.some((f) => f.id === firstBad));
      setStep(idx >= 0 ? idx : step);
      window.toast({ kind: 'err', title: 'Còn mục chưa hoàn tất', sub: 'Đã chuyển tới phần cần bổ sung.' });
      return;
    }
    setBusy(true);
    try {
      await submitForm(schema.formName, { ...values, __type: 'bangkiem' });
      localStorage.removeItem(DRAFT_KEY);
      window.navigate('/cam-on?type=bangkiem');
    } catch { setBusy(false); window.toast({ kind: 'err', title: 'Gửi chưa thành công', sub: 'Dữ liệu của bạn vẫn được lưu nháp.' }); }
  }

  const last = step === sections.length - 1;
  return (
    <div className="form-page" ref={top}>
      <a className="muted" style={{ fontWeight: 700, cursor: 'pointer', display: 'inline-flex', gap: 6, marginBottom: 14 }} onClick={() => window.navigate('/')}>← Về trang webinar</a>
      <div className="form-head" style={{ marginBottom: 18 }}>
        <span className="eyebrow">Lead-gen · ~5–7 phút</span>
        <h1 style={{ marginTop: 8, fontSize: 'clamp(1.5rem,4vw,2rem)' }}>{schema.title}</h1>
        <p>{schema.description}</p>
      </div>

      <div className="stepper">
        <div className="step-prog"><div className="fill" style={{ width: pct + '%' }} /></div>
        <div className="step-pills">
          {sections.map((s, i) => (
            <button key={s.id} className={'step-pill' + (i === step ? ' cur' : i < step ? ' done' : '')} onClick={() => jump(i)} title={s.title}>{s.letter}</button>
          ))}
        </div>
        <div className="step-info">
          <span>Phần {cur.letter} / {sections[sections.length - 1].letter} — {cur.title}</span>
          <span className="draft-note"><Icon name="check" /> {savedAt ? 'Đã lưu nháp' : 'Tự lưu nháp'}</span>
        </div>
      </div>

      <div className="form-card">
        <FormSection section={cur} values={values} errors={errors} onChange={onChange} />
        <div className="step-nav">
          <button className="btn btn-outline" onClick={back} disabled={step === 0}>← Quay lại</button>
          {last
            ? <button className="btn btn-accent" onClick={submit} disabled={busy}>{busy ? <><span className="spin" /> Đang gửi…</> : <>{schema.submitLabel} <Icon name="arrow" /></>}</button>
            : <button className="btn btn-primary" onClick={next}>Tiếp tục →</button>}
        </div>
      </div>
      <p className="muted center" style={{ fontSize: '.85rem', marginTop: 16 }}>Bản nháp được lưu trên trình duyệt của bạn — có thể đóng và quay lại sau.</p>
    </div>
  );
}

function TrialPage() {
  const feats = ['Hồ sơ bệnh án điện tử cho bệnh nhân cận thị', 'Biểu đồ tiến triển trục nhãn cầu & khúc xạ', 'Quản lý liệu trình Ortho-K / Atropine', 'Báo cáo phụ huynh mang thương hiệu phòng khám'];
  return (
    <div className="form-page">
      <a className="muted" style={{ fontWeight: 700, cursor: 'pointer', display: 'inline-flex', gap: 6, marginBottom: 18 }} onClick={() => window.navigate('/')}>← Về trang webinar</a>
      <div className="grid g2" style={{ alignItems: 'start' }}>
        <TrialForm />
        <div className="card card-pad-lg" style={{ background: 'var(--sky)', border: 'none' }}>
          <div className="app-shot" style={{ marginBottom: 22 }}>
            <div className="bar"><i /><i /><i /></div>
            <div className="body"><div className="ph" style={{ aspectRatio: '16/10', borderRadius: 'var(--r-md)' }}>[ Ảnh app — màn hình<br/>hồ sơ & biểu đồ AL ]</div></div>
          </div>
          <h3 style={{ marginBottom: 14 }}>Bạn nhận được gì?</h3>
          <ul className="sb">
            {feats.map((f) => <li key={f}><span className="b"><Sunburst size={20} color="var(--amber-600)" /></span><span style={{ fontWeight: 600 }}>{f}</span></li>)}
          </ul>
          <p className="muted" style={{ fontSize: '.85rem', marginTop: 18, paddingTop: 16, borderTop: '1px solid var(--border)' }}>
            Công cụ hỗ trợ quyết định lâm sàng, không thay thế chẩn đoán của bác sĩ.
          </p>
        </div>
      </div>
    </div>
  );
}

function ThankYou({ query }) {
  const type = query.get('type') || 'dangky';
  const W = window.VTC.WEBINAR;
  const MAP = {
    dangky: {
      title: 'Đăng ký thành công!',
      sub: 'Hẹn gặp bạn tại Webinar Kiểm soát cận thị. Chúng tôi đã gửi xác nhận và sẽ nhắc lịch trước giờ diễn ra.',
      next: { h: 'Bước tiếp theo', items: [
        ['video', 'Link tham dự Zoom', <span className="placeholder">CẦN LINK ZOOM</span>],
        ['calendar', 'Thêm vào lịch (.ics)', <span className="placeholder">CẦN FILE .ICS</span>],
        ['doc', 'Điền trước Bảng kiểm nhu cầu để nhận tư vấn lộ trình riêng', <a className="btn btn-outline" onClick={() => window.navigate('/bang-kiem-phong-kham')}>Mở bảng kiểm</a>],
      ]},
    },
    khaosat: {
      title: 'Cảm ơn bạn đã hoàn tất khảo sát!',
      sub: 'Quà tặng đang trên đường tới bạn. VietCanThi sẽ gửi bộ tài liệu trong vòng 48h làm việc.',
      next: { h: 'Nhận quà của bạn', items: [
        ['download', 'Trọn bộ quy trình setup KSCT (PDF)', <span className="placeholder">CẦN LINK PDF</span>],
        ['key', 'Kích hoạt tài khoản dùng thử phần mềm', <a className="btn btn-accent" onClick={() => window.navigate('/trai-nghiem-phan-mem')}>Đăng ký trải nghiệm</a>],
      ]},
    },
    bangkiem: {
      title: 'Đã nhận bảng kiểm của bạn!',
      sub: 'Đội ngũ VietCanThi sẽ phân tích hiện trạng và liên hệ đề xuất lộ trình setup/nâng cấp phù hợp với đơn vị của bạn.',
      next: { h: 'Trong lúc chờ', items: [
        ['key', 'Trải nghiệm ngay phần mềm quản lý cận thị', <a className="btn btn-accent" onClick={() => window.navigate('/trai-nghiem-phan-mem')}>Đăng ký trải nghiệm</a>],
        ['phone', 'Cần trao đổi gấp? Liên hệ hotline', <span className="placeholder">CẦN HOTLINE THẬT</span>],
      ]},
    },
    dungthu: {
      title: 'Tài khoản trải nghiệm đã sẵn sàng!',
      sub: 'Bạn có thể mở phần mềm VietCanThi để bắt đầu số hóa hồ sơ và theo dõi tiến triển cận thị.',
      next: { h: 'Bắt đầu ngay', items: [
        ['monitor', 'Mở phần mềm VietCanThi', <a className="btn btn-accent" href="https://demo.vietcanthi.com" target="_blank" rel="noopener noreferrer">Mở ngay</a>],
        ['doc', 'Xem hướng dẫn sử dụng nhanh', <span className="placeholder">SẮP RA MẮT</span>],
      ]},
    },
  };
  const c = MAP[type] || MAP.dangky;
  return (
    <div className="ty">
      <div className="ring"><Sunburst size={58} color="var(--navy)" /></div>
      <span className="eyebrow">VietCanThi · {W.dateText}</span>
      <h1 style={{ marginTop: 12 }}>{c.title}</h1>
      <p className="lead mx-auto" style={{ marginTop: 12 }}>{c.sub}</p>
      <div className="next">
        <h3>{c.next.h}</h3>
        <div style={{ display: 'grid', gap: 16 }}>
          {c.next.items.map((it, i) => (
            <div key={i} style={{ display: 'flex', gap: 14, alignItems: 'center', flexWrap: 'wrap' }}>
              <span className="ic feature" style={{ width: 44, height: 44, borderRadius: 12, background: 'var(--sky)', color: 'var(--navy)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flex: '0 0 44px' }}><Icon name={it[0]} /></span>
              <span style={{ fontWeight: 700, color: 'var(--navy)', flex: 1, minWidth: 180, textAlign: 'left' }}>{it[1]}</span>
              <span>{it[2]}</span>
            </div>
          ))}
        </div>
      </div>
      <div className="btns" style={{ display: 'flex', gap: 14, justifyContent: 'center', marginTop: 30 }}>
        <a className="btn btn-primary" onClick={() => window.navigate('/')}>← Về trang webinar</a>
      </div>
    </div>
  );
}

Object.assign(window, { SurveyPage, ClinicPage, TrialPage, ThankYou });