{% extends "base.html" %}

{% block title %}Settings - Das File Storage{% endblock %}

{% block content %}
<div class="nav-tabs">
    <a href="/dashboard" class="nav-tab">📂 My Files</a>
    <a href="/settings" class="nav-tab active">⚙️ Settings</a>
    {% if is_admin %}
    <a href="/admin" class="nav-tab">👑 Admin Panel</a>
    {% endif %}
</div>

{% if message %}
<div class="alert alert-success">
    {{ message }}
</div>
{% endif %}

{% if error %}
<div class="alert alert-error">
    {{ error }}
</div>
{% endif %}

<h2>Account Settings</h2>

<div style="display: grid; gap: 30px; margin-top: 30px;">
    <!-- Change Password -->
    <div style="border: 1px solid #e5e7eb; padding: 25px; border-radius: 8px;">
        <h3 style="margin-bottom: 15px; color: #374151;">🔒 Change Password</h3>
        <form method="POST" action="/settings/change-password">
            <div class="form-group">
                <label for="current_password">Current Password</label>
                <input type="password" id="current_password" name="current_password" required>
            </div>
            <div class="form-group">
                <label for="new_password">New Password</label>
                <input type="password" id="new_password" name="new_password" required minlength="8">
                <small style="color: #6b7280;">Minimum 8 characters</small>
            </div>
            <div class="form-group">
                <label for="confirm_password">Confirm New Password</label>
                <input type="password" id="confirm_password" name="confirm_password" required>
            </div>
            <button type="submit" class="btn btn-primary">Update Password</button>
        </form>
    </div>

    <!-- API Key -->
    <div style="border: 1px solid #e5e7eb; padding: 25px; border-radius: 8px;">
        <h3 style="margin-bottom: 15px; color: #374151;">🔑 API Key</h3>
        <p style="color: #6b7280; margin-bottom: 15px;">
            Use this key for API authentication with the X-API-Key header.
        </p>

        <div style="background: #f9fafb; padding: 15px; border-radius: 6px; margin-bottom: 15px;">
            <div style="display: flex; gap: 10px; align-items: center;">
                <input
                    type="text"
                    id="apiKey"
                    value="{{ api_key }}"
                    readonly
                    style="flex: 1; padding: 10px; border: 1px solid #d1d5db; border-radius: 4px; font-family: monospace; font-size: 12px;"
                >
                <button onclick="copyApiKey()" class="btn btn-secondary btn-small">📋 Copy</button>
            </div>
        </div>

        <div class="alert alert-info" style="margin-bottom: 15px;">
            <strong>⚠️ Warning:</strong> Regenerating will invalidate your current API key. All applications using the old key will stop working.
        </div>

        <button onclick="regenerateApiKey()" class="btn btn-danger">🔄 Regenerate API Key</button>
    </div>

    <!-- Account Info -->
    <div style="border: 1px solid #e5e7eb; padding: 25px; border-radius: 8px;">
        <h3 style="margin-bottom: 15px; color: #374151;">👤 Account Information</h3>
        <div style="display: grid; gap: 15px;">
            <div>
                <strong style="color: #6b7280;">Username:</strong>
                <div style="margin-top: 5px;">{{ username }}</div>
            </div>
            <div>
                <strong style="color: #6b7280;">Account Type:</strong>
                <div style="margin-top: 5px;">
                    {% if is_admin %}
                    <span class="admin-badge">Administrator</span>
                    {% else %}
                    Regular User
                    {% endif %}
                </div>
            </div>
            <div>
                <strong style="color: #6b7280;">Total Files:</strong>
                <div style="margin-top: 5px;">{{ file_count }} files</div>
            </div>
        </div>
    </div>
</div>

{% endblock %}

{% block extra_scripts %}
<script>
function copyApiKey() {
    const input = document.getElementById('apiKey');
    input.select();
    document.execCommand('copy');
    alert('API Key copied to clipboard!');
}

async function regenerateApiKey() {
    if (!confirm('Are you sure? This will invalidate your current API key!')) {
        return;
    }

    try {
        const response = await fetch('/api/users/me/api-key/regenerate', {
            method: 'POST'
        });

        if (response.ok) {
            window.location.reload();
        } else {
            alert('Failed to regenerate API key');
        }
    } catch (error) {
        alert('Failed to regenerate API key: ' + error.message);
    }
}
</script>
{% endblock %}