import { useConsole } from "../context";
import { Card, Bar, DataList } from "../components/ui";

export default function SkillsSection() {
  const ctx = useConsole();
  return (
    <Card id="nav-skills" title="技能与 MCP">
      <div className="muted">反映宿主租户 home，容器内 home 可能不同；重载只在 schema 枚举里，当前 pin 的二进制拒绝时原样 502；OAuth 只发起登录，不代表登录完成。</div>
      <Bar>
        <button onClick={ctx.refreshSkills}>刷新</button>
        <span className="muted">{ctx.skillMsg}</span>
      </Bar>
      <h3>技能</h3>
      {ctx.skillError ? <div className="muted">{ctx.skillError}</div>
        : <DataList empty="暂无技能" items={ctx.skills.map((x, i) => <span key={i} className="row-main">{x.name || x.id || ""}{x.description ? " - " + x.description : ""}{x.detail ? " - " + x.detail : ""}</span>)} />}
      <h3>应用</h3>
      <DataList empty="暂无应用" items={ctx.apps.map((x, i) => <span key={i} className="row-main">{x.name || x.id || ""}{x.description ? " - " + x.description : ""}</span>)} />
      <h3>MCP 服务</h3>
      <DataList empty="暂无 MCP 服务" items={ctx.mcpServers.map((x, i) => {
        const det = x.detail || x.details || x.state || "";
        return <span key={i} className="row-main">{x.name || x.id || ""} | 状态 {x.status || ""}{det ? " | " + det : ""}</span>;
      })} />
    </Card>
  );
}