{% extends "base.html" %}

{% block title %}Porównanie modeli AI - Panel Admina{% endblock %}

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

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

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

    .model-badge {
        padding: var(--spacing-sm) var(--spacing-md);
        border-radius: var(--radius);
        font-size: var(--font-size-sm);
        font-weight: 600;
    }

    .model-badge.old {
        background: #fef3c7;
        color: #92400e;
        border: 1px solid #fcd34d;
    }

    .model-badge.new {
        background: #d1fae5;
        color: #065f46;
        border: 1px solid #6ee7b7;
    }

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

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

    .user-section h2 .user-icon {
        width: 32px;
        height: 32px;
        background: var(--primary);
        color: white;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: var(--font-size-md);
    }

    .comparison-card {
        background: var(--background);
        border-radius: var(--radius);
        padding: var(--spacing-lg);
        margin-bottom: var(--spacing-lg);
        border: 1px solid var(--border);
    }

    .question-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: var(--spacing-md);
        gap: var(--spacing-md);
    }

    .question-text {
        font-weight: 600;
        color: var(--text-primary);
        font-size: var(--font-size-md);
        flex: 1;
    }

    .question-type {
        padding: var(--spacing-xs) var(--spacing-sm);
        border-radius: var(--radius-sm);
        font-size: var(--font-size-xs);
        text-transform: uppercase;
        font-weight: 600;
    }

    .question-type.simple { background: #e0f2fe; color: #0369a1; }
    .question-type.complex { background: #fce7f3; color: #be185d; }
    .question-type.business { background: #fef3c7; color: #92400e; }
    .question-type.company { background: #d1fae5; color: #065f46; }
    .question-type.analysis { background: #ede9fe; color: #6d28d9; }
    .question-type.listing { background: #e0e7ff; color: #4338ca; }
    .question-type.contact { background: #ffedd5; color: #c2410c; }

    .answers-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--spacing-lg);
    }

    @media (max-width: 768px) {
        .answers-grid {
            grid-template-columns: 1fr;
        }
    }

    .answer-box {
        padding: var(--spacing-md);
        border-radius: var(--radius);
        font-size: var(--font-size-sm);
        line-height: 1.6;
    }

    .answer-box.old {
        background: #fffbeb;
        border: 1px solid #fcd34d;
    }

    .answer-box.new {
        background: #ecfdf5;
        border: 1px solid #6ee7b7;
    }

    .answer-label {
        font-weight: 600;
        font-size: var(--font-size-xs);
        text-transform: uppercase;
        margin-bottom: var(--spacing-sm);
        display: flex;
        align-items: center;
        gap: var(--spacing-xs);
    }

    .answer-label.old { color: #92400e; }
    .answer-label.new { color: #065f46; }

    .answer-content {
        color: var(--text-secondary);
        white-space: pre-wrap;
    }

    .answer-content a {
        color: var(--primary);
        text-decoration: underline;
    }

    .run-simulation-btn {
        background: var(--primary);
        color: white;
        padding: var(--spacing-sm) var(--spacing-lg);
        border-radius: var(--radius);
        border: none;
        cursor: pointer;
        font-size: var(--font-size-sm);
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: var(--spacing-sm);
        transition: var(--transition);
    }

    .run-simulation-btn:hover {
        background: var(--primary-dark);
        transform: translateY(-1px);
    }

    .run-simulation-btn:disabled {
        background: var(--text-muted);
        cursor: not-allowed;
        transform: none;
    }

    .loading-indicator {
        display: none;
        align-items: center;
        gap: var(--spacing-sm);
        color: var(--text-secondary);
        font-size: var(--font-size-sm);
    }

    .loading-indicator.active {
        display: flex;
    }

    .spinner {
        width: 16px;
        height: 16px;
        border: 2px solid var(--border);
        border-top-color: var(--primary);
        border-radius: 50%;
        animation: spin 1s linear infinite;
    }

    @keyframes spin {
        to { transform: rotate(360deg); }
    }

    .info-banner {
        background: #eff6ff;
        border: 1px solid #bfdbfe;
        border-radius: var(--radius);
        padding: var(--spacing-md);
        margin-bottom: var(--spacing-xl);
        display: flex;
        align-items: flex-start;
        gap: var(--spacing-md);
    }

    .info-banner svg {
        flex-shrink: 0;
        color: #2563eb;
    }

    .info-banner p {
        margin: 0;
        color: #1e40af;
        font-size: var(--font-size-sm);
    }

    .timestamp {
        color: var(--text-muted);
        font-size: var(--font-size-xs);
        margin-top: var(--spacing-xl);
        text-align: center;
    }
</style>
{% endblock %}

{% block content %}
<div class="container" style="max-width: 1200px; margin: 0 auto; padding: var(--spacing-xl);">
    <div class="page-header">
        <h1>Porównanie modeli AI</h1>
        <div class="model-badges">
            <span class="model-badge old">Stary: Gemini 2.5 Flash-Lite</span>
            <span style="color: var(--text-muted);">vs</span>
            <span class="model-badge new">Nowy: Gemini 3 Flash</span>
        </div>
    </div>

    <div class="info-banner">
        <svg width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
        </svg>
        <p>
            Porównanie odpowiedzi AI na te same pytania zadane przez użytkowników.
            <strong>Stary model</strong> to oryginalne odpowiedzi z historii konwersacji.
            <strong>Nowy model</strong> to odpowiedzi wygenerowane przez Gemini 3 Flash (29.01.2026).
        </p>
    </div>

    {% if not results %}
    <div style="text-align: center; padding: var(--spacing-2xl);">
        <p style="color: var(--text-secondary); margin-bottom: var(--spacing-lg);">
            Brak wyników symulacji. Kliknij przycisk poniżej, aby uruchomić porównanie.
        </p>
        <button class="run-simulation-btn" onclick="runSimulation()" id="runBtn">
            <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"/>
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
            </svg>
            Uruchom symulację
        </button>
        <div class="loading-indicator" id="loadingIndicator">
            <div class="spinner"></div>
            <span>Generowanie odpowiedzi... (może potrwać do 2 minut)</span>
        </div>
    </div>
    {% else %}

    {% for user_key, user_data in results.items() %}
    <div class="user-section">
        <h2>
            <span class="user-icon">{{ user_data.user_name[0] }}</span>
            {{ user_data.user_name }}
            <span style="font-size: var(--font-size-sm); color: var(--text-muted); font-weight: normal;">
                ({{ user_data.comparisons|length }} pytań)
            </span>
        </h2>

        {% for comp in user_data.comparisons %}
        <div class="comparison-card">
            <div class="question-header">
                <div class="question-text">{{ comp.question }}</div>
                <span class="question-type {{ comp.type }}">{{ comp.type }}</span>
            </div>

            <div class="answers-grid">
                <div class="answer-box old">
                    <div class="answer-label old">
                        <svg width="12" height="12" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
                        </svg>
                        Gemini 2.5 Flash-Lite (oryginał)
                    </div>
                    <div class="answer-content">{{ comp.old_answer }}</div>
                </div>

                <div class="answer-box new">
                    <div class="answer-label new">
                        <svg width="12" height="12" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
                        </svg>
                        Gemini 3 Flash (nowy)
                    </div>
                    <div class="answer-content">{{ comp.new_answer }}</div>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
    {% endfor %}

    <div style="text-align: center; margin-top: var(--spacing-xl);">
        <button class="run-simulation-btn" onclick="runSimulation()" id="runBtn" style="background: var(--text-secondary);">
            <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
            </svg>
            Uruchom ponownie
        </button>
        <div class="loading-indicator" id="loadingIndicator">
            <div class="spinner"></div>
            <span>Generowanie odpowiedzi... (może potrwać do 2 minut)</span>
        </div>
    </div>

    <p class="timestamp">
        Wygenerowano: {{ generated_at }}
    </p>

    {% endif %}
</div>
{% endblock %}

{% block extra_js %}
const csrfToken = '{{ csrf_token() }}';

function runSimulation() {
    const btn = document.getElementById('runBtn');
    const loader = document.getElementById('loadingIndicator');
    const originalText = btn.textContent;

    btn.disabled = true;
    btn.textContent = 'Trwa symulacja...';
    loader.classList.add('active');

    fetch('/admin/model-comparison/run', {
        method: 'POST',
        headers: {
            'X-CSRFToken': csrfToken,
            'Content-Type': 'application/json'
        }
    })
    .then(response => {
        if (!response.ok) {
            throw new Error('HTTP ' + response.status);
        }
        return response.json();
    })
    .then(data => {
        if (data.success) {
            window.location.reload();
        } else {
            alert('Błąd: ' + data.error);
            btn.disabled = false;
            btn.textContent = originalText;
            loader.classList.remove('active');
        }
    })
    .catch(error => {
        alert('Błąd: ' + error.message);
        btn.disabled = false;
        btn.textContent = originalText;
        loader.classList.remove('active');
    });
}
{% endblock %}
