<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Quip - Discord Clone</title>
    <link rel="stylesheet" href="/styles/main.css">
    <link rel="icon" href="/assets/images/favicon.ico">
</head>
<body>
    <div id="app">
        <!-- Компонент авторизации -->
        <div id="auth-component" class="auth-container" v-if="!isAuthenticated">
            <div class="auth-form">
                <div class="logo">
                    <h1>Quip</h1>
                    <p>Общайтесь в реальном времени</p>
                </div>
                
                <form @submit.prevent="handleAuth">
                    <div v-if="!isLoginForm" class="form-group">
                        <input type="email" v-model="authData.email" placeholder="Email" required>
                    </div>
                    
                    <div class="form-group">
                        <input type="text" v-model="authData.username" placeholder="Имя пользователя" required>
                    </div>
                    
                    <div class="form-group">
                        <input type="password" v-model="authData.password" placeholder="Пароль" required>
                    </div>

                    <button type="submit" class="btn-primary" :disabled="loading">
                        <span v-if="loading">Загрузка...</span>
                        <span v-else>{{ isLoginForm ? 'Войти' : 'Зарегистрироваться' }}</span>
                    </button>
                </form>

                <p class="auth-switch" @click="toggleAuthForm">
                    {{ isLoginForm ? 'Нет аккаунта? Зарегистрируйтесь' : 'Есть аккаунт? Войдите' }}
                </p>

                <div v-if="authError" class="error-message">{{ authError }}</div>
            </div>
        </div>

        <!-- Основной интерфейс -->
        <div id="main-component" class="app-container" v-else>
            <!-- Боковая панель серверов -->
            <div class="servers-sidebar">
                <div class="server-list">
                    <div class="server-icon home" 
                         :class="{ active: currentView === 'home' }"
                         @click="showHome">
                         🏠
                    </div>
                    <div v-for="server in servers" :key="server.id" 
                         class="server-icon" 
                         :class="{ active: currentServer?.id === server.id }"
                         @click="selectServer(server)"
                         :title="server.name">
                         {{ server.icon || server.name.charAt(0).toUpperCase() }}
                    </div>
                    <div class="server-icon add" @click="showCreateServerModal" title="Добавить сервер">
                        +
                    </div>
                </div>
                
                <div class="user-panel">
                    <div class="user-info">
                        <div class="user-avatar">{{ user.username.charAt(0).toUpperCase() }}</div>
                        <span class="username">{{ user.username }}</span>
                    </div>
                    <button class="logout-btn" @click="logout" title="Выйти">🚪</button>
                </div>
            </div>

            <!-- Панель каналов -->
            <div class="channels-sidebar" v-if="currentView === 'server'">
                <div class="server-header">
                    <h3>{{ currentServer?.name }}</h3>
                    <div class="server-actions">
                        <button @click="showCreateChannelModal" title="Создать канал">+</button>
                    </div>
                </div>
                
                <div class="channels-list">
                    <div class="channel-category">
                        <h4>Текстовые каналы</h4>
                    </div>
                    <div v-for="channel in textChannels" :key="channel.id"
                         class="channel-item"
                         :class="{ active: currentChannel?.id === channel.id }"
                         @click="selectChannel(channel)">
                         # {{ channel.name }}
                    </div>
                    
                    <div class="channel-category">
                        <h4>Голосовые каналы</h4>
                    </div>
                    <div v-for="channel in voiceChannels" :key="channel.id"
                         class="channel-item voice"
                         @click="joinVoiceChannel(channel)">
                         🔊 {{ channel.name }}
                         <span class="voice-users">{{ getVoiceUsersCount(channel.id) }}</span>
                    </div>
                </div>
            </div>

            <!-- Домашняя страница -->
            <div class="home-content" v-if="currentView === 'home'">
                <div class="welcome-panel">
                    <h2>Добро пожаловать, {{ user.username }}! 👋</h2>
                    <p>Выберите сервер или создайте новый чтобы начать общение</p>
                    
                    <div class="quick-actions">
                        <button @click="showCreateServerModal" class="action-btn">
                            📁 Создать сервер
                        </button>
                        <button @click="joinDemoServer" class="action-btn">
                            🎮 Присоединиться к демо-серверу
                        </button>
                    </div>
                </div>
            </div>

            <!-- Область чата -->
            <div class="chat-area" v-if="currentView === 'server' && currentChannel">
                <div class="chat-header">
                    <div class="channel-info">
                        <h4># {{ currentChannel.name }}</h4>
                        <p>{{ currentChannel.description || 'Общий чат' }}</p>
                    </div>
                    <div class="channel-actions">
                        <button @click="showChannelMembers" title="Участники">👥</button>
                    </div>
                </div>

                <div class="messages-container" ref="messagesContainer">
                    <div v-for="message in currentChannelMessages" :key="message.id" class="message">
                        <div class="message-avatar" :style="{ backgroundColor: getAvatarColor(message.user_id) }">
                            {{ message.username.charAt(0).toUpperCase() }}
                        </div>
                        <div class="message-content">
                            <div class="message-header">
                                <span class="username">{{ message.username }}</span>
                                <span class="timestamp">{{ formatTime(message.created_at) }}</span>
                            </div>
                            <div class="message-text">{{ message.content }}</div>
                        </div>
                    </div>
                </div>

                <div class="message-input-container">
                    <input type="text" v-model="newMessage" @keypress.enter="sendMessage" 
                           placeholder={`Напишите сообщение в #${currentChannel?.name}...`} 
                           class="message-input">
                </div>
            </div>

            <!-- Пустой чат -->
            <div class="empty-chat" v-if="currentView === 'server' && !currentChannel">
                <div class="empty-state">
                    <h3>Выберите канал</h3>
                    <p>Выберите текстовый канал чтобы начать общение</p>
                </div>
            </div>
        </div>

        <!-- Модальное окно создания сервера -->
        <div class="modal" v-if="showServerModal">
            <div class="modal-content">
                <h3>Создать сервер</h3>
                <form @submit.prevent="createServer">
                    <div class="form-group">
                        <input type="text" v-model="newServer.name" placeholder="Название сервера" required>
                    </div>
                    <div class="form-actions">
                        <button type="button" @click="showServerModal = false">Отмена</button>
                        <button type="submit">Создать</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="/js/config.js"></script>
    <script src="/js/api.js"></script>
    <script src="/js/websocket.js"></script>
    <script src="/js/app.js"></script>
</body>
</html>