<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sharey Admin Panel</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
    
    <!-- Immediate theme application to prevent flash -->
    <script>
        (function() {
            function getCookie(name) {
                const nameEQ = name + "=";
                const ca = document.cookie.split(';');
                for (let i = 0; i < ca.length; i++) {
                    let c = ca[i];
                    while (c.charAt(0) === ' ') c = c.substring(1, c.length);
                    if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length);
                }
                return null;
            }
            
            function getSystemTheme() {
                return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
            }
            
            const savedTheme = getCookie('sharey-theme') || 'auto';
            let actualTheme;
            
            if (savedTheme === 'auto') {
                actualTheme = getSystemTheme();
            } else {
                actualTheme = savedTheme;
            }
            
            if (actualTheme === 'dark') {
                document.documentElement.setAttribute('data-theme', 'dark');
            }
        })();
    </script>
    
    <style>
        .admin-container {
            max-width: 1000px;
            margin: 0 auto;
            padding: 20px;
        }
        
        .admin-header {
            text-align: center;
            margin-bottom: 40px;
            padding-bottom: 20px;
            border-bottom: 2px solid var(--border-color);
        }
        
        .admin-section {
            background: var(--bg-secondary);
            border: 1px solid var(--border-color);
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 20px;
        }
        
        .admin-section h3 {
            margin-top: 0;
            color: var(--text-primary);
            border-bottom: 1px solid var(--border-color);
            padding-bottom: 10px;
        }
        
        .status-indicator {
            display: inline-block;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            margin-right: 8px;
        }
        
        .status-online { background-color: #4CAF50; }
        .status-maintenance { background-color: #ff9800; }
        .status-offline { background-color: #f44336; }
        
        .admin-button {
            display: inline-block;
            padding: 10px 20px;
            background: var(--border-color);
            color: white;
            text-decoration: none;
            border-radius: 6px;
            border: none;
            cursor: pointer;
            margin: 5px;
            transition: background-color 0.3s ease;
        }
        
        .admin-button:hover {
            background: var(--text-secondary);
        }
        
        .admin-button.danger {
            background: #f44336;
        }
        
        .admin-button.danger:hover {
            background: #d32f2f;
        }
        
        .admin-button.success {
            background: #4CAF50;
        }
        
        .admin-button.success:hover {
            background: #45a049;
        }
        
        .admin-input {
            width: 100%;
            padding: 10px;
            margin: 10px 0;
            border: 1px solid var(--border-color);
            border-radius: 4px;
            background: var(--bg-primary);
            color: var(--text-primary);
        }
        
        .admin-textarea {
            width: 100%;
            padding: 10px;
            margin: 10px 0;
            border: 1px solid var(--border-color);
            border-radius: 4px;
            background: var(--bg-primary);
            color: var(--text-primary);
            resize: vertical;
            min-height: 100px;
        }
        
        .status-display {
            text-align: center;
            margin: 20px 0;
        }
        
        .status-badge {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            padding: 15px 25px;
            border-radius: 8px;
            font-size: 1.1rem;
        }
        
        .status-badge.status-online {
            background: #e8f5e8;
            border: 2px solid #4CAF50;
            color: #2e7d32;
        }
        
        .status-badge.status-maintenance {
            background: #fff3e0;
            border: 2px solid #ff9800;
            color: #f57c00;
        }
        
        [data-theme="dark"] .status-badge.status-online {
            background: #1e3a1e;
            color: #81c784;
        }
        
        [data-theme="dark"] .status-badge.status-maintenance {
            background: #3e2723;
            color: #ffb74d;
        }
            font-size: 0.9rem;
        }
        
        .logout-button {
            position: absolute;
            top: 20px;
            right: 20px;
            padding: 8px 16px;
            background: #f44336;
            color: white;
            text-decoration: none;
            border-radius: 4px;
            font-size: 14px;
        }
        
        .logout-button:hover {
            background: #d32f2f;
        }
    </style>
</head>
<body>
    <!-- Theme toggle button -->
    <button id="themeToggle" class="theme-toggle" title="Switch to dark mode">�</button>
    
    <!-- Logout button -->
    <a href="/admin/logout" class="logout-button">🚪 Logout</a>
    
    <div class="container">
        <div class="admin-container">
            <div class="admin-header">
                <h1>🛠️ Sharey Admin Panel</h1>
                <p>Manage your Sharey instance</p>
            </div>
            
            <!-- Service Status -->
            <div class="admin-section">
                <h3>� Service Status</h3>
                <div class="status-display">
                    {% if maintenance_enabled %}
                    <div class="status-badge status-maintenance">
                        <span class="status-indicator status-maintenance"></span>
                        <strong>Maintenance Mode</strong>
                    </div>
                    {% else %}
                    <div class="status-badge status-online">
                        <span class="status-indicator status-online"></span>
                        <strong>Online</strong>
                    </div>
                    {% endif %}
                </div>
            </div>
            
            <!-- Maintenance Mode -->
            <div class="admin-section">
                <h3>🔧 Maintenance Mode</h3>
                <p><strong>Current Status:</strong> 
                    {% if maintenance_enabled %}
                    <span style="color: #ff9800;">🟡 ENABLED</span>
                    {% else %}
                    <span style="color: #4CAF50;">🟢 DISABLED</span>
                    {% endif %}
                </p>
                
                <form method="POST" action="/admin/maintenance">
                    <label for="maintenance_message">Maintenance Message:</label>
                    <textarea name="maintenance_message" id="maintenance_message" class="admin-textarea" placeholder="Enter maintenance message...">{{ maintenance_message }}</textarea>
                    
                    <label for="estimated_return">Estimated Return Time:</label>
                    <input type="text" name="estimated_return" id="estimated_return" class="admin-input" placeholder="e.g., 2025-08-22 15:00 UTC" value="{{ estimated_return }}">
                    
                    {% if maintenance_enabled %}
                    <button type="submit" name="action" value="disable" class="admin-button success">✅ Disable Maintenance Mode</button>
                    {% else %}
                    <button type="submit" name="action" value="enable" class="admin-button danger">🔧 Enable Maintenance Mode</button>
                    {% endif %}
                </form>
            </div>
            
            <!-- Configuration -->
            <div class="admin-section">
                <h3>⚙️ Configuration</h3>
                <form method="POST" action="/admin/config">
                    <label for="max_file_size">Max File Size (MB):</label>
                    <input type="number" name="max_file_size" id="max_file_size" class="admin-input" value="{{ config.upload.max_file_size_mb }}" min="1" max="1000">
                    
                    <label for="max_paste_length">Max Paste Length (characters):</label>
                    <input type="number" name="max_paste_length" id="max_paste_length" class="admin-input" value="{{ config.paste.max_length }}" min="1000" max="10000000">
                    
                    <button type="submit" class="admin-button">💾 Save Configuration</button>
                </form>
            </div>
            
            <!-- Quick Actions -->
            <div class="admin-section">
                <h3>⚡ Quick Actions</h3>
                <a href="/admin/stats" class="admin-button">📈 Detailed Statistics</a>
                <a href="/health" class="admin-button" target="_blank">🩺 Health Check</a>
                <a href="/" class="admin-button" target="_blank">🏠 View Site</a>
                <button onclick="location.reload()" class="admin-button">🔄 Refresh Data</button>
            </div>
        </div>
    </div>

    <script src="{{ url_for('static', filename='script.js') }}"></script>
</body>
</html>
