import React, { useState } from 'react';

// 🤝 Protocol Visualizer

export default function ProtocolDemo() {
    const [messages, setMessages] = useState([]);
    const [status, setStatus] = useState('idle');

    const startNegotiation = async () => {
        setStatus('active');
        setMessages([]);
        
        const sequence = [
            { from: 'Buyer', text: "Handshake: I want to buy Item #99. Capability Check?" },
            { from: 'Seller', text: "ACK. I support MCP v1. Tools: [get_price, purchase]." },
            { from: 'Buyer', text: "Call Tool: get_price(#99)" },
            { from: 'Seller', text: "Result: $50.00" },
            { from: 'Buyer', text: "Negotiate: can we do $45?" },
            { from: 'Seller', text: "Logic: Margin allows >$40. ACCEPT $45." },
            { from: 'Buyer', text: "Call Tool: purchase(#99, $45)" },
            { from: 'Seller', text: "Transaction Complete. Invoice #1024." }
        ];

        for (const msg of sequence) {
            await new Promise(r => setTimeout(r, 1000));
            setMessages(p => [...p, msg]);
        }
        setStatus('done');
    };

    return (
        <div className="bg-slate-50 dark:bg-slate-950 p-8 rounded-3xl border border-slate-200 dark:border-slate-800 shadow-xl">
             <div className="flex justify-between items-center mb-10">
                <h3 className="text-2xl font-black text-gray-900 dark:text-white flex items-center gap-3">
                    <span className="text-indigo-500">🤝</span> A2A Protocol
                </h3>
                <button 
                    onClick={startNegotiation}
                    disabled={status === 'active'}
                    className="bg-indigo-600 hover:bg-indigo-700 disabled:opacity-50 text-white font-bold px-6 py-2 rounded-xl transition-all"
                >
                    Start Negotiation
                </button>
            </div>

            <div className="flex gap-4 items-stretch h-[400px]">
                
                {/* Agent A */}
                <div className="w-1/4 bg-blue-50 dark:bg-blue-900/20 rounded-2xl p-4 flex flex-col items-center border border-blue-200 dark:border-blue-800">
                    <div className="w-16 h-16 bg-blue-500 rounded-full flex items-center justify-center mb-4 text-white">
                        <span className="text-3xl">🤖</span>
                    </div>
                    <div className="font-bold text-blue-700 dark:text-blue-300">Buyer Agent</div>
                    <div className="text-xs text-center text-gray-500 mt-2">Goal: Buy cheaper than $50</div>
                </div>

                {/* Comm Channel */}
                <div className="flex-1 bg-white dark:bg-slate-900 rounded-2xl border border-slate-200 dark:border-slate-800 p-6 overflow-y-auto space-y-4">
                    {messages.length === 0 && <div className="text-center text-gray-400 mt-20">Secure Channel Empty</div>}
                    {messages.map((m, i) => (
                        <div key={i} className={`flex ${m.from === 'Buyer' ? 'justify-start' : 'justify-end'}`}>
                            <div className={`max-w-[80%] p-3 rounded-xl text-sm ${
                                m.from === 'Buyer' 
                                ? 'bg-blue-100 dark:bg-blue-900/40 text-blue-800 dark:text-blue-200 rounded-tl-none' 
                                : 'bg-indigo-100 dark:bg-indigo-900/40 text-indigo-800 dark:text-indigo-200 rounded-tr-none'
                            }`}>
                                <div className="text-[10px] font-bold opacity-50 mb-1">{m.from}</div>
                                {m.text}
                            </div>
                        </div>
                    ))}
                </div>

                {/* Agent B */}
                 <div className="w-1/4 bg-indigo-50 dark:bg-indigo-900/20 rounded-2xl p-4 flex flex-col items-center border border-indigo-200 dark:border-indigo-800">
                    <div className="w-16 h-16 bg-indigo-500 rounded-full flex items-center justify-center mb-4 text-white">
                        <span className="text-3xl">🤖</span>
                    </div>
                    <div className="font-bold text-indigo-700 dark:text-indigo-300">Seller Agent</div>
                    <div className="text-xs text-center text-gray-500 mt-2">Goal: Maximize profit (> $40)</div>
                </div>

            </div>
        </div>
    );
}