{% extends "base.html" %}
{% block title %}AI History{% endblock %}
{% block page_title %}AI History{% endblock %}

{% block topbar_actions %}
<a href="{{ url_for('ai.index') }}" class="btn btn-sm btn-primary" style="font-size:12px;"><i class="bi bi-stars me-1"></i>Open Chat</a>
{% endblock %}

{% block content %}
<div class="pcard p-0">
    {% if insights.items %}
    <table class="pfm-table">
        <thead>
            <tr>
                <th style="padding-left:20px;">Date</th>
                <th>Type</th>
                <th>Content</th>
                <th class="d-none d-md-table-cell text-end" style="padding-right:20px;">Tokens</th>
            </tr>
        </thead>
        <tbody>
        {% for item in insights.items %}
        <tr>
            <td style="padding-left:20px;font-size:12px;color:var(--muted);white-space:nowrap;">
                {{ item.created_at.strftime('%b %d, %H:%M') }}
            </td>
            <td>
                <span class="badge" style="font-size:11px;
                    {% if item.insight_type == 'daily_summary' %}background:#ede9fe;color:#5b21b6;
                    {% elif item.insight_type == 'chat_response' %}background:#dbeafe;color:#1e40af;
                    {% else %}background:#f1f5f9;color:#64748b;{% endif %}">
                    {{ item.insight_type | replace('_',' ') | title }}
                </span>
            </td>
            <td>
                {% if item.prompt_summary and item.insight_type == 'chat_response' %}
                <div style="font-size:11px;color:var(--muted);margin-bottom:3px;"><i class="bi bi-person me-1"></i>{{ item.prompt_summary }}</div>
                {% endif %}
                <div style="font-size:13px;color:var(--text);">{{ item.content | truncate(180) }}</div>
            </td>
            <td class="d-none d-md-table-cell text-end mono" style="font-size:12px;color:var(--muted);padding-right:20px;">
                {{ item.tokens_used or '—' }}
            </td>
        </tr>
        {% endfor %}
        </tbody>
    </table>

    {% if insights.pages > 1 %}
    <div class="d-flex justify-content-between align-items-center px-4 py-3" style="border-top:1px solid var(--border);font-size:12px;color:var(--muted);">
        <span>Page {{ insights.page }} of {{ insights.pages }} &nbsp;·&nbsp; {{ insights.total }} entries</span>
        <div class="d-flex gap-1">
            {% if insights.has_prev %}
            <a href="{{ url_for('ai.history', page=insights.prev_num) }}" class="btn btn-sm btn-outline-secondary" style="font-size:11px;">← Prev</a>
            {% endif %}
            {% if insights.has_next %}
            <a href="{{ url_for('ai.history', page=insights.next_num) }}" class="btn btn-sm btn-outline-secondary" style="font-size:11px;">Next →</a>
            {% endif %}
        </div>
    </div>
    {% endif %}

    {% else %}
    <div class="text-center py-5">
        <i class="bi bi-stars text-muted" style="font-size:2.5rem;"></i>
        <p class="text-muted mt-2">No AI history yet. Start a conversation.</p>
        <a href="{{ url_for('ai.index') }}" class="btn btn-sm btn-primary">Open Chat</a>
    </div>
    {% endif %}
</div>
{% endblock %}