import React, { useState } from 'react';
import { PlusIcon } from './icons/PlusIcon';
import { ChatBubbleIcon } from './icons/ChatBubbleIcon';
import { ChevronDownIcon } from './icons/ChevronDownIcon';
import { SendIcon } from './icons/SendIcon';

const mockConversations = [
    { id: 1, title: 'Q4 Social Media Campaign Snippets' },
    { id: 2, title: 'Email Subject Line Variations' },
    { id: 3, title: 'New Product Launch Announcement' },
    { id: 4, title: 'Website Homepage Copy Draft' },
];

export const CopyGenAI: React.FC = () => {
    const [activeConversationId, setActiveConversationId] = useState<number>(1);
    const [message, setMessage] = useState<string>('');

    const handleSendMessage = (e: React.FormEvent) => {
        e.preventDefault();
        if (!message.trim()) return;
        // Logic to send message will be added here
        console.log('Sending message:', message);
        setMessage('');
    };

    return (
        <div className="flex h-full bg-oliver-grey">
            {/* Conversation History Sidebar */}
            <aside className="w-80 flex-shrink-0 bg-gray-100 border-r border-gray-200 flex flex-col">
                <div className="p-4 border-b border-gray-200">
                    <button className="w-full flex items-center justify-center gap-2 bg-oliver-azure text-white font-semibold py-2.5 px-4 rounded-lg hover:bg-oliver-azure transition-colors duration-300">
                        <PlusIcon className="h-5 w-5" />
                        Start new conversation
                    </button>
                </div>
                <div className="flex-1 overflow-y-auto">
                    <nav className="p-2 space-y-1">
                        {mockConversations.map((convo) => (
                            <button
                                key={convo.id}
                                onClick={() => setActiveConversationId(convo.id)}
                                className={`w-full flex items-center gap-3 px-3 py-2.5 text-left text-sm font-medium rounded-md transition-colors duration-200 ${
                                    activeConversationId === convo.id
                                        ? 'bg-oliver-azure/10 text-oliver-azure'
                                        : 'text-gray-700 hover:bg-gray-200'
                                }`}
                            >
                                <ChatBubbleIcon className="h-5 w-5 flex-shrink-0" />
                                <span className="truncate flex-1">{convo.title}</span>
                            </button>
                        ))}
                    </nav>
                </div>
            </aside>

            {/* Main Chat Area */}
            <main className="flex-1 flex flex-col">
                <header className="flex-shrink-0 bg-white/80 backdrop-blur-sm border-b border-gray-200 p-4">
                    <div className="flex items-center gap-4">
                        <button className="flex items-center gap-2 bg-white text-gray-800 font-semibold py-2 px-4 rounded-lg border border-gray-300 hover:bg-gray-100 transition-colors duration-200">
                            <span>Select an assistant</span>
                            <ChevronDownIcon className="h-4 w-4 text-gray-500" />
                        </button>
                        <button className="flex items-center gap-2 bg-white text-gray-800 font-semibold py-2 px-4 rounded-lg border border-gray-300 hover:bg-gray-100 transition-colors duration-200">
                            <span>Barclays</span>
                            <ChevronDownIcon className="h-4 w-4 text-gray-500" />
                        </button>
                    </div>
                </header>

                {/* Message Display */}
                <div className="flex-1 flex flex-col items-center justify-center p-8">
                    <div className="text-center">
                         <h1 className="text-3xl font-bold text-oliver-black">CopyGenAI</h1>
                         <p className="mt-2 text-gray-600">How can I help you today?</p>
                    </div>
                </div>

                {/* Message Input */}
                <div className="flex-shrink-0 p-4 bg-white/80 backdrop-blur-sm border-t border-gray-200">
                    <div className="max-w-3xl mx-auto">
                         <form onSubmit={handleSendMessage} className="relative">
                            <textarea
                                value={message}
                                onChange={(e) => setMessage(e.target.value)}
                                onKeyDown={(e) => {
                                    if (e.key === 'Enter' && !e.shiftKey) {
                                        e.preventDefault();
                                        handleSendMessage(e);
                                    }
                                }}
                                className="w-full p-3 pr-14 border border-gray-300 rounded-lg resize-none focus:ring-2 focus:ring-oliver-azure focus:border-oliver-azure transition"
                                placeholder="Type your message here..."
                                rows={1}
                            />
                            <button
                                type="submit"
                                className="absolute right-3 top-1/2 -translate-y-1/2 p-2 rounded-full text-white bg-oliver-azure hover:bg-oliver-azure disabled:bg-gray-400 transition-colors"
                                disabled={!message.trim()}
                                aria-label="Send message"
                            >
                                <SendIcon className="h-5 w-5" />
                            </button>
                        </form>
                    </div>
                </div>
            </main>
        </div>
    );
};