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

{% block title %}{{ translations.cases_new_title }}{% endblock %}

{% block head %}
    {{ parent() }}
    <style>
        /* ── Karta-kreator ─────────────────────────────── */
        .case-wizard {
            max-width: 980px;
            margin: 0 auto;
        }
        .case-card {
            background: #fff;
            border-radius: 16px;
            box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 6px 24px rgba(0,0,0,.06);
            border: 1px solid rgba(0,0,0,.04);
            padding: 1.75rem 2rem;
        }
        .case-card-title {
            display: flex;
            align-items: center;
            gap: .6rem;
            font-size: 1.05rem;
            font-weight: 700;
            color: #111827;
            margin-bottom: .3rem;
        }
        .case-card-title i { color: #1d4ed8; font-size: 1.15rem; }
        .case-card-subtitle {
            font-size: .85rem;
            color: #6b7280;
            margin-bottom: 1.5rem;
            line-height: 1.5;
        }

        /* ── Sekcja kreatora ───────────────────────────── */
        .case-section { padding: 1.1rem 0; }
        .case-section + .case-section {
            border-top: 1px solid #f0f0f0;
        }
        .case-section-label {
            font-size: .72rem;
            font-weight: 700;
            letter-spacing: .07em;
            text-transform: uppercase;
            color: #6b7280;
            margin-bottom: .85rem;
            display: flex;
            align-items: center;
            gap: .45rem;
        }
        .case-section-label i { color: #9ca3af; }

        /* ── Etykiety pól ──────────────────────────────── */
        .cf-label {
            font-size: .82rem;
            font-weight: 600;
            color: #374151;
            margin-bottom: .4rem;
            display: block;
        }
        .cf-label .req { color: #ef4444; margin-left: 2px; }
        .cf-label .opt { color: #9ca3af; font-weight: 400; font-size: .76rem; margin-left: 4px; }

        /* ── Inputy ────────────────────────────────────── */
        .cf-input, .cf-textarea, .cf-select {
            display: block;
            width: 100%;
            padding: .6rem .9rem;
            font-size: .9rem;
            border: 1px solid #d1d5db;
            border-radius: 9px;
            background: #fff;
            color: #111827;
            transition: border-color .15s, box-shadow .15s;
            line-height: 1.5;
        }
        .cf-input:focus, .cf-textarea:focus, .cf-select:focus {
            outline: none;
            border-color: #1d4ed8;
            box-shadow: 0 0 0 3px rgba(29,78,216,.10);
        }
        .cf-textarea { resize: vertical; min-height: 105px; }

        /* ── Topic dropdown ────────────────────────────── */
        .topic-select-wrap { position: relative; }
        .topic-trigger {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: .5rem;
            padding: .6rem .9rem;
            border: 1px solid #d1d5db;
            border-radius: 9px;
            background: #fff;
            cursor: pointer;
            transition: border-color .15s, box-shadow .15s;
            font-size: .9rem;
            color: #9ca3af;
            user-select: none;
        }
        .topic-trigger:hover,
        .topic-trigger.open { border-color: #1d4ed8; box-shadow: 0 0 0 3px rgba(29,78,216,.10); }
        .topic-trigger.has-value { color: #111; }
        .topic-trigger .chevron { transition: transform .2s; flex-shrink: 0; color: #9ca3af; }
        .topic-trigger.open .chevron { transform: rotate(180deg); }

        .topic-options {
            display: none;
            position: absolute;
            top: calc(100% + 4px);
            left: 0; right: 0;
            background: #fff;
            border: 1px solid #e5e7eb;
            border-radius: 10px;
            box-shadow: 0 8px 24px rgba(0,0,0,.10);
            z-index: 200;
            overflow: hidden;
            max-height: 300px;
            overflow-y: auto;
        }
        .topic-options.open { display: block; }
        .topic-option {
            padding: .6rem .9rem;
            cursor: pointer;
            font-size: .88rem;
            transition: background .12s;
            display: flex;
            align-items: center;
            gap: .55rem;
        }
        .topic-option:hover { background: #f8faff; }
        .topic-option.selected { background: #eef2ff; }

        /* ── Area chip ─────────────────────────────────── */
        .area-badge {
            display: inline-flex;
            align-items: center;
            gap: .35rem;
            padding: .25rem .75rem;
            border-radius: 999px;
            font-size: .75rem;
            font-weight: 600;
            background: #eef2ff;
            color: #3730a3;
            border: 1px solid #c7d2fe;
        }
        .area-badge .dot {
            width: 6px; height: 6px;
            border-radius: 50%;
            background: currentColor;
            flex-shrink: 0;
        }

        /* ── Routing preview (lista konsultantów) ──────── */
        #routingPreview {
            display: none;
            border: 1px solid #c7d2fe;
            border-radius: 12px;
            background: #eef2ff;
            padding: 1rem 1.1rem;
            margin-top: 1rem;
        }
        #routingPreview.visible { display: block; }
        .routing-head {
            font-size: .75rem;
            font-weight: 700;
            color: #4338ca;
            text-transform: uppercase;
            letter-spacing: .06em;
            margin-bottom: .7rem;
            display: flex;
            align-items: center;
            gap: .4rem;
        }
        .routing-consultants-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: .6rem;
        }
        .routing-consultant-card {
            display: flex;
            align-items: center;
            gap: .65rem;
            background: #fff;
            border: 1px solid #c7d2fe;
            border-radius: 10px;
            padding: .55rem .75rem;
        }
        .routing-avatar {
            width: 36px; height: 36px;
            border-radius: 50%;
            background: linear-gradient(135deg, #4361ee, #3a0ca3);
            color: #fff;
            font-size: .82rem;
            font-weight: 700;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            letter-spacing: .03em;
        }
        .routing-consultant-name {
            font-size: .88rem;
            font-weight: 600;
            color: #312e81;
            line-height: 1.3;
        }
        .routing-consultant-pos {
            font-size: .73rem;
            color: #6366f1;
            line-height: 1.2;
            margin-top: 1px;
        }
        .routing-note {
            font-size: .78rem;
            color: #4338ca;
            border-top: 1px solid #c7d2fe;
            padding-top: .55rem;
            margin-top: .8rem;
            line-height: 1.5;
            display: flex;
            align-items: flex-start;
            gap: .4rem;
        }

        /* ── Wybór spotkania (radio cards) ─────────────── */
        .meeting-options {
            display: grid;
            grid-template-columns: 1fr;
            gap: .55rem;
        }
        .meeting-option {
            display: flex;
            align-items: stretch;
            gap: .85rem;
            padding: .8rem 1rem;
            border: 1px solid #e5e7eb;
            border-radius: 10px;
            background: #fff;
            cursor: pointer;
            transition: border-color .15s, background .15s, box-shadow .15s;
            position: relative;
        }
        .meeting-option:hover { background: #f8fafc; border-color: #c7d2fe; }
        .meeting-option.selected {
            border-color: #1d4ed8;
            background: #eff6ff;
            box-shadow: 0 0 0 3px rgba(29,78,216,.08);
        }
        .meeting-option input[type="radio"] {
            position: absolute;
            opacity: 0;
            pointer-events: none;
        }
        .meeting-tile-date {
            min-width: 52px;
            border-radius: 8px;
            overflow: hidden;
            text-align: center;
            background: #1d4ed8;
            color: #fff;
            padding: .35rem .25rem;
            flex-shrink: 0;
            align-self: flex-start;
        }
        .meeting-tile-date .day { font-size: 1.25rem; 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: 1px;
        }
        .meeting-info { flex-grow: 1; min-width: 0; }
        .meeting-title-row {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: .5rem;
            font-size: .9rem;
            font-weight: 600;
            color: #111827;
            margin-bottom: .15rem;
        }
        .meeting-meta {
            font-size: .76rem;
            color: #6b7280;
            display: flex;
            flex-wrap: wrap;
            gap: .8rem;
            align-items: center;
        }
        .meeting-tag {
            display: inline-flex;
            align-items: center;
            gap: .25rem;
            font-size: .68rem;
            font-weight: 600;
            padding: .12rem .55rem;
            border-radius: 999px;
            text-transform: uppercase;
            letter-spacing: .04em;
        }
        .meeting-tag.group       { background: #eef2ff; color: #4338ca; }
        .meeting-tag.individual  { background: #ecfeff; color: #0e7490; }

        .meeting-option .check-mark {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 22px; height: 22px;
            border-radius: 50%;
            border: 2px solid #d1d5db;
            flex-shrink: 0;
            align-self: center;
            transition: all .15s;
        }
        .meeting-option.selected .check-mark {
            background: #1d4ed8;
            border-color: #1d4ed8;
            color: #fff;
        }
        .meeting-option .check-mark i { font-size: .72rem; opacity: 0; }
        .meeting-option.selected .check-mark i { opacity: 1; }

        .meeting-option.no-meeting {
            background: #fafafa;
            border-style: dashed;
        }
        .meeting-option.no-meeting.selected {
            background: #f0f9ff;
            border-style: solid;
        }
        .meeting-no-icon {
            min-width: 52px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #9ca3af;
            font-size: 1.5rem;
        }

        /* ── Pliki ─────────────────────────────────────── */
        .file-drop-area {
            border: 2px dashed #d1d5db;
            border-radius: 10px;
            background: #fafafa;
            padding: 1.4rem;
            text-align: center;
            cursor: pointer;
            transition: border-color .15s, background .15s;
        }
        .file-drop-area:hover,
        .file-drop-area.dragover {
            border-color: #1d4ed8;
            background: #f0f4ff;
        }
        .file-drop-area input[type="file"] { display: none; }
        .file-drop-icon { font-size: 1.6rem; color: #9ca3af; margin-bottom: .4rem; }
        .file-names-list {
            display: flex;
            flex-wrap: wrap;
            gap: .4rem;
            margin-top: .6rem;
        }
        .file-chip {
            display: inline-flex;
            align-items: center;
            gap: .3rem;
            background: #e0e7ff;
            color: #3730a3;
            border-radius: 999px;
            padding: .2rem .65rem;
            font-size: .76rem;
            font-weight: 600;
        }

        /* ── Akcje ─────────────────────────────────────── */
        .form-actions {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: .75rem;
            padding-top: 1.2rem;
            border-top: 1px solid #f0f0f0;
            margin-top: 1rem;
        }

        /* ── Sukces ────────────────────────────────────── */
        #submitSuccess { display: none; }
        #submitSuccess.visible { display: block; }
        .success-box {
            border-radius: 14px;
            background: #f0fdf4;
            border: 1px solid #bbf7d0;
            padding: 2rem 1.5rem;
            text-align: center;
        }
    </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_new_title }}</h3>
            <p class="text-subtitle text-muted">
                {{ translations.cases_new_subtitle }}
            </p>
        </div>
        <div class="d-flex gap-2 flex-wrap">
            <a href="{{ root }}/cases/requests" class="btn btn-sm btn-outline-primary">
                <i class="bi bi-list-ul me-1"></i>
                {{ translations.cases_my_requests }}
            </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 — mapa: area_key → konsultanci #}
<script>
window.CASES_CONFIG = {
    consultantsByTopic: {{ consultantsByTopic|json_encode|raw }},
    topics:             {{ topics|json_encode|raw }}
};
</script>

<div class="case-wizard">

    {# ── Stan sukcesu ── #}
    <div id="submitSuccess">
        <div class="case-card">
            <div class="success-box">
                <i class="bi bi-check-circle-fill text-success" style="font-size:2.5rem"></i>
                <h5 class="mt-3 mb-1">{{ translations.cases_new_sent }}</h5>
                <p class="text-muted mb-3">{{ translations.cases_new_sent_hint }}</p>
                <div class="d-flex justify-content-center gap-2 flex-wrap">
                    <button class="btn btn-sm btn-outline-secondary" onclick="resetCasesForm()">
                        <i class="bi bi-plus-lg me-1"></i>
                        {{ translations.cases_new_send_another }}
                    </button>
                    <a href="{{ root }}/cases/requests" class="btn btn-sm btn-outline-primary">
                        <i class="bi bi-list-ul me-1"></i>
                        {{ translations.cases_my_requests }}
                    </a>
                    <a href="{{ root }}/cases/team" class="btn btn-sm btn-primary">
                        <i class="bi bi-people me-1"></i>
                        {{ translations.cases_team_title }}
                    </a>
                </div>
            </div>
        </div>
    </div>

    {# ── Karta-kreator ── #}
    <div id="casesFormWrap">
        <div class="case-card">

            <div class="case-card-title">
                <i class="bi bi-send-fill"></i>
                {{ translations.cases_new_card_title }}
            </div>
            <div class="case-card-subtitle">
                {{ translations.cases_new_card_subtitle }}
            </div>

            <form id="casesForm" novalidate>

                {# ═══ SEKCJA 1: TEMAT + TYTUŁ ═══ #}
                <div class="case-section">
                    <div class="case-section-label">
                        <i class="bi bi-tag-fill"></i>
                        {{ translations.cases_new_section_topic }}
                    </div>

                    <div class="row g-3">
                        <div class="col-12 col-md-6">
                            <label class="cf-label">
                                {{ translations.cases_new_topic_label }}
                                <span class="req">*</span>
                            </label>

                            {% if topics is empty %}
                                <div class="alert alert-warning py-2 px-3 mb-0" style="font-size:.85rem">
                                    <i class="bi bi-exclamation-triangle me-1"></i>
                                    {{ translations.cases_new_no_topics }}
                                </div>
                            {% else %}
                                <div class="topic-select-wrap">
                                    <div class="topic-trigger" id="topicTrigger" tabindex="0">
                                        <span id="topicLabel">{{ translations.cases_new_topic_placeholder }}</span>
                                        <i class="bi bi-chevron-down chevron"></i>
                                    </div>
                                    <div class="topic-options" id="topicOptions">
                                        {% for topic in topics %}
                                            <div class="topic-option"
                                                 data-value="{{ topic.key }}"
                                                 data-label="{{ topic.label }}">
                                                <span class="area-badge">
                                                    <span class="dot"></span>
                                                    {{ topic.label }}
                                                </span>
                                            </div>
                                        {% endfor %}
                                    </div>
                                </div>
                                <input type="hidden" id="topicValue" name="area_key" required />
                            {% endif %}
                        </div>

                        <div class="col-12 col-md-6">
                            <label class="cf-label" for="caseTitle">
                                {{ translations.cases_new_title_label }}
                                <span class="req">*</span>
                            </label>
                            <input type="text"
                                   id="caseTitle"
                                   name="title"
                                   class="cf-input"
                                   placeholder="{{ translations.cases_new_title_placeholder }}"
                                   maxlength="200"
                                   required />
                        </div>
                    </div>

                    {# Konsultanci dla wybranego tematu (lista, nie pojedyncza osoba) #}
                    <div id="routingPreview">
                        <div class="routing-head">
                            <i class="bi bi-people-fill"></i>
                            {{ translations.cases_new_routing_label }}
                        </div>
                        <div class="routing-consultants-grid" id="routingConsultantsGrid">
                            {# wypełniany przez JS #}
                        </div>
                        <div class="routing-note">
                            <i class="bi bi-info-circle flex-shrink-0 mt-1"></i>
                            <span>
                                {{ translations.cases_new_routing_note }}
                            </span>
                        </div>
                    </div>
                </div>

                {# ═══ SEKCJA 2: TREŚĆ ═══ #}
                <div class="case-section">
                    <div class="case-section-label">
                        <i class="bi bi-card-text"></i>
                        {{ translations.cases_new_section_content }}
                    </div>

                    <div class="mb-3">
                        <label class="cf-label" for="caseDescription">
                            {{ translations.cases_new_description_label }}
                            <span class="req">*</span>
                        </label>
                        <textarea id="caseDescription"
                                  name="description"
                                  class="cf-textarea"
                                  style="min-height:120px"
                                  placeholder="{{ translations.cases_new_description_placeholder }}"
                                  required></textarea>
                    </div>

                    <div>
                        <label class="cf-label" for="caseContext">
                            {{ translations.cases_new_context_label }}
                            <span class="opt">({{ translations.optional }})</span>
                        </label>
                        <textarea id="caseContext"
                                  name="context"
                                  class="cf-textarea"
                                  style="min-height:80px"
                                  placeholder="{{ translations.cases_new_context_placeholder }}"></textarea>
                    </div>
                </div>

                {# ═══ SEKCJA 3: SPOTKANIE ═══ #}
                <div class="case-section">
                    <div class="case-section-label">
                        <i class="bi bi-calendar-event"></i>
                        {{ translations.cases_new_section_meeting }}
                        <span class="opt" style="font-weight:500;text-transform:none;letter-spacing:0;font-size:.74rem;color:#9ca3af;margin-left:.3rem">
                            ({{ translations.optional }})
                        </span>
                    </div>

                    <p class="text-muted mb-3" style="font-size:.83rem">
                        {{ translations.cases_new_meeting_hint }}
                    </p>

                    <div class="meeting-options">

                        {# „Bez spotkania" — wartość domyślna #}
                        <label class="meeting-option no-meeting selected" data-meeting-id="">
                            <input type="radio" name="id_meeting" value="" checked />
                            <div class="meeting-no-icon">
                                <i class="bi bi-dash-circle"></i>
                            </div>
                            <div class="meeting-info">
                                <div class="meeting-title-row">
                                    {{ translations.cases_new_meeting_none }}
                                </div>
                                <div class="meeting-meta">
                                    {{ translations.cases_new_meeting_none_hint }}
                                </div>
                            </div>
                            <div class="check-mark"><i class="bi bi-check-lg"></i></div>
                        </label>

                        {% if upcoming is empty %}
                            <div class="alert alert-light border py-2 px-3 mb-0 text-muted" style="font-size:.83rem">
                                <i class="bi bi-calendar-x me-1"></i>
                                {{ translations.cases_new_meeting_empty }}
                            </div>
                        {% else %}
                            {% for meeting in upcoming %}
                                {% if not meeting.isCancelled() %}
                                    <label class="meeting-option" data-meeting-id="{{ meeting.getId() }}">
                                        <input type="radio" name="id_meeting" value="{{ meeting.getId() }}" />

                                        <div class="meeting-tile-date">
                                            <div class="day">{{ meeting.getMeetingDate()|date('d') }}</div>
                                            <span class="mon">{{ meeting.getPolishMonth() }}</span>
                                        </div>

                                        <div class="meeting-info">
                                            <div class="meeting-title-row">
                                                <span>{{ meeting.getTitle() }}</span>
                                                {% if meeting.isGroup() %}
                                                    <span class="meeting-tag group">
                                                        <i class="bi bi-people-fill" style="font-size:.62rem"></i>
                                                        {{ translations.type_group }}
                                                    </span>
                                                {% else %}
                                                    <span class="meeting-tag individual">
                                                        <i class="bi bi-person-fill" style="font-size:.62rem"></i>
                                                        {{ translations.type_individual }}
                                                    </span>
                                                {% endif %}
                                            </div>
                                            <div class="meeting-meta">
                                                <span>
                                                    <i class="bi bi-clock me-1"></i>
                                                    {{ meeting.getDayOfWeek()|capitalize }},
                                                    {{ meeting.getMeetingDate()|date('d') }} {{ meeting.getPolishMonthFull() }}
                                                    {{ meeting.getMeetingDate()|date('Y') }}
                                                    · {{ meeting.getMeetingTime()|slice(0, 5) }}
                                                </span>
                                                {% if meeting.getDurationMinutes() %}
                                                    <span>{{ meeting.getDurationMinutes() }} min</span>
                                                {% endif %}
                                            </div>
                                        </div>

                                        <div class="check-mark"><i class="bi bi-check-lg"></i></div>
                                    </label>
                                {% endif %}
                            {% endfor %}
                        {% endif %}

                    </div>
                </div>

                {# ═══ SEKCJA 4: ZAŁĄCZNIKI ═══ #}
                <div class="case-section">
                    <div class="case-section-label">
                        <i class="bi bi-paperclip"></i>
                        {{ translations.cases_new_section_attachments }}
                        <span class="opt" style="font-weight:500;text-transform:none;letter-spacing:0;font-size:.74rem;color:#9ca3af;margin-left:.3rem">
                            ({{ translations.optional }}, max 10)
                        </span>
                    </div>

                    <div class="file-drop-area" id="fileDropArea">
                        <input type="file" id="caseFiles" name="attachments[]" multiple accept="image/*,.pdf,.doc,.docx,.xls,.xlsx,.txt,.zip" />
                        <label for="caseFiles" style="cursor:pointer;display:block">
                            <div class="file-drop-icon"><i class="bi bi-cloud-upload"></i></div>
                            <div class="fw-semibold mb-1" style="font-size:.88rem">
                                {{ translations.cases_new_drop_files }}
                            </div>
                            <div class="text-muted" style="font-size:.78rem">
                                {{ translations.cases_new_drop_hint }}
                            </div>
                        </label>
                        <div class="file-names-list" id="fileNamesList"></div>
                    </div>
                </div>

                {# ═══ AKCJE ═══ #}
                <div class="form-actions">
                    <button type="button" class="btn btn-outline-secondary" onclick="resetCasesForm()">
                        <i class="bi bi-arrow-counterclockwise me-1"></i>
                        {{ translations.reset }}
                    </button>
                    <button type="submit" class="btn btn-primary" id="submitBtn">
                        {{ translations.cases_new_submit }}
                        <i class="bi bi-send ms-1"></i>
                    </button>
                </div>

            </form>
        </div>
    </div>{# /casesFormWrap #}

</div>{# /case-wizard #}

<script>
(function () {
    'use strict';

    const cfg = window.CASES_CONFIG || { consultantsByTopic: {}, topics: [] };
    const byTopic = cfg.consultantsByTopic || {};

    /* ─── Topic dropdown ────────────────────────────── */
    const trigger = document.getElementById('topicTrigger');
    const options = document.getElementById('topicOptions');

    if (trigger && options) {
        trigger.addEventListener('click', function (e) {
            e.stopPropagation();
            trigger.classList.toggle('open');
            options.classList.toggle('open');
        });

        document.addEventListener('click', function (e) {
            if (!e.target.closest('.topic-select-wrap')) {
                trigger.classList.remove('open');
                options.classList.remove('open');
            }
        });

        options.querySelectorAll('.topic-option').forEach(function (opt) {
            opt.addEventListener('click', function () {
                const key   = opt.dataset.value;
                const label = opt.dataset.label;

                document.getElementById('topicValue').value = key;
                document.getElementById('topicLabel').innerHTML =
                    '<span class="area-badge"><span class="dot"></span>' + escHtml(label) + '</span>';

                trigger.classList.add('has-value');
                trigger.classList.remove('open');
                options.classList.remove('open');

                options.querySelectorAll('.topic-option').forEach(o => o.classList.remove('selected'));
                opt.classList.add('selected');

                renderConsultants(key);
            });
        });

        /* ─── Pre-selekcja tematu z parametru ?area= (np. wejście z karty konsultanta) ─── */
        try {
            const params = new URLSearchParams(window.location.search);
            const preselectedArea = params.get('area');
            if (preselectedArea) {
                const preselectOpt = options.querySelector('.topic-option[data-value="' + (window.CSS && CSS.escape ? CSS.escape(preselectedArea) : preselectedArea.replace(/"/g, '\\"')) + '"]');
                if (preselectOpt) {
                    preselectOpt.click();
                    showPreselectionHint(preselectOpt.dataset.label);
                }
            }
        } catch (e) { /* no-op */ }
    }

    /* ─── Wskazówka o pre-selekcji tematu (po wejściu z karty konsultanta) ─── */
    function showPreselectionHint(label) {
        const formWrap = document.getElementById('casesFormWrap');
        if (!formWrap) return;
        const card = formWrap.querySelector('.case-card');
        if (!card) return;
        if (card.querySelector('.preselect-hint')) return; // idempotentne
        const hint = document.createElement('div');
        hint.className = 'preselect-hint';
        hint.style.cssText = 'display:flex;align-items:flex-start;gap:10px;padding:10px 14px;margin-bottom:14px;background:#eef2ff;border:1px solid #c7d2fe;border-radius:10px;color:#3730a3;font-size:.85rem;';
        hint.innerHTML =
            '<i class="bi bi-info-circle-fill" style="color:#1d4ed8;flex-shrink:0;margin-top:2px"></i>' +
            '<span>' +
                escHtml('{{ translations.cases_new_preselected_hint|e("js") }}') +
                ': <strong>' + escHtml(label) + '</strong>' +
            '</span>';
        card.insertBefore(hint, card.firstChild);
    }

    /* ─── Wszyscy konsultanci dla tematu ────────────── */
    function renderConsultants(areaKey) {
        const preview = document.getElementById('routingPreview');
        const grid    = document.getElementById('routingConsultantsGrid');

        const entry = byTopic[areaKey];
        if (!entry || !entry.consultants || entry.consultants.length === 0) {
            preview.classList.remove('visible');
            return;
        }

        let html = '';
        entry.consultants.forEach(function (c) {
            html +=
                '<div class="routing-consultant-card">' +
                    '<div class="routing-avatar">' + escHtml(c.initials || '?') + '</div>' +
                    '<div class="min-w-0 flex-grow-1">' +
                        '<div class="routing-consultant-name text-truncate">' + escHtml(c.full_name || '') + '</div>' +
                        (c.position ? '<div class="routing-consultant-pos text-truncate">' + escHtml(c.position) + '</div>' : '') +
                    '</div>' +
                '</div>';
        });

        grid.innerHTML = html;
        preview.classList.add('visible');
    }

    /* ─── Wybór spotkania (radio cards) ─────────────── */
    document.querySelectorAll('.meeting-option').forEach(function (label) {
        label.addEventListener('click', function () {
            document.querySelectorAll('.meeting-option').forEach(l => l.classList.remove('selected'));
            label.classList.add('selected');
            const radio = label.querySelector('input[type="radio"]');
            if (radio) radio.checked = true;
        });
    });

    /* ─── Pliki ─────────────────────────────────────── */
    const fileInput = document.getElementById('caseFiles');
    const fileList  = document.getElementById('fileNamesList');
    const dropArea  = document.getElementById('fileDropArea');

    if (fileInput && fileList) {
        fileInput.addEventListener('change', updateFileList);

        if (dropArea) {
            dropArea.addEventListener('dragover', function (e) {
                e.preventDefault();
                dropArea.classList.add('dragover');
            });
            dropArea.addEventListener('dragleave', function () {
                dropArea.classList.remove('dragover');
            });
            dropArea.addEventListener('drop', function (e) {
                e.preventDefault();
                dropArea.classList.remove('dragover');
                fileInput.files = e.dataTransfer.files;
                updateFileList();
            });
        }
    }

    function updateFileList() {
        const files = fileInput.files;
        fileList.innerHTML = '';
        for (let i = 0; i < Math.min(files.length, 10); i++) {
            const chip = document.createElement('span');
            chip.className = 'file-chip';
            chip.innerHTML = '<i class="bi bi-file-earmark me-1"></i>' + escHtml(files[i].name);
            fileList.appendChild(chip);
        }
    }

    /* ─── Submit ───────────────────────────────────── */
    const form = document.getElementById('casesForm');
    if (form) {
        form.addEventListener('submit', function (e) {
            e.preventDefault();
            const topicVal = document.getElementById('topicValue')?.value;
            const title    = document.getElementById('caseTitle')?.value?.trim();
            const desc     = document.getElementById('caseDescription')?.value?.trim();
            if (!topicVal) { showValidationError('{{ translations.cases_new_error_topic|e("js") }}'); return; }
            if (!title)    { showValidationError('{{ translations.cases_new_error_title|e("js") }}'); return; }
            if (!desc)     { showValidationError('{{ translations.cases_new_error_desc|e("js") }}'); return; }
            const submitBtn = document.getElementById('submitBtn');
            if (submitBtn) {
                submitBtn.disabled = true;
                submitBtn.innerHTML = '<span class="spinner-border spinner-border-sm me-1"></span>{{ translations.sending|e("js") }}';
            }
            const fd = new FormData();
            fd.append('area_key',    topicVal);
            fd.append('title',       title);
            fd.append('description', desc);
            const ctx = document.getElementById('caseContext')?.value?.trim();
            if (ctx) fd.append('context', ctx);
            const meetingRadio = document.querySelector('input[name="id_meeting"]:checked');
            if (meetingRadio && meetingRadio.value) {
                fd.append('id_meeting', meetingRadio.value);
            }
            if (fileInput && fileInput.files.length > 0) {
                for (let i = 0; i < fileInput.files.length; i++) {
                    fd.append('attachments[' + i + ']', fileInput.files[i]);
                }
            }
            fetch('{{ root }}/ajax/cases', {
                method: 'POST',
                body: fd,
                credentials: 'same-origin',
            })
            .then(function (res) {
                return res.json().then(function (json) { return { ok: res.ok, json: json }; });
            })
            .then(function (r) {
                if (r.ok && r.json.ok) {
                    document.getElementById('casesFormWrap').style.display = 'none';
                    document.getElementById('submitSuccess').classList.add('visible');
                } else {
                    const msg = r.json.message
                        || (r.json.errors && Object.values(r.json.errors).join(' '))
                        || '{{ translations.cases_new_error_generic|e("js") }}';
                    showValidationError(msg);
                    if (submitBtn) {
                        submitBtn.disabled = false;
                        submitBtn.innerHTML = '{{ translations.cases_new_submit|e("js") }} <i class="bi bi-send ms-1"></i>';
                    }
                }
            })
            .catch(function () {
                showValidationError('{{ translations.cases_new_error_generic|e("js") }}');
                if (submitBtn) {
                    submitBtn.disabled = false;
                    submitBtn.innerHTML = '{{ translations.cases_new_submit|e("js") }} <i class="bi bi-send ms-1"></i>';
                }
            });
        });
    }

    /* ─── Reset ─────────────────────────────────────── */
    window.resetCasesForm = function () {
        if (form) form.reset();

        const topicVal = document.getElementById('topicValue');
        if (topicVal) topicVal.value = '';

        const label = document.getElementById('topicLabel');
        if (label) label.textContent = '{{ translations.cases_new_topic_placeholder | e('js') }}';

        const t = document.getElementById('topicTrigger');
        if (t) t.classList.remove('has-value');

        if (options) options.querySelectorAll('.topic-option').forEach(o => o.classList.remove('selected'));

        const preview = document.getElementById('routingPreview');
        if (preview) preview.classList.remove('visible');

        // Usuń wskazówkę o pre-selekcji tematu (jeśli była dodana)
        const wrap2 = document.getElementById('casesFormWrap');
        if (wrap2) {
            const hint = wrap2.querySelector('.preselect-hint');
            if (hint) hint.remove();
        }

        if (fileList) fileList.innerHTML = '';

        // Domyślne zaznaczenie „Nie przypisuj do spotkania"
        document.querySelectorAll('.meeting-option').forEach(l => l.classList.remove('selected'));
        const noMeeting = document.querySelector('.meeting-option.no-meeting');
        if (noMeeting) {
            noMeeting.classList.add('selected');
            const r = noMeeting.querySelector('input[type="radio"]');
            if (r) r.checked = true;
        }

        document.getElementById('submitSuccess')?.classList.remove('visible');
        const wrap = document.getElementById('casesFormWrap');
        if (wrap) wrap.style.display = '';

        const btn = document.getElementById('submitBtn');
        if (btn) {
            btn.disabled = false;
            btn.innerHTML = '{{ translations.cases_new_submit }} <i class="bi bi-send ms-1"></i>';
        }
    };

    /* ─── Helpers ───────────────────────────────────── */
    function escHtml(str) {
        return String(str)
            .replace(/&/g, '&amp;')
            .replace(/</g, '&lt;')
            .replace(/>/g, '&gt;')
            .replace(/"/g, '&quot;');
    }

    function showValidationError(msg) {
        document.querySelectorAll('.cf-validation-error').forEach(el => el.remove());

        const div = document.createElement('div');
        div.className = 'alert alert-danger py-2 px-3 cf-validation-error mt-2';
        div.style.fontSize = '.85rem';
        div.textContent = msg;

        const actions = document.querySelector('.form-actions');
        if (actions) actions.parentNode.insertBefore(div, actions);

        setTimeout(() => div.remove(), 4000);
    }
}());
</script>
{% endblock %}