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

{% block title %}LLM Manager — Dashboard{% endblock %}

{% block content %}
<div class="mb-6">
    <h1 class="text-3xl font-bold">LLM Manager</h1>
    <p class="text-base-content/70 mt-1">Manage LLM APIs, models, and usage tracking.</p>
</div>

<!-- Stats cards -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8">
    <div class="stat bg-base-200 rounded-box shadow">
        <div class="stat-title">Active APIs</div>
        <div class="stat-value text-primary">{{ api_count }}</div>
        <div class="stat-actions"><a href="{% url 'llm_manager:api_list' %}" class="btn btn-sm btn-primary">Manage</a></div>
    </div>
    <div class="stat bg-base-200 rounded-box shadow">
        <div class="stat-title">Active Models</div>
        <div class="stat-value text-secondary">{{ model_count }}</div>
        <div class="stat-actions"><a href="{% url 'llm_manager:model_list' %}" class="btn btn-sm btn-secondary">Browse</a></div>
    </div>
    <div class="stat bg-base-200 rounded-box shadow">
        <div class="stat-title">Your API Calls</div>
        <div class="stat-value text-accent">{{ usage_count }}</div>
        <div class="stat-desc">
            {{ total_input_tokens|default:"0" }} in / {{ total_output_tokens|default:"0" }} out tokens
        </div>
        <div class="stat-actions"><a href="{% url 'llm_manager:usage_list' %}" class="btn btn-sm btn-accent">History</a></div>
    </div>
</div>

<!-- System models -->
<div class="mb-8">
    <h2 class="text-xl font-semibold mb-3">System Default Models</h2>
    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
        <div class="card bg-base-200 shadow">
            <div class="card-body">
                <h3 class="card-title text-sm">Embedding</h3>
                {% if system_embedding_model %}
                    <p class="font-mono text-sm">{{ system_embedding_model.name }}</p>
                    <p class="text-xs text-base-content/60">{{ system_embedding_model.api.name }}{% if system_embedding_model.vector_dimensions %} — {{ system_embedding_model.vector_dimensions }}d{% endif %}</p>
                {% else %}
                    <p class="text-warning text-sm">Not configured</p>
                {% endif %}
            </div>
        </div>
        <div class="card bg-base-200 shadow">
            <div class="card-body">
                <h3 class="card-title text-sm">Chat</h3>
                {% if system_chat_model %}
                    <p class="font-mono text-sm">{{ system_chat_model.name }}</p>
                    <p class="text-xs text-base-content/60">{{ system_chat_model.api.name }}</p>
                {% else %}
                    <p class="text-warning text-sm">Not configured</p>
                {% endif %}
            </div>
        </div>
        <div class="card bg-base-200 shadow">
            <div class="card-body">
                <h3 class="card-title text-sm">Reranker</h3>
                {% if system_reranker_model %}
                    <p class="font-mono text-sm">{{ system_reranker_model.name }}</p>
                    <p class="text-xs text-base-content/60">{{ system_reranker_model.api.name }}</p>
                {% else %}
                    <p class="text-warning text-sm">Not configured</p>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<!-- Active APIs -->
<div class="mb-8">
    <div class="flex justify-between items-center mb-3">
        <h2 class="text-xl font-semibold">Active APIs</h2>
        <a href="{% url 'llm_manager:api_create' %}" class="btn btn-sm btn-primary">Add API</a>
    </div>
    {% if active_apis %}
    <div class="overflow-x-auto">
        <table class="table table-zebra w-full">
            <thead><tr><th>Name</th><th>Type</th><th>URL</th><th>Status</th><th>Last Tested</th></tr></thead>
            <tbody>
            {% for api in active_apis %}
            <tr>
                <td><a href="{% url 'llm_manager:api_detail' api.pk %}" class="link link-primary">{{ api.name }}</a></td>
                <td><span class="badge badge-ghost">{{ api.get_api_type_display }}</span></td>
                <td class="font-mono text-xs">{{ api.base_url }}</td>
                <td>
                    {% if api.last_test_status == "success" %}
                        <span class="badge badge-success">OK</span>
                    {% elif api.last_test_status == "failed" %}
                        <span class="badge badge-error">Failed</span>
                    {% else %}
                        <span class="badge badge-warning">Pending</span>
                    {% endif %}
                </td>
                <td class="text-xs">{{ api.last_tested_at|default:"Never" }}</td>
            </tr>
            {% endfor %}
            </tbody>
        </table>
    </div>
    {% else %}
        <div class="alert alert-info">No active APIs configured yet.</div>
    {% endif %}
</div>

<!-- Recent usage -->
{% if recent_usage %}
<div>
    <h2 class="text-xl font-semibold mb-3">Recent Usage</h2>
    <div class="overflow-x-auto">
        <table class="table table-zebra table-sm w-full">
            <thead><tr><th>Time</th><th>Model</th><th>In</th><th>Out</th><th>Cost</th><th>Purpose</th></tr></thead>
            <tbody>
            {% for u in recent_usage %}
            <tr>
                <td class="text-xs">{{ u.timestamp|date:"M d H:i" }}</td>
                <td class="font-mono text-xs">{{ u.model.name }}</td>
                <td>{{ u.input_tokens }}</td>
                <td>{{ u.output_tokens }}</td>
                <td>${{ u.total_cost|floatformat:4 }}</td>
                <td><span class="badge badge-ghost badge-sm">{{ u.get_purpose_display }}</span></td>
            </tr>
            {% endfor %}
            </tbody>
        </table>
    </div>
</div>
{% endif %}
{% endblock %}