import { useState } from 'react';
import { Send, Loader2, MessageSquare } from 'lucide-react';

export default function ChatInterface() {
  const [message, setMessage] = useState('');
  const [chatHistory, setChatHistory] = useState([]);
  const [isLoading, setIsLoading] = useState(false);

  const sendMessage = async (e) => {
    e.preventDefault();
    if (!message.trim()) return;

    setIsLoading(true);
    const newMessage = { text: message, sender: 'user', timestamp: new Date().toISOString() };
    setChatHistory(prev => [...prev, newMessage]);

    try {
      // Replace YOUR_N8N_WEBHOOK_URL with your actual n8n webhook URL
      const response = await fetch('YOUR_N8N_WEBHOOK_URL', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          message: message,
          timestamp: new Date().toISOString(),
        }),
      });

      if (response.ok) {
        // Add system response if your n8n workflow sends one back
        const data = await response.json();
        if (data.response) {
          setChatHistory(prev => [...prev, {
            text: data.response,
            sender: 'system',
            timestamp: new Date().toISOString()
          }]);
        }
      }
    } catch (error) {
      console.error('Error sending message:', error);
      setChatHistory(prev => [...prev, {
        text: 'Error sending message. Please try again.',
        sender: 'system',
        timestamp: new Date().toISOString()
      }]);
    }

    setIsLoading(false);
    setMessage('');
  };

  return (
    <div className="flex flex-col min-h-screen bg-gradient-to-br from-blue-50 to-indigo-50">
      <header className="bg-white/80 backdrop-blur-sm border-b border-gray-200 py-4 px-6 sticky top-0 z-10">
        <div className="max-w-4xl mx-auto flex items-center gap-3">
          <div className="bg-blue-600 p-2 rounded-lg">
            <MessageSquare className="w-6 h-6 text-white" />
          </div>
          <div>
            <h1 className="text-xl font-semibold text-gray-800">N8N Chat Trigger</h1>
            <p className="text-sm text-gray-500">Connected to your workflow</p>
          </div>
        </div>
      </header>

      <main className="flex-1 container mx-auto max-w-4xl p-4 sm:p-6">
        <div className="bg-white rounded-xl shadow-lg border border-gray-100 h-[600px] flex flex-col">
          <div className="flex-1 overflow-y-auto p-4 space-y-4 scroll-smooth">
            {chatHistory.length === 0 && (
              <div className="h-full flex flex-col items-center justify-center text-gray-500">
                <MessageSquare className="w-12 h-12 mb-4 text-gray-400" />
                <p className="text-lg font-medium">No messages yet</p>
                <p className="text-sm">Start the conversation to trigger your n8n workflow</p>
              </div>
            )}
            {chatHistory.map((chat, index) => (
              <div
                key={index}
                className={`flex ${chat.sender === 'user' ? 'justify-end' : 'justify-start'} animate-fadeIn`}
              >
                <div
                  className={`max-w-[80%] rounded-2xl px-5 py-3 ${
                    chat.sender === 'user'
                      ? 'bg-blue-600 text-white shadow-sm'
                      : 'bg-gray-100 text-gray-800'
                  } transform transition-all duration-200 hover:scale-[1.02]`}
                >
                  <p className="text-[15px] leading-relaxed">{chat.text}</p>
                  <p className="text-xs mt-1.5 opacity-70">
                    {new Date(chat.timestamp).toLocaleTimeString([], { 
                      hour: '2-digit', 
                      minute: '2-digit'
                    })}
                  </p>
                </div>
              </div>
            ))}
          </div>

          <form onSubmit={sendMessage} className="border-t p-4">
            <div className="flex gap-3 items-center">
              <input
                type="text"
                value={message}
                onChange={(e) => setMessage(e.target.value)}
                placeholder="Type your message..."
                className="flex-1 rounded-xl border border-gray-200 px-4 py-3 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200 placeholder:text-gray-400 text-gray-700"
                disabled={isLoading}
              />
              <button
                type="submit"
                disabled={isLoading || !message.trim()}
                className="bg-blue-600 text-white rounded-xl px-5 py-3 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200 shadow-sm hover:shadow flex items-center justify-center min-w-[48px]"
              >
                {isLoading ? (
                  <Loader2 className="w-5 h-5 animate-spin" />
                ) : (
                  <Send className="w-5 h-5" />
                )}
              </button>
            </div>
          </form>
        </div>
      </main>

      <style jsx global>{`
        @keyframes fadeIn {
          from { opacity: 0; transform: translateY(10px); }
          to { opacity: 1; transform: translateY(0); }
        }
        .animate-fadeIn {
          animation: fadeIn 0.3s ease-out forwards;
        }
      `}</style>
    </div>
  );
}