document.getElementById('fetch-order').addEventListener('click', async function () {
    const orderNumber = document.getElementById('order-number').value;
    if (!orderNumber) {
        alert('Please enter an order number.');
        return;
    }

    try {
        // Fetch order details
        const orderResponse = await fetch(`/api/orders/${orderNumber}`);
        if (orderResponse.ok) {
            const orderData = await orderResponse.json();
            displayOrderDetails(orderData);

            // Fetch tracking details only after successfully getting order data
            const trackingResponse = await fetch(`/api/tracking/${orderNumber}`);
            if (trackingResponse.ok) {
                const trackingData = await trackingResponse.json();
                displayTrackingDetails(trackingData);
                generateEmailContent(orderData, trackingData);
            } else {
                throw new Error('Tracking information not found');
            }
        } else {
            throw new Error('Order not found');
        }
    } catch (error) {
        alert(error.message);
    }
});

function displayOrderDetails(orderData) {
    document.getElementById('customer-name').textContent = `Customer: ${orderData.customer_name}`;
    document.getElementById('address').textContent = `Address: ${orderData.shipping_address.address1}, ${orderData.shipping_address.city}, ${orderData.shipping_address.state} ${orderData.shipping_address.zip}`;
    document.getElementById('email').textContent = `Email: ${orderData.email}`;
    document.getElementById('phone').textContent = `Phone: ${orderData.phone}`;
    document.getElementById('customer-email').value = orderData.email;
    document.getElementById('order-details').classList.remove('hidden');
}

function displayTrackingDetails(trackingData) {
    const trackingList = document.getElementById('tracking-list');
    trackingList.innerHTML = ''; // Clear previous tracking details
    trackingData.tracking_details.forEach((detail, index) => {
        const listItem = document.createElement('li');
        listItem.innerHTML = `Package #${index + 1}: <a href="${getTrackingUrl(detail)}" target="_blank">${detail.tracking_number}</a> (${detail.carrier})`;
        trackingList.appendChild(listItem);
    });
    document.getElementById('tracking-details').classList.remove('hidden');
}

function getTrackingUrl(detail) {
    const carrierUrls = {
        'Speedee': 'https://www.speedee.delivery/track?trackingNumber=',
        'UPS': 'https://www.ups.com/track?loc=en_US&tracknum=',
        'FedEx': 'https://www.fedex.com/apps/fedextrack/?tracknumbers=',
        'USPS': 'https://tools.usps.com/go/TrackConfirmAction_input?qtc_tLabels1=',
        'GLS': 'https://gls-group.eu/EU/en/parcel-tracking?match=',
        'OnTrac': 'https://www.ontrac.com/trackingres.asp?tracking_number='
    };
    return carrierUrls[detail.carrier] + detail.tracking_number;
}

function generateEmailContent(orderData, trackingData) {
    const customerFirstName = orderData.customer_name.split(' ')[0];
    const orderNumber = trackingData.order_number;
    
    let emailContent = `Hello ${customerFirstName},\n\nWe are pleased to inform you that your order <b>#${orderNumber}</b> has been drop-shipped directly from our distributor to your address.\n\n`;

    emailContent += `<b>Here is your tracking information for the shipment(s):</b>\n`;

    trackingData.tracking_details.forEach((detail, index) => {
        emailContent += `Package #${index + 1}: <a href="${getTrackingUrl(detail)}">${detail.tracking_number}</a>\n`;
    });

    emailContent += `\n<i>Please allow up to 24 hours for tracking information to update online.</i>\n\n`;
    emailContent += `Thank you for choosing us. We truly appreciate your business and are here if you have any questions.`;

    document.getElementById('email-content').value = emailContent;
    document.getElementById('email-subject').value = `Order #${orderNumber} Drop Shipped`;
    document.getElementById('email-section').classList.remove('hidden');
}

// Copy subject line
document.getElementById('copy-subject').addEventListener('click', function () {
    const subject = document.getElementById('email-subject');
    subject.select();
    document.execCommand('copy');
    // alert('Subject copied to clipboard');
});

// Copy customer email address
document.getElementById('copy-email-address').addEventListener('click', function () {
    const email = document.getElementById('customer-email');
    email.select();
    document.execCommand('copy');
    // alert('Customer email copied to clipboard');
});

// Copy email content to clipboard
document.getElementById('copy-email-content').addEventListener('click', function () {
    const emailContent = document.getElementById('email-content').value;

    // Convert the email content to an HTML string
    const htmlContent = emailContent
        .replace(/(?:\r\n|\r|\n)/g, '<br>')  // Replace newlines with <br> tags
        .replace(/<a href="(.+?)">(.+?)<\/a>/g, (match, url, text) => {
            return `<a href="${url}" target="_blank">${text}</a>`;
        });

    const blob = new Blob([htmlContent], { type: 'text/html' });
    const data = [new ClipboardItem({ 'text/html': blob })];

    navigator.clipboard.write(data).then(function () {
        //alert('Email content copied to clipboard as HTML');
    }).catch(function (error) {
        alert('Failed to copy email content');
        console.error('Error copying email content:', error);
    });
});