/* 業務OS — スキル tab (skill library with cards + detail) */

function SkillsTab() {
  const D = window.GYOMU;
  const [catFilter, setCatFilter] = useState('all');
  const [selected, setSelected] = useState(null);

  const cats = ['all', ...Array.from(new Set(D.skills.map(s => s.cat)))];
  const catLabels = { all: 'すべて', '営業': '営業', 'レポート': 'レポート', 'バックオフィス': 'バックオフィス' };

  let skills = catFilter === 'all' ? D.skills : D.skills.filter(s => s.cat === catFilter);
  const sel = D.skills.find(s => s.id === selected);

  return (
    <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
      <div style={{ flex: 1, overflowY: 'auto', padding: 16 }}>
        <div style={{ marginBottom: 14 }}>
          <div style={{ fontSize: 18, fontWeight: 600, color: 'var(--text-0)', letterSpacing: '-.01em', marginBottom: 4 }}>スキルライブラリ</div>
          <div style={{ fontSize: 11, color: 'var(--text-2)' }}>標準化された業務プロセス — トリガーに応じて自動 or 手動で実行</div>
        </div>

        <div style={{ display: 'flex', gap: 6, marginBottom: 14 }}>
          {cats.map(c => <FilterChip key={c} label={catLabels[c] || c} active={catFilter === c} onClick={() => setCatFilter(c)} />)}
          <div style={{ flex: 1 }} />
          <span style={{ fontSize: 10, color: 'var(--text-3)', alignSelf: 'center', fontFamily: 'var(--font-mono)' }}>{skills.length} スキル</span>
        </div>

        {/* Skill cards grid */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))', gap: 10 }}>
          {skills.map(skill => (
            <SkillCard key={skill.id} skill={skill} selected={selected === skill.id}
              onClick={() => setSelected(selected === skill.id ? null : skill.id)} />
          ))}
        </div>
      </div>

      {/* Detail panel */}
      {sel && (
        <div style={{ borderTop: '2px solid var(--accent)', padding: '14px 16px', background: 'var(--surface)', flexShrink: 0 }}>
          <div style={{ display: 'flex', gap: 20 }}>
            <div style={{ flex: 1 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 6 }}>
                <div style={{ width: 28, height: 28, borderRadius: 6, background: 'var(--accent-soft)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                  <Icon name={sel.icon} size={14} style={{ color: 'var(--accent)' }} />
                </div>
                <div>
                  <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--text-0)' }}>{sel.name}</div>
                  <div style={{ fontSize: 10, color: 'var(--text-3)', fontFamily: 'var(--font-mono)' }}>{sel.nameEn}</div>
                </div>
                <ModeBadge mode={sel.mode} label={{ ai: 'AI実行', approve: '人承認', collaborate: '協業' }[sel.mode]} />
              </div>
              <div style={{ fontSize: 11, color: 'var(--text-2)', lineHeight: 1.6 }}>{sel.desc}</div>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '8px 16px', alignContent: 'start', flexShrink: 0 }}>
              <SkillStat label="トリガー" value={sel.trigger} />
              <SkillStat label="所要時間" value={sel.time} />
              <SkillStat label="自動化率" value={sel.auto + ' %'} mono />
              <SkillStat label="実行回数" value={sel.uses + ' 回'} mono />
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 6, flexShrink: 0, justifyContent: 'center' }}>
              <Btn primary><Icon name="play" size={12} style={{ color: '#fff' }} />手動実行</Btn>
              <Btn><Icon name="pencil" size={12} />編集</Btn>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

function SkillCard({ skill, selected, onClick }) {
  const [h, setH] = useState(false);
  const autoColor = skill.auto >= 90 ? 'var(--success)' : skill.auto >= 70 ? 'var(--info)' : 'var(--warning)';
  return (
    <div onClick={onClick} onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}
      style={{
        background: selected ? 'var(--accent-soft)' : h ? 'var(--surface-hover)' : 'var(--surface)',
        border: '1px solid ' + (selected ? 'var(--accent)' : h ? 'var(--border)' : 'var(--border-subtle)'),
        boxShadow: selected ? 'var(--glow-accent)' : 'none',
        borderRadius: 6, padding: '12px 14px', cursor: 'pointer', transition: 'all .12s',
      }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 6 }}>
        <div style={{ width: 24, height: 24, borderRadius: 4, background: 'var(--bg-3)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
          <Icon name={skill.icon} size={13} style={{ color: 'var(--text-2)' }} />
        </div>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ fontSize: 12, fontWeight: 600, color: 'var(--text-0)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{skill.name}</div>
          <div style={{ fontSize: 9, color: 'var(--text-3)', fontFamily: 'var(--font-mono)' }}>{skill.nameEn}</div>
        </div>
        <ModeBadge mode={skill.mode} label={{ ai: 'AI実行', approve: '人承認', collaborate: '協業' }[skill.mode]} />
      </div>
      <div style={{ fontSize: 10, color: 'var(--text-2)', lineHeight: 1.5, marginBottom: 8, display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical', overflow: 'hidden' }}>{skill.desc}</div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
        <span style={{ fontSize: 9, fontWeight: 600, padding: '2px 6px', borderRadius: 3, background: 'var(--bg-3)', color: 'var(--text-2)' }}>{skill.cat}</span>
        <span style={{ fontSize: 9, color: 'var(--text-3)' }}>{skill.trigger}</span>
        <div style={{ flex: 1 }} />
        {/* Auto bar */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
          <div style={{ width: 40, height: 4, borderRadius: 2, background: 'var(--bg-3)', overflow: 'hidden' }}>
            <div style={{ width: skill.auto + '%', height: '100%', borderRadius: 2, background: autoColor, transition: 'width .3s' }} />
          </div>
          <span style={{ fontFamily: 'var(--font-mono)', fontSize: 9, fontWeight: 600, color: autoColor }}>{skill.auto} %</span>
        </div>
      </div>
    </div>
  );
}

function SkillStat({ label, value, mono }) {
  return (
    <div>
      <div style={{ fontSize: 9, fontWeight: 600, letterSpacing: '.06em', textTransform: 'uppercase', color: 'var(--text-3)', marginBottom: 2 }}>{label}</div>
      <div style={{ fontSize: 11, fontWeight: 500, color: 'var(--text-0)', fontFamily: mono ? 'var(--font-mono)' : undefined }}>{value}</div>
    </div>
  );
}

Object.assign(window, { SkillsTab, SkillCard, SkillStat });