{% extends "base.html" %}

{% block title %}Users API Reference{% endblock %}

{% block content %}
<div x-data="usersApiData()" x-init="init()">
    <!-- Header -->
    <div class="px-4 sm:px-0 flex justify-between items-start mb-6">
        <div class="flex items-center space-x-3">
            <a href="/admin/users" class="text-gray-400 hover:text-gray-500">
                <i class="fas fa-arrow-left"></i>
            </a>
            <div>
                <h1 class="text-3xl font-bold text-gray-900">Users API Reference</h1>
                <p class="mt-1 text-sm text-gray-500">Authentication & User Management</p>
            </div>
        </div>
        <select x-model="selectedLang" class="border-gray-300 rounded-md">
            <option value="curl">cURL</option>
            <option value="javascript">JavaScript</option>
            <option value="python">Python</option>
        </select>
    </div>

    <!-- Main Content: 2-column layout -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <!-- Left Column: Info -->
        <div class="space-y-6">
            <!-- Authentication Section -->
            <div class="bg-white shadow rounded-lg overflow-hidden">
                <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
                    <h2 class="text-lg font-medium text-gray-900">Authentication</h2>
                </div>
                <div class="px-6 py-4">
                    <p class="text-sm text-gray-600 mb-4">All API requests require authentication using JWT tokens. Include the access token in the Authorization header.</p>
                    <div class="bg-gray-900 rounded-lg p-3">
                        <pre class="text-xs text-gray-100">Authorization: Bearer YOUR_ACCESS_TOKEN</pre>
                    </div>
                </div>
            </div>

            <!-- User Schema -->
            <div class="bg-white shadow rounded-lg overflow-hidden">
                <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
                    <h2 class="text-lg font-medium text-gray-900">User Schema</h2>
                </div>
                <div class="px-6 py-4">
                    <div class="space-y-3">
                        <div class="border-l-4 border-indigo-500 pl-4 py-2 bg-gray-50 rounded">
                            <span class="font-mono text-sm font-semibold">email</span>
                            <span class="ml-2 text-xs bg-indigo-100 text-indigo-800 px-2 py-1 rounded">string</span>
                            <span class="ml-2 text-xs bg-red-100 text-red-800 px-2 py-1 rounded">required</span>
                        </div>
                        <div class="border-l-4 border-indigo-500 pl-4 py-2 bg-gray-50 rounded">
                            <span class="font-mono text-sm font-semibold">password</span>
                            <span class="ml-2 text-xs bg-indigo-100 text-indigo-800 px-2 py-1 rounded">string</span>
                            <span class="ml-2 text-xs bg-red-100 text-red-800 px-2 py-1 rounded">required</span>
                        </div>
                        <div class="border-l-4 border-indigo-500 pl-4 py-2 bg-gray-50 rounded">
                            <span class="font-mono text-sm font-semibold">name</span>
                            <span class="ml-2 text-xs bg-indigo-100 text-indigo-800 px-2 py-1 rounded">string</span>
                        </div>
                        <div class="border-l-4 border-indigo-500 pl-4 py-2 bg-gray-50 rounded">
                            <span class="font-mono text-sm font-semibold">role</span>
                            <span class="ml-2 text-xs bg-indigo-100 text-indigo-800 px-2 py-1 rounded">string</span>
                            <span class="ml-2 text-xs bg-gray-200 text-gray-700 px-2 py-1 rounded">user | admin</span>
                        </div>
                        <div class="border-l-4 border-indigo-500 pl-4 py-2 bg-gray-50 rounded">
                            <span class="font-mono text-sm font-semibold">verified</span>
                            <span class="ml-2 text-xs bg-indigo-100 text-indigo-800 px-2 py-1 rounded">boolean</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Right Column: API Endpoints -->
        <div class="space-y-6">
            <div class="bg-white shadow rounded-lg overflow-hidden lg:sticky lg:top-6">
                <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
                    <h2 class="text-lg font-medium text-gray-900">API Endpoints</h2>
                </div>
                <div class="divide-y divide-gray-200 max-h-[calc(100vh-200px)] overflow-y-auto">

                    <!-- Register -->
                    <div class="px-6 py-4">
                        <div class="flex items-center justify-between mb-2">
                            <div class="flex items-center space-x-2">
                                <span class="px-2 py-1 text-xs font-semibold bg-blue-100 text-blue-800 rounded">POST</span>
                                <span class="text-sm font-mono text-gray-700">Register User</span>
                            </div>
                            <button @click="copyCode('register')" class="text-gray-400 hover:text-gray-600">
                                <i class="fas fa-copy"></i>
                            </button>
                        </div>
                        <div class="bg-gray-900 rounded-lg p-3 overflow-x-auto">
                            <pre class="text-xs text-gray-100 whitespace-pre-wrap" x-text="getCode('register')"></pre>
                        </div>
                    </div>

                    <!-- Login -->
                    <div class="px-6 py-4">
                        <div class="flex items-center justify-between mb-2">
                            <div class="flex items-center space-x-2">
                                <span class="px-2 py-1 text-xs font-semibold bg-blue-100 text-blue-800 rounded">POST</span>
                                <span class="text-sm font-mono text-gray-700">Login</span>
                            </div>
                            <button @click="copyCode('login')" class="text-gray-400 hover:text-gray-600">
                                <i class="fas fa-copy"></i>
                            </button>
                        </div>
                        <div class="bg-gray-900 rounded-lg p-3 overflow-x-auto">
                            <pre class="text-xs text-gray-100 whitespace-pre-wrap" x-text="getCode('login')"></pre>
                        </div>
                    </div>

                    <!-- Get Current User -->
                    <div class="px-6 py-4">
                        <div class="flex items-center justify-between mb-2">
                            <div class="flex items-center space-x-2">
                                <span class="px-2 py-1 text-xs font-semibold bg-green-100 text-green-800 rounded">GET</span>
                                <span class="text-sm font-mono text-gray-700">Get Current User</span>
                            </div>
                            <button @click="copyCode('me')" class="text-gray-400 hover:text-gray-600">
                                <i class="fas fa-copy"></i>
                            </button>
                        </div>
                        <div class="bg-gray-900 rounded-lg p-3 overflow-x-auto">
                            <pre class="text-xs text-gray-100 whitespace-pre-wrap" x-text="getCode('me')"></pre>
                        </div>
                    </div>

                    <!-- List Users (Admin) -->
                    <div class="px-6 py-4">
                        <div class="flex items-center justify-between mb-2">
                            <div class="flex items-center space-x-2">
                                <span class="px-2 py-1 text-xs font-semibold bg-green-100 text-green-800 rounded">GET</span>
                                <span class="text-sm font-mono text-gray-700">List Users</span>
                                <span class="text-xs bg-purple-100 text-purple-800 px-2 py-1 rounded">Admin</span>
                            </div>
                            <button @click="copyCode('list')" class="text-gray-400 hover:text-gray-600">
                                <i class="fas fa-copy"></i>
                            </button>
                        </div>
                        <div class="bg-gray-900 rounded-lg p-3 overflow-x-auto">
                            <pre class="text-xs text-gray-100 whitespace-pre-wrap" x-text="getCode('list')"></pre>
                        </div>
                    </div>

                    <!-- Update User -->
                    <div class="px-6 py-4">
                        <div class="flex items-center justify-between mb-2">
                            <div class="flex items-center space-x-2">
                                <span class="px-2 py-1 text-xs font-semibold bg-yellow-100 text-yellow-800 rounded">PUT</span>
                                <span class="text-sm font-mono text-gray-700">Update User</span>
                            </div>
                            <button @click="copyCode('update')" class="text-gray-400 hover:text-gray-600">
                                <i class="fas fa-copy"></i>
                            </button>
                        </div>
                        <div class="bg-gray-900 rounded-lg p-3 overflow-x-auto">
                            <pre class="text-xs text-gray-100 whitespace-pre-wrap" x-text="getCode('update')"></pre>
                        </div>
                    </div>

                    <!-- Refresh Token -->
                    <div class="px-6 py-4">
                        <div class="flex items-center justify-between mb-2">
                            <div class="flex items-center space-x-2">
                                <span class="px-2 py-1 text-xs font-semibold bg-blue-100 text-blue-800 rounded">POST</span>
                                <span class="text-sm font-mono text-gray-700">Refresh Token</span>
                            </div>
                            <button @click="copyCode('refresh')" class="text-gray-400 hover:text-gray-600">
                                <i class="fas fa-copy"></i>
                            </button>
                        </div>
                        <div class="bg-gray-900 rounded-lg p-3 overflow-x-auto">
                            <pre class="text-xs text-gray-100 whitespace-pre-wrap" x-text="getCode('refresh')"></pre>
                        </div>
                    </div>

                    <!-- Logout -->
                    <div class="px-6 py-4">
                        <div class="flex items-center justify-between mb-2">
                            <div class="flex items-center space-x-2">
                                <span class="px-2 py-1 text-xs font-semibold bg-blue-100 text-blue-800 rounded">POST</span>
                                <span class="text-sm font-mono text-gray-700">Logout</span>
                            </div>
                            <button @click="copyCode('logout')" class="text-gray-400 hover:text-gray-600">
                                <i class="fas fa-copy"></i>
                            </button>
                        </div>
                        <div class="bg-gray-900 rounded-lg p-3 overflow-x-auto">
                            <pre class="text-xs text-gray-100 whitespace-pre-wrap" x-text="getCode('logout')"></pre>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    function usersApiData() {
        return {
            selectedLang: 'curl',
            baseUrl: window.location.origin + '/api/v1',

            async init() {
                // Nothing to load for static API docs
            },

            getCode(operation) {
                if (this.selectedLang === 'curl') {
                    return this.getCurlCode(operation);
                } else if (this.selectedLang === 'javascript') {
                    return this.getJavaScriptCode(operation);
                } else if (this.selectedLang === 'python') {
                    return this.getPythonCode(operation);
                }
            },

            getCurlCode(operation) {
                const baseUrl = this.baseUrl;
                const examples = {
                    register: `curl -X POST "${baseUrl}/auth/register" \\
  -H "Content-Type: application/json" \\
  -d '{
    "email": "user@example.com",
    "password": "SecurePass123!",
    "name": "John Doe"
  }'`,
                    login: `curl -X POST "${baseUrl}/auth/login" \\
  -H "Content-Type: application/json" \\
  -d '{
    "email": "user@example.com",
    "password": "SecurePass123!"
  }'`,
                    me: `curl "${baseUrl}/auth/me" \\
  -H "Authorization: Bearer YOUR_ACCESS_TOKEN"`,
                    list: `curl "${baseUrl}/admin/users?page=1&per_page=20" \\
  -H "Authorization: Bearer YOUR_ADMIN_TOKEN"`,
                    update: `curl -X PUT "${baseUrl}/users/USER_ID" \\
  -H "Content-Type: application/json" \\
  -H "Authorization: Bearer YOUR_TOKEN" \\
  -d '{
    "name": "Updated Name"
  }'`,
                    refresh: `curl -X POST "${baseUrl}/auth/refresh" \\
  -H "Content-Type: application/json" \\
  -d '{
    "refresh_token": "YOUR_REFRESH_TOKEN"
  }'`,
                    logout: `curl -X POST "${baseUrl}/auth/logout" \\
  -H "Authorization: Bearer YOUR_ACCESS_TOKEN"`
                };
                return examples[operation];
            },

            getJavaScriptCode(operation) {
                const baseUrl = this.baseUrl;
                const examples = {
                    register: `// Register new user
const response = await fetch('${baseUrl}/auth/register', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    email: 'user@example.com',
    password: 'SecurePass123!',
    name: 'John Doe'
  })
});
const data = await response.json();
// Save tokens
localStorage.setItem('access_token', data.access_token);
localStorage.setItem('refresh_token', data.refresh_token);`,
                    login: `// Login
const response = await fetch('${baseUrl}/auth/login', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    email: 'user@example.com',
    password: 'SecurePass123!'
  })
});
const data = await response.json();
localStorage.setItem('access_token', data.access_token);
localStorage.setItem('refresh_token', data.refresh_token);`,
                    me: `// Get current user
const response = await fetch('${baseUrl}/auth/me', {
  headers: {
    'Authorization': \`Bearer \${localStorage.getItem('access_token')}\`
  }
});
const user = await response.json();`,
                    list: `// List users (admin only)
const response = await fetch('${baseUrl}/admin/users?page=1&per_page=20', {
  headers: {
    'Authorization': \`Bearer \${localStorage.getItem('access_token')}\`
  }
});
const data = await response.json();`,
                    update: `// Update user
const response = await fetch('${baseUrl}/users/USER_ID', {
  method: 'PUT',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': \`Bearer \${localStorage.getItem('access_token')}\`
  },
  body: JSON.stringify({
    name: 'Updated Name'
  })
});
const data = await response.json();`,
                    refresh: `// Refresh access token
const response = await fetch('${baseUrl}/auth/refresh', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    refresh_token: localStorage.getItem('refresh_token')
  })
});
const data = await response.json();
localStorage.setItem('access_token', data.access_token);`,
                    logout: `// Logout
await fetch('${baseUrl}/auth/logout', {
  method: 'POST',
  headers: {
    'Authorization': \`Bearer \${localStorage.getItem('access_token')}\`
  }
});
localStorage.removeItem('access_token');
localStorage.removeItem('refresh_token');`
                };
                return examples[operation];
            },

            getPythonCode(operation) {
                const baseUrl = this.baseUrl;
                const examples = {
                    register: `import requests

# Register new user
response = requests.post(
    '${baseUrl}/auth/register',
    json={
        'email': 'user@example.com',
        'password': 'SecurePass123!',
        'name': 'John Doe'
    }
)
data = response.json()
access_token = data['access_token']
refresh_token = data['refresh_token']`,
                    login: `import requests

# Login
response = requests.post(
    '${baseUrl}/auth/login',
    json={
        'email': 'user@example.com',
        'password': 'SecurePass123!'
    }
)
data = response.json()
access_token = data['access_token']
refresh_token = data['refresh_token']`,
                    me: `import requests

# Get current user
response = requests.get(
    '${baseUrl}/auth/me',
    headers={'Authorization': f'Bearer {access_token}'}
)
user = response.json()`,
                    list: `import requests

# List users (admin only)
response = requests.get(
    '${baseUrl}/admin/users',
    params={'page': 1, 'per_page': 20},
    headers={'Authorization': f'Bearer {access_token}'}
)
data = response.json()`,
                    update: `import requests

# Update user
response = requests.put(
    '${baseUrl}/users/USER_ID',
    json={'name': 'Updated Name'},
    headers={'Authorization': f'Bearer {access_token}'}
)
data = response.json()`,
                    refresh: `import requests

# Refresh access token
response = requests.post(
    '${baseUrl}/auth/refresh',
    json={'refresh_token': refresh_token}
)
data = response.json()
access_token = data['access_token']`,
                    logout: `import requests

# Logout
requests.post(
    '${baseUrl}/auth/logout',
    headers={'Authorization': f'Bearer {access_token}'}
)`
                };
                return examples[operation];
            },

            async copyCode(operation) {
                const code = this.getCode(operation);
                try {
                    await navigator.clipboard.writeText(code);
                    showToast('Code copied to clipboard!', 'success');
                } catch (err) {
                    console.error('Failed to copy:', err);
                    showToast('Failed to copy code', 'error');
                }
            }
        };
    }
</script>
{% endblock %}