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

{% block title %}{{ translations.benchmark_my_products_analysis ?? 'My products price analysis' }}{% endblock %}

{% block head %}
    <style>
        .kpi-card { border-radius: 18px; border: 1px solid rgba(0,0,0,.06); }
        .kpi-value { font-size: 1.35rem; font-weight: 800; line-height: 1.05; }
        .kpi-label { color: #6c757d; font-size: .88rem; }

        .chip {
            display: inline-flex; align-items: center; gap: 6px;
            padding: .35rem .6rem; border-radius: 999px;
            border: 1px solid rgba(0,0,0,.08);
            background: rgba(255,255,255,.9);
            font-size: .82rem; font-weight: 600;
            white-space: nowrap;
        }

        .soft { background: rgba(255,255,255,.92); }
        .muted { color: #6c757d; }
        .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }

        .row-card {
            border-radius: 18px;
            border: 1px solid rgba(0,0,0,.07);
            box-shadow: 0 6px 24px rgba(0,0,0,.04);
            overflow: hidden;
        }

        .row-card-header {
            background: linear-gradient(0deg, rgba(255,255,255,.96), rgba(255,255,255,.96));
            border-bottom: 1px solid rgba(0,0,0,.06);
        }

        .price-badge {
            font-weight: 800;
            border-radius: 999px;
            padding: .2rem .5rem;
            font-size: .82rem;
            border: 1px solid rgba(0,0,0,.08);
            background: rgba(255,255,255,.95);
        }

        .gap-up { color: #0d6efd; font-weight: 800; }
        .gap-down { color: #dc3545; font-weight: 800; }
        .gap-zero { color: #198754; font-weight: 800; }

        .small-note { font-size: .9rem; color: #6c757d; }

        /* ===== Filters bar ===== */
        .filters-bar{
            border-radius: 18px;
            border: 1px solid rgba(0,0,0,.06);
            background: rgba(255,255,255,.92);
            backdrop-filter: blur(8px);
        }



    </style>
{% endblock %}

{% block page_heading %}
    <div class="page-heading">
        <h3 class="mb-1">{{ translations.benchmark_my_products_analysis ?? 'My products price analysis' }}</h3>
        <p class="text-subtitle text-muted mb-0">
            {{ translations.period ?? 'Period' }}:
            <span class="mono">{{ date_from }}</span> → <span class="mono">{{ date_to }}</span>
            {% if analyse and analyse.getKpi and analyse.getKpi().getLastObservationDate %}
                • {{ translations.last_observation ?? 'Last observation' }}: <span class="mono">{{ analyse.getKpi().getLastObservationDate() }}</span>
            {% endif %}
        </p>
    </div>
{% endblock %}

{% block content %}
    {% set kpi = analyse.getKpi() %}
    {% set products = analyse.getProducts() %}
    {% set breakdown = breakdown %}

    {# --- helpers: formatowanie --- #}
    {% macro money(v) %}
        {% if v is null %}<span class="muted">—</span>{% else %}€ {{ v|number_format(2, '.', ' ') }}{% endif %}
    {% endmacro %}
    {% macro perc(v) %}
        {% if v is null %}<span class="muted">—</span>{% else %}{{ v|number_format(2, '.', ' ') }}%{% endif %}
    {% endmacro %}
    {% macro gapClass(v) %}
        {% if v is null %}gap-zero{% elseif v > 0 %}gap-up{% elseif v < 0 %}gap-down{% else %}gap-zero{% endif %}
    {% endmacro %}

    {% import _self as fmt %}


    {# --- INSIGHTS + INFO CARDS OBOK --- #}
    <div class="row g-3 mb-3 align-items-stretch">
        <div class="col-12 col-xl-8">
            <div class="card row-card h-100">
                <div class="card-header row-card-header">
                    <div class="d-flex justify-content-between align-items-center flex-wrap gap-2">
                        <div>
                            <div class="fw-bold">{{ translations.insights ?? 'Insights' }}</div>
                            <div class="small-note">
                                {{ translations.insights_hint ?? 'Quick overview: biggest overpricing / underpricing vs competitor minimum.' }}
                            </div>
                        </div>
                        <div class="d-flex gap-2 flex-wrap">
                            <span class="chip">{{ translations.products ?? 'Products' }}: <strong>{{ products|length }}</strong></span>
                            <span class="chip">{{ translations.breakdown_rows ?? 'Breakdown rows' }}: <strong>{{ breakdown|length }}</strong></span>
                        </div>
                    </div>
                </div>

                <div class="card-body">
                    {% set topOver = [] %}
                    {% set topUnder = [] %}

                    {% for p in products %}
                        {% if p.getGapVsMinPercent() is not null %}
                            {% if p.getGapVsMinPercent() < 0 %}
                                {% set topOver = topOver|merge([p]) %}
                            {% elseif p.getGapVsMinPercent() > 0 %}
                                {% set topUnder = topUnder|merge([p]) %}
                            {% endif %}
                        {% endif %}
                    {% endfor %}

                    <div class="row g-3">
                        <div class="col-12 col-lg-6">
                            <div class="fw-bold mb-2 text-danger">{{ translations.top_overpriced ?? 'Top overpriced vs competitor minimum' }}</div>
                            <div class="small-note mb-2">{{ translations.top_overpriced_hint ?? 'Most negative gap_vs_min_percent.' }}</div>

                            {% if topOver|length == 0 %}
                                <div class="muted">{{ translations.no_data ?? 'No data' }}</div>
                            {% else %}
                                <div class="list-group">
                                    {% for p in topOver|slice(0,5) %}
                                        <div class="list-group-item d-flex justify-content-between align-items-start gap-3">
                                            <div>
                                                <div class="fw-bold">{{ p.getMyProductName() }}</div>
                                                <div class="small-note">
                                                    #{{ p.getMyProductId() }} • {{ translations.last_seen ?? 'Last seen' }}: <span class="mono">{{ p.getLastSeen() }}</span>
                                                </div>
                                            </div>
                                            <div class="text-end">
                                                <div class="gap-down">{{ fmt.perc(p.getGapVsMinPercent()) }}</div>
                                                <div class="small-note">{{ fmt.money(p.getGapVsMinAmount()) }}</div>
                                            </div>
                                        </div>
                                    {% endfor %}
                                </div>
                            {% endif %}
                        </div>

                        <div class="col-12 col-lg-6">
                            <div class="fw-bold mb-2 text-primary">{{ translations.top_underpriced ?? 'Top underpriced vs competitor minimum' }}</div>
                            <div class="small-note mb-2">{{ translations.top_underpriced_hint ?? 'Most positive gap_vs_min_percent.' }}</div>

                            {% if topUnder|length == 0 %}
                                <div class="muted">{{ translations.no_data ?? 'No data' }}</div>
                            {% else %}
                                <div class="list-group">
                                    {% for p in topUnder|slice(0,5) %}
                                        <div class="list-group-item d-flex justify-content-between align-items-start gap-3">
                                            <div>
                                                <div class="fw-bold">{{ p.getMyProductName() }}</div>
                                                <div class="small-note">
                                                    #{{ p.getMyProductId() }} • {{ translations.last_seen ?? 'Last seen' }}: <span class="mono">{{ p.getLastSeen() }}</span>
                                                </div>
                                            </div>
                                            <div class="text-end">
                                                <div class="gap-up">{{ fmt.perc(p.getGapVsMinPercent()) }}</div>
                                                <div class="small-note">{{ fmt.money(p.getGapVsMinAmount()) }}</div>
                                            </div>
                                        </div>
                                    {% endfor %}
                                </div>
                            {% endif %}
                        </div>
                    </div>

                    <div class="alert alert-light border mt-3 mb-0">
                        <div class="small-note mb-1">
                            <strong>{{ translations.how_to_read ?? 'How to read' }}:</strong>
                            {{ translations.how_to_read_text ?? 'gap_vs_min is computed against the minimum competitor price observed for this product in the period. Breakdown below shows competitor-by-competitor gaps.' }}
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {# ✅ Cards z pojedynczymi informacjami obok Insights — wersja PRO (Mazer vibe) #}
        <div class="col-12 col-xl-4">
            <style>
                .info-card{
                    border-radius:18px;
                    border: 1px solid rgba(0,0,0,.06);
                    background: rgba(255,255,255,.96);
                    box-shadow: 0 10px 28px rgba(0,0,0,.04);
                    overflow: hidden;
                }
                .info-card .info-head{
                    padding: .9rem 1rem .55rem 1rem;
                    display:flex; align-items:center; justify-content:space-between;
                    border-bottom: 1px solid rgba(0,0,0,.06);
                    background: linear-gradient(0deg, rgba(255,255,255,.98), rgba(255,255,255,.98));
                }
                .info-card .info-body{ padding: .95rem 1rem 1.05rem 1rem; }
                .info-icon{
                    width:44px; height:44px;
                    border-radius:14px;
                    display:flex; align-items:center; justify-content:center;
                    border: 1px solid rgba(0,0,0,.06);
                    background: rgba(13,110,253,.08);
                    color: #0d6efd;
                    flex: 0 0 auto;
                }
                .info-icon.green{ background: rgba(25,135,84,.10); color:#198754; }
                .info-icon.orange{ background: rgba(255,193,7,.15); color:#b58100; }
                .info-icon.gray{ background: rgba(108,117,125,.10); color:#6c757d; }

                .info-title{
                    font-weight: 800;
                    letter-spacing: .2px;
                    margin: 0;
                }
                .info-sub{
                    color:#6c757d;
                    font-size:.85rem;
                    margin-top:.2rem;
                    line-height:1.2;
                }
                .info-value{
                    font-weight: 900;
                    font-size: 1.55rem;
                    line-height: 1.05;
                }
                .info-meta{
                    color:#6c757d;
                    font-size:.85rem;
                    margin-top:.55rem;
                    display:flex;
                    gap:.5rem;
                    flex-wrap: wrap;
                    align-items:center;
                }
                .mini-pill{
                    display:inline-flex;
                    align-items:center;
                    gap:.35rem;
                    padding:.22rem .55rem;
                    border-radius: 999px;
                    border:1px solid rgba(0,0,0,.08);
                    background: rgba(0,0,0,.02);
                    font-size:.8rem;
                    font-weight:700;
                    white-space: nowrap;
                }
                .mini-pill .mono{ font-variant-numeric: tabular-nums; }
            </style>

            <div class="row g-3">

                {# Products #}
                <div class="col-12 col-md-6 col-xl-12">
                    <div class="info-card h-100">
                        <div class="info-head">
                            <div class="d-flex align-items-center gap-2">
                                <div class="info-icon">
                                    <i class="bi bi-box-seam"></i>
                                </div>
                                <div>
                                    <div class="info-title">{{ translations.products ?? 'Products' }}</div>
                                    <div class="info-sub">{{ translations.products_hint_short ?? 'Products in analysis.' }}</div>
                                </div>
                            </div>
                            <span class="mini-pill">
                        <i class="bi bi-graph-up"></i>
                        {{ translations.tracked ?? 'Tracked' }}
                    </span>
                        </div>
                        <div class="info-body">
                            <div class="d-flex align-items-end justify-content-between">
                                <div class="info-value">{{ products|length }}</div>
                                <div class="text-end small-note">
                                    {{ translations.tracked_products ?? 'Tracked products' }}:
                                    <span class="fw-bold">{{ kpi.getTrackedProducts() }}</span>
                                </div>
                            </div>
                            <div class="info-meta">
                        <span class="mini-pill">
                            <i class="bi bi-collection"></i>
                            {{ translations.comparisons ?? 'Comparisons' }}:
                            <span class="mono">{{ kpi.getComparisonsCount() }}</span>
                        </span>
                                <span class="mini-pill">
                            <i class="bi bi-people"></i>
                            {{ translations.competitors ?? 'Competitors' }}:
                            <span class="mono">{{ kpi.getCoveredCompetitors() }}</span>
                        </span>
                            </div>
                        </div>
                    </div>
                </div>

                {# Breakdown rows #}
                <div class="col-12 col-md-6 col-xl-12">
                    <div class="info-card h-100">
                        <div class="info-head">
                            <div class="d-flex align-items-center gap-2">
                                <div class="info-icon orange">
                                    <i class="bi bi-diagram-3"></i>
                                </div>
                                <div>
                                    <div class="info-title">{{ translations.breakdown_rows ?? 'Breakdown rows' }}</div>
                                    <div class="info-sub">{{ translations.breakdown_rows_hint ?? 'Rows used for competitor comparisons.' }}</div>
                                </div>
                            </div>
                            <span class="mini-pill">
                        <i class="bi bi-table"></i>
                        {{ translations.rows ?? 'Rows' }}
                    </span>
                        </div>
                        <div class="info-body">
                            <div class="d-flex align-items-end justify-content-between">
                                <div class="info-value">{{ breakdown|length }}</div>
                                <div class="text-end small-note">
                                    {{ translations.avg_gap_percent ?? 'Avg gap %' }}:
                                    <span class="fw-bold">{{ fmt.perc(kpi.getAvgGapPercent()) }}</span>
                                </div>
                            </div>
                            <div class="info-meta">
                        <span class="mini-pill">
                            <i class="bi bi-check2-circle"></i>
                            {{ translations.used ?? 'Used' }}:
                            <span class="mono">{{ kpi.getComparisonsCount() }}</span>
                        </span>
                                <span class="mini-pill">
                            <i class="bi bi-shield-check"></i>
                            {{ translations.coverage ?? 'Coverage' }}:
                            <span class="mono">{{ kpi.getCoveredCompetitors() }}</span>
                        </span>
                            </div>
                        </div>
                    </div>
                </div>

                {# Freshness #}
                <div class="col-12 col-md-6 col-xl-12">
                    <div class="info-card h-100">
                        <div class="info-head">
                            <div class="d-flex align-items-center gap-2">
                                <div class="info-icon green">
                                    <i class="bi bi-activity"></i>
                                </div>
                                <div>
                                    <div class="info-title">{{ translations.freshness ?? 'Freshness' }}</div>
                                    <div class="info-sub">{{ translations.freshness_hint ?? 'Days since last observation.' }}</div>
                                </div>
                            </div>
                            <span class="mini-pill">
                        <i class="bi bi-clock-history"></i>
                        {{ translations.days ?? 'days' }}
                    </span>
                        </div>
                        <div class="info-body">
                            <div class="d-flex align-items-end justify-content-between">
                                <div class="info-value">{{ kpi.getFreshnessDays() }}</div>
                                <div class="text-end small-note">
                                    {{ translations.last_observation ?? 'Last observation' }}
                                </div>
                            </div>
                            <div class="info-meta">
                        <span class="mini-pill">
                            <i class="bi bi-calendar3"></i>
                            <span class="mono">{{ kpi.getLastObservationDate() }}</span>
                        </span>
                                <span class="mini-pill">
                            <i class="bi bi-arrow-repeat"></i>
                            {{ translations.period ?? 'Period' }}:
                            <span class="mono">{{ date_from }}</span>→<span class="mono">{{ date_to }}</span>
                        </span>
                            </div>
                        </div>
                    </div>
                </div>

                {# Last observation (date focus) #}
                <div class="col-12 col-md-6 col-xl-12">
                    <div class="info-card h-100">
                        <div class="info-head">
                            <div class="d-flex align-items-center gap-2">
                                <div class="info-icon gray">
                                    <i class="bi bi-calendar-check"></i>
                                </div>
                                <div>
                                    <div class="info-title">{{ translations.last_observation ?? 'Last observation' }}</div>
                                    <div class="info-sub">{{ translations.last_observation_hint ?? 'Last usable observation date.' }}</div>
                                </div>
                            </div>
                            <span class="mini-pill">
                        <i class="bi bi-pin-map"></i>
                        {{ translations.source ?? 'Source' }}
                    </span>
                        </div>
                        <div class="info-body">
                            <div class="d-flex align-items-end justify-content-between">
                                <div class="info-value mono" style="font-size:1.20rem;">
                                    {{ kpi.getLastObservationDate() }}
                                </div>
                                <div class="text-end small-note">
                                    {{ translations.covered_competitors ?? 'Covered competitors' }}:
                                    <span class="fw-bold">{{ kpi.getCoveredCompetitors() }}</span>
                                </div>
                            </div>
                            <div class="info-meta">
                        <span class="mini-pill">
                            <i class="bi bi-lightning-charge"></i>
                            {{ translations.freshness ?? 'Freshness' }}:
                            <span class="mono">{{ kpi.getFreshnessDays() }}</span> {{ translations.days ?? 'days' }}
                        </span>
                                <span class="mini-pill">
                            <i class="bi bi-clipboard-data"></i>
                            {{ translations.comparisons ?? 'Comparisons' }}:
                            <span class="mono">{{ kpi.getComparisonsCount() }}</span>
                        </span>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>

    </div>

    {# ✅ FILTERS przeniesione między Insights a tabelę Products (poziomo, szerokość jak tabela) #}
    <div class="card row-card filters-bar mb-3">
        <div class="card-body">
            <div class="d-flex justify-content-between align-items-center flex-wrap gap-2 mb-2">
                <div class="fw-bold">{{ translations.filters ?? 'Filters' }}</div>
                <button class="btn btn-sm btn-light" type="button" id="resetFilters">
                    {{ translations.reset ?? 'Reset' }}
                </button>
            </div>

            <div class="row g-2 align-items-end">
                <div class="col-12 col-md-6 col-lg-5">
                    <label class="form-label mb-1">{{ translations.search ?? 'Search' }}</label>
                    <input type="text"
                           class="form-control"
                           id="searchInput"
                           placeholder="{{ translations.search_products ?? 'Search products by name or ID…' }}">
                </div>

                <div class="col-12 col-md-6 col-lg-4">
                    <label class="form-label mb-1">{{ translations.gap_filter ?? 'Gap filter' }}</label>
                    <select class="form-select" id="gapFilter">
                        <option value="all">{{ translations.all ?? 'All' }}</option>
                        <option value="negative">{{ translations.my_price_higher ?? 'My price higher than competitor (negative gap)' }}</option>
                        <option value="positive">{{ translations.my_price_lower ?? 'My price lower than competitor (positive gap)' }}</option>
                        <option value="zero">{{ translations.same_price ?? 'Same price (0 gap)' }}</option>
                    </select>
                </div>

                <div class="col-12 col-md-6 col-lg-2">
                    <label class="form-label mb-1">{{ translations.min_comparisons ?? 'Min comparisons' }}</label>
                    <input type="number" class="form-control" id="minComparisons" min="0" value="0">
                </div>

                <div class="col-12 col-md-6 col-lg-1 d-flex justify-content-lg-end">
                    <button class="btn btn-outline-secondary w-100" type="button" id="applyFiltersBtn" title="{{ translations.apply ?? 'Apply' }}">
                        <i class="bi bi-funnel"></i>
                    </button>
                </div>
            </div>

            <div class="small-note mt-2">
                {{ translations.gap_explained ?? 'Gap is computed as (competitor - my). Negative means you are more expensive.' }}
            </div>
        </div>
    </div>

    {# --- Products table --- #}
    <div class="card row-card mb-3">
        <div class="card-header row-card-header">
            <div class="d-flex justify-content-between align-items-start flex-wrap gap-2">
                <div>
                    <div class="fw-bold">{{ translations.products ?? 'Products' }}</div>
                    <div class="small-note">
                        {{ translations.products_hint ?? 'Complete product list with competitor min/avg/max and gap vs min. Click a row to view competitor breakdown.' }}
                    </div>
                </div>
            </div>
        </div>

        <div class="card-body">
            <div>
                <table class="table table-hover align-middle text-sm" id="productsTable" style="font-size: 0.7rem">
                    {# ✅ colgroup + table-layout: fixed = stabilne szerokości #}
                    <colgroup>
                        <col style="width:28%">
                        <col style="width:8%">
                        <col style="width:8%">
                        <col style="width:8%">
                        <col style="width:8%">
                        <col style="width:8%">
                        <col style="width:8%">
                        <col style="width:8%">
                        <col style="width:8%">
                        <col style="width:8%">
                    </colgroup>

                    <thead>
                    <tr>
                        <th>{{ translations.product ?? 'Product' }}</th>
                        <th class="text-end">{{ translations.my_price ?? 'My price' }}</th>
                        <th class="text-end">{{ translations.comp_min ?? 'Comp. min' }}</th>
                        <th class="text-end">{{ translations.comp_avg ?? 'Comp. avg' }}</th>
                        <th class="text-end">{{ translations.comp_max ?? 'Comp. max' }}</th>
                        <th class="text-center">{{ translations.competitors ?? 'Competitors' }}</th>
                        <th class="text-center">{{ translations.comparisons ?? 'Comparisons' }}</th>
                        <th class="text-center">{{ translations.promo_hits ?? 'Promo hits' }}</th>
                        <th>{{ translations.last_seen ?? 'Last seen' }}</th>
                        <th class="text-end">{{ translations.gap_vs_min ?? 'Gap vs min' }}</th>
                    </tr>
                    </thead>

                    <tbody>
                    {% for p in products %}
                        {% set gapPerc = p.getGapVsMinPercent() %}
                        {% set gapAmt  = p.getGapVsMinAmount() %}
                        {% set gapCls  = fmt.gapClass(gapAmt) %}

                        <tr class="product-row"
                            data-product-id="{{ p.getMyProductId() }}"
                            data-product-name="{{ p.getMyProductName()|e }}"
                            data-gap="{{ gapAmt ?? '' }}"
                            data-comparisons="{{ p.getComparisonsCount() }}"
                        >
                            <td>
                                <div class="d-flex align-items-start gap-3">
                                    <div class="flex-grow-1">
                                        <div class="fw-bold">{{ p.getMyProductName() }}</div>
                                        <div class="small-note">
                                            <span class="mono">#{{ p.getMyProductId() }}</span>
                                            {% if p.getMissingProductRow() %}
                                                • <span class="text-warning fw-bold">{{ translations.missing_product_row ?? 'Missing product row' }}</span>
                                            {% endif %}
                                            {% if p.getMissingMyPriceSource() %}
                                                • <span class="text-warning fw-bold">{{ translations.missing_my_price_source ?? 'Missing my price source' }}</span>
                                            {% endif %}
                                        </div>
                                    </div>
                                    <div class="ms-auto flex-shrink-0">
                                        <button class="btn btn-sm btn-light"
                                                style="font-size: 0.7rem"
                                                type="button"
                                                data-bs-toggle="collapse"
                                                data-bs-target="#bd_{{ p.getMyProductId() }}"
                                                aria-expanded="false"
                                                aria-controls="bd_{{ p.getMyProductId() }}">
                                            <i class="bi bi-bar-chart-steps me-1"></i>
                                            {{ translations.breakdown ?? 'Breakdown' }}
                                        </button>
                                    </div>
                                </div>
                            </td>

                            <td class="text-end"><span class="price-badge" style="font-size: 0.7rem">{{ fmt.money(p.getMyPrice()) }}</span></td>
                            <td class="text-end">{{ fmt.money(p.getCompetitorMinPrice()) }}</td>
                            <td class="text-end">{{ fmt.money(p.getCompetitorAvgPrice()) }}</td>
                            <td class="text-end">{{ fmt.money(p.getCompetitorMaxPrice()) }}</td>

                            <td class="text-center"><span class="chip" style="font-size: 0.7rem">{{ p.getCompetitorsCount() }}</span></td>
                            <td class="text-center"><span class="chip" style="font-size: 0.7rem">{{ p.getComparisonsCount() }}</span></td>

                            <td class="text-center">
                                {% if p.getPromoHits() > 0 %}
                                    <span class="chip" style="font-size: 0.7rem"><i class="bi bi-tag-fill text-warning"></i> {{ p.getPromoHits() }}</span>
                                {% else %}
                                    <span class="muted">0</span>
                                {% endif %}
                            </td>

                            <td><span class="mono">{{ p.getLastSeen() }}</span></td>

                            <td class="text-end">
                                <div class="{{ gapCls }}">{{ fmt.perc(gapPerc) }}</div>
                                <div class="small-note {{ gapCls }}">{{ fmt.money(gapAmt) }}</div>
                            </td>
                        </tr>

                        {# --- Breakdown collapse for this product --- #}
                        <tr class="collapse-row">
                            <td colspan="10" class="p-0 border-0">
                                <div class="collapse" id="bd_{{ p.getMyProductId() }}">
                                    <div class="p-3 border-top soft">
                                        <div class="d-flex justify-content-between align-items-center flex-wrap gap-2 mb-2">
                                            <div>
                                                <div class="fw-bold">
                                                    {{ translations.competitor_breakdown ?? 'Competitor breakdown' }}
                                                    <span class="muted">— {{ p.getMyProductName() }}</span>
                                                </div>
                                                <div class="small-note">
                                                    {{ translations.breakdown_hint ?? 'Gap = (competitor - my). Positive means competitor is more expensive. Negative means you are more expensive.' }}
                                                </div>
                                            </div>
                                            <span class="chip">
                                                {{ translations.my_price ?? 'My price' }}: <strong>{{ fmt.money(p.getMyPrice()) }}</strong>
                                            </span>
                                        </div>

                                        <div class="table-responsive">
                                            <table class="table table-sm align-middle mb-0">
                                                <thead>
                                                <tr>
                                                    <th>{{ translations.competitor ?? 'Competitor' }}</th>
                                                    <th>{{ translations.last_seen ?? 'Last seen' }}</th>
                                                    <th class="text-end">{{ translations.competitor_price_used ?? 'Competitor price' }}</th>
                                                    <th class="text-end">{{ translations.my_price ?? 'My price' }}</th>
                                                    <th class="text-end">{{ translations.gap ?? 'Gap' }}</th>
                                                </tr>
                                                </thead>
                                                <tbody>
                                                {% set hasRows = false %}
                                                {% for b in breakdown %}
                                                    {% if b.getMyProductId() == p.getMyProductId() %}
                                                        {% set hasRows = true %}
                                                        {% set cls = fmt.gapClass(b.getGapAmount()) %}
                                                        <tr>
                                                            <td>
                                                                <div class="fw-bold">{{ b.getCompetitorName() }}</div>
                                                                <div class="small-note">#{{ b.getCompetitorId() }}</div>
                                                            </td>
                                                            <td><span class="mono">{{ b.getLastSeen() }}</span></td>
                                                            <td class="text-end">{{ fmt.money(b.getCompetitorPriceUsed()) }}</td>
                                                            <td class="text-end">{{ fmt.money(b.getMyPrice()) }}</td>
                                                            <td class="text-end">
                                                                <div class="{{ cls }}">{{ fmt.perc(b.getGapPercent()) }}</div>
                                                                <div class="small-note {{ cls }}">{{ fmt.money(b.getGapAmount()) }}</div>
                                                            </td>
                                                        </tr>
                                                    {% endif %}
                                                {% endfor %}

                                                {% if not hasRows %}
                                                    <tr>
                                                        <td colspan="5" class="muted">
                                                            {{ translations.no_breakdown_for_product ?? 'No breakdown rows found for this product.' }}
                                                        </td>
                                                    </tr>
                                                {% endif %}
                                                </tbody>
                                            </table>
                                        </div>

                                    </div>
                                </div>
                            </td>
                        </tr>
                    {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
{% endblock %}

{% block scripts %}
    <script>
        (function(){
            const searchInput     = document.getElementById('searchInput');
            const gapFilter       = document.getElementById('gapFilter');
            const minComparisons  = document.getElementById('minComparisons');
            const resetBtn        = document.getElementById('resetFilters');
            const applyBtn        = document.getElementById('applyFiltersBtn');

            const productRows = Array.from(document.querySelectorAll('#productsTable tbody tr.product-row'));

            function parseNum(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;
            }

            function applyFilters(){
                const q    = (searchInput.value || '').trim().toLowerCase();
                const gf   = gapFilter.value;
                const minC = parseInt(minComparisons.value || '0', 10) || 0;

                productRows.forEach(tr => {
                    const pid   = (tr.getAttribute('data-product-id') || '').toLowerCase();
                    const name  = (tr.getAttribute('data-product-name') || '').toLowerCase();
                    const gap   = parseNum(tr.getAttribute('data-gap'));
                    const comps = parseInt(tr.getAttribute('data-comparisons') || '0', 10) || 0;

                    let ok = true;

                    if (q) ok = (pid.includes(q) || name.includes(q));
                    if (ok && comps < minC) ok = false;

                    if (ok && gf !== 'all') {
                        if (gap === null) ok = false;
                        else if (gf === 'negative' && !(gap < 0)) ok = false;
                        else if (gf === 'positive' && !(gap > 0)) ok = false;
                        else if (gf === 'zero' && !(gap === 0)) ok = false;
                    }

                    tr.style.display = ok ? '' : 'none';

                    // ukryj też collapse-row (jest bezpośrednio po product-row)
                    const next = tr.nextElementSibling;
                    if (next && next.classList.contains('collapse-row')) {
                        next.style.display = ok ? '' : 'none';
                    }
                });
            }

            function resetFilters(){
                searchInput.value = '';
                gapFilter.value = 'all';
                minComparisons.value = '0';
                applyFilters();
            }

            // live filtering
            [searchInput, gapFilter, minComparisons].forEach(el => {
                el.addEventListener('input', applyFilters);
                el.addEventListener('change', applyFilters);
            });

            // optional manual "apply" button
            applyBtn?.addEventListener('click', applyFilters);

            resetBtn.addEventListener('click', resetFilters);

            applyFilters();
        })();
    </script>
{% endblock %}