{% extends "layouts/mobile_base.twig" %}
{% block title %}
    {% if employee %}{{ employee.getName() }} {{ employee.getSurname() }} · {% endif %}
    {{ translations.competencies|default('Kompetencje') }} · TFBuddy
{% endblock %}
{% block topbar_title %}
    {% if employee %}{{ employee.getName() }} {{ employee.getSurname() }}{% else %}{{ translations.competencies|default('Kompetencje') }}{% endif %}
{% endblock %}
{% block topbar_subtitle %}{{ translations.competencies|default('Kompetencje') }}{% endblock %}
{% block topbar_actions %}
    <a href="{{ root }}/pwa/employees" class="btn btn-sm btn-outline-secondary px-2">
        <i class="bi bi-arrow-left"></i>
    </a>
{% endblock %}

{% block head %}
<style>
    /* ── Filter pills ── */
    .comp-filter-bar {
        display: flex; gap: .5rem; margin-bottom: 1rem; overflow-x: auto;
        scrollbar-width: none; -ms-overflow-style: none; padding-bottom: 2px;
    }
    .comp-filter-bar::-webkit-scrollbar { display: none; }
    .comp-filter-pill {
        flex-shrink: 0; padding: .4rem .9rem; border-radius: 20px; border: none;
        font-size: .78rem; font-weight: 700; cursor: pointer;
        background: #f3f4f6; color: #6b7280;
        -webkit-tap-highlight-color: transparent; transition: background .15s, color .15s;
    }
    .comp-filter-pill.active {
        background: #435ebe; color: #fff;
    }
    .comp-filter-pill.active-green { background: #059669; color: #fff; }
    .comp-filter-pill.active-red   { background: #dc2626; color: #fff; }

    /* ── Section card ── */
    .comp-section-card {
        background: #fff; border-radius: 14px; border: none;
        box-shadow: 0 1px 5px rgba(0,0,0,.06);
        margin-bottom: .65rem; overflow: hidden;
    }

    /* ── Section header (toggle) ── */
    .comp-section-btn {
        display: flex; align-items: center; justify-content: space-between;
        width: 100%; padding: .8rem 1rem; background: none; border: none;
        cursor: pointer; -webkit-tap-highlight-color: transparent;
        text-align: left;
    }
    .comp-section-btn:active { background: #f8f9fa; }
    .comp-section-left { display: flex; align-items: center; gap: .65rem; flex: 1; min-width: 0; }
    .comp-section-chevron {
        color: #adb5bd; font-size: .72rem; flex-shrink: 0;
        transition: transform .25s;
    }
    .comp-section-card.is-open .comp-section-chevron { transform: rotate(180deg); }

    /* ── Collapsible body ── */
    .comp-section-body {
        display: grid; grid-template-rows: 0fr;
        transition: grid-template-rows .25s ease;
        border-top: 0px solid #f2f4f8;
    }
    .comp-section-card.is-open .comp-section-body {
        grid-template-rows: 1fr;
        border-top-width: 1px;
    }
    .comp-section-body-inner { overflow: hidden; }

    /* ── Item ── */
    .comp-item {
        display: flex; align-items: center; gap: .75rem;
        padding: .6rem 1rem; border-bottom: 1px solid #f9f9f9;
    }
    .comp-item:last-child { border-bottom: none; }
    .comp-check {
        width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
        display: flex; align-items: center; justify-content: center;
        font-size: .75rem;
    }
    .comp-check.owned   { background: #d1fae5; color: #059669; }
    .comp-check.missing { background: #f3f4f6; color: #d1d5db; }
    .comp-name { font-size: .85rem; color: #374151; }
    .comp-name.owned { font-weight: 600; color: #111827; }

    /* ── Badge ── */
    .comp-badge {
        border-radius: 999px; padding: .1rem .55rem;
        font-size: .68rem; font-weight: 700; flex-shrink: 0;
    }
    .comp-badge-full    { background: #d1fae5; color: #059669; }
    .comp-badge-partial { background: #e0e7ff; color: #3730a3; }
    .comp-badge-empty   { background: #f3f4f6; color: #9ca3af; }

    /* ── Section name ── */
    .comp-section-name {
        font-size: .82rem; font-weight: 700; color: #374151;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
</style>
{% endblock %}

{% block content %}
{% if employee %}

    {# ── Hero ── #}
    <div class="pwa-hero">
        {% set ownedCount = employee.getCompetencies()|length %}
        <div class="hero-label">{{ translations.competencies_owned|default('Posiadane kompetencje') }}</div>
        <div class="hero-value">{{ ownedCount }}</div>
        <div class="hero-sub">{{ employee.getName() }} {{ employee.getSurname() }}</div>
    </div>

    {# ── Filter pills ── #}
    <div class="comp-filter-bar">
        <button class="comp-filter-pill active" data-filter="all">
            {{ translations.filter_all|default('Wszystkie') }}
        </button>
        <button class="comp-filter-pill" data-filter="owned">
            <i class="bi bi-check-circle-fill me-1" style="color:#059669;"></i>
            {{ translations.filter_owned|default('Posiadane') }}
        </button>
        <button class="comp-filter-pill" data-filter="missing">
            <i class="bi bi-x-circle-fill me-1" style="color:#dc2626;"></i>
            {{ translations.filter_missing|default('Brakujące') }}
        </button>
    </div>

    {# ── Sections ── #}
    {% set owned_ids = employee.getCompetencyIds() %}

    {% for section_id, section in grouped_sections %}
        {% set section_owned = 0 %}
        {% set section_total = 0 %}
        {% for competency in competencies %}
            {% if competency.getSectionId() == section_id %}
                {% set section_total = section_total + 1 %}
                {% if competency.getId() in owned_ids %}{% set section_owned = section_owned + 1 %}{% endif %}
            {% endif %}
        {% endfor %}

        {% if section_total > 0 %}
            {% if section_owned == section_total %}
                {% set badge_cls = 'comp-badge-full' %}
            {% elseif section_owned == 0 %}
                {% set badge_cls = 'comp-badge-empty' %}
            {% else %}
                {% set badge_cls = 'comp-badge-partial' %}
            {% endif %}

            <div class="comp-section-card" id="sec-{{ section_id }}" data-total="{{ section_total }}" data-owned="{{ section_owned }}">
                <button class="comp-section-btn" aria-expanded="false">
                    <div class="comp-section-left">
                        <span class="comp-section-name">{{ section.getName() }}</span>
                        <span class="comp-badge {{ badge_cls }}">{{ section_owned }}/{{ section_total }}</span>
                    </div>
                    <i class="bi bi-chevron-down comp-section-chevron"></i>
                </button>
                <div class="comp-section-body">
                    <div class="comp-section-body-inner">
                        {% for competency in competencies %}
                            {% if competency.getSectionId() == section_id %}
                                {% set has = competency.getId() in owned_ids %}
                                <div class="comp-item" data-owned="{{ has ? '1' : '0' }}">
                                    <div class="comp-check {{ has ? 'owned' : 'missing' }}">
                                        <i class="bi bi-{{ has ? 'check-lg' : 'x' }}"></i>
                                    </div>
                                    <span class="comp-name {{ has ? 'owned' : '' }}">{{ competency.getName() }}</span>
                                </div>
                            {% endif %}
                        {% endfor %}
                    </div>
                </div>
            </div>
        {% endif %}
    {% endfor %}

    {% if competencies is empty %}
        <div class="pwa-empty-state">
            <i class="bi bi-award text-secondary"></i>
            <p>{{ translations.no_competencies_defined|default('Nie zdefiniowano jeszcze żadnych kompetencji.') }}</p>
        </div>
    {% endif %}

{% else %}
    <div class="pwa-empty-state">
        <i class="bi bi-person text-secondary"></i>
        <p>{{ translations.employee_not_found|default('Nie znaleziono pracownika.') }}</p>
    </div>
{% endif %}
{% endblock %}

{% block scripts %}
<script>
(function () {
    var currentFilter = 'all';

    // ── Accordion toggles ──────────────────────────────────────────────────
    document.querySelectorAll('.comp-section-btn').forEach(function (btn) {
        btn.addEventListener('click', function () {
            var card = btn.closest('.comp-section-card');
            var open = card.classList.toggle('is-open');
            btn.setAttribute('aria-expanded', open);
        });
    });

    // ── Filter ────────────────────────────────────────────────────────────
    function applyFilter(filter) {
        currentFilter = filter;

        document.querySelectorAll('.comp-filter-pill').forEach(function (p) {
            p.classList.remove('active', 'active-green', 'active-red');
            if (p.dataset.filter === filter) {
                if (filter === 'owned')   p.classList.add('active-green');
                else if (filter === 'missing') p.classList.add('active-red');
                else p.classList.add('active');
            }
        });

        document.querySelectorAll('.comp-section-card').forEach(function (card) {
            var visible = 0;
            card.querySelectorAll('.comp-item').forEach(function (item) {
                var isOwned = item.dataset.owned === '1';
                var show = filter === 'all'
                    || (filter === 'owned'   &&  isOwned)
                    || (filter === 'missing' && !isOwned);
                item.style.display = show ? '' : 'none';
                if (show) visible++;
            });

            if (visible === 0) {
                card.style.display = 'none';
            } else {
                card.style.display = '';
                if (filter !== 'all') {
                    card.classList.add('is-open');
                    card.querySelector('.comp-section-btn').setAttribute('aria-expanded', 'true');
                }
            }
        });
    }

    document.querySelectorAll('.comp-filter-pill').forEach(function (pill) {
        pill.addEventListener('click', function () {
            applyFilter(pill.dataset.filter);
        });
    });
})();
</script>
{% endblock %}