// Settings view — Profil, AI, Notifikasi, Organisasi.
// Reads/writes /api/settings, /api/settings/profile, and Better Auth change-password.

function SettingsView({ go }) {
  const [tab, setTab] = useState('profil');
  const [s, setS] = useState(null);
  const [err, setErr] = useState(null);

  useEffect(() => {
    window.TalentirAPI.get('/api/settings')
      .then(setS)
      .catch(e => { console.error(e); setErr('Gagal memuat pengaturan.'); });
  }, []);

  const TABS = [
    ['profil', 'Profil', 'user'],
    ['ai', 'AI', 'sparkles'],
    ['notifikasi', 'Notifikasi', 'bell'],
    ['organisasi', 'Organisasi', 'briefcase'],
  ];

  return (
    <div className="view">
      <div className="view-head">
        <div>
          <div className="title">Pengaturan</div>
          <div className="subtitle">Kelola profil, integrasi AI, notifikasi, dan data organisasi Anda.</div>
        </div>
      </div>

      <div className="tabs">
        {TABS.map(([id, lbl, ic]) => (
          <button key={id} className={'tab ' + (tab === id ? 'active' : '')} onClick={() => setTab(id)}>
            <Icon name={ic} size={13}/> <span style={{ marginLeft: 5 }}>{lbl}</span>
          </button>
        ))}
      </div>

      {err && <div className="empty">{err}</div>}
      {!s && !err && <div className="empty">Memuat…</div>}

      {s && tab === 'profil' && <ProfileTab s={s} setS={setS} go={go}/>}
      {s && tab === 'ai' && <SettingsAITab s={s} setS={setS}/>}
      {s && tab === 'notifikasi' && <NotifTab s={s} setS={setS}/>}
      {s && tab === 'organisasi' && <OrgTab s={s} setS={setS}/>}
    </div>
  );
}

// Small reusable save button with a "Tersimpan" flash.
function SaveBar({ onSave, savingLabel = 'Menyimpan…', label = 'Simpan perubahan' }) {
  const [saving, setSaving] = useState(false);
  const [saved, setSaved] = useState(false);
  const click = async () => {
    setSaving(true); setSaved(false);
    try { await onSave(); setSaved(true); setTimeout(() => setSaved(false), 2500); }
    catch (e) { console.error(e); }
    setSaving(false);
  };
  return (
    <div className="row-flex" style={{ justifyContent: 'flex-end', marginTop: 4 }}>
      {saved && <span style={{ fontSize: 12.5, color: 'oklch(0.55 0.13 155)', fontWeight: 600 }}><Icon name="check" size={12} stroke={2.5}/> Tersimpan</span>}
      <Btn kind="accent" icon="check" onClick={click} disabled={saving}>{saving ? savingLabel : label}</Btn>
    </div>
  );
}

function ProfileTab({ s, setS, go }) {
  const [name, setName] = useState(s.profile.name);
  const [pw, setPw] = useState({ current: '', next: '' });
  const [pwMsg, setPwMsg] = useState(null);

  const saveProfile = async () => {
    const r = await window.TalentirAPI.patch('/api/settings/profile', { name });
    setS({ ...s, profile: { ...s.profile, ...r } });
    if (window.TalentirData.USER) window.TalentirData.USER.name = r.name;
  };

  const changePassword = async () => {
    setPwMsg(null);
    try {
      const res = await fetch(window.TalentirAPI.base + '/api/auth/change-password', {
        method: 'POST', credentials: 'include',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ currentPassword: pw.current, newPassword: pw.next }),
      });
      if (!res.ok) { const d = await res.json().catch(() => ({})); throw new Error(d.message || 'Gagal mengubah password.'); }
      setPwMsg({ ok: true, text: 'Password berhasil diubah.' });
      setPw({ current: '', next: '' });
    } catch (e) { setPwMsg({ ok: false, text: e.message }); }
  };

  return (
    <div style={{ display: 'grid', gridTemplateColumns: '1.3fr 1fr', gap: 20, alignItems: 'start' }}>
      <div className="card card-pad col-flex" style={{ gap: 14 }}>
        <div className="section-title">Profil rekruter</div>
        <div className="row-flex">
          <Avatar name={name || 'U'} size=""/>
          <div style={{ fontSize: 12.5, color: 'var(--muted)' }}>Avatar dibuat otomatis dari inisial nama.</div>
        </div>
        <div className="field"><label>Nama lengkap</label><input className="input" value={name} onChange={e => setName(e.target.value)}/></div>
        <div className="field"><label>Email</label><input className="input" value={s.profile.email} disabled style={{ opacity: 0.7 }}/><span className="hint">Email login tidak dapat diubah dari sini.</span></div>
        <SaveBar onSave={saveProfile} label="Simpan profil"/>
      </div>

      <div className="col-flex">
        <div className="card card-pad col-flex" style={{ gap: 12 }}>
          <div className="section-title">Ubah password</div>
          <div className="field"><label>Password saat ini</label><input className="input" type="password" value={pw.current} onChange={e => setPw({ ...pw, current: e.target.value })}/></div>
          <div className="field"><label>Password baru</label><input className="input" type="password" value={pw.next} onChange={e => setPw({ ...pw, next: e.target.value })}/></div>
          {pwMsg && <div style={{ fontSize: 12.5, fontWeight: 600, color: pwMsg.ok ? 'oklch(0.55 0.13 155)' : 'oklch(0.55 0.18 25)' }}>{pwMsg.text}</div>}
          <div className="row-flex" style={{ justifyContent: 'flex-end' }}>
            <Btn icon="check" onClick={changePassword} disabled={!pw.current || !pw.next}>Ubah password</Btn>
          </div>
        </div>
        <div className="card card-pad row-flex" style={{ justifyContent: 'space-between' }}>
          <div>
            <div style={{ fontWeight: 700, fontSize: 13 }}>Keluar dari akun</div>
            <div style={{ fontSize: 11.5, color: 'var(--muted)' }}>Akhiri sesi di perangkat ini.</div>
          </div>
          <Btn icon="arrow" onClick={async () => { await window.TalentirAPI.logout(); window.location.href = 'login.html'; }}>Keluar</Btn>
        </div>
      </div>
    </div>
  );
}

function SettingsAITab({ s, setS }) {
  const [ai, setAi] = useState(s.ai);
  const [apiKey, setApiKey] = useState('');
  // Separate key state for Whisper because the form should let the user paste
  // it without the value re-rendering masked dots on every keystroke.
  const [whisperKey, setWhisperKey] = useState('');
  const set = (k, v) => setAi(a => ({ ...a, [k]: v }));
  const setScore = (k, v) => setAi(a => ({ ...a, scoring: { ...a.scoring, [k]: Number(v) } }));

  const models = ai.provider === 'openai'
    ? ['gpt-4o', 'gpt-4o-mini', 'gpt-4.1']
    : ['claude-opus-4-7', 'claude-sonnet-4-6', 'claude-haiku-4-5-20251001'];

  const save = async () => {
    const payload = { ai: { ...ai } };
    if (apiKey.trim()) payload.ai.apiKey = apiKey.trim();
    if (whisperKey.trim()) payload.ai.whisperApiKey = whisperKey.trim();
    const r = await window.TalentirAPI.put('/api/settings', payload);
    setS({ ...s, ai: r.ai }); setApiKey(''); setWhisperKey('');
  };

  return (
    <div style={{ display: 'grid', gridTemplateColumns: '1.3fr 1fr', gap: 20, alignItems: 'start' }}>
      <div className="card card-pad col-flex" style={{ gap: 14 }}>
        <div className="section-title">Penyedia & model AI</div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
          <div className="field"><label>Penyedia</label>
            <select className="select" value={ai.provider} onChange={e => { const p = e.target.value; setAi(a => ({ ...a, provider: p, model: p === 'openai' ? 'gpt-4o' : 'claude-sonnet-4-6' })); }}>
              <option value="anthropic">Anthropic (Claude)</option>
              <option value="openai">OpenAI (ChatGPT)</option>
            </select>
          </div>
          <div className="field"><label>Model</label>
            <select className="select" value={ai.model} onChange={e => set('model', e.target.value)}>
              {models.map(m => <option key={m} value={m}>{m}</option>)}
            </select>
          </div>
          <div className="field"><label>Bahasa balasan</label>
            <select className="select" value={ai.language} onChange={e => set('language', e.target.value)}>
              <option value="id">Bahasa Indonesia</option>
              <option value="en">English</option>
            </select>
          </div>
          <div className="field"><label>Gaya bahasa</label>
            <select className="select" value={ai.tone} onChange={e => set('tone', e.target.value)}>
              <option value="profesional">Profesional</option>
              <option value="ramah">Ramah</option>
              <option value="singkat">Singkat</option>
            </select>
          </div>
        </div>
        <div className="field"><label>API Key {s.ai.apiKeySet && <span style={{ color: 'oklch(0.55 0.13 155)', fontWeight: 600 }}>· tersimpan</span>}</label>
          <input className="input mono" type="password" placeholder={s.ai.apiKeySet ? '•••••••••• (biarkan kosong untuk tetap)' : 'sk-…'} value={apiKey} onChange={e => setApiKey(e.target.value)}/>
          <span className="hint">Kunci disimpan terenkripsi di server dan tidak pernah dikirim balik ke browser.</span>
        </div>
        <div className="field">
          <label>
            OpenAI key untuk Whisper (transkripsi voice note)
            {s.ai.whisperKeySet && <span style={{ color: 'oklch(0.55 0.13 155)', fontWeight: 600 }}> · tersimpan</span>}
          </label>
          <input className="input mono" type="password"
                 placeholder={s.ai.whisperKeySet ? '•••••••••• (biarkan kosong untuk tetap)' : 'sk-…'}
                 value={whisperKey} onChange={e => setWhisperKey(e.target.value)}
                 disabled={ai.provider === 'openai' && s.ai.apiKeySet}/>
          <span className="hint">
            {ai.provider === 'openai'
              ? 'Kamu pakai OpenAI sebagai provider utama — Whisper otomatis pakai API Key di atas. Kosongkan saja.'
              : 'Voice note → teks pakai Whisper (OpenAI). Karena provider utama bukan OpenAI, isi key OpenAI di sini supaya VN dari kandidat bisa otomatis di-transkrip. Kosong = VN tidak ditranskrip.'}
          </span>
        </div>
        <SaveBar onSave={save}/>
      </div>

      <div className="col-flex">
        <div className="card card-pad col-flex" style={{ gap: 12 }}>
          <div className="section-title">Otomatisasi</div>
          <div className="row-flex"><Toggle on={ai.autoScreen} onChange={v => set('autoScreen', v)}/><div><div style={{ fontWeight: 600, fontSize: 13 }}>Auto-screening kandidat baru</div><div style={{ fontSize: 11.5, color: 'var(--muted)' }}>AI langsung menilai CV/jawaban saat masuk.</div></div></div>
          <div className="row-flex"><Toggle on={ai.autoWaReply} onChange={v => set('autoWaReply', v)}/><div><div style={{ fontWeight: 600, fontSize: 13 }}>Auto-reply WhatsApp Bot</div><div style={{ fontSize: 11.5, color: 'var(--muted)' }}>Bot membalas & wawancara tanpa intervensi.</div></div></div>
        </div>

        {/* Bot persona + knowledge — only meaningful when auto-reply is on. */}
        <div className="card card-pad col-flex" style={{ gap: 12 }}>
          <div className="section-title">Latih Bot WhatsApp</div>
          <div style={{ fontSize: 12, color: 'var(--muted)', marginTop: -6 }}>
            Beri instruksi & pengetahuan tambahan untuk bot. <b>Detail tiap posisi (judul, deskripsi, requirements, lokasi, gaji, benefit) otomatis diambil dari halaman Lowongan</b> — tidak perlu ditulis ulang di sini. Perubahan berlaku langsung tanpa restart.
          </div>
          <div className="field">
            <label>Persona & Instruksi Bot</label>
            <textarea className="input" rows={5} placeholder={'Mis. "Kamu adalah Bot Rekrutmen PT Kreatif Nusantara. Selalu sapa kandidat dengan nama depan. Jangan janjikan gaji spesifik di luar yang sudah tertera di lowongan. Kalau ditanya hal di luar posisi yang dilamar, arahkan ke HR. Tugasmu: bantu kandidat memahami posisi, jawab pertanyaan umum, dan ajak ke tahap wawancara kalau cocok."'}
                      value={ai.botPrompt || ''}
                      onChange={e => set('botPrompt', e.target.value)}/>
            <span className="hint">Persona, gaya, batas/larangan. Tone & bahasa di atas sudah otomatis dipakai — ini untuk instruksi spesifik bisnis.</span>
          </div>
          <div className="field">
            <label>Info Perusahaan & Proses Rekrutmen (opsional)</label>
            <textarea className="input" rows={6} placeholder={'Hanya yang tidak ada di lowongan. Contoh:\n- Proses rekrutmen: screening CV → tes online (~15 menit) → wawancara HR → wawancara user → offering. Total 7-10 hari kerja.\n- Dokumen yang dibutuhkan: CV, KTP, ijazah terakhir (NPWP opsional).\n- Cuti tahunan: 12 hari setelah probation 3 bulan.\n- Pertanyaan umum kandidat: "Kapan kabar selanjutnya?" → 2-3 hari kerja setelah lamaran.'}
                      value={ai.botFaq || ''}
                      onChange={e => set('botFaq', e.target.value)}/>
            <span className="hint">Untuk info perusahaan / proses rekrutmen yang berlaku umum lintas posisi. Detail posisi (gaji, lokasi, deskripsi, requirements) tidak perlu ditulis — bot sudah baca dari Lowongan. Kalau pertanyaan kandidat tidak tercover, bot otomatis bilang "saya akan teruskan ke HR".</span>
          </div>
        </div>

        <div className="card card-pad col-flex" style={{ gap: 12 }}>
          <div className="section-title">Default AI scoring</div>
          <div className="field"><label>Threshold lolos otomatis</label><input className="input" type="number" value={ai.scoring.passThreshold} onChange={e => setScore('passThreshold', e.target.value)}/></div>
          <div className="field"><label>Auto-reject di bawah</label><input className="input" type="number" value={ai.scoring.autoRejectBelow} onChange={e => setScore('autoRejectBelow', e.target.value)}/></div>
          <div className="field"><label>Bobot esai (%)</label><input className="input" type="number" value={ai.scoring.essayWeight} onChange={e => setScore('essayWeight', e.target.value)}/></div>
        </div>
      </div>
    </div>
  );
}

function NotifTab({ s, setS }) {
  const [n, setN] = useState(s.notifications);
  const set = (k, v) => setN(x => ({ ...x, [k]: v }));
  const ROWS = [
    ['emailDigest', 'Ringkasan email harian', 'Rekap kandidat & aktivitas tiap pagi.'],
    ['newCandidate', 'Kandidat baru masuk', 'Notifikasi saat pelamar baru terdaftar.'],
    ['interviewReminder', 'Pengingat wawancara', 'Ingatkan H-1 & 1 jam sebelum jadwal.'],
    ['waAlerts', 'Alert WhatsApp Bot', 'Beri tahu jika nomor offline / kena rate-limit.'],
  ];
  const save = async () => { const r = await window.TalentirAPI.put('/api/settings', { notifications: n }); setS({ ...s, notifications: r.notifications }); };

  const [em, setEm] = useState({ resendApiKey: '', fromEmail: (s.email && s.email.fromEmail) || '' });
  const keySet = s.email && s.email.apiKeySet;
  const saveEmail = async () => {
    const body = { email: { fromEmail: em.fromEmail } };
    if (em.resendApiKey.trim()) body.email.resendApiKey = em.resendApiKey.trim();
    const r = await window.TalentirAPI.put('/api/settings', body);
    setS({ ...s, email: r.email });
    setEm({ resendApiKey: '', fromEmail: (r.email && r.email.fromEmail) || '' });
  };

  return (
    <div className="col-flex" style={{ gap: 20, maxWidth: 640 }}>
      <div className="card card-pad col-flex" style={{ gap: 12 }}>
        <div className="section-title">Preferensi notifikasi</div>
        {ROWS.map(([k, t, d]) => (
          <div key={k} className="row-flex" style={{ padding: 10, border: '1px solid var(--border)', borderRadius: 7 }}>
            <Toggle on={n[k]} onChange={v => set(k, v)}/>
            <div><div style={{ fontWeight: 600, fontSize: 13 }}>{t}</div><div style={{ fontSize: 11.5, color: 'var(--muted)' }}>{d}</div></div>
          </div>
        ))}
        <SaveBar onSave={save}/>
      </div>

      <div className="card card-pad col-flex" style={{ gap: 12 }}>
        <div className="section-title">Pengiriman Email (Resend)</div>
        {!keySet && (
          <div style={{ background: 'oklch(0.97 0.04 80)', border: '1px solid oklch(0.85 0.12 80)', color: 'oklch(0.42 0.12 60)', padding: '10px 12px', borderRadius: 7, fontSize: 12.5 }}>
            ⚠ <b>Resend API key belum diisi.</b> Email otomatis (undangan HR, notifikasi kandidat, pengingat wawancara) <b>tidak akan terkirim</b> sampai key ini diisi. Buat di <a href="https://resend.com" target="_blank" rel="noreferrer" style={{ color: 'inherit', textDecoration: 'underline' }}>resend.com</a>.
          </div>
        )}
        <div className="field">
          <label>Resend API Key {keySet && <span style={{ color: 'oklch(0.55 0.13 155)', fontWeight: 600 }}>· tersimpan</span>}</label>
          <input className="input" type="password" value={em.resendApiKey}
                 onChange={e => setEm(x => ({ ...x, resendApiKey: e.target.value }))}
                 placeholder={keySet ? '•••••••• (kosongkan jika tidak ganti)' : 're_xxxxxxxxxxxxxxxx'}/>
          <span className="hint">Buat di resend.com → API Keys. Disimpan aman & tidak ditampilkan kembali. Dipakai untuk undangan HR & email kandidat.</span>
        </div>
        <div className="field">
          <label>Email pengirim (From)</label>
          <input className="input" value={em.fromEmail}
                 onChange={e => setEm(x => ({ ...x, fromEmail: e.target.value }))}
                 placeholder="Talentir <no-reply@domainanda.com>"/>
          <span className="hint">Domain harus terverifikasi di Resend. Untuk uji coba, kosongkan — otomatis pakai onboarding@resend.dev (hanya bisa kirim ke email akun Resend Anda).</span>
        </div>
        <SaveBar onSave={saveEmail} label="Simpan email"/>
      </div>
    </div>
  );
}

function OrgTab({ s, setS }) {
  const [o, setO] = useState(s.organization);
  const set = (k, v) => setO(x => ({ ...x, [k]: v }));
  const save = async () => { const r = await window.TalentirAPI.put('/api/settings', { organization: o }); setS({ ...s, organization: r.organization }); };

  const ORGS = window.TalentirData.ORGS || [];
  const ACTIVE = window.TalentirData.ACTIVE_ORG_ID;
  const DEFAULT = window.TalentirData.DEFAULT_ORG_ID;
  const switchOrg = async (orgId) => {
    if (orgId === ACTIVE) return;
    try { await window.TalentirAPI.post('/api/orgs/switch', { orgId }); window.location.reload(); }
    catch (e) { console.error('Gagal ganti perusahaan:', e); }
  };
  const addOrg = async () => {
    const name = window.prompt('Nama perusahaan baru:');
    if (!name || !name.trim()) return;
    try {
      const org = await window.TalentirAPI.post('/api/orgs', { name: name.trim() });
      await window.TalentirAPI.post('/api/orgs/switch', { orgId: org.id });
      window.location.reload();
    } catch (e) { console.error('Gagal membuat perusahaan:', e); }
  };
  const delOrg = async (orgId, name) => {
    if (!window.confirm(`Hapus perusahaan "${name}" beserta semua datanya? Tidak bisa dibatalkan.`)) return;
    try { await fetch(window.TalentirAPI.base + '/api/orgs/' + orgId, { method: 'DELETE', credentials: 'include' }); window.location.reload(); }
    catch (e) { console.error('Gagal menghapus perusahaan:', e); }
  };

  return (
    <div className="col-flex" style={{ gap: 20, maxWidth: 640 }}>
    <div className="card card-pad col-flex" style={{ gap: 12 }}>
      <div className="row-flex" style={{ justifyContent: 'space-between' }}>
        <div className="section-title" style={{ margin: 0 }}>Perusahaan Anda</div>
        <Btn size="sm" icon="plus" kind="accent" onClick={addOrg}>Tambah Perusahaan</Btn>
      </div>
      <div className="col-flex" style={{ gap: 6 }}>
        {ORGS.map(org => (
          <div key={org.id} className="row-flex" style={{ padding: '8px 12px', border: '1px solid var(--border)', borderRadius: 8, gap: 8 }}>
            <Icon name="briefcase" size={14}/>
            <span style={{ flex: 1, fontWeight: 600, fontSize: 13 }}>{org.name}{org.id === DEFAULT && <span style={{ color: 'var(--muted)', fontWeight: 500, fontSize: 11 }}> · utama</span>}</span>
            {org.id === ACTIVE
              ? <Badge kind="good"><span className="dot"/>Aktif</Badge>
              : <Btn size="sm" onClick={() => switchOrg(org.id)}>Pakai</Btn>}
            {org.id !== DEFAULT && <button className="btn ghost sm" style={{ padding: 6 }} title="Hapus perusahaan" onClick={() => delOrg(org.id, org.name)}><Icon name="trash" size={13}/></button>}
          </div>
        ))}
      </div>
      <span className="hint">Beralih perusahaan akan memuat ulang data sesuai perusahaan tersebut. Switcher cepat juga ada di sidebar kiri (bagian “PERUSAHAAN”).</span>
    </div>

    <div className="card card-pad col-flex" style={{ gap: 14 }}>
      <div className="section-title">Data perusahaan aktif</div>
      <div className="field"><label>Nama perusahaan</label><input className="input" value={o.name} onChange={e => set('name', e.target.value)}/></div>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
        <div className="field"><label>Industri</label>
          <select className="select" value={o.industry || ''} onChange={e => set('industry', e.target.value)}>
            <option value="">Pilih industri…</option>
            {['F&B', 'Retail', 'Teknologi', 'Manufaktur', 'Jasa', 'Lainnya'].map(i => <option key={i} value={i}>{i}</option>)}
          </select>
        </div>
        <div className="field"><label>Zona waktu</label>
          <select className="select" value={o.timezone || 'Asia/Jakarta'} onChange={e => set('timezone', e.target.value)}>
            {['Asia/Jakarta', 'Asia/Makassar', 'Asia/Jayapura'].map(t => <option key={t} value={t}>{t}</option>)}
          </select>
        </div>
      </div>
      <SaveBar onSave={save}/>
    </div>
    </div>
  );
}

window.SettingsView = SettingsView;