{% extends 'layouts/base.twig' %}
{% block title %}{{ translations.cases_requests_title }}{% endblock %}
{% block head %}
    {{ parent() }}
    <style>
        /* ── Sekcja "Recap" ── */
        .recap-section {
            background: #fff;
            border-radius: 14px;
            padding: 22px 28px 24px;
            margin-bottom: 20px;
            box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 4px 16px rgba(0,0,0,.04);
        }
        .recap-title {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 1rem;
            font-weight: 600;
            color: #111827;
            margin-bottom: 18px;
        }
        .recap-title i { color: #1d4ed8; font-size: 1.1rem; }
        /* ── Statystyki ── */
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
            gap: 14px;
            margin-bottom: 16px;
        }
        .stat-card {
            background: #f9fafb;
            border: 1px solid #e5e7eb;
            border-radius: 12px;
            padding: 18px;
            text-align: center;
            cursor: pointer;
            transition: all .12s;
            position: relative;
        }
        .stat-card:hover { background: #f3f4f6; transform: translateY(-1px); }
        .stat-card.active { border-color: #1d4ed8; box-shadow: 0 0 0 3px rgba(29,78,216,.10); }
        .stat-number {
            font-size: 1.8rem;
            font-weight: 700;
            color: #6b7280;
            line-height: 1;
            margin-bottom: 4px;
        }
        .stat-label {
            font-size: .76rem;
            color: #6b7280;
            font-weight: 500;
        }
        .stat-card.stat-blue   .stat-number { color: #1d4ed8; }
        .stat-card.stat-yellow .stat-number { color: #d97706; }
        .stat-card.stat-green  .stat-number { color: #16a34a; }
        .stat-card.stat-gray   .stat-number { color: #4b5563; }
        .stat-card.stat-red    .stat-number { color: #dc2626; }
        /* ── Pasek filtrów / wyszukiwarka ── */
        .filters-bar {
            display: flex;
            align-items: center;
            gap: 12px;
            flex-wrap: wrap;
            padding: 12px 14px;
            background: #f9fafb;
            border: 1px solid #e5e7eb;
            border-radius: 10px;
            margin-bottom: 16px;
        }
        .filter-pill {
            padding: 5px 14px;
            border-radius: 999px;
            background: #fff;
            border: 1px solid #e5e7eb;
            font-size: .8rem;
            color: #374151;
            cursor: pointer;
            transition: all .12s;
        }
        .filter-pill:hover { background: #f3f4f6; }
        .filter-pill.active {
            background: #1d4ed8;
            color: #fff;
            border-color: #1d4ed8;
        }
        .search-input {
            margin-left: auto;
            padding: 7px 12px;
            border: 1px solid #e5e7eb;
            border-radius: 8px;
            font-size: .82rem;
            background: #fff;
            min-width: 220px;
        }
        .search-input:focus { outline: none; border-color: #1d4ed8; box-shadow: 0 0 0 3px rgba(29,78,216,.10); }
        /* ── Tabela ── */
        .recap-table-wrap { overflow-x: auto; border: 1px solid #e5e7eb; border-radius: 10px; }
        .recap-table { width: 100%; border-collapse: collapse; font-size: .82rem; }
        .recap-table thead { background: #f9fafb; }
        .recap-table th {
            padding: 12px 14px;
            text-align: left;
            font-weight: 600;
            color: #6b7280;
            font-size: .72rem;
            text-transform: uppercase;
            letter-spacing: .04em;
            white-space: nowrap;
            border-bottom: 1px solid #e5e7eb;
        }
        .recap-table td {
            padding: 12px 14px;
            color: #374151;
            border-bottom: 1px solid #f3f4f6;
            vertical-align: middle;
        }
        .recap-table tbody tr { transition: background .1s; }
        .recap-table tbody tr:hover { background: #fafbfc; cursor: pointer; }
        .cell-ref { font-family: 'SF Mono', Monaco, Consolas, monospace; font-size: .72rem; color: #6b7280; white-space: nowrap; }
        .cell-date { color: #2563eb; font-weight: 500; white-space: nowrap; font-size: .78rem; }
        .cell-subject { color: #111827; font-weight: 500; max-width: 320px; }
        .cell-empty   { color: #9ca3af; font-style: italic; font-size: .78rem; }
        .area-badge, .status-badge {
            display: inline-flex; align-items: center; gap: 4px;
            padding: 3px 10px; border-radius: 999px;
            font-size: .7rem; font-weight: 600;
        }
        .area-badge { background: #eef2ff; color: #3730a3; border: 1px solid #c7d2fe; }
        .status-badge.s-blue   { background: #dbeafe; color: #1e40af; }
        .status-badge.s-yellow { background: #fef3c7; color: #92400e; }
        .status-badge.s-green  { background: #d1fae5; color: #065f46; }
        .status-badge.s-gray   { background: #f3f4f6; color: #374151; }
        .status-badge.s-red    { background: #fee2e2; color: #991b1b; }
        .table-empty {
            padding: 60px 20px;
            text-align: center;
            color: #9ca3af;
        }
        .table-empty i { font-size: 2.5rem; color: #d1d5db; }
        .btn-icon {
            border: 1px solid #e5e7eb;
            background: #fff;
            border-radius: 8px;
            padding: 6px 10px;
            cursor: pointer;
            font-size: .85rem;
            color: #374151;
            transition: all .12s;
        }
        .btn-icon:hover { background: #1d4ed8; color: #fff; border-color: #1d4ed8; }
        /* ── Modal ── */
        .case-modal-body { padding: 0; }
        .case-modal-header-bar {
            background: linear-gradient(135deg, #f8fafc 0%, #eff6ff 100%);
            padding: 22px 28px 18px;
            border-bottom: 1px solid #e5e7eb;
        }
        .case-modal-ref {
            font-family: 'SF Mono', Monaco, Consolas, monospace;
            font-size: .75rem;
            color: #6b7280;
            margin-bottom: 6px;
        }
        .case-modal-title { font-size: 1.15rem; font-weight: 700; color: #111827; margin-bottom: 8px; }
        .case-modal-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
        .modal-section { padding: 18px 28px; border-bottom: 1px solid #f3f4f6; }
        .modal-section:last-child { border-bottom: none; }
        .modal-section-label {
            font-size: .7rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: .07em;
            color: #6b7280;
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            gap: 6px;
        }
        .modal-section-label i { color: #9ca3af; }
        .info-row { display: flex; gap: 14px; margin-bottom: 8px; font-size: .85rem; }
        .info-row .lbl { color: #6b7280; min-width: 130px; }
        .info-row .val { color: #111827; flex: 1; word-break: break-word; }
        .info-row .val.muted { color: #9ca3af; font-style: italic; }
        .description-block {
            background: #f9fafb;
            border: 1px solid #e5e7eb;
            border-radius: 8px;
            padding: 12px 14px;
            font-size: .85rem;
            color: #374151;
            white-space: pre-wrap;
            line-height: 1.5;
        }
        .meeting-card {
            display: flex; align-items: center; gap: 14px;
            padding: 14px 16px;
            border: 1px solid #c7d2fe;
            border-radius: 10px;
            background: #eef2ff;
        }
        .meeting-tile-date {
            min-width: 56px;
            border-radius: 8px;
            background: #1d4ed8;
            color: #fff;
            text-align: center;
            padding: 6px 4px;
            flex-shrink: 0;
        }
        .meeting-tile-date .day { font-size: 1.3rem; font-weight: 800; line-height: 1; }
        .meeting-tile-date .mon { font-size: .58rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; display: block; margin-top: 2px; }
        .meeting-info-text { flex: 1; min-width: 0; }
        .meeting-info-title { font-size: .92rem; font-weight: 600; color: #312e81; margin-bottom: 2px; }
        .meeting-info-meta  { font-size: .76rem; color: #6366f1; }
        .attachments-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
            gap: 10px;
        }
        .attachment-tile {
            border: 1px solid #e5e7eb;
            border-radius: 10px;
            background: #fff;
            overflow: hidden;
            cursor: pointer;
            transition: border-color .12s, box-shadow .12s;
            display: flex;
            flex-direction: column;
        }
        .attachment-tile:hover { border-color: #1d4ed8; box-shadow: 0 0 0 3px rgba(29,78,216,.08); }
        .attachment-thumb {
            background: #f9fafb;
            height: 100px;
            display: flex; align-items: center; justify-content: center;
            color: #9ca3af; font-size: 1.7rem;
            overflow: hidden;
        }
        .attachment-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
        .attachment-name {
            padding: 6px 8px;
            font-size: .73rem;
            color: #374151;
            text-align: center;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            border-top: 1px solid #f3f4f6;
        }
        /* lightbox dla obrazów */
        .img-lightbox-backdrop {
            position: fixed; inset: 0;
            background: rgba(0,0,0,.85);
            z-index: 2000;
            display: none;
            align-items: center;
            justify-content: center;
            padding: 30px;
        }
        .img-lightbox-backdrop.open { display: flex; }
        .img-lightbox-backdrop img { max-width: 100%; max-height: 100%; border-radius: 6px; }
        .img-lightbox-close {
            position: absolute; top: 20px; right: 24px;
            background: rgba(255,255,255,.15); color: #fff;
            border: none; border-radius: 50%;
            width: 40px; height: 40px; font-size: 1.4rem;
            cursor: pointer;
        }
        .img-lightbox-close:hover { background: rgba(255,255,255,.3); }
        .admin-reply-block {
            background: #f0fdf4;
            border-left: 3px solid #22c55e;
            padding: 10px 14px;
            border-radius: 6px;
            white-space: pre-wrap;
            word-break: break-word;
            font-size: .85rem;
            line-height: 1.5;
        }
        .admin-reply-meta { font-size: .76rem; color: #6b7280; margin-top: 4px; }
    </style>
{% endblock %}
{% block page_heading %}
<div class="page-heading">
    <div class="d-flex align-items-center gap-2 flex-wrap justify-content-between">
        <div>
            <h3>{{ translations.cases_requests_title }}</h3>
            <p class="text-subtitle text-muted">
                {{ translations.cases_requests_subtitle }}
            </p>
        </div>
        <div class="d-flex gap-2">
            <a href="{{ root }}/cases/new" class="btn btn-sm btn-primary">
                <i class="bi bi-plus-lg me-1"></i>
                {{ translations.cases_new_title }}
            </a>
            <a href="{{ root }}/cases/team" class="btn btn-sm btn-outline-secondary">
                <i class="bi bi-people me-1"></i>
                {{ translations.cases_team_title }}
            </a>
        </div>
    </div>
</div>
{% endblock %}
{% block content %}
{# ── konfiguracja przekazywana do JS ── #}
<script>
window.CASES_REQUESTS_CFG = {
    root:           '{{ root }}',
    initialStats:   {{ stats|json_encode|raw }},
    statusOptions:  {{ statusOptions|json_encode|raw }},
    topics:         {{ topics|json_encode|raw }},
    locale:         'pl-PL',
    i18n: {
        err_loading:         {{ translations.cases_err_loading|json_encode|raw }},
        err_connection:      {{ translations.cases_err_connection|json_encode|raw }},
        err_generic:         {{ translations.cases_err_generic|json_encode|raw }},
        loading:             {{ translations.loading|json_encode|raw }},
        empty_filtered:      {{ translations.cases_empty_filtered|json_encode|raw }},
        empty_cta:           {{ translations.cases_empty_cta|json_encode|raw }},
        unassigned:          {{ translations.cases_unassigned|json_encode|raw }},
        view_details:        {{ translations.cases_view_details|json_encode|raw }},
        section_requester:   {{ translations.cases_section_requester|json_encode|raw }},
        field_full_name:     {{ translations.cases_field_full_name|json_encode|raw }},
        field_email:         {{ translations.cases_field_email|json_encode|raw }},
        field_shop:          {{ translations.cases_field_shop|json_encode|raw }},
        section_description: {{ translations.cases_section_description|json_encode|raw }},
        section_context:     {{ translations.cases_section_context|json_encode|raw }},
        section_routing:     {{ translations.cases_section_routing|json_encode|raw }},
        field_area:          {{ translations.cases_field_area|json_encode|raw }},
        field_consultant:    {{ translations.cases_field_consultant|json_encode|raw }},
        consultant_pending:  {{ translations.cases_consultant_pending|json_encode|raw }},
        section_meeting:     {{ translations.cases_section_meeting|json_encode|raw }},
        meeting_default_title: {{ translations.cases_meeting_default_title|json_encode|raw }},
        meeting_details_btn: {{ translations.cases_meeting_details_btn|json_encode|raw }},
        section_attachments: {{ translations.cases_section_attachments|json_encode|raw }},
        section_system_info: {{ translations.cases_section_system_info|json_encode|raw }},
        field_ref:           {{ translations.cases_field_ref|json_encode|raw }},
        field_status:        {{ translations.cases_field_status|json_encode|raw }},
        field_created_at:    {{ translations.cases_field_created_at|json_encode|raw }},
        field_updated_at:    {{ translations.cases_field_updated_at|json_encode|raw }},
        section_admin_reply: {{ translations.cases_section_admin_reply|default('Odpowiedź administratora')|json_encode|raw }},
        admin_reply_saved_at: {{ translations.cases_admin_reply_saved_at|default('Odpowiedź dodana')|json_encode|raw }},
        has_reply_tooltip:   {{ translations.cases_has_reply_tooltip|default('Administrator dodał odpowiedź')|json_encode|raw }}
    }
};
</script>
<div class="recap-section">
    <div class="recap-title">
        <i class="bi bi-clipboard2-data"></i>
        {{ translations.cases_requests_summary }}
    </div>
    {# ── Statystyki / filtry statusu ── #}
    <div class="stats-grid" id="statsGrid">
        <div class="stat-card active" data-status="">
            <div class="stat-number" id="statTotal">{{ stats.total|default(0) }}</div>
            <div class="stat-label">{{ translations.total }}</div>
        </div>
        {% for code, opt in statusOptions %}
            <div class="stat-card stat-{{ opt.color }}" data-status="{{ code }}">
                <div class="stat-number" data-stat="{{ code }}">{{ stats.by_status[code]|default(0) }}</div>
                <div class="stat-label">{{ opt.label }}</div>
            </div>
        {% endfor %}
    </div>
    {# ── Filtry: temat + wyszukiwarka ── #}
    <div class="filters-bar">
        <span class="filter-label text-muted" style="font-size:.78rem">
            <i class="bi bi-funnel me-1"></i>{{ translations.topic }}:
        </span>
        <button class="filter-pill active" data-area="">
            {{ translations.all }}
        </button>
        {% for topic in topics %}
            <button class="filter-pill" data-area="{{ topic.key }}">{{ topic.label }}</button>
        {% endfor %}
        <input type="text" id="searchInput" class="search-input"
               placeholder="{{ translations.cases_search_placeholder }}" />
    </div>
    {# ── Tabela ── #}
    <div class="recap-table-wrap">
        <table class="recap-table">
            <thead>
                <tr>
                    <th>{{ translations.ref }}</th>
                    <th>{{ translations.date }}</th>
                    <th>{{ translations.requester }}</th>
                    <th>{{ translations.subject }}</th>
                    <th>{{ translations.area }}</th>
                    <th>{{ translations.consultant }}</th>
                    <th>{{ translations.status }}</th>
                    <th class="text-end">{{ translations.actions }}</th>
                </tr>
            </thead>
            <tbody id="casesTableBody">
                <tr><td colspan="8" class="table-empty">
                    <div class="spinner-border spinner-border-sm text-primary"></div>
                    <div class="mt-2">{{ translations.loading }}</div>
                </td></tr>
            </tbody>
        </table>
    </div>
</div>
{# ─── Modal szczegółów ─────────────────────────────────────────── #}
<div class="modal fade" id="caseDetailsModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-lg">
        <div class="modal-content">
            <div class="modal-header py-2 px-3">
                <h6 class="modal-title">
                    <i class="bi bi-file-earmark-text me-1"></i>
                    {{ translations.cases_details_title }}
                </h6>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body case-modal-body" id="caseModalContent">
                <div class="p-4 text-center text-muted">
                    <div class="spinner-border spinner-border-sm me-2"></div>
                    {{ translations.loading }}
                </div>
            </div>
        </div>
    </div>
</div>
{# ─── Lightbox dla obrazów ─────────────────────────────────────── #}
<div class="img-lightbox-backdrop" id="imgLightbox">
    <button class="img-lightbox-close" type="button" onclick="closeLightbox()">×</button>
    <img id="imgLightboxImg" src="" alt="" />
</div>
<script>
(function () {
    'use strict';
    const CFG = window.CASES_REQUESTS_CFG || {};
    const root = CFG.root || '';
    const T = CFG.i18n || {};
    /* ─── Stan filtrów ─── */
    const state = {
        status:   '',
        area_key: '',
        q:        ''
    };
    /* ─── Helpers ─── */
    function escHtml(s) {
        return String(s == null ? '' : s)
            .replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
    }
    function fmtDate(iso) {
        if (!iso) return '—';
        const d = new Date(iso.replace(' ', 'T'));
        if (isNaN(d.getTime())) return iso;
        return d.toLocaleDateString(CFG.locale, { day: '2-digit', month: 'short', year: 'numeric' })
             + ' ' + d.toLocaleTimeString(CFG.locale, { hour: '2-digit', minute: '2-digit' });
    }
    function fmtDateOnly(iso) {
        if (!iso) return '—';
        const d = new Date(iso);
        if (isNaN(d.getTime())) return iso;
        return d.toLocaleDateString(CFG.locale, { day: '2-digit', month: 'long', year: 'numeric' });
    }
    function fmtDayMon(iso) {
        if (!iso) return { day: '', mon: '' };
        const d = new Date(iso);
        if (isNaN(d.getTime())) return { day: '', mon: '' };
        const months = ['STY','LUT','MAR','KWI','MAJ','CZE','LIP','SIE','WRZ','PAŹ','LIS','GRU'];
        return { day: String(d.getDate()).padStart(2,'0'), mon: months[d.getMonth()] };
    }
    function statusBadge(code) {
        const opt = CFG.statusOptions[code];
        if (!opt) return '<span class="status-badge s-gray">' + escHtml(code) + '</span>';
        return '<span class="status-badge s-' + opt.color + '">' + escHtml(opt.label) + '</span>';
    }
    function areaBadge(key) {
        if (!key) return '<span class="cell-empty">—</span>';
        const t = (CFG.topics || []).find(x => x.key === key);
        const label = t ? t.label : key;
        return '<span class="area-badge"><i class="bi bi-tag-fill" style="font-size:.65rem"></i>' + escHtml(label) + '</span>';
    }
    /* ─── Załaduj listę ─── */
    function loadList() {
        const params = new URLSearchParams();
        if (state.status)   params.set('status',   state.status);
        if (state.area_key) params.set('area_key', state.area_key);
        if (state.q)        params.set('q',        state.q);
        const qs = params.toString();
        const url = root + '/ajax/cases' + (qs ? ('?' + qs) : '');
        fetch(url, { credentials: 'same-origin' })
            .then(r => r.json())
            .then(json => {
                if (!json.ok) {
                    renderEmpty(json.message || T.err_loading);
                    return;
                }
                renderTable(json.data || []);
                if (json.stats) renderStats(json.stats);
            })
            .catch(() => renderEmpty(T.err_connection));
    }
    function renderStats(stats) {
        document.getElementById('statTotal').textContent = stats.total || 0;
        const map = stats.by_status || {};
        document.querySelectorAll('[data-stat]').forEach(el => {
            const code = el.dataset.stat;
            el.textContent = map[code] || 0;
        });
    }
    function renderEmpty(msg) {
        document.getElementById('casesTableBody').innerHTML =
            '<tr><td colspan="8" class="table-empty"><i class="bi bi-inbox"></i><div class="mt-2">' + escHtml(msg) + '</div></td></tr>';
    }
    function renderTable(items) {
        const tbody = document.getElementById('casesTableBody');
        if (!items || items.length === 0) {
            tbody.innerHTML =
                '<tr><td colspan="8" class="table-empty">' +
                '<i class="bi bi-inbox"></i>' +
                '<div class="mt-2">' + escHtml(T.empty_filtered) + '</div>' +
                '<a href="' + root + '/cases/new" class="btn btn-sm btn-primary mt-3">' +
                '<i class="bi bi-plus-lg me-1"></i>' + escHtml(T.empty_cta) + '</a>' +
                '</td></tr>';
            return;
        }
        const rows = items.map(item => {
            const consultant = item.consultant_name
                ? escHtml(item.consultant_name)
                : '<span class="cell-empty">' + escHtml(T.unassigned) + '</span>';
            return ''
                + '<tr data-id="' + item.id + '">'
                +   '<td class="cell-ref">' + escHtml(item.ref) + (item.admin_reply ? ' <span style="color:#22c55e;font-size:.78rem" title="' + escHtml(T.has_reply_tooltip) + '"><i class="bi bi-reply-fill"></i></span>' : '') + '</td>'
                +   '<td class="cell-date">' + fmtDate(item.created_at) + '</td>'
                +   '<td>' + escHtml(item.requester_name || '—') + '</td>'
                +   '<td class="cell-subject">' + escHtml(item.title) + '</td>'
                +   '<td>' + areaBadge(item.area_key) + '</td>'
                +   '<td>' + consultant + '</td>'
                +   '<td>' + statusBadge(item.status) + '</td>'
                +   '<td class="text-end">'
                +     '<button class="btn-icon" data-action="details" data-id="' + item.id + '" title="' + escHtml(T.view_details) + '">'
                +       '<i class="bi bi-eye"></i>'
                +     '</button>'
                +   '</td>'
                + '</tr>';
        }).join('');
        tbody.innerHTML = rows;
        tbody.querySelectorAll('tr[data-id]').forEach(tr => {
            tr.addEventListener('click', function (e) {
                if (e.target.closest('a, button')) {
                    if (e.target.closest('[data-action="details"]')) {
                        openDetailsModal(parseInt(tr.dataset.id, 10));
                    }
                    return;
                }
                openDetailsModal(parseInt(tr.dataset.id, 10));
            });
        });
    }
    /* ─── Modal: szczegóły ─── */
    function openDetailsModal(id) {
        const modalEl = document.getElementById('caseDetailsModal');
        const content = document.getElementById('caseModalContent');
        content.innerHTML =
            '<div class="p-4 text-center text-muted">' +
            '<div class="spinner-border spinner-border-sm me-2"></div>' + escHtml(T.loading) + '</div>';
        // Bootstrap 5.0.0-beta1 nie ma getOrCreateInstance — używamy fallbacku.
        const modal = (bootstrap.Modal.getInstance ? bootstrap.Modal.getInstance(modalEl) : null)
                      || new bootstrap.Modal(modalEl);
        modal.show();
        fetch(root + '/ajax/cases/' + id, { credentials: 'same-origin' })
            .then(r => r.json())
            .then(json => {
                if (!json.ok) {
                    content.innerHTML = '<div class="p-4 text-danger">' + escHtml(json.message || T.err_generic) + '</div>';
                    return;
                }
                renderModal(json.data);
            })
            .catch(() => {
                content.innerHTML = '<div class="p-4 text-danger">' + escHtml(T.err_connection) + '.</div>';
            });
    }
    function renderModal(d) {
        const meta = d.meta || {};
        const attachments = d.attachments || [];
        let html = ''
            + '<div class="case-modal-header-bar">'
            +   '<div class="case-modal-ref">' + escHtml(d.ref) + '</div>'
            +   '<div class="case-modal-title">' + escHtml(d.title) + '</div>'
            +   '<div class="case-modal-meta">'
            +     statusBadge(d.status) + areaBadge(d.area_key)
            +     '<span class="text-muted" style="font-size:.78rem"><i class="bi bi-clock me-1"></i>' + fmtDate(d.created_at) + '</span>'
            +   '</div>'
            + '</div>';
        // Sekcja: zgłaszający
        html += '<div class="modal-section">'
              + '<div class="modal-section-label"><i class="bi bi-person"></i>' + escHtml(T.section_requester) + '</div>'
              + infoRow(T.field_full_name, d.requester_name)
              + infoRow(T.field_email,     d.requester_email)
              + (d.shop_name ? infoRow(T.field_shop, d.shop_name) : '')
              + '</div>';
        // Sekcja: opis
        html += '<div class="modal-section">'
              + '<div class="modal-section-label"><i class="bi bi-card-text"></i>' + escHtml(T.section_description) + '</div>'
              + '<div class="description-block">' + escHtml(d.description || '—') + '</div>'
              + (d.context ? (
                    '<div class="modal-section-label mt-3"><i class="bi bi-info-circle"></i>' + escHtml(T.section_context) + '</div>'
                  + '<div class="description-block">' + escHtml(d.context) + '</div>'
                ) : '')
              + '</div>';
        // Sekcja: routing / konsultant
        html += '<div class="modal-section">'
              + '<div class="modal-section-label"><i class="bi bi-diagram-3"></i>' + escHtml(T.section_routing) + '</div>'
              + infoRow(T.field_area, topicLabel(d.area_key))
              + infoRow(T.field_consultant, d.consultant_name || '<span class="muted">' + escHtml(T.consultant_pending) + '</span>', true)
              + '</div>';
        // Sekcja: spotkanie
        if (d.id_meeting) {
            const dm = fmtDayMon(d.meeting_date);
            html += '<div class="modal-section">'
                  + '<div class="modal-section-label"><i class="bi bi-calendar-event"></i>' + escHtml(T.section_meeting) + '</div>'
                  + '<div class="meeting-card">'
                  +   '<div class="meeting-tile-date"><div class="day">' + dm.day + '</div><span class="mon">' + dm.mon + '</span></div>'
                  +   '<div class="meeting-info-text">'
                  +     '<div class="meeting-info-title">' + escHtml(d.meeting_title || T.meeting_default_title) + '</div>'
                  +     '<div class="meeting-info-meta">'
                  +       fmtDateOnly(d.meeting_date) + (d.meeting_time ? (' • ' + escHtml(String(d.meeting_time).slice(0,5))) : '')
                  +     '</div>'
                  +   '</div>'
                  + '</div>'
                  + '</div>';
        }
        // Sekcja: załączniki
        if (attachments.length > 0) {
            html += '<div class="modal-section">'
                  + '<div class="modal-section-label"><i class="bi bi-paperclip"></i>' + escHtml(T.section_attachments) + ' (' + attachments.length + ')</div>'
                  + '<div class="attachments-grid">'
                  + attachments.map(a => attachmentTile(a)).join('')
                  + '</div>'
                  + '</div>';
        }
        // Sekcja: odpowiedź administratora (podgląd — tylko jeśli istnieje)
        if (d.admin_reply) {
            html += '<div class="modal-section">'
                  + '<div class="modal-section-label"><i class="bi bi-reply-fill" style="color:#22c55e"></i>' + escHtml(T.section_admin_reply) + '</div>'
                  + '<div class="admin-reply-block">' + escHtml(d.admin_reply) + '</div>'
                  + (d.admin_reply_at
                      ? '<div class="admin-reply-meta"><i class="bi bi-clock me-1"></i>' + escHtml(T.admin_reply_saved_at) + ': ' + fmtDate(d.admin_reply_at) + '</div>'
                      : '')
                  + '</div>';
        }

        // Sekcja: meta-dane systemowe
        html += '<div class="modal-section">'
              + '<div class="modal-section-label"><i class="bi bi-gear"></i>' + escHtml(T.section_system_info) + '</div>'
              + infoRow(T.field_ref,        d.ref)
              + infoRow(T.field_status,     statusLabel(d.status), true)
              + infoRow(T.field_created_at, fmtDate(d.created_at))
              + (d.updated_at && d.updated_at !== d.created_at ? infoRow(T.field_updated_at, fmtDate(d.updated_at)) : '')
              + '</div>';
        document.getElementById('caseModalContent').innerHTML = html;
        // Bind: kliknięcie w obraz → lightbox z presigned URL
        document.querySelectorAll('.attachment-tile[data-att-id]').forEach(tile => {
            tile.addEventListener('click', function () {
                const attId = parseInt(tile.dataset.attId, 10);
                const isImg = tile.dataset.attMime && tile.dataset.attMime.startsWith('image/');
                fetchAttachmentUrl(attId).then(url => {
                    if (!url) return;
                    if (isImg) openLightbox(url);
                    else window.open(url, '_blank');
                });
            });
        });
    }
    function infoRow(lbl, val, raw) {
        const inner = raw ? (val || '—') : escHtml(val == null || val === '' ? '—' : val);
        return '<div class="info-row"><span class="lbl">' + escHtml(lbl) + '</span><span class="val">' + inner + '</span></div>';
    }
    function topicLabel(key) {
        const t = (CFG.topics || []).find(x => x.key === key);
        return t ? t.label : (key || '—');
    }
    function statusLabel(code) {
        const opt = CFG.statusOptions[code];
        return opt ? opt.label : code;
    }
    function attachmentTile(a) {
        const isImg = (a.mime_type || '').startsWith('image/');
        const icon  = isImg ? 'bi-image' : 'bi-file-earmark';
        return ''
            + '<div class="attachment-tile" data-att-id="' + a.id + '" data-att-mime="' + escHtml(a.mime_type || '') + '">'
            +   '<div class="attachment-thumb" data-thumb="' + a.id + '">'
            +     '<i class="bi ' + icon + '"></i>'
            +   '</div>'
            +   '<div class="attachment-name" title="' + escHtml(a.original_name) + '">' + escHtml(a.original_name) + '</div>'
            + '</div>';
    }
    /* ─── Pobieranie presigned URL z cache ─── */
    const urlCache = {};
    function fetchAttachmentUrl(id) {
        if (urlCache[id]) return Promise.resolve(urlCache[id]);
        return fetch(root + '/ajax/cases/attachments/' + id + '/url', { credentials: 'same-origin' })
            .then(r => r.json())
            .then(json => {
                if (!json.ok || !json.data || !json.data.url) return null;
                urlCache[id] = json.data.url;
                return urlCache[id];
            })
            .catch(() => null);
    }
    /* ─── Lightbox ─── */
    window.closeLightbox = function () {
        document.getElementById('imgLightbox').classList.remove('open');
    };
    function openLightbox(url) {
        document.getElementById('imgLightboxImg').src = url;
        document.getElementById('imgLightbox').classList.add('open');
    }
    document.getElementById('imgLightbox').addEventListener('click', function (e) {
        if (e.target === this) closeLightbox();
    });
    document.addEventListener('keydown', function (e) {
        if (e.key === 'Escape') closeLightbox();
    });
    /* ─── Eventy filtrów ─── */
    document.querySelectorAll('#statsGrid .stat-card').forEach(card => {
        card.addEventListener('click', function () {
            document.querySelectorAll('#statsGrid .stat-card').forEach(c => c.classList.remove('active'));
            card.classList.add('active');
            state.status = card.dataset.status || '';
            loadList();
        });
    });
    document.querySelectorAll('.filter-pill[data-area]').forEach(pill => {
        pill.addEventListener('click', function () {
            document.querySelectorAll('.filter-pill[data-area]').forEach(p => p.classList.remove('active'));
            pill.classList.add('active');
            state.area_key = pill.dataset.area || '';
            loadList();
        });
    });
    let searchTimer = null;
    document.getElementById('searchInput').addEventListener('input', function (e) {
        clearTimeout(searchTimer);
        const v = e.target.value.trim();
        searchTimer = setTimeout(() => {
            state.q = v;
            loadList();
        }, 300);
    });
    // Pierwszy ładunek
    loadList();
}());
</script>
{% endblock %}