/* global React, MJ */
const { useState: useStateK } = React;

/* ============================================================
   KUESIONER — "Kenali Potensimu, Temukan Arahmu"
   Student Interest Card · Majelis Kajian Mahasiswa DIPA
   Opsi & batas pilihan mengikuti dokumen kuesioner resmi.
   ============================================================ */

const OPT_KEMBANGKAN = ['Akademik & prestasi','Leadership / kepemimpinan','Public speaking','Networking & relasi','Organisasi','Entrepreneurship / bisnis','Digital & media','Pengembangan diri','Kegiatan sosial','Keagamaan / spiritualitas'];
const OPT_KEGIATAN   = ['Diskusi & sharing','Pelatihan skill','Leadership','Public speaking','Kajian keislaman','Mentoring','Networking','Kegiatan sosial','Kompetisi','Olahraga & kebersamaan'];
const OPT_TANTANGAN  = ['Akademik','Manajemen waktu','Pergaulan','Media sosial','Menentukan masa depan & karier','Finansial','Kurang percaya diri','Menemukan lingkungan yang positif','Bingung menentukan arah hidup'];
const OPT_TERHUBUNG  = ['Ya, kabari saya!','Boleh, saya ingin tahu lebih dulu','Belum untuk saat ini'];

const API_BASE = (window.MJ_API_BASE || '');

function ChipGroup({ options, value, onChange, max, name }) {
  const toggle = (opt) => {
    if (value.includes(opt)) onChange(value.filter(v => v !== opt));
    else if (value.length < max) onChange([...value, opt]);
  };
  return (
    <div className="chipset" role="group" aria-label={name}>
      {options.map(opt => {
        const on = value.includes(opt);
        const full = !on && value.length >= max;
        return (
          <button
            type="button"
            key={opt}
            className={"chip " + (on ? "is-on " : "") + (full ? "is-disabled" : "")}
            aria-pressed={on}
            disabled={full}
            onClick={() => toggle(opt)}
          >
            <span className="chip-box">{on ? '✓' : ''}</span>
            {opt}
          </button>
        );
      })}
    </div>
  );
}

function KuesionerSection() {
  const [step, setStep] = useStateK(0);          // 0 = form, 1 = sukses
  const [busy, setBusy] = useStateK(false);
  const [err, setErr] = useStateK('');
  const [f, setF] = useStateK({
    nama: '', prodi: '', angkatan: '', whatsapp: '', instagram: '',
    kembangkan: [], kembangkan_lainnya: '',
    kegiatan: [], kegiatan_lainnya: '',
    tantangan: [], tantangan_lainnya: '',
    harapan: '', terhubung: '', website: ''
  });
  const up = (k, v) => setF(s => ({ ...s, [k]: v }));

  const submit = async (e) => {
    e.preventDefault();
    setErr('');

    if (f.kembangkan.length === 0 && !f.kembangkan_lainnya.trim()) {
      return setErr('Bagian B: pilih minimal 1 hal yang ingin kamu kembangkan.');
    }
    if (f.kegiatan.length === 0 && !f.kegiatan_lainnya.trim()) {
      return setErr('Bagian C: pilih minimal 1 kegiatan yang menarik buatmu.');
    }
    if (f.tantangan.length === 0 && !f.tantangan_lainnya.trim()) {
      return setErr('Bagian D: pilih minimal 1 tantangan.');
    }
    if (!f.terhubung) {
      return setErr('Bagian F: pilih salah satu opsi.');
    }

    setBusy(true);
    try {
      const r = await fetch(API_BASE + '/api/kuesioner', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(f)
      });
      const j = await r.json().catch(() => ({}));
      if (!r.ok || !j.ok) throw new Error(j.error || 'Gagal mengirim. Coba lagi.');
      setStep(1);
      window.scrollTo({ top: document.getElementById('kuesioner').offsetTop - 40, behavior: 'smooth' });
    } catch (e2) {
      setErr(e2.message === 'Failed to fetch'
        ? 'Tidak bisa terhubung ke server. Cek koneksi internetmu lalu coba lagi.'
        : e2.message);
    } finally {
      setBusy(false);
    }
  };

  return (
    <section id="kuesioner" className="cta">
      <div className="wrap">
        <div className="section-head reveal" style={{textAlign:'center', maxWidth:'760px', margin:'0 auto 48px'}}>
          <span className="eyebrow">04 — Student Interest Card</span>
          <h2>Kenali potensimu, <span className="italic-serif">temukan arahmu.</span></h2>
          <p className="lede">
            Masa kuliah adalah kesempatan untuk belajar, berkembang, membangun relasi, menemukan potensi,
            dan mempersiapkan masa depan. Yuk, kenali minatmu dan hal yang ingin kamu kembangkan
            selama menjadi mahasiswa. <b>± 2 menit.</b>
          </p>
        </div>

        {step === 1 ? (
          <div className="kues-done reveal">
            <div className="cta-success-mark">✓</div>
            <h3>Terima kasih, {f.nama.split(' ')[0] || 'teman'}! 🙌</h3>
            <p className="kues-done-text">
              Semoga masa kuliahmu bukan hanya tentang mendapatkan gelar, tetapi juga tentang
              <b> bertumbuh, menemukan potensi, membangun karakter, dan menemukan arah.</b>
            </p>
            <div className="cta-next">
              <div className="cta-next-label">Langkah berikutnya</div>
              <div className="cta-next-text">
                Follow <a href={MJ.instagramUrl} target="_blank" rel="noopener noreferrer"><b>{MJ.instagram}</b></a> untuk
                info kajian dan kegiatan MJ yang sesuai minatmu.
              </div>
            </div>
            <button onClick={() => { setF({...f, nama:'', prodi:'', angkatan:'', whatsapp:'', instagram:'', kembangkan:[], kegiatan:[], tantangan:[], harapan:'', terhubung:'', kembangkan_lainnya:'', kegiatan_lainnya:'', tantangan_lainnya:''}); setStep(0); }}
              className="btn btn-ghost" style={{marginTop:20}}>
              Isi untuk teman lain
            </button>
          </div>
        ) : (
        <form className="kues-form reveal" onSubmit={submit}>

          {/* ---- A. DATA DIRI ---- */}
          <fieldset className="kues-block">
            <legend><span className="kues-letter">A</span> Data diri</legend>
            <div className="kues-grid">
              <Field label="Nama lengkap" required>
                <input value={f.nama} onChange={e => up('nama', e.target.value)} placeholder="Nama sesuai KTM" required maxLength={120} />
              </Field>
              <Field label="Program studi" required>
                <input value={f.prodi} onChange={e => up('prodi', e.target.value)} placeholder="mis. Teknik Informatika" required maxLength={120} />
              </Field>
              <Field label="Angkatan" required>
                <input value={f.angkatan} onChange={e => up('angkatan', e.target.value.replace(/\D/g,'').slice(0,4))}
                  placeholder="2026" inputMode="numeric" pattern="\d{4}" required />
              </Field>
              <Field label="No. WhatsApp" required>
                <input value={f.whatsapp} onChange={e => up('whatsapp', e.target.value)}
                  placeholder="0812 3456 7890" inputMode="tel" required maxLength={30} />
              </Field>
              <Field label="Instagram" hint="Opsional">
                <input value={f.instagram} onChange={e => up('instagram', e.target.value)} placeholder="@username" maxLength={60} />
              </Field>
            </div>
          </fieldset>

          {/* ---- B. KEMBANGKAN ---- */}
          <fieldset className="kues-block">
            <legend><span className="kues-letter">B</span> Apa yang ingin kamu kembangkan?</legend>
            <p className="kues-hint">Pilih maksimal 3 · <b>{f.kembangkan.length}/3 dipilih</b></p>
            <ChipGroup options={OPT_KEMBANGKAN} value={f.kembangkan} onChange={v => up('kembangkan', v)} max={3} name="Yang ingin dikembangkan" />
            <input className="kues-other" value={f.kembangkan_lainnya} onChange={e => up('kembangkan_lainnya', e.target.value)} placeholder="Lainnya…" maxLength={120} />
          </fieldset>

          {/* ---- C. KEGIATAN ---- */}
          <fieldset className="kues-block">
            <legend><span className="kues-letter">C</span> Kegiatan apa yang paling menarik buatmu?</legend>
            <p className="kues-hint">Pilih maksimal 3 · <b>{f.kegiatan.length}/3 dipilih</b></p>
            <ChipGroup options={OPT_KEGIATAN} value={f.kegiatan} onChange={v => up('kegiatan', v)} max={3} name="Kegiatan menarik" />
            <input className="kues-other" value={f.kegiatan_lainnya} onChange={e => up('kegiatan_lainnya', e.target.value)} placeholder="Lainnya…" maxLength={120} />
          </fieldset>

          {/* ---- D. TANTANGAN ---- */}
          <fieldset className="kues-block">
            <legend><span className="kues-letter">D</span> Menurutmu, apa tantangan terbesar mahasiswa saat ini?</legend>
            <p className="kues-hint">Pilih maksimal 2 · <b>{f.tantangan.length}/2 dipilih</b></p>
            <ChipGroup options={OPT_TANTANGAN} value={f.tantangan} onChange={v => up('tantangan', v)} max={2} name="Tantangan terbesar" />
            <input className="kues-other" value={f.tantangan_lainnya} onChange={e => up('tantangan_lainnya', e.target.value)} placeholder="Lainnya…" maxLength={120} />
          </fieldset>

          {/* ---- E. HARAPAN ---- */}
          <fieldset className="kues-block">
            <legend><span className="kues-letter">E</span> Satu hal yang paling ingin kamu dapatkan selama kuliah</legend>
            <textarea className="kues-textarea" rows="3" value={f.harapan} onChange={e => up('harapan', e.target.value)}
              placeholder="Tulis sejujurnya, sesingkat apa pun tidak apa-apa…" maxLength={1000} />
          </fieldset>

          {/* ---- F. TERHUBUNG ---- */}
          <fieldset className="kues-block">
            <legend><span className="kues-letter">F</span> Mau terhubung dengan MJ?</legend>
            <p className="kues-hint">Jika ada kegiatan mahasiswa yang sesuai dengan minatmu, apakah kamu ingin mendapatkan informasinya?</p>
            <div className="radioset">
              {OPT_TERHUBUNG.map(opt => (
                <button type="button" key={opt}
                  className={"radio-opt " + (f.terhubung === opt ? "is-on" : "")}
                  aria-pressed={f.terhubung === opt}
                  onClick={() => up('terhubung', opt)}>
                  <span className="radio-dot"></span>{opt}
                </button>
              ))}
            </div>
          </fieldset>

          {/* honeypot anti-bot */}
          <input type="text" name="website" tabIndex={-1} autoComplete="off"
            value={f.website} onChange={e => up('website', e.target.value)}
            style={{position:'absolute', left:'-9999px', opacity:0, height:0, width:0}} aria-hidden="true" />

          {err && <div className="kues-error" role="alert">{err}</div>}

          <button type="submit" className="btn btn-primary kues-submit" disabled={busy}>
            {busy ? 'Mengirim…' : <>Kirim jawaban <span className="btn-arrow">→</span></>}
          </button>
          <p className="cta-fineprint" style={{textAlign:'center'}}>
            Data ini dipakai UKM LDK Majelis Jihad untuk mengenal minat mahasiswa dan mengirim info kegiatan yang relevan.
          </p>
        </form>
        )}
      </div>
    </section>
  );
}


function Field({ label, required, hint, children }) {
  return (
    <label className="field">
      <span className="field-label">{label}{required && <em>·</em>}</span>
      {children}
      {hint && <span className="field-hint">{hint}</span>}
    </label>
  );
}

Object.assign(window, { KuesionerSection, ChipGroup, Field });