// AI Search view

function SearchView({ openCandidate }) {
  const { CANDIDATES, JOBS } = window.TalentirData;
  const [q, setQ] = useState('');
  const [active, setActive] = useState('Saya butuh desainer grafis dengan pengalaman Adobe Illustrator');
  const [thinking, setThinking] = useState(false);
  const [results, setResults] = useState([]);

  // Server-side AI ranking via POST /api/search.
  useEffect(() => {
    if (!active) { setResults([]); return; }
    let cancelled = false;
    setThinking(true);
    window.TalentirAPI
      .post('/api/search', { query: active, limit: 7 })
      .then(res => {
        if (cancelled) return;
        const mapped = (res.results || []).map(r => {
          const c = window.TalentirAPI.mapCandidate(r);
          return { c, job: JOBS.find(j => j.id === c.jobId), relevance: r.relevance };
        });
        setResults(mapped);
      })
      .catch(err => { if (!cancelled) { console.error('Gagal pencarian AI:', err); setResults([]); } })
      .finally(() => { if (!cancelled) setThinking(false); });
    return () => { cancelled = true; };
  }, [active]);

  const submit = () => { if (q.trim()) { setActive(q); setQ(''); } };

  const examples = [
    'Saya butuh desainer grafis dengan pengalaman Adobe Illustrator',
    'Customer service skor di atas 85 yang aktif di WhatsApp',
    'Kandidat admin di Jakarta yang siap mulai segera',
    'Sales fresh graduate dengan kemampuan komunikasi bahasa Inggris',
  ];

  return (
    <div className="view">
      <div className="view-head">
        <div>
          <div className="title">Pencarian AI</div>
          <div className="subtitle">Cari kandidat dengan bahasa natural. AI akan menjelajahi seluruh database pelamar, riwayat chat, dan jawaban form.</div>
        </div>
      </div>

      <div className="ai-search">
        <div className="prompt">
          <Icon name="sparkles" size={20} style={{ color: 'var(--accent)' }}/>
          <input placeholder='Cobalah: "Saya butuh designer dengan pengalaman 3 tahun…"'
                 value={q} onChange={e => setQ(e.target.value)}
                 onKeyDown={e => e.key === 'Enter' && submit()}/>
          <Btn kind="accent" icon="arrow" onClick={submit}>Tanya AI</Btn>
        </div>
        <div className="suggest">
          {examples.map(ex => <span key={ex} className="chip" onClick={() => setActive(ex)}>{ex}</span>)}
        </div>
      </div>

      {active && (
        <div style={{ marginTop: 22 }}>
          <div className="row-flex" style={{ marginBottom: 12 }}>
            <Icon name="search" size={14}/>
            <span style={{ color: 'var(--muted)' }}>Hasil untuk:</span>
            <strong style={{ flex: 1 }}>"{active}"</strong>
            {thinking && <Badge kind="accent"><Icon name="sparkles" size={10}/>AI sedang berpikir…</Badge>}
          </div>

          {!thinking && (
            <div className="ai-block" style={{ marginBottom: 14 }}>
              <div className="lbl"><Icon name="sparkles" size={12}/>Ringkasan AI</div>
              <div className="body">
                Saya menemukan <b>{results.length} kandidat relevan</b> di seluruh database (dari {window.TalentirData.CANDIDATES.length} total).
                Hasil diurutkan berdasarkan kombinasi: kecocokan skill (40%), skor lamaran sebelumnya (30%), dan responsivitas (30%).
                Rekomendasi top 3 sudah saya tandai.
              </div>
            </div>
          )}

          <div className="card" style={{ overflow: 'hidden' }}>
            <table className="tbl">
              <thead>
                <tr>
                  <th style={{ width: '32%' }}>Kandidat</th>
                  <th>Posisi & alasan match</th>
                  <th style={{ width: 110 }}>Sumber</th>
                  <th style={{ width: 110 }}>Status</th>
                  <th style={{ width: 130 }}>Relevansi AI</th>
                </tr>
              </thead>
              <tbody>
                {results.map((r, i) => (
                  <tr key={r.c.id} style={{ cursor: 'pointer' }} onClick={() => openCandidate(r.c)}>
                    <td>
                      <div className="row-flex">
                        {i < 3 && <Badge kind="accent" style={{ padding: '1px 6px' }}><Icon name="star" size={10}/></Badge>}
                        <Avatar name={r.c.name}/>
                        <div>
                          <div style={{ fontWeight: 700 }}>{r.c.name}</div>
                          <div style={{ fontSize: 11.5, color: 'var(--muted)' }}>{r.c.location} · {r.c.experience} · skor lamaran {r.c.score}</div>
                        </div>
                      </div>
                    </td>
                    <td>
                      <div style={{ fontSize: 13 }}>{r.job?.title}</div>
                      <div style={{ fontSize: 11.5, color: 'var(--muted)', marginTop: 2 }}>
                        Match: {r.c.tags.slice(0,2).join(', ')}{r.c.hasWA && ', aktif WA'}
                      </div>
                    </td>
                    <td><Source src={r.c.source}/></td>
                    <td><StatusBadge status={r.c.status}/></td>
                    <td>
                      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                        <span className="mono" style={{ fontWeight: 700, fontSize: 13, width: 26, color: 'var(--accent-ink)' }}>{Math.round(r.relevance)}%</span>
                        <div style={{ flex: 1, height: 4, background: 'var(--surface-2)', borderRadius: 99, overflow: 'hidden' }}>
                          <div style={{ width: r.relevance + '%', height: '100%', background: 'var(--accent)' }}/>
                        </div>
                      </div>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      )}
    </div>
  );
}

window.SearchView = SearchView;