"use client";

import { useState } from "react";

export interface BashResultMessage {
  role: "custom";
  customType: "bash_result";
  content: string;
  display: true;
  timestamp?: number;
  details: {
    command: string;
    output: string;
    exitCode: number | undefined;
    cancelled: boolean;
    truncated: boolean;
    excludeFromContext: boolean;
    error?: string;
  };
}

const COLLAPSE_LINES = 40;

export function isBashResultMessage(msg: { role: string; customType?: string }): msg is BashResultMessage {
  return msg.role === "custom" && (msg as BashResultMessage).customType === "bash_result";
}

export function BashResultView({ message }: { message: BashResultMessage }) {
  const d = message.details;
  const lines = (d.output || "").split("\n");
  const needsCollapse = lines.length > COLLAPSE_LINES;
  const [expanded, setExpanded] = useState(false);
  const shown = needsCollapse && !expanded ? lines.slice(0, COLLAPSE_LINES).join("\n") + "\n…" : d.output;

  const failed = d.cancelled || (d.exitCode !== undefined && d.exitCode !== 0) || Boolean(d.error);
  const border = failed ? "var(--danger, #e5484d)" : "var(--border)";
  const accent = failed ? "var(--danger, #e5484d)" : "var(--text-muted)";

  return (
    <div
      style={{
        margin: "8px 0",
        border: `1px solid ${border}`,
        borderRadius: 10,
        background: "var(--bg-panel)",
        overflow: "hidden",
        fontFamily: "var(--font-mono)",
        fontSize: 12,
      }}
    >
      <div
        style={{
          display: "flex",
          alignItems: "center",
          gap: 8,
          padding: "6px 10px",
          borderBottom: `1px solid ${border}`,
          color: accent,
          flexWrap: "wrap",
        }}
      >
        <span style={{ fontWeight: 700, color: "var(--text-dim)" }}>$</span>
        <code style={{ color: "var(--text)", flex: 1, minWidth: 0, wordBreak: "break-all" }}>
          {d.excludeFromContext ? "!!" : "!"}
          {d.command}
        </code>
        {d.excludeFromContext && (
          <span
            title="输出不会送入模型上下文"
            style={{
              fontSize: 10,
              padding: "1px 6px",
              borderRadius: 4,
              border: "1px solid var(--border)",
              color: "var(--text-dim)",
            }}
          >
            不入上下文
          </span>
        )}
        <span style={{ fontSize: 11, color: "var(--text-dim)", flexShrink: 0 }}>
          {d.cancelled
            ? "已取消"
            : d.error
              ? "错误"
              : d.exitCode === undefined
                ? ""
                : `exit ${d.exitCode}`}
        </span>
      </div>
      {(d.output || d.error) && (
        <pre
          style={{
            margin: 0,
            padding: "8px 10px",
            whiteSpace: "pre-wrap",
            wordBreak: "break-word",
            color: d.error ? "var(--danger, #e5484d)" : "var(--text-muted)",
            maxHeight: expanded ? "none" : 320,
            overflow: "auto",
          }}
        >
          {d.error ? d.error : shown}
        </pre>
      )}
      {needsCollapse && !d.error && (
        <button
          type="button"
          onClick={() => setExpanded((v) => !v)}
          style={{
            width: "100%",
            border: "none",
            borderTop: `1px solid ${border}`,
            background: "transparent",
            color: "var(--accent)",
            padding: "4px 10px",
            fontSize: 11,
            cursor: "pointer",
            textAlign: "left",
          }}
        >
          {expanded ? "收起" : `展开全部（${lines.length} 行）`}
        </button>
      )}
    </div>
  );
}