{% extends "admin/base.html" %}

{% block title %}Manage User: {{ user.username }}{% endblock %}

{% block header_title %}User Details{% endblock %}

{% block content %}
<div class="space-y-8">
    <div class="flex justify-between items-center">
        <a href="{{ url_for('admin_users') }}" class="text-[var(--color-primary-500)] hover:text-[var(--color-primary-700)]">&larr; Back to User Management</a>
    </div>
    
    <div class="card-style">
        <div class="flex flex-wrap gap-4 justify-between items-center mb-4 pb-2 border-b border-white/10">
            <h2 class="text-2xl font-bold">User: <span class="text-[var(--color-primary-500)]">{{ user.username }}</span></h2>
            <div class="flex items-center gap-4">
                <a href="{{ url_for('admin_user_stats', user_id=user.id) }}" class="justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-green-600 hover:bg-green-700">
                    View Usage
                </a>
                {% if not user.is_admin %}
                <form action="{{ url_for('delete_user_account', user_id=user.id) }}" method="post" onsubmit="return confirm('Are you sure? This will delete the user and all their API keys.');" class="m-0">
                    <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
                    <button type="submit" class="px-4 py-2 bg-red-600 text-white rounded-md hover:bg-red-700">Delete User</button>
                </form>
                {% endif %}
            </div>
        </div>
        
        <h3 class="text-xl font-bold mb-4">Create New API Key</h3>
        <form action="{{ url_for('admin_create_key', user_id=user.id) }}" method="post">
            <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
                <div class="md:col-span-2">
                    <label for="key_name" class="block text-sm font-medium text-current">Key Name (e.g., "My App")</label>
                    <input type="text" name="key_name" id="key_name" required class="mt-1 block w-full px-3 py-2 rounded-md shadow-sm focus:outline-none focus:ring-[var(--color-primary-500)] focus:border-[var(--color-primary-500)] sm:text-sm">
                </div>
                <div class="{% if not is_redis_connected %}opacity-50{% endif %}">
                    <label for="rate_limit_requests" class="block text-sm font-medium text-current">Rate Limit Requests</label>
                    <input type="number" name="rate_limit_requests" id="rate_limit_requests" placeholder="e.g., 100" min="0" class="mt-1 block w-full px-3 py-2 rounded-md shadow-sm focus:outline-none focus:ring-[var(--color-primary-500)] focus:border-[var(--color-primary-500)] sm:text-sm {% if not is_redis_connected %}cursor-not-allowed{% endif %}" {% if not is_redis_connected %}disabled{% endif %}>
                </div>
                <div class="{% if not is_redis_connected %}opacity-50{% endif %}">
                    <label for="rate_limit_window_minutes" class="block text-sm font-medium text-current">Window (Minutes)</label>
                    <input type="number" name="rate_limit_window_minutes" id="rate_limit_window_minutes" placeholder="e.g., 1" min="0" class="mt-1 block w-full px-3 py-2 rounded-md shadow-sm focus:outline-none focus:ring-[var(--color-primary-500)] focus:border-[var(--color-primary-500)] sm:text-sm {% if not is_redis_connected %}cursor-not-allowed{% endif %}" {% if not is_redis_connected %}disabled{% endif %}>
                </div>
            </div>
            <div class="mt-4">
                <button type="submit" class="justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-[var(--color-primary-600)] hover:bg-[var(--color-primary-700)]">Create Key</button>
            </div>
        </form>
    </div>

    <div class="card-style">
        <h3 class="card-header text-xl font-bold mb-4 pb-2">API Keys</h3>
        <div class="overflow-x-auto">
            <table class="min-w-full">
                <thead>
                    <tr>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Name / Prefix</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Created</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Rate Limit</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Status</th>
                        <th class="px-6 py-3 text-right text-xs font-medium text-gray-400 uppercase tracking-wider">Actions</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-white/10">
                    {% for key in api_keys %}
                    <tr>
                        <td class="px-6 py-4 whitespace-nowrap text-sm">
                            <div class="font-medium text-current">{{ key.key_name }}</div>
                            <div class="font-mono">{{ key.key_prefix }}</div>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm">{{ key.created_at.strftime('%Y-%m-%d %H:%M') }}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm">
                            {% if key.rate_limit_requests and key.rate_limit_window_minutes %}
                                {{ key.rate_limit_requests }} / {{ key.rate_limit_window_minutes }} min
                            {% else %}<span class="italic">Default</span>{% endif %}
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm">
                            {% if key.is_revoked %}<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-black text-white">Revoked</span>
                            {% elif key.is_active %}<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-200 text-green-800">Active</span>
                            {% else %}<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-200 text-yellow-800">Disabled</span>{% endif %}
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                            <div class="flex justify-end space-x-4">
                            {% if not key.is_revoked %}
                                <form action="{{ url_for('admin_toggle_key_active', key_id=key.id) }}" method="post">
                                    <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
                                    {% if key.is_active %}
                                        <button type="submit" class="text-yellow-400 hover:text-yellow-600">Disable</button>
                                    {% else %}
                                        <button type="submit" class="text-green-400 hover:text-green-600">Enable</button>
                                    {% endif %}
                                </form>
                                <form action="{{ url_for('admin_revoke_key', key_id=key.id) }}" method="post" onsubmit="return confirm('Are you sure? This action is permanent.');">
                                    <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
                                    <button type="submit" class="text-red-500 hover:text-red-700">Revoke</button>
                                </form>
                            {% endif %}
                            </div>
                        </td>
                    </tr>
                    {% else %}
                    <tr><td colspan="5" class="px-6 py-4 text-center">No API keys found for this user.</td></tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>
{% endblock %}