"use client";

import { useState } from "react";
import { Wrench, ChevronDown, ChevronRight } from "lucide-react";
import type { Message, ToolCall } from "@/lib/types";

interface Props {
  message: Message;
  toolResults: Map<string, { name: string; content: string }>;
}

function ToolCallBlock({ tc, result }: { tc: ToolCall; result?: { name: string; content: string } }) {
  const [open, setOpen] = useState(false);
  let args: Record<string, unknown> = {};
  try { args = JSON.parse(tc.function.arguments); } catch {}

  return (
    <div className="mt-1.5">
      <button
        onClick={() => setOpen(!open)}
        className="flex items-center gap-1 text-[11px] py-0.5 px-1.5 rounded-md active:bg-white/[0.04]"
        style={{ color: "var(--accent)" }}
      >
        <Wrench size={10} />
        <span className="font-mono">{tc.function.name}</span>
        {open ? <ChevronDown size={10} /> : <ChevronRight size={10} />}
      </button>
      {open && (
        <div className="mt-1 ml-2 pl-2 space-y-1" style={{ borderLeft: "2px solid var(--border)" }}>
          <pre className="text-[11px] overflow-x-auto whitespace-pre-wrap max-h-40 overflow-y-auto" style={{ color: "var(--text-3)" }}>
            {JSON.stringify(args, null, 2)}
          </pre>
          {result && (
            <pre className="text-[11px] overflow-x-auto whitespace-pre-wrap max-h-32 overflow-y-auto" style={{ color: "var(--text-3)", opacity: 0.6 }}>
              {result.content.slice(0, 500)}{result.content.length > 500 ? "..." : ""}
            </pre>
          )}
        </div>
      )}
    </div>
  );
}

export function MessageBubble({ message, toolResults }: Props) {
  const isUser = message.role === "user";
  const content = message.content || "";

  let toolCalls: ToolCall[] = [];
  if (message.tool_calls) {
    try { toolCalls = JSON.parse(message.tool_calls); } catch {}
  }

  if (!content && toolCalls.length === 0) return null;

  return (
    <div className={`flex ${isUser ? "justify-end" : "justify-start"}`}>
      <div
        className="max-w-[88%] rounded-2xl px-3.5 py-2.5"
        style={{
          background: isUser ? "var(--accent)" : "var(--bg-raised)",
          color: isUser ? "white" : "var(--text-1)",
        }}
      >
        {content && (
          <p className="text-[14px] whitespace-pre-wrap leading-relaxed break-words">
            {content}
          </p>
        )}
        {toolCalls.length > 0 && (
          <div>
            {toolCalls.length <= 3 ? (
              toolCalls.map((tc) => (
                <ToolCallBlock key={tc.id} tc={tc} result={toolResults.get(tc.id)} />
              ))
            ) : (
              <CollapsedTools toolCalls={toolCalls} toolResults={toolResults} />
            )}
          </div>
        )}
      </div>
    </div>
  );
}

function CollapsedTools({ toolCalls, toolResults }: { toolCalls: ToolCall[]; toolResults: Map<string, { name: string; content: string }> }) {
  const [open, setOpen] = useState(false);
  return (
    <div className="mt-1.5">
      <button
        onClick={() => setOpen(!open)}
        className="flex items-center gap-1 text-[11px] py-0.5 px-1.5 rounded-md active:bg-white/[0.04]"
        style={{ color: "var(--accent)" }}
      >
        <Wrench size={10} />
        <span>{toolCalls.length} tool calls</span>
        {open ? <ChevronDown size={10} /> : <ChevronRight size={10} />}
      </button>
      {open && toolCalls.map((tc) => (
        <ToolCallBlock key={tc.id} tc={tc} result={toolResults.get(tc.id)} />
      ))}
    </div>
  );
}
