// Superadmin view — platform-wide AI configuration, shared by every workspace.
// Only mounted for superadmin accounts (nav item gated by USER.isSuperadmin;
// the API is gated by requireSuperadmin server-side). Reads/writes
// /api/superadmin/ai. Mirrors the old per-workspace AI tab, but global.

function SuperadminView() {
  const [ai, setAiState] = useState(null);     // redacted ai blob from server
  const [err, setErr] = useState(null);

  useEffect(() => {
    window.TalentirAPI.get('/api/superadmin/ai')
      .then(r => setAiState(r.ai))
      .catch(e => { console.error(e); setErr('Gagal memuat konfigurasi AI. Pastikan akun ini superadmin.'); });
  }, []);

  return (
    <div className="view">
      <div className="view-head">
        <div>
          <div className="title">Superadmin — Konfigurasi AI Global</div>
          <div className="subtitle">Satu konfigurasi AI (penyedia, API key, model, bot, scoring) yang dipakai semua workspace. Perubahan berlaku langsung tanpa restart.</div>
        </div>
      </div>
      {err && <div className="empty">{err}</div>}
      {!ai && !err && <div className="empty">Memuat…</div>}
      {ai && <SuperadminAIForm initial={ai} onSaved={setAiState}/>}
    </div>
  );
}

function SuperadminAIForm({ initial, onSaved }) {
  const [ai, setAi] = useState(initial);
  const [apiKey, setApiKey] = useState('');
  const [whisperKey, setWhisperKey] = useState('');
  const [saving, setSaving] = useState(false);
  const [saved, setSaved] = useState(false);
  const [testing, setTesting] = useState(false);
  const [testRes, setTestRes] = useState(null);

  const set = (k, v) => setAi(a => ({ ...a, [k]: v }));
  const setScore = (k, v) => setAi(a => ({ ...a, scoring: { ...(a.scoring || {}), [k]: Number(v) } }));

  const MODELS = {
    openai: ['gpt-4o', 'gpt-4o-mini', 'gpt-4.1'],
    minimax: ['MiniMax-M2', 'MiniMax-M2-Stable', 'MiniMax-M2.1', 'MiniMax-M2.5', 'MiniMax-M2.7', 'MiniMax-M3'],
    anthropic: ['claude-opus-4-7', 'claude-sonnet-4-6', 'claude-haiku-4-5-20251001'],
  };
  const DEFAULT_MODEL = { openai: 'gpt-4o', minimax: 'MiniMax-M2', anthropic: 'claude-sonnet-4-6' };
  const models = MODELS[ai.provider] || MODELS.anthropic;

  const save = async () => {
    setSaving(true); setSaved(false);
    try {
      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/superadmin/ai', payload);
      setAi(r.ai); onSaved && onSaved(r.ai);
      setApiKey(''); setWhisperKey('');
      setSaved(true); setTimeout(() => setSaved(false), 2500);
    } catch (e) { console.error(e); }
    setSaving(false);
  };

  // Test the live connection. Persists any freshly-typed key first so the probe
  // uses exactly what the superadmin just entered, then calls the saved config.
  const testConn = async () => {
    setTesting(true); setTestRes(null);
    try {
      if (apiKey.trim() || whisperKey.trim()) await save();
      const r = await window.TalentirAPI.post('/api/superadmin/ai/test', {});
      setTestRes(r);
    } catch (e) {
      setTestRes({ ok: false, message: (e && e.message) || 'Gagal menjalankan test.' });
    }
    setTesting(false);
  };

  const scoring = ai.scoring || { passThreshold: 65, autoRejectBelow: 25, essayWeight: 35 };

  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: DEFAULT_MODEL[p] || 'claude-sonnet-4-6' })); }}>
              <option value="anthropic">Anthropic (Claude)</option>
              <option value="openai">OpenAI (ChatGPT)</option>
              <option value="minimax">MiniMax</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>
        {ai.provider === 'minimax' && (
          <div className="field"><label>Base URL MiniMax</label>
            <input className="input mono" type="text"
                   placeholder="https://api.minimax.io/anthropic"
                   value={ai.baseUrl || ''} onChange={e => set('baseUrl', e.target.value)}/>
            <span className="hint">Endpoint Anthropic-compatible untuk paket/subscription MiniMax. Kosong = default internasional <code>https://api.minimax.io/anthropic</code>. Akun China: <code>https://api.minimaxi.com/anthropic</code>.</span>
          </div>
        )}
        <div className="field"><label>API Key {ai.apiKeySet && <span style={{ color: 'oklch(0.55 0.13 155)', fontWeight: 600 }}>· tersimpan</span>}</label>
          <input className="input mono" type="password" placeholder={ai.apiKeySet ? '•••••••••• (biarkan kosong untuk tetap)' : (ai.provider === 'minimax' ? 'MiniMax API key…' : 'sk-…')} value={apiKey} onChange={e => setApiKey(e.target.value)}/>
          <span className="hint">Kunci disimpan terenkripsi di server dan tidak pernah dikirim balik ke browser. Dipakai oleh SEMUA workspace.</span>
        </div>
        <div className="field">
          <label>
            OpenAI key untuk Whisper (transkripsi voice note)
            {ai.whisperKeySet && <span style={{ color: 'oklch(0.55 0.13 155)', fontWeight: 600 }}> · tersimpan</span>}
          </label>
          <input className="input mono" type="password"
                 placeholder={ai.whisperKeySet ? '•••••••••• (biarkan kosong untuk tetap)' : 'sk-…'}
                 value={whisperKey} onChange={e => setWhisperKey(e.target.value)}
                 disabled={ai.provider === 'openai' && ai.apiKeySet}/>
          <span className="hint">
            {ai.provider === 'openai'
              ? 'Provider utama OpenAI — 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>
        <div className="row-flex" style={{ justifyContent: 'flex-end', marginTop: 4, gap: 10, flexWrap: 'wrap' }}>
          {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 icon="play" onClick={testConn} disabled={testing || saving}>{testing ? 'Menguji…' : 'Test koneksi'}</Btn>
          <Btn kind="accent" icon="check" onClick={save} disabled={saving || testing}>{saving ? 'Menyimpan…' : 'Simpan perubahan'}</Btn>
        </div>
        {testRes && (
          <div style={{ fontSize: 12.5, fontWeight: 600, textAlign: 'right', color: testRes.ok ? 'oklch(0.5 0.13 155)' : 'oklch(0.55 0.18 25)' }}>
            {testRes.ok ? '✓ ' : '✗ '}{testRes.message}{testRes.ok && testRes.latencyMs ? ` · ${testRes.latencyMs} ms` : ''}
          </div>
        )}
        <span className="hint" style={{ marginTop: -4 }}>Test koneksi memakai key tersimpan (key yang baru kamu ketik akan disimpan dulu otomatis), lalu melakukan 1 panggilan kecil ke penyedia AI.</span>
      </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>

        <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 }}>
            Persona & pengetahuan bot berlaku global untuk semua workspace. <b>Detail tiap posisi otomatis diambil dari halaman Lowongan</b> masing-masing.
          </div>
          <div className="field">
            <label>Persona & Instruksi Bot</label>
            <textarea className="input" rows={5} placeholder={'Mis. "Kamu adalah Bot Rekrutmen. Selalu sapa kandidat dengan nama depan. Jangan janjikan gaji di luar yang tertera di lowongan. Kalau ditanya di luar posisi yang dilamar, arahkan ke HR."'}
                      value={ai.botPrompt || ''} onChange={e => set('botPrompt', e.target.value)}/>
            <span className="hint">Persona, gaya, batas/larangan. Tone & bahasa di atas otomatis dipakai.</span>
          </div>
          <div className="field">
            <label>Info Perusahaan & Proses Rekrutmen (opsional)</label>
            <textarea className="input" rows={6} placeholder={'Hanya info umum lintas posisi. Contoh:\n- Proses: screening CV → tes online → wawancara HR → user → offering.\n- Dokumen: CV, KTP, ijazah.\n- "Kapan kabar selanjutnya?" → 2-3 hari kerja.'}
                      value={ai.botFaq || ''} onChange={e => set('botFaq', e.target.value)}/>
            <span className="hint">Info perusahaan/proses yang berlaku umum. Detail posisi sudah dibaca bot dari Lowongan.</span>
          </div>
          <div className="field">
            <label>Trigger eskalasi ke HR (kata kunci tambahan)</label>
            <input className="input" type="text"
                   placeholder="hubungkan ke manajer, urgent, mendesak"
                   value={(ai.escalation && ai.escalation.keywords || []).join(', ')}
                   onChange={e => {
                     const list = e.target.value.split(',').map(x => x.trim()).filter(Boolean);
                     setAi(a => ({ ...a, escalation: { ...(a.escalation || {}), keywords: list } }));
                   }}/>
            <span className="hint">Pisahkan dengan koma. Default sudah aktif: <code style={{ fontSize: 11 }}>bicara dengan hr, manusia, bukan bot, tolong saya, komplain, …</code></span>
          </div>
        </div>

        <div className="card card-pad col-flex" style={{ gap: 12 }}>
          <div className="section-title">Default AI scoring (global)</div>
          <div className="field"><label>Threshold lolos otomatis</label><input className="input" type="number" value={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={scoring.autoRejectBelow} onChange={e => setScore('autoRejectBelow', e.target.value)}/></div>
          <div className="field"><label>Bobot esai (%)</label><input className="input" type="number" value={scoring.essayWeight} onChange={e => setScore('essayWeight', e.target.value)}/></div>
          <span className="hint">Kandidat dengan skor AI ≥ threshold langsung ke "Wawancara HR"; di bawah auto-reject langsung "Ditolak". Berlaku untuk semua workspace.</span>
        </div>
      </div>
    </div>
  );
}

window.SuperadminView = SuperadminView;