// arcai-screen-a07.jsx — A07 Set Goals & Targets

function LevelSelectorChip({ level, active, onClick }) {
  const [hover, setHover] = React.useState(false);
  return (
    <button
      onClick={onClick}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        width: 28, height: 28, borderRadius: 8,
        background: active ? 'var(--accent-overlay-mid)' : (hover ? 'var(--surface-2)' : 'var(--bg-soft)'),
        border: `1px solid ${active ? 'var(--accent)' : 'var(--border)'}`,
        color: active ? 'var(--accent)' : 'var(--text-muted)',
        fontFamily: 'var(--font-mono)', fontSize: 11, fontWeight: 700,
        cursor: 'pointer', padding: 0,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        transition: 'all 0.15s',
        boxShadow: active ? '0 0 0 2px var(--accent-overlay-soft)' : 'none',
      }}
    >L{level}</button>
  );
}

function GapPill({ gap }) {
  const color = gap <= 0 ? 'var(--success)' : (gap <= 1 ? 'var(--warn)' : 'var(--danger)');
  const bg = gap <= 0 ? 'rgba(123,237,111,0.12)' : (gap <= 1 ? 'rgba(255,196,0,0.12)' : 'rgba(255,75,145,0.12)');
  const sign = gap > 0 ? '+' : '';
  return (
    <span style={{
      background: bg, color, fontFamily: 'var(--font-mono)', fontWeight: 700,
      fontSize: 12, padding: '4px 10px', borderRadius: 999,
      display: 'inline-flex', alignItems: 'center', gap: 4,
    }}>
      {gap <= 0 ? '✓' : (gap <= 1 ? '↑' : '↑↑')} {sign}{gap.toFixed(1)}
    </span>
  );
}

function DatePill({ value }) {
  const [hover, setHover] = React.useState(false);
  return (
    <button
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        background: hover ? 'var(--surface-2)' : 'var(--bg-soft)',
        border: '1px solid var(--border)',
        color: 'var(--text-muted)',
        fontSize: 12, fontWeight: 600, fontFamily: 'var(--font-body)',
        padding: '5px 10px', borderRadius: 8, cursor: 'pointer',
        display: 'inline-flex', alignItems: 'center', gap: 6,
        transition: 'all 0.15s',
      }}
    >
      <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
      {value}
    </button>
  );
}

function ScreenA07({ onNavigate }) {
  const [rows, setRows] = React.useState([
    { role: 'Marketing',   current: 2.1, headcount: 24, target: 3, deadline: '30 Sep 2026' },
    { role: 'Engineering', current: 3.4, headcount: 18, target: 4, deadline: '30 Sep 2026' },
    { role: 'Sales',       current: 1.8, headcount: 32, target: 2, deadline: '30 Sep 2026' },
    { role: 'Finance',     current: 2.0, headcount: 14, target: 3, deadline: '30 Sep 2026' },
    { role: 'HR',          current: 2.3, headcount: 10, target: 2, deadline: '30 Sep 2026' },
    { role: 'Operations',  current: 1.5, headcount: 20, target: 2, deadline: '30 Sep 2026' },
    { role: 'Product',     current: 3.2, headcount: 12, target: 4, deadline: '30 Sep 2026' },
    { role: 'Design',      current: 2.8, headcount:  8, target: 3, deadline: '30 Sep 2026' },
  ]);
  const [saved, setSaved] = React.useState(false);

  const setTarget = (idx, lvl) => {
    setRows(r => r.map((row, i) => i === idx ? { ...row, target: lvl } : row));
  };

  const handleSave = () => {
    setSaved(true);
    setTimeout(() => setSaved(false), 2000);
  };

  const customKpis = [
    { name: 'Karyawan dengan ≥1 sertifikasi Q3', target: '120 orang', current: 78, currentLabel: '78 / 120', pct: 0.65 },
    { name: '% manager dengan tim avg level ≥ target', target: '75%', current: 52, currentLabel: '52%', pct: 0.69 },
    { name: 'Avg lessons completed/week per karyawan', target: '3 lessons', current: 2.1, currentLabel: '2.1 lessons', pct: 0.70 },
  ];

  const orgStats = [
    { label: 'Target Avg Level Org', value: '3.0', sub: 'naik dari 2.4' },
    { label: 'Deadline', value: '30 Sep', sub: 'Q3 · 2026' },
    { label: 'On-track', value: '38%', sub: '/ 60% benchmark' },
    { label: 'Days remaining', value: '156', sub: 'hari kerja' },
  ];

  return (
    <div style={{ display: 'flex', height: '100%', overflow: 'hidden' }}>
      <SidebarNav active="goals" onNavigate={onNavigate} />
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
        <TopBar title="Goals & Targets" subtitle="PT Acme · Active control" />
        <div style={{ flex: 1, overflowY: 'auto', padding: '24px 28px' }}>

          {/* Header card */}
          <div style={{ background: 'var(--surface-1)', border: '1px solid var(--border)', borderRadius: 16, padding: '20px 22px', marginBottom: 20, display: 'flex', alignItems: 'center', gap: 16 }}>
            <div style={{ flex: 1 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 4 }}>
                <div style={{ fontFamily: 'var(--font-display)', fontSize: 22, fontWeight: 700, color: 'var(--text)', letterSpacing: '-0.02em' }}>Goals & Targets</div>
                <span style={{ background: 'rgba(123,237,111,0.12)', color: 'var(--success)', padding: '3px 10px', borderRadius: 999, fontSize: 11, fontWeight: 700, fontFamily: 'var(--font-mono)', letterSpacing: '0.04em', display: 'inline-flex', alignItems: 'center', gap: 5 }}>
                  <span style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--success)', boxShadow: '0 0 6px var(--success)' }} />
                  AKTIF SEJAK Q1 2026
                </span>
              </div>
              <div style={{ fontSize: 13, color: 'var(--text-muted)' }}>Tetapkan target kompetensi AI per role · deadline kuartalan</div>
            </div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, position: 'relative' }}>
              {saved && (
                <span style={{
                  position: 'absolute', right: 0, top: -28,
                  background: 'rgba(123,237,111,0.18)', color: 'var(--success)',
                  fontSize: 11, fontWeight: 700, fontFamily: 'var(--font-mono)',
                  padding: '4px 10px', borderRadius: 999,
                  border: '1px solid rgba(123,237,111,0.35)',
                  animation: 'fadein 0.2s ease-out',
                }}>✓ Tersimpan & dikirim ke manager</span>
              )}
              <BtnGhost small>Reset ke default</BtnGhost>
              <BtnPrimary size="sm" onClick={handleSave}>Simpan & Terapkan</BtnPrimary>
            </div>
          </div>

          {/* Org stats row */}
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16, marginBottom: 20 }}>
            {orgStats.map(s => (
              <div key={s.label} style={{ background: 'var(--surface-1)', border: '1px solid var(--border)', borderRadius: 16, padding: '18px 20px' }}>
                <div style={{ fontSize: 10, color: 'var(--text-muted)', fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', marginBottom: 8 }}>{s.label}</div>
                <div style={{ fontFamily: 'var(--font-display)', fontSize: 32, fontWeight: 700, color: 'var(--text)', letterSpacing: '-0.03em', lineHeight: 1 }}>{s.value}</div>
                <div style={{ fontSize: 11, color: 'var(--text-dim)', marginTop: 6, fontFamily: 'var(--font-mono)' }}>{s.sub}</div>
              </div>
            ))}
          </div>

          {/* Role × Target Level matrix */}
          <div style={{ background: 'var(--surface-1)', border: '1px solid var(--border)', borderRadius: 16, overflow: 'hidden', marginBottom: 20 }}>
            <div style={{ padding: '16px 20px', borderBottom: '1px solid var(--border)', display: 'flex', alignItems: 'center', gap: 10 }}>
              <div style={{ fontSize: 14, fontWeight: 700, color: 'var(--text)' }}>Target Level per Role</div>
              <span style={{ fontSize: 11, color: 'var(--text-dim)', fontFamily: 'var(--font-mono)' }}>{rows.length} departemen · klik L1–L5 untuk ubah</span>
              <div style={{ marginLeft: 'auto', display: 'flex', gap: 12, fontSize: 11, color: 'var(--text-muted)' }}>
                <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5 }}><span style={{ width: 8, height: 8, borderRadius: 2, background: 'var(--success)' }} />di target</span>
                <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5 }}><span style={{ width: 8, height: 8, borderRadius: 2, background: 'var(--warn)' }} />gap kecil</span>
                <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5 }}><span style={{ width: 8, height: 8, borderRadius: 2, background: 'var(--danger)' }} />gap besar</span>
              </div>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: '1.2fr 100px 100px 1.4fr 140px 110px', gap: 0, padding: '12px 20px', borderBottom: '1px solid var(--border)', background: 'var(--bg-soft)' }}>
              {['ROLE', 'CURRENT', 'HEADCOUNT', 'TARGET LEVEL', 'DEADLINE', 'GAP'].map(h => (
                <div key={h} style={{ fontSize: 10, fontWeight: 700, color: 'var(--text-dim)', letterSpacing: '0.08em', textTransform: 'uppercase' }}>{h}</div>
              ))}
            </div>
            {rows.map((row, i) => {
              const gap = row.target - row.current;
              return (
                <div key={row.role} style={{
                  display: 'grid', gridTemplateColumns: '1.2fr 100px 100px 1.4fr 140px 110px',
                  gap: 0, padding: '0 20px', height: 60, alignItems: 'center',
                  borderBottom: i < rows.length - 1 ? '1px solid var(--border)' : 'none',
                }}>
                  <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--text)' }}>{row.role}</div>
                  <div style={{ fontSize: 13, color: 'var(--text-muted)', fontFamily: 'var(--font-mono)' }}>{row.current.toFixed(1)}</div>
                  <div style={{ fontSize: 13, color: 'var(--text-muted)', fontFamily: 'var(--font-mono)' }}>{row.headcount}</div>
                  <div style={{ display: 'flex', gap: 6 }}>
                    {[1,2,3,4,5].map(lvl => (
                      <LevelSelectorChip key={lvl} level={lvl} active={row.target === lvl} onClick={() => setTarget(i, lvl)} />
                    ))}
                  </div>
                  <DatePill value={row.deadline} />
                  <GapPill gap={gap} />
                </div>
              );
            })}
          </div>

          {/* Custom KPI section */}
          <div style={{ background: 'var(--surface-1)', border: '1px solid var(--border)', borderRadius: 16, padding: '20px', marginBottom: 16 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 4 }}>
              <div style={{ fontSize: 14, fontWeight: 700, color: 'var(--text)' }}>KPI Custom</div>
              <span style={{ fontSize: 11, color: 'var(--text-dim)', fontFamily: 'var(--font-mono)' }}>3 metrik aktif</span>
            </div>
            <div style={{ fontSize: 12, color: 'var(--text-muted)', marginBottom: 16 }}>Metrik tambahan untuk dipantau di samping target level kompetensi</div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 140px 140px 1fr', gap: 0, padding: '10px 14px', background: 'var(--bg-soft)', borderRadius: 10, border: '1px solid var(--border)', marginBottom: 8 }}>
              {['NAMA KPI', 'TARGET', 'CURRENT', 'PROGRESS'].map(h => (
                <div key={h} style={{ fontSize: 10, fontWeight: 700, color: 'var(--text-dim)', letterSpacing: '0.08em', textTransform: 'uppercase' }}>{h}</div>
              ))}
            </div>
            {customKpis.map((k, i) => (
              <div key={i} style={{
                display: 'grid', gridTemplateColumns: '1fr 140px 140px 1fr', gap: 12,
                padding: '14px', alignItems: 'center',
                borderBottom: '1px solid var(--border)',
              }}>
                <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--text)' }}>{k.name}</div>
                <div style={{ fontSize: 12, color: 'var(--text-muted)', fontFamily: 'var(--font-mono)' }}>{k.target}</div>
                <div style={{ fontSize: 12, color: 'var(--accent)', fontFamily: 'var(--font-mono)', fontWeight: 700 }}>{k.currentLabel}</div>
                <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                  <div style={{ flex: 1 }}>
                    <ProgressBar value={k.pct * 100} max={100} height={5} />
                  </div>
                  <span style={{ fontSize: 11, color: 'var(--text-muted)', fontFamily: 'var(--font-mono)', width: 32, textAlign: 'right' }}>{Math.round(k.pct * 100)}%</span>
                </div>
              </div>
            ))}
            <button style={{
              width: '100%', marginTop: 10, padding: '14px',
              background: 'transparent',
              border: '1px dashed var(--border-strong, var(--border))',
              borderRadius: 10, color: 'var(--text-muted)',
              fontFamily: 'var(--font-body)', fontSize: 13, fontWeight: 600,
              cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
              transition: 'all 0.15s',
            }}
            onMouseEnter={e => { e.currentTarget.style.borderColor = 'var(--accent)'; e.currentTarget.style.color = 'var(--accent)'; }}
            onMouseLeave={e => { e.currentTarget.style.borderColor = 'var(--border)'; e.currentTarget.style.color = 'var(--text-muted)'; }}
            >
              <span style={{ fontSize: 16, lineHeight: 1 }}>+</span> Tambah KPI custom
            </button>
          </div>

          {/* Footer note */}
          <div style={{ fontSize: 12, color: 'var(--text-dim)', fontStyle: 'italic', textAlign: 'center', padding: '12px 0 8px' }}>
            Perubahan target akan dikomunikasikan ke manager via email + in-app notifikasi.
          </div>

        </div>
      </div>
    </div>
  );
}

Object.assign(window, { ScreenA07 });