// Public-facing landing page + assessment form

function PublicView({ state, go }) {
  const { JOBS } = window.TalentirData;
  const job = JOBS.find(j => j.id === state.jobId) || JOBS[0];
  const mode = state.mode || 'landing'; // landing | assess
  if (!job) {
    return (
      <div className="view">
        <div className="view-head"><div><div className="title">Halaman Publik</div></div></div>
        <div className="card card-pad" style={{ textAlign: 'center', padding: 48, color: 'var(--muted)' }}>
          <Icon name="globe" size={28}/>
          <div style={{ fontWeight: 700, color: 'var(--ink-2)', marginTop: 10 }}>Belum ada lowongan</div>
          <div style={{ fontSize: 13, marginTop: 4 }}>Buat lowongan dulu untuk melihat pratinjau halaman publiknya.</div>
          <div style={{ marginTop: 14 }}><Btn kind="accent" icon="plus" onClick={() => go({ view: 'jobs', subview: 'new' })}>Buat Posisi Baru</Btn></div>
        </div>
      </div>
    );
  }
  // The real, candidate-reachable link served at /lowongan/<id>-<slug>.
  const slug = (job.title || '').toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, '');
  const liveUrl = `${window.location.origin}/lowongan/${job.id}-${slug}${mode === 'assess' ? '/assess' : ''}`;

  return (
    <div className="view">
      <div className="view-head">
        <div>
          <div className="title">Halaman Publik</div>
          <div className="subtitle">Apa yang dilihat kandidat saat membuka link Anda. Toggle untuk membandingkan landing page biasa vs. Assessment Khusus.</div>
        </div>
        <div style={{ display: 'flex', gap: 6, background: 'var(--surface)', padding: 4, border: '1px solid var(--border)', borderRadius: 10 }}>
          <button className={'btn sm ' + (mode === 'landing' ? 'primary' : 'ghost')} onClick={() => go({ ...state, mode: 'landing' })}>Landing Page</button>
          <button className={'btn sm ' + (mode === 'assess' ? 'primary' : 'ghost')} onClick={() => go({ ...state, mode: 'assess' })}>Assessment Khusus</button>
        </div>
      </div>

      <div style={{ display: 'flex', gap: 10, marginBottom: 14, alignItems: 'center' }}>
        <span style={{ fontSize: 12, color: 'var(--muted)' }}>Pilih posisi:</span>
        <select className="select" style={{ width: 'auto' }} value={job.id} onChange={(e) => go({ ...state, jobId: e.target.value })}>
          {JOBS.map(j => <option key={j.id} value={j.id}>{j.title}</option>)}
        </select>
        <div style={{ flex: 1 }}/>
        <a className="btn sm" href={liveUrl} target="_blank" rel="noopener" title="Buka halaman publik asli di tab baru">
          <Icon name="globe" size={13}/> Buka halaman asli
        </a>
      </div>

      <div className="preview-frame">
        <div className="preview-bar">
          <div className="dot"/><div className="dot"/><div className="dot"/>
          <div className="url">{liveUrl.replace(/^https?:\/\//, '')}</div>
        </div>
        <div className="preview-canvas">
          {mode === 'landing' ? <LandingContent job={job}/> : <AssessmentContent job={job}/>}
        </div>
      </div>
    </div>
  );
}

// Public landing page content (also reused inside settings preview)
function LandingContent({ job, compact = false }) {
  return (
    <div className="landing">
      <div className="nav">
        <div className="brand" style={{ padding: 0 }}>
          <div className="mark">T</div>
          <div className="wm">Talent<em>ir</em></div>
        </div>
        <span style={{ color: 'var(--muted)', fontSize: 12, marginLeft: 6 }}>·</span>
        <span style={{ color: 'var(--ink-2)', fontSize: 13, fontWeight: 600 }}>{job.orgName || 'Perusahaan'}</span>
        <div style={{ flex: 1 }}/>
      </div>

      <div className="hero">
        <div>
          <div style={{ fontSize: 12, color: 'var(--muted)', fontWeight: 700, letterSpacing: '0.06em', textTransform: 'uppercase' }}>
            {job.dept} · {job.type}
          </div>
          <h1>Kami mencari<br/><span style={{ color: 'var(--accent-ink)' }}>{job.title}</span></h1>
          <div className="meta-row">
            <Badge><Icon name="mapPin" size={11}/>{job.loc}</Badge>
            <Badge><Icon name="briefcase" size={11}/>{job.salary}</Badge>
            <Badge><Icon name="clock" size={11}/>Posted {job.published}</Badge>
          </div>
          <p className="lead">{job.description}</p>

          <div className="req">
            {job.requirements.map(r => <li key={r}>{r}</li>)}
          </div>

          <div className="apply-options">
            <div className="option">
              <div className="title">Lamar via Form Online</div>
              <div className="desc">Isi data diri & 5 pertanyaan assessment. Sekitar 5–7 menit. <b>CV wajib</b> (PDF/DOC, maks 10MB).</div>
              <div className="arrow"><Icon name="arrow" size={16}/></div>
            </div>
          </div>

          {!compact && (
            <div style={{ marginTop: 28 }}>
              <div className="section-title" style={{ marginBottom: 10 }}>Tentang Perusahaan</div>
              <p style={{ color: 'var(--ink-2)', fontSize: 13.5, lineHeight: 1.6 }}>
                Kami adalah jaringan operator F&B yang berkembang cepat dengan 24 cabang di Jawa & Bali.
                Berdiri sejak 2018, kami percaya proses rekrutmen yang ramah & efisien menghasilkan tim yang lebih sehat.
              </p>
            </div>
          )}
        </div>

        {/* Side card */}
        <div className="side-card">
          <div className="row-flex">
            <Icon name="sparkles" size={14} style={{ color: 'var(--accent)' }}/>
            <strong style={{ fontSize: 13 }}>Proses cepat & transparan</strong>
          </div>
          <div className="col-flex" style={{ gap: 10 }}>
            {[
              ['Hari 0', 'Apply via form / WhatsApp'],
              ['Hari 0', 'Interview AI singkat (otomatis)'],
              ['Hari 1–3', 'Update hasil masuk WhatsApp Anda'],
              ['Hari 4–7', 'Sesi wawancara final dengan tim'],
            ].map(([d, t], i) => (
              <div key={i} style={{ display: 'grid', gridTemplateColumns: '70px 1fr', gap: 8, alignItems: 'baseline' }}>
                <span className="mono" style={{ fontSize: 11, color: 'var(--muted)' }}>{d}</span>
                <span style={{ fontSize: 13 }}>{t}</span>
              </div>
            ))}
          </div>
          <div className="divider"/>
          <div style={{ fontSize: 11.5, color: 'var(--muted)', lineHeight: 1.5 }}>
            Data Anda diproses sesuai kebijakan privasi.
            AI hanya membantu menilai relevansi, keputusan akhir di tangan manusia.
          </div>
        </div>
      </div>
    </div>
  );
}

// Assessment form public page
function AssessmentContent({ job }) {
  const [step, setStep] = useState(0);
  const total = 5;
  const [bio, setBio] = useState({ name: '', email: '', phone: '' });
  const [answers, setAnswers] = useState({});

  const questions = [
    { type: 'short', q: 'Berapa tahun pengalaman Anda di bidang ini?', placeholder: 'Contoh: 2 tahun' },
    { type: 'mc',    q: 'Kapan Anda bisa mulai bekerja?', opts: ['Segera (immediate)', '2 minggu', '1 bulan', 'Lebih dari 1 bulan'] },
    { type: 'short', q: 'Berapa ekspektasi gaji bulanan Anda? (Rp)', placeholder: 'Contoh: 3.000.000' },
    { type: 'mc',    q: 'Mana yang paling Anda kuasai?', opts: ['Excel & Google Sheets', 'Notion / Airtable', 'Zendesk / Freshdesk', 'Lainnya'] },
    { type: 'essay', q: 'Ceritakan situasi tersulit yang pernah Anda tangani di pekerjaan terakhir.' },
  ];

  if (step === total + 1) {
    return (
      <div className="assess" style={{ textAlign: 'center', paddingTop: 80 }}>
        <div style={{ width: 64, height: 64, borderRadius: 99, background: 'var(--good-2)', color: 'oklch(0.45 0.13 155)', display: 'grid', placeItems: 'center', margin: '0 auto 16px' }}>
          <Icon name="check" size={28} stroke={2.4}/>
        </div>
        <h1 style={{ fontSize: 28, letterSpacing: '-0.02em', margin: '0 0 8px' }}>Lamaran berhasil dikirim!</h1>
        <p style={{ color: 'var(--ink-2)', fontSize: 14 }}>
          Terima kasih, <b>{bio.name || 'Kandidat'}</b>. AI kami sedang memproses jawaban Anda.<br/>
          Update akan masuk ke WhatsApp <span className="mono">{bio.phone || '+62 …'}</span> dalam 3 hari kerja.
        </p>
        <div style={{ display: 'flex', gap: 8, justifyContent: 'center', marginTop: 20 }}>
          {/* Deep-link to wa.me with the company's bot number so the candidate
              can land directly in a WhatsApp chat — pre-filled with a "Halo,
              saya {nama}…" message that helps the bot match them by name on
              first contact. Falls back to disabled if the job has no WA
              number wired up. */}
          {job.botPhone ? (
            <a
              className="btn wa"
              href={`https://wa.me/${String(job.botPhone).replace(/\D/g, '')}?text=${encodeURIComponent(`Halo, saya ${bio.name || ''} baru saja melamar untuk posisi ${job.title}. Mohon info selanjutnya ya.`)}`}
              target="_blank" rel="noopener noreferrer"
            >
              <Icon name="message" size={14}/> Buka WhatsApp
            </a>
          ) : (
            <Btn icon="message" disabled>Buka WhatsApp</Btn>
          )}
          <Btn icon="arrowL" onClick={() => setStep(0)}>Mulai ulang</Btn>
        </div>
      </div>
    );
  }

  return (
    <div className="assess">
      <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
        <div className="brand" style={{ padding: 0 }}>
          <div className="mark">T</div>
          <div className="wm" style={{ fontSize: 14 }}>Talent<em>ir</em></div>
        </div>
        <span style={{ color: 'var(--muted)', fontSize: 12 }}>·</span>
        <span style={{ fontSize: 12, color: 'var(--muted)' }}>Assessment untuk <b style={{ color: 'var(--ink-2)' }}>{job.title}</b></span>
      </div>
      <div className="progress"><div style={{ width: (step / (total + 1)) * 100 + '%' }}/></div>

      {step === 0 && (
        <div className="q-card">
          <div className="qn">Langkah 1 — Data Diri</div>
          <div className="qt">Sebelum mulai, perkenalkan diri Anda</div>
          <div className="col-flex" style={{ gap: 12 }}>
            {(() => null)()/* validators bound below */}
            <div className="field">
              <label>Nama lengkap</label>
              {/* inputMode + autoCapitalize="words" + autoComplete="name" so
                  mobile keyboards open with letters + auto-capitalize each
                  word; password managers can also pre-fill. */}
              <input className="input" value={bio.name}
                     onChange={e => setBio({ ...bio, name: e.target.value })}
                     autoCapitalize="words" autoComplete="name" enterKeyHint="next"/>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
              <div className="field">
                <label>Email</label>
                {/* inputMode="email" → @-row keyboard. autoComplete="email"
                    triggers Google/Apple email autofill. */}
                <input className="input" type="email" value={bio.email}
                       onChange={e => setBio({ ...bio, email: e.target.value })}
                       inputMode="email" autoComplete="email"
                       autoCapitalize="off" autoCorrect="off"
                       enterKeyHint="next"/>
                {bio.email.trim() && !window.TalentirValidate.email(bio.email) && (
                  <span className="hint" style={{ color: 'oklch(0.55 0.18 25)' }}>Format email tidak valid.</span>
                )}
              </div>
              <div className="field">
                <label>Nomor WhatsApp aktif</label>
                {/* type+inputMode="tel" → numeric keypad on mobile.
                    autoComplete="tel" → tap-to-fill from contacts. */}
                <input className="input" placeholder="+62…" value={bio.phone}
                       onChange={e => setBio({ ...bio, phone: e.target.value })}
                       type="tel" inputMode="tel" autoComplete="tel"
                       enterKeyHint="done"/>
                {bio.phone.trim() && !window.TalentirValidate.phone(bio.phone) && (
                  <span className="hint" style={{ color: 'oklch(0.55 0.18 25)' }}>Nomor minimal 9 digit angka.</span>
                )}
              </div>
            </div>
            <div className="field">
              <label>CV / Resume <span style={{ color: 'oklch(0.55 0.18 25)', fontWeight: 700 }}>*</span></label>
              <div style={{ border: '1.5px dashed var(--border-strong)', borderRadius: 8, padding: 18, textAlign: 'center', color: 'var(--muted)', fontSize: 13 }}>
                <Icon name="cv" size={20}/><div style={{ marginTop: 6 }}>Tarik file PDF ke sini atau <b style={{ color: 'var(--accent)' }}>browse</b></div>
                <div style={{ fontSize: 11, marginTop: 3 }}>Wajib · PDF / DOC / DOCX · maks 10MB</div>
              </div>
            </div>
          </div>
          <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: 8 }}>
            {(() => {
              const V = window.TalentirValidate;
              // Need at least a name + a valid contact (email OR phone) to apply,
              // so we can actually reach the candidate afterwards.
              const okEmail = V.email(bio.email);
              const okPhone = V.phone(bio.phone);
              const canStart = bio.name.trim().length >= 2 && (okEmail || okPhone);
              return (
                <Btn kind="accent" icon="arrow" onClick={() => setStep(1)} disabled={!canStart}>
                  Mulai Assessment
                </Btn>
              );
            })()}
          </div>
        </div>
      )}

      {step >= 1 && step <= total && (() => {
        const q = questions[step - 1];
        const a = answers[step] || '';
        return (
          <div className="q-card">
            <div className="qn">Pertanyaan {step} dari {total}</div>
            <div className="qt">{q.q}</div>
            {q.type === 'short' && (() => {
              // Heuristic mobile-keyboard hint based on the question text: if
              // the prompt is asking about money or a count of years, pop the
              // numeric keypad. Falls back to normal text otherwise.
              const isNumeric = /gaji|salary|rp\b|jt\b|juta|tahun pengalaman|berapa tahun|umur|usia/i.test(q.q);
              return (
                <input className="input" placeholder={q.placeholder} value={a}
                       onChange={e => setAnswers({ ...answers, [step]: e.target.value })}
                       inputMode={isNumeric ? 'numeric' : 'text'}
                       autoCapitalize={isNumeric ? 'off' : 'sentences'}
                       enterKeyHint="next"/>
              );
            })()}
            {q.type === 'essay' && <textarea className="textarea" style={{ minHeight: 130 }} placeholder="Jelaskan secukupnya…" value={a} onChange={e => setAnswers({ ...answers, [step]: e.target.value })}/>}
            {q.type === 'mc' && (
              <div className="mc">
                {q.opts.map(o => (
                  <label key={o} className={a === o ? 'selected' : ''}>
                    <span className="rd"/>
                    <input type="radio" name={'q' + step} value={o} checked={a === o} onChange={() => setAnswers({ ...answers, [step]: o })} style={{ display: 'none' }}/>
                    <span>{o}</span>
                  </label>
                ))}
              </div>
            )}
            <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 8 }}>
              <Btn icon="arrowL" onClick={() => setStep(step - 1)}>Kembali</Btn>
              {step < total
                ? <Btn kind="accent" icon="arrow" onClick={() => setStep(step + 1)}>Lanjut</Btn>
                : <Btn kind="accent" icon="check" onClick={() => setStep(total + 1)}>Kirim Lamaran</Btn>}
            </div>
          </div>
        );
      })()}
    </div>
  );
}

window.PublicView = PublicView;
window.LandingContent = LandingContent;