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

{% block title %}Timetracking Ordrer - BMC Hub{% endblock %}

{% block extra_css %}
<style>
        /* Page specific styles */

        .nav-link {
            color: var(--text-secondary);
            padding: 0.6rem 1.2rem !important;
            border-radius: var(--border-radius);
            transition: all 0.2s;
        }

        .nav-link:hover {
            background-color: var(--accent-light);
            color: var(--accent);
        }

        .nav-link.active {
            background-color: var(--accent);
            color: white;
            font-weight: 600;
        }

        .card {
            border: none;
            border-radius: var(--border-radius);
            box-shadow: 0 2px 15px rgba(0,0,0,0.05);
            background: var(--bg-card);
            margin-bottom: 1.5rem;
        }

        .table {
            background: var(--bg-card);
        }

        .table th {
            font-weight: 600;
            color: var(--text-secondary);
            font-size: 0.85rem;
            text-transform: uppercase;
            border-bottom: 2px solid var(--accent-light);
        }

        .order-row {
            cursor: pointer;
            transition: background-color 0.2s;
        }

        .order-row:hover {
            background-color: var(--accent-light);
        }

        .order-details {
            background: var(--accent-light);
            border-radius: var(--border-radius);
            padding: 1.5rem;
            margin-top: 1rem;
        }

        .line-item {
            padding: 0.75rem;
            background: var(--bg-card);
            border-radius: 8px;
            margin-bottom: 0.5rem;
        }

        .modal-body .info-row {
            display: flex;
            justify-content: space-between;
            padding: 0.75rem 0;
            border-bottom: 1px solid var(--accent-light);
        }

        .modal-body .info-row:last-child {
            border-bottom: none;
        }
    </style>
{% endblock %}

{% block content %}
<div class="container-fluid py-4">
        <!-- Header -->
        <div class="row mb-4">
            <div class="col-12">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <h1 class="mb-1">
                            <i class="bi bi-receipt text-primary"></i> Ordrer
                        </h1>
                        <p class="text-muted mb-0">Oversigt over genererede ordrer og eksport til e-conomic</p>
                    </div>
                    <a href="/timetracking" class="btn btn-outline-secondary">
                        <i class="bi bi-arrow-left"></i> Tilbage
                    </a>
                </div>
            </div>
        </div>

        <!-- Safety Banner (dynamisk) -->
        <div class="row mb-4" id="safety-banner" style="display: none;">
            <div class="col-12">
                <div class="alert alert-warning d-flex align-items-center" role="alert">
                    <i class="bi bi-shield-exclamation me-2"></i>
                    <div>
                        <strong>DRY-RUN Mode Aktiv</strong> - 
                        Eksport til e-conomic er i test-mode. Fakturaer oprettes ikke i e-conomic.
                    </div>
                </div>
            </div>
        </div>

        <!-- Orders Table -->
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header bg-white d-flex justify-content-between align-items-center">
                        <h5 class="mb-0">Alle Ordrer</h5>
                        <button class="btn btn-sm btn-outline-primary" onclick="loadOrders()">
                            <i class="bi bi-arrow-clockwise"></i> Opdater
                        </button>
                    </div>
                    <div class="card-body">
                        <div id="loading" class="text-center py-4">
                            <div class="spinner-border text-primary" role="status">
                                <span class="visually-hidden">Indlæser...</span>
                            </div>
                        </div>

                        <div id="orders-table" class="d-none">
                            <table class="table table-hover">
                                <thead>
                                    <tr>
                                        <th>Ordrenr.</th>
                                        <th>Kunde</th>
                                        <th>Dato</th>
                                        <th class="text-center">Linjer</th>
                                        <th class="text-end">Total</th>
                                        <th class="text-center">Status</th>
                                        <th class="text-end">Handlinger</th>
                                    </tr>
                                </thead>
                                <tbody id="orders-tbody">
                                </tbody>
                            </table>
                        </div>

                        <div id="no-orders" class="text-center py-5 d-none">
                            <i class="bi bi-inbox text-muted" style="font-size: 3rem;"></i>
                            <p class="text-muted mt-3">Ingen ordrer endnu</p>
                            <a href="/timetracking" class="btn btn-primary">
                                <i class="bi bi-arrow-left"></i> Godkend tider først
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Order Details Modal -->
    <div class="modal fade" id="orderModal" tabindex="-1">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">
                        <i class="bi bi-receipt"></i> Ordre Detaljer
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div id="order-details-content">
                        <!-- Will be populated dynamically -->
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Luk</button>
                    <button type="button" class="btn btn-success" id="export-order-btn" onclick="exportCurrentOrder()">
                        <i class="bi bi-cloud-upload"></i> Eksporter til e-conomic
                    </button>
                </div>
            </div>
        </div>
    </div>

    <script>
        let currentOrderId = null;
        let orderModal = null;

        // Initialize modal
        document.addEventListener('DOMContentLoaded', async function() {
            orderModal = new bootstrap.Modal(document.getElementById('orderModal'));
            
            // Check if DRY-RUN mode is active
            try {
                const configResponse = await fetch('/api/v1/timetracking/config');
                const config = await configResponse.json();
                
                // Show banner only if DRY-RUN or READ-ONLY is enabled
                if (config.economic_dry_run || config.economic_read_only) {
                    document.getElementById('safety-banner').style.display = 'block';
                }
            } catch (error) {
                console.error('Error checking config:', error);
            }
            
            loadOrders();
        });

        // Load all orders
        async function loadOrders() {
            document.getElementById('loading').classList.remove('d-none');
            document.getElementById('orders-table').classList.add('d-none');
            document.getElementById('no-orders').classList.add('d-none');

            try {
                const response = await fetch('/api/v1/timetracking/orders');
                const orders = await response.json();

                if (orders.length === 0) {
                    document.getElementById('loading').classList.add('d-none');
                    document.getElementById('no-orders').classList.remove('d-none');
                    return;
                }

                const tbody = document.getElementById('orders-tbody');
                tbody.innerHTML = orders.map(order => {
                    const statusBadge = getStatusBadge(order);
                    const isLocked = order.status === 'exported';
                    const economicInfo = order.economic_draft_id
                        ? `<br><small class="text-muted">e-conomic draft #${order.economic_draft_id}</small>` 
                        : '';

                    return `
                        <tr class="order-row ${isLocked ? 'table-warning' : ''}" onclick="viewOrder(${order.id})">
                            <td>
                                <strong>${order.order_number}</strong>
                                ${economicInfo}
                            </td>
                            <td>${order.customer_name}</td>
                            <td>${new Date(order.order_date).toLocaleDateString('da-DK')}</td>
                            <td class="text-center">${order.line_count || 0}</td>
                            <td class="text-end"><strong>${parseFloat(order.total_amount).toFixed(2)} DKK</strong></td>
                            <td class="text-center">${statusBadge}</td>
                            <td class="text-end">
                                <button class="btn btn-sm btn-outline-primary" 
                                        onclick="event.stopPropagation(); viewOrder(${order.id})">
                                    <i class="bi bi-eye"></i>
                                </button>
                                ${order.status === 'draft' ? `
                                    <button class="btn btn-sm btn-success" 
                                            onclick="event.stopPropagation(); exportOrder(${order.id})">
                                        <i class="bi bi-cloud-upload"></i> Eksporter
                                    </button>
                                    <button class="btn btn-sm btn-outline-danger" 
                                            onclick="event.stopPropagation(); cancelOrder(${order.id})">
                                        <i class="bi bi-x-circle"></i> Annuller
                                    </button>
                                ` : ''}
                                ${order.status === 'exported' ? `
                                    <span class="badge bg-warning text-dark"><i class="bi bi-lock"></i> Låst</span>
                                    <button class="btn btn-sm btn-outline-warning" 
                                            onclick="event.stopPropagation(); unlockOrder(${order.id})">
                                        <i class="bi bi-unlock"></i> Lås op
                                    </button>
                                ` : ''}
                            </td>
                        </tr>
                    `;
                }).join('');

                document.getElementById('loading').classList.add('d-none');
                document.getElementById('orders-table').classList.remove('d-none');

            } catch (error) {
                console.error('Error loading orders:', error);
                document.getElementById('loading').innerHTML = `
                    <div class="alert alert-danger">
                        Fejl ved indlæsning: ${error.message}
                    </div>
                `;
            }
        }

        // Get status badge
        function getStatusBadge(order) {
            const statusMap = {
                'cancelled': '<span class="badge bg-danger">Annulleret</span>',
                'exported': '<span class="badge bg-warning text-dark"><i class="bi bi-cloud-check"></i> Eksporteret</span>',
                'draft': '<span class="badge bg-secondary">Kladde</span>'
            };
            
            return statusMap[order.status] || '<span class="badge bg-secondary">Ukendt</span>';
        }

        // View order details
        async function viewOrder(orderId) {
            currentOrderId = orderId;
            
            try {
                const response = await fetch(`/api/v1/timetracking/orders/${orderId}`);
                const order = await response.json();

                const content = document.getElementById('order-details-content');
                content.innerHTML = `
                    <div class="info-row">
                        <span class="fw-bold">Ordrenummer:</span>
                        <span>${order.order_number}</span>
                    </div>
                    <div class="info-row">
                        <span class="fw-bold">Kunde:</span>
                        <span>${order.customer_name}</span>
                    </div>
                    <div class="info-row">
                        <span class="fw-bold">Dato:</span>
                        <span>${new Date(order.order_date).toLocaleDateString('da-DK')}</span>
                    </div>
                    <div class="info-row">
                        <span class="fw-bold">Total:</span>
                        <span class="fs-5 fw-bold text-primary">${parseFloat(order.total_amount).toFixed(2)} DKK</span>
                    </div>

                    <hr class="my-3">

                    <h6 class="mb-3">Ordrelinjer:</h6>
                    ${(order.lines || []).map(line => {
                        // Parse data
                        const caseMatch = line.description.match(/CC(\d+)/);
                        const caseTitle = line.description.split(' - ').slice(1).join(' - ') || line.description;
                        const hours = parseFloat(line.quantity);
                        const unitPrice = parseFloat(line.unit_price);
                        const total = parseFloat(line.line_total);
                        const date = new Date(line.time_date).toLocaleDateString('da-DK');
                        
                        // Extract contact name from case_contact if available
                        const contactName = line.case_contact || 'Ingen kontakt';
                        
                        // Check if it's an on-site visit (udkørsel)
                        const isOnSite = line.description.toLowerCase().includes('udkørsel') || 
                                        line.description.toLowerCase().includes('on-site');
                        
                        return `
                        <div class="line-item mb-3 p-3" style="border: 1px solid #dee2e6; border-radius: 8px;">
                            <div class="d-flex justify-content-between align-items-start mb-2">
                                <div class="flex-grow-1">
                                    <div class="d-flex align-items-center gap-2 mb-1">
                                        ${caseMatch ? `<span class="badge bg-secondary">${caseMatch[0]}</span>` : ''}
                                    </div>
                                    <div class="fw-bold text-uppercase mb-1" style="font-size: 0.95rem;">
                                        ${caseTitle}
                                    </div>
                                    <div class="text-muted small">
                                        ${date} - ${contactName}${isOnSite ? ' <span class="badge bg-info">Udkørsel</span>' : ''}
                                    </div>
                                </div>
                                <div class="text-end">
                                    <div class="fs-5 fw-bold text-primary">${total.toFixed(2)} DKK</div>
                                </div>
                            </div>
                        </div>
                        `;
                    }).join('')}

                    ${order.status === 'posted' ? `
                        <div class="alert alert-success mt-3 mb-0">
                            <i class="bi bi-lock-fill"></i>
                            <strong>Bogført til e-conomic</strong> den ${new Date(order.exported_at).toLocaleDateString('da-DK')}
                            <br>e-conomic ordre nr.: ${order.economic_order_number}
                            <br><small class="text-muted">Ordren er låst og kan ikke ændres.</small>
                        </div>
                    ` : order.economic_draft_id ? `
                        <div class="alert alert-info mt-3 mb-0">
                            <i class="bi bi-check-circle"></i>
                            Eksporteret til e-conomic den ${new Date(order.exported_at).toLocaleDateString('da-DK')}
                            <br>Draft Order nr.: ${order.economic_draft_id}
                            ${order.economic_order_number ? `<br>e-conomic ordre nr.: ${order.economic_order_number}` : ''}
                        </div>
                    ` : ''}
                `;

                // Update export button
                const exportBtn = document.getElementById('export-order-btn');
                if (order.status === 'exported') {
                    exportBtn.disabled = true;
                    exportBtn.innerHTML = '<i class="bi bi-lock"></i> Eksporteret (Låst)';
                    exportBtn.classList.remove('btn-primary');
                    exportBtn.classList.add('btn-secondary');
                } else if (order.status === 'draft') {
                    exportBtn.disabled = false;
                    exportBtn.innerHTML = '<i class="bi bi-cloud-upload"></i> Eksporter til e-conomic';
                    exportBtn.onclick = exportCurrentOrder;
                } else {
                    exportBtn.disabled = true;
                    exportBtn.innerHTML = `<i class="bi bi-x-circle"></i> ${order.status}`;
                    exportBtn.classList.remove('btn-primary');
                    exportBtn.classList.add('btn-secondary');
                }

                orderModal.show();

            } catch (error) {
                alert('Fejl ved indlæsning af ordre: ' + error.message);
            }
        }

        // Export order
        async function exportOrder(orderId) {
            if (!confirm('Eksporter ordre til e-conomic?\n\nDette opretter en kladde-ordre i e-conomic.')) {
                return;
            }

            try {
                const response = await fetch(`/api/v1/timetracking/export`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        order_id: orderId,
                        force: false
                    })
                });
                
                if (!response.ok) {
                    const errorData = await response.json();
                    throw new Error(errorData.detail || 'Export failed');
                }
                
                const result = await response.json();

                if (result.dry_run) {
                    alert(`DRY-RUN MODE:\n\n${result.message}\n\nDetails:\n- Ordre: ${result.details.order_number}\n- Kunde: ${result.details.customer_name}\n- Total: ${result.details.total_amount} DKK\n- Linjer: ${result.details.line_count}\n\n⚠️ Ingen ændringer er foretaget i e-conomic (DRY-RUN mode aktiveret).`);
                } else if (result.success) {
                    alert(`✅ Ordre eksporteret til e-conomic!\n\n- Draft Order nr.: ${result.economic_draft_id}\n- e-conomic ordre nr.: ${result.economic_order_number}\n\n${result.message}`);
                    loadOrders();
                    if (orderModal._isShown) {
                        orderModal.hide();
                    }
                } else {
                    throw new Error(result.message || 'Export failed');
                }

            } catch (error) {
                alert('Fejl ved eksport: ' + error.message);
            }
        }

        // Export current order from modal
        function exportCurrentOrder() {
            if (currentOrderId) {
                exportOrder(currentOrderId);
            }
        }
        
        // Unlock exported order (ADMIN)
        async function unlockOrder(orderId) {
            const adminCode = prompt(
                '🔐 ADMIN ADGANG PÅKRÆVET\n\n' +
                'Før ordren kan låses op skal den være slettet fra e-conomic.\n\n' +
                'Indtast admin unlock kode:'
            );
            
            if (!adminCode) return;
            
            if (!confirm(
                '⚠️ ADVARSEL\n\n' +
                'Er du SIKKER på at ordren er slettet fra e-conomic?\n\n' +
                'Systemet vil tjekke om ordren stadig findes i e-conomic.\n\n' +
                'Fortsæt?'
            )) return;
            
            try {
                const response = await fetch(`/api/v1/timetracking/orders/${orderId}/unlock?admin_code=${encodeURIComponent(adminCode)}`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    }
                });
                
                if (!response.ok) {
                    const errorData = await response.json();
                    alert(`❌ Kunne ikke låse ordre op:\n\n${errorData.detail}`);
                    return;
                }
                
                const result = await response.json();
                alert(`✅ ${result.message}\n\nOrdren kan nu redigeres eller slettes.`);
                loadOrders();
                
            } catch (error) {
                console.error('Error unlocking order:', error);
                alert(`❌ Fejl ved unlock: ${error.message}`);
            }
        }

        // Cancel order
        async function cancelOrder(orderId) {
            if (!confirm('Annuller denne ordre?\n\nTidsregistreringerne sættes tilbage til "godkendt" status.')) {
                return;
            }
            
            try {
                const response = await fetch(`/api/v1/timetracking/orders/${orderId}/cancel`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    }
                });
                
                if (!response.ok) {
                    const errorData = await response.json();
                    alert(`❌ Kunne ikke annullere ordre:\n\n${errorData.detail}`);
                    return;
                }
                
                alert('✅ Ordre annulleret\n\nTidsregistreringerne er sat tilbage til "godkendt" status.');
                loadOrders();
                
            } catch (error) {
                console.error('Error cancelling order:', error);
                alert(`❌ Fejl ved annullering: ${error.message}`);
            }
        }

    </script>
</div>
{% endblock %}