<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Telegram Bot - SmartSolTech Admin</title>
    
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <!-- Custom CSS -->
    <link rel="stylesheet" href="/css/main.css">
    <link rel="stylesheet" href="/css/fixes.css">
</head>
<body class="bg-gray-100">
    <!-- Admin Header -->
    <header class="bg-white shadow-sm border-b">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between items-center h-16">
                <div class="flex items-center">
                    <h1 class="text-xl font-semibold text-gray-900">
                        <i class="fas fa-cogs mr-2"></i>
                        SmartSolTech Admin
                    </h1>
                </div>
                <div class="flex items-center space-x-4">
                    <span class="text-sm text-gray-600">
                        Добро пожаловать, <%= user ? user.name : 'Admin' %>!
                    </span>
                    <a href="/" class="text-gray-500 hover:text-gray-700">
                        <i class="fas fa-external-link-alt mr-1"></i>
                        Посмотреть сайт
                    </a>
                    <form action="/admin/logout" method="post" class="inline">
                        <button type="submit" class="text-red-600 hover:text-red-800">
                            <i class="fas fa-sign-out-alt mr-1"></i>
                            Выход
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </header>

    <div class="flex">
        <!-- Admin Sidebar -->
        <aside class="w-64 bg-white shadow-sm admin-sidebar min-h-screen">
            <nav class="mt-5 px-2">
                <div class="space-y-1">
                    <a href="/admin/dashboard" class="group flex items-center px-2 py-2 text-sm font-medium rounded-md text-gray-600 hover:bg-gray-50 hover:text-gray-900">
                        <i class="fas fa-tachometer-alt mr-3"></i>
                        Панель управления
                    </a>
                    <a href="/admin/portfolio" class="group flex items-center px-2 py-2 text-sm font-medium rounded-md text-gray-600 hover:bg-gray-50 hover:text-gray-900">
                        <i class="fas fa-briefcase mr-3"></i>
                        Портфолио
                    </a>
                    <a href="/admin/services" class="group flex items-center px-2 py-2 text-sm font-medium rounded-md text-gray-600 hover:bg-gray-50 hover:text-gray-900">
                        <i class="fas fa-cog mr-3"></i>
                        Услуги
                    </a>
                    <a href="/admin/contacts" class="group flex items-center px-2 py-2 text-sm font-medium rounded-md text-gray-600 hover:bg-gray-50 hover:text-gray-900">
                        <i class="fas fa-envelope mr-3"></i>
                        Сообщения
                    </a>
                    <a href="/admin/media" class="group flex items-center px-2 py-2 text-sm font-medium rounded-md text-gray-600 hover:bg-gray-50 hover:text-gray-900">
                        <i class="fas fa-images mr-3"></i>
                        Медиа
                    </a>
                    <a href="/admin/settings" class="group flex items-center px-2 py-2 text-sm font-medium rounded-md text-gray-600 hover:bg-gray-50 hover:text-gray-900">
                        <i class="fas fa-cogs mr-3"></i>
                        Настройки
                    </a>
                    <a href="/admin/telegram" class="group flex items-center px-2 py-2 text-sm font-medium rounded-md bg-blue-100 text-blue-700">
                        <i class="fab fa-telegram mr-3"></i>
                        Telegram Bot
                    </a>
                    <a href="/admin/banner-editor" class="group flex items-center px-2 py-2 text-sm font-medium rounded-md text-gray-600 hover:bg-gray-50 hover:text-gray-900">
                        <i class="fas fa-paint-brush mr-3"></i>
                        Редактор баннеров
                    </a>
                </div>
            </nav>
        </aside>

        <!-- Main Content -->
        <main class="flex-1 p-8">
            <div class="space-y-6">
                <!-- Header -->
                <div class="bg-white shadow rounded-lg p-6">
                    <div class="flex items-center justify-between">
                        <div>
                            <h1 class="text-2xl font-bold text-gray-900 flex items-center">
                                <i class="fab fa-telegram mr-3 text-blue-500"></i>
                                Telegram Bot
                            </h1>
                            <p class="mt-2 text-gray-600">Настройка и управление уведомлениями через Telegram</p>
                        </div>
                        <div class="flex items-center space-x-3">
                            <div class="flex items-center">
                                <div class="w-3 h-3 rounded-full <%= botConfigured ? 'bg-green-500' : 'bg-red-500' %> mr-2"></div>
                                <span class="text-sm font-medium <%= botConfigured ? 'text-green-700' : 'text-red-700' %>">
                                    <%= botConfigured ? 'Подключен' : 'Не настроен' %>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>

                <% if (!botConfigured) { %>
                <!-- Configuration Instructions -->
                <div class="bg-yellow-50 border-l-4 border-yellow-400 p-6 rounded-lg">
                    <div class="flex">
                        <div class="ml-3">
                            <h3 class="text-lg font-medium text-yellow-800">Настройка Telegram бота</h3>
                            <div class="mt-2 text-sm text-yellow-700">
                                <p class="mb-4">Для настройки Telegram бота выполните следующие шаги:</p>
                                <ol class="list-decimal list-inside space-y-2">
                                    <li>Создайте бота через <a href="https://t.me/BotFather" target="_blank" class="text-blue-600 underline">@BotFather</a> в Telegram</li>
                                    <li>Получите токен бота от BotFather</li>
                                    <li>Создайте группу или используйте личный чат для получения уведомлений</li>
                                    <li>Получите Chat ID группы или чата</li>
                                    <li>Добавьте в файл .env следующие переменные:</li>
                                </ol>
                                <div class="mt-4 bg-gray-800 text-green-400 p-4 rounded font-mono text-sm">
                                    TELEGRAM_BOT_TOKEN=your_bot_token_here<br>
                                    TELEGRAM_CHAT_ID=your_chat_id_here
                                </div>
                                <p class="mt-4">После добавления переменных перезапустите сервер.</p>
                            </div>
                        </div>
                    </div>
                </div>
                <% } else { %>
                <!-- Bot Status and Controls -->
                <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                    <!-- Connection Test -->
                    <div class="bg-white shadow rounded-lg p-6">
                        <h3 class="text-lg font-semibold text-gray-900 mb-4">
                            <i class="fas fa-plug mr-2 text-green-500"></i>
                            Проверка подключения
                        </h3>
                        <p class="text-gray-600 mb-4">
                            Отправить тестовое сообщение для проверки работоспособности бота.
                        </p>
                        <button id="test-connection" class="w-full bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-lg transition-colors">
                            <i class="fas fa-vial mr-2"></i>
                            Тестировать подключение
                        </button>
                        <div id="test-result" class="mt-4 hidden"></div>
                    </div>

                    <!-- Send Custom Message -->
                    <div class="bg-white shadow rounded-lg p-6">
                        <h3 class="text-lg font-semibold text-gray-900 mb-4">
                            <i class="fas fa-paper-plane mr-2 text-blue-500"></i>
                            Отправить сообщение
                        </h3>
                        <form id="send-message-form">
                            <div class="mb-4">
                                <label class="block text-sm font-medium text-gray-700 mb-2">
                                    Сообщение
                                </label>
                                <textarea 
                                    id="custom-message" 
                                    rows="4" 
                                    class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                                    placeholder="Введите текст сообщения..."></textarea>
                            </div>
                            <button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg transition-colors">
                                <i class="fas fa-send mr-2"></i>
                                Отправить
                            </button>
                        </form>
                        <div id="send-result" class="mt-4 hidden"></div>
                    </div>
                </div>

                <!-- Notification Settings -->
                <div class="bg-white shadow rounded-lg p-6">
                    <h3 class="text-lg font-semibold text-gray-900 mb-6">
                        <i class="fas fa-bell mr-2 text-purple-500"></i>
                        Настройки уведомлений
                    </h3>
                    
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <!-- Notification Types -->
                        <div>
                            <h4 class="font-medium text-gray-900 mb-4">Типы уведомлений</h4>
                            <div class="space-y-3">
                                <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                                    <div class="flex items-center">
                                        <i class="fas fa-envelope mr-3 text-blue-500"></i>
                                        <span class="text-sm text-gray-900">Новые обращения</span>
                                    </div>
                                    <div class="w-3 h-3 bg-green-500 rounded-full"></div>
                                </div>
                                <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                                    <div class="flex items-center">
                                        <i class="fas fa-calculator mr-3 text-green-500"></i>
                                        <span class="text-sm text-gray-900">Расчеты стоимости</span>
                                    </div>
                                    <div class="w-3 h-3 bg-green-500 rounded-full"></div>
                                </div>
                                <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                                    <div class="flex items-center">
                                        <i class="fas fa-briefcase mr-3 text-purple-500"></i>
                                        <span class="text-sm text-gray-900">Новые проекты</span>
                                    </div>
                                    <div class="w-3 h-3 bg-green-500 rounded-full"></div>
                                </div>
                                <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                                    <div class="flex items-center">
                                        <i class="fas fa-cog mr-3 text-orange-500"></i>
                                        <span class="text-sm text-gray-900">Новые услуги</span>
                                    </div>
                                    <div class="w-3 h-3 bg-green-500 rounded-full"></div>
                                </div>
                            </div>
                        </div>

                        <!-- Bot Information -->
                        <div>
                            <h4 class="font-medium text-gray-900 mb-4">Информация о боте</h4>
                            <div class="space-y-3">
                                <div class="flex justify-between">
                                    <span class="text-sm text-gray-600">Статус:</span>
                                    <span class="text-sm font-medium text-green-600">Активен</span>
                                </div>
                                <div class="flex justify-between">
                                    <span class="text-sm text-gray-600">Токен:</span>
                                    <span class="text-sm font-mono text-gray-800">••••••••••</span>
                                </div>
                                <div class="flex justify-between">
                                    <span class="text-sm text-gray-600">Chat ID:</span>
                                    <span class="text-sm font-mono text-gray-800">••••••••••</span>
                                </div>
                                <div class="flex justify-between">
                                    <span class="text-sm text-gray-600">Последнее уведомление:</span>
                                    <span class="text-sm text-gray-600">Недавно</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Recent Notifications -->
                <div class="bg-white shadow rounded-lg p-6">
                    <h3 class="text-lg font-semibold text-gray-900 mb-6">
                        <i class="fas fa-history mr-2 text-gray-500"></i>
                        Недавние уведомления
                    </h3>
                    
                    <div class="text-center py-8 text-gray-500">
                        <i class="fas fa-inbox text-4xl text-gray-300 mb-4"></i>
                        <p>Уведомления будут отображаться здесь после отправки</p>
                    </div>
                </div>
                <% } %>
            </div>
        </main>
    </div>

    <!-- JavaScript -->
    <script src="/js/main.js"></script>
    
    <script>
        <% if (botConfigured) { %>
        // Test connection
        document.getElementById('test-connection').addEventListener('click', async () => {
            const button = document.getElementById('test-connection');
            const resultDiv = document.getElementById('test-result');
            
            button.disabled = true;
            button.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i>Тестирование...';
            
            try {
                const response = await fetch('/admin/telegram/test', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    }
                });
                
                const result = await response.json();
                
                resultDiv.className = 'mt-4 p-3 rounded-lg ' + (result.success ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800');
                resultDiv.innerHTML = `<i class="fas ${result.success ? 'fa-check' : 'fa-times'} mr-2"></i>${result.message}`;
                resultDiv.classList.remove('hidden');
                
            } catch (error) {
                resultDiv.className = 'mt-4 p-3 rounded-lg bg-red-100 text-red-800';
                resultDiv.innerHTML = '<i class="fas fa-times mr-2"></i>Ошибка при тестировании подключения';
                resultDiv.classList.remove('hidden');
            } finally {
                button.disabled = false;
                button.innerHTML = '<i class="fas fa-vial mr-2"></i>Тестировать подключение';
            }
        });
        
        // Send custom message
        document.getElementById('send-message-form').addEventListener('submit', async (e) => {
            e.preventDefault();
            
            const messageInput = document.getElementById('custom-message');
            const resultDiv = document.getElementById('send-result');
            const message = messageInput.value.trim();
            
            if (!message) {
                resultDiv.className = 'mt-4 p-3 rounded-lg bg-red-100 text-red-800';
                resultDiv.innerHTML = '<i class="fas fa-times mr-2"></i>Введите сообщение';
                resultDiv.classList.remove('hidden');
                return;
            }
            
            try {
                const response = await fetch('/admin/telegram/send', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({ message })
                });
                
                const result = await response.json();
                
                resultDiv.className = 'mt-4 p-3 rounded-lg ' + (result.success ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800');
                resultDiv.innerHTML = `<i class="fas ${result.success ? 'fa-check' : 'fa-times'} mr-2"></i>${result.message}`;
                resultDiv.classList.remove('hidden');
                
                if (result.success) {
                    messageInput.value = '';
                }
                
            } catch (error) {
                resultDiv.className = 'mt-4 p-3 rounded-lg bg-red-100 text-red-800';
                resultDiv.innerHTML = '<i class="fas fa-times mr-2"></i>Ошибка при отправке сообщения';
                resultDiv.classList.remove('hidden');
            }
        });
        <% } %>
    </script>
</body>
</html>