{% extends "base.html" %}

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

{% macro format_tokens(value) %}
{% if value is none or value == 0 %}0{% else %}
{% set val = value | float %}
{% if val >= 1000000000 %}
{{ "%.2f"|format(val / 1000000000) }}B
{% elif val >= 1000000 %}
{{ "%.2f"|format(val / 1000000) }}M
{% elif val >= 1000 %}
{{ "%.2f"|format(val / 1000) }}K
{% else %}
{{ value }}
{% endif %}
{% endif %}
{% endmacro %}

{% 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">{{ get_base_url(request) }}/api/u/{{ session.username }}/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">{{ get_base_url(request) }}/api/u/{{ session.username }}/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">{{ get_base_url(request) }}/api/u/{{ session.username }}/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">{{ get_base_url(request) }}/api/u/{{ session.username }}/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">{{ get_base_url(request) }}/api/u/{{ session.username }}/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">{{ get_base_url(request) }}/mcp/u/{{ session.username }}/tools</code>
                <p>List available MCP tools for your configurations</p>
            </div>
            <div class="endpoint">
                <code class="method POST">POST</code>
                <code class="url">{{ get_base_url(request) }}/mcp/u/{{ session.username }}/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">{{ format_tokens(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>

    <!-- Subscription Status -->
    {% if current_tier %}
    <div class="card">
        <h2>Subscription</h2>
        <div class="subscription-info">
            <div class="plan-info">
                <h3>{{ current_tier.name }}</h3>
                {% if current_tier.is_default %}
                <span class="free-tier-badge">Free Tier</span>
                {% else %}
                <div class="plan-price">
                    <span class="price">{{ currency_symbol }}{{ current_tier.price_monthly }}/month</span>
                    <span class="price-secondary">or {{ currency_symbol }}{{ current_tier.price_yearly }}/year</span>
                </div>
                {% endif %}
            </div>

            {% if subscription %}
            <div class="subscription-details">
                <div class="subscription-status">
                    <span class="status-badge status-{{ subscription.status }}">{{ subscription.status|title }}</span>
                    {% if subscription.expires_at %}
                    <span class="renewal-date">Renews: {{ subscription.expires_at }}</span>
                    {% endif %}
                </div>
            </div>
            {% endif %}

            {% if not payment_methods or payment_methods|length == 0 %}
            <div class="payment-method-section">
                <a href="{{ url_for(request, '/dashboard/billing/add-method') }}" class="btn btn-primary">Add Payment Method</a>
            </div>
            {% endif %}
        </div>
    </div>
    {% endif %}
</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;
}

/* Subscription Section */
.subscription-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.plan-info h3 {
    margin: 0 0 0.5rem 0;
    color: #e0e0e0;
}

.free-tier-badge {
    background: #28a745;
    color: white;
    padding: 4px 12px;
    border-radius: 15px;
    font-size: 12px;
    font-weight: bold;
}

.plan-price {
    margin-top: 0.5rem;
}

.price {
    font-size: 1.5rem;
    font-weight: bold;
    color: #4ade80;
}

.price-secondary {
    color: #a0a0a0;
    font-size: 0.9rem;
    margin-left: 0.5rem;
}

.subscription-details {
    text-align: center;
}

.subscription-status {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.status-badge {
    padding: 4px 12px;
    border-radius: 15px;
    font-size: 12px;
    font-weight: bold;
}

.status-active {
    background: #28a745;
    color: white;
}

.status-canceled {
    background: #ffc107;
    color: black;
}

.status-expired,
.status-suspended {
    background: #dc3545;
    color: white;
}

.renewal-date {
    color: #a0a0a0;
    font-size: 0.9rem;
}

.payment-method-section {
    text-align: center;
    margin-top: 1rem;
}

@media (max-width: 768px) {
    .subscription-info {
        flex-direction: column;
        text-align: center;
    }
}
</style>
{% endblock %}