<script lang="ts">
    let messages: any = [];
    let newMessage = '';
    let selectedLanguage = 'en';
    
    const languages = [
        { value: 'en', label: 'English' },
        { value: 'es', label: 'Español' },
        { value: 'fr', label: 'Français' },
        { value: 'de', label: 'Deutsch' },
        { value: 'ja', label: '日本語' }
    ];

    function addMessage() {
        if (!newMessage.trim()) return;
        
        // Add user message
        messages = [...messages, {
            id: Date.now(),
            content: newMessage,
            isUser: true,
            timestamp: new Date().toLocaleTimeString()
        }];

        // Simulate bot response
        setTimeout(() => {
            messages = [...messages, {
                id: Date.now() + 1,
                content: `Translated to ${selectedLanguage}: [${newMessage}]`,
                isUser: false,
                timestamp: new Date().toLocaleTimeString()
            }];
        }, 1000);

        newMessage = '';
    }
</script>

<div class="flex flex-col h-full overflow-scroll bg-base-200">
    <!-- Language Selector -->
    <div class="flex justify-end p-4 bg-base-100 shadow-sm">
        <select 
            bind:value={selectedLanguage}
            class="select select-primary select-sm w-full max-w-xs"
        >
            {#each languages as lang}
                <option value={lang.value}>{lang.label}</option>
            {/each}
        </select>
    </div>

    <!-- Chat Messages -->
    <div class="flex-1 overflow-y-auto p-4 space-y-4">
        {#each messages as message}
            <div class="chat {message.isUser ? 'chat-end' : 'chat-start'}">
                <div class="chat-bubble {message.isUser ? 'chat-bubble-primary' : 'chat-bubble-secondary'}">
                    {message.content}
                    <div class="text-xs opacity-50 mt-1">{message.timestamp}</div>
                </div>
            </div>
        {/each}
    </div>

    <!-- Message Input -->
    <div class="p-4 bg-base-100 border-t">
        <form on:submit|preventDefault={addMessage} class="flex gap-2">
            <input
                type="text"
                bind:value={newMessage}
                placeholder="Type a message..."
                class="input input-bordered flex-1"
            />
            <button type="submit" class="btn btn-primary">
                Send
            </button>
        </form>
    </div>
</div>