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

// Right-panel context for the Environments view: repo binding + counts.
// Previously embedded in the environment card; the centre now stays the
// environment list/create.
export default function EnvContextPanel() {
  const ctx = useConsole();
  const [repoSelect, setRepoSelect] = useState("");
  return (
    <Card title="仓库与环境上下文">
      <div className="muted">{ctx.envRepoLine || "先选项目"}</div>
      <div className="muted">{ctx.envCount}</div>
      {ctx.envRepoBar ? (
        <Bar>
          <select aria-label="补仓库" value={repoSelect} onChange={(e) => setRepoSelect(e.target.value)}>
            <option value="">（从 GitHub App 安装仓库里选）</option>
            {ctx.githubRepos.map((r) => <option key={r.clone_url} value={r.clone_url}>{r.repo_full_name}</option>)}
          </select>
          <button onClick={() => void ctx.saveEnvRepo(repoSelect)}>保存仓库</button>
        </Bar>
      ) : null}
      <span className="muted">{ctx.envRepoMsg}</span>
    </Card>
  );
}