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

{% block title %}{{ translations.targets_metrics_title ?? 'Targety metryk' }} — {{ shop.getRepresentativeName() }}{% endblock %}

{% block page_heading %}
    <div class="page-heading">
        <h3>{{ translations.targets_metrics_title ?? 'Targety metryk' }}</h3>
        <p class="text-subtitle text-muted">{{ shop.getRepresentativeName() }}</p>
    </div>
{% endblock %}

{% block content %}

{# ── FILTR OKRESU ─────────────────────────────────────────────────────────── #}
<div class="card mb-3">
    <div class="card-body">
        <form method="GET" action="{{ root }}/shops/{{ shop.getId() }}/targets"
              class="row g-2 align-items-end">
            <div class="col-auto">
                <label class="form-label">{{ translations.year_label ?? 'Rok' }}</label>
                <select name="year" class="form-select form-select-sm">
                    {% for y in range(year - 1, year + 1) %}
                        <option value="{{ y }}" {{ y == year ? 'selected' : '' }}>{{ y }}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="col-auto">
                <label class="form-label">{{ translations.month_label ?? 'Miesiąc' }}</label>
                <select name="month" class="form-select form-select-sm">
                    {% for num, name in months %}
                        <option value="{{ num }}" {{ num == month ? 'selected' : '' }}>{{ name }}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="col-auto">
                <button type="submit" class="btn btn-secondary btn-sm">{{ translations.load ?? 'Wczytaj' }}</button>
            </div>
            <div class="col-auto ms-auto d-flex gap-2">
                <button type="button" id="btn-copy-shop" class="btn btn-outline-primary btn-sm">
                    <i class="bi bi-shop-window"></i>
                    {{ translations.copy_from_another_shop ?? 'Kopiuj z innego sklepu' }}
                </button>
                <button type="button" id="btn-copy" class="btn btn-outline-secondary btn-sm">
                    <i class="bi bi-clipboard-arrow-down"></i>
                    {{ translations.copy_from_previous_month ?? 'Kopiuj z poprzedniego miesiąca' }}
                </button>
            </div>
        </form>
    </div>
</div>

{# ── FORMULARZ TARGETÓW ──────────────────────────────────────────────────── #}
<div class="card">
    <div class="card-header d-flex align-items-center justify-content-between">
        <h4 class="card-title mb-0">
            {{ translations.targets ?? 'Targety' }} — {{ months[month] }} {{ year }}
        </h4>
        <button id="btn-save" class="btn btn-primary btn-sm">{{ translations.save_targets ?? 'Zapisz targety' }}</button>
    </div>
    <div class="card-body p-0">

        {# Makro wiersza metryki — translations przekazywane explicite (makra nie mają dostępu do zmiennych globalnych) #}
        {% macro metricRow(key, metric, adminTarget, consultantTarget, currency_symbol, translations) %}
            {% set col1 = adminTarget ? adminTarget.t1 : '' %}
            {% set col2 = adminTarget ? adminTarget.t2 : '' %}
            {% set col3 = adminTarget ? adminTarget.t3 : '' %}
            <tr data-metric="{{ key }}" data-lower="{{ metric.lower_is_better ? '1' : '0' }}">
                <td class="align-middle">
                    <strong>{{ metric.label }}</strong>
                    <br>
                    <small class="text-muted">
                        {% if metric.lower_is_better %}
                            <i class="bi bi-arrow-down-circle text-success"></i> {{ translations.lower_is_better ?? 'niższy = lepiej' }}
                        {% else %}
                            <i class="bi bi-arrow-up-circle text-primary"></i> {{ translations.higher_is_better ?? 'wyższy = lepiej' }}
                        {% endif %}
                        &nbsp;·&nbsp;
                        {% if metric.unit == 'pct' %}%
                        {% elseif metric.unit == 'amount' %}{{ currency_symbol }}
                        {% else %}{{ translations.unit_pcs ?? 'szt.' }}
                        {% endif %}
                    </small>
                    {% if key == 'net_margin_pct' %}
                    <br>
                    <small class="text-info" style="font-size:0.75em">
                        <i class="bi bi-info-circle"></i>
                        {{ translations.net_margin_note ?? 'Dotyczy marży netto: wynik netto / przychód' }}
                    </small>
                    {% endif %}
                    {% if key == 'b2b_clients_count' %}
                    <br>
                    <small class="text-muted" style="font-size:0.75em">
                        <i class="bi bi-info-circle"></i>
                        {{ translations.b2b_clients_note ?? 'Unikalni klienci B2B z transakcją w miesiącu' }}
                    </small>
                    {% endif %}
                    {% if key == 'waste_pct' %}
                    <br>
                    <small class="text-muted" style="font-size:0.75em">
                        <i class="bi bi-info-circle"></i>
                        {{ translations.waste_pct_note ?? 'Wartość odpadów (wg receptury brutto) / przychód netto × 100. Dane z ewidencji odpadów.' }}
                    </small>
                    {% endif %}
                    {% if consultantTarget %}
                    <br>
                    <small class="text-muted" style="font-size:0.75em">
                        <i class="bi bi-person text-muted"></i>
                        {{ translations.consultant ?? 'Konsultant' }}: {{ consultantTarget.t1 }} / {{ consultantTarget.t2 }} / {{ consultantTarget.t3 }}
                    </small>
                    {% endif %}
                </td>
                <td class="text-center align-middle" style="background:#f8fdf9">
                    <input type="number" step="0.01"
                           class="form-control form-control-sm text-center threshold-input"
                           name="t1" data-metric="{{ key }}" data-field="t1"
                           value="{{ col1 }}" placeholder="—"
                           style="max-width:90px;margin:auto">
                </td>
                <td class="text-center align-middle" style="background:#fffef5">
                    <input type="number" step="0.01"
                           class="form-control form-control-sm text-center threshold-input"
                           name="t2" data-metric="{{ key }}" data-field="t2"
                           value="{{ col2 }}" placeholder="—"
                           style="max-width:90px;margin:auto">
                </td>
                <td class="text-center align-middle" style="background:#fff8f2">
                    <input type="number" step="0.01"
                           class="form-control form-control-sm text-center threshold-input"
                           name="t3" data-metric="{{ key }}" data-field="t3"
                           value="{{ col3 }}" placeholder="—"
                           style="max-width:90px;margin:auto">
                </td>
                <td class="text-center align-middle" style="background:#fdf5f5;color:#6c757d;font-style:italic">
                    <small>auto</small>
                </td>
            </tr>
        {% endmacro %}

        {# ── SEKCJA: Targety kosztowe (niższy = lepiej) ────────────────── #}
        <table class="table mb-0" id="targets-table">
            <thead>
                <tr>
                    <th colspan="5" class="py-2 px-3" style="background:#f1f3f5;font-size:0.8rem;text-transform:uppercase;letter-spacing:.05em;color:#6c757d;">
                        <i class="bi bi-arrow-down-circle text-success me-1"></i> {{ translations.cost_targets_heading ?? 'Targety kosztowe — niższy = lepiej' }}
                    </th>
                </tr>
                <tr>
                    <th style="width:25%">{{ translations.metric ?? 'Metryka' }}</th>
                    <th class="text-center" style="background:#d4edda;width:18.75%">
                        🟢 {{ translations.level_good ?? 'Dobry' }}<br><small class="fw-normal text-muted">{{ translations.below_threshold_1 ?? '(poniżej progu 1)' }}</small>
                    </th>
                    <th class="text-center" style="background:#fff3cd;width:18.75%">
                        🟡 {{ translations.level_medium ?? 'Średni' }}<br><small class="fw-normal text-muted">{{ translations.below_threshold_2 ?? '(poniżej progu 2)' }}</small>
                    </th>
                    <th class="text-center" style="background:#fde4c8;width:18.75%">
                        🟠 {{ translations.level_medium_bad_short ?? 'Śr. zły' }}<br><small class="fw-normal text-muted">{{ translations.below_threshold_3 ?? '(poniżej progu 3)' }}</small>
                    </th>
                    <th class="text-center" style="background:#f8d7da;width:18.75%">
                        🔴 {{ translations.level_bad ?? 'Zły' }}<br><small class="fw-normal text-muted">{{ translations.above_threshold_3 ?? '(od progu 3 wzwyż)' }}</small>
                    </th>
                </tr>
            </thead>
            <tbody>
            {% for key, metric in metrics %}
                {% if metric.lower_is_better %}
                {{ _self.metricRow(key, metric, targets[key].admin ?? null, targets[key].consultant ?? null, currency_symbol, translations) }}
                {% endif %}
            {% endfor %}
            </tbody>
        </table>

        {# ── SEKCJA: Targety biznesowe (wyższy = lepiej) ───────────────── #}
        <table class="table mb-0 border-top border-2" id="targets-table-business">
            <thead>
                <tr>
                    <th colspan="5" class="py-2 px-3" style="background:#f1f3f5;font-size:0.8rem;text-transform:uppercase;letter-spacing:.05em;color:#6c757d;">
                        <i class="bi bi-arrow-up-circle text-primary me-1"></i> {{ translations.business_targets_heading ?? 'Targety biznesowe — wyższy = lepiej' }}
                    </th>
                </tr>
                <tr>
                    <th style="width:25%">{{ translations.metric ?? 'Metryka' }}</th>
                    <th class="text-center" style="background:#d4edda;width:18.75%">
                        🟢 {{ translations.level_good ?? 'Dobry' }}<br><small class="fw-normal text-muted">{{ translations.above_threshold_1 ?? '(od progu 1 wzwyż)' }}</small>
                    </th>
                    <th class="text-center" style="background:#fff3cd;width:18.75%">
                        🟡 {{ translations.level_medium ?? 'Średni' }}<br><small class="fw-normal text-muted">{{ translations.above_threshold_2 ?? '(od progu 2 wzwyż)' }}</small>
                    </th>
                    <th class="text-center" style="background:#fde4c8;width:18.75%">
                        🟠 {{ translations.level_medium_bad_short ?? 'Śr. zły' }}<br><small class="fw-normal text-muted">{{ translations.above_threshold_3 ?? '(od progu 3 wzwyż)' }}</small>
                    </th>
                    <th class="text-center" style="background:#f8d7da;width:18.75%">
                        🔴 {{ translations.level_bad ?? 'Zły' }}<br><small class="fw-normal text-muted">{{ translations.below_threshold_3 ?? '(poniżej progu 3)' }}</small>
                    </th>
                </tr>
            </thead>
            <tbody>
            {% for key, metric in metrics %}
                {% if not metric.lower_is_better %}
                {{ _self.metricRow(key, metric, targets[key].admin ?? null, targets[key].consultant ?? null, currency_symbol, translations) }}
                {% endif %}
            {% endfor %}
            </tbody>
        </table>
    </div>
    <div class="card-footer text-end">
        <button id="btn-save-footer" class="btn btn-primary">{{ translations.save_targets ?? 'Zapisz targety' }}</button>
        <a href="{{ root }}/shops/targets" class="btn btn-outline-secondary ms-2">{{ translations.back ?? 'Powrót' }}</a>
    </div>
</div>

{# ── MODAL KOPIOWANIA Z INNEGO SKLEPU ────────────────────────────────────── #}
<div class="modal fade" id="copyFromShopModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title"><i class="bi bi-shop-window me-2"></i>{{ translations.copy_from_shop_title ?? 'Kopiuj targety z innego sklepu' }}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p class="text-muted mb-3">{{ translations.targets_overwrite_prefix ?? 'Istniejące targety dla' }} <strong>{{ months[month] }} {{ year }}</strong> {{ translations.targets_overwrite_suffix ?? 'w tym sklepie zostaną nadpisane.' }}</p>
                <div class="mb-3">
                    <label class="form-label fw-semibold">{{ translations.source_shop ?? 'Sklep źródłowy' }}</label>
                    <select id="copy-shop-source-id" class="form-select">
                        {% for s in shops %}
                            {% if s.getId() != shop.getId() %}
                                <option value="{{ s.getId() }}">{{ s.getRepresentativeName() }}</option>
                            {% endif %}
                        {% endfor %}
                    </select>
                </div>
                <div class="row g-2">
                    <div class="col-6">
                        <label class="form-label fw-semibold">{{ translations.source_year ?? 'Rok źródłowy' }}</label>
                        <select id="copy-shop-source-year" class="form-select">
                            {% for y in range(year - 2, year + 1) %}
                                <option value="{{ y }}" {{ y == year ? 'selected' : '' }}>{{ y }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="col-6">
                        <label class="form-label fw-semibold">{{ translations.source_month ?? 'Miesiąc źródłowy' }}</label>
                        <select id="copy-shop-source-month" class="form-select">
                            {% for num, name in months %}
                                <option value="{{ num }}" {{ num == month ? 'selected' : '' }}>{{ name }}</option>
                            {% endfor %}
                        </select>
                    </div>
                </div>
                <div class="alert alert-warning mt-3 mb-0">
                    <i class="bi bi-exclamation-triangle me-1"></i>
                    {{ translations.targets_overwrite_prefix ?? 'Istniejące targety dla' }} <strong>{{ months[month] }} {{ year }}</strong> {{ translations.targets_overwrite_suffix ?? 'w tym sklepie zostaną nadpisane.' }}
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ translations.cancel ?? 'Anuluj' }}</button>
                <button type="button" id="btn-copy-shop-confirm" class="btn btn-primary">
                    <i class="bi bi-clipboard-check me-1"></i>{{ translations.copy ?? 'Skopiuj' }}
                </button>
            </div>
        </div>
    </div>
</div>

{# ── MODAL POTWIERDZENIA KOPIOWANIA ──────────────────────────────────────── #}
<div class="modal fade" id="copyModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">{{ translations.copy_targets ?? 'Kopiuj targety' }}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p>{{ translations.copy_from_prev_month_text ?? 'Zostaną załadowane Twoje targety z poprzedniego miesiąca.' }} (<strong id="prev-month-label"></strong>).</p>
                <p class="text-warning"><i class="bi bi-exclamation-triangle"></i> {{ translations.targets_overwrite_warning ?? 'Istniejące targety dla wybranego miesiąca zostaną nadpisane.' }}</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ translations.cancel ?? 'Anuluj' }}</button>
                <button type="button" id="btn-copy-confirm" class="btn btn-primary">{{ translations.copy ?? 'Skopiuj' }}</button>
            </div>
        </div>
    </div>
</div>

<div id="targets-toast" class="position-fixed bottom-0 end-0 p-3" style="z-index:9999;display:none">
    <div class="toast show" id="toast-msg">
        <div class="toast-header">
            <strong class="me-auto">{{ translations.targets ?? 'Targety' }}</strong>
            <button type="button" class="btn-close" onclick="document.getElementById('targets-toast').style.display='none'"></button>
        </div>
        <div class="toast-body" id="toast-body"></div>
    </div>
</div>

{% endblock %}

{% block scripts %}
<script>
const SHOP_ID   = {{ shop.getId() }};
const YEAR      = {{ year }};
const MONTH     = {{ month }};
const ROOT      = '{{ root }}';
const AUTHOR_ID = {{ app_user_id ?? 0 }};

{# Mapa miesięcy przekazana z PHP (num → name) — używana w modalu kopiowania #}
const MONTHS_MAP = {{ months|json_encode|raw }};

const shopTrans = {
    no_targets_to_save:    '{{ translations.no_targets_to_save ?? "Brak kompletnych progów do zapisania." }}',
    targets_saved:         '{{ translations.targets_saved ?? "Targety zapisane pomyślnie." }}',
    error:                 '{{ translations.error ?? "Błąd" }}',
    targets_copied_prefix: '{{ translations.targets_copied_prefix ?? "Skopiowano" }}',
    targets_copied_suffix: '{{ translations.targets_copied_suffix ?? "targetów. Odświeżam..." }}',
    error_copy:            '{{ translations.error ?? "Błąd" }}',
};

// ── Walidacja kolejności progów ──────────────────────────────────────────────
function validateRow(row) {
    const isLowerBetter = row.dataset.lower === '1';
    const col1 = parseFloat(row.querySelector('[data-field="t1"]').value);
    const col2 = parseFloat(row.querySelector('[data-field="t2"]').value);
    const col3 = parseFloat(row.querySelector('[data-field="t3"]').value);
    if (!isNaN(col1) && !isNaN(col2)) {
        if (isLowerBetter ? col1 >= col2 : col1 <= col2) return false;
    }
    if (!isNaN(col2) && !isNaN(col3)) {
        if (isLowerBetter ? col2 >= col3 : col2 <= col3) return false;
    }
    if (!isNaN(col1) && !isNaN(col3)) {
        if (isLowerBetter ? col1 >= col3 : col1 <= col3) return false;
    }
    return true;
}

document.querySelectorAll('.threshold-input').forEach(input => {
    input.addEventListener('input', () => {
        const row = input.closest('tr');
        const valid = validateRow(row);
        row.querySelectorAll('.threshold-input').forEach(i => {
            i.classList.toggle('is-invalid', !valid);
        });
    });
});

// ── Zapis ────────────────────────────────────────────────────────────────────
function collectTargets() {
    const targets = [];
    document.querySelectorAll('#targets-table tbody tr, #targets-table-business tbody tr').forEach(row => {
        const key  = row.dataset.metric;
        const col1 = parseFloat(row.querySelector('[data-field="t1"]').value);
        const col2 = parseFloat(row.querySelector('[data-field="t2"]').value);
        const col3 = parseFloat(row.querySelector('[data-field="t3"]').value);
        if (isNaN(col1) || isNaN(col2) || isNaN(col3)) return;
        targets.push({ metric_key: key, threshold_1: col1, threshold_2: col2, threshold_3: col3 });
    });
    return targets;
}

function showToast(msg, ok) {
    const el = document.getElementById('targets-toast');
    document.getElementById('toast-body').textContent = msg;
    el.style.display = 'block';
    el.querySelector('.toast').classList.toggle('bg-success', ok);
    el.querySelector('.toast').classList.toggle('bg-danger', !ok);
    el.querySelector('.toast').classList.toggle('text-white', true);
    setTimeout(() => el.style.display = 'none', 3500);
}

async function saveTargets() {
    const targets = collectTargets();
    if (!targets.length) {
        showToast(shopTrans.no_targets_to_save, false);
        return;
    }
    const res = await fetch(`${ROOT}/shops/${SHOP_ID}/targets/save`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ year: YEAR, month: MONTH, author_id: AUTHOR_ID, targets }),
    });
    const json = await res.json();
    showToast(res.ok ? shopTrans.targets_saved : (shopTrans.error + ': ' + (json.description ?? '?')), res.ok);
}

document.getElementById('btn-save').addEventListener('click', saveTargets);
document.getElementById('btn-save-footer').addEventListener('click', saveTargets);

// ── Kopiowanie z innego sklepu ───────────────────────────────────────────────
document.getElementById('btn-copy-shop').addEventListener('click', () => {
    new bootstrap.Modal(document.getElementById('copyFromShopModal')).show();
});

document.getElementById('btn-copy-shop-confirm').addEventListener('click', async () => {
    const sourceShopId = parseInt(document.getElementById('copy-shop-source-id').value);
    const sourceYear   = parseInt(document.getElementById('copy-shop-source-year').value);
    const sourceMonth  = parseInt(document.getElementById('copy-shop-source-month').value);
    bootstrap.Modal.getInstance(document.getElementById('copyFromShopModal')).hide();
    const res = await fetch(`${ROOT}/shops/${SHOP_ID}/targets/copy-from-shop`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
            source_shop_id: sourceShopId, source_year: sourceYear, source_month: sourceMonth,
            target_year: YEAR, target_month: MONTH, author_id: AUTHOR_ID,
        }),
    });
    const json = await res.json();
    if (res.ok) {
        showToast(shopTrans.targets_copied_prefix + ' ' + (json.data?.copied ?? 0) + ' ' + shopTrans.targets_copied_suffix, true);
        setTimeout(() => location.reload(), 1500);
    } else {
        showToast(shopTrans.error_copy + ': ' + (json.description ?? '?'), false);
    }
});

// ── Kopiowanie z poprzedniego miesiąca ───────────────────────────────────────
document.getElementById('btn-copy').addEventListener('click', () => {
    const prevMonth = MONTH === 1 ? 12 : MONTH - 1;
    const prevYear  = MONTH === 1 ? YEAR - 1 : YEAR;
    document.getElementById('prev-month-label').textContent =
        MONTHS_MAP[prevMonth] + ' ' + prevYear;
    new bootstrap.Modal(document.getElementById('copyModal')).show();
});

document.getElementById('btn-copy-confirm').addEventListener('click', async () => {
    bootstrap.Modal.getInstance(document.getElementById('copyModal')).hide();
    const res = await fetch(`${ROOT}/shops/${SHOP_ID}/targets/copy`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ year: YEAR, month: MONTH, author_id: AUTHOR_ID }),
    });
    const json = await res.json();
    if (res.ok) {
        showToast(shopTrans.targets_copied_prefix + ' ' + (json.data?.copied ?? 0) + ' ' + shopTrans.targets_copied_suffix, true);
        setTimeout(() => location.reload(), 1500);
    } else {
        showToast(shopTrans.error_copy + ': ' + (json.description ?? '?'), false);
    }
});
</script>
{% endblock %}