{% extends "base.html" %}

{% block title %}Admin Panel - Dewy Oracle{% endblock %}

{% block content %}
<header>
    <h1>Admin Panel</h1>
    <p class="subtitle">Manage users and application settings</p>
</header>

<div id="message" class="message hidden"></div>

<!-- Settings Section -->
<section class="section">
    <h2>Application Settings</h2>
    <div class="settings-grid">
        <div class="setting-item">
            <label for="allow-registration">
                <input type="checkbox" id="allow-registration" onchange="toggleRegistration(this)">
                Allow user registration from login page
            </label>
        </div>
    </div>
</section>

<!-- User Management Section -->
<section class="section">
    <h2>User Management</h2>
    <div class="section-actions">
        <button onclick="showAddUserModal()" class="btn btn-primary">Add User</button>
        <button onclick="loadUsers()" class="btn btn-secondary">Refresh Users</button>
    </div>
    <div id="users-loading" class="loading">Loading users...</div>
    <div id="users-container" class="hidden">
        <table class="users-table">
            <thead>
                <tr>
                    <th>Username</th>
                    <th>Email</th>
                    <th>Display Name</th>
                    <th>Admin</th>
                    <th>Active</th>
                    <th>Created</th>
                    <th>Last Login</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody id="users-list">
            </tbody>
        </table>
    </div>
</section>

<!-- Add User Modal -->
<div id="add-user-modal" class="modal hidden">
    <div class="modal-content">
        <div class="modal-header">
            <h2>Add New User</h2>
            <button onclick="hideAddUserModal()" class="btn-close">&times;</button>
        </div>
        <form id="add-user-form" onsubmit="submitAddUser(event)">
            <div class="form-group">
                <label for="new-username">Username *</label>
                <input type="text" id="new-username" name="username" required>
            </div>
            <div class="form-group">
                <label for="new-email">Email *</label>
                <input type="email" id="new-email" name="email" required>
            </div>
            <div class="form-group">
                <label for="new-display-name">Display Name</label>
                <input type="text" id="new-display-name" name="display_name">
            </div>
            <div class="form-group">
                <label for="new-password">Password *</label>
                <input type="password" id="new-password" name="password" required minlength="6">
                <small>Minimum 6 characters</small>
            </div>
            <div class="form-section">
                <h3>Audiobookshelf Connection</h3>
                <div class="form-group">
                    <label for="new-abs-url">Audiobookshelf URL *</label>
                    <input type="url" id="new-abs-url" name="abs_url" required placeholder="https://abs.example.com">
                </div>
                <div class="form-group">
                    <label for="new-abs-token">API Token *</label>
                    <input type="password" id="new-abs-token" name="abs_api_token" required>
                    <small>Get from Audiobookshelf Settings > Users > Generate API Token</small>
                </div>
            </div>
            <div class="form-group">
                <label>
                    <input type="checkbox" id="new-is-admin" name="is_admin" value="true">
                    Make this user an administrator
                </label>
            </div>
            <div class="modal-actions">
                <button type="button" onclick="hideAddUserModal()" class="btn btn-secondary">Cancel</button>
                <button type="submit" class="btn btn-primary">Create User</button>
            </div>
        </form>
    </div>
</div>

<!-- Change Password Modal -->
<div id="change-password-modal" class="modal hidden">
    <div class="modal-content modal-small">
        <div class="modal-header">
            <h2>Change Password</h2>
            <button onclick="hideChangePasswordModal()" class="btn-close">&times;</button>
        </div>
        <form id="change-password-form" onsubmit="submitChangePassword(event)">
            <input type="hidden" id="change-password-user-id" name="user_id">
            <p>Changing password for: <strong id="change-password-username"></strong></p>
            <div class="form-group">
                <label for="new-user-password">New Password *</label>
                <input type="password" id="new-user-password" name="new_password" required minlength="6">
                <small>Minimum 6 characters</small>
            </div>
            <div class="modal-actions">
                <button type="button" onclick="hideChangePasswordModal()" class="btn btn-secondary">Cancel</button>
                <button type="submit" class="btn btn-primary">Change Password</button>
            </div>
        </form>
    </div>
</div>
{% endblock %}

{% block extra_scripts %}
<script src="/static/js/admin.js"></script>
<script>
    // Initialize admin panel on page load
    document.addEventListener('DOMContentLoaded', () => {
        loadSettings();
        loadUsers();
    });
</script>
{% endblock %}