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

{% block title %}FedEx Overblik - BMC Hub{% endblock %}

{% block extra_css %}
<style>
    .fedex-shell {
        display: grid;
        gap: 1rem;
    }

    .fedex-hero {
        border-radius: 14px;
        border: 1px solid rgba(15, 76, 117, 0.16);
        background: linear-gradient(135deg, rgba(15, 76, 117, 0.1), rgba(26, 117, 159, 0.08));
        padding: 1rem 1.1rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
        flex-wrap: wrap;
    }

    .fedex-kpis {
        display: grid;
        gap: 0.7rem;
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .fedex-kpi {
        border: 1px solid rgba(15, 76, 117, 0.16);
        border-radius: 12px;
        background: var(--bg-card);
        padding: 0.75rem 0.85rem;
    }

    .fedex-kpi .label {
        color: var(--text-secondary);
        font-size: 0.76rem;
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

    .fedex-kpi .value {
        font-size: 1.35rem;
        font-weight: 800;
        margin-top: 0.2rem;
    }

    .fedex-filter-card {
        border: 1px solid rgba(15, 76, 117, 0.16);
        border-radius: 12px;
    }

    .fedex-table-wrap {
        border: 1px solid rgba(15, 76, 117, 0.14);
        border-radius: 12px;
        overflow: auto;
        max-height: 70vh;
    }

    .fedex-table thead th {
        position: sticky;
        top: 0;
        z-index: 2;
        background: var(--bg-card);
        color: var(--text-secondary);
        text-transform: uppercase;
        font-size: 0.74rem;
        letter-spacing: 0.04em;
        white-space: nowrap;
    }

    .fedex-table tbody td {
        vertical-align: middle;
        font-size: 0.88rem;
    }

    .fedex-status {
        border-radius: 999px;
        padding: 0.2rem 0.55rem;
        font-size: 0.72rem;
        font-weight: 700;
        border: 1px solid transparent;
        display: inline-flex;
        align-items: center;
    }

    .fedex-status.draft { background: rgba(108, 117, 125, 0.15); border-color: rgba(108, 117, 125, 0.3); color: #5f6b76; }
    .fedex-status.submitted, .fedex-status.booked { background: rgba(13, 110, 253, 0.12); border-color: rgba(13, 110, 253, 0.3); color: #0a58ca; }
    .fedex-status.in_transit { background: rgba(255, 193, 7, 0.15); border-color: rgba(255, 193, 7, 0.35); color: #996f00; }
    .fedex-status.delivered { background: rgba(25, 135, 84, 0.14); border-color: rgba(25, 135, 84, 0.3); color: #146c43; }
    .fedex-status.cancelled, .fedex-status.failed { background: rgba(220, 53, 69, 0.14); border-color: rgba(220, 53, 69, 0.3); color: #b02a37; }

    .fedex-row-title {
        font-weight: 700;
        color: var(--text-primary);
    }

    .fedex-row-meta {
        color: var(--text-secondary);
        font-size: 0.78rem;
        margin-top: 0.15rem;
    }

    @media (max-width: 1100px) {
        .fedex-kpis {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    @media (max-width: 768px) {
        .fedex-kpis {
            grid-template-columns: 1fr;
        }
    }
</style>
{% endblock %}

{% block content %}
<div class="fedex-shell">
    <div class="fedex-hero">
        <div>
            <h2 class="fw-bold mb-1">FedEx Overblik</h2>
            <div class="text-muted">Samlet visning af alle FedEx bestillinger og deres status.</div>
        </div>
        <button class="btn btn-outline-primary" id="refreshFedexBtn"><i class="bi bi-arrow-clockwise me-1"></i>Opdater</button>
    </div>

    <div class="fedex-kpis">
        <div class="fedex-kpi"><div class="label">Total</div><div class="value" id="kpiTotal">0</div></div>
        <div class="fedex-kpi"><div class="label">Aktive</div><div class="value" id="kpiActive">0</div></div>
        <div class="fedex-kpi"><div class="label">Leveret</div><div class="value" id="kpiDelivered">0</div></div>
        <div class="fedex-kpi"><div class="label">Fejl/Annulleret</div><div class="value" id="kpiFailed">0</div></div>
    </div>

    <div class="card fedex-filter-card">
        <div class="card-body">
            <div class="row g-3">
                <div class="col-lg-5">
                    <label class="form-label small text-muted" for="fedexSearchInput">Søg</label>
                    <input id="fedexSearchInput" class="form-control" placeholder="Booking ref, tracking, modtager, by, case id...">
                </div>
                <div class="col-lg-3 col-md-6">
                    <label class="form-label small text-muted" for="fedexStatusFilter">Status</label>
                    <select id="fedexStatusFilter" class="form-select">
                        <option value="all">Alle</option>
                        <option value="draft">Draft</option>
                        <option value="submitted">Submitted</option>
                        <option value="booked">Booked</option>
                        <option value="in_transit">In transit</option>
                        <option value="delivered">Delivered</option>
                        <option value="cancelled">Cancelled</option>
                        <option value="failed">Failed</option>
                    </select>
                </div>
                <div class="col-lg-2 col-md-6">
                    <label class="form-label small text-muted" for="fedexSortSelect">Sortering</label>
                    <select id="fedexSortSelect" class="form-select">
                        <option value="newest">Nyeste først</option>
                        <option value="oldest">Ældste først</option>
                        <option value="status">Status</option>
                    </select>
                </div>
                <div class="col-lg-2 d-flex align-items-end">
                    <button class="btn btn-light border w-100" id="fedexClearBtn">Ryd filtre</button>
                </div>
            </div>
        </div>
    </div>

    <div class="fedex-table-wrap">
        <table class="table table-hover fedex-table mb-0">
            <thead>
                <tr>
                    <th>Bestilling</th>
                    <th>Status</th>
                    <th>Tracking</th>
                    <th>Case</th>
                    <th>Afhentning</th>
                    <th>Pris</th>
                    <th class="text-end">Handlinger</th>
                </tr>
            </thead>
            <tbody id="fedexTableBody">
                <tr><td colspan="7" class="text-center py-4 text-muted">Henter FedEx bestillinger...</td></tr>
            </tbody>
        </table>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
(() => {
    const state = {
        bookings: [],
        filtered: [],
    };

    function escapeHtml(value) {
        const span = document.createElement('span');
        span.textContent = value ?? '';
        return span.innerHTML;
    }

    function formatDate(value) {
        if (!value) return '-';
        const dt = new Date(value);
        if (Number.isNaN(dt.getTime())) return '-';
        return dt.toLocaleString('da-DK');
    }

    function formatMoney(amount, currency) {
        if (amount === null || amount === undefined || Number.isNaN(Number(amount))) return '-';
        return `${Number(amount).toLocaleString('da-DK', { minimumFractionDigits: 2, maximumFractionDigits: 2 })} ${currency || 'DKK'}`;
    }

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

    function applyFilters() {
        const q = (document.getElementById('fedexSearchInput')?.value || '').trim().toLowerCase();
        const status = (document.getElementById('fedexStatusFilter')?.value || 'all').toLowerCase();
        const sortBy = (document.getElementById('fedexSortSelect')?.value || 'newest').toLowerCase();

        const rows = state.bookings.filter((item) => {
            const itemStatus = String(item.shipment_status || '').toLowerCase();
            if (status !== 'all' && itemStatus !== status) return false;

            if (!q) return true;
            const haystack = [
                item.booking_ref,
                item.tracking_number,
                item.recipient_name,
                item.city,
                item.country_code,
                item.service_type,
                item.case_id,
            ].map((v) => String(v || '').toLowerCase()).join(' ');
            return haystack.includes(q);
        });

        rows.sort((a, b) => {
            if (sortBy === 'status') {
                return String(a.shipment_status || '').localeCompare(String(b.shipment_status || ''), 'da');
            }
            const ta = new Date(a.created_at || 0).getTime() || 0;
            const tb = new Date(b.created_at || 0).getTime() || 0;
            return sortBy === 'oldest' ? ta - tb : tb - ta;
        });

        state.filtered = rows;
        renderTable();
        renderKpis();
    }

    function renderKpis() {
        const total = state.filtered.length;
        const delivered = state.filtered.filter((item) => item.shipment_status === 'delivered').length;
        const failed = state.filtered.filter((item) => ['failed', 'cancelled'].includes(String(item.shipment_status || '').toLowerCase())).length;
        const active = state.filtered.filter((item) => ['draft', 'submitted', 'booked', 'in_transit'].includes(String(item.shipment_status || '').toLowerCase())).length;

        document.getElementById('kpiTotal').textContent = String(total);
        document.getElementById('kpiActive').textContent = String(active);
        document.getElementById('kpiDelivered').textContent = String(delivered);
        document.getElementById('kpiFailed').textContent = String(failed);
    }

    function renderTable() {
        const tbody = document.getElementById('fedexTableBody');
        if (!tbody) return;

        if (!state.filtered.length) {
            tbody.innerHTML = '<tr><td colspan="7" class="text-center py-4 text-muted">Ingen FedEx bestillinger matcher filteret.</td></tr>';
            return;
        }

        tbody.innerHTML = state.filtered.map((item) => {
            const trackingNumber = String(item.tracking_number || '').trim();
            const trackingUrl = String(item.tracking_url || (trackingNumber ? `https://www.fedex.com/fedextrack/?trknbr=${encodeURIComponent(trackingNumber)}` : '')).trim();
            const labelUrl = String(item.label_url || '').trim();
            const openCaseUrl = Number(item.case_id) > 0 ? `/sag/${Number(item.case_id)}/v3` : '/sag';

            return `
                <tr>
                    <td>
                        <div class="fedex-row-title">${escapeHtml(item.booking_ref || '-')}</div>
                        <div class="fedex-row-meta">${escapeHtml(item.recipient_name || '-')} • ${escapeHtml(item.city || '-')} (${escapeHtml(item.country_code || '-')})</div>
                    </td>
                    <td>${statusBadge(item.shipment_status)}</td>
                    <td>
                        ${trackingNumber ? `<span class="small fw-semibold">${escapeHtml(trackingNumber)}</span>` : '<span class="text-muted">-</span>'}
                    </td>
                    <td><a href="${openCaseUrl}" class="text-decoration-none">#${Number(item.case_id || 0)}</a></td>
                    <td>${escapeHtml(formatDate(item.pickup_window_start))}</td>
                    <td>${escapeHtml(formatMoney(item.total_amount, item.currency))}</td>
                    <td class="text-end">
                        ${trackingUrl ? `<a href="${trackingUrl}" target="_blank" rel="noopener" class="btn btn-sm btn-outline-secondary"><i class="bi bi-box-arrow-up-right"></i></a>` : ''}
                        ${labelUrl ? `<a href="${labelUrl}" target="_blank" rel="noopener" class="btn btn-sm btn-outline-primary ms-1"><i class="bi bi-file-earmark-text"></i></a>` : ''}
                    </td>
                </tr>
            `;
        }).join('');
    }

    async function loadBookings() {
        const tbody = document.getElementById('fedexTableBody');
        if (tbody) {
            tbody.innerHTML = '<tr><td colspan="7" class="text-center py-4 text-muted"><span class="spinner-border spinner-border-sm me-2"></span>Henter FedEx bestillinger...</td></tr>';
        }

        try {
            const response = await fetch('/api/v1/fedex/bookings', { credentials: 'include' });
            if (!response.ok) {
                throw new Error(`HTTP ${response.status}`);
            }
            const payload = await response.json();
            state.bookings = Array.isArray(payload?.items) ? payload.items : [];
            applyFilters();
        } catch (error) {
            if (tbody) {
                tbody.innerHTML = `<tr><td colspan="7" class="text-center py-4 text-danger">Kunne ikke hente FedEx bestillinger: ${escapeHtml(error.message || 'ukendt fejl')}</td></tr>`;
            }
        }
    }

    function bindEvents() {
        document.getElementById('fedexSearchInput')?.addEventListener('input', applyFilters);
        document.getElementById('fedexStatusFilter')?.addEventListener('change', applyFilters);
        document.getElementById('fedexSortSelect')?.addEventListener('change', applyFilters);

        document.getElementById('fedexClearBtn')?.addEventListener('click', () => {
            document.getElementById('fedexSearchInput').value = '';
            document.getElementById('fedexStatusFilter').value = 'all';
            document.getElementById('fedexSortSelect').value = 'newest';
            applyFilters();
        });

        document.getElementById('refreshFedexBtn')?.addEventListener('click', loadBookings);
    }

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