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

{% block title %}{{ translations.benchmark_observations ?? 'Benchmark: Observations' }}{% 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:.2rem .55rem; font-weight:600; font-size:.78rem; }
        .muted-mini{ color:#6c757d; font-size:.875rem; }
        .mono{ font-variant-numeric: tabular-nums; }
        .obs-card{ transition: transform .08s ease, box-shadow .08s ease; }
        .obs-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);
        }
        .progress-soft{
            height: 10px;
            border-radius: 999px;
            background: rgba(0,0,0,.06);
            overflow: hidden;
        }
        .progress-soft > div{ height: 10px; }
        .table-mini td, .table-mini th{ padding:.55rem .6rem; }

        .pill-soft{
            display:inline-flex;
            align-items:center;
            gap:.35rem;
            border-radius:999px;
            padding:.18rem .55rem;
            background: rgba(0,0,0,.04);
            border: 1px solid rgba(0,0,0,.06);
            font-weight: 700;
            font-size: .78rem;
        }
        .pill-warn{
            background: rgba(255,193,7,.14);
            border-color: rgba(255,193,7,.25);
        }
    </style>
{% endblock %}

{% block page_heading %}
    <div class="page-heading">
        <h3>{{ translations.benchmark ?? 'Benchmark' }} — {{ translations.observations ?? 'Observations' }}</h3>
        <p class="text-subtitle text-muted">
            {{ translations.benchmark_observations_subtitle ?? 'Manage observation snapshots and compare competitor pricing over time.' }}
        </p>
    </div>
{% endblock %}

{% block content %}

    {% set obsCount = observations|length %}
    {% set lastObsAt = (obsCount > 0) ? (observations[0].getObservedAt() ?? null) : null %}

    <div class="row g-4">

        {# ===========================
           HEADER / COMPETITOR 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">
                                <i class="bi bi-shop"></i>
                            </div>

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

                                    <span class="badge {{ competitor.isActive() ? 'bg-success' : 'bg-secondary' }} chip">
                                        <i class="bi bi-circle-fill me-1"></i>
                                        {{ competitor.isActive() ? (translations.active ?? 'Active') : (translations.inactive ?? 'Inactive') }}
                                    </span>

                                    {% if competitor.getType() %}
                                        <span class="badge bg-light text-dark chip">
                                            <i class="bi bi-tag me-1"></i>{{ competitor.getType() }}
                                        </span>
                                    {% endif %}

                                    {% if competitor.getCity() %}
                                        <span class="badge bg-light text-dark chip">
                                            <i class="bi bi-geo-alt me-1"></i>{{ competitor.getCity() }}
                                        </span>
                                    {% endif %}

                                    {% if competitor.getDistanceKm() %}
                                        <span class="badge bg-light text-dark chip">
                                            <i class="bi bi-signpost me-1"></i><span class="mono">{{ competitor.getDistanceKm() }}</span> km
                                        </span>
                                    {% endif %}
                                </div>

                                <div class="muted-mini mt-2">
                                    <i class="bi bi-collection me-1"></i>
                                    {{ translations.total_observations ?? 'Total observations' }}:
                                    <span class="fw-semibold mono">{{ obsCount }}</span>
                                    {% if lastObsAt %}
                                        <span class="mx-2">•</span>
                                        <i class="bi bi-calendar3 me-1"></i>
                                        {{ translations.last_observation ?? 'Last observation' }}:
                                        <span class="fw-semibold mono">{{ lastObsAt }}</span>
                                    {% endif %}
                                </div>

                                {% if competitor.getNotes() %}
                                    <div class="border rounded p-3 mt-3"
                                         style="background:rgba(0,0,0,.02); border-color: rgba(0,0,0,.06)!important;">
                                        <div class="text-muted small mb-1">{{ translations.notes ?? 'Notes' }}</div>
                                        <div class="muted-mini">{{ competitor.getNotes() }}</div>
                                    </div>
                                {% endif %}
                            </div>
                        </div>

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

                            <button class="btn btn-primary" id="openCreateObservationBtn">
                                <i class="bi bi-plus"></i> {{ translations.new_observation ?? 'New observation' }}
                            </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="obsSearch"
                                   placeholder="{{ translations.search_observations_placeholder ?? 'Search by date or note…' }}">
                            <div class="muted-mini mt-1">{{ translations.search_observations_hint ?? 'Filter observations instantly.' }}</div>
                        </div>

                        <div class="col-12 col-lg-6 d-flex justify-content-lg-end gap-2 flex-wrap">
                            {# ✅ Bez matched/unmatched: nowe filtry #}
                            <select class="form-select" id="obsFilter" style="max-width:280px;">
                                <option value="all">{{ translations.filter_all ?? 'All' }}</option>
                                <option value="has_promos">{{ translations.filter_has_promos ?? 'Has promos' }}</option>
                                <option value="high_discount">{{ translations.filter_high_discount ?? 'High avg discount' }}</option>
                                <option value="low_pricing">{{ translations.filter_low_pricing ?? 'Missing prices' }}</option>
                            </select>

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

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

        {# ===========================
           LIST OBSERVATIONS
           =========================== #}
        <div class="col-12">
            {% if observations is empty %}
                <div class="card soft-card">
                    <div class="card-body p-4">
                        <div class="text-muted">
                            <i class="bi bi-info-circle"></i>
                            {{ translations.no_observations_yet ?? 'No observations yet. Create your first snapshot.' }}
                        </div>
                    </div>
                </div>
            {% else %}
                <div class="row g-3" id="obsGrid">
                    {% for o in observations %}
                        {% set itemsCount = o.getItemsCount() ?? (o.getItems() is iterable ? (o.getItems()|length) : 0) %}
                        {% set note = o.getNotes() ?? '' %}
                        {% set searchText = ((o.getObservedAt() ?? '') ~ ' ' ~ (note ?? ''))|lower %}

                        {# ===== Stats we can derive even if backend doesn’t provide aggregates ===== #}
                        {% set promoCount = 0 %}
                        {% set pricedCount = 0 %}
                        {% set sumPrice = 0 %}
                        {% set sumDiscountPerc = 0 %}
                        {% set discountCount = 0 %}

                        {% if o.getItems() is iterable %}
                            {% for it in o.getItems() %}
                                {% set p = it.getPrice() %}
                                {% if p is not null %}
                                    {% set pricedCount = pricedCount + 1 %}
                                    {% set sumPrice = sumPrice + p %}
                                {% endif %}

                                {% if it.isPromo() %}
                                    {% set promoCount = promoCount + 1 %}
                                    {% set pp = it.getPromoPrice() %}
                                    {% if p is not null and pp is not null and p > 0 %}
                                        {% set sumDiscountPerc = sumDiscountPerc + (((p - pp) / p) * 100) %}
                                        {% set discountCount = discountCount + 1 %}
                                    {% endif %}
                                {% endif %}
                            {% endfor %}
                        {% else %}
                            {# fallback: if you later add o.getPromoCount()/getPricedCount()/getAvgPrice - use those #}
                            {% set promoCount = o.getPromoCount() ?? 0 %}
                            {% set pricedCount = o.getPricedCount() ?? 0 %}
                            {% set sumPrice = 0 %}
                        {% endif %}

                        {% set avgPrice = (pricedCount > 0) ? (sumPrice / pricedCount) : 0 %}
                        {% set avgDiscount = (discountCount > 0) ? (sumDiscountPerc / discountCount) : 0 %}
                        {% set promoShare = (itemsCount > 0) ? ((promoCount / itemsCount) * 100) : 0 %}
                        {% set priceCompleteness = (itemsCount > 0) ? ((pricedCount / itemsCount) * 100) : 0 %}

                        {% set promoShareInt = promoShare|round(0, 'floor') %}
                        {% set priceCompletenessInt = priceCompleteness|round(0, 'floor') %}
                        {% set avgDiscountInt = avgDiscount|round(0, 'floor') %}

                        <div class="col-12 col-md-6 col-xl-4 obs-item"
                             data-search="{{ searchText|e('html_attr') }}"
                             data-promos="{{ promoCount }}"
                             data-avg_discount="{{ avgDiscountInt }}"
                             data-pricing="{{ priceCompletenessInt }}">
                            <div class="p-3 soft-card obs-card h-100">

                                <div class="d-flex justify-content-between align-items-start 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="fw-semibold mono">
                                                {{ o.getObservedAt() ?? '-' }}
                                            </div>

                                            <div class="d-flex gap-2 flex-wrap mt-2">
                                                {% if o.getClonedFromObservationId() %}
                                                    <span class="badge bg-light text-dark chip">
                                                        <i class="bi bi-files me-1"></i>{{ translations.cloned ?? 'Cloned' }}
                                                    </span>
                                                {% endif %}

                                                {% if promoCount > 0 %}
                                                    <span class="badge bg-warning text-dark chip">
                                                        <i class="bi bi-lightning-charge me-1"></i>
                                                        {{ translations.promotions ?? 'Promos' }}: <span class="mono">{{ promoCount }}</span>
                                                    </span>
                                                {% endif %}

                                                {% if priceCompletenessInt < 100 %}
                                                    <span class="pill-soft pill-warn">
                                                        <i class="bi bi-exclamation-triangle"></i>
                                                        {{ translations.missing_prices ?? 'Missing prices' }}
                                                    </span>
                                                {% endif %}
                                            </div>

                                            {% if note %}
                                                <div class="muted-mini mt-2">{{ note }}</div>
                                            {% endif %}
                                        </div>
                                    </div>

                                    <div class="d-flex gap-1">
                                        <a class="btn btn-outline-success btn-sm"
                                           href="{{ root }}/benchmarks/observations/{{ o.getId() }}/items">
                                            <i class="bi bi-pencil-square"></i> {{ translations.edit_items ?? 'Edit items' }}
                                        </a>

                                        <button class="btn btn-outline-danger btn-sm deleteObservationBtn"
                                                title="{{ translations.delete ?? 'Delete' }}"
                                                data-id="{{ o.getId() }}">
                                            <i class="bi bi-trash"></i>
                                        </button>
                                    </div>
                                </div>

                                <div class="row g-2 mt-3">
                                    <div class="col-6">
                                        <div class="mini-kpi p-2">
                                            <div class="text-muted small">{{ translations.items ?? 'Items' }}</div>
                                            <div class="fw-semibold mono">{{ itemsCount }}</div>
                                        </div>
                                    </div>
                                    <div class="col-6">
                                        <div class="mini-kpi p-2">
                                            <div class="text-muted small">{{ translations.avg_price ?? 'Avg price' }}</div>
                                            <div class="fw-semibold mono">
                                                {% if pricedCount > 0 %}
                                                    {{ avgPrice|number_format(2, '.', '') }}
                                                {% else %}
                                                    -
                                                {% endif %}
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-6">
                                        <div class="mini-kpi p-2">
                                            <div class="text-muted small">{{ translations.promotions ?? 'Promos' }}</div>
                                            <div class="fw-semibold mono">{{ promoShareInt }}%</div>
                                        </div>
                                    </div>
                                    <div class="col-6">
                                        <div class="mini-kpi p-2">
                                            <div class="text-muted small">{{ translations.avg_discount ?? 'Avg discount' }}</div>
                                            <div class="fw-semibold mono">
                                                {% if discountCount > 0 %}
                                                    {{ avgDiscountInt }}%
                                                {% else %}
                                                    -
                                                {% endif %}
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                {# Price completeness bar (przydatniejsze niż match coverage) #}
                                <div class="mt-3">
                                    <div class="d-flex justify-content-between muted-mini">
                                        <span>{{ translations.price_completeness ?? 'Price completeness' }}</span>
                                        <span class="mono fw-semibold">{{ pricedCount }}/{{ itemsCount }}</span>
                                    </div>
                                    <div class="progress-soft mt-2">
                                        <div style="width: {{ priceCompletenessInt }}%; background: rgba(13,110,253,.55);"></div>
                                    </div>
                                </div>

                                <div class="d-flex justify-content-between align-items-center flex-wrap gap-2 mt-3">
                                    <div class="text-muted small">
                                        <i class="bi bi-clock-history me-1"></i>
                                        {{ translations.created_at ?? 'Created' }}: {{ o.getCreatedAt() ?? '-' }}
                                    </div>
                                </div>

                            </div>
                        </div>
                    {% endfor %}
                </div>
            {% endif %}
        </div>

    </div>

    {# ==========================
       MODAL: CREATE OBSERVATION
       ========================== #}
    <div class="modal fade" id="createObservationModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content">

                <div class="modal-header">
                    <h5 class="modal-title">
                        {{ translations.new_observation ?? 'New observation' }}
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{{ translations.close ?? 'Close' }}"></button>
                </div>

                <div class="modal-body">

                    <div class="row g-3">
                        <div class="col-12 col-md-6">
                            <label class="form-label">{{ translations.observed_at ?? 'Observed at' }}</label>
                            <input type="date" class="form-control" id="observed_at"
                                   value="{{ 'now'|date('Y-m-d') }}">
                            <div class="muted-mini mt-1">{{ translations.observed_at_hint ?? 'Date when you checked competitor prices.' }}</div>
                        </div>

                        <div class="col-12 col-md-6">
                            <label class="form-label">{{ translations.creation_mode ?? 'Creation mode' }}</label>
                            <select class="form-select" id="creation_mode">
                                <option value="clone">
                                    {{ translations.clone_last ?? 'Clone last observation' }}
                                </option>
                                <option value="blank" selected>
                                    {{ translations.create_blank ?? 'Create blank observation' }}
                                </option>
                            </select>
                            <div class="muted-mini mt-1">
                                {{ translations.creation_mode_hint ?? 'Cloning speeds up entry by reusing last items and prices.' }}
                            </div>
                        </div>

                        <div class="col-12">
                            <label class="form-label">{{ translations.note ?? 'Note' }}</label>
                            <textarea class="form-control" id="observation_note" rows="2"
                                      placeholder="{{ translations.observation_note_placeholder ?? 'Optional note (e.g. promo week, new menu)…' }}"></textarea>
                        </div>
                    </div>

                    <div class="border rounded p-3 mt-3" style="background:rgba(0,0,0,.02); border-color: rgba(0,0,0,.06)!important;">
                        <div class="fw-semibold">{{ translations.what_happens_next ?? 'What happens next?' }}</div>
                        <div class="muted-mini mt-1">
                            • {{ translations.next_step_edit_items ?? 'After creating, you will edit items and update prices.' }}<br>
                            • {{ translations.next_step_promos ?? 'Mark promos and capture promo prices if available.' }}
                        </div>
                    </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="createObservationBtn">
                        <i class="bi bi-plus"></i> {{ translations.create ?? 'Create' }}
                    </button>
                </div>

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

{% endblock %}

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

            const competitorId = "{{ competitor.getId() }}";

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

            // modal
            const createModalEl = document.getElementById('createObservationModal');
            const createModal = new bootstrap.Modal(createModalEl);

            document.getElementById('openCreateObservationBtn')?.addEventListener('click', () => {
                createModal.show();
            });

            document.getElementById('createObservationBtn')?.addEventListener('click', async () => {
                const observedAt = document.getElementById('observed_at')?.value || null;
                const mode = document.getElementById('creation_mode')?.value || 'clone';
                const notes = (document.getElementById('observation_note')?.value || '').trim() || null;

                const payload = { observed_at: observedAt, notes };

                let resp;
                if (mode === 'clone') {
                    resp = await apiPost(`/ajax/benchmarks/competitors/${competitorId}/observations/clone-last`, payload);
                } else {
                    resp = await apiPost(`/ajax/benchmarks/competitors/${competitorId}/observations`, payload);
                }

                if (resp?.success || resp?.ok) {
                    const newId = resp.data?.id || resp.observation_id || resp.id;
                    Swal.fire({
                        icon: 'success',
                        title: '{{ translations.success ?? 'Success' }}',
                        text: '{{ translations.observation_created ?? 'Observation created' }}',
                        timer: 900,
                        showConfirmButton: false
                    });

                    // ✅ redirect to items edit (consistent with cards)
                    if (newId) {
                        setTimeout(() => location.href = `{{ root }}/benchmarks/observations/${newId}/items`, 250);
                    } else {
                        setTimeout(() => location.reload(), 250);
                    }
                } else {
                    Swal.fire({
                        icon: 'error',
                        title: '{{ translations.error ?? 'Error' }}',
                        text: resp?.message || '{{ translations.undefined_error_occurred ?? 'undefined_error_occurred' }}'
                    });
                }
            });

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

                const sure = await Swal.fire({
                    icon: 'warning',
                    title: '{{ translations.confirm ?? 'Confirm' }}',
                    text: '{{ translations.delete_observation_confirm ?? 'Delete observation? This will remove all its items.' }}',
                    showCancelButton: true,
                    confirmButtonText: '{{ translations.delete ?? 'Delete' }}',
                    cancelButtonText: '{{ translations.cancel ?? 'Cancel' }}'
                });
                if (!sure.isConfirmed) return;

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

                if (resp?.success || resp?.ok) {
                    Swal.fire({
                        icon: 'success',
                        title: '{{ translations.deleted ?? 'Deleted' }}',
                        timer: 900,
                        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
            const searchInp = document.getElementById('obsSearch');
            const filterSel = document.getElementById('obsFilter');
            const clearBtn  = document.getElementById('obsClearBtn');
            const grid      = document.getElementById('obsGrid');

            function applyFilters(){
                if (!grid) return;

                const q = (searchInp?.value || "").trim().toLowerCase();
                const f = filterSel?.value || 'all';

                grid.querySelectorAll('.obs-item').forEach(item => {
                    const text = (item.getAttribute('data-search') || "").toLowerCase();
                    const promos = Number(item.getAttribute('data-promos') || 0);
                    const avgDiscount = Number(item.getAttribute('data-avg_discount') || 0);
                    const pricing = Number(item.getAttribute('data-pricing') || 0);

                    const okText = (!q || text.includes(q));

                    let okFilter = true;
                    if (f === 'has_promos') okFilter = (promos > 0);
                    if (f === 'high_discount') okFilter = (avgDiscount >= 20);   // próg możesz zmienić
                    if (f === 'low_pricing') okFilter = (pricing < 100);

                    item.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 %}