'use client';

import { useState } from 'react';

interface TestPanelProps {
  data: any;
}

export default function TestPanel({ data }: TestPanelProps) {
  const [messages, setMessages] = useState([
    {
      id: 1,
      role: 'assistant',
      content: `你好！我是${data.name || 'AI Assistant'}。我已经准备好为您提供帮助了。请告诉我您需要什么协助？`,
      timestamp: new Date()
    }
  ]);
  const [inputMessage, setInputMessage] = useState('');
  const [isLoading, setIsLoading] = useState(false);

  const sendMessage = async () => {
    if (!inputMessage.trim()) return;

    const userMessage = {
      id: messages.length + 1,
      role: 'user',
      content: inputMessage,
      timestamp: new Date()
    };

    setMessages(prev => [...prev, userMessage]);
    setInputMessage('');
    setIsLoading(true);

    setTimeout(() => {
      const aiResponse = {
        id: messages.length + 2,
        role: 'assistant',
        content: `这是一个测试响应。在实际部署后，我将根据您配置的模型和知识库来回答问题。当前配置：模型 ${data.model}，温度 ${data.temperature}。`,
        timestamp: new Date()
      };
      
      setMessages(prev => [...prev, aiResponse]);
      setIsLoading(false);
    }, 1500);
  };

  const clearChat = () => {
    setMessages([{
      id: 1,
      role: 'assistant',
      content: `你好！我是${data.name || 'AI Assistant'}。我已经准备好为您提供帮助了。请告诉我您需要什么协助？`,
      timestamp: new Date()
    }]);
  };

  return (
    <div className="space-y-8">
      <div>
        <h3 className="text-lg font-semibold text-gray-900 mb-6">测试对话</h3>
        
        <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
          <div className="lg:col-span-2">
            <div className="bg-gray-50 rounded-xl border border-gray-200 h-96 flex flex-col">
              <div className="p-4 border-b border-gray-200 flex items-center justify-between">
                <div className="flex items-center space-x-3">
                  <div className="w-8 h-8 bg-blue-100 rounded-lg flex items-center justify-center">
                    <span className="text-sm">{data.avatar}</span>
                  </div>
                  <div>
                    <h4 className="font-medium text-gray-900">{data.name || '未命名Agent'}</h4>
                    <p className="text-xs text-gray-500">测试模式</p>
                  </div>
                </div>
                <button
                  onClick={clearChat}
                  className="px-3 py-2 text-sm text-gray-600 hover:bg-gray-200 rounded-lg transition-colors cursor-pointer"
                >
                  清空对话
                </button>
              </div>
              
              <div className="flex-1 p-4 overflow-y-auto space-y-4">
                {messages.map((message) => (
                  <div key={message.id} className={`flex ${message.role === 'user' ? 'justify-end' : 'justify-start'}`}>
                    <div className={`max-w-xs lg:max-w-md px-4 py-2 rounded-lg ${
                      message.role === 'user' 
                        ? 'bg-blue-600 text-white' 
                        : 'bg-white border border-gray-200 text-gray-900'
                    }`}>
                      <p className="text-sm">{message.content}</p>
                      <p className={`text-xs mt-1 ${
                        message.role === 'user' ? 'text-blue-100' : 'text-gray-500'
                      }`}>
                        {message.timestamp.toLocaleTimeString()}
                      </p>
                    </div>
                  </div>
                ))}
                
                {isLoading && (
                  <div className="flex justify-start">
                    <div className="bg-white border border-gray-200 rounded-lg px-4 py-2">
                      <div className="flex items-center space-x-2">
                        <div className="w-2 h-2 bg-gray-400 rounded-full animate-bounce"></div>
                        <div className="w-2 h-2 bg-gray-400 rounded-full animate-bounce" style={{ animationDelay: '0.1s' }}></div>
                        <div className="w-2 h-2 bg-gray-400 rounded-full animate-bounce" style={{ animationDelay: '0.2s' }}></div>
                      </div>
                    </div>
                  </div>
                )}
              </div>
              
              <div className="p-4 border-t border-gray-200">
                <div className="flex space-x-2">
                  <input
                    type="text"
                    placeholder="输入测试消息..."
                    value={inputMessage}
                    onChange={(e) => setInputMessage(e.target.value)}
                    onKeyPress={(e) => e.key === 'Enter' && sendMessage()}
                    className="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm"
                  />
                  <button
                    onClick={sendMessage}
                    disabled={isLoading || !inputMessage.trim()}
                    className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors cursor-pointer whitespace-nowrap"
                  >
                    <div className="w-5 h-5 flex items-center justify-center">
                      <i className="ri-send-plane-line"></i>
                    </div>
                  </button>
                </div>
              </div>
            </div>
          </div>
          
          <div className="space-y-6">
            <div className="bg-white border border-gray-200 rounded-lg p-4">
              <h4 className="font-medium text-gray-900 mb-3">配置预览</h4>
              <div className="space-y-2 text-sm">
                <div className="flex justify-between">
                  <span className="text-gray-600">名称:</span>
                  <span className="text-gray-900">{data.name || '未设置'}</span>
                </div>
                <div className="flex justify-between">
                  <span className="text-gray-600">类型:</span>
                  <span className="text-gray-900">{data.type}</span>
                </div>
                <div className="flex justify-between">
                  <span className="text-gray-600">模型:</span>
                  <span className="text-gray-900">{data.model}</span>
                </div>
                <div className="flex justify-between">
                  <span className="text-gray-600">创造性:</span>
                  <span className="text-gray-900">{data.temperature}</span>
                </div>
                <div className="flex justify-between">
                  <span className="text-gray-600">最大长度:</span>
                  <span className="text-gray-900">{data.maxTokens}</span>
                </div>
              </div>
            </div>
            
            <div className="bg-white border border-gray-200 rounded-lg p-4">
              <h4 className="font-medium text-gray-900 mb-3">测试建议</h4>
              <div className="space-y-2">
                <button
                  onClick={() => setInputMessage('你好，请介绍一下自己')}
                  className="w-full text-left px-3 py-2 text-sm text-gray-700 hover:bg-gray-50 rounded cursor-pointer"
                >
                  基础问候测试
                </button>
                <button
                  onClick={() => setInputMessage('请帮我分析一下这个问题')}
                  className="w-full text-left px-3 py-2 text-sm text-gray-700 hover:bg-gray-50 rounded cursor-pointer"
                >
                  功能测试
                </button>
                <button
                  onClick={() => setInputMessage('你能做什么？有什么限制吗？')}
                  className="w-full text-left px-3 py-2 text-sm text-gray-700 hover:bg-gray-50 rounded cursor-pointer"
                >
                  能力边界测试
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}