<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Oppman Admin - FastOpp</title>
    <link rel="icon" type="image/x-icon" href="{{ url_for('static', path='/favicon.ico') }}">
    
    <!-- Tailwind CSS CDN -->
    <script src="https://cdn.tailwindcss.com"></script>
    
    <!-- HTMX CDN -->
    <script src="https://unpkg.com/htmx.org@2.0.6"></script>
    
    <!-- Alpine.js CDN -->
    <script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
    
    <!-- Custom Tailwind Config -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        'ai-blue': '#3B82F6',
                        'ai-purple': '#8B5CF6'
                    }
                }
            }
        }
    </script>
</head>
<body class="bg-gray-50">
    <!-- Header -->
    <div class="bg-gradient-to-r from-ai-blue to-ai-purple text-white py-8">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex items-center justify-between">
                <div>
                    <h1 class="text-4xl font-bold mb-2">Oppman Admin Panel</h1>
                    <p class="text-blue-100">System administration and management tools</p>
                </div>
                
                <div class="flex items-center space-x-4">
                    <a href="/admin/" 
                       class="bg-white bg-opacity-20 hover:bg-opacity-30 text-white px-6 py-2 rounded-lg font-semibold transition-all duration-200">
                        SQLAdmin
                    </a>
                    <a href="/" 
                       class="bg-white text-ai-blue px-6 py-2 rounded-lg font-semibold hover:bg-blue-50 transition-colors">
                        Home
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- Main Content -->
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12" x-data="oppmanAdmin()">
        <!-- Success/Error Messages -->
        <div id="messages" class="mb-8"></div>

        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
            <!-- Password Management -->
            <div class="bg-white rounded-xl shadow-lg p-8 hover:shadow-xl transition-shadow">
                <div class="flex items-center mb-6">
                    <div class="w-12 h-12 bg-ai-blue rounded-lg flex items-center justify-center mr-4">
                        <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path>
                        </svg>
                    </div>
                    <div>
                        <h2 class="text-xl font-semibold text-gray-900">Password Management</h2>
                        <p class="text-gray-600">Change user passwords securely</p>
                    </div>
                </div>
                    
                <form hx-post="/oppman/change-password" 
                      hx-target="#password-result" 
                      hx-indicator="#password-loading"
                      class="space-y-6">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">User Email</label>
                        <select name="email" 
                                class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-ai-blue focus:border-transparent" 
                                required>
                            <option value="">Select a user...</option>
                            {% for user in users %}
                            <option value="{{ user.email }}">{{ user.email }} 
                                {% if user.is_superuser %}(Superuser){% endif %}
                                {% if user.is_staff %}(Staff){% endif %}
                                {% if not user.is_active %}(Inactive){% endif %}
                            </option>
                            {% endfor %}
                        </select>
                    </div>
                    
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">New Password</label>
                        <input type="password" 
                               name="new_password" 
                               class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-ai-blue focus:border-transparent" 
                               placeholder="Enter new password (min 6 chars)"
                               minlength="6"
                               required>
                    </div>
                    
                    <div class="flex justify-end">
                        <button type="submit" 
                                class="bg-ai-blue text-white px-6 py-3 rounded-lg font-semibold hover:bg-blue-700 transition-colors flex items-center">
                            <span id="password-loading" class="htmx-indicator">
                                <svg class="animate-spin h-4 w-4 mr-2" viewBox="0 0 24 24">
                                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" fill="none"></circle>
                                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                                </svg>
                            </span>
                            Change Password
                        </button>
                    </div>
                </form>
                    
                    <div id="password-result"></div>
                </div>
            </div>


            <!-- Migration Management -->
            <div class="bg-white rounded-xl shadow-lg p-8 hover:shadow-xl transition-shadow">
                <div class="flex items-center mb-6">
                    <div class="w-12 h-12 bg-purple-500 rounded-lg flex items-center justify-center mr-4">
                        <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
                        </svg>
                    </div>
                    <div>
                        <h2 class="text-xl font-semibold text-gray-900">Migration Management</h2>
                        <p class="text-gray-600">Manage database migrations</p>
                    </div>
                </div>
                
                <div class="space-y-4">
                    <form hx-post="/oppman/migrate" 
                          hx-target="#migrate-result" 
                          hx-indicator="#migrate-loading">
                        <input type="hidden" name="command" value="current">
                        <button type="submit" 
                                class="w-full bg-gray-500 text-white px-4 py-3 rounded-lg font-semibold hover:bg-gray-600 transition-colors">
                            Check Current
                        </button>
                    </form>
                    
                    <form hx-post="/oppman/migrate" 
                          hx-target="#migrate-result" 
                          hx-indicator="#migrate-loading">
                        <input type="hidden" name="command" value="upgrade">
                        <button type="submit" 
                                class="w-full bg-green-500 text-white px-4 py-3 rounded-lg font-semibold hover:bg-green-600 transition-colors">
                            Upgrade Database
                        </button>
                    </form>
                    
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Create Migration</label>
                        <form hx-post="/oppman/migrate" 
                              hx-target="#migrate-result" 
                              hx-indicator="#migrate-loading"
                              class="flex gap-2">
                            <input type="hidden" name="command" value="create">
                            <input type="text" 
                                   name="message" 
                                   class="flex-1 px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-ai-blue focus:border-transparent" 
                                   placeholder="Migration message"
                                   required>
                            <button type="submit" 
                                    class="bg-ai-blue text-white px-6 py-3 rounded-lg font-semibold hover:bg-blue-700 transition-colors">
                                Create
                            </button>
                        </form>
                    </div>
                    
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Show Migration</label>
                        <form hx-post="/oppman/migrate" 
                              hx-target="#migrate-result" 
                              hx-indicator="#migrate-loading"
                              class="flex gap-2">
                            <input type="hidden" name="command" value="show">
                            <input type="text" 
                                   name="revision" 
                                   class="flex-1 px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-ai-blue focus:border-transparent" 
                                   placeholder="Revision (or 'head')"
                                   value="head">
                            <button type="submit" 
                                    class="bg-blue-500 text-white px-6 py-3 rounded-lg font-semibold hover:bg-blue-600 transition-colors">
                                Show
                            </button>
                        </form>
                    </div>
                </div>
                
                <div id="migrate-result" class="mt-6"></div>
            </div>

            <!-- User Management -->
            <div class="bg-white rounded-xl shadow-lg p-8 hover:shadow-xl transition-shadow">
                <div class="flex items-center mb-6">
                    <div class="w-12 h-12 bg-orange-500 rounded-lg flex items-center justify-center mr-4">
                        <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197m13.5-9a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0z"></path>
                        </svg>
                    </div>
                    <div>
                        <h2 class="text-xl font-semibold text-gray-900">User Management</h2>
                        <p class="text-gray-600">Manage users and authentication</p>
                    </div>
                </div>
                
                <div class="space-y-4">
                    <form hx-post="/oppman/user-management" 
                          hx-target="#user-result" 
                          hx-indicator="#user-loading">
                        <input type="hidden" name="command" value="list_users">
                        <button type="submit" 
                                class="w-full bg-gray-500 text-white px-4 py-3 rounded-lg font-semibold hover:bg-gray-600 transition-colors">
                            List All Users
                        </button>
                    </form>
                    
                    <form hx-post="/oppman/user-management" 
                          hx-target="#user-result" 
                          hx-indicator="#user-loading">
                        <input type="hidden" name="command" value="check_users">
                        <button type="submit" 
                                class="w-full bg-blue-500 text-white px-4 py-3 rounded-lg font-semibold hover:bg-blue-600 transition-colors">
                            Check Users
                        </button>
                    </form>
                    
                    <form hx-post="/oppman/user-management" 
                          hx-target="#user-result" 
                          hx-indicator="#user-loading">
                        <input type="hidden" name="command" value="test_auth">
                        <button type="submit" 
                                class="w-full bg-orange-500 text-white px-4 py-3 rounded-lg font-semibold hover:bg-orange-600 transition-colors">
                            Test Authentication
                        </button>
                    </form>
                </div>
                
                <div id="user-result" class="mt-6"></div>
            </div>
        </div>

        <!-- Current Users Table -->
        <div class="bg-white rounded-xl shadow-lg overflow-hidden mt-8">
            <div class="px-6 py-4 border-b border-gray-200">
                <div class="flex items-center">
                    <div class="w-10 h-10 bg-ai-blue rounded-lg flex items-center justify-center mr-3">
                        <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197m13.5-9a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0z"></path>
                        </svg>
                    </div>
                    <h2 class="text-xl font-semibold text-gray-900">Current Users</h2>
                </div>
            </div>
            
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-200">
                    <thead class="bg-gray-50">
                        <tr>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Email</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Active</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Superuser</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Staff</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Group</th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-200">
                        {% for user in users %}
                        <tr class="hover:bg-gray-50 transition-colors">
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="text-sm font-medium text-gray-900 font-mono">{{ user.email }}</div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                {% if user.is_active %}
                                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
                                        ✅ Active
                                    </span>
                                {% else %}
                                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800">
                                        ❌ Inactive
                                    </span>
                                {% endif %}
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                {% if user.is_superuser %}
                                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
                                        ✅ Yes
                                    </span>
                                {% else %}
                                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">
                                        ❌ No
                                    </span>
                                {% endif %}
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                {% if user.is_staff %}
                                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-purple-100 text-purple-800">
                                        ✅ Yes
                                    </span>
                                {% else %}
                                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">
                                        ❌ No
                                    </span>
                                {% endif %}
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">
                                    {{ user.group or 'N/A' }}
                                </span>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <script>
        function oppmanAdmin() {
            return {
                showMessage(message, type = 'info') {
                    const messagesDiv = document.getElementById('messages');
                    const alertClass = type === 'error' 
                        ? 'bg-red-100 border-red-400 text-red-700' 
                        : 'bg-green-100 border-green-400 text-green-700';
                    
                    messagesDiv.innerHTML = `
                        <div class="border-l-4 p-4 rounded ${alertClass}">
                            <div class="flex">
                                <div class="ml-3">
                                    <p class="text-sm font-medium">${message}</p>
                                </div>
                            </div>
                        </div>
                    `;
                    
                    // Auto-hide after 5 seconds
                    setTimeout(() => {
                        messagesDiv.innerHTML = '';
                    }, 5000);
                }
            }
        }
    </script>
</body>
</html>
