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

// Left sidebar: the one project selector for the whole console.
// Lists every project (name + short id + my role), click selects it;
// below the list is the create-project form (same fields as the old
// workbench ProjectsSection: name, GitHub repo select, repo_url) and
// the selected project's members. The workbench no longer carries any
// project-module UI; it only consumes ctx.projectId.
export default function ProjectNav() {
  const ctx = useConsole();
  const [name, setName] = useState("");
  const [repoSelect, setRepoSelect] = useState("");
  const [repo, setRepo] = useState("");
  return (
    <div className="project-nav">
      <Card title="项目">
        <Bar><button onClick={ctx.refreshProjects}>刷新项目</button></Bar>
        {ctx.projects.length === 0 ? <div className="muted">暂无项目</div> : (
          <ul className="project-nav-list">
            {ctx.projects.map((p) => (
              <li key={p.id} className={"project-nav-item" + (p.id === ctx.projectId ? " selected" : "")} onClick={() => ctx.selectProject(p.id)} title={p.id}>
                <span className="project-nav-name">{p.name}</span>
                <span className="project-nav-meta">{shortId(p.id)}{p.my_role ? " · " + p.my_role : ""}</span>
              </li>
            ))}
          </ul>
        )}
        <h3>创建项目</h3>
        <Bar>
          <input type="text" placeholder="新项目名" value={name} onChange={(e) => setName(e.target.value)} />
        </Bar>
        <Bar>
          <select aria-label="从 GitHub 仓库选" value={repoSelect} onChange={(e) => { setRepoSelect(e.target.value); if (e.target.value) setRepo(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>
        </Bar>
        <Bar>
          <input type="text" placeholder="repo_url（可选）" value={repo} onChange={(e) => setRepo(e.target.value)} />
          <button className="primary" onClick={async () => { await ctx.createProject(name, repo); setName(""); setRepo(""); setRepoSelect(""); }}>创建项目</button>
        </Bar>
        <span className="muted">{ctx.projectMsg}</span>
      </Card>
      <MembersPanel />
    </div>
  );
}