{% extends "layouts/base.twig" %}

{% block title %}{{ translations.employee_competencies ?? 'Kompetencje pracownika' }}{% endblock %}

{% block head %}
    {{ parent() }}
    <style>
        /* KPI cards */
        .kpi-card {
            border-radius: .75rem; padding: 1.25rem 1.5rem;
            display: flex; align-items: center; gap: 1rem;
            background: #fff; border: 1.5px solid #e9ecef;
            transition: box-shadow .15s, border-color .15s, transform .1s;
            cursor: pointer; user-select: none;
        }
        .kpi-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,.10); transform: translateY(-1px); }
        .kpi-card.kpi-active-all     { border-color: #6c757d !important; box-shadow: 0 0 0 3px rgba(108,117,125,.18); }
        .kpi-card.kpi-active-owned   { border-color: #198754 !important; box-shadow: 0 0 0 3px rgba(25,135,84,.18); }
        .kpi-card.kpi-active-missing { border-color: #dc3545 !important; box-shadow: 0 0 0 3px rgba(220,53,69,.18); }
        .kpi-card.kpi-active-pct     { border-color: #ffc107 !important; box-shadow: 0 0 0 3px rgba(255,193,7,.18); }
        .kpi-icon { width: 3rem; height: 3rem; border-radius: .6rem; display: flex; align-items: center; justify-content: center; font-size: 1.35rem; flex-shrink: 0; }
        .kpi-value { font-size: 1.6rem; font-weight: 700; line-height: 1.1; }
        .kpi-label { font-size: .78rem; color: #6c757d; margin-top: .15rem; }
        .kpi-filter-hint { font-size: .68rem; color: #adb5bd; margin-top: .2rem; display: none; }
        .kpi-card:hover .kpi-filter-hint,
        .kpi-card[class*="kpi-active"] .kpi-filter-hint { display: block; }
        /* Filter bar */
        .filter-bar { background: #f8f9fa; border-radius: .75rem; padding: 1rem 1.25rem; }
        .status-pill {
            border-radius: 999px; padding: .3rem .85rem; font-size: .8rem;
            font-weight: 500; cursor: pointer; border: 1.5px solid #dee2e6;
            background: #fff; color: #495057; transition: all .15s; line-height: 1.4;
        }
        .status-pill.active { border-color: transparent; }
        .status-pill[data-status="all"].active    { background: #6c757d; color: #fff; }
        .status-pill[data-status="owned"].active  { background: #198754; color: #fff; }
        .status-pill[data-status="missing"].active{ background: #dc3545; color: #fff; }
        /* Competency rows */
        .section-progress-bar { height: 8px; border-radius: 4px; }
        .competency-row {
            border-radius: .6rem; border: 1px solid #e9ecef; background: #fff;
            padding: .75rem 1rem; display: flex; align-items: center; gap: .85rem;
            transition: border-color .15s, box-shadow .15s;
        }
        .competency-row:hover { border-color: #c5cfe8; box-shadow: 0 2px 8px rgba(0,0,0,.06); }
        .competency-row.is-owned   { border-left: 3px solid #198754; }
        .competency-row.is-missing { border-left: 3px solid #dee2e6; }
        .comp-info { flex-grow: 1; min-width: 0; }
        .comp-name { font-weight: 600; font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .comp-meta { font-size: .75rem; color: #6c757d; margin-top: .2rem; display: flex; flex-wrap: wrap; gap: .4rem; }
        .comp-meta-tag { background: #f0f2f5; border-radius: 4px; padding: .05rem .45rem; }
        #noResults { display: none; }
        .section-stat-row { border-bottom: 1px solid #f0f0f0; padding: .5rem 0; }
        .section-stat-row:last-child { border-bottom: none; }
    </style>
{% endblock %}

{% block page_heading %}
    <div class="page-heading">
        <h3>{{ translations.employee_competencies ?? 'Kompetencje pracownika' }}</h3>
        <p class="text-subtitle text-muted">{{ translations.employee_competencies_subtitle ?? '' }}</p>
    </div>
{% endblock %}

{% block content %}

{# ── Pre-compute stats ── #}
{% set emp_ids = employee.getCompetencyIds() %}
{% set total_count = competencies|length %}
{% set owned_count = 0 %}
{% for c in competencies %}
    {% if c.getId() in emp_ids %}{% set owned_count = owned_count + 1 %}{% endif %}
{% endfor %}
{% set missing_count = total_count - owned_count %}
{% set pct = total_count > 0 ? ((owned_count / total_count) * 100)|round(1) : 0 %}

{# per-section stats #}
{% set sec_total = {} %}
{% set sec_owned = {} %}
{% for c in competencies %}
    {% set sid = c.getSectionId() %}
    {% set sec_total = sec_total|merge({(sid): (sec_total[sid] ?? 0) + 1}) %}
    {% if c.getId() in emp_ids %}
        {% set sec_owned = sec_owned|merge({(sid): (sec_owned[sid] ?? 0) + 1}) %}
    {% endif %}
{% endfor %}

{# ── KPI cards – każda klikalana i filtruje listę ── #}
<div class="row g-3 mb-4">
    <div class="col-6 col-md-4 col-xl-3">
        <div class="kpi-card kpi-active-all" data-kpi="all" role="button" tabindex="0"
             title="{{ translations.show_all ?? 'Pokaż wszystkie' }}">
            <div class="kpi-icon bg-primary bg-opacity-10 text-primary"><i class="bi bi-list-check"></i></div>
            <div>
                <div class="kpi-value">{{ total_count }}</div>
                <div class="kpi-label">{{ translations.total_competencies ?? 'Wszystkich' }}</div>
                <div class="kpi-filter-hint"><i class="bi bi-funnel-fill me-1"></i>{{ translations.click_to_filter ?? 'Kliknij, aby filtrować' }}</div>
            </div>
        </div>
    </div>
    <div class="col-6 col-md-4 col-xl-3">
        <div class="kpi-card" data-kpi="owned" role="button" tabindex="0"
             title="{{ translations.show_owned ?? 'Pokaż posiadane' }}">
            <div class="kpi-icon bg-success bg-opacity-10 text-success"><i class="bi bi-check-circle"></i></div>
            <div>
                <div class="kpi-value text-success">{{ owned_count }}</div>
                <div class="kpi-label">{{ translations.owned_competencies ?? 'Posiada' }}</div>
                <div class="kpi-filter-hint"><i class="bi bi-funnel-fill me-1"></i>{{ translations.click_to_filter ?? 'Kliknij, aby filtrować' }}</div>
            </div>
        </div>
    </div>
    <div class="col-6 col-md-4 col-xl-3">
        <div class="kpi-card" data-kpi="missing" role="button" tabindex="0"
             title="{{ translations.show_missing ?? 'Pokaż brakujące' }}">
            <div class="kpi-icon bg-danger bg-opacity-10 text-danger"><i class="bi bi-x-circle"></i></div>
            <div>
                <div class="kpi-value text-danger">{{ missing_count }}</div>
                <div class="kpi-label">{{ translations.missing_competencies ?? 'Brakuje' }}</div>
                <div class="kpi-filter-hint"><i class="bi bi-funnel-fill me-1"></i>{{ translations.click_to_filter ?? 'Kliknij, aby filtrować' }}</div>
            </div>
        </div>
    </div>
    <div class="col-6 col-md-4 col-xl-3">
        <div class="kpi-card" data-kpi="pct" role="button" tabindex="0"
             title="{{ translations.show_all ?? 'Pokaż wszystkie' }}">
            <div class="kpi-icon bg-warning bg-opacity-10 text-warning"><i class="bi bi-percent"></i></div>
            <div>
                <div class="kpi-value">{{ pct }}%</div>
                <div class="kpi-label">{{ translations.completion ?? 'Ukończenie' }}</div>
                <div class="kpi-filter-hint"><i class="bi bi-funnel-fill me-1"></i>{{ translations.click_to_filter ?? 'Kliknij, aby filtrować' }}</div>
            </div>
        </div>
    </div>
</div>

<div class="row g-3">
    <div class="col-12 col-xl-8">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center flex-wrap gap-2">
                <div>
                    <h4 class="card-title mb-1">
                        {{ employee.getDisplayName() ?: (employee.getName() ~ ' ' ~ employee.getSurname()) }}
                    </h4>
                    <div class="text-muted small">{{ translations.competencies_readonly_hint ?? 'Widok tylko do odczytu' }}</div>
                </div>
                <a href="{{ root }}/employees/{{ employee.getId() }}" class="btn btn-secondary btn-sm">
                    <i class="bi bi-arrow-left"></i> {{ translations.back ?? 'Wróć' }}
                </a>
            </div>

            <div class="card-body">
                {# ── Filter toolbar ── #}
                <div class="filter-bar mb-4">
                    <div class="row g-3 align-items-center">
                        <div class="col-12 col-md-5">
                            <input type="text" id="comp_search" class="form-control form-control-sm"
                                   placeholder="{{ translations.search ?? 'Szukaj...' }}">
                        </div>
                        <div class="col-12 col-md-4">
                            <select id="section_filter" class="form-select form-select-sm">
                                <option value="">{{ translations.all_sections ?? 'Wszystkie sekcje' }}</option>
                                {% for section in grouped_sections %}
                                    <option value="{{ section.getId() }}">{{ section.getName() }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="col-12 col-md-3">
                            <div class="d-flex gap-2 flex-wrap">
                                <button class="status-pill active" data-status="all">{{ translations.all ?? 'Wszystkie' }}</button>
                                <button class="status-pill" data-status="owned">{{ translations.owned ?? 'Posiada' }}</button>
                                <button class="status-pill" data-status="missing">{{ translations.missing ?? 'Brak' }}</button>
                            </div>
                        </div>
                    </div>
                </div>

                {# ── Competency list grouped by section ── #}
                {% for section in grouped_sections %}
                    {% set sec_id = section.getId() %}
                    {% set s_total = sec_total[sec_id] ?? 0 %}
                    {% set s_owned = sec_owned[sec_id] ?? 0 %}
                    {% set s_pct   = s_total > 0 ? ((s_owned / s_total) * 100)|round(0) : 0 %}

                    <div class="section-block mb-4" data-section-id="{{ sec_id }}">
                        <div class="d-flex justify-content-between align-items-center mb-2">
                            <div class="fw-semibold">{{ section.getName() }}</div>
                            <span class="badge bg-light text-dark">{{ s_owned }}/{{ s_total }}</span>
                        </div>
                        <div class="progress section-progress-bar mb-3">
                            <div class="progress-bar {{ s_pct == 100 ? 'bg-success' : 'bg-primary' }}"
                                 style="width: {{ s_pct }}%"></div>
                        </div>

                        <div class="d-flex flex-column gap-2">
                            {% for c in competencies %}
                                {% if c.getSectionId() == sec_id %}
                                    {% set is_owned = c.getId() in emp_ids %}
                                    <div class="competency-row {{ is_owned ? 'is-owned' : 'is-missing' }}"
                                         data-section="{{ sec_id }}"
                                         data-status="{{ is_owned ? 'owned' : 'missing' }}"
                                         data-search="{{ (c.getName() ~ ' ' ~ (c.getDescription() ?? ''))|lower }}">

                                        <div class="flex-shrink-0">
                                            {% if is_owned %}
                                                <span class="badge bg-success rounded-circle p-2">
                                                    <i class="bi bi-check2"></i>
                                                </span>
                                            {% else %}
                                                <span class="badge bg-light text-muted rounded-circle p-2">
                                                    <i class="bi bi-dash"></i>
                                                </span>
                                            {% endif %}
                                        </div>

                                        <div class="comp-info">
                                            <div class="comp-name">{{ c.getName() }}</div>
                                            {% if c.getDescription() %}
                                                <div class="comp-meta">
                                                    <span class="comp-meta-tag">{{ c.getDescription()|slice(0, 80) }}{% if c.getDescription()|length > 80 %}...{% endif %}</span>
                                                </div>
                                            {% endif %}
                                        </div>

                                        <div class="flex-shrink-0">
                                            {% if is_owned %}
                                                <span class="badge bg-success-subtle text-success border border-success-subtle">
                                                    {{ translations.owned ?? 'Posiada' }}
                                                </span>
                                            {% else %}
                                                <span class="badge bg-secondary-subtle text-secondary border border-secondary-subtle">
                                                    {{ translations.missing ?? 'Brak' }}
                                                </span>
                                            {% endif %}
                                        </div>
                                    </div>
                                {% endif %}
                            {% endfor %}
                        </div>
                    </div>
                {% endfor %}

                <div id="noResults" class="text-center text-muted py-4">
                    <i class="bi bi-search fs-4"></i>
                    <p class="mt-2">{{ translations.no_results ?? 'Brak wyników' }}</p>
                </div>
            </div>
        </div>
    </div>

    {# ── Sidebar: section progress ── #}
    <div class="col-12 col-xl-4">
        <div class="card">
            <div class="card-header">
                <h5 class="card-title mb-0">{{ translations.sections_progress ?? 'Postęp wg sekcji' }}</h5>
            </div>
            <div class="card-body p-3">
                {% for section in grouped_sections %}
                    {% set sid = section.getId() %}
                    {% set st = sec_total[sid] ?? 0 %}
                    {% set so = sec_owned[sid] ?? 0 %}
                    {% set sp = st > 0 ? ((so / st) * 100)|round(0) : 0 %}
                    <div class="section-stat-row">
                        <div class="d-flex justify-content-between mb-1">
                            <span class="small fw-semibold">{{ section.getName() }}</span>
                            <span class="small text-muted">{{ so }}/{{ st }}</span>
                        </div>
                        <div class="progress" style="height:6px;">
                            <div class="progress-bar {{ sp == 100 ? 'bg-success' : 'bg-primary' }}"
                                 style="width:{{ sp }}%"></div>
                        </div>
                    </div>
                {% endfor %}
            </div>
        </div>

        <div class="card mt-3">
            <div class="card-header">
                <h5 class="card-title mb-0">{{ translations.quick_actions ?? 'Szybkie akcje' }}</h5>
            </div>
            <div class="card-body d-grid gap-2">
                <a class="btn btn-outline-secondary" href="{{ root }}/employees/{{ employee.getId() }}/positions">
                    <i class="bi bi-diagram-3"></i> {{ translations.manage_employee_positions ?? 'Zarządzaj stanowiskami' }}
                </a>
                <a class="btn btn-outline-warning" href="{{ root }}/employees/{{ employee.getId() }}/edit">
                    <i class="bi bi-pencil-square"></i> {{ translations.edit ?? 'Edytuj' }}
                </a>
                <a class="btn btn-outline-primary" href="{{ root }}/employees/{{ employee.getId() }}">
                    <i class="bi bi-person"></i> {{ translations.employee_profile ?? 'Profil pracownika' }}
                </a>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
document.addEventListener('DOMContentLoaded', () => {
    const searchInp     = document.getElementById('comp_search');
    const sectionFilter = document.getElementById('section_filter');
    const statusPills   = document.querySelectorAll('.status-pill');
    const kpiCards      = document.querySelectorAll('.kpi-card[data-kpi]');
    const noResults     = document.getElementById('noResults');

    // Mapowanie kpi → status ('pct' traktujemy jak 'all')
    const KPI_TO_STATUS = { all: 'all', owned: 'owned', missing: 'missing', pct: 'all' };
    let activeStatus = 'all';

    // ── Synchronizacja pills ↔ KPI cards ─────────────────────────────────────
    function setStatus(status, sourceKpi) {
        activeStatus = status;

        // status-pills
        statusPills.forEach(p => {
            p.classList.toggle('active', p.dataset.status === status);
        });

        // kpi-cards: zdejmij wszystkie active-klasy, ustaw tylko tę która jest źródłem
        kpiCards.forEach(card => {
            ['kpi-active-all', 'kpi-active-owned', 'kpi-active-missing', 'kpi-active-pct']
                .forEach(cls => card.classList.remove(cls));
        });
        if (sourceKpi) {
            const activeCard = document.querySelector(`.kpi-card[data-kpi="${sourceKpi}"]`);
            if (activeCard) activeCard.classList.add(`kpi-active-${sourceKpi}`);
        } else {
            // wywołane przez pill – podświetl odpowiedni KPI
            const matchKpi = status === 'all' ? 'all' : status;
            const matchCard = document.querySelector(`.kpi-card[data-kpi="${matchKpi}"]`);
            if (matchCard) matchCard.classList.add(`kpi-active-${matchKpi}`);
        }

        applyFilters();
    }

    // ── Kliknięcie w status-pill ──────────────────────────────────────────────
    statusPills.forEach(pill => {
        pill.addEventListener('click', () => setStatus(pill.dataset.status, null));
    });

    // ── Kliknięcie w KPI card ─────────────────────────────────────────────────
    kpiCards.forEach(card => {
        card.addEventListener('click', () => {
            const kpi    = card.dataset.kpi;
            const status = KPI_TO_STATUS[kpi] ?? 'all';
            setStatus(status, kpi);
        });
        // dostępność klawiszem Enter/Spacja
        card.addEventListener('keydown', e => {
            if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); card.click(); }
        });
    });

    // ── Wyszukiwarka i sekcja ─────────────────────────────────────────────────
    if (searchInp)     searchInp.addEventListener('input', applyFilters);
    if (sectionFilter) sectionFilter.addEventListener('change', applyFilters);

    // ── Główna funkcja filtrowania ────────────────────────────────────────────
    function applyFilters() {
        const query = (searchInp?.value || '').trim().toLowerCase();
        const secId = sectionFilter?.value || '';
        let visible = 0;

        document.querySelectorAll('.competency-row').forEach(row => {
            const matchSearch  = !query || (row.dataset.search || '').includes(query);
            const matchSection = !secId  || String(row.dataset.section) === secId;
            const matchStatus  = activeStatus === 'all' || row.dataset.status === activeStatus;

            const show = matchSearch && matchSection && matchStatus;
            row.style.display = show ? '' : 'none';
            if (show) visible++;
        });

        // Ukryj sekcje bez widocznych wierszy
        document.querySelectorAll('.section-block').forEach(block => {
            const sid  = block.dataset.sectionId;
            const rows = block.querySelectorAll('.competency-row:not([style*="display: none"])');
            block.style.display = (!secId || sid === secId) && rows.length > 0 ? '' : 'none';
        });

        if (noResults) noResults.style.display = visible === 0 ? '' : 'none';
    }

    // Inicjalnie – karta "all" aktywna
    setStatus('all', 'all');
});
</script>
{% endblock %}