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

export default function EnvSection() {
  const ctx = useConsole();
  const [name, setName] = useState("");
  const [branch, setBranch] = useState("");
  const [executor, setExecutor] = useState("");
  return (
    <Card id="nav-env" title={<>环境 <span className="muted">（选、建、管：当前项目的基准检出）</span></>}>
      <Bar>
        <button onClick={ctx.refreshEnvs}>刷新</button>
        <span className="muted">{ctx.envCount}</span>
      </Bar>
      {ctx.envs.length === 0 ? <div className="muted">先选项目</div> : (
        <DataListRaw>
          {ctx.envs.map((e) => (
            <li key={e.id}>
              <span className="row-main">
                {e.name}（{shortId(e.id)}） / 分支 {e.branch || "默认分支"} / 执行器 {e.executor || "不限"} / 状态 {e.status}
                {e.status === "failed" && e.error_text ? " / 失败原因：" + e.error_text : ""}
              </span>
              {e.status === "archived" ? null : <button onClick={() => void ctx.archiveEnv(e.id)}>归档</button>}
            </li>
          ))}
        </DataListRaw>
      )}
      <Bar>
        <input type="text" placeholder="新环境名" value={name} onChange={(e) => setName(e.target.value)} />
        <input type="text" placeholder="分支（可选，空=默认分支）" value={branch} onChange={(e) => setBranch(e.target.value)} />
        <select aria-label="新环境执行器" value={executor} onChange={(e) => setExecutor(e.target.value)}>
          <option value="">执行器：不限</option><option value="local">local</option><option value="docker">docker</option>
        </select>
        <button onClick={async () => { await ctx.createEnv(name, branch, executor); setName(""); setBranch(""); }}>新建环境</button>
      </Bar>
      <span className="muted">{ctx.envMsg}</span>
    </Card>
  );
}