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

// Right-panel context for the Skills view: MCP reload + OAuth initiate.
// Previously embedded in the skills card; the centre now stays the lists.
export default function SkillsToolsPanel() {
  const ctx = useConsole();
  const [oauthName, setOauthName] = useState("");
  return (
    <Card title="MCP 操作">
      <Bar>
        <button onClick={ctx.reloadMcp}>重载配置</button>
        <span className="muted">{ctx.mcpMsg}</span>
      </Bar>
      <Bar>
        <input type="text" placeholder="MCP 服务名" value={oauthName} onChange={(e) => setOauthName(e.target.value)} />
        <button onClick={() => void ctx.mcpOauth(oauthName)}>发起 OAuth 登录</button>
        <span className="muted">{ctx.mcpOauthMsg}</span>
      </Bar>
      {ctx.mcpOauthBox ? <pre>{ctx.mcpOauthBox}</pre> : null}
    </Card>
  );
}