import { useState } from "react";
import type { ToolAction } from "../types";

interface Props {
  action: ToolAction;
}

export function AgentAction({ action }: Props) {
  const [expanded, setExpanded] = useState(false);

  return (
    <div style={styles.container}>
      <div style={styles.header} onClick={() => setExpanded(!expanded)}>
        <span style={styles.icon}>{expanded ? "v" : ">"}</span>
        <span style={styles.agent}>{action.agent}</span>
        <span style={styles.tool}>{action.tool}</span>
      </div>
      {expanded && (
        <div style={styles.details}>
          <div style={styles.section}>
            <strong>Args:</strong>
            <pre style={styles.code}>{JSON.stringify(action.args, null, 2)}</pre>
          </div>
          {action.result !== undefined && (
            <div style={styles.section}>
              <strong>Result:</strong>
              <pre style={styles.code}>{JSON.stringify(action.result, null, 2)}</pre>
            </div>
          )}
        </div>
      )}
    </div>
  );
}

const styles: Record<string, React.CSSProperties> = {
  container: {
    margin: "4px 16px",
    padding: "6px 10px",
    background: "#f5f5f5",
    borderRadius: "6px",
    fontSize: "12px",
    color: "#666",
  },
  header: {
    display: "flex",
    alignItems: "center",
    gap: "6px",
    cursor: "pointer",
  },
  icon: {
    fontFamily: "monospace",
    width: "12px",
  },
  agent: {
    fontWeight: 600,
  },
  tool: {
    color: "#0066cc",
    fontFamily: "monospace",
  },
  details: {
    marginTop: "6px",
    paddingLeft: "18px",
  },
  section: {
    marginBottom: "4px",
  },
  code: {
    background: "#e8e8e8",
    padding: "4px 8px",
    borderRadius: "4px",
    fontSize: "11px",
    overflowX: "auto",
    margin: "4px 0",
  },
};