{# templates/benchmarks/observation_items.twig #}
{% extends "layouts/base.twig" %}

{% block title %}{{ translations.benchmark_observation_items ?? 'Benchmark: Observation items' }}{% endblock %}

{% block head %}
    {{ parent() }}
    <style>
        .soft-card{ border:1px solid rgba(0,0,0,.06); border-radius:16px; background:#fff; }
        .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);
        }
        .chip{
            border-radius:999px;
            padding:.18rem .50rem;
            font-weight:600;
            font-size:.74rem;
        }
        .muted-mini{ color:#6c757d; font-size:.875rem; }
        .mono{ font-variant-numeric: tabular-nums; }
        .item-card{ transition: transform .08s ease, box-shadow .08s ease; }
        .item-card:hover{ transform: translateY(-1px); box-shadow: 0 10px 24px rgba(0,0,0,.06); }
        .icon-bubble{
            width:42px; height:42px; border-radius:14px;
            display:flex; align-items:center; justify-content:center;
            background: rgba(13,110,253,.08); color:#0d6efd;
            flex: 0 0 auto;
        }
        .mini-kpi{
            border:1px solid rgba(0,0,0,.06);
            border-radius:16px;
            background: rgba(255,255,255,.88);
        }
        .table-mini td, .table-mini th{ padding:.52rem .65rem; vertical-align: middle; }
        .price-pill{
            display:inline-flex; align-items:center; gap:.35rem;
            border-radius:999px; padding:.25rem .55rem;
            background: rgba(0,0,0,.04); border:1px solid rgba(0,0,0,.06);
            font-weight:700;
        }
        .promo-pill{
            display:inline-flex; align-items:center; gap:.35rem;
            border-radius:999px; padding:.25rem .55rem;
            background: rgba(255,193,7,.12); border:1px solid rgba(255,193,7,.25);
            font-weight:700;
        }
        .match-pill{
            display:flex;
            align-items:flex-start;
            gap:.5rem;
            border-radius:14px;
            padding:.45rem .6rem;
            background: rgba(25,135,84,.08);
            border:1px solid rgba(25,135,84,.18);
            font-weight:600;
            color:#198754;
            max-width: 100%;
        }
        .match-pill i{ margin-top: .05rem; }

        .weak-pill{
            background: rgba(108,117,125,.08)!important;
            border-color: rgba(108,117,125,.18)!important;
            color:#6c757d!important;
        }
        .input-soft{
            background: rgba(255,255,255,.92);
            border: 1px solid rgba(0,0,0,.10);
            border-radius: 12px;
        }
        .nowrap{ white-space: nowrap; }
        .card-header{ padding: .9rem 1rem; }
        .card-body{ padding: 1rem; }
        .price-pill, .promo-pill{
            border-radius:999px;
            padding:.22rem .5rem;
            font-weight:700;
            font-size:.88rem;
        }
        /* lepsze łamanie tekstu w komórkach */
        td{ word-break: break-word; }
        .nowrap{ white-space: nowrap; }

        /* kolumna "competitor product" - subtelniejszy opis */
        .muted-mini{ color:#6c757d; font-size:.84rem; }

        /* actions: mniejsze przyciski + lepszy spacing */
        .btn.btn-sm{
            padding: .32rem .48rem;
            border-radius: 12px;
        }
    </style>
{% endblock %}

{% block page_heading %}
    <div class="page-heading">
        <h3>{{ translations.benchmark ?? 'Benchmark' }} — {{ translations.observation_items ?? 'Observation items' }}</h3>
        <p class="text-subtitle text-muted">
            {{ translations.benchmark_observation_items_subtitle ?? 'Add competitor products, match them to your products and keep prices consistent.' }}
        </p>
    </div>
{% endblock %}

{% block content %}

    {# --------------------------------
       INPUT DATA (expected from backend)
       --------------------------------
       observation: CompetitorObservationModel
       competitor: CompetitorModel (optional, if you pass it)
       products: ProductModel[] (your products)
       categories: (optional) list of your categories for selection, else we derive from products
    #}

    {% set obs = observation %}
    {% set items = obs.getItems() ?? [] %}

    {% set totalItems = items|length %}
    {% set totalPromo = 0 %}
    {% for it in items %}
        {% if it.isPromo() %}{% set totalPromo = totalPromo + 1 %}{% endif %}
    {% endfor %}
    <div class="row g-4">

        {# ===========================
           HERO / OBS SUMMARY
           =========================== #}
        <div class="col-12">
            <div class="card 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="icon-bubble" style="background: rgba(25,135,84,.10); color:#198754;">
                                <i class="bi bi-camera"></i>
                            </div>

                            <div>
                                <div class="d-flex align-items-center gap-2 flex-wrap">
                                    <h4 class="mb-0 mono">{{ obs.getObservedAt() ?? '-' }}</h4>

                                    <span class="badge bg-light text-dark chip">
                                        <i class="bi bi-tag me-1"></i>
                                        {{ translations.observation_id ?? 'Observation' }} #{{ obs.getId() }}
                                    </span>

                                    <span class="badge bg-primary chip">
                                        <i class="bi bi-collection me-1"></i>
                                        {{ translations.items ?? 'Items' }}: <span class="mono">{{ totalItems }}</span>
                                    </span>

                                    <span class="badge bg-warning text-dark chip">
                                        <i class="bi bi-lightning-charge me-1"></i>
                                        {{ translations.promotions ?? 'Promo' }}: <span class="mono">{{ totalPromo }}</span>
                                    </span>
                                </div>

                                {% if obs.getNotes() %}
                                    <div class="muted-mini mt-2">
                                        <i class="bi bi-sticky me-1"></i>
                                        {{ obs.getNotes() }}
                                    </div>
                                {% endif %}

                                <div class="muted-mini mt-2">
                                    <i class="bi bi-clock-history me-1"></i>
                                    {{ translations.created_at ?? 'Created' }}:
                                    <span class="mono">{{ obs.getCreatedAt() ?? '-' }}</span>
                                    <span class="mx-2">•</span>
                                    {{ translations.updated_at ?? 'Updated' }}:
                                    <span class="mono">{{ obs.getUpdatedAt() ?? '-' }}</span>
                                </div>
                            </div>
                        </div>

                        <div class="d-flex gap-2 flex-wrap">
                            <a class="btn btn-outline-secondary"
                               href="{{ root }}/benchmarks/competitors/{{ obs.getCompetitorId() }}/observations">
                                <i class="bi bi-arrow-left"></i> {{ translations.back_to_observations ?? 'Back to observations' }}
                            </a>

                            <button class="btn btn-primary" id="openCreateItemBtn">
                                <i class="bi bi-plus"></i> {{ translations.add_item ?? 'Add item' }}
                            </button>
                        </div>

                    </div>

                    <div class="row g-3 mt-3 align-items-end">
                        <div class="col-12 col-lg-6">
                            <label class="form-label">{{ translations.search ?? 'Search' }}</label>
                            <input type="text" class="form-control" id="itemsSearch"
                                   placeholder="{{ translations.search_items_placeholder ?? 'Search by name, notes or product match…' }}">
                            <div class="muted-mini mt-1">{{ translations.search_items_hint ?? 'Type to filter the list instantly.' }}</div>
                        </div>

                        <div class="col-12 col-lg-6 d-flex justify-content-lg-end gap-2 flex-wrap">
                            <select class="form-select" id="itemsFilter" style="max-width:280px;">
                                <option value="all">{{ translations.filter_all ?? 'All' }}</option>
                                <option value="promo">{{ translations.filter_promo ?? 'Promo only' }}</option>
                            </select>

                            <button class="btn btn-outline-secondary" id="itemsClearBtn">
                                <i class="bi bi-x-lg"></i> {{ translations.clear ?? 'Clear' }}
                            </button>
                        </div>
                    </div>

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

        {# ===========================
           LIST (table)
           =========================== #}
        <div class="col-12">
            <div class="card soft-card">
                <div class="card-header d-flex justify-content-between align-items-center flex-wrap gap-2">
                    <div>
                        <h4 class="card-title mb-0">{{ translations.observation_items ?? 'Observation items' }}</h4>
                        <div class="text-muted small">{{ translations.observation_items_hint ?? 'Tip: match items to your products to enable comparisons.' }}</div>
                    </div>
                </div>

                <div class="card-body p-0">
                    {% if items is empty %}
                        <div class="p-4 text-muted">
                            <i class="bi bi-info-circle"></i>
                            {{ translations.no_items_yet ?? 'No items yet. Add your first competitor product.' }}
                        </div>
                    {% else %}
                        <div class="table-responsive">
                            <table class="table table-hover table-mini mb-0">
                                <thead class="table-light">
                                <tr>
                                    <th>{{ translations.competitor_product ?? 'Competitor product' }}</th>
                                    <th style="width:140px;">{{ translations.unit ?? 'Unit' }}</th>
                                    <th style="width:170px;">{{ translations.price ?? 'Price' }}</th>
                                    <th style="width:320px;">{{ translations.match_to_my_product ?? 'Match to my product' }}</th>
                                    <th style="width:100px;">{{ translations.quality ?? 'Quality' }}</th>
                                    <th style="width:110px;">{{ translations.actions ?? 'Actions' }}</th>
                                </tr>
                                </thead>

                                <tbody id="itemsTbody">
                                {% for it in items %}
                                    {% set id = it.getId() %}
                                    {% set nameRaw = it.getNameRaw() ?? '-' %}
                                    {% set unitType = it.getUnitType() ?? '' %}
                                    {% set unitSize = it.getUnitSize() ?? '' %}
                                    {% set price = it.getPrice() %}
                                    {% set promoPrice = it.getPromoPrice() %}
                                    {% set isPromo = it.isPromo() ? 1 : 0 %}
                                    {% set notes = it.getNotes() ?? '' %}
                                    {% set myProductId = it.getMyProductId() %}
                                    {% set quality = it.getQualityScore() ?? null %}
                                    {% set myCatId = it.getMyCategoryId() ?? null %}
                                    {% set myProductName = it.getMyProductName() ?? '' %}
                                    {% set myCatName = it.getMyCategoryName() ?? '' %}

                                    {% set searchText = (nameRaw ~ ' ' ~ notes ~ ' ' ~ myCatName ~ ' ' ~ myProductName)|lower %}

                                    <tr class="item-row"
                                        data-id="{{ id }}"
                                        data-search="{{ searchText|e('html_attr') }}"
                                        data-promo="{{ isPromo }}"
                                        data-name="{{ nameRaw|e('html_attr') }}"
                                        data-unit_type="{{ unitType|e('html_attr') }}"
                                        data-unit_size="{{ unitSize|e('html_attr') }}"
                                        data-price="{{ price }}"
                                        data-promo_price="{{ promoPrice }}"
                                        data-notes="{{ notes|e('html_attr') }}"
                                        data-quality="{{ quality }}"
                                        data-my_category_id="{{ myCatId }}"
                                        data-my_product_id="{{ myProductId }}"
                                        data-my_category_name="{{ myCatName|e('html_attr') }}"
                                        data-my_product_name="{{ myProductName|e('html_attr') }}">

                                        <td>
                                            <div class="fw-semibold">{{ nameRaw }}</div>
                                            <div class="muted-mini">
                                                {% if notes %}
                                                    <i class="bi bi-sticky me-1"></i>{{ notes }}
                                                {% else %}
                                                    <span class="text-muted">{{ translations.no_notes ?? 'No notes' }}</span>
                                                {% endif %}
                                            </div>

                                            <div class="d-flex gap-2 flex-wrap mt-2">
                                                {% if isPromo %}
                                                    <span class="badge bg-warning text-dark chip">
                                                        <i class="bi bi-lightning-charge me-1"></i>{{ translations.promo ?? 'Promo' }}
                                                    </span>
                                                {% endif %}

                                                {% if myCatId %}
                                                    <span class="badge bg-light text-dark chip">
                                                        <i class="bi bi-folder2-open me-1"></i>
                                                        {{ translations.category ?? 'Category' }}:
                                                        <span class="fw-semibold">{{ myCatName ?: ('#' ~ myCatId) }}</span>
                                                    </span>
                                                {% endif %}
                                            </div>
                                        </td>

                                        <td class="nowrap">
                                            <div class="muted-mini">
                                                <span class="badge bg-light text-dark chip">
                                                    {{ unitType ?: '-' }}
                                                </span>
                                                {% if unitSize %}
                                                    <span class="badge bg-light text-dark chip mono">{{ unitSize }}</span>
                                                {% endif %}
                                            </div>
                                        </td>

                                        <td class="nowrap">
                                            <div class="d-flex flex-column gap-1">
                                                <span class="price-pill mono">
                                                    <i class="bi bi-cash-coin"></i>
                                                    {{ price is not null ? price : '-' }}
                                                </span>

                                                {% if isPromo and promoPrice is not null %}
                                                    <span class="promo-pill mono">
                                                        <i class="bi bi-lightning-charge"></i>
                                                        {{ promoPrice }}
                                                    </span>
                                                {% endif %}
                                            </div>
                                        </td>

                                        <td>
                                            {% if myProductId %}
                                                <div class="match-pill">
                                                    <i class="bi bi-check2-circle"></i>
                                                    <div class="d-flex flex-column lh-sm">
                                                        <span class="fw-semibold">
                                                            {{ myProductName ?: (translations.matched ?? 'Matched') }}
                                                        </span>
                                                        <span class="text-muted small">
                                                            {{ myCatName ?: (translations.category ?? 'Category') }}
                                                        </span>
                                                    </div>
                                                </div>
                                            {% else %}
                                                <span class="text-muted">-</span>
                                            {% endif %}
                                        </td>

                                        <td class="nowrap">
                                            {% if quality is not null %}
                                                <span class="badge bg-light text-dark chip mono">{{ quality }}/10</span>
                                            {% else %}
                                                <span class="text-muted">-</span>
                                            {% endif %}
                                        </td>

                                        <td class="nowrap">
                                            <div class="d-flex gap-1 flex-wrap">
                                                <button class="btn btn-outline-secondary btn-sm editItemBtn"
                                                        title="{{ translations.edit ?? 'Edit' }}"
                                                        data-id="{{ id }}">
                                                    <i class="bi bi-pencil"></i>
                                                </button>

                                                <button class="btn btn-outline-danger btn-sm deleteItemBtn"
                                                        title="{{ translations.delete ?? 'Delete' }}"
                                                        data-id="{{ id }}">
                                                    <i class="bi bi-trash"></i>
                                                </button>
                                            </div>
                                        </td>
                                    </tr>
                                {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>

    {# ==========================
       MODAL: CREATE / EDIT ITEM
       ========================== #}
    <div class="modal fade" id="itemModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-centered">
            <div class="modal-content">

                <div class="modal-header">
                    <h5 class="modal-title" id="itemModalTitle">
                        {{ translations.add_item ?? 'Add item' }}
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{{ translations.close ?? 'Close' }}"></button>
                </div>

                <div class="modal-body">

                    <input type="hidden" id="item_id" value="">

                    <div class="row g-3">
                        <div class="col-12 col-lg-5">
                            <label class="form-label">{{ translations.competitor_product_name ?? 'Competitor product name' }}</label>
                            <input class="form-control input-soft" id="name_raw" type="text"
                                   placeholder="e.g. Baguette jambon-fromage" required>
                            <div class="muted-mini mt-1">{{ translations.name_raw_hint ?? 'Use the competitor naming (menu / shelf label).' }}</div>
                        </div>

                        <div class="col-12 col-lg-3">
                            <label class="form-label">{{ translations.my_category ?? 'My category' }}</label>
                            <select class="form-select input-soft" id="item_my_category_id" required>
                            <option value="">{{ translations.select ?? 'Select' }}</option>
                                {% for cat in unique_categories %}
                                    <option value="{{ cat.id ~ '' }}">{{ cat.name }}</option>
                                {% endfor %}
                            </select>
                            <div class="muted-mini mt-1">{{ translations.my_category_hint ?? 'Choose your category to keep comparisons relevant.' }}</div>
                        </div>

                        <div class="col-12 col-lg-2">
                            <label class="form-label">{{ translations.unit_type ?? 'Unit type' }}</label>
                            <select class="form-select input-soft" id="unit_type">
                                <option value="">{{ translations.select ?? 'Select' }}</option>
                                <option value="piece">{{ translations.unit_piece ?? 'Piece' }}</option>
                                <option value="portion">{{ translations.unit_portion ?? 'Portion' }}</option>
                                <option value="kg">{{ translations.unit_kg ?? 'Kg' }}</option>
                                <option value="l">{{ translations.unit_l ?? 'L' }}</option>
                                <option value="other">{{ translations.unit_other ?? 'Other' }}</option>
                            </select>
                        </div>

                        <div class="col-12 col-lg-2">
                            <label class="form-label">{{ translations.unit_size ?? 'Unit size' }}</label>
                            <input class="form-control input-soft mono" id="unit_size" type="text" placeholder="e.g. 250g / 0.33 / 1">
                            <div class="muted-mini mt-1">{{ translations.unit_size_hint ?? 'Optional: size/weight/volume.' }}</div>
                        </div>

                        <div class="col-12 col-lg-3">
                            <label class="form-label">{{ translations.price ?? 'Price' }}</label>
                            <input class="form-control input-soft mono" id="price" type="number" step="0.01" min="0" placeholder="0.00">
                        </div>

                        <div class="col-12 col-lg-3">
                            <label class="form-label">{{ translations.promo_price ?? 'Promo price' }}</label>
                            <input class="form-control input-soft mono" id="promo_price" type="number" step="0.01" min="0" placeholder="0.00" disabled>
                        </div>

                        <div class="col-12 col-lg-3 d-flex align-items-end">
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" id="is_promo">
                                <label class="form-check-label" for="is_promo">
                                    {{ translations.is_promo ?? 'Promo' }}
                                </label>
                            </div>
                        </div>

                        <div class="col-12 col-lg-3">
                            <div class="d-flex justify-content-between align-items-center">
                                <label class="form-label mb-0">{{ translations.quality_score ?? 'Quality score' }}</label>
                                <span class="badge bg-light text-dark chip mono" id="quality_value">5</span>
                            </div>

                            <div class="mt-2">
                                <input class="form-range" id="quality_score" type="range" min="0" max="10" step="1" value="5">
                                <div class="d-flex justify-content-between align-items-center">
                                    <small class="text-muted">0</small>
                                    <small class="text-muted">10</small>
                                </div>
                            </div>

                            <div class="muted-mini mt-1">{{ translations.quality_score_hint ?? 'Your perception score (0–10).' }}</div>
                        </div>

                        <div class="col-12">
                            <label class="form-label">{{ translations.notes ?? 'Notes' }}</label>
                            <textarea class="form-control input-soft" id="notes" rows="2"
                                      placeholder="{{ translations.item_notes_placeholder ?? 'Optional: taste, portion size, packaging, etc.' }}"></textarea>
                        </div>

                        <div class="col-12">
                            <hr class="my-2">
                            <div class="d-flex justify-content-between align-items-center flex-wrap gap-2">
                                <div>
                                    <div class="fw-semibold">{{ translations.matching ?? 'Matching' }}</div>
                                    <div class="muted-mini">{{ translations.matching_hint ?? 'Pick your product to compare prices and positioning.' }}</div>
                                </div>
                                <span class="badge bg-light text-dark chip">
                                    {{ translations.tip ?? 'Tip' }}: {{ translations.matching_tip ?? 'Filter products by category using the selector above.' }}
                                </span>
                            </div>
                        </div>

                        <div class="col-12 col-lg-6">
                            <label class="form-label">{{ translations.my_product ?? 'My product' }}</label>

                            <select class="form-select input-soft" id="my_product_id" required>
                                <option value="">{{ translations.select ?? 'Select' }}</option>
                            </select>

                            <div class="muted-mini mt-1">{{ translations.my_product_hint ?? 'Select your product.' }}</div>
                        </div>

                    </div>

                    <div class="text-muted small mt-3">
                        <i class="bi bi-shield-check"></i>
                        {{ translations.item_modal_hint ?? 'Promo price is only used when the promo switch is enabled.' }}
                    </div>

                </div>

                <div class="modal-footer">
                    <button class="btn btn-secondary" data-bs-dismiss="modal">
                        {{ translations.cancel ?? 'Cancel' }}
                    </button>
                    <button class="btn btn-primary" id="saveItemBtn">
                        <i class="bi bi-save"></i> {{ translations.save ?? 'Save' }}
                    </button>
                </div>

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


{% endblock %}

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

            const observationId = "{{ observation.getId() }}";
            const competitorId  = "{{ observation.getCompetitorId() }}";

            // ✅ Normalize products to fields used by JS: id, name, category_id, category_name, price
            const ALL_PRODUCTS = (
                    {{ products|json_encode(constant('JSON_UNESCAPED_UNICODE'))|raw }}
            )?.map(p => ({
                id: p.id,
                name: p.name,
                category_id: (p.category_id ?? p.id_category ?? null),
                category_name: (p.category_name ?? null),
                price: (p.price ?? p.portion_price ?? p.suggested_sale_price ?? null)
            })) || [];

            // helpers
            const apiPost   = (url, data) => api(url, { method: "POST",  data });
            const apiPatch  = (url, data) => api(url, { method: "PATCH", data });
            const apiDelete = (url)       => api(url, { method: "DELETE" });

            const clamp = (n, min, max) => Math.min(max, Math.max(min, n));

            const toNumberOrNull = (v) => {
                if (v === null || v === undefined) return null;
                const s = String(v).trim();
                if (s === "") return null;
                const n = Number(s);
                return Number.isFinite(n) ? n : null;
            };

            const toIntOrNull = (v) => {
                const n = toNumberOrNull(v);
                if (n === null) return null;
                return Number.isFinite(n) ? Math.trunc(n) : null;
            };

            // ✅ works for input + select + textarea
            const setInvalid = (el, isInvalid) => {
                if (!el) return;
                el.classList.toggle('is-invalid', !!isInvalid);
            };

            // modal
            const modalEl = document.getElementById('itemModal');
            const modal   = new bootstrap.Modal(modalEl);

            const openCreateBtn = document.getElementById('openCreateItemBtn');
            const saveBtn       = document.getElementById('saveItemBtn');

            // inputs
            const idInp        = document.getElementById('item_id');
            const nameInp      = document.getElementById('name_raw');
            const myCatSel     = document.getElementById('item_my_category_id');
            const unitTypeSel  = document.getElementById('unit_type');
            const unitSizeInp  = document.getElementById('unit_size');
            const priceInp     = document.getElementById('price');
            const promoPriceInp= document.getElementById('promo_price');
            const isPromoSw    = document.getElementById('is_promo');
            const qualityInp   = document.getElementById('quality_score');
            const qualityValue = document.getElementById('quality_value');
            const notesTa      = document.getElementById('notes');
            const myProductSel = document.getElementById('my_product_id');

            // --- QUALITY always enabled ---
            const syncQualityUi = () => {
                if (!qualityInp) return;
                const q = clamp(toIntOrNull(qualityInp.value) ?? 5, 0, 10);
                qualityInp.value = String(q);
                if (qualityValue) qualityValue.textContent = String(q);
            };
            qualityInp?.addEventListener('input', () => {
                syncQualityUi();
                setInvalid(qualityInp, false);
            });
            syncQualityUi();

            function setPromoUi(isPromo){
                if (!promoPriceInp) return;
                promoPriceInp.disabled = !isPromo;
                if (!isPromo) promoPriceInp.value = "";
            }
            isPromoSw?.addEventListener('change', () => setPromoUi(isPromoSw.checked));

            function rebuildProductSelect(categoryId){
                if (!myProductSel) return;

                const current = myProductSel.value || "";
                myProductSel.innerHTML = "";

                const opt0 = document.createElement('option');
                opt0.value = "";
                opt0.textContent = "{{ translations.select ?? 'Select' }}";
                myProductSel.appendChild(opt0);

                const base = Array.isArray(ALL_PRODUCTS) ? ALL_PRODUCTS : [];
                const filtered = !categoryId
                    ? [...base]
                    : base.filter(p => String(p.category_id) === String(categoryId));

                filtered.sort((a,b) => String(a.name).localeCompare(String(b.name)));

                for (const p of filtered) {
                    const opt = document.createElement('option');
                    opt.value = String(p.id);
                    opt.textContent = `${p.name} — ${p.price ?? '-'}`;
                    myProductSel.appendChild(opt);
                }

                // restore previous selection if still exists
                if (current && myProductSel.querySelector(`option[value="${CSS.escape(String(current))}"]`)) {
                    myProductSel.value = current;
                } else if (filtered.length === 1) {
                    myProductSel.value = String(filtered[0].id);
                } else {
                    myProductSel.value = "";
                }
            }

            function resetModal(){
                document.getElementById('itemModalTitle').textContent = "{{ translations.add_item ?? 'Add item' }}";
                idInp.value = "";
                nameInp.value = "";
                myCatSel.value = "";
                unitTypeSel.value = "";
                unitSizeInp.value = "";
                priceInp.value = "";
                promoPriceInp.value = "";
                isPromoSw.checked = false;
                setPromoUi(false);
                notesTa.value = "";
                myProductSel.value = "";

                qualityInp.value = "5";
                syncQualityUi();

                // clear invalid marks
                [nameInp, myCatSel, unitTypeSel, unitSizeInp, priceInp, promoPriceInp, qualityInp, myProductSel]
                    .forEach(el => setInvalid(el, false));

                rebuildProductSelect("");
            }

            // change category -> rebuild products
            myCatSel?.addEventListener('change', () => {
                setInvalid(myCatSel, false);
                rebuildProductSelect(myCatSel.value || "");
            });

            // init on page load
            rebuildProductSelect("");

            // open create
            openCreateBtn?.addEventListener('click', () => {
                resetModal();
                modal.show();
                setTimeout(() => nameInp?.focus(), 150);
            });

            // ===== LIVE INPUT GUARDS (hard limits) =====

            // Price >= 0
            priceInp?.addEventListener('input', () => {
                const n = toNumberOrNull(priceInp.value);
                if (n === null) { setInvalid(priceInp, false); return; }
                if (n < 0) priceInp.value = "0";
                setInvalid(priceInp, false);
            });

            // Promo price >= 0
            promoPriceInp?.addEventListener('input', () => {
                const n = toNumberOrNull(promoPriceInp.value);
                if (n === null) { setInvalid(promoPriceInp, false); return; }
                if (n < 0) promoPriceInp.value = "0";
                setInvalid(promoPriceInp, false);
            });

            // Clear invalid state on change/typing for required fields
            nameInp?.addEventListener('input', () => setInvalid(nameInp, false));
            unitTypeSel?.addEventListener('change', () => setInvalid(unitTypeSel, false));
            unitSizeInp?.addEventListener('input', () => setInvalid(unitSizeInp, false));
            myProductSel?.addEventListener('change', () => setInvalid(myProductSel, false));

            // edit from row dataset
            document.addEventListener('click', (e) => {
                const btn = e.target.closest('.editItemBtn');
                if (!btn) return;

                const id = btn.dataset.id;
                const row = document.querySelector(`tr.item-row[data-id="${id}"]`);
                if (!row) return;

                document.getElementById('itemModalTitle').textContent = "{{ translations.edit_item ?? 'Edit item' }}";

                idInp.value = id;

                nameInp.value     = row.getAttribute('data-name') || "";
                myCatSel.value    = row.getAttribute('data-my_category_id') || "";
                unitTypeSel.value = row.getAttribute('data-unit_type') || "";
                unitSizeInp.value = row.getAttribute('data-unit_size') || "";
                priceInp.value    = row.getAttribute('data-price') || "";

                const isPromo = (row.getAttribute('data-promo') === '1');
                isPromoSw.checked = isPromo;
                setPromoUi(isPromo);
                promoPriceInp.value = row.getAttribute('data-promo_price') || "";

                notesTa.value = row.getAttribute('data-notes') || "";

                // quality: always enabled -> value from data or default 5
                const qRaw = row.getAttribute('data-quality');
                const q = (qRaw !== null && qRaw !== "") ? clamp(toIntOrNull(qRaw) ?? 5, 0, 10) : 5;
                qualityInp.value = String(q);
                syncQualityUi();

                const cat = row.getAttribute('data-my_category_id') || "";
                rebuildProductSelect(cat);

                myProductSel.value = row.getAttribute('data-my_product_id') || "";

                // clear invalid marks
                [nameInp, myCatSel, unitTypeSel, unitSizeInp, priceInp, promoPriceInp, qualityInp, myProductSel]
                    .forEach(el => setInvalid(el, false));

                modal.show();
                setTimeout(() => nameInp?.focus(), 150);
            });

            // save (create / update)
            saveBtn?.addEventListener('click', async () => {
                const id = (idInp.value || "").trim();

                // ===== BUILD + SANITIZE =====
                const name_raw       = (nameInp.value || "").trim();
                const my_category_id = myCatSel.value ? Number(myCatSel.value) : null;

                const unit_type = (unitTypeSel.value || "").trim() || null;
                const unit_size = (unitSizeInp.value || "").trim() || null;

                // If empty -> 0
                let priceNum = toNumberOrNull(priceInp.value);
                if (priceNum === null) priceNum = 0;
                priceNum = Math.max(0, priceNum);

                const is_promo = isPromoSw.checked ? 1 : 0;

                let promoNum = toNumberOrNull(promoPriceInp.value);
                if (is_promo) {
                    if (promoNum === null) promoNum = NaN; // required when promo ON
                } else {
                    promoNum = null;
                }
                if (promoNum !== null && Number.isFinite(promoNum)) promoNum = Math.max(0, promoNum);

                // ✅ always send quality
                const qualityNum = clamp(toIntOrNull(qualityInp.value) ?? 5, 0, 10);

                const payload = {
                    name_raw,
                    my_category_id,
                    unit_type,
                    unit_size,
                    price: priceNum,
                    is_promo,
                    promo_price: (is_promo ? promoNum : null),
                    quality_score: qualityNum,
                    notes: (notesTa.value || "").trim() || null,
                    my_product_id: myProductSel.value ? Number(myProductSel.value) : null,
                };

                // ===== VALIDATION (UI + messages) =====
                const fail = (el, fallback) => {
                    setInvalid(el, true);
                    Swal.fire({
                        icon: 'warning',
                        title: '{{ translations.error ?? 'Error' }}',
                        text: fallback
                    });
                };

                if (!payload.name_raw) { fail(nameInp, "Name is required"); return; }
                if (!payload.my_category_id) { fail(myCatSel, "Category is required"); return; }
                if (!payload.unit_type) { fail(unitTypeSel, "Unit is required"); return; }
                if (!payload.unit_size) { fail(unitSizeInp, "Unit size is required"); return; }
                if (!payload.my_product_id) { fail(myProductSel, "My product is required"); return; }

                if (payload.is_promo && (!Number.isFinite(payload.promo_price))) {
                    fail(promoPriceInp, "Promo price is required when promo is enabled");
                    return;
                }

                // hard limits
                if (payload.quality_score < 0 || payload.quality_score > 10) {
                    fail(qualityInp, "Quality score must be between 0 and 10");
                    qualityInp.value = String(clamp(payload.quality_score, 0, 10));
                    syncQualityUi();
                    return;
                }

                if (payload.price < 0) {
                    fail(priceInp, "Price must be 0 or higher");
                    priceInp.value = "0";
                    return;
                }

                if (payload.is_promo && payload.promo_price !== null && Number.isFinite(payload.promo_price) && payload.promo_price < 0) {
                    fail(promoPriceInp, "Promo price must be 0 or higher");
                    promoPriceInp.value = "0";
                    return;
                }

                // Optional: promo price should not exceed normal price
                if (payload.is_promo && Number.isFinite(payload.promo_price) && payload.promo_price > payload.price) {
                    Swal.fire({
                        icon: 'warning',
                        title: '{{ translations.error ?? 'Error' }}',
                        text: '{{ translations.promo_price_gt_price ?? 'Promo price should not be higher than regular price' }}'
                    });
                    setInvalid(promoPriceInp, true);
                    return;
                }

                // ===== REQUEST =====
                const resp = id
                    ? await apiPatch(`/ajax/benchmarks/observations/${observationId}/items/${id}`, payload)
                    : await apiPost(`/ajax/benchmarks/competitors/${competitorId}/observations/${observationId}/items`, payload);

                if (resp?.success || resp?.ok) {
                    Swal.fire({
                        icon: 'success',
                        title: '{{ translations.success ?? 'Success' }}',
                        text: '{{ translations.operation_successful ?? 'Operation successful' }}',
                        timer: 900,
                        showConfirmButton: false
                    });
                    setTimeout(() => location.reload(), 350);
                } else {
                    Swal.fire({
                        icon: 'error',
                        title: '{{ translations.error ?? 'Error' }}',
                        text: resp?.message || '{{ translations.undefined_error_occurred ?? 'undefined_error_occurred' }}'
                    });
                }
            });

            // delete item
            document.addEventListener('click', async (e) => {
                const btn = e.target.closest('.deleteItemBtn');
                if (!btn) return;

                const sure = await Swal.fire({
                    icon: 'warning',
                    title: '{{ translations.confirm ?? 'Confirm' }}',
                    text: '{{ translations.delete_item_confirm ?? 'Delete this item?' }}',
                    showCancelButton: true,
                    confirmButtonText: '{{ translations.delete ?? 'Delete' }}',
                    cancelButtonText: '{{ translations.cancel ?? 'Cancel' }}'
                });
                if (!sure.isConfirmed) return;

                const resp = await apiDelete(`/ajax/benchmarks/observations/${observationId}/items/${btn.dataset.id}`);

                if (resp?.success || resp?.ok) {
                    Swal.fire({ icon:'success', title:'{{ translations.deleted ?? 'Deleted' }}', timer: 850, showConfirmButton:false });
                    setTimeout(() => location.reload(), 250);
                } else {
                    Swal.fire({ icon:'error', title:'{{ translations.error ?? 'Error' }}', text: resp?.message || '{{ translations.undefined_error_occurred ?? 'undefined_error_occurred' }}' });
                }
            });

            // filters (bez zmian)
            const searchInp = document.getElementById('itemsSearch');
            const filterSel = document.getElementById('itemsFilter');
            const clearBtn  = document.getElementById('itemsClearBtn');
            const tbody     = document.getElementById('itemsTbody');

            function applyFilters(){
                if (!tbody) return;
                const q = (searchInp?.value || "").trim().toLowerCase();
                const f = filterSel?.value || 'all';

                tbody.querySelectorAll('tr.item-row').forEach(row => {
                    const text   = (row.getAttribute('data-search') || "").toLowerCase();
                    const isPromo= row.getAttribute('data-promo') === '1';

                    const okText   = (!q || text.includes(q));
                    let okFilter   = true;
                    if (f === 'promo') okFilter = isPromo;

                    row.style.display = (okText && okFilter) ? '' : 'none';
                });
            }

            searchInp?.addEventListener('input', applyFilters);
            filterSel?.addEventListener('change', applyFilters);
            clearBtn?.addEventListener('click', () => {
                if (searchInp) searchInp.value = '';
                if (filterSel) filterSel.value = 'all';
                applyFilters();
            });
            applyFilters();
        });
    </script>
{% endblock %}