{# templates/me/profile.twig #}
{% extends "layouts/base.twig" %}

{% block title %}{{ translations.my_profile ?? 'my_profile' }}{% endblock %}

{% block head %}
    {{ parent() }}
    <style>
        .profile-hero{
            border-radius: 18px;
            background: linear-gradient(135deg, rgba(13,110,253,.09), rgba(25,135,84,.06));
            border: 1px solid rgba(0,0,0,.06);
        }
        .avatar-circle{
            width: 56px; height: 56px;
            border-radius: 999px;
            display:flex; align-items:center; justify-content:center;
            font-weight: 800;
            background: rgba(13,110,253,.12);
            color:#0d6efd;
        }
        .chip{
            border-radius: 999px;
            padding: .2rem .55rem;
            font-weight: 600;
            font-size: .78rem;
        }
        .soft-card{
            border: 1px solid rgba(0,0,0,.06);
            border-radius: 16px;
        }
        .kv dt{ color:#6c757d; font-weight:600; }
        .kv dd{ margin-bottom:.5rem; }
        .list-item{
            border: 1px solid rgba(0,0,0,.06);
            border-radius: 14px;
            padding: .9rem 1rem;
            background:#fff;
        }
        .list-item:hover{ box-shadow: 0 6px 18px rgba(0,0,0,.06); }
        .muted-mini{ color:#6c757d; font-size:.875rem; }
        .search-hint{ color:#6c757d; font-size:.85rem; }
        .collapse-toggle{
            border-radius: 10px;
        }
        .badge-soft{
            background: rgba(0,0,0,.045);
            color:#212529;
        }
    </style>
{% endblock %}

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

{% block content %}

    {# ---------------------------
       PREP / FALLBACKS
       --------------------------- #}
    {% set employee = me ?? data.me ?? null %}
    {% set shopModel = shop ?? data.shop ?? null %}

    {% set fullName = (employee.getDisplayName() ?? employee.display_name ?? null) ?: ((employee.getName() ?? employee.name ?? '') ~ ' ' ~ (employee.getSurname() ?? employee.surname ?? '')) %}
    {% set firstName = employee.getName() ?? employee.name ?? '' %}
    {% set surname = employee.getSurname() ?? employee.surname ?? '' %}
    {% set initials = ((firstName|slice(0,1)) ~ (surname|slice(0,1)))|upper %}

    {% set langCode = employee.getLangCode() ?? employee.lang_code ?? 'pl' %}
    {% set phone = employee.getPhone() ?? employee.phone ?? null %}
    {% set email = employee.getEmail() ?? employee.email ?? null %}
    {% set login = employee.getLogin() ?? employee.login ?? null %}
    {% set createdAt = employee.getCreateTimestamp() ?? employee.create_timestamp ?? null %}
    {% set productionAreaName = employee.getProductionAreaName() ?? employee.production_area_name ?? null %}

    {% set positions = employee.getPositions() ?? employee.positions ?? [] %}
    {% set competencies = employee.getCompetencies() ?? employee.competencies ?? [] %}

    <div class="row g-4">
        {# ===========================
           MAIN COLUMN
           =========================== #}
        <div class="col-12 col-xl-8">

            {# HERO / SUMMARY #}
            <div class="card soft-card profile-hero">
                <div class="card-body p-4">
                    <div class="d-flex justify-content-between align-items-start flex-wrap gap-3">
                        <div class="d-flex align-items-start gap-3">
                            <div class="avatar-circle">{{ initials ?: 'ME' }}</div>

                            <div>
                                <div class="d-flex align-items-center gap-2 flex-wrap">
                                    <h4 class="mb-0">{{ fullName ?: '-' }}</h4>

                                    <span class="badge chip badge-soft">
                                        <i class="bi bi-person-badge me-1"></i>
                                        {{ translations.employee_id ?? 'employee_id' }}: {{ employee.getId() ?? employee.id ?? '-' }}
                                    </span>

                                    <span class="badge chip bg-light text-dark">
                                        <i class="bi bi-translate me-1"></i>
                                        {{ (langCode|upper) }}
                                    </span>
                                </div>

                                <div class="muted-mini mt-1">
                                    {% if shopModel %}
                                        <i class="bi bi-shop me-1"></i>{{ shopModel.getName() ?? shopModel.name ?? '-' }}
                                    {% endif %}
                                    {% if productionAreaName %}
                                        <span class="mx-1">•</span>
                                        <i class="bi bi-diagram-3 me-1"></i>{{ productionAreaName }}
                                    {% endif %}
                                </div>

                                <div class="d-flex gap-2 flex-wrap mt-3">
                                    <span class="badge chip bg-primary">
                                        <i class="bi bi-briefcase me-1"></i>
                                        {{ translations.positions ?? 'positions' }}: {{ positions|length }}
                                    </span>
                                    <span class="badge chip bg-success">
                                        <i class="bi bi-mortarboard me-1"></i>
                                        {{ translations.competencies ?? 'competencies' }}: {{ competencies|length }}
                                    </span>
                                    {% if createdAt %}
                                        <span class="badge chip bg-light text-dark">
                                            <i class="bi bi-calendar3 me-1"></i>
                                            {{ translations.member_since ?? 'member_since' }}: {{ createdAt|date("Y-m-d") }}
                                        </span>
                                    {% endif %}
                                </div>
                            </div>
                        </div>

                        <div class="d-flex gap-2 flex-wrap">
                            <a class="btn btn-outline-secondary btn-sm"
                               href="{{ root }}/dashboard">
                                <i class="bi bi-arrow-left"></i> {{ translations.back_to_dashboard ?? 'back_to_dashboard' }}
                            </a>
                        </div>
                    </div>
                </div>
            </div>

            {# PROFILE DATA #}
            <div class="card soft-card mt-4">
                <div class="card-header d-flex justify-content-between align-items-start flex-wrap gap-2">
                    <div>
                        <h4 class="card-title mb-1">{{ translations.profile_overview ?? 'profile_overview' }}</h4>
                        <div class="text-muted small">{{ translations.profile_overview_hint ?? 'profile_overview_hint' }}</div>
                    </div>
                </div>

                <div class="card-body px-3 py-4-5">
                    <div class="row g-3">

                        <div class="col-12 col-lg-6">
                            <div class="soft-card p-3 h-100 bg-white">
                                <div class="text-muted small mb-2">{{ translations.basic_information ?? 'basic_information' }}</div>

                                <dl class="row mb-0 kv">
                                    <dt class="col-5">{{ translations.first_name ?? 'first_name' }}</dt>
                                    <dd class="col-7">{{ firstName ?: '-' }}</dd>

                                    <dt class="col-5">{{ translations.surname ?? 'surname' }}</dt>
                                    <dd class="col-7">{{ surname ?: '-' }}</dd>

                                    <dt class="col-5">{{ translations.display_name ?? 'display_name' }}</dt>
                                    <dd class="col-7">{{ employee.getDisplayName() ?? employee.display_name ?? '-' }}</dd>

                                    <dt class="col-5">{{ translations.login ?? 'login' }}</dt>
                                    <dd class="col-7">{{ login ?: '-' }}</dd>
                                </dl>
                            </div>
                        </div>

                        <div class="col-12 col-lg-6">
                            <div class="soft-card p-3 h-100 bg-white">
                                <div class="text-muted small mb-2">{{ translations.contact ?? 'contact' }}</div>

                                <dl class="row mb-0 kv">
                                    <dt class="col-5">{{ translations.phone ?? 'phone' }}</dt>
                                    <dd class="col-7">
                                        {% if phone %}
                                            <a href="tel:{{ phone|e }}">{{ phone }}</a>
                                        {% else %}
                                            -
                                        {% endif %}
                                    </dd>

                                    <dt class="col-5">{{ translations.email ?? 'email' }}</dt>
                                    <dd class="col-7">
                                        {% if email %}
                                            <a href="mailto:{{ email|e }}">{{ email }}</a>
                                        {% else %}
                                            -
                                        {% endif %}
                                    </dd>

                                    <dt class="col-5">{{ translations.shop ?? 'shop' }}</dt>
                                    <dd class="col-7">
                                        {{ shopModel ? (shopModel.getName() ?? shopModel.name ?? '-') : '-' }}
                                    </dd>

                                    <dt class="col-5">{{ translations.production_area ?? 'production_area' }}</dt>
                                    <dd class="col-7">{{ productionAreaName ?: '-' }}</dd>
                                </dl>
                            </div>
                        </div>

                    </div>
                </div>
            </div>

            {# SETTINGS (EDITABLE) #}
            <div class="card soft-card mt-4" id="settingsCard">
                <div class="card-header">
                    <h4 class="card-title mb-0">{{ translations.settings ?? 'settings' }}</h4>
                </div>

                <div class="card-body px-3 py-4-5">
                    <div class="row g-3 align-items-end">
                        <div class="col-12 col-md-6">
                            <label class="form-label" for="lang_code">
                                {{ translations.language ?? 'language' }}
                            </label>

                            <select class="form-select" id="lang_code">
                                {# dopasuj listę do tego co masz w systemie #}
                                <option value="pl" {% if langCode == 'pl' %}selected{% endif %}>Polski (PL)</option>
                                <option value="en" {% if langCode == 'en' %}selected{% endif %}>English (EN)</option>
                                <option value="fr" {% if langCode == 'fr' %}selected{% endif %}>Français (FR)</option>
                                <option value="nl" {% if langCode == 'nl' %}selected{% endif %}>Nederlands (NL)</option>
                                <option value="it" {% if langCode == 'it' %}selected{% endif %}>Italiano (IT)</option>
                            </select>

                            <div class="search-hint mt-1">
                                {{ translations.language_hint ?? 'language_hint' }}
                            </div>
                        </div>

                        <div class="col-12 col-md-6 d-flex justify-content-md-end gap-2 flex-wrap">
                            <button class="btn btn-success" type="button" id="saveSettingsBtn">
                                <i class="bi bi-check2"></i> {{ translations.save_changes ?? 'save_changes' }}
                            </button>
                        </div>
                    </div>

                    <hr class="my-4">

                    <div class="d-flex justify-content-between align-items-center flex-wrap gap-2">
                        <div>
                            <div class="fw-semibold">{{ translations.security ?? 'security' }}</div>
                            <div class="text-muted small">{{ translations.security_hint ?? 'security_hint' }}</div>
                        </div>

                        <div class="d-flex gap-2 flex-wrap">
                            <a href="{{ root }}/me/password"
                               class="btn btn-outline-primary btn-sm">
                                <i class="bi bi-key"></i> {{ translations.change_password ?? 'change_password' }}
                            </a>
                        </div>
                    </div>
                </div>
            </div>

            {# POSITIONS #}
            <div class="card soft-card mt-4">
                <div class="card-header d-flex justify-content-between align-items-start flex-wrap gap-2">
                    <div>
                        <h4 class="card-title mb-1">{{ translations.my_positions ?? 'my_positions' }}</h4>
                        <div class="text-muted small">{{ translations.my_positions_hint ?? 'my_positions_hint' }}</div>
                    </div>
                </div>

                <div class="card-body px-3 py-4-5">
                    {% if positions|length == 0 %}
                        <div class="border rounded p-3 text-muted bg-white">
                            <i class="bi bi-info-circle"></i>
                            {{ translations.no_positions_assigned ?? 'no_positions_assigned' }}
                        </div>
                    {% else %}
                        <div class="d-grid gap-2">
                            {% for pos in positions %}
                                {% set posName = pos.getName() ?? pos.name ?? '-' %}
                                {% set lvlName = pos.getLevelName() ?? pos.level_name ?? '-' %}
                                {% set posDesc = pos.getDescription() ?? pos.description ?? null %}

                                <div class="list-item">
                                    <div class="d-flex justify-content-between align-items-start gap-3 flex-wrap">
                                        <div class="d-flex align-items-start gap-3">
                                            <div class="rounded-3 d-flex align-items-center justify-content-center"
                                                 style="width:38px;height:38px;background:rgba(13,110,253,.08);color:#0d6efd;">
                                                <i class="bi bi-briefcase"></i>
                                            </div>

                                            <div>
                                                <div class="fw-semibold">{{ posName }}</div>
                                                <div class="muted-mini">
                                                    {{ translations.level ?? 'level' }}:
                                                    <span class="fw-semibold">{{ lvlName }}</span>
                                                </div>
                                                {% if posDesc %}
                                                    <div class="muted-mini mt-1">{{ posDesc }}</div>
                                                {% endif %}
                                            </div>
                                        </div>

                                        <div class="d-flex gap-2 flex-wrap">
                                            <span class="badge bg-light text-dark chip">
                                                <i class="bi bi-tag me-1"></i>ID: {{ pos.getId() ?? pos.id ?? '-' }}
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            {% endfor %}
                        </div>
                    {% endif %}
                </div>
            </div>

            {# COMPETENCIES #}
            <div class="card soft-card mt-4" id="competenciesCard">
                <div class="card-header d-flex justify-content-between align-items-start flex-wrap gap-2">
                    <div>
                        <h4 class="card-title mb-1">{{ translations.my_competencies ?? 'my_competencies' }}</h4>
                        <div class="text-muted small">{{ translations.my_competencies_hint ?? 'my_competencies_hint' }}</div>
                    </div>

                    <div class="d-flex gap-2 flex-wrap">
                        <span class="badge bg-light text-dark chip">
                            <i class="bi bi-collection me-1"></i>
                            {{ translations.total ?? 'total' }}: <span id="compCount">{{ competencies|length }}</span>
                        </span>
                    </div>
                </div>

                <div class="card-body px-3 py-4-5">
                    <div class="row g-3 align-items-end mb-3">
                        <div class="col-12 col-lg-6">
                            <label class="form-label" for="comp_search">
                                {{ translations.search_competencies ?? 'search_competencies' }}
                            </label>
                            <input type="text"
                                   class="form-control"
                                   id="comp_search"
                                   placeholder="{{ translations.search_competencies_placeholder ?? 'search_competencies_placeholder' }}">
                            <div class="search-hint mt-1">{{ translations.search_competencies_hint ?? 'search_competencies_hint' }}</div>
                        </div>
                        <div class="col-12 col-lg-6 text-lg-end">
                            <button class="btn btn-outline-secondary btn-sm" type="button" id="compClearBtn">
                                <i class="bi bi-x-lg"></i> {{ translations.clear ?? 'clear' }}
                            </button>
                        </div>
                    </div>

                    {% if competencies|length == 0 %}
                        <div class="border rounded p-3 text-muted bg-white">
                            <i class="bi bi-info-circle"></i>
                            {{ translations.no_competencies ?? 'no_competencies' }}
                        </div>
                    {% else %}
                        <div class="d-grid gap-2" id="competenciesList">
                            {% for c in competencies %}
                                {% set cId = c.getId() ?? c.id ?? '-' %}
                                {% set cName = c.getName() ?? c.name ?? '-' %}
                                {% set cDesc = c.getDescription() ?? c.description ?? null %}
                                {% set cat = c.getCategoryName() ?? c.category_name ?? null %}
                                {% set sub = c.getSubcategoryName() ?? c.subcategory_name ?? null %}
                                {% set ver = c.getVerificationMethod() ?? c.verification_method ?? null %}
                                {% set created = c.getCreatedAt() ?? c.created_at ?? null %}

                                {% set searchText = (cName ~ ' ' ~ (cat ?? '') ~ ' ' ~ (sub ?? '') ~ ' ' ~ (cDesc ?? ''))|lower %}

                                <div class="list-item competency-item" data-search="{{ searchText|e('html_attr') }}">
                                    <div class="d-flex justify-content-between align-items-start gap-3 flex-wrap">
                                        <div class="d-flex align-items-start gap-3">
                                            <div class="rounded-3 d-flex align-items-center justify-content-center"
                                                 style="width:38px;height:38px;background:rgba(25,135,84,.10);color:#198754;">
                                                <i class="bi bi-mortarboard"></i>
                                            </div>

                                            <div>
                                                <div class="fw-semibold">{{ cName }}</div>

                                                <div class="d-flex gap-2 flex-wrap mt-1">
                                                    {% if cat %}
                                                        <span class="badge bg-light text-dark chip">
                                                            <i class="bi bi-folder2-open me-1"></i>{{ cat }}
                                                        </span>
                                                    {% endif %}
                                                    {% if sub %}
                                                        <span class="badge bg-light text-dark chip">
                                                            <i class="bi bi-folder me-1"></i>{{ sub }}
                                                        </span>
                                                    {% endif %}
                                                    <span class="badge bg-light text-dark chip">
                                                        <i class="bi bi-tag me-1"></i>ID: {{ cId }}
                                                    </span>

                                                    {% if ver %}
                                                        <span class="badge bg-primary chip">
                                                            <i class="bi bi-check2-circle me-1"></i>
                                                            {{ translations.verification_method ?? 'verification_method' }}:
                                                            {% if ver == 'self' %}
                                                                {{ translations.verification_self ?? 'verification_self' }}
                                                            {% else %}
                                                                {{ ver }}
                                                            {% endif %}
                                                        </span>
                                                    {% endif %}
                                                </div>

                                                {% if created %}
                                                    <div class="muted-mini mt-2">
                                                        <i class="bi bi-clock-history me-1"></i>
                                                        {{ translations.created_at ?? 'created_at' }}: {{ created|date("Y-m-d") }}
                                                    </div>
                                                {% endif %}
                                            </div>
                                        </div>

                                        <div class="d-flex gap-2 flex-wrap">
                                            {% if cDesc %}
                                                <button class="btn btn-outline-secondary btn-sm collapse-toggle"
                                                        type="button"
                                                        data-bs-toggle="collapse"
                                                        data-bs-target="#compDesc_{{ cId }}"
                                                        aria-expanded="false"
                                                        aria-controls="compDesc_{{ cId }}">
                                                    <i class="bi bi-eye"></i> {{ translations.details ?? 'details' }}
                                                </button>
                                            {% endif %}
                                        </div>
                                    </div>

                                    {% if cDesc %}
                                        <div class="collapse mt-3" id="compDesc_{{ cId }}">
                                            <div class="border rounded p-3 bg-white">
                                                <div class="text-muted small mb-1">{{ translations.description ?? 'description' }}</div>
                                                <div>{{ cDesc }}</div>
                                            </div>
                                        </div>
                                    {% endif %}
                                </div>
                            {% endfor %}
                        </div>

                        <div class="text-muted small mt-3">
                            <i class="bi bi-info-circle me-1"></i>
                            {{ translations.competencies_disclaimer ?? 'competencies_disclaimer' }}
                        </div>
                    {% endif %}
                </div>
            </div>

        </div>

        {# ===========================
           SIDEBAR
           =========================== #}
        <div class="col-12 col-xl-4">

            <div class="card soft-card">
                <div class="card-header">
                    <h4 class="card-title mb-0">{{ translations.quick_actions ?? 'quick_actions' }}</h4>
                </div>

                <div class="card-body d-grid gap-2">
                    <a class="btn btn-outline-success" href="#competenciesCard">
                        <i class="bi bi-mortarboard"></i> {{ translations.go_to_competencies ?? 'go_to_competencies' }}
                    </a>

                    <a class="btn btn-outline-primary" href="#settingsCard">
                        <i class="bi bi-gear"></i> {{ translations.go_to_settings ?? 'go_to_settings' }}
                    </a>

                    <a class="btn btn-outline-secondary" href="#top">
                        <i class="bi bi-arrow-up"></i> {{ translations.back_to_top ?? 'back_to_top' }}
                    </a>
                </div>
            </div>

            <div class="card soft-card mt-4">
                <div class="card-header">
                    <h4 class="card-title mb-0">{{ translations.shop_information ?? 'shop_information' }}</h4>
                </div>

                <div class="card-body">
                    {% if not shopModel %}
                        <div class="text-muted">{{ translations.no_shop_data ?? 'no_shop_data' }}</div>
                    {% else %}
                        <dl class="row mb-0 kv">
                            <dt class="col-5">{{ translations.shop ?? 'shop' }}</dt>
                            <dd class="col-7">{{ shopModel.getName() ?? shopModel.name ?? '-' }}</dd>

                            <dt class="col-5">{{ translations.address ?? 'address' }}</dt>
                            <dd class="col-7">
                                {{ (shopModel.getStreet() ?? shopModel.street ?? '') }}
                                {{ (shopModel.getStreetNum() ?? shopModel.street_num ?? '') }}<br>
                                {{ (shopModel.getZip() ?? shopModel.zip ?? '') }}
                                {{ (shopModel.getCity() ?? shopModel.city ?? '') }}
                            </dd>

                            <dt class="col-5">{{ translations.shop_email ?? 'shop_email' }}</dt>
                            <dd class="col-7">
                                {% set shopEmail = shopModel.getEmail() ?? shopModel.email ?? null %}
                                {% if shopEmail %}
                                    <a href="mailto:{{ shopEmail|e }}">{{ shopEmail }}</a>
                                {% else %}
                                    -
                                {% endif %}
                            </dd>

                            <dt class="col-5">{{ translations.tax_number ?? 'tax_number' }}</dt>
                            <dd class="col-7">
                                {{ (shopModel.getTaxNumberPrefixe() ?? shopModel.tax_number_prefixe ?? '') ~ ' ' ~ (shopModel.getTaxNumber() ?? shopModel.tax_number ?? '-') }}
                            </dd>
                        </dl>
                    {% endif %}
                </div>
            </div>

        </div>
    </div>

{% endblock %}

{% block scripts %}
    <script>
        document.addEventListener('DOMContentLoaded', () => {

            // -------------------------
            // Competencies search
            // -------------------------
            const searchInp = document.getElementById('comp_search');
            const clearBtn = document.getElementById('compClearBtn');
            const list = document.getElementById('competenciesList');
            const countEl = document.getElementById('compCount');

            function refreshCompCount(){
                if (!list || !countEl) return;
                const visible = list.querySelectorAll('.competency-item:not([style*="display: none"])').length;
                countEl.textContent = String(visible);
            }

            function applyCompSearch(){
                if (!list) return;
                const q = (searchInp?.value || '').trim().toLowerCase();

                list.querySelectorAll('.competency-item').forEach(item => {
                    const text = (item.getAttribute('data-search') || '').toLowerCase();
                    item.style.display = (!q || text.includes(q)) ? '' : 'none';
                });

                refreshCompCount();
            }

            if (searchInp) searchInp.addEventListener('input', applyCompSearch);
            if (clearBtn) clearBtn.addEventListener('click', () => {
                if (searchInp) searchInp.value = '';
                applyCompSearch();
            });

            applyCompSearch();

            // -------------------------
            // Save settings (language)
            // -------------------------
            const saveBtn = document.getElementById('saveSettingsBtn');
            const langSel = document.getElementById('lang_code');

            async function saveSettings(){
                const payload = {
                    lang_code: (langSel?.value || 'pl')
                };

                try {
                    // Dostosuj endpoint do swojego backendu (wzorzec jak w innych widokach).
                    const resp = await api(`/ajax/me/settings`, { method: "PUT", data: payload });

                    if (resp?.success || resp?.ok) {
                        Swal.fire({
                            icon: 'success',
                            title: '{{ translations.success ?? 'success' }}',
                            text: '{{ translations.settings_saved ?? 'settings_saved' }}',
                            timer: 1200,
                            showConfirmButton: false
                        });
                        setTimeout(() => location.reload(), 700);
                    } else {
                        Swal.fire({
                            icon: 'error',
                            title: '{{ translations.error ?? 'error' }}',
                            text: resp?.message || '{{ translations.undefined_error_occurred ?? 'undefined_error_occurred' }}'
                        });
                    }
                } catch (e) {
                    console.error(e);
                    Swal.fire({
                        icon: 'error',
                        title: '{{ translations.error ?? 'error' }}',
                        text: '{{ translations.no_api_connection ?? 'no_api_connection' }}'
                    });
                }
            }

            if (saveBtn) saveBtn.addEventListener('click', saveSettings);
        });
    </script>
{% endblock %}