import { useState } from 'react';

export function Skills() {
  const [extraDir, setExtraDir] = useState('~/.opencode/skills');
  const [activeTab, setActiveTab] = useState<'all' | 'available' | 'installed'>('all');

  return (
    <div>
      <div className="flex justify-between items-center mb-2">
        <h1 className="text-2xl font-bold text-gray-900">技能</h1>
        <button className="text-sm text-gray-400">加载中...</button>
      </div>
      <p className="text-sm text-gray-500 mb-6">
        技能为 Agent 扩展专业知识和工作流程。它们是从本地包、技能目录和你配置的额外目录中发现的 SKILL.md 文件。满足所有依赖条件的技能会自动处于可用状态。
      </p>

      <div className="bg-gray-50 rounded-xl p-5 mb-6">
        <h2 className="text-sm font-bold text-gray-900 mb-1">额外技能目录</h2>
        <p className="text-xs text-gray-500 mb-3">包含 SKILL.md 文件的额外目录。保存到 Gateway 配置的 skills.load.extraDirs 中。</p>
        <div className="flex gap-2">
          <input
            type="text"
            value={extraDir}
            onChange={(e) => setExtraDir(e.target.value)}
            className="flex-1 bg-white border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-orange-500"
          />
          <button className="bg-orange-500 text-white text-sm rounded-lg px-4 py-2 hover:bg-orange-600">添加</button>
        </div>
      </div>

      <div className="flex gap-2 mb-4">
        {(['all', 'available', 'installed'] as const).map((tab) => (
          <button
            key={tab}
            onClick={() => setActiveTab(tab)}
            className={`text-xs px-3 py-1 rounded-full ${
              activeTab === tab ? 'bg-orange-500 text-white' : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
            }`}
          >
            {tab === 'all' ? '全部 (0)' : tab === 'available' ? '可用 (0)' : '已安装 (0)'}
          </button>
        ))}
      </div>

      <div className="bg-gray-50 rounded-xl p-8 text-center">
        <p className="text-sm text-gray-400">暂无技能</p>
        <p className="text-xs text-gray-300 mt-1">连接 Gateway 后将自动加载技能列表</p>
      </div>
    </div>
  );
}
