import { useConsole } from "../context";
import { shortId } from "../api/client";
import { firstChar, durationOf, tokenOf } from "../api/taskMeta";

// 任务列表行 meta：首字 / 总耗时 / token，计算见 api/taskMeta.ts，
// 与任务详情共用同一口径。

// GitHub issues-style task list: search on top, a 主要聊天 header with
// a + button, then hairline rows with a Primer status dot at the
// left. There is deliberately NO project selector here any more:
// the left sidebar (ProjectNav) is the one project selector, and the
// auto-select-first-project fix in the store keeps the list from
// ever starting empty.
// a 14px title and a 12px muted meta line. The search input IS the
// existing task search (id/prompt); status and executor filters stay
// as a compact row below it. The selected row gets the light
// blue-grey background (#ddf4ff), not a bubble.
export default function TaskListSection({ onNew }: { onNew: () => void }) {
  const ctx = useConsole();
  return (
    <div>
      <div className="search-box">
        <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" aria-hidden="true">
          <circle cx="11" cy="11" r="7" /><path d="M21 21l-4.3-4.3" />
        </svg>
        <input type="text" placeholder="搜索" aria-label="搜索任务" value={ctx.searchText} onChange={(e) => ctx.setSearchText(e.target.value)} />
      </div>
      <div className="list-section-head">
        <span>主要聊天</span>
        <button type="button" aria-label="派发新任务" title="派发新任务" onClick={onNew}>＋</button>
      </div>
      <div className="bar">
        <select aria-label="状态筛选" value={ctx.statusFilter} onChange={(e) => ctx.setStatusFilter(e.target.value)}>
          <option value="">状态：全部</option>
          {["queued", "running", "completed", "failed", "interrupted", "merged", "merge-failed"].map((s) => <option key={s} value={s}>{s}</option>)}
        </select>
        <select aria-label="执行器筛选" value={ctx.executorFilter} onChange={(e) => ctx.setExecutorFilter(e.target.value)}>
          <option value="">执行器：全部</option><option value="local">local</option><option value="docker">docker</option><option value="cloud">cloud</option>
        </select>
      </div>
      <div className="bar">
        <button onClick={ctx.refreshTasks}>刷新</button>
        <span className="muted">{ctx.taskCountText}</span>
      </div>
      <div className="bar">
        <button disabled={ctx.taskPage <= 0} onClick={() => ctx.goToTaskPage(ctx.taskPage - 1)}>上一页</button>
        <span className="muted">第 {ctx.taskPage + 1} / {ctx.taskTotalPages} 页（每页 20 条，最新在前）</span>
        <button disabled={ctx.taskPage + 1 >= ctx.taskTotalPages} onClick={() => ctx.goToTaskPage(ctx.taskPage + 1)}>下一页</button>
      </div>
      {ctx.taskError ? <div className="err">{ctx.taskError}</div>
        : !ctx.projectId ? <div className="muted">先选项目</div>
        : ctx.filteredTasks.length === 0 ? <div className="muted">{ctx.taskTotal ? "没有符合筛选条件的任务" : "该项目暂无任务"}</div>
        : (
          <ul className="issue-list">
            {ctx.filteredTasks.map((t) => {
              const [dur, durTitle] = durationOf(t);
              const [tok, tokTitle] = tokenOf(t);
              const fc = firstChar(t);
              return (
              <li key={t.id} className={"issue-item" + (ctx.currentTask?.id === t.id ? " selected" : "")} onClick={() => ctx.showDetail(t.id)}>
                <span className={"issue-state st-" + t.status} aria-hidden="true" />
                <span className="issue-first" title={"任务首字：" + fc} aria-hidden="true">{fc}</span>
                <span style={{ flex: 1, minWidth: 0 }}>
                  <div className="issue-title">
                    {t.plan ? "[计划] " : ""}{t.forked_from ? "[分支] " : ""}{t.coordinator_parts ? "[协调] " : ""}{t.parent_task_id ? "[协调子任务] " : ""}{String(t.prompt || shortId(t.id)).slice(0, 60)}
                  </div>
                  <div className="issue-meta">
                    {shortId(t.id)} · <span className={"st-" + t.status}>{t.status}</span> · {t.executor || ""}{t.updated_at ? " · " + new Date(t.updated_at * 1000).toLocaleString() : ""}
                    {" · "}<span title={durTitle}>耗时 {dur}</span>
                    {" · "}<span title={tokTitle}>{tok}</span>
                  </div>
                  {(t.status === "failed" || t.status === "interrupted" || t.status === "merge-failed") && t.error_text ? (
                    <div className="issue-meta" title={t.error_text}>{/503|Service Unavailable/.test(t.error_text) ? "上游 503：模型服务暂时不可用" : t.error_text.replace(/\s+/g, " ").slice(0, 60)}</div>
                  ) : null}
                </span>
              </li>
              );
            })}
          </ul>
        )}
    </div>
  );
}