{% extends "base.html" %}

{% block title %}AI - {{ user.name or user.email }} - Panel Admina{% endblock %}

{% block extra_css %}
<style>
    .page-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: var(--spacing-xl);
    }

    .page-header h1 {
        font-size: var(--font-size-2xl);
        margin-bottom: var(--spacing-xs);
    }

    .breadcrumb {
        display: flex;
        align-items: center;
        gap: var(--spacing-sm);
        font-size: var(--font-size-sm);
        color: var(--text-secondary);
        margin-bottom: var(--spacing-sm);
    }

    .breadcrumb a {
        color: var(--primary);
        text-decoration: none;
    }

    .breadcrumb a:hover {
        text-decoration: underline;
    }

    .user-card {
        background: var(--surface);
        padding: var(--spacing-xl);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow);
        margin-bottom: var(--spacing-xl);
        display: flex;
        align-items: center;
        gap: var(--spacing-xl);
    }

    .user-avatar {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        background: var(--primary);
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: var(--font-size-2xl);
        font-weight: 700;
        flex-shrink: 0;
    }

    .user-details {
        flex: 1;
    }

    .user-name-large {
        font-size: var(--font-size-xl);
        font-weight: 700;
        color: var(--text-primary);
        margin-bottom: var(--spacing-xs);
    }

    .user-email {
        color: var(--text-secondary);
        font-size: var(--font-size-sm);
        margin-bottom: var(--spacing-xs);
    }

    .user-company-badge {
        display: inline-flex;
        align-items: center;
        gap: var(--spacing-xs);
        padding: var(--spacing-xs) var(--spacing-sm);
        background: #f0f9ff;
        border: 1px solid #bae6fd;
        color: #0369a1;
        border-radius: var(--radius);
        font-size: var(--font-size-sm);
    }

    .stats-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
        gap: var(--spacing-lg);
        margin-bottom: var(--spacing-2xl);
    }

    .stat-card {
        background: var(--surface);
        padding: var(--spacing-lg);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow);
        text-align: center;
    }

    .stat-card.highlight { border-left: 4px solid var(--primary); }
    .stat-card.success { border-left: 4px solid var(--success); }
    .stat-card.warning { border-left: 4px solid var(--warning); }
    .stat-card.error { border-left: 4px solid var(--error); }
    .stat-card.info { border-left: 4px solid #6366f1; }

    .stat-value {
        font-size: var(--font-size-2xl);
        font-weight: 700;
        color: var(--text-primary);
    }

    .stat-value.primary { color: var(--primary); }
    .stat-value.success { color: var(--success); }
    .stat-value.warning { color: var(--warning); }
    .stat-value.error { color: var(--error); }
    .stat-value.info { color: #6366f1; }

    .stat-label {
        color: var(--text-secondary);
        font-size: var(--font-size-sm);
        margin-top: var(--spacing-xs);
    }

    .section {
        background: var(--surface);
        padding: var(--spacing-xl);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow);
        margin-bottom: var(--spacing-xl);
    }

    .section h2 {
        font-size: var(--font-size-xl);
        margin-bottom: var(--spacing-lg);
        color: var(--text-primary);
        border-bottom: 2px solid var(--border);
        padding-bottom: var(--spacing-sm);
        display: flex;
        align-items: center;
        gap: var(--spacing-sm);
    }

    .section h2 .icon {
        font-size: var(--font-size-2xl);
    }

    /* Usage breakdown */
    .usage-breakdown {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-md);
    }

    .usage-row {
        display: flex;
        align-items: center;
        gap: var(--spacing-md);
    }

    .usage-label {
        width: 140px;
        font-size: var(--font-size-sm);
        color: var(--text-secondary);
    }

    .usage-bar-container {
        flex: 1;
        height: 24px;
        background: var(--background);
        border-radius: var(--radius);
        overflow: hidden;
    }

    .usage-bar {
        height: 100%;
        border-radius: var(--radius);
        display: flex;
        align-items: center;
        justify-content: flex-end;
        padding-right: var(--spacing-sm);
        font-size: var(--font-size-xs);
        font-weight: 600;
        color: white;
        min-width: 40px;
        transition: width 0.3s ease;
    }

    .usage-bar.chat { background: #3b82f6; }
    .usage-bar.news_evaluation { background: #10b981; }
    .usage-bar.user_creation { background: #f59e0b; }
    .usage-bar.image_analysis { background: #8b5cf6; }
    .usage-bar.other { background: #6b7280; }

    .usage-count {
        width: 80px;
        text-align: right;
        font-weight: 600;
        font-size: var(--font-size-sm);
    }

    .usage-cost {
        width: 80px;
        text-align: right;
        font-size: var(--font-size-sm);
        color: var(--text-secondary);
    }

    /* Logs table */
    .logs-table {
        width: 100%;
        border-collapse: collapse;
    }

    .logs-table th,
    .logs-table td {
        padding: var(--spacing-md);
        text-align: left;
        border-bottom: 1px solid var(--border);
    }

    .logs-table th {
        background: var(--background);
        font-weight: 600;
        font-size: var(--font-size-sm);
        color: var(--text-secondary);
    }

    .logs-table tr:hover {
        background: var(--background);
    }

    .log-type-badge {
        display: inline-block;
        padding: 2px 8px;
        border-radius: var(--radius-sm);
        font-size: var(--font-size-xs);
        font-weight: 500;
    }

    .log-type-badge.chat { background: #dbeafe; color: #1d4ed8; }
    .log-type-badge.news_evaluation { background: #d1fae5; color: #065f46; }
    .log-type-badge.user_creation { background: #fef3c7; color: #92400e; }
    .log-type-badge.image_analysis { background: #ede9fe; color: #5b21b6; }
    .log-type-badge.other { background: #f3f4f6; color: #374151; }

    .log-tokens {
        font-family: monospace;
        font-size: var(--font-size-sm);
    }

    .log-cost {
        font-weight: 500;
    }

    .log-time {
        color: var(--text-secondary);
        font-size: var(--font-size-sm);
    }

    .log-status-success {
        color: var(--success);
    }

    .log-status-error {
        color: var(--error);
    }

    .log-error-msg {
        font-size: var(--font-size-xs);
        color: var(--error);
        max-width: 200px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Pagination */
    .pagination {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: var(--spacing-sm);
        margin-top: var(--spacing-xl);
    }

    .pagination a,
    .pagination span {
        padding: var(--spacing-sm) var(--spacing-md);
        border-radius: var(--radius);
        text-decoration: none;
        font-size: var(--font-size-sm);
    }

    .pagination a {
        background: var(--surface);
        border: 1px solid var(--border);
        color: var(--text-secondary);
    }

    .pagination a:hover {
        background: var(--background);
        color: var(--text-primary);
    }

    .pagination .current {
        background: var(--primary);
        color: white;
        border: 1px solid var(--primary);
    }

    .pagination .disabled {
        color: var(--text-muted);
        cursor: not-allowed;
    }

    .empty-state {
        text-align: center;
        padding: var(--spacing-2xl);
        color: var(--text-secondary);
    }

    .empty-state .icon {
        font-size: 48px;
        margin-bottom: var(--spacing-md);
    }

    /* Sections grid */
    .sections-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
        gap: var(--spacing-xl);
        margin-bottom: var(--spacing-xl);
    }

    @media (max-width: 768px) {
        .user-card {
            flex-direction: column;
            text-align: center;
        }

        .sections-grid {
            grid-template-columns: 1fr;
        }

        .usage-label {
            width: 100px;
        }

        .logs-table {
            font-size: var(--font-size-sm);
        }
    }
</style>
{% endblock %}

{% block content %}
<div class="page-header">
    <div>
        <div class="breadcrumb">
            <a href="{{ url_for('admin_ai_usage') }}">Monitoring AI</a>
            <span>/</span>
            <span>Szczegoly uzytkownika</span>
        </div>
        <h1>Uzycie AI - {{ user.name or user.email.split('@')[0] }}</h1>
    </div>
    <a href="{{ url_for('admin_ai_usage') }}" class="btn btn-secondary">Powrot</a>
</div>

<!-- User Card -->
<div class="user-card">
    <div class="user-avatar">
        {{ (user.name or user.email)[0].upper() }}
    </div>
    <div class="user-details">
        <div class="user-name-large">{{ user.name or 'Brak nazwy' }}</div>
        <div class="user-email">{{ user.email }}</div>
        {% if company %}
        <span class="user-company-badge">
            <span>{{ company.name }}</span>
        </span>
        {% endif %}
    </div>
</div>

<!-- Stats -->
<div class="stats-grid">
    <div class="stat-card highlight">
        <div class="stat-value primary">{{ stats.total_requests }}</div>
        <div class="stat-label">Zapytan</div>
    </div>
    <div class="stat-card info">
        <div class="stat-value info">{{ "{:,}".format(stats.tokens_input) }}</div>
        <div class="stat-label">Tokenow input</div>
    </div>
    <div class="stat-card">
        <div class="stat-value">{{ "{:,}".format(stats.tokens_output) }}</div>
        <div class="stat-label">Tokenow output</div>
    </div>
    <div class="stat-card success">
        <div class="stat-value success">${{ "%.4f"|format(stats.cost_usd) }}</div>
        <div class="stat-label">Calkowity koszt</div>
    </div>
    <div class="stat-card {% if stats.errors > 0 %}error{% else %}success{% endif %}">
        <div class="stat-value {% if stats.errors > 0 %}error{% else %}success{% endif %}">{{ stats.errors }}</div>
        <div class="stat-label">Bledow</div>
    </div>
</div>

<!-- Usage by Type -->
<div class="sections-grid">
    <div class="section">
        <h2><span class="icon">📊</span> Wykorzystanie wg typu</h2>
        {% if usage_by_type %}
        <div class="usage-breakdown">
            {% for item in usage_by_type %}
            <div class="usage-row">
                <div class="usage-label">{{ item.type_label }}</div>
                <div class="usage-bar-container">
                    <div class="usage-bar {{ item.type_class }}" style="width: {{ item.percentage }}%">
                        {{ item.percentage }}%
                    </div>
                </div>
                <div class="usage-count">{{ item.count }}</div>
                <div class="usage-cost">${{ "%.4f"|format(item.cost_usd) }}</div>
            </div>
            {% endfor %}
        </div>
        {% else %}
        <div class="empty-state">
            <div class="icon">📭</div>
            <p>Brak danych</p>
        </div>
        {% endif %}
    </div>

    <div class="section">
        <h2><span class="icon">💡</span> Podsumowanie</h2>
        <div style="font-size: var(--font-size-sm); color: var(--text-secondary);">
            <p style="margin-bottom: var(--spacing-md);">
                <strong>{{ user.name or user.email.split('@')[0] }}</strong> wykonal/a <strong>{{ stats.total_requests }}</strong> zapytan do AI,
                wykorzystujac lacznie <strong>{{ "{:,}".format(stats.tokens_input + stats.tokens_output) }}</strong> tokenow.
            </p>
            {% if usage_by_type %}
            <p style="margin-bottom: var(--spacing-md);">
                Najczesciej uzywana funkcja: <strong>{{ usage_by_type[0].type_label }}</strong> ({{ usage_by_type[0].count }} zapytan).
            </p>
            {% endif %}
            <p>
                Calkowity koszt uzycia AI: <strong>${{ "%.4f"|format(stats.cost_usd) }}</strong>
            </p>
        </div>
    </div>
</div>

<!-- Logs Table -->
<div class="section">
    <h2>
        <span class="icon">📜</span> Historia zapytan
        <span style="font-size: var(--font-size-sm); font-weight: 400; margin-left: auto; color: var(--text-secondary);">
            {{ total_requests }} zapytan lacznie
        </span>
    </h2>

    {% if logs %}
    <table class="logs-table">
        <thead>
            <tr>
                <th>Typ</th>
                <th>Model</th>
                <th>Tokeny (in/out)</th>
                <th>Koszt</th>
                <th>Status</th>
                <th>Data</th>
            </tr>
        </thead>
        <tbody>
            {% for log in logs %}
            <tr>
                <td>
                    <span class="log-type-badge {{ log.request_type }}">{{ log.type_label }}</span>
                </td>
                <td style="font-size: var(--font-size-sm); color: var(--text-secondary);">
                    {{ log.model or '-' }}
                </td>
                <td class="log-tokens">
                    {{ log.tokens_input or 0 }} / {{ log.tokens_output or 0 }}
                </td>
                <td class="log-cost">
                    ${{ "%.5f"|format(log.cost_usd) }}
                </td>
                <td>
                    {% if log.success %}
                    <span class="log-status-success">OK</span>
                    {% else %}
                    <span class="log-status-error">Blad</span>
                    {% if log.error_message %}
                    <div class="log-error-msg" title="{{ log.error_message }}">{{ log.error_message[:50] }}...</div>
                    {% endif %}
                    {% endif %}
                </td>
                <td class="log-time">
                    {{ log.created_at.strftime('%d.%m.%Y %H:%M') }}
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>

    <!-- Pagination -->
    {% if total_pages > 1 %}
    <div class="pagination">
        {% if page > 1 %}
        <a href="{{ url_for('admin_ai_usage_user', user_id=user.id, page=page-1) }}">Poprzednia</a>
        {% else %}
        <span class="disabled">Poprzednia</span>
        {% endif %}

        {% for p in range(1, total_pages + 1) %}
            {% if p == page %}
            <span class="current">{{ p }}</span>
            {% elif p == 1 or p == total_pages or (p >= page - 2 and p <= page + 2) %}
            <a href="{{ url_for('admin_ai_usage_user', user_id=user.id, page=p) }}">{{ p }}</a>
            {% elif p == page - 3 or p == page + 3 %}
            <span>...</span>
            {% endif %}
        {% endfor %}

        {% if page < total_pages %}
        <a href="{{ url_for('admin_ai_usage_user', user_id=user.id, page=page+1) }}">Nastepna</a>
        {% else %}
        <span class="disabled">Nastepna</span>
        {% endif %}
    </div>
    {% endif %}

    {% else %}
    <div class="empty-state">
        <div class="icon">📭</div>
        <p>Brak zapytan AI dla tego uzytkownika</p>
    </div>
    {% endif %}
</div>
{% endblock %}
