{% extends "base.html" %}

{% block title %}Struktura branżowa - Raporty - Norda Biznes Partner{% endblock %}

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

    .report-header .back-link {
        display: inline-flex;
        align-items: center;
        gap: var(--spacing-xs);
        color: var(--text-secondary);
        text-decoration: none;
        font-size: var(--font-size-sm);
        margin-bottom: var(--spacing-md);
    }

    .report-header .back-link:hover {
        color: var(--primary);
    }

    .report-header h1 {
        font-size: var(--font-size-3xl);
        color: var(--text-primary);
        display: flex;
        align-items: center;
        gap: var(--spacing-md);
    }

    .report-header h1 span {
        font-size: 2rem;
    }

    .report-meta {
        background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
        border: 1px solid #86efac;
        border-radius: var(--radius-lg);
        padding: var(--spacing-lg);
        margin-bottom: var(--spacing-xl);
    }

    .report-meta-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: var(--spacing-md);
    }

    .report-meta-item {
        display: flex;
        align-items: center;
        gap: var(--spacing-sm);
        font-size: var(--font-size-sm);
        color: #166534;
    }

    .report-meta-item svg {
        width: 16px;
        height: 16px;
        flex-shrink: 0;
    }

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

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

    .stat-card.highlight {
        background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
        border-color: #fbbf24;
    }

    .stat-icon {
        font-size: 1.5rem;
        margin-bottom: var(--spacing-sm);
    }

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

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

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

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

    .category-card {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        padding: var(--spacing-xl);
        position: relative;
        overflow: hidden;
    }

    .category-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 4px;
        height: 100%;
        background: var(--primary);
    }

    .category-card.rank-1::before {
        background: linear-gradient(180deg, #fbbf24 0%, #f59e0b 100%);
    }

    .category-card.rank-2::before {
        background: linear-gradient(180deg, #a855f7 0%, #9333ea 100%);
    }

    .category-card.rank-3::before {
        background: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%);
    }

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

    .category-name {
        font-size: var(--font-size-lg);
        font-weight: 600;
        color: var(--text-primary);
    }

    .category-count-badge {
        background: var(--primary);
        color: white;
        padding: var(--spacing-xs) var(--spacing-sm);
        border-radius: var(--radius);
        font-size: var(--font-size-sm);
        font-weight: 600;
    }

    .category-card.rank-1 .category-count-badge {
        background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    }

    .category-card.rank-2 .category-count-badge {
        background: linear-gradient(135deg, #a855f7 0%, #9333ea 100%);
    }

    .category-card.rank-3 .category-count-badge {
        background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    }

    .category-bar {
        height: 8px;
        background: var(--border);
        border-radius: var(--radius);
        overflow: hidden;
        margin-bottom: var(--spacing-md);
    }

    .category-bar-fill {
        height: 100%;
        background: var(--primary);
        border-radius: var(--radius);
        transition: width 0.5s ease;
    }

    .category-card.rank-1 .category-bar-fill {
        background: linear-gradient(90deg, #fbbf24 0%, #f59e0b 100%);
    }

    .category-card.rank-2 .category-bar-fill {
        background: linear-gradient(90deg, #a855f7 0%, #9333ea 100%);
    }

    .category-card.rank-3 .category-bar-fill {
        background: linear-gradient(90deg, #3b82f6 0%, #2563eb 100%);
    }

    .category-stats {
        display: flex;
        gap: var(--spacing-lg);
        margin-bottom: var(--spacing-md);
        font-size: var(--font-size-sm);
        color: var(--text-secondary);
    }

    .category-stat {
        display: flex;
        align-items: center;
        gap: var(--spacing-xs);
    }

    .category-examples {
        font-size: var(--font-size-sm);
        color: var(--text-secondary);
        line-height: 1.6;
    }

    .category-examples strong {
        color: var(--text-primary);
    }

    .data-table-container {
        background: var(--surface);
        border-radius: var(--radius-lg);
        overflow: hidden;
        box-shadow: var(--shadow);
    }

    .data-table {
        width: 100%;
        border-collapse: collapse;
    }

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

    .data-table th {
        background: var(--background);
        font-weight: 600;
        font-size: var(--font-size-sm);
        color: var(--text-secondary);
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

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

    .data-table tbody tr:last-child td {
        border-bottom: none;
    }

    .rank-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        border-radius: 50%;
        font-weight: 600;
        font-size: var(--font-size-sm);
    }

    .rank-badge.gold {
        background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
        color: white;
    }

    .rank-badge.silver {
        background: linear-gradient(135deg, #a855f7 0%, #9333ea 100%);
        color: white;
    }

    .rank-badge.bronze {
        background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
        color: white;
    }

    .rank-badge.regular {
        background: var(--background);
        color: var(--text-secondary);
    }

    .percent-bar {
        display: flex;
        align-items: center;
        gap: var(--spacing-sm);
    }

    .percent-bar-bg {
        flex: 1;
        height: 8px;
        background: var(--border);
        border-radius: var(--radius);
        overflow: hidden;
    }

    .percent-bar-fill {
        height: 100%;
        background: var(--primary);
        border-radius: var(--radius);
    }

    .percent-value {
        min-width: 50px;
        text-align: right;
        font-weight: 500;
        color: var(--text-primary);
    }

    @media (max-width: 768px) {
        .categories-grid {
            grid-template-columns: 1fr;
        }
    }
</style>
{% endblock %}

{% block content %}
<div class="container">
    <div class="report-header">
        <a href="{{ url_for('reports.reports_index') }}" class="back-link">
            <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="M15 19l-7-7 7-7"/>
            </svg>
            Powrót do raportów
        </a>
        <h1><span>&#x1F3E2;</span> Struktura branżowa</h1>
    </div>

    <div class="report-meta">
        <div class="report-meta-grid">
            <div class="report-meta-item">
                <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
                </svg>
                <span>Wygenerowano: {{ generated_at.strftime('%d.%m.%Y, %H:%M:%S') }}</span>
            </div>
            <div class="report-meta-item">
                <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4"/>
                </svg>
                <span>Źródło: baza danych nordabiznes.pl</span>
            </div>
            <div class="report-meta-item">
                <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
                </svg>
                <span>Firm w raporcie: {{ total }}</span>
            </div>
        </div>
    </div>

    <div class="stats-grid">
        <div class="stat-card highlight">
            <div class="stat-icon">&#x1F3C6;</div>
            <div class="stat-value">{{ categories[0].name if categories else '-' }}</div>
            <div class="stat-label">Największa kategoria</div>
        </div>
        <div class="stat-card">
            <div class="stat-icon">&#x1F4CA;</div>
            <div class="stat-value">{{ categories|length }}</div>
            <div class="stat-label">Kategorii łącznie</div>
        </div>
        <div class="stat-card">
            <div class="stat-icon">&#x1F3E2;</div>
            <div class="stat-value">{{ total }}</div>
            <div class="stat-label">Firm łącznie</div>
        </div>
    </div>

    <h2 class="section-title">&#x1F4CA; Przegląd kategorii</h2>
    <div class="categories-grid">
        {% for category in categories[:6] %}
        <div class="category-card {% if loop.index == 1 %}rank-1{% elif loop.index == 2 %}rank-2{% elif loop.index == 3 %}rank-3{% endif %}">
            <div class="category-header">
                <div class="category-name">{{ category.name }}</div>
                <div class="category-count-badge">{{ category.count }} firm</div>
            </div>
            <div class="category-bar">
                <div class="category-bar-fill" style="width: {{ category.percent }}%"></div>
            </div>
            <div class="category-stats">
                <div class="category-stat">
                    <span>&#x1F4C8;</span>
                    <span>{{ category.percent }}% udziału</span>
                </div>
            </div>
            <div class="category-examples">
                <strong>Przykłady:</strong> {{ category.examples|join(', ') }}{% if category.count > 3 %}...{% endif %}
            </div>
        </div>
        {% endfor %}
    </div>

    <h2 class="section-title">&#x1F4CB; Pełna tabela</h2>
    <div class="data-table-container">
        <table class="data-table">
            <thead>
                <tr>
                    <th style="width: 60px;">#</th>
                    <th>Kategoria</th>
                    <th style="width: 100px;">Liczba firm</th>
                    <th>Udział</th>
                    <th>Przykłady firm</th>
                </tr>
            </thead>
            <tbody>
                {% for category in categories %}
                <tr>
                    <td>
                        {% if loop.index == 1 %}
                        <span class="rank-badge gold">1</span>
                        {% elif loop.index == 2 %}
                        <span class="rank-badge silver">2</span>
                        {% elif loop.index == 3 %}
                        <span class="rank-badge bronze">3</span>
                        {% else %}
                        <span class="rank-badge regular">{{ loop.index }}</span>
                        {% endif %}
                    </td>
                    <td><strong>{{ category.name }}</strong></td>
                    <td>{{ category.count }}</td>
                    <td>
                        <div class="percent-bar">
                            <div class="percent-bar-bg">
                                <div class="percent-bar-fill" style="width: {{ category.percent }}%"></div>
                            </div>
                            <span class="percent-value">{{ category.percent }}%</span>
                        </div>
                    </td>
                    <td>{{ category.examples|join(', ') }}</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>
{% endblock %}
