// WhatsApp view with multi-number support — real conversations from wa_logs

// Render a wa_log timestamp (ISO string) as local HH:MM.
function waTime(v) {
  const d = new Date(v);
  return isNaN(d) ? '' : d.toLocaleTimeString('id-ID', { hour: '2-digit', minute: '2-digit', hour12: false });
}

function WhatsAppView({ candidates, openCandidate, reloadData }) {
  const { WA_NUMBERS, HR_USERS, JOBS } = window.TalentirData;
  const [activeNumberId, setActiveNumberId] = useState(WA_NUMBERS[0]?.id);
  const [showConnect, setShowConnect] = useState(false);
  const [showSettings, setShowSettings] = useState(null);

  const activeNumber = WA_NUMBERS.find(n => n.id === activeNumberId);

  // Conversations = candidates we've actually chatted with on WhatsApp (any
  // direction). Hidden until there's a real message, and polled live so new
  // outbound/inbound messages bubble to the top automatically.
  const [conversations, setConversations] = useState([]);
  const loadConversations = async () => {
    try { const c = await window.TalentirAPI.get('/api/wa-numbers/conversations'); setConversations(Array.isArray(c) ? c : []); }
    catch (e) { console.error('Gagal memuat daftar percakapan:', e); }
  };
  useEffect(() => { loadConversations(); const iv = setInterval(loadConversations, 5000); return () => clearInterval(iv); }, []);

  const [query, setQuery] = useState('');
  const listCandidates = query.trim()
    ? conversations.filter(c => c.name.toLowerCase().includes(query.trim().toLowerCase()))
    : conversations;
  const [activeId, setActiveId] = useState(null);
  // Default the selected conversation to the latest one once data loads.
  useEffect(() => {
    if (!activeId && listCandidates[0]) setActiveId(listCandidates[0].id);
  }, [conversations.length]);
  const active = conversations.find(c => c.id === activeId) || null;

  // Fetch the active candidate's real WhatsApp conversation + poll for new
  // incoming messages so replies appear without re-clicking.
  const [thread, setThread] = useState([]);
  const [loadingThread, setLoadingThread] = useState(false);
  const loadThread = async (cid) => {
    const logs = await window.TalentirAPI.get('/api/candidates/' + cid + '/wa-logs');
    return Array.isArray(logs) ? logs : [];
  };
  useEffect(() => {
    if (!active) { setThread([]); return; }
    let cancelled = false;
    setLoadingThread(true);
    loadThread(active.id)
      .then(logs => { if (!cancelled) setThread(logs); })
      .catch(err => { if (!cancelled) { console.error('Gagal memuat percakapan:', err); setThread([]); } })
      .finally(() => { if (!cancelled) setLoadingThread(false); });
    const iv = setInterval(async () => {
      if (cancelled) return;
      try { const logs = await loadThread(active.id); if (!cancelled) setThread(logs); } catch (e) { /* keep polling */ }
    }, 4000);
    return () => { cancelled = true; clearInterval(iv); };
  }, [active?.id]);

  // Manual takeover: HR types a message; backend queues + logs it.
  const [takingOver, setTakingOver] = useState(false);
  const [draft, setDraft] = useState('');
  const [sending, setSending] = useState(false);
  const [sendError, setSendError] = useState(null);
  const sendTakeover = async () => {
    const content = draft.trim();
    if (!content || !active) return;
    setSending(true); setSendError(null);
    try {
      await window.TalentirAPI.post('/api/candidates/' + active.id + '/wa-send', { content });
      setDraft('');
      setThread(await loadThread(active.id));
      loadConversations(); // bubble this conversation to the top
    } catch (err) {
      console.error('Gagal mengirim pesan:', err);
      setSendError(err?.message || 'Gagal mengirim pesan. Cek koneksi WhatsApp.');
    }
    setSending(false);
  };

  // Wipe this conversation entirely (wa_logs + queued outbox). The candidate
  // record itself stays — just the chat history is cleared, like WhatsApp's
  // own "Bersihkan obrolan".
  const deleteChat = async () => {
    if (!active) return;
    if (!window.confirm('Hapus seluruh percakapan dengan ' + active.name + '? Tindakan ini tidak bisa dibatalkan.')) return;
    try {
      await fetch(window.TalentirAPI.base + '/api/wa-numbers/conversations/' + active.id, { method: 'DELETE', credentials: 'include' });
      setActiveId(null);
      setThread([]);
      await loadConversations();
    } catch (err) { console.error('Gagal menghapus chat:', err); }
  };

  // Keep the thread scrolled to the newest message.
  const msgsRef = useRef(null);
  useEffect(() => {
    if (msgsRef.current) msgsRef.current.scrollTop = msgsRef.current.scrollHeight;
  }, [active?.id, activeNumberId, thread.length]);

  const totalMsgToday = WA_NUMBERS.reduce((s, n) => s + n.msgToday, 0);
  const onlineCount = WA_NUMBERS.filter(n => n.status === 'online').length;

  // Empty state — no WhatsApp numbers connected yet.
  if (WA_NUMBERS.length === 0) {
    return (
      <div className="view wa-view">
        <div className="view-head">
          <div>
            <div className="title">WhatsApp Bot</div>
            <div className="subtitle">Hubungkan nomor WhatsApp untuk mulai mengirim & menerima pesan kandidat.</div>
          </div>
          <div className="row-flex">
            <Btn icon="plus" size="sm" kind="accent" onClick={() => setShowConnect(true)}>Tambah Nomor</Btn>
          </div>
        </div>
        <div className="card card-pad" style={{ textAlign: 'center', padding: 48, color: 'var(--muted)' }}>
          <Icon name="message" size={28}/>
          <div style={{ fontWeight: 700, color: 'var(--ink-2)', marginTop: 10 }}>Belum ada nomor WhatsApp</div>
          <div style={{ fontSize: 13, marginTop: 4 }}>Klik “Tambah Nomor” untuk menghubungkan via QR.</div>
        </div>
        {showConnect && <ConnectWAModal onClose={() => setShowConnect(false)} reloadData={reloadData}/>}
      </div>
    );
  }

  return (
    <div className="view wa-view">
      <div className="view-head">
        <div>
          <div className="title">WhatsApp Bot</div>
          <div className="subtitle">Kelola {WA_NUMBERS.length} nomor untuk operasional multi-cabang — pilih nomor untuk melihat percakapannya.</div>
        </div>
        <div className="row-flex">
          <Btn icon="plus" size="sm" kind="accent" onClick={() => setShowConnect(true)}>Tambah Nomor</Btn>
        </div>
      </div>

      {/* Compact KPI strip */}
      <div className="wa-kpi">
        <span className="pill"><span className="dot-on"/><b>{onlineCount}/{WA_NUMBERS.length}</b> nomor online</span>
        <span className="pill"><Icon name="message" size={12}/><b>{totalMsgToday}</b> pesan 24 jam</span>
        <span className="pill"><Icon name="user" size={12}/><b>{conversations.length}</b> percakapan aktif</span>
        {WA_NUMBERS.length - onlineCount > 0 &&
          <span className="pill" style={{ color: 'var(--warn, oklch(0.55 0.13 60))' }}>{WA_NUMBERS.length - onlineCount} perlu reconnect</span>}
      </div>

      {/* Number selector — single compact row */}
      <div className="wa-num-strip">
        {WA_NUMBERS.map(n => {
          const hr = HR_USERS.find(h => h.id === n.assignedHR);
          const ratePct = (n.rateLimit.used / n.rateLimit.limit) * 100;
          const rateClass = ratePct > 80 ? 'danger' : ratePct > 50 ? 'warn' : '';
          return (
            <div key={n.id}
                 className={'wa-num ' + (activeNumberId === n.id ? 'active' : '')}
                 onClick={() => setActiveNumberId(n.id)}>
              {n.isDefault && <span className="default-mark">Default</span>}
              <div className="head">
                <div className="ic"><Icon name="message" size={14}/></div>
                <div className="lbl-block">
                  <div className="l1">
                    <span className={'wa-status-dot ' + n.status}/>
                    {n.label}
                  </div>
                  <div className="l2">{n.branch}</div>
                </div>
                <button className="btn ghost sm" style={{ padding: 4 }} onClick={(e) => { e.stopPropagation(); setShowSettings(n.id); }}>
                  <Icon name="settings" size={12}/>
                </button>
              </div>
              <div className="compact-sub">{n.phone}</div>
              <div className="rate-bar">
                <div className={'r ' + rateClass} style={{ width: ratePct + '%' }}/>
              </div>
              <div className="compact-foot">
                <span className="rt">{n.rateLimit.used}/{n.rateLimit.limit} · {n.queueDepth} antri</span>
                {hr && <HRAvatar hr={hr} size={16}/>}
              </div>
            </div>
          );
        })}

        <div className="wa-num add" onClick={() => setShowConnect(true)}>
          <div style={{ textAlign: 'center' }}>
            <div style={{ width: 30, height: 30, borderRadius: 99, background: 'var(--surface-2)', display: 'grid', placeItems: 'center', margin: '0 auto 6px' }}>
              <Icon name="plus" size={15}/>
            </div>
            <div style={{ fontWeight: 700, color: 'var(--ink-2)', fontSize: 12.5 }}>Tambah</div>
          </div>
        </div>
      </div>

      {/* Conversation panel for active number — fills remaining height */}
      <div className="wa-shell">
        <div className="wa-list">
          <div className="list-head" style={{ padding: '11px 14px', borderBottom: '1px solid var(--border)' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 8 }}>
              <span className={'wa-status-dot ' + activeNumber.status}/>
              <span style={{ fontWeight: 700, fontSize: 13 }}>{activeNumber.label}</span>
              <span style={{ color: 'var(--muted)', fontWeight: 500, fontSize: 11.5, fontFamily: 'var(--font-mono)', marginLeft: 'auto' }}>{activeNumber.phone}</span>
            </div>
            <input className="input" placeholder="Cari percakapan…" style={{ fontSize: 12.5, padding: '6px 10px' }}
                   value={query} onChange={(e) => setQuery(e.target.value)}/>
          </div>
          {listCandidates.length === 0 && (
            <div style={{ padding: '20px 14px', fontSize: 12.5, color: 'var(--muted)', textAlign: 'center', lineHeight: 1.5 }}>
              {query.trim() ? 'Tidak ada percakapan cocok.' : 'Belum ada percakapan.\nPesan terkirim & balasan kandidat akan muncul di sini.'}
            </div>
          )}
          {listCandidates.map(c => {
            const isActive = active?.id === c.id;
            const last = c.last || {};
            return (
              <div key={c.id} className={'item ' + (isActive ? 'active' : '')} onClick={() => { setActiveId(c.id); setTakingOver(false); setDraft(''); }}>
                <Avatar name={c.name}/>
                <div className="meta">
                  <div className="nm">
                    {c.name}
                    {last.createdAt && <span className="t">{waTime(last.createdAt)}</span>}
                  </div>
                  <div className="last">
                    {(last.direction === 'outbound' ? '↗ ' : '') + (last.voice ? '🎤 Voice note' : (last.content || ''))}
                  </div>
                </div>
              </div>
            );
          })}
        </div>

        {!active && (
          <div className="wa-thread" style={{ display: 'grid', placeItems: 'center', color: 'var(--muted)', textAlign: 'center', padding: 40 }}>
            <div>
              <Icon name="message" size={28}/>
              <div style={{ fontWeight: 700, color: 'var(--ink-2)', marginTop: 10 }}>Belum ada percakapan</div>
              <div style={{ fontSize: 13, marginTop: 6, maxWidth: 340, lineHeight: 1.55 }}>
                Kirim pesan ke kandidat (mis. lewat <b>Tes Chat</b> di pengaturan nomor, undangan import, atau <b>Kirim WA</b> di drawer kandidat). Pesan terkirim & balasan kandidat akan muncul di sini.
              </div>
            </div>
          </div>
        )}
        {active && (
          <div className="wa-thread">
            <div className="wa-head">
              <Avatar name={active.name}/>
              <div style={{ flex: 1 }}>
                <div style={{ fontWeight: 700, fontSize: 13 }}>{active.name}</div>
                <div style={{ fontSize: 11, color: 'var(--muted)' }}>{active.phone} · via {activeNumber.label}</div>
              </div>
              <Btn size="sm" icon="user" onClick={() => openCandidate(active)}>Lihat profil</Btn>
              <Btn size="sm" icon="trash" onClick={deleteChat} title="Hapus seluruh percakapan ini">Hapus chat</Btn>
            </div>
            <div className="wa-msgs" ref={msgsRef}>
              {loadingThread && <div style={{ textAlign: 'center', color: 'var(--muted)', fontSize: 12, padding: 16 }}>Memuat percakapan…</div>}
              {!loadingThread && thread.length === 0 && (
                <div style={{ textAlign: 'center', color: 'var(--muted)', fontSize: 12.5, padding: '32px 16px' }}>
                  Belum ada percakapan dengan kandidat ini.<br/>Klik <b>Ambil alih chat</b> untuk mengirim pesan pertama.
                </div>
              )}
              {!loadingThread && thread.length > 0 && <div className="day-sep">Percakapan</div>}
              {thread.map((m) => {
                const out = m.direction === 'outbound';
                return (
                  <div key={m.id} className={'bubble ' + (out ? 'out' : 'in')}>
                    {m.voice ? (
                      <div className="vn">
                        <Icon name="play" size={14}/>
                        <div className="wave"/>
                        <span className="mono" style={{ fontSize: 10 }}>VN</span>
                      </div>
                    ) : (
                      <span style={{ whiteSpace: 'pre-wrap' }}>{m.content}</span>
                    )}
                    <span className="ts">{waTime(m.createdAt)}</span>
                    {m.transcript && (
                      <div style={{ borderTop: '1px solid oklch(0 0 0 / 0.07)', marginTop: 6, paddingTop: 6, fontStyle: 'italic', color: 'var(--muted)', fontSize: 11.5 }}>
                        <span style={{ fontWeight: 700, color: 'var(--ink-2)' }}>Transkrip AI:</span> "{m.transcript}"
                      </div>
                    )}
                    {/* AI description of an image / document the candidate sent. */}
                    {m.aiAnalysis?.imageDescription && (
                      <div style={{ borderTop: '1px solid oklch(0 0 0 / 0.07)', marginTop: 6, paddingTop: 6, fontStyle: 'italic', color: 'var(--muted)', fontSize: 11.5 }}>
                        <span style={{ fontWeight: 700, color: 'var(--ink-2)' }}>Deskripsi AI:</span> {m.aiAnalysis.imageDescription}
                      </div>
                    )}
                    {m.aiAnalysis?.documentText && (
                      <div style={{ borderTop: '1px solid oklch(0 0 0 / 0.07)', marginTop: 6, paddingTop: 6, color: 'var(--muted)', fontSize: 11.5, maxHeight: 120, overflow: 'auto' }}>
                        <span style={{ fontWeight: 700, color: 'var(--ink-2)' }}>Isi dokumen:</span> {String(m.aiAnalysis.documentText).slice(0, 400)}{String(m.aiAnalysis.documentText).length > 400 ? '…' : ''}
                      </div>
                    )}
                  </div>
                );
              })}
            </div>
            {sendError && (
              <div style={{ background: 'oklch(0.96 0.04 25)', borderTop: '1px solid oklch(0.78 0.12 25)', color: 'oklch(0.4 0.15 25)', padding: '6px 12px', fontSize: 12 }}>
                ⚠ {sendError}
                <button onClick={() => setSendError(null)} style={{ float: 'right', background: 'none', border: 'none', cursor: 'pointer', color: 'inherit' }}>✕</button>
              </div>
            )}
            <div className="wa-compose">
              {takingOver ? (
                <>
                  <input className="input" autoFocus value={draft} onChange={(e) => setDraft(e.target.value)}
                         onKeyDown={(e) => { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); sendTakeover(); } }}
                         placeholder="Ketik pesan untuk kandidat…" style={{ flex: 1, fontSize: 12.5 }} disabled={sending}/>
                  <Btn size="sm" kind="accent" icon="arrow" onClick={sendTakeover} disabled={sending || !draft.trim()}>{sending ? '…' : 'Kirim'}</Btn>
                  <Btn size="sm" onClick={() => { setTakingOver(false); setDraft(''); }}>Batal</Btn>
                </>
              ) : (
                <>
                  <Icon name="message" size={14}/>
                  <span className="pl">Bot sedang menangani percakapan ini.</span>
                  <Btn size="sm" onClick={() => setTakingOver(true)}>Ambil alih chat</Btn>
                </>
              )}
            </div>
          </div>
        )}
      </div>

      {showConnect && <ConnectWAModal onClose={() => setShowConnect(false)} reloadData={reloadData}/>}
      {showSettings && <NumberSettingsModal number={WA_NUMBERS.find(n => n.id === showSettings)} onClose={() => setShowSettings(null)} reloadData={reloadData}/>}
    </div>
  );
}

// ====== Connect new WA number modal ======
function ConnectWAModal({ onClose, reloadData }) {
  const [step, setStep] = useState(1);
  const [label, setLabel] = useState('');
  const [branch, setBranch] = useState('');
  const [assignedHr, setAssignedHr] = useState('');
  const [phone, setPhone] = useState('');
  const [saving, setSaving] = useState(false);
  const [numberId, setNumberId] = useState(null);
  const [session, setSession] = useState(null);

  // Create the number first (so it has an id), then move to the QR step.
  const createAndScan = async () => {
    setSaving(true);
    try {
      const created = await window.TalentirAPI.post('/api/wa-numbers', {
        label: label.trim(),
        phone: phone.trim() || '+62 8' + Math.floor(1000000000 + Math.random() * 8999999999),
        branch, assignedHr: assignedHr || null,
      });
      setNumberId(created.id);
      if (reloadData) await reloadData();
      setStep(2);
    } catch (err) { console.error('Gagal menghubungkan nomor:', err); }
    setSaving(false);
  };

  // While on the QR step, poll the live gateway session (written by the worker).
  useEffect(() => {
    if (step !== 2 || !numberId) return;
    let stop = false;
    // Auto-start the worker for the newly-created number.
    window.TalentirAPI.post('/api/wa-numbers/' + numberId + '/connect', {}).catch(() => {});
    const tick = async () => {
      try {
        const s = await window.TalentirAPI.get('/api/wa-numbers/' + numberId + '/session');
        if (stop) return;
        setSession(s);
        if (s.status === 'online' && reloadData) reloadData();
      } catch (e) { /* keep polling */ }
    };
    tick();
    const iv = setInterval(tick, 2500);
    return () => { stop = true; clearInterval(iv); };
  }, [step, numberId]);

  return (
    <div className="modal-scrim" onClick={onClose}>
      <div className="modal" style={{ width: 520 }} onClick={(e) => e.stopPropagation()}>
        <div className="modal-head">
          <h3 style={{ margin: 0, fontSize: 16, letterSpacing: '-0.01em' }}>Hubungkan Nomor WhatsApp Baru</h3>
          <div style={{ flex: 1 }}/>
          <button className="btn icon ghost" onClick={onClose}><Icon name="x" size={14}/></button>
        </div>
        <div className="modal-body">
          {step === 1 && (
            <>
              <div className="field">
                <label>Label nomor</label>
                <input className="input" placeholder="Mis. Cabang Bekasi" value={label} onChange={(e) => setLabel(e.target.value)}/>
                <span className="hint">Untuk memudahkan tim Anda mengenali nomor ini.</span>
              </div>
              <div className="field">
                <label>Cabang / unit</label>
                <input className="input" placeholder="Cabang Bekasi Pusat" value={branch} onChange={(e) => setBranch(e.target.value)}/>
              </div>
              <div className="field">
                <label>Nomor WhatsApp</label>
                <input className="input" placeholder="+62 812 3456 7890" value={phone} onChange={(e) => setPhone(e.target.value)}/>
              </div>
              <div className="field">
                <label>HR yang bertanggung jawab</label>
                <select className="select" value={assignedHr} onChange={(e) => setAssignedHr(e.target.value)}>
                  <option value="">Pilih HR…</option>
                  {window.TalentirData.HR_USERS.filter(h => !h.isOwner).map(h => (
                    <option key={h.id} value={h.id}>{h.name} — {h.branch}</option>
                  ))}
                </select>
              </div>
              <div className="ai-block">
                <div className="lbl"><Icon name="message" size={12}/>Tips operasional F&B</div>
                <div className="body" style={{ fontSize: 12.5 }}>
                  Disarankan <b>1 nomor per cabang</b> agar tidak terkena rate-limit WhatsApp ketika sedang bulk-broadcast undangan ke 100+ kandidat. Limit aman: 400–500 pesan/hari per nomor.
                </div>
              </div>
              <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
                <Btn kind="accent" icon="arrow" onClick={createAndScan} disabled={!label.trim() || saving}>{saving ? 'Menyimpan…' : 'Lanjut ke Scan QR'}</Btn>
              </div>
            </>
          )}
          {step === 2 && (() => {
            const st = session?.status;
            if (st === 'online') {
              return (
                <div style={{ textAlign: 'center', padding: '24px 0' }}>
                  <div style={{ width: 60, height: 60, borderRadius: 99, background: 'var(--good-2)', color: 'oklch(0.45 0.13 155)', display: 'grid', placeItems: 'center', margin: '0 auto 14px' }}>
                    <Icon name="check" size={26} stroke={2.4}/>
                  </div>
                  <div style={{ fontWeight: 800, fontSize: 17 }}>Nomor tersambung! 🎉</div>
                  <div style={{ fontSize: 12.5, color: 'var(--muted)', marginTop: 4 }}>Bot siap mengirim & menerima pesan untuk nomor ini.</div>
                  <div style={{ marginTop: 18 }}><Btn kind="accent" icon="check" onClick={onClose}>Selesai</Btn></div>
                </div>
              );
            }
            return (
              <>
                <div style={{ textAlign: 'center', padding: '4px 0 12px' }}>
                  <div style={{ fontWeight: 700, fontSize: 15, marginBottom: 4 }}>Scan QR dengan WhatsApp Anda</div>
                  <div style={{ fontSize: 12.5, color: 'var(--muted)' }}>WhatsApp di HP → Perangkat Tertaut → Tautkan Perangkat</div>
                </div>

                {session?.qrImage ? (
                  <div style={{ display: 'grid', placeItems: 'center' }}>
                    <img src={session.qrImage} alt="QR pairing WhatsApp" width={240} height={240} style={{ border: '1px solid var(--border)', borderRadius: 10, padding: 6, background: '#fff' }}/>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 12, fontSize: 12 }}>
                      <span className="wa-status-dot connecting"/>
                      <span style={{ color: 'var(--muted)' }}>Menunggu Anda memindai… QR diperbarui otomatis</span>
                    </div>
                  </div>
                ) : (
                  <div style={{ padding: '14px 14px', background: 'oklch(0.97 0.04 75)', border: '1px solid oklch(0.85 0.1 75)', borderRadius: 8, fontSize: 12.5, color: 'oklch(0.42 0.08 60)', lineHeight: 1.6 }}>
                    <b>Worker WhatsApp belum berjalan</b> untuk nomor ini, jadi belum ada QR. Jalankan perintah berikut di server (folder <code>backend/</code>), lalu QR akan muncul di sini otomatis:
                    <pre style={{ margin: '8px 0 0', padding: '8px 10px', background: 'var(--ink)', color: '#fff', borderRadius: 6, fontSize: 12, overflow: 'auto' }}>{session?.runCommand || ('WA_NUMBER_ID=' + (numberId || '<id>') + ' npm run wa')}</pre>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 10 }}>
                      <span className="wa-status-dot offline"/>
                      <span style={{ color: 'var(--muted)' }}>Menunggu worker tersambung…</span>
                    </div>
                  </div>
                )}

                <div style={{ marginTop: 16, padding: '10px 12px', background: 'var(--bg-soft)', border: '1px solid var(--border)', borderRadius: 8, fontSize: 12, color: 'var(--ink-2)', lineHeight: 1.55 }}>
                  <strong>Catatan:</strong> Integrasi ini memakai WhatsApp Web API tidak resmi (Baileys). Pakai nomor perusahaan (bukan pribadi) & jaga rate limit (±400–500 pesan/hari/nomor).
                </div>

                <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 14 }}>
                  <button className="btn ghost sm" onClick={() => setStep(1)}><Icon name="arrowL" size={12}/>Kembali</button>
                  <Btn onClick={onClose}>Tutup</Btn>
                </div>
              </>
            );
          })()}
        </div>
      </div>
    </div>
  );
}

// Reusable QR pairing panel — polls the live gateway session for a number and
// shows the QR (or a "run the worker" hint, or a connected state).
function WaQrPairing({ numberId, onConnected }) {
  const [session, setSession] = useState(null);
  useEffect(() => {
    if (!numberId) return;
    let stop = false;
    // Auto-start the worker for this number so the QR appears without any command.
    window.TalentirAPI.post('/api/wa-numbers/' + numberId + '/connect', {}).catch(() => {});
    const tick = async () => {
      try {
        const s = await window.TalentirAPI.get('/api/wa-numbers/' + numberId + '/session');
        if (stop) return;
        setSession(s);
        if (s.status === 'online' && onConnected) onConnected();
      } catch (e) { /* keep polling */ }
    };
    tick();
    const iv = setInterval(tick, 2500);
    return () => { stop = true; clearInterval(iv); };
  }, [numberId]);

  if (session?.status === 'online') {
    return (
      <div style={{ textAlign: 'center', padding: '18px 0', border: '1px solid var(--border)', borderRadius: 10, marginTop: 10 }}>
        <div style={{ width: 52, height: 52, borderRadius: 99, background: 'var(--good-2)', color: 'oklch(0.45 0.13 155)', display: 'grid', placeItems: 'center', margin: '0 auto 10px' }}>
          <Icon name="check" size={24} stroke={2.4}/>
        </div>
        <div style={{ fontWeight: 800 }}>Nomor tersambung! 🎉</div>
        <div style={{ fontSize: 12, color: 'var(--muted)', marginTop: 3 }}>Bot siap mengirim & menerima pesan.</div>
      </div>
    );
  }
  return (
    <div style={{ marginTop: 10, border: '1px solid var(--border)', borderRadius: 10, padding: 14 }}>
      <div style={{ textAlign: 'center', fontSize: 12.5, color: 'var(--muted)', marginBottom: 10 }}>
        WhatsApp di HP → <b style={{ color: 'var(--ink-2)' }}>Perangkat Tertaut</b> → Tautkan Perangkat
      </div>
      {session?.qrImage ? (
        <div style={{ display: 'grid', placeItems: 'center' }}>
          <img src={session.qrImage} alt="QR pairing WhatsApp" width={220} height={220} style={{ border: '1px solid var(--border)', borderRadius: 10, padding: 6, background: '#fff' }}/>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 10, fontSize: 12 }}>
            <span className="wa-status-dot connecting"/>
            <span style={{ color: 'var(--muted)' }}>Menunggu Anda memindai… QR diperbarui otomatis</span>
          </div>
        </div>
      ) : (
        <div style={{ padding: '10px 12px', background: 'oklch(0.97 0.04 75)', border: '1px solid oklch(0.85 0.1 75)', borderRadius: 8, fontSize: 12.5, color: 'oklch(0.42 0.08 60)', lineHeight: 1.6 }}>
          <b>Worker WhatsApp belum berjalan</b> untuk nomor ini, jadi belum ada QR. Jalankan perintah ini di server (folder <code>backend/</code>) — QR akan muncul di sini otomatis:
          <pre style={{ margin: '8px 0 0', padding: '8px 10px', background: 'var(--ink)', color: '#fff', borderRadius: 6, fontSize: 12, overflow: 'auto' }}>{session?.runCommand || ('WA_NUMBER_ID=' + numberId + ' npm run wa')}</pre>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 8 }}>
            <span className="wa-status-dot offline"/><span style={{ color: 'var(--muted)' }}>Menunggu worker tersambung…</span>
          </div>
        </div>
      )}
    </div>
  );
}

// ====== Number settings modal ======
function NumberSettingsModal({ number, onClose, reloadData }) {
  const { HR_USERS, JOBS } = window.TalentirData;
  const hr = HR_USERS.find(h => h.id === number.assignedHR);
  const linkedJobs = JOBS.filter(j => number.assignedJobs.includes(j.id));
  const [busy, setBusy] = useState(false);
  const [showQr, setShowQr] = useState(false);
  const [testTo, setTestTo] = useState('081973379008');
  const [testMsg, setTestMsg] = useState('Halo! Ini pesan tes dari Talentir Bot ✅');
  const [testState, setTestState] = useState('');
  const sendTest = async () => {
    if (!testTo.trim()) return;
    setTestState('sending');
    try {
      await window.TalentirAPI.post('/api/wa-numbers/' + number.id + '/test-send', { to: testTo.trim(), content: testMsg });
      setTestState('sent'); setTimeout(() => setTestState(''), 3500);
    } catch (e) { console.error('Gagal kirim tes:', e); setTestState('error'); setTimeout(() => setTestState(''), 3500); }
  };

  const toggleConnection = async () => {
    setBusy(true);
    try {
      // Online → disconnect: stop the worker + clear the session.
      await window.TalentirAPI.post('/api/wa-numbers/' + number.id + '/disconnect', {});
      if (reloadData) await reloadData();
      onClose();
    } catch (err) { console.error('Gagal memutus koneksi nomor:', err); setBusy(false); }
  };

  const delNumber = async () => {
    if (!window.confirm(`Hapus nomor "${number.label}"? Sesi & antrian pesan tertunda akan ikut terhapus. Riwayat chat yang sudah terkirim tetap tersimpan.`)) return;
    setBusy(true);
    try {
      await fetch(window.TalentirAPI.base + '/api/wa-numbers/' + number.id, { method: 'DELETE', credentials: 'include' });
      if (reloadData) await reloadData();
      onClose();
    } catch (err) { console.error('Gagal menghapus nomor:', err); setBusy(false); }
  };

  const [picking, setPicking] = useState(false);
  const [linking, setLinking] = useState(false);
  const patchNumber = async (patch) => {
    try {
      await window.TalentirAPI.patch('/api/wa-numbers/' + number.id, patch);
      if (reloadData) await reloadData();
    } catch (err) { console.error('Gagal memperbarui nomor:', err); }
  };
  const changeHr = (hrId) => { setPicking(false); if (hrId) patchNumber({ assignedHr: hrId }); };
  const linkJob = (jobId) => { setLinking(false); if (jobId) patchNumber({ assignedJobs: [...number.assignedJobs, jobId] }); };
  const unlinkJob = (jobId) => patchNumber({ assignedJobs: number.assignedJobs.filter(x => x !== jobId) });
  const unlinkedJobs = JOBS.filter(j => !number.assignedJobs.includes(j.id));

  return (
    <div className="modal-scrim" onClick={onClose}>
      <div className="modal" style={{ width: 560 }} onClick={(e) => e.stopPropagation()}>
        <div className="modal-head">
          <div className="row-flex" style={{ flex: 1 }}>
            <div style={{ width: 32, height: 32, borderRadius: 7, background: 'var(--wa-2)', color: 'var(--wa)', display: 'grid', placeItems: 'center' }}>
              <Icon name="message" size={15}/>
            </div>
            <div>
              <h3 style={{ margin: 0, fontSize: 15 }}>{number.label}</h3>
              <div className="mono" style={{ fontSize: 12, color: 'var(--muted)' }}>{number.phone}</div>
            </div>
          </div>
          <button className="btn icon ghost" onClick={onClose}><Icon name="x" size={14}/></button>
        </div>
        <div className="modal-body">
          <div className="row-flex" style={{ padding: 12, background: 'var(--bg-soft)', border: '1px solid var(--border)', borderRadius: 8 }}>
            <span className={'wa-status-dot ' + number.status}/>
            <strong style={{ flex: 1, fontSize: 13 }}>
              {number.status === 'online' ? 'Online' : number.status === 'connecting' ? 'Menghubungkan…' : 'Offline'}
            </strong>
            {number.status === 'online'
              ? <Btn size="sm" onClick={toggleConnection} disabled={busy}>{busy ? '…' : 'Disconnect'}</Btn>
              : <Btn size="sm" kind="accent" icon="message" onClick={() => setShowQr(v => !v)}>{showQr ? 'Tutup QR' : 'Hubungkan (Scan QR)'}</Btn>}
          </div>
          {showQr && number.status !== 'online' && (
            <WaQrPairing numberId={number.id} onConnected={() => { if (reloadData) reloadData(); }}/>
          )}

          <div className="field">
            <label>Tes Chat <span style={{ color: 'var(--muted)', fontWeight: 500 }}>— kirim pesan percobaan</span></label>
            <div className="row-flex" style={{ gap: 6 }}>
              <input className="input" style={{ width: 160 }} placeholder="+62 812…" value={testTo} onChange={(e) => setTestTo(e.target.value)}/>
              <input className="input" style={{ flex: 1 }} value={testMsg} onChange={(e) => setTestMsg(e.target.value)}/>
              <Btn size="sm" kind="accent" icon="arrow" onClick={sendTest} disabled={testState === 'sending' || !testTo.trim()}>{testState === 'sending' ? '…' : 'Kirim'}</Btn>
            </div>
            {testState === 'sent' && <span className="hint" style={{ color: 'oklch(0.5 0.13 155)' }}>✓ Pesan tes diantrekan{number.status === 'online' ? ' — cek WhatsApp tujuan.' : ' (akan terkirim otomatis saat nomor online).'}</span>}
            {testState === 'error' && <span className="hint" style={{ color: 'oklch(0.55 0.16 25)' }}>Gagal mengirim. Coba lagi.</span>}
            {number.status !== 'online' && testState === '' && <span className="hint">⚠️ Nomor belum online — pesan diantrekan & dikirim setelah tersambung.</span>}
          </div>

          <div className="field">
            <label>HR yang bertanggung jawab</label>
            <div className="row-flex" style={{ padding: '8px 12px', border: '1px solid var(--border)', borderRadius: 7, background: 'var(--surface)' }}>
              <HRAvatar hr={hr} size={26}/>
              {picking ? (
                <select className="select" autoFocus defaultValue={number.assignedHR || ''} onChange={(e) => changeHr(e.target.value)} style={{ flex: 1 }}>
                  <option value="">Pilih HR…</option>
                  {HR_USERS.map(h => <option key={h.id} value={h.id}>{h.name} — {h.branch}</option>)}
                </select>
              ) : (
                <>
                  <div style={{ flex: 1 }}>
                    <div style={{ fontWeight: 700, fontSize: 13 }}>{hr ? hr.name : 'Belum ada'}</div>
                    <div style={{ fontSize: 11, color: 'var(--muted)' }}>{hr ? `${hr.role} · ${hr.branch}` : '—'}</div>
                  </div>
                  <button className="btn ghost sm" onClick={() => setPicking(true)}>Ganti</button>
                </>
              )}
            </div>
          </div>

          <div className="field">
            <label>Lowongan yang menggunakan nomor ini</label>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
              {linkedJobs.length === 0 && (
                <div style={{ fontSize: 12.5, color: 'var(--muted)', padding: 12, border: '1px dashed var(--border)', borderRadius: 7, textAlign: 'center' }}>
                  Belum ada lowongan yang menggunakan nomor ini.
                </div>
              )}
              {linkedJobs.map(j => (
                <div key={j.id} className="row-flex" style={{ padding: '8px 12px', border: '1px solid var(--border)', borderRadius: 7, background: 'var(--surface)' }}>
                  <Icon name="briefcase" size={14}/>
                  <span style={{ flex: 1, fontSize: 13, fontWeight: 600 }}>{j.title}</span>
                  <Badge>{j.dept}</Badge>
                  <button className="btn ghost sm" style={{ padding: 4 }} onClick={() => unlinkJob(j.id)}><Icon name="x" size={12}/></button>
                </div>
              ))}
              {linking ? (
                <select className="select" autoFocus defaultValue="" onChange={(e) => linkJob(e.target.value)}>
                  <option value="">Pilih lowongan…</option>
                  {unlinkedJobs.map(j => <option key={j.id} value={j.id}>{j.title}</option>)}
                </select>
              ) : (
                <Btn size="sm" icon="plus" style={{ alignSelf: 'flex-start' }} onClick={() => setLinking(true)} disabled={unlinkedJobs.length === 0}>Tautkan lowongan</Btn>
              )}
            </div>
          </div>

          <div className="card card-pad" style={{ background: 'var(--bg-soft)' }}>
            <div className="section-title" style={{ marginBottom: 10 }}>Aktivitas hari ini</div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12 }}>
              <div>
                <div className="mono" style={{ fontSize: 22, fontWeight: 800, letterSpacing: '-0.02em' }}>{number.msgToday}</div>
                <div style={{ fontSize: 10.5, color: 'var(--muted)', textTransform: 'uppercase', letterSpacing: '0.06em', fontWeight: 700 }}>Pesan terkirim</div>
              </div>
              <div>
                <div className="mono" style={{ fontSize: 22, fontWeight: 800, letterSpacing: '-0.02em' }}>{number.queueDepth}</div>
                <div style={{ fontSize: 10.5, color: 'var(--muted)', textTransform: 'uppercase', letterSpacing: '0.06em', fontWeight: 700 }}>Dalam antrian</div>
              </div>
              <div>
                <div className="mono" style={{ fontSize: 22, fontWeight: 800, letterSpacing: '-0.02em' }}>{Math.round((number.rateLimit.used / number.rateLimit.limit) * 100)}%</div>
                <div style={{ fontSize: 10.5, color: 'var(--muted)', textTransform: 'uppercase', letterSpacing: '0.06em', fontWeight: 700 }}>Kuota harian</div>
              </div>
            </div>
            <div className="rate-bar" style={{ marginTop: 10 }}>
              <div style={{ width: ((number.rateLimit.used / number.rateLimit.limit) * 100) + '%' }}/>
            </div>
          </div>
        </div>
        <div className="modal-foot">
          <Btn icon="trash" onClick={delNumber} disabled={busy} style={{ color: 'oklch(0.55 0.18 25)' }}>Hapus Nomor</Btn>
          <div style={{ flex: 1 }}/>
          <Btn onClick={onClose}>Tutup</Btn>
        </div>
      </div>
    </div>
  );
}

window.WhatsAppView = WhatsAppView;