class TUI {
  // 组件树
  readonly root: Container;

  // 终端实例
  readonly terminal: ProcessTerminal;

  // 渲染方法
  render(): void;
  tick(): void;

  // 尺寸信息
  get width(): number;
  get height(): number;

  // 生命周期
  start(): void;
  stop(): void;
  destroy(): void;

  // 事件
  on(event: "resize", handler: (cols: number, rows: number) => void): void;
  on(event: "key", handler: (key: Key) => void): void;
  on(event: "mouse", handler: (event: MouseEvent) => void): void;

  // 主题
  setTheme(theme: Theme): void;
  getTheme(): Theme;
}

// 在 pi-coding-agent 中
const tui = new TUI({
  stdin: process.stdin,
  stdout: process.stdout,
  theme: loadTheme("dark"),
});

// 设置底部状态栏
tui.root.addChild(new Footer({ session, modelRegistry }));

// 设置消息区域
const messageContainer = new Container({ grow: true });
tui.root.addChild(messageContainer);

// 设置编辑器
const editor = new Editor({ onSubmit: handleSubmit });
tui.root.addChild(editor);

// 启动渲染循环
tui.start();

class ProcessTerminal {
  constructor(options: {
    stdin: NodeJS.ReadStream;
    stdout: NodeJS.WriteStream;
    // 可选：是否启用同步输出（默认根据终端能力自动检测）
    synchronizedOutput?: boolean;
  });

  // 输出方法
  write(text: string): void;
  writeLine(text: string): void;

  // 光标控制
  moveTo(row: number, col: number): void;
  clearLine(): void;
  clearDown(): void;

  // 缓冲区管理
  beginSynchronizedUpdate(): void;
  endSynchronizedUpdate(): void;

  // 尺寸
  get columns(): number;
  get rows(): number;

  // 输入
  onKey(handler: (key: Key) => void): void;
  onMouse(handler: (event: MouseEvent) => void): void;
  onResize(handler: (cols: number, rows: number) => void): void;
}

// 组件基类（简化版）
abstract class Component {
  // 唯一标识
  id: string;

  // 布局属性
  parent: Container | null;
  width: number;
  height: number;
  minWidth: number;
  minHeight: number;
  grow: number;       // 弹性增长权重（类似 CSS flex-grow）
  shrink: number;     // 弹性收缩权重

  // 可见性
  visible: boolean;

  // 核心方法
  abstract render(): RenderOutput;
  abstract layout(availableWidth: number, availableHeight: number): void;

  // 生命周期钩子
  onMount(): void;
  onUnmount(): void;
  onResize(cols: number, rows: number): void;

  // 事件处理
  onKey(key: Key): boolean;     // 返回 true 表示"事件已消费，停止冒泡"
  onMouse(event: MouseEvent): boolean;
  focus(): void;
  blur(): void;

  // 标记为"需要重绘"
  markDirty(): void;
  isDirty(): boolean;
}

interface RenderOutput {
  lines: string[];          // 每一行的文本内容（包含 ANSI 转义序列）
  cursor?: {                // 可选：光标位置
    row: number;
    col: number;
  };
}

class Container extends Component {
  children: Component[];
  direction: "vertical" | "horizontal";  // 布局方向
  gap: number;                            // 子组件间距

  addChild(child: Component): void;
  removeChild(child: Component): void;
  clearChildren(): void;
}

class Text extends Component {
  constructor(text: string, options?: {
    wrap?: boolean;       // 是否自动换行（默认 true）
    align?: "left" | "center" | "right";
  });
  setText(text: string): void;
  getText(): string;
}

const title = new Text("=== Pi 编码助手 ===", { align: "center" });
container.addChild(title);

// 动态更新
title.setText("=== 新会话已开始 ===");
title.markDirty(); // 触发重绘

class TruncatedText extends Text {
  constructor(text: string, options?: {
    truncatePosition?: "start" | "middle" | "end";  // 省略号位置（默认 "end"）
  });
}

// 底部栏中展示工作目录——空间有限，长路径自动截断
const cwdDisplay = new TruncatedText(process.cwd(), {
  truncatePosition: "start",  // 截断开头："…/very/deep/nested/project/src"
});
footer.addChild(cwdDisplay);

class Input extends Component {
  value: string;

  constructor(options?: {
    placeholder?: string;
    value?: string;
    password?: boolean;        // 密码模式（输入回显为 * 或 ·）
    onSubmit?: (value: string) => void;
    onChange?: (value: string) => void;
    validator?: (value: string) => boolean;
  });
}

const nameInput = new Input({
  placeholder: "请输入你的名字",
  onSubmit: (value) => {
    console.log(`你好，${value}！`);
  },
  validator: (value) => value.length > 0,  // 不允许空值
});
container.addChild(nameInput);

class Editor extends Component {
  constructor(options: {
    onSubmit: (text: string, mode: "normal" | "steering" | "follow-up") => void;
    onCancel?: () => void;
    onModelSwitch?: () => void;
    onThinkingCycle?: () => void;
    onExternalEditor?: () => void;
    fileSearchProvider?: (query: string) => Promise<FileEntry[]>;
    pathCompleteProvider?: (partial: string) => Promise<string[]>;
    slashCommandProvider?: (query: string) => Promise<SlashCommand[]>;
    placeholder?: string;
    initialText?: string;
    borderColor?: Color;
  });

  // 编辑器内容管理
  getText(): string;
  setText(text: string): void;
  clear(): void;

  // 多行支持
  insertNewLine(): void;

  // 队列文本标记
  getQueuedTexts(): { text: string; mode: "steering" | "follow-up" }[];
  recoverQueuedText(): { text: string; mode: "steering" | "follow-up" } | null;

  // 思考级别边框颜色
  setBorderColor(color: Color): void;

  // Vim 模式
  setEditorMode(mode: "default" | "vim"): void;
}

import { Editor } from "@earendil-works/pi-tui";

const editor = new Editor({
  placeholder: "向 Pi 提问或输入指令…",
  onSubmit: (text, mode) => {
    if (mode === "normal") {
      session.sendMessage(text);
    } else if (mode === "steering") {
      session.sendSteeringMessage(text);
    } else if (mode === "follow-up") {
      session.sendFollowUpMessage(text);
    }
  },
  fileSearchProvider: async (query) => {
    // 在当前项目中模糊搜索文件
    return await fuzzySearchFiles(process.cwd(), query);
  },
  pathCompleteProvider: async (partial) => {
    // Tab 路径补全
    return await completePath(process.cwd(), partial);
  },
  slashCommandProvider: async (query) => {
    // 斜杠命令补全
    return await filterSlashCommands(query);
  },
});

tui.root.addChild(editor);

class Markdown extends Component {
  constructor(options: {
    content: string;              // Markdown 源文本
    codeBlockTheme?: string;      // 代码块语法高亮主题（默认 "dark"）
    maxHeight?: number;           // 最大渲染高度，超出部分折叠
    collapsed?: boolean;          // 初始是否折叠
    renderInlineCode?: boolean;   // 是否渲染行内代码样式（默认 true）
  });

  setContent(markdown: string): void;
  appendContent(markdown: string): void;  // 流式追加（用于模型输出现场）
  toggleCollapse(): void;
}

const markdownView = new Markdown({
  content: "",
  collapsed: false,
});

// 模型流式输出时增量追加
providerStream.on("token", (token) => {
  markdownView.appendContent(token);
});

// 最终内容
console.log(markdownView.getContent());
// 渲染输出为 ANSI 样式文本

class Loader extends Component {
  constructor(options?: {
    text?: string;                     // 旁边的文字（如 "正在思考…"）
    frames?: string[];                 // 自定义动画帧（默认使用内置的 spinner 字符集）
    interval?: number;                 // 帧切换间隔（毫秒，默认 80）
    color?: Color;                     // 动画颜色
  });

  setText(text: string): void;
  start(): void;
  stop(): void;
}

const loader = new Loader({
  text: "正在连接 API…",
  color: "yellow",
});
container.addChild(loader);
loader.start();

// 操作完成后
await connectToAPI();
loader.setText("连接成功！");
loader.stop();

class CancellableLoader extends Loader {
  constructor(options: {
    text: string;
    cancelKey?: string;          // 取消按键提示（默认 "Esc"）
    onCancel?: () => void;       // 取消回调
    color?: Color;
    interval?: number;
  });

  isCancelled(): boolean;
}

const loader = new CancellableLoader({
  text: "正在生成代码…按 Esc 取消",
  cancelKey: "Esc",
  onCancel: () => {
    abortController.abort();
    loader.setText("已取消");
  },
});

container.addChild(loader);
loader.start();

try {
  const result = await generateCode(abortController.signal);
  loader.setText(`生成完成：${result.summary}`);
} catch (err) {
  if (loader.isCancelled()) {
    loader.setText("操作已取消");
  }
} finally {
  loader.stop();
}

interface SelectListOption {
  id: string;
  label: string;
  description?: string;        // 辅助说明文本
  disabled?: boolean;          // 是否禁用（灰色，不可选）
}

class SelectList extends Component {
  constructor(options: {
    title: string;
    options: SelectListOption[];
    onSelect?: (id: string) => void;
    onCancel?: () => void;
    filterable?: boolean;       // 是否支持打字搜索过滤（默认 true）
    multiple?: boolean;         // 是否多选（默认 false）
    defaultSelected?: string[]; // 默认已选中的 id 列表（仅多选模式）
  });

  getSelected(): string | string[] | undefined;
  setOptions(options: SelectListOption[]): void;
  setTitle(title: string): void;
}

// 模型选择器
const modelPicker = new SelectList({
  title: "选择模型",
  options: [
    { id: "claude-sonnet-4-20250514", label: "Claude Sonnet 4", description: "Anthropic 出品，平衡质量与速度" },
    { id: "claude-opus-4-20250514", label: "Claude Opus 4", description: "最高质量，适合复杂任务" },
    { id: "gpt-4o", label: "GPT-4o", description: "OpenAI 多模态旗舰模型" },
    { id: "deepseek-chat", label: "DeepSeek V3", description: "高性价比国产模型" },
  ],
  filterable: true,
  onSelect: (id) => {
    switchModel(id);
  },
});
container.addChild(modelPicker);

interface SettingsOption {
  key: string;
  label: string;
  type: "enum" | "string" | "boolean" | "number" | "action" | "section";
  value?: any;                           // 当前值
  options?: { value: any; label: string }[];  // 枚举型选项列表
  min?: number;
  max?: number;
  step?: number;
  description?: string;
  onChange?: (key: string, value: any) => void;
}

class SettingsList extends Component {
  constructor(options: {
    title: string;
    settings: SettingsOption[];
    onClose?: () => void;
  });

  getValues(): Record<string, any>;
}

const settingsPanel = new SettingsList({
  title: "设置",
  settings: [
    {
      key: "thinkingLevel",
      label: "思考级别",
      type: "enum",
      value: "medium",
      options: [
        { value: "off", label: "关闭" },
        { value: "low", label: "低" },
        { value: "medium", label: "中" },
        { value: "high", label: "高" },
        { value: "xhigh", label: "极高" },
      ],
      onChange: (key, value) => config.set(key, value),
    },
    {
      key: "autoCompactThreshold",
      label: "自动压缩阈值",
      type: "number",
      value: 0.85,
      min: 0.1,
      max: 0.95,
      step: 0.05,
      description: "上下文使用率超过此值时自动触发压缩",
      onChange: (key, value) => config.set(key, value),
    },
    {
      key: "collapseToolOutputs",
      label: "折叠工具输出",
      type: "boolean",
      value: true,
      onChange: (key, value) => config.set(key, value),
    },
    // section 类型不参与交互，仅做分组标题
    { key: "section-model", label: "── 模型设置 ──", type: "section" },
  ],
});
container.addChild(settingsPanel);

class Spacer extends Component {
  constructor(options?: {
    minWidth?: number;
    minHeight?: number;
    grow?: number;    // 默认为 1，即"吃掉所有剩余空间"
  });
}

// 让标题居中：两侧各放一个 Spacer（grow=1），中间放标题
const header = new Container({ direction: "horizontal" });
header.addChild(new Spacer());
header.addChild(new Text("Pi 编码助手"));
header.addChild(new Spacer());

// 底部栏：左侧路径 — 中间 Spacer — 右侧统计
const footer = new Container({ direction: "horizontal" });
footer.addChild(new TruncatedText(process.cwd()));
footer.addChild(new Spacer());  // 吃掉所有剩余空间，把右侧内容推到最右
footer.addChild(new Text("↑12.3k ↓4.2k $0.042"));

class Image extends Component {
  constructor(options: {
    data: Buffer;          // 图片原始数据（PNG/JPEG/GIF/WebP）
    format?: "png" | "jpeg" | "gif" | "webp";
    width?: number;        // 显示宽度（列数）
    height?: number;       // 显示高度（行数）
    preserveAspectRatio?: boolean;
    alt?: string;          // 不支持图片显示时的替代文本
  });
}

import { readFile } from "fs/promises";

const imageData = await readFile("screenshot.png");
const image = new Image({
  data: imageData,
  format: "png",
  width: 40,
  preserveAspectRatio: true,
  alt: "[截图：终端错误信息]",
});
container.addChild(image);

class Box extends Container {
  constructor(options?: {
    border?: "single" | "double" | "rounded" | "none";   // 边框样式
    borderColor?: Color;
    title?: string;         // 边框标题
    padding?: number;       // 内边距（默认 0）
    paddingX?: number;      // 水平内边距
    paddingY?: number;      // 垂直内边距
    direction?: "vertical" | "horizontal";
  });

  setTitle(title: string): void;
  setBorderColor(color: Color): void;
}

// 消息气泡效果
const messageBox = new Box({
  border: "rounded",
  borderColor: "blue",
  title: "助手",
  padding: 1,
  direction: "vertical",
});

messageBox.addChild(new Markdown({ content: assistantResponse }));
container.addChild(messageBox);

// 动态更改边框（如编辑器在忙碌状态下的闪烁效果通过 color 交替实现）
setInterval(() => {
  messageBox.setBorderColor(i % 2 === 0 ? "yellow" : "brightYellow");
}, 500);

const root = new Container({ direction: "vertical" });

// 消息区域 —— 吃满剩余空间
const messages = new Container({ direction: "vertical", grow: 1 });
root.addChild(messages);

// 编辑器 —— 固定高度（多行时自动扩展，但有最大高度限制）
const editor = new Editor({
  minHeight: 1,
  maxHeight: 10,  // 编辑器最多占 10 行，超出则内部滚动
  grow: 0,        // 不参与弹性分配
});
root.addChild(editor);

// 底部栏 —— 固定 1 行
const footer = new Container({
  direction: "horizontal",
  minHeight: 1,
});
root.addChild(footer);

class TUI {
  private frameLoop() {
    const loop = () => {
      this.tick();
      this.animationFrameId = setImmediate(loop);
    };
    loop();
  }

  tick() {
    // 1. 收集所有脏组件的渲染输出
    const outputs = this.collectDirtyOutputs();

    // 2. 与上一帧比较，计算差异
    const diff = this.computeDiff(outputs);

    // 3. 同步输出包装
    this.terminal.beginSynchronizedUpdate();

    // 4. 逐行写入差异
    for (const change of diff) {
      this.terminal.moveTo(change.row, 0);
      this.terminal.write(change.newLine);
      // 如果新行比旧行短，清除行尾残余
      if (change.newLine.length < change.oldLine.length) {
        this.terminal.clearLine();
      }
    }

    // 5. 更新光标位置
    if (this.activeCursor) {
      this.terminal.moveTo(this.activeCursor.row, this.activeCursor.col);
    }

    // 6. 结束同步输出
    this.terminal.endSynchronizedUpdate();

    // 7. 保存当前帧作为下一帧的比较基准
    this.previousOutput = this.flattenOutputs(outputs);
  }
}

interface FrameLine {
  text: string;
  styles: StyleRun[];  // 每段文本的 ANSI 样式信息
}

function computeLineDiff(
  previous: Map<number, FrameLine>,  // 行号 → 上一帧内容
  current: Map<number, FrameLine>,   // 行号 → 当前帧内容
): LineChange[] {
  const changes: LineChange[] = [];

  for (const [row, currLine] of current) {
    const prevLine = previous.get(row);
    if (!prevLine) {
      // 新增行：整体为新内容
      changes.push({ row, type: "new", newLine: renderLine(currLine) });
    } else if (!linesEqual(prevLine, currLine)) {
      // 内容变化：重写整行
      changes.push({
        row,
        type: "changed",
        oldLine: renderLine(prevLine),
        newLine: renderLine(currLine),
      });
    }
    // 内容相同：跳过（不输出任何内容）
  }

  // 处理被删除的行（当前帧的行数比上一帧少）
  for (const row of previous.keys()) {
    if (!current.has(row)) {
      changes.push({ row, type: "deleted", newLine: "" });
    }
  }

  return changes;
}

type Color = string;  // "#7aa2f7" | "red" | "color16"

interface Theme {
  name: string;
  colors: {
    // 基础调色板
    background: Color;
    foreground: Color;
    cursor: Color;
    selection: Color;
    border: Color;

    // ANSI 16 色（影响语法高亮）
    black: Color;
    red: Color;
    green: Color;
    yellow: Color;
    blue: Color;
    magenta: Color;
    cyan: Color;
    white: Color;
    brightBlack: Color;
    brightRed: Color;
    brightGreen: Color;
    brightYellow: Color;
    brightBlue: Color;
    brightMagenta: Color;
    brightCyan: Color;
    brightWhite: Color;

    // 语义化颜色
    userMessage: Color;
    assistantMessage: Color;
    toolCall: Color;
    toolResult: Color;
    thinkingBlock: Color;
    thinkingBlockText: Color;
    error: Color;
    warning: Color;
    info: Color;
    success: Color;

    // 特定 UI 区域
    startupHeader: Color;
    editorBorder: {
      default: Color;
      active: Color;
      busy: Color;
      error: Color;
    };
    editorCursor: Color;
    editorSelection: Color;
    editorText: Color;
    editorPlaceholder: Color;

    footerBackground: Color;
    footerForeground: Color;
    footerHighlight: Color;
    footerWarning: Color;

    treeNode: Color;
    treeBranch: Color;
    treeActive: Color;
    treeTag: Color;

    commandPalette: {
      background: Color;
      foreground: Color;
      selected: Color;
      description: Color;
    };

    fileSearchPopup: {
      background: Color;
      foreground: Color;
      selected: Color;
      pathMuted: Color;
    };
  };
}

class StyleBuilder {
  private theme: Theme;

  foreground(color: keyof Theme["colors"]): this;
  background(color: keyof Theme["colors"]): this;
  bold(): this;
  italic(): this;
  underline(): this;
  dim(): this;
  reset(): this;

  build(): string;          // 输出完整的 ANSI escape 序列
  apply(text: string): string;  // 快捷：build() + text + reset()
}

const style = new StyleBuilder(theme);
const headerText = style
  .foreground("startupHeader")
  .bold()
  .apply("=== Pi 编码助手 ===");

const errorText = style
  .foreground("error")
  .bold()
  .apply("错误：连接中断");

// 内置主题
tui.setTheme(DARK_THEME);
tui.setTheme(LIGHT_THEME);

// 自定义主题文件
const customTheme = JSON.parse(readFileSync("~/.pi/agent/themes/dracula.json", "utf-8"));
tui.setTheme(customTheme);

pi.on("session_start", (event, ctx) => {
  const theme = ctx.ui.getTheme();
  const accentColor = theme.colors.blue;     // 获取当前主题的蓝色
  const errorColor = theme.colors.error;     // 获取当前主题的错误色
  // 用于自定义组件渲染...
});

interface Key {
  name: string;            // 键名："a", "Enter", "Backspace", "ArrowUp", "F1"...
  ctrl: boolean;           // Ctrl 修饰键
  alt: boolean;            // Alt 修饰键（macOS 上对应 Option）
  shift: boolean;          // Shift 修饰键
  meta: boolean;           // Meta 修饰键（macOS 上对应 Cmd，Windows 上对应 Win）
  sequence: string;        // 原始字节序列（调试用）
}

function matchesKey(key: Key, expression: string): boolean;

class MyComponent extends Component {
  onKey(key: Key): boolean {
    if (matchesKey(key, "Enter")) {
      this.submit();
      return true;  // 消费事件，停止冒泡
    }
    if (matchesKey(key, "Escape")) {
      this.cancel();
      return true;
    }
    if (matchesKey(key, "Ctrl+K")) {
      this.clear();
      return true;
    }
    return false;  // 未处理，继续冒泡
  }
}

interface KeyBinding {
  keys: string[];          // ["Ctrl+Shift+L"]
  command: string;         // "pi:model"
  title: string;           // "打开模型选择器"
  when?: string;           // 条件表达式（如 "editorFocus"）
}

class KeyBindingManager {
  register(binding: KeyBinding): void;
  unregister(command: string): void;
  getBindings(): KeyBinding[];

  // 尝试匹配并执行绑定的命令
  dispatch(key: Key, context: string): boolean;
}

keyBindingManager.register([
  { keys: ["Escape"], command: "pi:interrupt", when: "modelBusy" },
  { keys: ["Escape"], command: "pi:close-list", when: "selectListOpen" },
  { keys: ["Escape"], command: "pi:close-command-palette", when: "commandPaletteOpen" },
  { keys: ["Escape"], command: "vim:normal-mode", when: "vimInsertMode" },
]);

// 1. TUI 启动时注册全局快捷键
tui.keyBindingManager.register([
  { keys: ["Ctrl+L"], command: "pi:model", title: "模型选择器" },
  { keys: ["Ctrl+O"], command: "pi:collapse-tool-output", title: "折叠工具输出" },
  { keys: ["Shift+Tab"], command: "pi:thinking-cycle", title: "切换思考级别" },
]);

// 2. ProcessTerminal 监听标准输入
process.stdin.on("data", (buffer: Buffer) => {
  // 解析原始字节序列
  const key = terminal.parseInput(buffer);
  if (key) {
    // 3. 先尝试全局快捷键匹配
    if (tui.keyBindingManager.dispatch(key, getCurrentContext())) {
      return;  // 快捷键被处理
    }
    // 4. 否则向下分发到组件树
    tui.dispatchKey(key);
  }
});

// 5. 组件树的 onKey 链
// TUI.dispatchKey → Editor.onKey → (如果 Editor 消费) → 停止
//                                   → (如果 Editor 不消费) → Container.onKey → ...

abstract class Component {
  id: string;
  parent: Container | null;
  width: number;
  height: number;
  minWidth: number;
  minHeight: number;
  grow: number;
  shrink: number;
  visible: boolean;

  // === 必须实现的方法 ===
  abstract render(): RenderOutput;
  abstract layout(availableWidth: number, availableHeight: number): void;

  // === 可覆盖的生命周期钩子 ===
  onMount(): void { }
  onUnmount(): void { }
  onResize(cols: number, rows: number): void { }

  // === 可覆盖的事件处理 ===
  onKey(key: Key): boolean { return false; }
  onMouse(event: MouseEvent): boolean { return false; }

  // === 状态管理方法 ===
  markDirty(): void;
  isDirty(): boolean;
  focus(): void;
  blur(): void;
  isFocused(): boolean;
}

interface RenderOutput {
  lines: string[];
  cursor?: { row: number; col: number };
}

class ProgressBar extends Component {
  private progress: number = 0;  // 0 ~ 1
  private label: string = "";

  constructor(options?: { label?: string }) {
    super();
    this.minHeight = 1;
    this.label = options?.label ?? "进度";
  }

  setProgress(value: number, label?: string): void {
    this.progress = Math.max(0, Math.min(1, value));
    if (label !== undefined) this.label = label;
    this.markDirty();
  }

  render(): RenderOutput {
    const style = new StyleBuilder(this.getTheme());
    const barWidth = Math.floor((this.width - this.label.length - 4) * this.progress);
    const filled = "█".repeat(barWidth);
    const empty = "░".repeat(Math.max(0, this.width - this.label.length - 4 - barWidth));
    const percentage = Math.round(this.progress * 100);

    const line = style
      .foreground("info")
      .apply(`${this.label} [${filled}${empty}] ${percentage}%`);

    return { lines: [line] };
  }

  // ⚠ 注意：layout() 在此组件中不需要特殊处理
  // width 由父容器分配，height 固定为 1
  layout(availableWidth: number, _availableHeight: number): void {
    this.width = availableWidth;
    this.height = 1;
  }
}

class Clock extends Component {
  private timer: NodeJS.Timeout | null = null;

  onMount(): void {
    this.timer = setInterval(() => {
      this.markDirty();
    }, 1000);
  }

  onUnmount(): void {
    if (this.timer) {
      clearInterval(this.timer);
      this.timer = null;
    }
  }

  render(): RenderOutput {
    const now = new Date().toLocaleTimeString();
    return { lines: [style.foreground("info").apply(`当前时间: ${now}`)] };
  }
}

import { Component, ComponentOptions, StyleBuilder } from "@earendil-works/pi-tui";
import { execSync } from "child_process";

interface GitStatus {
  branch: string;
  staged: number;
  modified: number;
  untracked: number;
  ahead: number;
  behind: number;
}

class GitStatusPanel extends Component {
  private status: GitStatus = {
    branch: "unknown",
    staged: 0,
    modified: 0,
    untracked: 0,
    ahead: 0,
    behind: 0,
  };
  private refreshTimer: NodeJS.Timeout | null = null;
  private workingDir: string;

  constructor(workingDir: string, options?: ComponentOptions) {
    super(options);
    this.workingDir = workingDir;
    this.minHeight = 2;  // 分支行 + 统计行
    this.minWidth = 30;
  }

  onMount(): void {
    this.refreshStatus();
    this.refreshTimer = setInterval(() => {
      this.refreshStatus();
    }, 5000);
  }

  onUnmount(): void {
    if (this.refreshTimer) {
      clearInterval(this.refreshTimer);
      this.refreshTimer = null;
    }
  }

  private refreshStatus(): void {
    try {
      const branch = execSync("git rev-parse --abbrev-ref HEAD", {
        cwd: this.workingDir,
        encoding: "utf-8",
        timeout: 3000,
      }).trim();

      const statusOutput = execSync("git status --porcelain", {
        cwd: this.workingDir,
        encoding: "utf-8",
        timeout: 3000,
      });

      let staged = 0, modified = 0, untracked = 0;
      for (const line of statusOutput.split("\n")) {
        if (line.length < 2) continue;
        const statusCode = line.substring(0, 2);
        if (statusCode[0] !== " " && statusCode[0] !== "?") staged++;
        if (statusCode[1] !== " ") modified++;
        if (statusCode.startsWith("??")) untracked++;
      }

      const ahead = 0; // 简化：实际可用 `git rev-list --count HEAD..@{u}`
      const behind = 0;

      this.status = { branch, staged, modified, untracked, ahead, behind };
      this.markDirty();
    } catch (err) {
      // 不是 Git 仓库或命令失败——静默处理，保持旧状态
    }
  }

  render(): RenderOutput {
    const style = new StyleBuilder(this.getTheme());
    const { branch, staged, modified, untracked } = this.status;

    const branchLine = style
      .foreground("blue")
      .bold()
      .apply(`⎇ ${branch}`);

    const parts: string[] = [];
    if (staged > 0) parts.push(style.foreground("green").apply(`+${staged}`));
    if (modified > 0) parts.push(style.foreground("yellow").apply(`~${modified}`));
    if (untracked > 0) parts.push(style.foreground("red").apply(`?${untracked}`));

    const statsLine = parts.length > 0
      ? parts.join(" ")
      : style.foreground("brightBlack").apply("clean");

    return { lines: [branchLine, `  ${statsLine}`] };
  }

  layout(availableWidth: number, _availableHeight: number): void {
    this.width = Math.min(availableWidth, 60);  // 最大宽度 60 列
    this.height = 2;
  }
}

// === 使用示例 ===
// 在 Extension 中：
pi.on("session_start", (event, ctx) => {
  if (ctx.hasUI) {
    const gitPanel = new GitStatusPanel(process.cwd());
    // 将组件添加到 TUI 容器中（如底部栏上方）
    ctx.ui.setWidget(gitPanel);
  }
});

// ❌ 不好：整个消息列表因为一条新消息被重绘
class MessageList extends Component {
  render() { /* 渲染全部 500 条消息 */ }
}

// ✅ 好：每条消息是独立的子组件
class MessageList extends Container {
  addMessage(msg: Message) {
    this.addChild(new MessageItem(msg));  // 只有新孩子被标记为脏
  }
}

class MessageItem extends Component {
  private messageId: string;  // 只存 ID，不存内容

  render(): RenderOutput {
    const message = messageStore.getById(this.messageId);  // 从外部缓存获取
    return this.renderMessage(message);
  }
}

class VirtualLogViewer extends Component {
  private totalLines: number;
  private scrollOffset: number = 0;
  private lines: string[];

  render(): RenderOutput {
    const visibleStart = this.scrollOffset;
    const visibleEnd = Math.min(
      visibleStart + this.height,
      this.totalLines,
    );
    const output: string[] = [];

    for (let i = visibleStart; i < visibleEnd; i++) {
      output.push(this.lines[i]);
    }

    // 不足 height 的行数用空行填充
    while (output.length < this.height) {
      output.push("");
    }

    return { lines: output };
  }
}

class ExpandableOutput extends Component {
  collapsed = true;
  maxPreviewLines = 5;
  private fullContent: string;

  toggle(): void {
    this.collapsed = !this.collapsed;
    this.markDirty();
  }

  render(): RenderOutput {
    const lines = this.fullContent.split("\n");
    if (this.collapsed && lines.length > this.maxPreviewLines) {
      return {
        lines: [
          ...lines.slice(0, this.maxPreviewLines),
          `… 还有 ${lines.length - this.maxPreviewLines} 行（按 Ctrl+O 展开）`,
        ],
      };
    }
    return { lines };
  }
}

// 在 pi-coding-agent 的启动逻辑中（简化版）
import { TUI, Editor, Markdown, Container, Box, Footer, ... } from "@earendil-works/pi-tui";

async function startInteractiveMode(config: PiConfig) {
  // 1. 创建 TUI 实例
  const tui = new TUI({
    stdin: process.stdin,
    stdout: process.stdout,
    theme: loadTheme(config.theme),
  });

  // 2. 构建 UI 结构
  const root = tui.root;

  // 2a. 消息容器
  const messageContainer = new Container({ direction: "vertical", grow: 1 });
  root.addChild(messageContainer);

  // 2b. 编辑器
  const editor = new Editor({
    placeholder: "向 Pi 提问或输入指令…",
    onSubmit: (text, mode) => messageQueue.enqueue(text, mode),
    fileSearchProvider: (query) => fileIndex.fuzzySearch(query),
    pathCompleteProvider: (partial) => fsPath.complete(partial),
    slashCommandProvider: (query) => commandRegistry.search(query),
  });
  root.addChild(editor);

  // 2c. 底部状态栏
  const footer = new Footer({
    session: currentSession,
    modelRegistry,
  });
  root.addChild(footer);

  // 3. 设置全局按键绑定
  tui.keyBindingManager.register([
    { keys: ["Ctrl+L"], command: "pi:model" },
    { keys: ["Ctrl+O"], command: "pi:collapse-tool-output" },
    // ... 其余绑定
  ]);

  // 4. 启动渲染循环
  tui.start();
}