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

{% block title %}ALSO Cloud Marketplace{% endblock %}

{% block extra_css %}
<style>
    :root {
        --also-accent: #0b5d5b;
        --also-accent-soft: rgba(11, 93, 91, 0.1);
        --also-warm: #b7791f;
        --also-danger: #c53030;
        --also-slate: #234e52;
    }

    .also-hero {
        background:
            radial-gradient(circle at top right, rgba(15, 118, 110, 0.18), transparent 38%),
            linear-gradient(135deg, rgba(11, 93, 91, 0.14), rgba(35, 78, 82, 0.08));
        border: 1px solid rgba(11, 93, 91, 0.16);
        border-radius: 20px;
        padding: 1.4rem;
        margin-bottom: 1.25rem;
    }

    .also-kpi {
        border: 1px solid var(--border-color);
        border-radius: 16px;
        background: var(--bg-card);
        padding: 1rem;
        height: 100%;
    }

    .also-kpi .label {
        color: var(--text-secondary);
        font-size: 0.8rem;
        text-transform: uppercase;
        letter-spacing: 0.06em;
    }

    .also-kpi .value {
        font-size: 1.75rem;
        font-weight: 700;
        line-height: 1.1;
        color: var(--also-slate);
    }

    .also-card {
        border: 1px solid var(--border-color);
        border-radius: 18px;
        background: var(--bg-card);
    }

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

    .status-pill {
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        padding: 0.35rem 0.7rem;
        border-radius: 999px;
        font-size: 0.78rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

    .status-new, .status-lines_imported {
        background: rgba(35, 78, 82, 0.12);
        color: var(--also-slate);
    }

    .status-ready_for_approval, .status-partial {
        background: rgba(183, 121, 31, 0.14);
        color: var(--also-warm);
    }

    .status-approved, .status-completed, .status-invoiced {
        background: rgba(11, 93, 91, 0.14);
        color: var(--also-accent);
    }

    .status-error {
        background: rgba(197, 48, 48, 0.14);
        color: var(--also-danger);
    }

    .status-matching_customers, .status-matching_products {
        background: rgba(56, 161, 105, 0.13);
        color: #276749;
    }

    .dropzone {
        border: 1.5px dashed rgba(11, 93, 91, 0.28);
        border-radius: 16px;
        padding: 1rem;
        background: var(--also-accent-soft);
    }

    .table-tight td, .table-tight th {
        vertical-align: middle;
        font-size: 0.92rem;
    }

    .table-clickable tbody tr {
        cursor: pointer;
    }

    .table-clickable tbody tr.active-row {
        background: rgba(11, 93, 91, 0.09);
    }

    .mono {
        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
        font-size: 0.83rem;
    }

    .metric-chip {
        display: inline-flex;
        align-items: center;
        gap: 0.45rem;
        padding: 0.4rem 0.65rem;
        border-radius: 999px;
        background: rgba(35, 78, 82, 0.08);
        margin: 0 0.45rem 0.45rem 0;
    }

    .metric-chip strong {
        font-size: 0.88rem;
    }

    .upload-result {
        white-space: pre-wrap;
        font-size: 0.9rem;
        min-height: 4rem;
    }

    .panel-muted {
        color: var(--text-secondary);
    }

    .sticky-detail {
        position: sticky;
        top: 1rem;
    }

    .map-editor {
        margin-top: 0.75rem;
        padding: 0.75rem;
        border: 1px solid rgba(11, 93, 91, 0.16);
        border-radius: 12px;
        background: rgba(11, 93, 91, 0.04);
    }

    .map-results {
        border: 1px solid var(--border-color);
        border-radius: 10px;
        background: var(--bg-card);
        max-height: 220px;
        overflow: auto;
    }

    .map-result-item {
        width: 100%;
        border: 0;
        border-bottom: 1px solid var(--border-color);
        background: transparent;
        text-align: left;
        padding: 0.65rem 0.8rem;
    }

    .map-result-item:last-child {
        border-bottom: 0;
    }

    .map-result-item:hover {
        background: rgba(11, 93, 91, 0.08);
    }
</style>
{% endblock %}

{% block content %}
<div class="also-hero d-flex flex-wrap justify-content-between align-items-start gap-3">
    <div>
        <h2 class="mb-1">ALSO Cloud Marketplace</h2>
        <p class="mb-0 text-muted">Upload billing-grundlag, gennemse importhistorik og følg status fra rå linjer til ordrekladder.</p>
    </div>
    <div class="d-flex align-items-center gap-2">
        <span id="alsoConfigStatus" class="status-pill status-new">Indlæser...</span>
        <button class="btn btn-outline-secondary" id="btnRefreshAll">
            <i class="bi bi-arrow-repeat me-1"></i>Opdater
        </button>
    </div>
</div>

<div class="row g-3 mb-4" id="kpiRow">
    <div class="col-6 col-xl-2">
        <div class="also-kpi">
            <div class="label">Omsætning</div>
            <div class="value" id="kpiRevenue">0 kr.</div>
        </div>
    </div>
    <div class="col-6 col-xl-2">
        <div class="also-kpi">
            <div class="label">Kost</div>
            <div class="value" id="kpiCost">0 kr.</div>
        </div>
    </div>
    <div class="col-6 col-xl-2">
        <div class="also-kpi">
            <div class="label">Margin</div>
            <div class="value" id="kpiMargin">0 kr.</div>
        </div>
    </div>
    <div class="col-6 col-xl-2">
        <div class="also-kpi">
            <div class="label">Afventer godkendelse</div>
            <div class="value" id="kpiPending">0</div>
        </div>
    </div>
    <div class="col-6 col-xl-2">
        <div class="also-kpi">
            <div class="label">Manglende kunder</div>
            <div class="value" id="kpiMissingCustomers">0</div>
        </div>
    </div>
    <div class="col-6 col-xl-2">
        <div class="also-kpi">
            <div class="label">Manglende produkter</div>
            <div class="value" id="kpiMissingProducts">0</div>
        </div>
    </div>
</div>

<div class="row g-3 mb-4">
    <div class="col-12 col-xl-5">
        <div class="also-card card h-100">
            <div class="card-header">
                <h5 class="mb-0">Upload Billing-Grundlag</h5>
            </div>
            <div class="card-body">
                <div class="dropzone">
                    <div class="mb-3">
                        <label for="alsoZipFile" class="form-label fw-semibold">Excel-fil fra ALSO (.xlsx)</label>
                        <input class="form-control" type="file" id="alsoZipFile" accept=".xlsx,.zip,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/zip">
                    </div>
                    <div class="d-flex flex-wrap gap-2">
                        <button class="btn btn-primary" id="btnUploadZip">
                            <i class="bi bi-upload me-1"></i>Upload og Behandl
                        </button>
                        <button class="btn btn-outline-secondary" id="btnClearUploadResult">Ryd status</button>
                    </div>
                    <div class="small text-muted mt-2">Workflow: upload af ALSO Excel, matching, validering og automatisk oprettelse af ordrekladder for klare linjer. ZIP kan stadig bruges som fallback.</div>
                </div>
                <div class="upload-result mt-3" id="uploadResult">Ingen upload kørt endnu.</div>
            </div>
        </div>
    </div>

    <div class="col-12 col-xl-7">
        <div class="also-card card h-100">
            <div class="card-header">
                <h5 class="mb-0">Statusfordeling</h5>
            </div>
            <div class="card-body">
                <div class="mb-3">
                    <div class="fw-semibold mb-2">Linjer</div>
                    <div id="lineStatusChips"></div>
                </div>
                <div>
                    <div class="fw-semibold mb-2">Importjobs</div>
                    <div id="jobStatusChips"></div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row g-3 mb-4">
    <div class="col-12 col-xl-7">
        <div class="also-card card h-100">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="mb-0">Månedshistorik</h5>
                <select class="form-select form-select-sm" id="historyMonths" style="width: auto;">
                    <option value="6" selected>6 mdr.</option>
                    <option value="12">12 mdr.</option>
                    <option value="24">24 mdr.</option>
                </select>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-tight mb-0">
                        <thead>
                            <tr>
                                <th>Måned</th>
                                <th>Jobs</th>
                                <th>Linjer</th>
                                <th>Kunder</th>
                                <th>Omsætning</th>
                                <th>Kost</th>
                                <th>Margin</th>
                            </tr>
                        </thead>
                        <tbody id="monthlyHistoryBody">
                            <tr><td colspan="7" class="text-center py-4 text-muted">Indlæser...</td></tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <div class="col-12 col-xl-5">
        <div class="also-card card h-100">
            <div class="card-header">
                <h5 class="mb-0">Månedlige Afvigelser</h5>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-tight mb-0">
                        <thead>
                            <tr>
                                <th>Kunde</th>
                                <th>Produkt</th>
                                <th>Sidste</th>
                                <th>Nu</th>
                                <th>Ændring</th>
                            </tr>
                        </thead>
                        <tbody id="differencesBody">
                            <tr><td colspan="5" class="text-center py-4 text-muted">Indlæser...</td></tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row g-3">
    <div class="col-12 col-xl-7">
        <div class="also-card card mb-3">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="mb-0">Importhistorik</h5>
                <button class="btn btn-sm btn-outline-secondary" id="btnRefreshJobs">Opdater jobs</button>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-hover table-tight table-clickable mb-0">
                        <thead>
                            <tr>
                                <th>Job</th>
                                <th>Status</th>
                                <th>Fil</th>
                                <th>Importeret</th>
                                <th>Linjer</th>
                            </tr>
                        </thead>
                        <tbody id="jobsBody">
                            <tr><td colspan="5" class="text-center py-4 text-muted">Indlæser...</td></tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <div class="also-card card">
            <div class="card-header d-flex flex-wrap justify-content-between align-items-center gap-2">
                <h5 class="mb-0">Queue Snapshot</h5>
                <div class="d-flex gap-2">
                    <select class="form-select form-select-sm" id="queueStatusFilter" style="width: auto;">
                        <option value="">Alle statusser</option>
                        <option value="new">Ny</option>
                        <option value="matching_customers">Matcher kunder</option>
                        <option value="matching_products">Matcher produkter</option>
                        <option value="ready_for_approval">Klar til godkendelse</option>
                        <option value="approved">Godkendt</option>
                        <option value="invoiced">Faktureret</option>
                        <option value="error">Fejl</option>
                    </select>
                    <button class="btn btn-sm btn-outline-secondary" id="btnRefreshQueue">Opdater</button>
                </div>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-tight mb-0">
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>Status</th>
                                <th>Kunde</th>
                                <th>Produkt</th>
                                <th>Beløb</th>
                                <th>Kost</th>
                                <th>Margin</th>
                                <th>Draft</th>
                            </tr>
                        </thead>
                        <tbody id="queueBody">
                            <tr><td colspan="8" class="text-center py-4 text-muted">Indlæser...</td></tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <div class="col-12 col-xl-5">
        <div class="also-card card sticky-detail">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="mb-0">Job Detaljer</h5>
                <div class="d-flex align-items-center gap-2">
                    <span class="small text-muted" id="selectedJobHint">Vælg et job</span>
                    <button class="btn btn-sm btn-outline-primary" id="btnAutoMapJob" disabled>
                        <i class="bi bi-magic me-1"></i>Auto-map
                    </button>
                    <button class="btn btn-sm btn-outline-danger" id="btnDeleteJob" disabled>
                        <i class="bi bi-trash me-1"></i>Slet import
                    </button>
                </div>
            </div>
            <div class="card-body">
                <div id="jobMeta" class="panel-muted mb-3">Ingen job valgt endnu.</div>
                <div class="table-responsive">
                    <table class="table table-sm table-tight">
                        <thead>
                            <tr>
                                <th>Linje</th>
                                <th>Status</th>
                                <th>Kunde / Produkt</th>
                                <th>Beløb</th>
                            </tr>
                        </thead>
                        <tbody id="jobLinesBody">
                            <tr><td colspan="4" class="text-center py-4 text-muted">Vælg et job for at se linjer.</td></tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
(() => {
    const state = {
        selectedJobId: null,
        jobs: [],
        selectedJobLines: [],
        activeMapLineId: null,
        activeProductMapLineId: null,
        lineCustomerSelections: {},
        lineCustomerSearchResults: {},
        lineCustomerSearchQueries: {},
        lineSearchTimers: {},
        lineProductSelections: {},
        lineProductSearchResults: {},
        lineProductSearchQueries: {},
        lineProductSearchTimers: {},
    };

    const el = (id) => document.getElementById(id);

    const statusBadge = (status) => {
        const s = String(status || 'unknown').toLowerCase();
        return `<span class="status-pill status-${s}">${s.replaceAll('_', ' ')}</span>`;
    };

    const formatCurrency = (value) => {
        const n = Number(value || 0);
        return n.toLocaleString('da-DK', { style: 'currency', currency: 'DKK', maximumFractionDigits: 2 });
    };

    const escapeHtml = (value) => String(value ?? '')
        .replaceAll('&', '&amp;')
        .replaceAll('<', '&lt;')
        .replaceAll('>', '&gt;')
        .replaceAll('"', '&quot;')
        .replaceAll("'", '&#39;');

    const formatNumber = (value) => Number(value || 0).toLocaleString('da-DK');
    const formatDateTime = (value) => value ? new Date(value).toLocaleString('da-DK') : '-';
    const formatMonth = (value) => value ? new Date(value).toLocaleDateString('da-DK', { year: 'numeric', month: 'short' }) : '-';

    const fetchJson = async (url, options = {}) => {
        const res = await fetch(url, options);
        if (!res.ok) {
            const text = await res.text();
            let message = text || `HTTP ${res.status}`;
            try {
                const parsed = JSON.parse(text);
                if (typeof parsed?.detail === 'string' && parsed.detail.trim()) {
                    message = parsed.detail.trim();
                } else if (parsed?.detail?.message) {
                    message = parsed.detail.message;
                } else if (parsed?.message) {
                    message = parsed.message;
                }
            } catch {}
            throw new Error(message);
        }
        return res.json();
    };

    const renderUploadResult = (payload) => {
        if (!payload) {
            el('uploadResult').textContent = 'Ingen upload kørt endnu.';
            return;
        }
        const lines = [
            `Job #${payload.job_id} (${payload.status})`,
            `Linjer modtaget: ${formatNumber(payload.import_result?.received || 0)}`,
            `Linjer indsat: ${formatNumber(payload.import_result?.inserted || 0)}`,
            `Dubletter: ${formatNumber(payload.import_result?.duplicates || 0)}`,
            `Klar til approval efter validering: ${formatNumber(payload.validation_result?.ready_for_approval || 0)}`,
            `Oprettede ordrekladder: ${formatNumber(payload.approval_result?.created_drafts || 0)}`,
            `Approved linjer: ${formatNumber(payload.queue_totals?.approved_lines || 0)}`,
            `Fejllinjer: ${formatNumber(payload.queue_totals?.error_lines || 0)}`
        ];
        el('uploadResult').textContent = lines.join('\n');
    };

    const loadConfig = async () => {
        const config = await fetchJson('/api/v1/also/config');
        const label = !config.enabled
            ? 'ALSO deaktiveret'
            : config.read_only
                ? 'Read-only'
                : config.dry_run
                    ? 'Dry-run'
                    : 'Aktiv';
        const css = !config.enabled ? 'status-error' : (config.read_only || config.dry_run ? 'status-ready_for_approval' : 'status-approved');
        const node = el('alsoConfigStatus');
        node.className = `status-pill ${css}`;
        node.textContent = label;
    };

    const loadSummary = async () => {
        const summary = await fetchJson('/api/v1/also/dashboard/summary');
        el('kpiRevenue').textContent = formatCurrency(summary.monthly_revenue);
        el('kpiCost').textContent = formatCurrency(summary.monthly_cost);
        el('kpiMargin').textContent = formatCurrency(summary.monthly_margin);
        el('kpiPending').textContent = formatNumber(summary.pending_approvals);
        el('kpiMissingCustomers').textContent = formatNumber(summary.unmatched_customers);
        el('kpiMissingProducts').textContent = formatNumber(summary.unmatched_products);
    };

    const loadBreakdown = async () => {
        const data = await fetchJson('/api/v1/also/dashboard/status-breakdown');
        const renderChips = (rows) => rows.length
            ? rows.map(row => `
                <span class="metric-chip">
                    ${statusBadge(row.queue_status || row.status)}
                    <strong>${formatNumber(row.current_month_count ?? row.total_count)}</strong>
                    <span class="small text-muted">${row.current_month_count != null ? `denne måned / ${formatNumber(row.total_count)} total` : `${formatNumber(row.total_count)} total`}</span>
                </span>
            `).join('')
            : '<div class="text-muted">Ingen data</div>';

        el('lineStatusChips').innerHTML = renderChips(data.line_statuses || []);
        el('jobStatusChips').innerHTML = renderChips(data.job_statuses || []);
    };

    const loadMonthlyHistory = async () => {
        const months = el('historyMonths').value;
        const rows = await fetchJson(`/api/v1/also/dashboard/monthly-history?months=${months}`);
        el('monthlyHistoryBody').innerHTML = rows.length
            ? rows.map(row => `
                <tr>
                    <td>${formatMonth(row.month_start)}</td>
                    <td>${formatNumber(row.job_count)}</td>
                    <td>${formatNumber(row.line_count)}</td>
                    <td>${formatNumber(row.customer_count)}</td>
                    <td>${formatCurrency(row.revenue)}</td>
                    <td>${formatCurrency(row.cost)}</td>
                    <td>${formatCurrency(row.margin)}</td>
                </tr>
            `).join('')
            : '<tr><td colspan="7" class="text-center py-4 text-muted">Ingen historik</td></tr>';
    };

    const loadDifferences = async () => {
        const rows = await fetchJson('/api/v1/also/dashboard/differences?limit=20');
        el('differencesBody').innerHTML = rows.length
            ? rows.map(row => `
                <tr>
                    <td>${row.customer_name || '-'}</td>
                    <td>
                        <div>${row.product_name || '-'}</div>
                        <div class="small text-muted mono">${row.material_number || '-'}</div>
                    </td>
                    <td>${formatNumber(row.previous_month_qty)}</td>
                    <td>${formatNumber(row.current_month_qty)}</td>
                    <td class="${row.warning ? 'text-danger fw-semibold' : ''}">${row.change_percent == null ? '-' : `${Number(row.change_percent).toLocaleString('da-DK')}%`}</td>
                </tr>
            `).join('')
            : '<tr><td colspan="5" class="text-center py-4 text-muted">Ingen afvigelser</td></tr>';
    };

    const loadJobs = async () => {
        const rows = await fetchJson('/api/v1/also/import-jobs?limit=50');
        state.jobs = rows;
        if (state.selectedJobId && !rows.some(row => row.id === state.selectedJobId)) {
            state.selectedJobId = null;
        }
        el('jobsBody').innerHTML = rows.length
            ? rows.map(row => `
                <tr data-job-row="${row.id}" class="${state.selectedJobId === row.id ? 'active-row' : ''}">
                    <td class="fw-semibold">#${row.id}</td>
                    <td>${statusBadge(row.status)}</td>
                    <td>${row.file_name || '-'}</td>
                    <td>${formatDateTime(row.imported_at)}</td>
                    <td>${formatNumber(row.line_count)}</td>
                </tr>
            `).join('')
            : '<tr><td colspan="5" class="text-center py-4 text-muted">Ingen importjobs endnu.</td></tr>';

        if (!state.selectedJobId && rows.length) {
            state.selectedJobId = rows[0].id;
        }
        if (!rows.length) {
            el('btnAutoMapJob').disabled = true;
            el('btnDeleteJob').disabled = true;
            el('selectedJobHint').textContent = 'Vælg et job';
            el('jobMeta').textContent = 'Ingen job valgt endnu.';
            el('jobLinesBody').innerHTML = '<tr><td colspan="4" class="text-center py-4 text-muted">Vælg et job for at se linjer.</td></tr>';
        }
        if (state.selectedJobId) {
            await loadJobDetails(state.selectedJobId);
        }
    };

    const loadJobDetails = async (jobId) => {
        state.selectedJobId = jobId;
        const [job, lines] = await Promise.all([
            fetchJson(`/api/v1/also/import-jobs/${jobId}`),
            fetchJson(`/api/v1/also/import-jobs/${jobId}/lines?limit=250`)
        ]);

        document.querySelectorAll('[data-job-row]').forEach(row => {
            row.classList.toggle('active-row', Number(row.getAttribute('data-job-row')) === jobId);
        });

        el('selectedJobHint').textContent = `Job #${jobId}`;
        el('btnAutoMapJob').disabled = false;
        el('btnDeleteJob').disabled = false;
        const payload = job.raw_payload_json || {};
        const uploadedEntries = Array.isArray(payload.uploaded_entries)
            ? payload.uploaded_entries
            : (Array.isArray(payload.zip_entries) ? payload.zip_entries : []);
        const entryLabel = payload.upload_format === 'xlsx' ? 'Upload' : 'ZIP entries';
        const entryList = uploadedEntries.slice(0, 6).join(', ');
        el('jobMeta').innerHTML = `
            <div class="mb-2"><strong>Fil:</strong> ${job.file_name || '-'}</div>
            <div class="mb-2"><strong>Status:</strong> ${statusBadge(job.status)}</div>
            <div class="mb-2"><strong>Importeret:</strong> ${formatDateTime(job.imported_at)}</div>
            <div class="mb-2"><strong>Source:</strong> ${job.source_label || '-'} / ${job.source_type || '-'}</div>
            <div class="mb-2"><strong>Linjer:</strong> ${formatNumber(job.line_count)}</div>
            <div><strong>${entryLabel}:</strong> <span class="mono">${entryList || '-'}</span></div>
        `;

        state.selectedJobLines = lines;
        renderJobLines();
    };

    const renderMapEditor = (line) => {
        const lineId = Number(line.id);
        const selected = state.lineCustomerSelections[lineId];
        const results = state.lineCustomerSearchResults[lineId] || [];
        const query = state.lineCustomerSearchQueries[lineId] || '';

        return `
            <div class="map-editor">
                <div class="small fw-semibold mb-2">Manuel company-mapping</div>
                <div class="input-group input-group-sm mb-2">
                    <input
                        type="text"
                        class="form-control js-company-search-input"
                        data-line-id="${lineId}"
                        value="${escapeHtml(query)}"
                        placeholder="Søg kunde (min. 2 tegn)"
                        autocomplete="off"
                    >
                    <button class="btn btn-outline-secondary js-company-map-cancel" data-line-id="${lineId}" type="button">Luk</button>
                </div>
                ${selected ? `
                    <div class="small text-success mb-2">
                        Valgt kunde: <strong>${escapeHtml(selected.name)}</strong> (${escapeHtml(selected.id)})
                    </div>
                ` : `
                    <div class="small text-muted mb-2">Vælg kunde og gem mappingen for denne ALSO-company.</div>
                `}
                <div class="map-results mb-2">
                    ${results.length
                        ? results.map(customer => `
                            <button type="button" class="map-result-item js-company-result" data-line-id="${lineId}" data-customer-id="${customer.id}" data-customer-name="${escapeHtml(customer.name)}">
                                <strong>${escapeHtml(customer.name)}</strong>
                                <div class="small text-muted">ID ${escapeHtml(customer.id)}${customer.cvr_nummer ? ` · CVR ${escapeHtml(customer.cvr_nummer)}` : ''}</div>
                            </button>
                        `).join('')
                        : `<div class="small text-muted p-3">${query.trim().length >= 2 ? 'Ingen kunder fundet.' : 'Skriv mindst 2 tegn for at søge.'}</div>`
                    }
                </div>
                <div class="d-flex gap-2">
                    <button class="btn btn-sm btn-primary js-company-map-save" data-line-id="${lineId}" type="button" ${selected ? '' : 'disabled'}>
                        Gem company-mapping
                    </button>
                    ${line.matched_customer_name ? `<div class="small text-muted align-self-center">Nuværende: ${escapeHtml(line.matched_customer_name)}</div>` : ''}
                </div>
            </div>
        `;
    };

    const renderProductMapEditor = (line) => {
        const lineId = Number(line.id);
        const selected = state.lineProductSelections[lineId];
        const results = state.lineProductSearchResults[lineId] || [];
        const query = state.lineProductSearchQueries[lineId] || '';

        return `
            <div class="map-editor">
                <div class="small fw-semibold mb-2">Manuel produkt-mapping</div>
                <div class="input-group input-group-sm mb-2">
                    <input
                        type="text"
                        class="form-control js-product-search-input"
                        data-line-id="${lineId}"
                        value="${escapeHtml(query)}"
                        placeholder="Søg vare eller SKU (min. 2 tegn)"
                        autocomplete="off"
                    >
                    <button class="btn btn-outline-secondary js-product-map-cancel" data-line-id="${lineId}" type="button">Luk</button>
                </div>
                ${selected ? `
                    <div class="small text-success mb-2">
                        Valgt vare: <strong>${escapeHtml(selected.name)}</strong> (${escapeHtml(selected.id)})
                    </div>
                ` : `
                    <div class="small text-muted mb-2">Vælg vare og gem mappingen for dette ALSO-produkt.</div>
                `}
                <div class="map-results mb-2">
                    ${results.length
                        ? results.map(product => `
                            <button type="button" class="map-result-item js-product-result" data-line-id="${lineId}" data-product-id="${product.id}" data-product-name="${escapeHtml(product.name)}">
                                <strong>${escapeHtml(product.name)}</strong>
                                <div class="small text-muted">ID ${escapeHtml(product.id)}${product.sku_internal ? ` · SKU ${escapeHtml(product.sku_internal)}` : ''}${product.supplier_sku ? ` · Leverandør-SKU ${escapeHtml(product.supplier_sku)}` : ''}</div>
                            </button>
                        `).join('')
                        : `<div class="small text-muted p-3">${query.trim().length >= 2 ? 'Ingen varer fundet.' : 'Skriv mindst 2 tegn for at søge.'}</div>`
                    }
                </div>
                <div class="d-flex gap-2">
                    <button class="btn btn-sm btn-primary js-product-map-save" data-line-id="${lineId}" type="button" ${selected ? '' : 'disabled'}>
                        Gem produkt-mapping
                    </button>
                    ${line.matched_product_name ? `<div class="small text-muted align-self-center">Nuværende: ${escapeHtml(line.matched_product_name)}</div>` : ''}
                </div>
            </div>
        `;
    };

    const renderJobLines = () => {
        const lines = state.selectedJobLines || [];
        el('jobLinesBody').innerHTML = lines.length
            ? lines.map(line => `
                <tr>
                    <td class="mono">#${line.id}<br><span class="text-muted">L${line.line_no || '-'}</span></td>
                    <td>${statusBadge(line.queue_status)}</td>
                    <td>
                        <div>${escapeHtml(line.matched_customer_name || line.company || '-')}</div>
                        <div class="small text-muted">${escapeHtml(line.matched_product_name || line.product_name || '-')}</div>
                        <div class="small text-muted mono">${escapeHtml(line.vendor || '-')} / ${escapeHtml(line.material_number || '-')}</div>
                        ${(line.validation_errors_json || []).length ? `<div class="small text-danger">${escapeHtml(line.validation_errors_json.map(err => err.message || err.code || 'Fejl').join(', '))}</div>` : ''}
                        ${line.order_draft_id ? `<div class="small mono">Draft #${line.order_draft_id} / ${escapeHtml(line.order_draft_sync_status || 'pending')}</div>` : ''}
                        ${line.also_company_id ? `
                            <div class="small text-muted mt-1">
                                ALSO company: <span class="mono">${escapeHtml(line.also_company_id)}</span>
                            </div>
                            <div class="mt-2">
                                <button class="btn btn-sm btn-outline-secondary js-company-map-toggle" data-line-id="${line.id}" type="button">
                                    ${state.activeMapLineId === Number(line.id) ? 'Luk mapping' : 'Ret kunde'}
                                </button>
                            </div>
                            ${state.activeMapLineId === Number(line.id) ? renderMapEditor(line) : ''}
                        ` : ''}
                        ${line.material_number ? `
                            <div class="small text-muted mt-1">
                                ALSO produkt: <span class="mono">${escapeHtml(line.vendor || 'ALSO')} / ${escapeHtml(line.material_number)}</span>
                            </div>
                            <div class="mt-2">
                                <button class="btn btn-sm btn-outline-secondary js-product-map-toggle" data-line-id="${line.id}" type="button">
                                    ${state.activeProductMapLineId === Number(line.id) ? 'Luk produkt' : 'Ret produkt'}
                                </button>
                            </div>
                            ${state.activeProductMapLineId === Number(line.id) ? renderProductMapEditor(line) : ''}
                        ` : ''}
                    </td>
                    <td class="text-end">
                        <div>${formatCurrency(line.total_price || line.sales_price || 0)}</div>
                        <div class="small text-muted">Kost ${formatCurrency(line.effective_cost_amount || line.cost_amount || 0)}</div>
                        <div class="small text-muted">Margin ${formatCurrency(line.effective_margin_amount || (Number(line.total_price || line.sales_price || 0) - Number(line.effective_cost_amount || line.cost_amount || 0)))}</div>
                        <div class="small text-muted">${formatNumber(line.billable_parameters || 1)} stk</div>
                    </td>
                </tr>
            `).join('')
            : '<tr><td colspan="4" class="text-center py-4 text-muted">Ingen linjer fundet.</td></tr>';
    };

    const searchCustomersForLine = async (lineId, query) => {
        state.lineCustomerSearchQueries[lineId] = query;
        if ((query || '').trim().length < 2) {
            state.lineCustomerSearchResults[lineId] = [];
            renderJobLines();
            return;
        }

        const rows = await fetchJson(`/api/v1/search/customers?q=${encodeURIComponent(query.trim())}`);
        state.lineCustomerSearchResults[lineId] = rows || [];
        renderJobLines();
    };

    const saveCompanyMapping = async (lineId) => {
        const selected = state.lineCustomerSelections[lineId];
        if (!selected) {
            alert('Vælg en kunde først.');
            return;
        }

        el('uploadResult').textContent = `Gemmer company-mapping for linje #${lineId}...`;
        const result = await fetchJson(`/api/v1/also/import-lines/${lineId}/map-company`, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({
                customer_id: Number(selected.id),
                notes: 'Manual mapping from ALSO Cloud Marketplace UI',
            }),
        });

        state.activeMapLineId = null;
        delete state.lineCustomerSelections[lineId];
        delete state.lineCustomerSearchResults[lineId];
        delete state.lineCustomerSearchQueries[lineId];

        el('uploadResult').textContent = [
            `Linje #${result.line_id} mappet til ${result.customer_name} (#${result.customer_id})`,
            `Berørte linjer i job: ${formatNumber(result.affected_line_count || 0)}`,
            `Ready after validation: ${formatNumber(result.validation_result?.ready_for_approval || 0)}`,
            `Approved linjer: ${formatNumber(result.approval_result?.approved_lines || 0)}`,
            `Oprettede ordrekladder: ${formatNumber(result.approval_result?.created_drafts || 0)}`,
        ].join('\n');

        await refreshAll();
        if (state.selectedJobId) {
            await loadJobDetails(state.selectedJobId);
        }
    };

    const searchProductsForLine = async (lineId, query) => {
        state.lineProductSearchQueries[lineId] = query;
        if ((query || '').trim().length < 2) {
            state.lineProductSearchResults[lineId] = [];
            renderJobLines();
            return;
        }

        const rows = await fetchJson(`/api/v1/search/products?q=${encodeURIComponent(query.trim())}`);
        state.lineProductSearchResults[lineId] = rows || [];
        renderJobLines();
    };

    const saveProductMapping = async (lineId) => {
        const selected = state.lineProductSelections[lineId];
        if (!selected) {
            alert('Vælg en vare først.');
            return;
        }

        el('uploadResult').textContent = `Gemmer produkt-mapping for linje #${lineId}...`;
        const result = await fetchJson(`/api/v1/also/import-lines/${lineId}/map-product`, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({
                product_id: Number(selected.id),
                notes: 'Manual product mapping from ALSO Cloud Marketplace UI',
            }),
        });

        state.activeProductMapLineId = null;
        delete state.lineProductSelections[lineId];
        delete state.lineProductSearchResults[lineId];
        delete state.lineProductSearchQueries[lineId];

        el('uploadResult').textContent = [
            `Linje #${result.line_id} mappet til ${result.product_name} (#${result.product_id})`,
            `Berørte linjer i job: ${formatNumber(result.affected_line_count || 0)}`,
            `Ready after validation: ${formatNumber(result.validation_result?.ready_for_approval || 0)}`,
            `Approved linjer: ${formatNumber(result.approval_result?.approved_lines || 0)}`,
            `Oprettede ordrekladder: ${formatNumber(result.approval_result?.created_drafts || 0)}`,
        ].join('\n');

        await refreshAll();
        if (state.selectedJobId) {
            await loadJobDetails(state.selectedJobId);
        }
    };

    const autoMapSelectedJob = async () => {
        if (!state.selectedJobId) return;
        el('uploadResult').textContent = `Kører auto-map for job #${state.selectedJobId}...`;
        const result = await fetchJson(`/api/v1/also/import-jobs/${state.selectedJobId}/auto-map`, {
            method: 'POST',
        });
        const lines = [
            `Job #${result.job_id} (${result.status})`,
            `Oprettede company mappings: ${formatNumber(result.customer_mappings_created || 0)}`,
            `Oprettede product mappings: ${formatNumber(result.product_mappings_created || 0)}`,
            `Oprettede varer: ${formatNumber(result.products_created || 0)}`,
            `Ready after validation: ${formatNumber(result.validation_result?.ready_for_approval || 0)}`,
            `Approved linjer: ${formatNumber(result.queue_totals?.approved_lines || 0)}`,
            `Fejllinjer: ${formatNumber(result.queue_totals?.error_lines || 0)}`,
            `Oprettede ordrekladder: ${formatNumber(result.approval_result?.created_drafts || 0)}`,
        ];
        el('uploadResult').textContent = lines.join('\n');
        await refreshAll();
        if (state.selectedJobId) {
            await loadJobDetails(state.selectedJobId);
        }
    };

    const deleteSelectedJob = async () => {
        if (!state.selectedJobId) return;

        const simpleConfirm = window.confirm(`Slet importjob #${state.selectedJobId}?\n\nDet sletter jobbet og alle importerede ALSO-linjer for jobbet.`);
        if (!simpleConfirm) return;

        try {
            const result = await fetchJson(`/api/v1/also/import-jobs/${state.selectedJobId}`, {
                method: 'DELETE',
            });
            renderUploadResult({
                job_id: result.deleted_job_id,
                status: 'deleted',
                import_result: { received: 0, inserted: 0, duplicates: 0 },
                validation_result: { ready_for_approval: 0 },
                approval_result: { created_drafts: result.deleted_order_draft_ids?.length || 0 },
                queue_totals: { approved_lines: 0, error_lines: 0 },
            });
            state.selectedJobId = null;
            el('selectedJobHint').textContent = 'Vælg et job';
            el('btnDeleteJob').disabled = true;
            el('jobMeta').textContent = 'Importjob slettet.';
            el('jobLinesBody').innerHTML = '<tr><td colspan="4" class="text-center py-4 text-muted">Vælg et job for at se linjer.</td></tr>';
            await refreshAll();
            return;
        } catch (err) {
            let detail = null;
            try {
                detail = JSON.parse(err.message);
            } catch {
                detail = null;
            }

            if (!detail || !detail.detail || typeof detail.detail !== 'object') {
                console.error(err);
                alert('Sletning af import fejlede.');
                return;
            }

            const info = detail.detail;
            if (!info.drafts || !Array.isArray(info.drafts) || !info.drafts.length) {
                alert(info.message || 'Sletning af import fejlede.');
                return;
            }

            if (info.blocked_draft_count > 0) {
                alert('Importen har ordrekladder som allerede er eksporteret eller bogført. De skal håndteres manuelt først.');
                return;
            }

            const confirmDraftDelete = window.confirm(
                `Importjob #${state.selectedJobId} har ${info.draft_count} tilknyttede ordrekladder.\n\n` +
                'Vil du slette både importjob og disse ikke-eksporterede ordrekladder?'
            );
            if (!confirmDraftDelete) return;

            const result = await fetchJson(`/api/v1/also/import-jobs/${state.selectedJobId}?delete_order_drafts=true`, {
                method: 'DELETE',
            });
            renderUploadResult({
                job_id: result.deleted_job_id,
                status: 'deleted',
                import_result: { received: 0, inserted: 0, duplicates: 0 },
                validation_result: { ready_for_approval: 0 },
                approval_result: { created_drafts: result.deleted_order_draft_ids?.length || 0 },
                queue_totals: { approved_lines: 0, error_lines: 0 },
            });
            state.selectedJobId = null;
            el('selectedJobHint').textContent = 'Vælg et job';
            el('btnDeleteJob').disabled = true;
            el('jobMeta').textContent = 'Importjob og tilknyttede ordrekladder slettet.';
            el('jobLinesBody').innerHTML = '<tr><td colspan="4" class="text-center py-4 text-muted">Vælg et job for at se linjer.</td></tr>';
            await refreshAll();
        }
    };

    const loadQueue = async () => {
        const status = el('queueStatusFilter').value;
        const qs = new URLSearchParams({ limit: '80' });
        if (status) qs.set('status', status);
        const rows = await fetchJson(`/api/v1/also/queue?${qs.toString()}`);
        el('queueBody').innerHTML = rows.length
            ? rows.map(row => `
                <tr>
                    <td class="mono">#${row.id}</td>
                    <td>${statusBadge(row.queue_status)}</td>
                    <td>${row.matched_customer_id || row.company || '-'}</td>
                    <td>
                        <div>${row.product_name || '-'}</div>
                        <div class="small text-muted mono">${row.material_number || '-'}</div>
                    </td>
                    <td>${formatCurrency(row.total_price || 0)}</td>
                    <td>${formatCurrency(row.effective_cost_amount || row.cost_amount || 0)}</td>
                    <td>${formatCurrency(row.effective_margin_amount || (Number(row.total_price || 0) - Number(row.effective_cost_amount || row.cost_amount || 0)))}</td>
                    <td>${row.order_draft_id ? `<a href="/ordre/${row.order_draft_id}" class="mono">#${row.order_draft_id}</a>` : '-'}</td>
                </tr>
            `).join('')
            : '<tr><td colspan="8" class="text-center py-4 text-muted">Ingen linjer i dette filter.</td></tr>';
    };

    const uploadZip = async () => {
        const file = el('alsoZipFile').files?.[0];
        if (!file) {
            alert('Vælg en ZIP-fil først.');
            return;
        }
        const formData = new FormData();
        formData.append('file', file);
        el('uploadResult').textContent = 'Uploader og behandler...';
        const payload = await fetchJson('/api/v1/also/import-upload', {
            method: 'POST',
            body: formData,
        });
        renderUploadResult(payload);
        state.selectedJobId = payload.job_id || state.selectedJobId;
        await refreshAll();
    };

    const refreshAll = async () => {
        await Promise.all([
            loadConfig(),
            loadSummary(),
            loadBreakdown(),
            loadMonthlyHistory(),
            loadDifferences(),
            loadQueue(),
        ]);
        await loadJobs();
    };

    document.addEventListener('click', async (event) => {
        const mapToggle = event.target.closest('.js-company-map-toggle');
        if (mapToggle) {
            const lineId = Number(mapToggle.getAttribute('data-line-id'));
            state.activeMapLineId = state.activeMapLineId === lineId ? null : lineId;
            renderJobLines();
            return;
        }

        const productMapToggle = event.target.closest('.js-product-map-toggle');
        if (productMapToggle) {
            const lineId = Number(productMapToggle.getAttribute('data-line-id'));
            state.activeProductMapLineId = state.activeProductMapLineId === lineId ? null : lineId;
            renderJobLines();
            return;
        }

        const mapCancel = event.target.closest('.js-company-map-cancel');
        if (mapCancel) {
            state.activeMapLineId = null;
            renderJobLines();
            return;
        }

        const productMapCancel = event.target.closest('.js-product-map-cancel');
        if (productMapCancel) {
            state.activeProductMapLineId = null;
            renderJobLines();
            return;
        }

        const resultButton = event.target.closest('.js-company-result');
        if (resultButton) {
            const lineId = Number(resultButton.getAttribute('data-line-id'));
            state.lineCustomerSelections[lineId] = {
                id: Number(resultButton.getAttribute('data-customer-id')),
                name: resultButton.getAttribute('data-customer-name') || '',
            };
            renderJobLines();
            return;
        }

        const productResultButton = event.target.closest('.js-product-result');
        if (productResultButton) {
            const lineId = Number(productResultButton.getAttribute('data-line-id'));
            state.lineProductSelections[lineId] = {
                id: Number(productResultButton.getAttribute('data-product-id')),
                name: productResultButton.getAttribute('data-product-name') || '',
            };
            renderJobLines();
            return;
        }

        const saveButton = event.target.closest('.js-company-map-save');
        if (saveButton) {
            const lineId = Number(saveButton.getAttribute('data-line-id'));
            try {
                await saveCompanyMapping(lineId);
            } catch (err) {
                console.error(err);
                el('uploadResult').textContent = `Company-mapping fejlede:\n${err.message}`;
                alert(`Company-mapping fejlede.\n\n${err.message}`);
            }
            return;
        }

        const saveProductButton = event.target.closest('.js-product-map-save');
        if (saveProductButton) {
            const lineId = Number(saveProductButton.getAttribute('data-line-id'));
            try {
                await saveProductMapping(lineId);
            } catch (err) {
                console.error(err);
                el('uploadResult').textContent = `Produkt-mapping fejlede:\n${err.message}`;
                alert(`Produkt-mapping fejlede.\n\n${err.message}`);
            }
            return;
        }

        const row = event.target.closest('[data-job-row]');
        if (!row) return;
        await loadJobDetails(Number(row.getAttribute('data-job-row')));
    });

    document.addEventListener('input', (event) => {
        const input = event.target.closest('.js-company-search-input');
        if (!input) return;
        const lineId = Number(input.getAttribute('data-line-id'));
        const query = input.value || '';
        state.lineCustomerSearchQueries[lineId] = query;
        if (state.lineSearchTimers[lineId]) {
            clearTimeout(state.lineSearchTimers[lineId]);
        }
        state.lineSearchTimers[lineId] = setTimeout(() => {
            searchCustomersForLine(lineId, query).catch((err) => {
                console.error(err);
                state.lineCustomerSearchResults[lineId] = [];
                renderJobLines();
            });
        }, 200);

        return;
    });

    document.addEventListener('input', (event) => {
        const input = event.target.closest('.js-product-search-input');
        if (!input) return;
        const lineId = Number(input.getAttribute('data-line-id'));
        const query = input.value || '';
        state.lineProductSearchQueries[lineId] = query;
        if (state.lineProductSearchTimers[lineId]) {
            clearTimeout(state.lineProductSearchTimers[lineId]);
        }
        state.lineProductSearchTimers[lineId] = setTimeout(() => {
            searchProductsForLine(lineId, query).catch((err) => {
                console.error(err);
                state.lineProductSearchResults[lineId] = [];
                renderJobLines();
            });
        }, 200);
    });

    el('btnUploadZip').addEventListener('click', async () => {
        try {
            await uploadZip();
        } catch (err) {
            console.error(err);
            el('uploadResult').textContent = `Upload fejlede:\n${err.message}`;
            alert(`Upload af ALSO ZIP fejlede.\n\n${err.message}`);
        }
    });

    el('btnClearUploadResult').addEventListener('click', () => renderUploadResult(null));
    el('btnAutoMapJob').addEventListener('click', () => autoMapSelectedJob().catch((err) => {
        console.error(err);
        el('uploadResult').textContent = `Auto-map fejlede:\n${err.message}`;
        alert(`Auto-map fejlede.\n\n${err.message}`);
    }));
    el('btnDeleteJob').addEventListener('click', () => deleteSelectedJob().catch(console.error));
    el('btnRefreshAll').addEventListener('click', () => refreshAll().catch(console.error));
    el('btnRefreshJobs').addEventListener('click', () => loadJobs().catch(console.error));
    el('btnRefreshQueue').addEventListener('click', () => loadQueue().catch(console.error));
    el('queueStatusFilter').addEventListener('change', () => loadQueue().catch(console.error));
    el('historyMonths').addEventListener('change', () => loadMonthlyHistory().catch(console.error));

    refreshAll().catch((err) => {
        console.error(err);
        alert('Kunne ikke indlæse ALSO Cloud Marketplace siden.');
    });
})();
</script>
{% endblock %}