/* Competency Library screen */
const CompetenciesScreen = () => {
  const byGroup = (g) => COMPETENCIES.filter(c => {
    if (g === 'Core') return c.group === 'Core';
    if (g === 'Leadership') return c.group === 'Leadership';
    if (g === 'Digital') return c.group === 'Digital';
    if (g === 'Customer Orientation') return c.group === 'Customer Orientation';
    if (g === 'Operational Excellence') return c.group === 'Operational Excellence';
    if (g === 'Change Management') return c.group === 'Change Management';
    return false;
  });

  const [activeGroup, setActiveGroup] = React.useState('Core');
  const list = activeGroup === 'All' ? COMPETENCIES : COMPETENCIES.filter(c => {
    if (activeGroup === 'Core') return c.group === 'Core';
    if (activeGroup === 'Leadership') return c.group === 'Leadership';
    return c.group === activeGroup;
  });

  return (
    <div className="fade-in">
      <div className="page-header">
        <div>
          <h1>Competency Library</h1>
          <div className="subtitle">Behavioral framework that powers every evaluation across Pulse360.</div>
        </div>
        <div className="page-actions">
          <button className="btn btn-secondary"><Icon name="download" size={15}/> Export framework</button>
          <button className="btn btn-primary"><Icon name="plus" size={15}/> Add Competency</button>
        </div>
      </div>

      {/* Group selector */}
      <div className="grid" style={{ gridTemplateColumns: 'repeat(7, 1fr)', marginBottom: 22, gap: 10 }}>
        {COMP_GROUPS.map(g => {
          const count = g.name.startsWith('Core') ? byGroup('Core').length
                      : g.name.startsWith('Leadership') ? byGroup('Leadership').length
                      : g.name.startsWith('Digital') ? byGroup('Digital').length
                      : g.name.startsWith('Customer') ? byGroup('Customer Orientation').length
                      : g.name.startsWith('Operational') ? byGroup('Operational Excellence').length
                      : g.name.startsWith('Change') ? byGroup('Change Management').length
                      : 0;
          const short = g.name.replace(' Competencies', '').replace('Department-Specific', 'Department');
          const isActive = activeGroup.toLowerCase() === short.toLowerCase() || (activeGroup === 'Customer Orientation' && short === 'Customer Orientation');
          return (
            <button key={g.name} onClick={() => setActiveGroup(short === 'Department' ? 'Department-Specific' : short)} className="card" style={{
              padding: 14, textAlign: 'left', cursor: 'pointer',
              border: isActive ? '1.5px solid var(--primary-500)' : '1px solid var(--border)',
              background: isActive ? 'linear-gradient(180deg, var(--primary-50), white)' : 'var(--surface)',
              transition: 'all 0.15s'
            }}>
              <div className={`stat-icon ${g.tint}`} style={{ width: 32, height: 32, marginBottom: 10 }}>
                <Icon name={g.icon} size={15}/>
              </div>
              <div style={{ fontSize: 12.5, fontWeight: 700, color: 'var(--ink-900)', lineHeight: 1.3 }}>{short}</div>
              <div style={{ fontSize: 11, color: 'var(--ink-500)', marginTop: 4 }}>{count} competencies</div>
            </button>
          );
        })}
      </div>

      <div className="grid grid-3">
        {list.map(c => {
          const trendUp = c.trend.startsWith('+');
          const trendFlat = c.trend === '0.0';
          return (
            <div key={c.name} className="card" style={{ padding: 18 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 12 }}>
                <div className={`stat-icon ${c.group === 'Leadership' ? 'tint-violet' : c.group === 'Digital' ? 'tint-sky' : c.group === 'Customer Orientation' ? 'tint-mint' : 'tint-indigo'}`} style={{ width: 38, height: 38, marginBottom: 0 }}>
                  <Icon name="competency" size={17}/>
                </div>
                <div style={{ textAlign: 'right' }}>
                  <div style={{ fontSize: 22, fontWeight: 700, color: 'var(--ink-900)', fontVariantNumeric: 'tabular-nums' }}>{c.score.toFixed(1)}</div>
                  <div style={{ fontSize: 10.5, color: 'var(--ink-500)', textTransform: 'uppercase', letterSpacing: '0.04em' }}>Avg score</div>
                </div>
              </div>
              <div style={{ fontSize: 14.5, fontWeight: 700, color: 'var(--ink-900)' }}>{c.name}</div>
              <div style={{ fontSize: 12, color: 'var(--ink-500)', marginTop: 4, lineHeight: 1.5, minHeight: 36 }}>{c.desc}</div>

              <div style={{ display: 'flex', gap: 12, marginTop: 14, fontSize: 11.5, color: 'var(--ink-600)' }}>
                <div><Icon name="message" size={12} style={{ verticalAlign: -2 }}/> {6 + Math.floor(Math.random() * 8)} questions</div>
                <div><Icon name="template" size={12} style={{ verticalAlign: -2 }}/> {2 + Math.floor(Math.random() * 5)} templates</div>
              </div>

              <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginTop: 14, paddingTop: 12, borderTop: '1px solid var(--border)' }}>
                <Sparkline values={[3.5, 3.6, 3.4, 3.7, 3.9, 4.0, c.score]} color={trendUp ? '#10B981' : trendFlat ? '#94A3B8' : '#EF4444'}/>
                <div className={`badge ${trendUp ? 'badge-active' : trendFlat ? 'badge-soft' : 'badge-danger'}`} style={{ marginLeft: 'auto' }}>
                  <span className="dot"></span>{trendUp ? <Icon name="arrow_up" size={10}/> : trendFlat ? '—' : <Icon name="arrow_down" size={10}/>}{c.trend}
                </div>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
};

window.CompetenciesScreen = CompetenciesScreen;