{% extends "shared/frontend/base.html" %}

{% block title %}Produkter - BMC Hub{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=IBM+Plex+Serif:wght@400;500;600&display=swap">
<style>
    :root {
        --products-bg-1: #f5f7fb;
        --products-bg-2: #e9f1f7;
        --products-ink: #102a43;
        --products-ink-muted: #486581;
        --products-accent: #0f4c75;
        --products-accent-2: #1b6ca8;
        --products-card: #ffffff;
        --products-border: rgba(15, 76, 117, 0.12);
    }

    [data-bs-theme="dark"] {
        --products-bg-1: #1b1f24;
        --products-bg-2: #20252b;
        --products-ink: #f1f5f9;
        --products-ink-muted: #b6c2d1;
        --products-card: #252b33;
        --products-border: rgba(61, 139, 253, 0.18);
    }

    .products-page {
        font-family: "Space Grotesk", sans-serif;
        color: var(--products-ink);
        background: radial-gradient(circle at 10% 10%, var(--products-bg-2), transparent 45%),
                    radial-gradient(circle at 90% 20%, rgba(15, 76, 117, 0.15), transparent 50%),
                    linear-gradient(160deg, var(--products-bg-1), var(--products-bg-2));
        border-radius: 18px;
        padding: 28px 28px 32px;
        box-shadow: 0 20px 40px rgba(15, 76, 117, 0.08);
        position: relative;
        overflow: hidden;
    }

    .products-page::after {
        content: "";
        position: absolute;
        top: -120px;
        right: -140px;
        width: 280px;
        height: 280px;
        background: conic-gradient(from 120deg, rgba(15, 76, 117, 0.12), transparent 70%);
        border-radius: 50%;
        filter: blur(2px);
        pointer-events: none;
    }

    .products-hero {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 20px;
        margin-bottom: 24px;
    }

    .products-hero h1 {
        font-size: 2.2rem;
        font-weight: 700;
        margin-bottom: 6px;
        letter-spacing: -0.02em;
    }

    .products-hero p {
        font-family: "IBM Plex Serif", serif;
        color: var(--products-ink-muted);
        margin-bottom: 0;
        max-width: 520px;
    }

    .products-pill {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background: rgba(15, 76, 117, 0.08);
        color: var(--products-accent);
        padding: 6px 12px;
        border-radius: 999px;
        font-size: 0.85rem;
        font-weight: 600;
    }

    .products-actions .btn {
        border-radius: 999px;
        font-weight: 600;
        padding: 0.6rem 1.4rem;
        box-shadow: 0 8px 18px rgba(15, 76, 117, 0.2);
    }

    .products-card {
        background: var(--products-card);
        border: 1px solid var(--products-border);
        border-radius: 16px;
        box-shadow: 0 12px 26px rgba(15, 76, 117, 0.08);
        overflow: hidden;
        animation: slideUp 0.5s ease;
    }

    .products-search {
        background: rgba(15, 76, 117, 0.05);
        border: 1px solid var(--products-border);
        border-radius: 16px;
        padding: 16px 18px;
        margin-bottom: 20px;
        display: flex;
        gap: 12px;
        flex-wrap: wrap;
        align-items: center;
    }

    .products-search .form-control,
    .products-search .form-select {
        border-radius: 999px;
    }

    .products-search .btn {
        border-radius: 999px;
        font-weight: 600;
    }

    .gateway-result {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        padding: 12px 14px;
        border: 1px solid var(--products-border);
        border-radius: 12px;
        margin-bottom: 10px;
        background: var(--products-card);
    }

    .gateway-result h6 {
        margin: 0;
        font-weight: 600;
    }

    .gateway-meta {
        color: var(--products-ink-muted);
        font-size: 0.85rem;
    }

    .products-card .card-header {
        background: transparent;
        border-bottom: 1px solid var(--products-border);
    }

    .products-table thead th {
        background: rgba(15, 76, 117, 0.06);
        color: var(--products-ink-muted);
    }

    .products-table tbody tr {
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .products-table tbody tr:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 24px rgba(15, 76, 117, 0.12);
    }

    @keyframes slideUp {
        from {
            opacity: 0;
            transform: translateY(12px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @media (max-width: 768px) {
        .products-hero {
            flex-direction: column;
            align-items: stretch;
        }

        .products-page {
            padding: 20px;
        }
    }
</style>
{% endblock %}

{% block content %}
<div class="container-fluid py-4">
    <div class="products-page">
        <div class="products-hero">
            <div>
                <span class="products-pill"><i class="bi bi-box-seam"></i> Katalog</span>
                <h1>Produkter</h1>
                <p>Opret og vedligehold produkter til abonnementer, service og salgslinjer. Alt samlet, sporbar og klar til brug i sager.</p>
            </div>
            <div class="products-actions">
                <button class="btn btn-primary" onclick="openCreateProductModal()">
                    <i class="bi bi-plus-circle"></i> Opret Produkt
                </button>
                <button class="btn btn-outline-primary ms-2" onclick="openGatewaySearchModal()">
                    <i class="bi bi-cloud-download"></i> Import fra gateway
                </button>
            </div>
        </div>

        <div class="products-search">
            <div class="input-group" style="min-width: 260px;">
                <span class="input-group-text bg-white"><i class="bi bi-search"></i></span>
                <input type="text" class="form-control" id="localSearchQuery" placeholder="Soeg lokale produkter...">
            </div>
            <select class="form-select" id="localSearchStatus" style="max-width: 140px;">
                <option value="active" selected>Aktiv</option>
                <option value="inactive">Inaktiv</option>
                <option value="all">Alle</option>
            </select>
            <input type="text" class="form-control" id="localSearchType" placeholder="Type" style="max-width: 140px;">
            <input type="text" class="form-control" id="localSearchManufacturer" placeholder="Producent" style="max-width: 160px;">
            <input type="number" class="form-control" id="localSearchMinPrice" placeholder="Min pris" style="max-width: 120px;">
            <input type="number" class="form-control" id="localSearchMaxPrice" placeholder="Max pris" style="max-width: 120px;">
            <select class="form-select" id="localSearchBillable" style="max-width: 140px;">
                <option value="">Billable?</option>
                <option value="true">Ja</option>
                <option value="false">Nej</option>
            </select>
            <select class="form-select" id="localSearchBundle" style="max-width: 140px;">
                <option value="">Bundle?</option>
                <option value="true">Ja</option>
                <option value="false">Nej</option>
            </select>
            <button class="btn btn-outline-primary" onclick="applyLocalProductSearch()">
                <i class="bi bi-search"></i> Soeg
            </button>
            <button class="btn btn-outline-secondary" onclick="clearLocalProductSearch()">
                <i class="bi bi-x"></i> Nulstil
            </button>
        </div>

        <div class="card products-card">
            <div class="card-header py-3">
                <div class="d-flex align-items-center justify-content-between flex-wrap gap-2">
                    <h5 class="mb-0">Alle produkter</h5>
                    <div class="d-flex align-items-center gap-2">
                        <span class="text-muted small" id="localProductsMeta">Opdateres automatisk</span>
                        <select class="form-select form-select-sm" style="max-width: 120px;" onchange="changeLocalPageSize(this.value)">
                            <option value="25" selected>25 pr. side</option>
                            <option value="50">50 pr. side</option>
                            <option value="100">100 pr. side</option>
                        </select>
                        <span class="text-muted small" id="localProductsPageInfo"></span>
                        <div class="btn-group btn-group-sm" role="group">
                            <button class="btn btn-outline-secondary" id="localPrevPage" onclick="changeLocalPage(-1)">Forrige</button>
                            <button class="btn btn-outline-secondary" id="localNextPage" onclick="changeLocalPage(1)">Naeste</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-hover align-middle mb-0 products-table">
                    <thead class="bg-light">
                        <tr>
                            <th>Navn</th>
                            <th>Type</th>
                            <th>Status</th>
                            <th>SKU</th>
                            <th>Pris</th>
                            <th>Interval</th>
                        </tr>
                    </thead>
                    <tbody id="productsBody">
                        <tr>
                            <td colspan="6" class="text-center text-muted py-5">
                                <span class="spinner-border spinner-border-sm me-2"></span>Indlaeser...
                            </td>
                        </tr>
                    </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="gatewaySearchModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title"><i class="bi bi-cloud-arrow-down"></i> Import fra API Gateway</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="row g-2 mb-3">
                    <div class="col-md-6">
                        <input type="text" class="form-control" id="gatewayModalQuery" placeholder="Soeg efter produktnavn...">
                    </div>
                    <div class="col-md-3">
                        <input type="text" class="form-control" id="gatewayModalSupplier" placeholder="Supplier code">
                    </div>
                    <div class="col-md-3">
                        <button class="btn btn-primary w-100" onclick="searchGatewayProducts(true)">
                            <i class="bi bi-search"></i> Soeg
                        </button>
                    </div>
                    <div class="col-md-4">
                        <input type="number" class="form-control" id="gatewayModalMinPrice" placeholder="Min pris">
                    </div>
                    <div class="col-md-4">
                        <input type="number" class="form-control" id="gatewayModalMaxPrice" placeholder="Max pris">
                    </div>
                    <div class="col-md-4 d-flex align-items-center">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="gatewayModalInStock">
                            <label class="form-check-label" for="gatewayModalInStock">Kun paa lager</label>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <input type="text" class="form-control" id="gatewayModalCategory" placeholder="Kategori">
                    </div>
                    <div class="col-md-4">
                        <input type="text" class="form-control" id="gatewayModalManufacturer" placeholder="Producent">
                    </div>
                </div>
                <div id="gatewayResults">
                    <div class="text-center text-muted py-4">Soeg efter produkter for at importere.</div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="createProductModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title"><i class="bi bi-box"></i> Opret Produkt</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="createProductForm">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label">Navn *</label>
                            <input type="text" class="form-control" id="productName" required>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Type</label>
                            <select class="form-select" id="productType">
                                <option value="">- Vaelg type -</option>
                                <option value="hardware">Hardware</option>
                                <option value="service">Service</option>
                                <option value="subscription">Abonnement</option>
                                <option value="bundle">Bundle</option>
                            </select>
                            <div class="form-text">Vaelg produkttype for korrekt kategorisering.</div>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Status</label>
                            <select class="form-select" id="productStatus">
                                <option value="active" selected>Aktiv</option>
                                <option value="inactive">Inaktiv</option>
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">SKU</label>
                            <input type="text" class="form-control" id="productSku" placeholder="Internt varenummer">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">EAN</label>
                            <input type="text" class="form-control" id="productEan" placeholder="Fx 5701234567890" inputmode="numeric">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Salgspris</label>
                            <div class="input-group">
                                <input type="number" class="form-control" id="productSalesPrice" step="0.01" min="0" placeholder="0,00">
                                <span class="input-group-text">DKK</span>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Købspris</label>
                            <div class="input-group">
                                <input type="number" class="form-control" id="productCostPrice" step="0.01" min="0" placeholder="0,00">
                                <span class="input-group-text">DKK</span>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Moms (%)</label>
                            <input type="number" class="form-control" id="productVatRate" step="0.01" min="0" value="25">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Faktureringsinterval</label>
                            <select class="form-select" id="productBillingPeriod">
                                <option value="">-</option>
                                <option value="monthly">Maaned</option>
                                <option value="quarterly">Kvartal</option>
                                <option value="yearly">Aar</option>
                                <option value="one_time">Engang</option>
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Auto forny</label>
                            <select class="form-select" id="productAutoRenew">
                                <option value="false" selected>Nej</option>
                                <option value="true">Ja</option>
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Minimum binding (mdr.)</label>
                            <input type="number" class="form-control" id="productMinimumTerm" min="0">
                        </div>
                        <div class="col-md-12">
                            <label class="form-label">Kort beskrivelse</label>
                            <input type="text" class="form-control" id="productShortDescription">
                        </div>
                        <div class="col-md-12">
                            <label class="form-label">Detaljer</label>
                            <textarea class="form-control" id="productLongDescription" rows="3"></textarea>
                        </div>
                        <div class="col-12">
                            <div class="alert alert-light small">
                                Avancerede felter kan tilfoejes senere via API.
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Luk</button>
                <button type="button" class="btn btn-primary" onclick="createProduct()">Gem produkt</button>
            </div>
        </div>
    </div>
</div>

<script>
const localProductsState = {
    products: [],
    page: 1,
    pageSize: 25,
    query: ''
};

async function loadProducts() {
    try {
        const params = buildLocalProductParams();
        const queryString = params.toString();
        const url = queryString ? `/api/v1/products?${queryString}` : '/api/v1/products';
        const products = await fetch(url).then(r => r.json());
        localProductsState.products = Array.isArray(products) ? products : [];
        localProductsState.page = 1;
        localProductsState.query = document.getElementById('localSearchQuery')?.value.trim() || '';
        renderProducts();
    } catch (e) {
        console.error('Error loading products:', e);
        document.getElementById('productsBody').innerHTML = `
            <tr><td colspan="6" class="text-center text-danger py-5">
                <i class="bi bi-exclamation-triangle fs-1 mb-3"></i>
                <p>Fejl ved indlaesning</p>
            </td></tr>
        `;
    }
}

function renderProducts() {
    const tbody = document.getElementById('productsBody');
    const products = localProductsState.products;
    const meta = document.getElementById('localProductsMeta');
    const pageInfo = document.getElementById('localProductsPageInfo');
    const prevButton = document.getElementById('localPrevPage');
    const nextButton = document.getElementById('localNextPage');

    if (!products || products.length === 0) {
        tbody.innerHTML = `
            <tr><td colspan="6" class="text-center text-muted py-5">
                <i class="bi bi-inbox fs-1 mb-3"></i>
                <p>Ingen produkter endnu</p>
            </td></tr>
        `;
        if (meta) {
            meta.textContent = 'Ingen resultater';
        }
        if (pageInfo) {
            pageInfo.textContent = '';
        }
        if (prevButton) {
            prevButton.disabled = true;
        }
        if (nextButton) {
            nextButton.disabled = true;
        }
        return;
    }

    const tokens = normalizeTokens(localProductsState.query);
    const filteredProducts = tokens.length
        ? products.filter(product => matchesLocalQuery(product, tokens))
        : products;
    const total = filteredProducts.length;

    if (total === 0) {
        tbody.innerHTML = `
            <tr><td colspan="6" class="text-center text-muted py-5">
                <i class="bi bi-search fs-1 mb-3"></i>
                <p>Ingen produkter fundet</p>
            </td></tr>
        `;
        if (meta) {
            meta.textContent = 'Ingen resultater';
        }
        if (pageInfo) {
            pageInfo.textContent = '';
        }
        if (prevButton) {
            prevButton.disabled = true;
        }
        if (nextButton) {
            nextButton.disabled = true;
        }
        return;
    }
    const pageSize = localProductsState.pageSize;
    const totalPages = Math.max(1, Math.ceil(total / pageSize));
    localProductsState.page = Math.min(Math.max(localProductsState.page, 1), totalPages);
    const startIndex = (localProductsState.page - 1) * pageSize;
    const pageItems = filteredProducts.slice(startIndex, startIndex + pageSize);

    if (meta) {
        meta.textContent = `Viser ${startIndex + 1}-${Math.min(startIndex + pageSize, total)} af ${total}`;
    }
    if (pageInfo) {
        pageInfo.textContent = `Side ${localProductsState.page} af ${totalPages}`;
    }
    if (prevButton) {
        prevButton.disabled = localProductsState.page <= 1;
    }
    if (nextButton) {
        nextButton.disabled = localProductsState.page >= totalPages;
    }

    tbody.innerHTML = pageItems.map(p => `
        <tr>
            <td><strong><a class="text-decoration-none" href="/products/${p.id}">${highlightTokens(p.name || '', tokens)}</a></strong></td>
            <td>${p.type || '-'}</td>
            <td>${p.status || '-'}</td>
            <td>${highlightTokens(p.sku_internal || '-', tokens)}</td>
            <td>${p.sales_price != null ? formatCurrency(p.sales_price) : '-'}</td>
            <td>${formatInterval(p.billing_period)}</td>
        </tr>
    `).join('');
}

function matchesLocalQuery(product, tokens) {
    if (!tokens.length) return true;
    const haystack = normalizeTokens(
        [
            product.name,
            product.sku_internal,
            product.ean,
            product.manufacturer,
            product.supplier_name
        ].filter(Boolean).join(' ')
    );
    return tokens.every(token => haystack.includes(token));
}

function buildLocalProductParams() {
    const params = new URLSearchParams();
    const q = document.getElementById('localSearchQuery')?.value.trim();
    const status = document.getElementById('localSearchStatus')?.value;
    const productType = document.getElementById('localSearchType')?.value.trim();
    const manufacturer = document.getElementById('localSearchManufacturer')?.value.trim();
    const minPrice = document.getElementById('localSearchMinPrice')?.value;
    const maxPrice = document.getElementById('localSearchMaxPrice')?.value;
    const billable = document.getElementById('localSearchBillable')?.value;
    const isBundle = document.getElementById('localSearchBundle')?.value;

    if (q) params.append('q', q);
    if (status) params.append('status', status);
    if (productType) params.append('type', productType);
    if (manufacturer) params.append('manufacturer', manufacturer);
    if (minPrice) params.append('min_price', minPrice);
    if (maxPrice) params.append('max_price', maxPrice);
    if (billable) params.append('billable', billable);
    if (isBundle) params.append('is_bundle', isBundle);

    return params;
}

function applyLocalProductSearch() {
    loadProducts();
}

function clearLocalProductSearch() {
    const fields = [
        'localSearchQuery',
        'localSearchStatus',
        'localSearchType',
        'localSearchManufacturer',
        'localSearchMinPrice',
        'localSearchMaxPrice',
        'localSearchBillable',
        'localSearchBundle'
    ];
    fields.forEach(id => {
        const el = document.getElementById(id);
        if (!el) return;
        if (el.tagName === 'SELECT') {
            if (id === 'localSearchStatus') {
                el.value = 'active';
            } else {
                el.value = '';
            }
        } else {
            el.value = '';
        }
    });
    loadProducts();
}

function changeLocalPage(delta) {
    localProductsState.page += delta;
    renderProducts();
}

function changeLocalPageSize(value) {
    localProductsState.pageSize = Number(value) || 25;
    localProductsState.page = 1;
    renderProducts();
}

function setupLocalSearchEvents() {
    const triggerSearch = (() => {
        let timer = null;
        return () => {
            if (timer) clearTimeout(timer);
            timer = setTimeout(() => {
                applyLocalProductSearch();
            }, 800);
        };
    })();
    const inputs = [
        'localSearchQuery',
        'localSearchType',
        'localSearchManufacturer',
        'localSearchMinPrice',
        'localSearchMaxPrice'
    ];
    inputs.forEach(id => {
        const el = document.getElementById(id);
        if (!el) return;
        el.addEventListener('keydown', (event) => {
            if (event.key === 'Enter') {
                event.preventDefault();
                applyLocalProductSearch();
            }
        });
        el.addEventListener('input', triggerSearch);
    });

    const selects = [
        'localSearchStatus',
        'localSearchBillable',
        'localSearchBundle'
    ];
    selects.forEach(id => {
        const el = document.getElementById(id);
        if (!el) return;
        el.addEventListener('change', () => applyLocalProductSearch());
    });
}

function formatCurrency(amount) {
    return new Intl.NumberFormat('da-DK', {
        style: 'currency',
        currency: 'DKK',
        minimumFractionDigits: 0,
        maximumFractionDigits: 0
    }).format(amount || 0);
}

function formatInterval(interval) {
    const map = {
        'monthly': 'Maaned',
        'quarterly': 'Kvartal',
        'yearly': 'Aar',
        'one_time': 'Engang'
    };
    return map[interval] || interval || '-';
}

function openCreateProductModal() {
    document.getElementById('createProductForm').reset();
    new bootstrap.Modal(document.getElementById('createProductModal')).show();
}

async function createProduct() {
    const payload = {
        name: document.getElementById('productName').value.trim(),
        type: document.getElementById('productType').value.trim() || null,
        status: document.getElementById('productStatus').value,
        sku_internal: document.getElementById('productSku').value.trim() || null,
        ean: document.getElementById('productEan').value.trim() || null,
        sales_price: document.getElementById('productSalesPrice').value || null,
        cost_price: document.getElementById('productCostPrice').value || null,
        vat_rate: document.getElementById('productVatRate').value || null,
        billing_period: document.getElementById('productBillingPeriod').value || null,
        auto_renew: document.getElementById('productAutoRenew').value === 'true',
        minimum_term_months: document.getElementById('productMinimumTerm').value || null,
        short_description: document.getElementById('productShortDescription').value.trim() || null,
        long_description: document.getElementById('productLongDescription').value.trim() || null
    };

    if (!payload.name) {
        alert('Navn er paakraevet');
        return;
    }

    const res = await fetch('/api/v1/products', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(payload)
    });

    if (!res.ok) {
        const error = await res.json();
        alert(error.detail || 'Kunne ikke oprette produkt');
        return;
    }

    bootstrap.Modal.getInstance(document.getElementById('createProductModal')).hide();
    await loadProducts();
}

function openGatewaySearchModal(autoSearch = false) {
    document.getElementById('gatewayModalQuery').value = '';
    document.getElementById('gatewayModalSupplier').value = '';
    document.getElementById('gatewayModalCategory').value = '';
    document.getElementById('gatewayModalManufacturer').value = '';
    document.getElementById('gatewayModalMinPrice').value = '';
    document.getElementById('gatewayModalMaxPrice').value = '';
    document.getElementById('gatewayModalInStock').checked = false;
    document.getElementById('gatewayResults').innerHTML = '<div class="text-center text-muted py-4">Soeg efter produkter for at importere.</div>';
    new bootstrap.Modal(document.getElementById('gatewaySearchModal')).show();
    if (autoSearch) {
        searchGatewayProducts(true);
    }
}

async function searchGatewayProducts(fromModal = false) {
    if (!fromModal) {
        openGatewaySearchModal(true);
        return;
    }
    const queryInput = document.getElementById('gatewayModalQuery');
    const supplierInput = document.getElementById('gatewayModalSupplier');
    const categoryInput = document.getElementById('gatewayModalCategory');
    const manufacturerInput = document.getElementById('gatewayModalManufacturer');
    const inStockInput = document.getElementById('gatewayModalInStock');
    const minPrice = document.getElementById('gatewayModalMinPrice').value;
    const maxPrice = document.getElementById('gatewayModalMaxPrice').value;

    const q = queryInput.value.trim();
    const supplier = supplierInput.value.trim();
    const category = categoryInput ? categoryInput.value.trim() : '';
    const manufacturer = manufacturerInput ? manufacturerInput.value.trim() : '';
    const inStock = inStockInput ? inStockInput.checked : false;
    if (!q && !supplier) {
        alert('Angiv soegeord eller supplier code');
        return;
    }

    const params = new URLSearchParams();
    if (q) params.append('q', q);
    if (supplier) params.append('supplier_code', supplier);
    if (category) params.append('category', category);
    if (manufacturer) params.append('manufacturer', manufacturer);
    if (inStock) params.append('in_stock', 'true');
    if (minPrice) params.append('min_price', minPrice);
    if (maxPrice) params.append('max_price', maxPrice);

    const resultsContainer = document.getElementById('gatewayResults');
    if (resultsContainer) {
        resultsContainer.innerHTML = '<div class="text-center text-muted py-4"><span class="spinner-border spinner-border-sm me-2"></span>Soege...</div>';
    }

    try {
        const res = await fetch(`/api/v1/products/apigateway/search?${params.toString()}`);
        if (!res.ok) {
            const error = await res.text();
            throw new Error(error || 'Gateway soegning fejlede');
        }
        const data = await res.json();
        const products = Array.isArray(data.products) ? data.products : [];
        setGatewayResults(products, q);
    } catch (e) {
        console.error(e);
        if (resultsContainer) {
            resultsContainer.innerHTML = `<div class="text-center text-danger py-4">${e.message || 'Fejl ved soegning'}</div>`;
        }
    }
}

const gatewayResultsState = {
    products: [],
    query: '',
    page: 1,
    pageSize: 25,
    sort: 'relevance',
    showAllResults: true
};

function escapeHtml(value) {
    return String(value || '').replace(/[&<>"']/g, (ch) => ({
        '&': '&amp;',
        '<': '&lt;',
        '>': '&gt;',
        '"': '&quot;',
        "'": '&#39;'
    }[ch]));
}

function normalizeTokens(value) {
    return String(value || '')
        .toLowerCase()
        .replace(/[^a-z0-9]+/g, ' ')
        .trim()
        .split(/\s+/)
        .filter(token => token.length > 1);
}

function buildProductTokens(product) {
    const parts = [
        product.product_name,
        product.name,
        product.sku,
        product.ean,
        product.manufacturer,
        product.category,
        product.supplier_name
    ].filter(Boolean).join(' ');
    return normalizeTokens(parts);
}

function allTokensMatch(product, tokens) {
    if (!tokens.length) return false;
    const productTokens = buildProductTokens(product);
    return tokens.every(token => productTokens.includes(token));
}

function normalizeSkuEan(value) {
    return String(value || '')
        .toLowerCase()
        .replace(/[^a-z0-9]/g, '')
        .trim();
}

function highlightTokens(text, tokens) {
    if (!text || !tokens.length) return escapeHtml(text);
    let safe = escapeHtml(text);
    tokens.forEach(token => {
        const escaped = token.replace(/[-/\\^$*+?.()|[\]{}]/g, '\\$&');
        const regex = new RegExp(`(${escaped})`, 'gi');
        safe = safe.replace(regex, '<mark>$1</mark>');
    });
    return safe;
}

function setGatewayResults(products, query) {
    gatewayResultsState.products = products;
    gatewayResultsState.query = query || '';
    gatewayResultsState.page = 1;
    renderGatewayResults();
}

function changeGatewaySort(value) {
    gatewayResultsState.sort = value;
    gatewayResultsState.page = 1;
    renderGatewayResults();
}

function changeGatewayPageSize(value) {
    gatewayResultsState.pageSize = Number(value) || 25;
    gatewayResultsState.page = 1;
    renderGatewayResults();
}

function goGatewayPage(delta) {
    gatewayResultsState.page += delta;
    renderGatewayResults();
}

function toggleGatewayShowAll(value) {
    gatewayResultsState.showAllResults = Boolean(value);
    renderGatewayResults();
}

function getSortedGatewayProducts(products) {
    const sort = gatewayResultsState.sort;
    if (sort === 'price_asc') {
        return [...products].sort((a, b) => (a.price || 0) - (b.price || 0));
    }
    if (sort === 'price_desc') {
        return [...products].sort((a, b) => (b.price || 0) - (a.price || 0));
    }
    if (sort === 'name') {
        return [...products].sort((a, b) => String(a.product_name || '').localeCompare(String(b.product_name || '')));
    }
    const query = gatewayResultsState.query;
    const queryNormalized = normalizeSkuEan(query);
    return [...products].sort((a, b) => {
        if (!queryNormalized) return 0;
        const aSku = normalizeSkuEan(a.sku);
        const bSku = normalizeSkuEan(b.sku);
        const aEan = normalizeSkuEan(a.ean);
        const bEan = normalizeSkuEan(b.ean);
        const aExact = queryNormalized && (aSku === queryNormalized || aEan === queryNormalized);
        const bExact = queryNormalized && (bSku === queryNormalized || bEan === queryNormalized);
        if (aExact && !bExact) return -1;
        if (!aExact && bExact) return 1;
        return 0;
    });
}

function renderGatewayResults() {
    const resultsContainer = document.getElementById('gatewayResults');
    if (!resultsContainer) return;

    const tokens = normalizeTokens(gatewayResultsState.query);
    const originalProducts = gatewayResultsState.products || [];
    const products = getSortedGatewayProducts(originalProducts);
    const total = products.length;

    if (!total) {
        resultsContainer.innerHTML = '<div class="text-center text-muted py-4">Ingen produkter fundet.</div>';
        return;
    }

    const pageSize = gatewayResultsState.pageSize;
    const totalPages = Math.max(1, Math.ceil(total / pageSize));
    const page = Math.min(Math.max(gatewayResultsState.page, 1), totalPages);
    gatewayResultsState.page = page;
    const startIndex = (page - 1) * pageSize;
    const pageItems = products.slice(startIndex, startIndex + pageSize);
    const bestMatches = originalProducts.filter(product => allTokensMatch(product, tokens)).slice(0, 3);
    const bestMatchKeys = new Set(bestMatches.map(product => normalizeSkuEan(product.sku || product.ean || product.product_name)));
    const filteredPageItems = pageItems.filter(product => {
        const key = normalizeSkuEan(product.sku || product.ean || product.product_name);
        return key ? !bestMatchKeys.has(key) : true;
    });
    const visibleItems = gatewayResultsState.showAllResults ? pageItems : filteredPageItems;

    const header = `
        <div class="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-3">
            <div class="text-muted small">Viser ${startIndex + 1}-${Math.min(startIndex + pageSize, total)} af ${total}</div>
            <div class="d-flex align-items-center gap-2">
                <div class="form-check form-check-inline mb-0">
                    <input class="form-check-input" type="checkbox" id="gatewayShowAll" ${gatewayResultsState.showAllResults ? 'checked' : ''} onchange="toggleGatewayShowAll(this.checked)">
                    <label class="form-check-label" for="gatewayShowAll">Vis alle (inkl. best match)</label>
                </div>
                <select class="form-select form-select-sm" style="max-width: 160px;" onchange="changeGatewaySort(this.value)">
                    <option value="relevance" ${gatewayResultsState.sort === 'relevance' ? 'selected' : ''}>Relevans</option>
                    <option value="price_asc" ${gatewayResultsState.sort === 'price_asc' ? 'selected' : ''}>Pris stigende</option>
                    <option value="price_desc" ${gatewayResultsState.sort === 'price_desc' ? 'selected' : ''}>Pris faldende</option>
                    <option value="name" ${gatewayResultsState.sort === 'name' ? 'selected' : ''}>Navn A-Z</option>
                </select>
                <select class="form-select form-select-sm" style="max-width: 120px;" onchange="changeGatewayPageSize(this.value)">
                    <option value="25" ${pageSize === 25 ? 'selected' : ''}>25 pr. side</option>
                    <option value="50" ${pageSize === 50 ? 'selected' : ''}>50 pr. side</option>
                    <option value="100" ${pageSize === 100 ? 'selected' : ''}>100 pr. side</option>
                </select>
                <div class="btn-group btn-group-sm" role="group">
                    <button class="btn btn-outline-secondary" ${page <= 1 ? 'disabled' : ''} onclick="goGatewayPage(-1)">Forrige</button>
                    <button class="btn btn-outline-secondary" ${page >= totalPages ? 'disabled' : ''} onclick="goGatewayPage(1)">Naeste</button>
                </div>
            </div>
        </div>
    `;

    const bestMatchBlock = bestMatches.length ? `
        <div class="mb-3">
            <div class="fw-semibold mb-2">Bedste match</div>
            ${bestMatches.map(product => {
                const encoded = encodeURIComponent(JSON.stringify(product));
                const supplierUrl = product.product_url || product.url || product.product_link || product.supplier_url || product.supplier_product_url;
                const name = highlightTokens(product.product_name || product.name || '', tokens);
                const sku = product.sku ? `<span class="badge bg-light text-dark border">${escapeHtml(product.sku)}</span>` : '';
                const manufacturer = product.manufacturer ? `<span class="badge bg-light text-dark border">${escapeHtml(product.manufacturer)}</span>` : '';
                const supplier = product.supplier_name ? `<span class="badge bg-light text-dark border">${escapeHtml(product.supplier_name)}</span>` : '';
                const category = product.category ? `<span class="text-muted small">${escapeHtml(product.category)}</span>` : '';
                const stock = product.stock_status ? `<span class="text-muted small">• ${escapeHtml(product.stock_status)}</span>` : '';
                return `
                <div class="gateway-result">
                    <div>
                        <h6 class="mb-1">${name}</h6>
                        <div class="gateway-meta d-flex flex-wrap gap-2">${sku}${manufacturer}${supplier}</div>
                        <div class="gateway-meta">${category} ${stock}</div>
                        ${supplierUrl ? `<div class="gateway-meta"><a href="${supplierUrl}" target="_blank" rel="noopener">Se hos grosist</a></div>` : ''}
                    </div>
                    <div class="text-end">
                        <div class="fw-semibold">${formatCurrency(product.price || 0)}</div>
                        <button class="btn btn-sm btn-outline-primary mt-2" data-product="${encoded}" onclick="importGatewayProductFromAttr(this)">Importer</button>
                    </div>
                </div>
                `;
            }).join('')}
        </div>
        <div class="fw-semibold mb-2">Alle resultater</div>
    ` : '';

    const rows = visibleItems.map(product => {
        const encoded = encodeURIComponent(JSON.stringify(product));
        const supplierUrl = product.product_url || product.url || product.product_link || product.supplier_url || product.supplier_product_url;
        const name = highlightTokens(product.product_name || product.name || '', tokens);
        const sku = product.sku ? `<span class="badge bg-light text-dark border">${escapeHtml(product.sku)}</span>` : '';
        const manufacturer = product.manufacturer ? `<span class="badge bg-light text-dark border">${escapeHtml(product.manufacturer)}</span>` : '';
        const supplier = product.supplier_name ? `<span class="badge bg-light text-dark border">${escapeHtml(product.supplier_name)}</span>` : '';
        const category = product.category ? `<span class="text-muted small">${escapeHtml(product.category)}</span>` : '';
        const stock = product.stock_status ? `<span class="text-muted small">• ${escapeHtml(product.stock_status)}</span>` : '';
        return `
        <div class="gateway-result">
            <div>
                <h6 class="mb-1">${name}</h6>
                <div class="gateway-meta d-flex flex-wrap gap-2">${sku}${manufacturer}${supplier}</div>
                <div class="gateway-meta">${category} ${stock}</div>
                ${supplierUrl ? `<div class="gateway-meta"><a href="${supplierUrl}" target="_blank" rel="noopener">Se hos grosist</a></div>` : ''}
            </div>
            <div class="text-end">
                <div class="fw-semibold">${formatCurrency(product.price || 0)}</div>
                <button class="btn btn-sm btn-outline-primary mt-2" data-product="${encoded}" onclick="importGatewayProductFromAttr(this)">Importer</button>
            </div>
        </div>
        `;
    }).join('');

    resultsContainer.innerHTML = header + bestMatchBlock + rows;
}

async function importGatewayProduct(product) {
    try {
        const res = await fetch('/api/v1/products/apigateway/import', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ product })
        });
        if (!res.ok) {
            const error = await res.json();
            throw new Error(error.detail || 'Import fejlede');
        }
        await res.json();
        await loadProducts();
        document.getElementById('gatewayResults').innerHTML = '<div class="text-center text-success py-4">Produkt importeret.</div>';
    } catch (e) {
        alert(e.message || e);
    }
}

function importGatewayProductFromAttr(button) {
    const payload = button.getAttribute('data-product');
    if (!payload) return;
    try {
        const product = JSON.parse(decodeURIComponent(payload));
        importGatewayProduct(product);
    } catch (e) {
        alert('Kunne ikke laese produktdata');
    }
}

document.addEventListener('DOMContentLoaded', () => {
    setupLocalSearchEvents();
    loadProducts();
});
</script>
{% endblock %}