{% extends "base.html" %}

{% block title %}Historia zmian - Norda Biznes Partner{% endblock %}

{% block extra_css %}
<style>
    .page-header {
        margin-bottom: var(--spacing-xl);
        text-align: center;
    }

    .page-header h1 {
        font-size: var(--font-size-3xl);
        color: var(--text-primary);
        margin-bottom: var(--spacing-sm);
    }

    .page-header p {
        color: var(--text-secondary);
        font-size: var(--font-size-lg);
    }

    .releases-container {
        max-width: 800px;
        margin: 0 auto;
    }

    .release-card {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        padding: var(--spacing-xl);
        margin-bottom: var(--spacing-lg);
        position: relative;
    }

    .release-card::before {
        content: '';
        position: absolute;
        left: -20px;
        top: 30px;
        width: 12px;
        height: 12px;
        background: var(--primary);
        border-radius: 50%;
        border: 3px solid var(--surface);
        box-shadow: 0 0 0 2px var(--primary);
    }

    .releases-timeline {
        border-left: 2px solid var(--border);
        padding-left: var(--spacing-xl);
        margin-left: var(--spacing-sm);
    }

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

    .release-version {
        font-size: var(--font-size-xl);
        font-weight: 600;
        color: var(--text-primary);
    }

    .release-date {
        font-size: var(--font-size-sm);
        color: var(--text-secondary);
        background: var(--background);
        padding: var(--spacing-xs) var(--spacing-sm);
        border-radius: var(--radius);
    }

    .release-badges {
        display: flex;
        gap: var(--spacing-xs);
        flex-wrap: wrap;
    }

    .release-badge {
        font-size: var(--font-size-xs);
        padding: 2px 8px;
        border-radius: var(--radius);
        font-weight: 500;
        text-transform: uppercase;
    }

    .badge-new {
        background: #dcfce7;
        color: #166534;
    }

    .badge-fix {
        background: #fee2e2;
        color: #991b1b;
    }

    .badge-improve {
        background: #dbeafe;
        color: #1e40af;
    }

    .badge-beta {
        background: #fef3c7;
        color: #92400e;
    }

    .release-changes {
        margin-top: var(--spacing-md);
    }

    .change-category {
        margin-bottom: var(--spacing-md);
    }

    .change-category h4 {
        font-size: var(--font-size-sm);
        color: var(--text-secondary);
        text-transform: uppercase;
        margin-bottom: var(--spacing-sm);
        display: flex;
        align-items: center;
        gap: var(--spacing-xs);
    }

    .change-category h4::before {
        font-size: var(--font-size-base);
    }

    .change-category.new h4::before { content: '✨'; }
    .change-category.fix h4::before { content: '🔧'; }
    .change-category.improve h4::before { content: '⚡'; }
    .change-category.beta h4::before { content: '🧪'; }

    .change-list {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .change-list li {
        padding: var(--spacing-xs) 0;
        padding-left: var(--spacing-md);
        position: relative;
        color: var(--text-primary);
        font-size: var(--font-size-sm);
    }

    .change-list li::before {
        content: '•';
        position: absolute;
        left: 0;
        color: var(--text-secondary);
    }

    .stats-banner {
        background: linear-gradient(135deg, var(--primary), var(--primary-dark, #1a56db));
        color: white;
        border-radius: var(--radius-lg);
        padding: var(--spacing-xl);
        margin-bottom: var(--spacing-xl);
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: var(--spacing-lg);
        text-align: center;
    }

    .notify-btn {
        background: var(--primary);
        color: white;
        border: none;
        padding: 6px 12px;
        border-radius: var(--radius);
        font-size: var(--font-size-xs);
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        gap: 4px;
        transition: background 0.2s;
    }

    .notify-btn:hover {
        background: var(--primary-dark, #1a56db);
    }

    .notify-btn:disabled {
        background: var(--text-secondary);
        cursor: not-allowed;
    }

    .notify-btn.sent {
        background: #16a34a;
    }

    .stat-item h3 {
        font-size: var(--font-size-3xl);
        font-weight: 700;
        margin-bottom: var(--spacing-xs);
    }

    .stat-item p {
        font-size: var(--font-size-sm);
        opacity: 0.9;
    }

    @media (max-width: 768px) {
        .releases-timeline {
            padding-left: var(--spacing-md);
            margin-left: 0;
        }

        .release-card::before {
            left: -15px;
        }
    }
</style>
{% endblock %}

{% block content %}
<div class="container">
    <div class="page-header">
        <h1>📋 Historia zmian</h1>
        <p>Dziennik rozwoju platformy Norda Biznes Partner</p>
    </div>

    <div class="stats-banner">
        <div class="stat-item">
            <h3>{{ stats.companies }}</h3>
            <p>Firm w katalogu</p>
        </div>
        <div class="stat-item">
            <h3>{{ stats.categories }}</h3>
            <p>Kategorii branżowych</p>
        </div>
        <div class="stat-item">
            <h3>{{ releases|length }}</h3>
            <p>Aktualizacji</p>
        </div>
        <div class="stat-item">
            <h3>2025</h3>
            <p>Rok startu</p>
        </div>
    </div>

    <div class="releases-container">
        <div class="releases-timeline">
            {% for release in releases %}
            <div class="release-card">
                <div class="release-header">
                    <div>
                        <div class="release-version">{{ release.version }}</div>
                        <div class="release-badges">
                            {% for badge in release.badges %}
                            <span class="release-badge badge-{{ badge }}">{{ badge }}</span>
                            {% endfor %}
                        </div>
                    </div>
                    <div style="display: flex; align-items: center; gap: 8px;">
                        <div class="release-date">{{ release.date }}</div>
                        {% if current_user.is_authenticated and current_user.is_admin %}
                        <button class="notify-btn" onclick="notifyRelease('{{ release.version }}', this)" title="Wyślij powiadomienia o tej wersji">
                            🔔 Powiadom
                        </button>
                        {% endif %}
                    </div>
                </div>

                <div class="release-changes">
                    {% if release.new %}
                    <div class="change-category new">
                        <h4>Nowości</h4>
                        <ul class="change-list">
                            {% for item in release.new %}
                            <li>{{ item }}</li>
                            {% endfor %}
                        </ul>
                    </div>
                    {% endif %}

                    {% if release.improve %}
                    <div class="change-category improve">
                        <h4>Ulepszenia</h4>
                        <ul class="change-list">
                            {% for item in release.improve %}
                            <li>{{ item }}</li>
                            {% endfor %}
                        </ul>
                    </div>
                    {% endif %}

                    {% if release.fix %}
                    <div class="change-category fix">
                        <h4>Naprawione</h4>
                        <ul class="change-list">
                            {% for item in release.fix %}
                            <li>{{ item }}</li>
                            {% endfor %}
                        </ul>
                    </div>
                    {% endif %}

                    {% if release.beta %}
                    <div class="change-category beta">
                        <h4>W fazie testów (BETA)</h4>
                        <ul class="change-list">
                            {% for item in release.beta %}
                            <li>{{ item }}</li>
                            {% endfor %}
                        </ul>
                    </div>
                    {% endif %}
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
{% if current_user.is_authenticated and current_user.is_admin %}
function notifyRelease(version, btn) {
    if (!confirm('Czy na pewno chcesz wysłać powiadomienia o wersji ' + version + ' do wszystkich użytkowników?')) {
        return;
    }

    btn.disabled = true;
    btn.innerHTML = '⏳ Wysyłanie...';

    // Get first 3 highlights from the release card
    const card = btn.closest('.release-card');
    const highlights = [];
    const items = card.querySelectorAll('.change-category.new .change-list li');
    items.forEach((item, i) => {
        if (i < 3) highlights.push(item.textContent.trim());
    });

    fetch('/admin/notify-release', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRFToken': '{{ csrf_token() }}'
        },
        body: JSON.stringify({
            version: version,
            highlights: highlights
        })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            btn.innerHTML = '✅ Wysłano';
            btn.classList.add('sent');
            alert(data.message);
        } else {
            btn.innerHTML = '❌ Błąd';
            btn.disabled = false;
            alert('Błąd: ' + data.error);
        }
    })
    .catch(error => {
        btn.innerHTML = '❌ Błąd';
        btn.disabled = false;
        alert('Błąd połączenia: ' + error);
    });
}
{% endif %}
{% endblock %}