// Tim HR view — workload + per-HR pipeline

function TeamView({ candidates, openCandidate, go, reloadData }) {
  const { HR_USERS, JOBS, STATUSES } = window.TalentirData;
  const [selectedHR, setSelectedHR] = useState(null);
  const [showInvite, setShowInvite] = useState(false);

  // Calculate workload per HR
  const workload = useMemo(() => {
    const map = {};
    HR_USERS.forEach(h => {
      map[h.id] = {
        total: 0,
        baru: 0,
        ai: 0,
        wawancara: 0,
        diterima: 0,
        ditolak: 0,
        avgScore: 0,
        byStatus: {},
      };
    });
    candidates.forEach(c => {
      if (!c.assignedTo || !map[c.assignedTo]) return;
      const w = map[c.assignedTo];
      w.total++;
      if (w[c.status] !== undefined) w[c.status]++;
      w.byStatus[c.status] = (w.byStatus[c.status] || 0) + 1;
      w.avgScore += c.score;
    });
    Object.values(map).forEach(w => { w.avgScore = w.total ? Math.round(w.avgScore / w.total) : 0; });
    return map;
  }, [candidates, HR_USERS]);

  const unassignedCount = candidates.filter(c => !c.assignedTo).length;

  if (selectedHR) {
    return <HRDetailView hrId={selectedHR} candidates={candidates} onBack={() => setSelectedHR(null)} openCandidate={openCandidate} reloadData={reloadData}/>;
  }

  return (
    <div className="view">
      <div className="view-head">
        <div>
          <div className="title">Tim HR</div>
          <div className="subtitle">Pantau workload tiap HR, atur penugasan, dan lihat pipeline mereka. Cocok untuk operasional F&B multi-cabang.</div>
        </div>
        <div className="row-flex">
          <Btn icon="plus" size="sm" kind="accent" onClick={() => setShowInvite(true)}>Undang HR baru</Btn>
        </div>
      </div>

      {showInvite && <InviteHRModal onClose={() => setShowInvite(false)} reloadData={reloadData}/>}

      {/* Workload summary */}
      <div className="stats" style={{ marginBottom: 18 }}>
        <div className="card stat-card">
          <div className="lbl"><Icon name="users" size={12}/>Total HR aktif</div>
          <div className="val tnum">{HR_USERS.filter(h => !h.isOwner).length}</div>
          <div className="delta">di {new Set(HR_USERS.filter(h=>!h.isOwner).map(h => h.branch)).size} cabang</div>
        </div>
        <div className="card stat-card">
          <div className="lbl"><Icon name="briefcase" size={12}/>Total ditugaskan</div>
          <div className="val tnum">{candidates.length - unassignedCount}</div>
          <div className="delta">{Math.round(((candidates.length - unassignedCount) / candidates.length) * 100)}% dari semua kandidat</div>
        </div>
        <div className="card stat-card">
          <div className="lbl"><Icon name="flag" size={12}/>Belum dibagi</div>
          <div className="val tnum" style={{ color: unassignedCount > 0 ? 'oklch(0.6 0.18 25)' : 'var(--ink)' }}>{unassignedCount}</div>
          <div className="delta">{unassignedCount > 0 ? 'perlu dibagikan' : 'semua sudah dibagi'}</div>
        </div>
        <div className="card stat-card">
          <div className="lbl"><Icon name="clock" size={12}/>Avg. workload / HR</div>
          <div className="val tnum">{Math.round((candidates.length - unassignedCount) / Math.max(1, HR_USERS.filter(h => !h.isOwner).length))}</div>
          <div className="delta">kandidat aktif per orang</div>
        </div>
      </div>

      {/* HR cards grid */}
      <div className="section-title" style={{ marginBottom: 12 }}>Workload per HR</div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(360px, 1fr))', gap: 12 }}>
        {HR_USERS.map(hr => {
          const w = workload[hr.id] || { total: 0, byStatus: {}, avgScore: 0, baru: 0, ai: 0, wawancara: 0, diterima: 0, ditolak: 0 };
          const max = Math.max(1, ...Object.values(workload).map(x => x.total));
          const loadPct = (w.total / max) * 100;
          return (
            <div key={hr.id} className="card" style={{ padding: 0, overflow: 'hidden', cursor: 'pointer' }} onClick={() => setSelectedHR(hr.id)}>
              <div style={{ padding: 16, display: 'flex', gap: 12, alignItems: 'center' }}>
                <div style={{ position: 'relative' }}>
                  <HRAvatar hr={hr} size={42}/>
                  <span className={'online-dot ' + (hr.online ? '' : 'off')} style={{ position: 'absolute', bottom: 0, right: 0 }}/>
                </div>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                    <strong style={{ fontSize: 14, letterSpacing: '-0.01em' }}>{hr.name}</strong>
                    {hr.isOwner && <Badge kind="accent" style={{ fontSize: 10 }}>Owner</Badge>}
                  </div>
                  <div style={{ fontSize: 12, color: 'var(--muted)' }}>{hr.role} · {hr.branch}</div>
                </div>
                <div style={{ textAlign: 'right' }}>
                  <div className="mono" style={{ fontSize: 22, fontWeight: 800, letterSpacing: '-0.02em', lineHeight: 1 }}>{w.total}</div>
                  <div style={{ fontSize: 10, color: 'var(--muted)', textTransform: 'uppercase', letterSpacing: '0.06em', fontWeight: 700 }}>kandidat</div>
                </div>
              </div>

              {/* Workload bar */}
              <div style={{ padding: '0 16px 14px' }}>
                <div style={{ height: 6, background: 'var(--surface-2)', borderRadius: 99, overflow: 'hidden', display: 'flex' }}>
                  {STATUSES.map(s => {
                    const ct = w.byStatus[s.id] || 0;
                    if (ct === 0) return null;
                    return <div key={s.id} title={`${s.name}: ${ct}`} style={{ width: (ct / max) * 100 + '%', background: s.color, transition: 'width .2s' }}/>;
                  })}
                </div>
                <div style={{ display: 'flex', gap: 10, marginTop: 10, fontSize: 11.5, flexWrap: 'wrap' }}>
                  {STATUSES.filter(s => w.byStatus[s.id]).map(s => (
                    <div key={s.id} style={{ display: 'flex', alignItems: 'center', gap: 5, color: 'var(--ink-2)' }}>
                      <span style={{ width: 6, height: 6, borderRadius: 99, background: s.color }}/>
                      <span style={{ fontWeight: 600 }}>{w.byStatus[s.id]}</span>
                      <span style={{ color: 'var(--muted)' }}>{s.name}</span>
                    </div>
                  ))}
                </div>
              </div>

              <div style={{ display: 'flex', padding: '10px 16px', borderTop: '1px solid var(--border)', background: 'var(--bg-soft)' }}>
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 10, color: 'var(--muted)', textTransform: 'uppercase', letterSpacing: '0.06em', fontWeight: 700 }}>Avg. skor</div>
                  <div className="mono" style={{ fontWeight: 700, fontSize: 13 }}>{w.avgScore || '—'}</div>
                </div>
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 10, color: 'var(--muted)', textTransform: 'uppercase', letterSpacing: '0.06em', fontWeight: 700 }}>Status</div>
                  <div style={{ fontWeight: 600, fontSize: 12.5, display: 'flex', alignItems: 'center', gap: 5 }}>
                    <span className={'online-dot ' + (hr.online ? '' : 'off')} style={{ width: 6, height: 6, boxShadow: 'none' }}/>
                    {hr.online ? 'Online' : 'Offline'}
                  </div>
                </div>
                <button className="btn ghost sm" onClick={(e) => { e.stopPropagation(); setSelectedHR(hr.id); }}>
                  Lihat pipeline <Icon name="chevron" size={11}/>
                </button>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

// ====== Per-HR detail view ======
function HRDetailView({ hrId, candidates, onBack, openCandidate, reloadData }) {
  const { HR_USERS, STATUSES, JOBS } = window.TalentirData;
  const hr = HR_USERS.find(h => h.id === hrId);
  const myCands = candidates.filter(c => c.assignedTo === hrId);

  const removeHR = async () => {
    if (!window.confirm(`Hapus ${hr.name} dari tim? Kandidatnya jadi "Belum dibagi".`)) return;
    try {
      await fetch(window.TalentirAPI.base + '/api/hr/' + hr.id, { method: 'DELETE', credentials: 'include' });
      if (reloadData) await reloadData();
      onBack();
    } catch (e) { console.error('Gagal menghapus HR:', e); }
  };

  return (
    <div className="view">
      <div style={{ marginBottom: 12 }}>
        <button className="btn ghost sm" onClick={onBack}>
          <Icon name="arrowL" size={12}/> Semua HR
        </button>
      </div>
      <div className="view-head">
        <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
          <HRAvatar hr={hr} size={56}/>
          <div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
              <span className={'online-dot ' + (hr.online ? '' : 'off')}/>
              <span style={{ fontSize: 12, color: 'var(--muted)', fontWeight: 600 }}>{hr.online ? 'Online sekarang' : 'Offline'}</span>
            </div>
            <div className="title" style={{ marginTop: 2 }}>{hr.name}</div>
            <div className="subtitle">{hr.role} · {hr.branch}</div>
          </div>
        </div>
        <div className="row-flex">
          <Btn icon="message" size="sm" kind="wa">Chat di WhatsApp</Btn>
          {!hr.isOwner && <Btn icon="trash" size="sm" onClick={removeHR}>Hapus HR</Btn>}
        </div>
      </div>

      {/* Mini stats */}
      <div className="stats" style={{ marginBottom: 18 }}>
        <div className="card stat-card">
          <div className="lbl">Total ditugaskan</div>
          <div className="val tnum">{myCands.length}</div>
        </div>
        <div className="card stat-card">
          <div className="lbl">Skor rata-rata</div>
          <div className="val tnum">{myCands.length ? Math.round(myCands.reduce((s,c) => s+c.score, 0) / myCands.length) : '—'}</div>
        </div>
        <div className="card stat-card">
          <div className="lbl">Wawancara aktif</div>
          <div className="val tnum">{myCands.filter(c => c.status === 'wawancara-hr' || c.status === 'wawancara-user').length}</div>
        </div>
        <div className="card stat-card">
          <div className="lbl">Diterima minggu ini</div>
          <div className="val tnum" style={{ color: 'oklch(0.45 0.13 155)' }}>{myCands.filter(c => c.status === 'diterima').length}</div>
        </div>
      </div>

      {/* Mini Kanban */}
      <div className="section-title" style={{ marginBottom: 12 }}>Pipeline kandidat</div>
      {myCands.length === 0 ? (
        <div className="card empty" style={{ padding: 40 }}>
          <Icon name="users" size={28}/>
          <div style={{ fontWeight: 700, marginTop: 10, color: 'var(--ink)' }}>Belum ada kandidat ditugaskan</div>
          <div style={{ marginTop: 4 }}>Buka pipeline lowongan dan bagikan kandidat ke {hr.name.split(' ')[0]}.</div>
        </div>
      ) : (
        <div className="kanban">
          {STATUSES.map(s => {
            const items = myCands.filter(c => c.status === s.id).sort((a,b) => b.score - a.score);
            return (
              <div key={s.id} className="kcol">
                <div className="kcol-head">
                  <span className="swatch" style={{ background: s.color }}/>
                  <span className="name">{s.name}</span>
                  <span className="ct mono">{items.length}</span>
                </div>
                <div className="kcol-body">
                  {items.map(c => {
                    const job = JOBS.find(j => j.id === c.jobId);
                    return (
                      <div key={c.id} className="kcard" onClick={() => openCandidate(c)}>
                        <div className="row">
                          <Avatar name={c.name} size="sm"/>
                          <div style={{ minWidth: 0, flex: 1 }}>
                            <div className="name">{c.name}</div>
                            <div className="sub">{job?.title}</div>
                          </div>
                          <ScoreNumber value={c.score} size={15}/>
                        </div>
                        <ScoreBar value={c.score}/>
                        <div className="tags">
                          <Source src={c.source}/>
                          <Badge>{c.location}</Badge>
                        </div>
                      </div>
                    );
                  })}
                  {items.length === 0 && <div className="empty" style={{ padding: '24px 8px' }}>Kosong</div>}
                </div>
              </div>
            );
          })}
        </div>
      )}

      <div className="ai-block" style={{ marginTop: 18 }}>
        <div className="lbl"><Icon name="sparkles" size={12}/>Saran AI untuk {hr.name.split(' ')[0]}</div>
        <div className="body">
          {(() => {
            const ivCount = myCands.filter(c => c.status === 'wawancara-hr' || c.status === 'wawancara-user').length;
            return ivCount > 3;
          })()
            ? `Wawancara aktif ${myCands.filter(c => c.status === 'wawancara-hr' || c.status === 'wawancara-user').length} kandidat — mungkin terlalu padat minggu ini. Pertimbangkan distribusi ulang ke HR cabang lain.`
            : myCands.filter(c => c.score >= 80 && c.status === 'baru' || c.status === 'ai').length > 0
            ? `Ada ${myCands.filter(c => c.score >= 80 && (c.status === 'baru' || c.status === 'ai')).length} kandidat skor tinggi yang belum diundang wawancara. Direkomendasikan kontak hari ini.`
            : 'Workload terlihat sehat. Lanjutkan pace yang sama.'}
        </div>
      </div>
    </div>
  );
}

// ====== Invite HR modal ======
function InviteHRModal({ onClose, reloadData }) {
  const [f, setF] = useState({ name: '', email: '', role: 'Recruiter', branch: '' });
  const [saving, setSaving] = useState(false);
  const [done, setDone] = useState(null); // { email, emailMode }
  const set = (k) => (e) => setF(s => ({ ...s, [k]: e.target.value }));
  const emailValid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(f.email.trim());

  const save = async () => {
    if (!f.name.trim() || !emailValid) return;
    setSaving(true);
    try {
      const r = await window.TalentirAPI.post('/api/hr', { name: f.name.trim(), email: f.email.trim(), role: f.role, branch: f.branch || null });
      if (reloadData) await reloadData();
      setDone({ email: r.email, emailMode: r.emailMode, emailSent: r.emailSent });
    } catch (e) { console.error('Gagal undang HR:', e); setSaving(false); }
  };

  return (
    <div className="modal-scrim" onClick={onClose}>
      <div className="modal" style={{ width: 440 }} onClick={(e) => e.stopPropagation()}>
        <div className="modal-head">
          <h3 style={{ margin: 0, fontSize: 16 }}>Undang HR baru</h3>
          <div style={{ flex: 1 }}/>
          <button className="btn icon ghost" onClick={onClose}><Icon name="x" size={14}/></button>
        </div>
        {done ? (
          <>
            <div className="modal-body col-flex" style={{ gap: 10, textAlign: 'center', padding: '24px 18px' }}>
              <div style={{ width: 56, height: 56, borderRadius: 99, background: 'var(--good-2)', color: 'oklch(0.45 0.13 155)', display: 'grid', placeItems: 'center', margin: '0 auto' }}>
                <Icon name="check" size={26} stroke={2.4}/>
              </div>
              <div style={{ fontWeight: 800, fontSize: 16 }}>Undangan terkirim 🎉</div>
              <div style={{ fontSize: 13, color: 'var(--ink-2)', lineHeight: 1.5 }}>
                <b>{done.email}</b> diundang & diberi akses ke perusahaan ini. Mereka tinggal login dengan email + password sementara yang dikirim ke inbox-nya.
              </div>
              {done.emailMode === 'dev' && (
                <div style={{ fontSize: 11.5, color: 'var(--warn, oklch(0.55 0.13 60))', background: 'oklch(0.97 0.04 75)', border: '1px solid oklch(0.85 0.1 75)', borderRadius: 8, padding: '8px 10px' }}>
                  ⚠️ Email belum benar-benar terkirim (SMTP belum dikonfigurasi). Isi/credential undangan tercetak di log server. Set SMTP di .env untuk kirim sungguhan.
                </div>
              )}
            </div>
            <div className="modal-foot"><Btn kind="accent" icon="check" onClick={onClose}>Selesai</Btn></div>
          </>
        ) : (
          <>
            <div className="modal-body col-flex" style={{ gap: 12 }}>
              <div className="field"><label>Nama lengkap</label><input className="input" value={f.name} onChange={set('name')} placeholder="Nama HR"/></div>
              <div className="field"><label>Email <span style={{ color: 'var(--muted)', fontWeight: 500 }}>— untuk login & undangan</span></label>
                <input className="input" type="email" value={f.email} onChange={set('email')} placeholder="hr@perusahaan.com"/>
              </div>
              <div className="field"><label>Peran</label>
                <select className="select" value={f.role} onChange={set('role')}>
                  <option>Recruiter</option><option>HR Lead</option><option>Head of People</option>
                </select>
              </div>
              <div className="field"><label>Cabang / unit</label><input className="input" value={f.branch} onChange={set('branch')} placeholder="Cabang Bandung"/></div>
              <span className="hint">HR akan menerima email berisi link login + password sementara, dan langsung punya akses ke perusahaan yang aktif.</span>
            </div>
            <div className="modal-foot">
              <Btn onClick={onClose}>Batal</Btn>
              <Btn kind="accent" icon="check" onClick={save} disabled={saving || !f.name.trim() || !emailValid}>{saving ? 'Mengundang…' : 'Kirim Undangan'}</Btn>
            </div>
          </>
        )}
      </div>
    </div>
  );
}

window.TeamView = TeamView;