{% extends "base.html" %}

{% block title %}User Dashboard - AISBF{% endblock %}

{% block content %}
<div class="container">
    <h1>User Dashboard</h1>
    <p>Welcome, {{ session.username }}!</p>

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

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

    <!-- API Documentation Section -->
    <div class="card">
        <h2>🔌 Your API Endpoints</h2>
        <p>Use your API token to access your personal configurations. Include the token in the Authorization header:</p>
        <pre style="background: #1a1a2e; padding: 1rem; border-radius: 4px; overflow-x: auto;"><code>Authorization: Bearer YOUR_API_TOKEN</code></pre>
        
        <div class="api-endpoints">
            <h3>Your Models</h3>
            <div class="endpoint">
                <code class="method GET">GET</code>
                <code class="url">/api/user/models</code>
                <p>List all models from your providers, rotations, and autoselects</p>
            </div>
            
            <h3>Your Providers</h3>
            <div class="endpoint">
                <code class="method GET">GET</code>
                <code class="url">/api/user/providers</code>
                <p>List all your configured providers</p>
            </div>
            
            <h3>Your Rotations</h3>
            <div class="endpoint">
                <code class="method GET">GET</code>
                <code class="url">/api/user/rotations</code>
                <p>List all your configured rotations</p>
            </div>
            
            <h3>Your Autoselects</h3>
            <div class="endpoint">
                <code class="method GET">GET</code>
                <code class="url">/api/user/autoselects</code>
                <p>List all your configured autoselects</p>
            </div>
            
            <h3>Your Chat Completions</h3>
            <div class="endpoint">
                <code class="method POST">POST</code>
                <code class="url">/api/user/chat/completions</code>
                <p>Send chat requests using your configurations</p>
                <p class="example">Example model formats:</p>
                <ul>
                    <li><code>user-provider/myprovider/mymodel</code></li>
                    <li><code>user-rotation/myrotation</code></li>
                    <li><code>user-autoselect/myautoselect</code></li>
                </ul>
            </div>
            
            <h3>MCP Tools</h3>
            <div class="endpoint">
                <code class="method GET">GET</code>
                <code class="url">/mcp/tools</code>
                <p>List available MCP tools for your configurations</p>
            </div>
            <div class="endpoint">
                <code class="method POST">POST</code>
                <code class="url">/mcp/tools/call</code>
                <p>Call MCP tools to manage your configurations</p>
            </div>
        </div>
        
        {% if session.role == 'admin' %}
        <div class="admin-notice">
            <h4>⚡ Admin Access</h4>
            <p>As an admin user, you also have access to global configurations (providers, rotations, autoselects configured by the admin) in addition to your own user configurations.</p>
            <p class="example">Admin model formats:</p>
            <ul>
                <li><code>provider/model</code> - global provider</li>
                <li><code>rotation/myrotation</code> - global rotation</li>
                <li><code>autoselect/myautoselect</code> - global autoselect</li>
            </ul>
        </div>
        {% endif %}
        
        <p class="note">⚠️ Note: Your API token is required for all these endpoints. Manage your tokens in the <a href="{{ url_for(request, '/dashboard/user/tokens') }}">API Tokens</a> section.</p>
    </div>

    <!-- Usage Statistics -->
    <div class="card">
        <h2>Usage Statistics</h2>
        <div class="stats-grid">
            <div class="stat-item">
                <h3>Total Tokens Used</h3>
                <p class="stat-value">{{ usage_stats.total_tokens|default(0) }}</p>
            </div>
            <div class="stat-item">
                <h3>Requests Today</h3>
                <p class="stat-value">{{ usage_stats.requests_today|default(0) }}</p>
            </div>
            <div class="stat-item">
                <h3>Active Providers</h3>
                <p class="stat-value">{{ providers_count|default(0) }}</p>
            </div>
            <div class="stat-item">
                <h3>Active Rotations</h3>
                <p class="stat-value">{{ rotations_count|default(0) }}</p>
            </div>
        </div>
    </div>

    <!-- Quick Actions -->
    <div class="card">
        <h2>Quick Actions</h2>
        <div class="button-group">
            <a href="{{ url_for(request, '/dashboard/user/providers') }}" class="btn btn-primary">Manage Providers</a>
            <a href="{{ url_for(request, '/dashboard/user/rotations') }}" class="btn btn-primary">Manage Rotations</a>
            <a href="{{ url_for(request, '/dashboard/user/autoselect') }}" class="btn btn-primary">Manage Autoselect</a>
            <a href="{{ url_for(request, '/dashboard/user/tokens') }}" class="btn btn-primary">API Tokens</a>
        </div>
    </div>

    <!-- Recent Activity -->
    <div class="card">
        <h2>Recent Activity</h2>
        <table class="table">
            <thead>
                <tr>
                    <th>Timestamp</th>
                    <th>Provider</th>
                    <th>Model</th>
                    <th>Tokens</th>
                </tr>
            </thead>
            <tbody>
                {% if recent_activity %}
                    {% for activity in recent_activity %}
                    <tr>
                        <td>{{ activity.timestamp }}</td>
                        <td>{{ activity.provider_id }}</td>
                        <td>{{ activity.model }}</td>
                        <td>{{ activity.token_count }}</td>
                    </tr>
                    {% endfor %}
                {% else %}
                    <tr>
                        <td colspan="4" style="text-align: center;">No recent activity</td>
                    </tr>
                {% endif %}
            </tbody>
        </table>
    </div>
</div>

<style>
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.stat-item {
    background: #1a1a2e;
    padding: 1.5rem;
    border-radius: 8px;
    text-align: center;
}

.stat-item h3 {
    font-size: 0.9rem;
    color: #888;
    margin-bottom: 0.5rem;
}

.stat-value {
    font-size: 2rem;
    font-weight: bold;
    color: #16213e;
}

.button-group {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 1rem;
}

.table {
    width: 100%;
    margin-top: 1rem;
    border-collapse: collapse;
}

.table th,
.table td {
    padding: 0.75rem;
    text-align: left;
    border-bottom: 1px solid #333;
}

.table th {
    background: #1a1a2e;
    font-weight: bold;
}

.table tbody tr:hover {
    background: #1a1a2e;
}

/* API Endpoints Section */
.api-endpoints {
    margin-top: 1rem;
}

.api-endpoints h3 {
    margin-top: 1.5rem;
    color: #e0e0e0;
    font-size: 1.1rem;
}

.endpoint {
    background: #0f3460;
    padding: 1rem;
    margin: 0.5rem 0;
    border-radius: 4px;
    border-left: 3px solid #667eea;
}

.endpoint .method {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border-radius: 3px;
    font-weight: bold;
    font-size: 0.8rem;
    margin-right: 0.5rem;
}

.endpoint .method.GET {
    background: #28a745;
    color: white;
}

.endpoint .method.POST {
    background: #007bff;
    color: white;
}

.endpoint .url {
    color: #e0e0e0;
    font-family: monospace;
}

.endpoint p {
    margin: 0.5rem 0 0 0;
    color: #a0a0a0;
    font-size: 0.9rem;
}

.endpoint .example {
    color: #667eea;
}

.endpoint ul {
    margin: 0.5rem 0 0 0;
    padding-left: 1.5rem;
    color: #a0a0a0;
}

.endpoint code {
    background: #1a1a2e;
    padding: 0.2rem 0.4rem;
    border-radius: 3px;
    font-size: 0.9rem;
}

.note {
    margin-top: 1rem;
    padding: 1rem;
    background: #1a1a2e;
    border-radius: 4px;
    color: #a0a0a0;
}

.note a {
    color: #667eea;
}

.admin-notice {
    margin-top: 1.5rem;
    padding: 1rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 8px;
    color: white;
}

.admin-notice h4 {
    margin: 0 0 0.5rem 0;
    color: white;
}

.admin-notice p {
    margin: 0.5rem 0;
    color: white;
}

.admin-notice .example {
    color: #ffd700;
}

.admin-notice ul {
    margin: 0.5rem 0 0 0;
    padding-left: 1.5rem;
}

.admin-notice code {
    background: rgba(0,0,0,0.3);
    padding: 0.2rem 0.4rem;
    border-radius: 3px;
}
</style>
{% endblock %}