"use client";

import React from "react";
import { getAnnotationData, Message } from "@llamaindex/chat-ui";

export default function TerminalDisplay({ messages }: { messages: Message[] }) {
    const [isCollapsed, setIsCollapsed] = React.useState(true);

    // Get the last assistant message that's not being typed
    const lastAssistantMessage = messages
        .filter((msg) => msg.role === "assistant")
        .pop();

    if (!lastAssistantMessage) {
        return <></>;
    }

    const annotations = getAnnotationData(lastAssistantMessage, "agent_events");

    if (annotations.length === 0) {
        return <></>;
    }

    // Get all agent events and combine them
    const events: any[] = [];
    annotations.forEach((annotation: any) => {
        if (annotation?.events && Array.isArray(annotation.events)) {
            events.push(...annotation.events);
        }
    });

    if (events.length === 0) {
        return <></>;
    }

    return (
        <div className="bg-gray-900 rounded-lg border border-gray-700 overflow-hidden font-mono text-sm shadow-lg">
            {/* Terminal Header */}
            <div
                className="bg-gray-800 px-4 py-2 flex items-center gap-2 border-b border-gray-700 cursor-pointer hover:bg-gray-750 transition-colors"
                onClick={() => setIsCollapsed(!isCollapsed)}
            >
                <div className="flex gap-2">
                    <div className="w-3 h-3 rounded-full bg-red-500"></div>
                    <div className="w-3 h-3 rounded-full bg-yellow-500"></div>
                    <div className="w-3 h-3 rounded-full bg-green-500"></div>
                </div>
                <div className="text-gray-400 text-xs ml-2 flex-1">
                    Agent Process Terminal ({events.length} events)
                </div>
                <div className="text-gray-400">
                    {isCollapsed ? (
                        <svg
                            className="w-4 h-4"
                            fill="none"
                            stroke="currentColor"
                            viewBox="0 0 24 24"
                        >
                            <path
                                strokeLinecap="round"
                                strokeLinejoin="round"
                                strokeWidth={2}
                                d="M19 9l-7 7-7-7"
                            />
                        </svg>
                    ) : (
                        <svg
                            className="w-4 h-4"
                            fill="none"
                            stroke="currentColor"
                            viewBox="0 0 24 24"
                        >
                            <path
                                strokeLinecap="round"
                                strokeLinejoin="round"
                                strokeWidth={2}
                                d="M5 15l7-7 7 7"
                            />
                        </svg>
                    )}
                </div>
            </div>

            {/* Terminal Content */}
            {!isCollapsed && (
                <div className="h-64 overflow-y-auto p-4 space-y-1 bg-gray-900">
                    {events.map((event, index) => (
                        <div key={index} className="text-green-400">
                            <span className="text-blue-400">$</span>
                            <span className="text-yellow-400 ml-2">
                                [{event.status || "completed"}]
                            </span>
                            {event.result && (
                                <span className="text-gray-300 ml-4 mt-1 pl-2 border-l-2 border-gray-600">
                                    {event.result.slice(0, 100)}...
                                </span>
                            )}
                        </div>
                    ))}
                    {events.length === 0 && (
                        <div className="text-gray-500 italic">
                            No agent events to display...
                        </div>
                    )}
                </div>
            )}
        </div>
    );
}