<!-- Telegram-like UI in Svelte with Tailwind -->
<script lang="ts">
  import { invoke } from '@tauri-apps/api/core';
  
  let currentChat = 'John Doe';
  let message = '';
  let messages = [
    { id: 1, text: 'Hey there!', own: false },
    { id: 2, text: 'Hi! How are you?', own: true },
    { id: 3, text: "I'm doing great, thanks for asking!", own: false }
  ];
  
  let chats = [
    { name: 'John Doe', preview: 'Hey, how are you?', active: true },
    { name: 'Alice Smith', preview: 'See you tomorrow!', active: false },
    { name: 'Bob Wilson', preview: 'Thanks for the help!', active: false }
  ];
  
  async function sendMessage() {
    if (!message.trim()) return;
    
    messages = [...messages, {
      id: Date.now(),
      text: message,
      own: true
    }];
    
    // Call Tauri backend
    try {
      await invoke('send_message', { content: message });
    } catch (error) {
      console.error('Failed to send message:', error);
    }
    
    message = '';
  }
  
  function selectChat(chatName: string) {
    chats = chats.map(chat => ({
      ...chat,
      active: chat.name === chatName
    }));
    currentChat = chatName;
  }
</script>

<div class="flex h-screen bg-slate-900">
  <!-- Sidebar -->
  <div class="w-80 bg-slate-800 text-white border-r border-slate-700">
    <!-- Sidebar Header -->
    <div class="p-5 border-b border-slate-700">
      <h3 class="text-lg font-semibold">Chats</h3>
    </div>
    
    <!-- Chat List -->
    <div class="overflow-y-auto h-[calc(100vh-80px)]">
      {#each chats as chat}
        <button 
          class="px-5 w-full text-start py-3 border-b border-slate-700 cursor-pointer hover:bg-slate-700 transition-colors {chat.active ? 'bg-slate-700' : ''}"
          on:click={() => selectChat(chat.name)}
          tabindex="0"
        >
          <div class="font-medium mb-1">{chat.name}</div>
          <div class="text-gray-400 text-sm">{chat.preview}</div>
        </button>
      {/each}
    </div>
  </div>
  
  <!-- Main Chat Area -->
  <div class="flex-1 flex flex-col bg-slate-900">
    <!-- Chat Header -->
    <div class="p-4 bg-slate-800 border-b border-slate-700 text-white">
      <h3 class="text-lg font-semibold">{currentChat}</h3>
    </div>
    
    <!-- Messages -->
    <div class="flex-1 p-5 overflow-y-auto bg-slate-900">
      {#each messages as msg}
        <div class="mb-4 max-w-[70%] {msg.own ? 'ml-auto text-right' : ''}">
          <div class="inline-block px-3 py-2 rounded-xl text-white {msg.own ? 'bg-blue-600' : 'bg-slate-700'}">
            {msg.text}
          </div>
        </div>
      {/each}
    </div>
    
    <!-- Input Area -->
    <div class="p-4 bg-slate-800 border-t border-slate-700 flex gap-3">
      <input 
        type="text" 
        bind:value={message}
        on:keydown={(e) => e.key === 'Enter' && sendMessage()}
        placeholder="Type a message..."
        class="flex-1 px-4 py-2 bg-slate-900 border border-slate-600 rounded-full text-white placeholder-gray-400 outline-none focus:ring-2 focus:ring-blue-500"
      />
      <button 
        on:click={sendMessage}
        class="w-10 h-10 bg-blue-600 text-white rounded-full hover:bg-blue-700 transition-colors flex items-center justify-center"
      >
        →
      </button>
    </div>
  </div>
</div>
