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

{% block title %}{{ translations.benchmark_competitors ?? 'Benchmark: Competitors' }}{% 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; }
        .competitor-card{ transition: transform .08s ease, box-shadow .08s ease; }
        .competitor-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);
        }
        .mono{ font-variant-numeric: tabular-nums; }

        .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.competitors ?? 'Competitors' }}</h3>
        <p class="text-subtitle text-muted">{{ translations.benchmark_competitors_subtitle ?? 'Manage your competitor list and keep price snapshots organized.' }}</p>
    </div>
{% endblock %}

{% block content %}

    {% set totalAll = competitors|length %}
    {% set totalActive = 0 %}
    {% for c in competitors %}
        {% if c.isActive() %}{% set totalActive = totalActive + 1 %}{% endif %}
    {% endfor %}

    <div class="row g-4">

        <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>
                            <div class="d-flex align-items-center gap-2 flex-wrap">
                                <h4 class="mb-0">{{ translations.competitors ?? 'Competitors' }}</h4>
                                <span class="badge bg-light text-dark chip">
                                    <i class="bi bi-collection me-1"></i>
                                    {{ translations.total ?? 'Total' }}: <span class="mono">{{ totalAll }}</span>
                                </span>
                                <span class="badge bg-success chip">
                                    <i class="bi bi-check2-circle me-1"></i>
                                    {{ translations.active ?? 'Active' }}: <span class="mono">{{ totalActive }}</span>
                                </span>
                            </div>
                            <div class="muted-mini mt-2">
                                <i class="bi bi-lightbulb me-1"></i>
                                {{ translations.benchmark_competitors_hint ?? 'Keep 3–8 key competitors. Add observations weekly or after a price change.' }}
                            </div>
                        </div>

                        <div class="d-flex gap-2 flex-wrap">
                            <button class="btn btn-primary" id="openCreateCompetitorBtn">
                                <i class="bi bi-plus"></i> {{ translations.add_competitor ?? 'Add competitor' }}
                            </button>
                        </div>
                    </div>

                    <div class="row g-3 mt-3">
                        <div class="col-12 col-lg-6">
                            <label class="form-label">{{ translations.search ?? 'Search' }}</label>
                            <input type="text" class="form-control" id="competitorSearch"
                                   placeholder="{{ translations.search_competitors_placeholder ?? 'Search by name, city or notes…' }}">
                            <div class="muted-mini mt-1">
                                {{ translations.search_competitors_hint ?? 'Type to filter the list instantly.' }}
                            </div>
                        </div>
                        <div class="col-12 col-lg-6 d-flex align-items-end justify-content-lg-end gap-2 flex-wrap">
                            <select class="form-select" id="activeFilter" style="max-width:260px;">
                                <option value="all">{{ translations.filter_all ?? 'All' }}</option>
                                <option value="active">{{ translations.active ?? 'Active' }}</option>
                                <option value="inactive">{{ translations.inactive ?? 'Inactive' }}</option>
                                <option value="needs_update">{{ translations.needs_update ?? 'Needs update' }}</option>
                            </select>
                            <button class="btn btn-outline-secondary" id="clearFiltersBtn">
                                <i class="bi bi-x-lg"></i> {{ translations.clear ?? 'Clear' }}
                            </button>
                        </div>
                    </div>

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

        <div class="col-12">
            {% if competitors 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_competitors_yet ?? 'No competitors yet. Add your first competitor.' }}
                        </div>
                    </div>
                </div>
            {% else %}
                <div class="row g-3" id="competitorsGrid">
                    {% for c in competitors %}

                        {% set obsCount = c.getObservationsCount() %}
                        {% set lastObservedAt = c.getLastObservedAt() %}
                        {% set daysSince = c.getDaysSinceLastObservation() %}
                        {% set needsUpdate = (daysSince is not null and daysSince > 7) ? 1 : 0 %}

                        {% set searchText = (c.getName() ~ ' ' ~ (c.getCity() ?? '') ~ ' ' ~ (c.getNotes() ?? '') ~ ' ' ~ (c.getType() ?? '') ~ ' ' ~ (lastObservedAt ?? ''))|lower %}

                        <div class="col-12 col-md-6 col-xl-4 competitor-item"
                             data-search="{{ searchText|e('html_attr') }}"
                             data-active="{{ c.isActive() ? '1' : '0' }}"
                             data-needs_update="{{ needsUpdate }}"
                             data-last="{{ lastObservedAt ?? '' }}">
                            <div class="p-3 soft-card competitor-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">
                                            <i class="bi bi-shop"></i>
                                        </div>

                                        <div>
                                            <div class="fw-semibold">{{ c.getName() }}</div>
                                            <div class="muted-mini mt-1">
                                                {% if c.getCity() %}<i class="bi bi-geo-alt me-1"></i>{{ c.getCity() }}{% endif %}
                                                {% if c.getDistanceKm() %}
                                                    <span class="mx-1">•</span>
                                                    <i class="bi bi-signpost me-1"></i><span class="mono">{{ c.getDistanceKm() }}</span> km
                                                {% endif %}
                                            </div>

                                            <div class="d-flex gap-2 flex-wrap mt-2">
                                                {% if c.getType() %}
                                                    <span class="badge bg-light text-dark chip">
                                                        <i class="bi bi-tag me-1"></i>{{ c.getType() }}
                                                    </span>
                                                {% endif %}

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

                                                {% if lastObservedAt %}
                                                    <span class="badge bg-light text-dark chip">
                                                        <i class="bi bi-calendar3 me-1"></i>{{ lastObservedAt }}
                                                    </span>
                                                {% endif %}

                                                {% if needsUpdate %}
                                                    <span class="pill-soft pill-warn">
                                                        <i class="bi bi-exclamation-triangle"></i>
                                                        {{ translations.needs_update ?? 'Needs update' }}
                                                    </span>
                                                {% endif %}
                                            </div>
                                        </div>
                                    </div>

                                    <div class="d-flex gap-1">
                                        <a class="btn btn-outline-primary btn-sm"
                                           href="{{ root }}/benchmarks/competitors/{{ c.getId() }}/observations"
                                           title="{{ translations.open ?? 'Open' }}">
                                            <i class="bi bi-arrow-right"></i>
                                        </a>

                                        <button class="btn btn-outline-secondary btn-sm editCompetitorBtn"
                                                title="{{ translations.edit ?? 'Edit' }}"
                                                data-id="{{ c.getId() }}"
                                                data-name="{{ c.getName()|e('html_attr') }}"
                                                data-type="{{ c.getType()|default('')|e('html_attr') }}"
                                                data-distance="{{ c.getDistanceKm()|default('') }}"
                                                data-city="{{ c.getCity()|default('')|e('html_attr') }}"
                                                data-notes="{{ c.getNotes()|default('')|e('html_attr') }}"
                                                data-active="{{ c.isActive() ? 1 : 0 }}">
                                            <i class="bi bi-pencil"></i>
                                        </button>

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

                                {% if c.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">{{ c.getNotes() }}</div>
                                    </div>
                                {% endif %}

                                <div class="row g-2 mt-3">
                                    <div class="col-6">
                                        <div class="mini-kpi p-2">
                                            <div class="text-muted small">{{ translations.observations ?? 'Observations' }}</div>
                                            <div class="fw-semibold mono">{{ obsCount }}</div>
                                        </div>
                                    </div>
                                    <div class="col-6">
                                        <div class="mini-kpi p-2">
                                            <div class="text-muted small">{{ translations.last_observation ?? 'Last' }}</div>
                                            <div class="fw-semibold mono">{{ lastObservedAt ?? '-' }}</div>
                                        </div>
                                    </div>
                                    <div class="col-12">
                                        <div class="mini-kpi p-2">
                                            <div class="text-muted small">{{ translations.days_since_last ?? 'Days since last' }}</div>
                                            <div class="fw-semibold mono">
                                                {% if daysSince is not null %}{{ daysSince }}{% else %}-{% endif %}
                                            </div>
                                        </div>
                                    </div>
                                </div>

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

    </div>

    {# ==========================
       MODAL: CREATE / EDIT
       ========================== #}
    <div class="modal fade" id="competitorModal" 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" id="competitorModalTitle">
                        {{ translations.add_competitor ?? 'Add competitor' }}
                    </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="competitor_id" value="">

                    <div class="row g-3">
                        <div class="col-12 col-md-6">
                            <label class="form-label">{{ translations.name ?? 'Name' }}</label>
                            <input class="form-control" id="competitor_name" type="text"
                                   placeholder="e.g. Bakery Royal" required>
                        </div>

                        <div class="col-12 col-md-6">
                            <label class="form-label">{{ translations.type ?? 'Type' }}</label>
                            <select class="form-select" id="competitor_type">
                                <option value="">{{ translations.select ?? 'Select' }}</option>
                                <option value="bakery">Bakery / Piekarnia</option>
                                <option value="confectionery">Confectionery / Cukiernia</option>
                                <option value="market">Market</option>
                                <option value="other">Other</option>
                            </select>
                        </div>

                        <div class="col-12 col-md-4">
                            <label class="form-label">{{ translations.city ?? 'City' }}</label>
                            <input class="form-control" id="competitor_city" type="text" placeholder="e.g. Nysa">
                        </div>

                        <div class="col-12 col-md-4">
                            <label class="form-label">{{ translations.distance ?? 'Distance' }} (km)</label>
                            <input class="form-control" id="competitor_distance" type="number" step="0.1" min="0">
                        </div>

                        <div class="col-12 col-md-4">
                            <label class="form-label">{{ translations.status ?? 'Status' }}</label>
                            <select class="form-select" id="competitor_active">
                                <option value="1">{{ translations.active ?? 'Active' }}</option>
                                <option value="0">{{ translations.inactive ?? 'Inactive' }}</option>
                            </select>
                        </div>

                        <div class="col-12">
                            <label class="form-label">{{ translations.notes ?? 'Notes' }}</label>
                            <textarea class="form-control" id="competitor_notes" rows="3"
                                      placeholder="{{ translations.competitor_notes_placeholder ?? 'Optional notes (e.g. strong sandwiches, good morning traffic)…' }}"></textarea>
                        </div>
                    </div>

                    <div class="text-muted small mt-3">
                        <i class="bi bi-info-circle"></i>
                        {{ translations.competitor_modal_hint ?? 'Tip: you can mark competitors as inactive instead of deleting to keep history.' }}
                    </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="saveCompetitorBtn">
                        <i class="bi bi-save"></i> {{ translations.save ?? 'Save' }}
                    </button>
                </div>

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

{% endblock %}

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

            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 modalEl = document.getElementById('competitorModal');
            const modal   = new bootstrap.Modal(modalEl);

            const openCreateBtn = document.getElementById('openCreateCompetitorBtn');
            const saveBtn       = document.getElementById('saveCompetitorBtn');

            const idInp   = document.getElementById('competitor_id');
            const nameInp = document.getElementById('competitor_name');
            const typeSel = document.getElementById('competitor_type');
            const cityInp = document.getElementById('competitor_city');
            const distInp = document.getElementById('competitor_distance');
            const actSel  = document.getElementById('competitor_active');
            const notesTa = document.getElementById('competitor_notes');

            function resetModal(){
                document.getElementById('competitorModalTitle').textContent = "{{ translations.add_competitor ?? 'Add competitor' }}";
                idInp.value = "";
                nameInp.value = "";
                typeSel.value = "";
                cityInp.value = "";
                distInp.value = "";
                actSel.value = "1";
                notesTa.value = "";
            }

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

            document.addEventListener('click', (e) => {
                const btn = e.target.closest('.editCompetitorBtn');
                if (!btn) return;

                document.getElementById('competitorModalTitle').textContent = "{{ translations.edit_competitor ?? 'Edit competitor' }}";

                idInp.value   = btn.dataset.id || "";
                nameInp.value = btn.dataset.name || "";
                typeSel.value = btn.dataset.type || "";
                cityInp.value = btn.dataset.city || "";
                distInp.value = btn.dataset.distance || "";
                notesTa.value = btn.dataset.notes || "";
                actSel.value  = btn.dataset.active || "1";

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

            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;
            };

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

                const payload = {
                    name: (nameInp.value || "").trim(),
                    type: typeSel.value || null,
                    city: (cityInp.value || "").trim() || null,
                    distance_km: toNumberOrNull(distInp.value),
                    is_active: Number(actSel.value || 1),
                    notes: (notesTa.value || "").trim() || null
                };

                if (!payload.name) {
                    Swal.fire({
                        icon: 'warning',
                        title: '{{ translations.error ?? 'Error' }}',
                        text: '{{ translations.name_required ?? 'Name is required' }}'
                    });
                    return;
                }

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

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

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

                const sure = await Swal.fire({
                    icon: 'warning',
                    title: '{{ translations.confirm ?? 'Confirm' }}',
                    text: '{{ translations.delete_competitor_confirm ?? 'Delete competitor?' }}',
                    showCancelButton: true,
                    confirmButtonText: '{{ translations.delete ?? 'Delete' }}',
                    cancelButtonText: '{{ translations.cancel ?? 'Cancel' }}'
                });

                if (!sure.isConfirmed) return;

                const resp = await apiDelete(`/ajax/benchmarks/competitors/${btn.dataset.id}`);
                if (resp?.success || resp?.ok) {
                    Swal.fire({
                        icon: 'success',
                        title: '{{ translations.deleted ?? 'Deleted' }}',
                        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' }}'
                    });
                }
            });

            // filters
            const searchInp = document.getElementById('competitorSearch');
            const activeSel = document.getElementById('activeFilter');
            const clearBtn  = document.getElementById('clearFiltersBtn');
            const grid      = document.getElementById('competitorsGrid');

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

                const q = (searchInp?.value || "").trim().toLowerCase();
                const act = activeSel?.value || "all";

                grid.querySelectorAll('.competitor-item').forEach(item => {
                    const text = (item.getAttribute('data-search') || "").toLowerCase();
                    const isActive = item.getAttribute('data-active') === '1';
                    const needsUpdate = item.getAttribute('data-needs_update') === '1';

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

                    let okAct = true;
                    if (act === 'active') okAct = isActive;
                    if (act === 'inactive') okAct = !isActive;
                    if (act === 'needs_update') okAct = needsUpdate;

                    item.style.display = (okText && okAct) ? '' : 'none';
                });
            }

            searchInp?.addEventListener('input', applyFilters);
            activeSel?.addEventListener('change', applyFilters);

            clearBtn?.addEventListener('click', () => {
                if (searchInp) searchInp.value = '';
                if (activeSel) activeSel.value = 'all';
                applyFilters();
            });

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