// Global state
let customers = [];
let quotes = [];
let invoices = [];
let currentQuoteId = null;
let currentInvoiceId = null;
let currentCustomerId = null;
let itemCounter = 0;
let currentLogoFile = null;

// Alpine.js Customer Search Component
function customerSearch(type) {
    return {
        search: '',
        selectedId: '',
        selectedName: '',
        open: false,
        highlighted: 0,
        
        get filteredCustomers() {
            if (!this.search) {
                return customers.slice(0, 50); // Show first 50 if no search
            }
            const searchLower = this.search.toLowerCase();
            return customers.filter(c => 
                c.name.toLowerCase().includes(searchLower) ||
                c.city.toLowerCase().includes(searchLower) ||
                (c.account_number && c.account_number.includes(searchLower))
            ).slice(0, 50); // Limit to 50 results
        },
        
        selectCustomer(customer) {
            this.selectedId = customer.id;
            this.selectedName = customer.name;
            this.search = customer.name;
            this.open = false;
            this.highlighted = 0;
        },
        
        highlightNext() {
            if (this.highlighted < this.filteredCustomers.length - 1) {
                this.highlighted++;
            }
        },
        
        highlightPrev() {
            if (this.highlighted > 0) {
                this.highlighted--;
            }
        },
        
        selectHighlighted() {
            if (this.filteredCustomers[this.highlighted]) {
                this.selectCustomer(this.filteredCustomers[this.highlighted]);
            }
        },
        
        reset() {
            this.search = '';
            this.selectedId = '';
            this.selectedName = '';
            this.open = false;
            this.highlighted = 0;
        }
    };
}

// Make it globally available for Alpine
window.customerSearch = customerSearch;

// Initialize app
document.addEventListener('DOMContentLoaded', () => {
    loadCustomers();
    loadQuotes();
    loadInvoices();
    setDefaultDate();
    checkCurrentLogo();
    
    // Setup form handlers
    document.getElementById('customer-form').addEventListener('submit', handleCustomerSubmit);
    document.getElementById('quote-form').addEventListener('submit', handleQuoteSubmit);
    document.getElementById('invoice-form').addEventListener('submit', handleInvoiceSubmit);
    document.getElementById('quote-tax-exempt').addEventListener('change', updateQuoteTotals);
    document.getElementById('invoice-tax-exempt').addEventListener('change', updateInvoiceTotals);
    
    // Setup logo upload handler
    document.getElementById('logo-upload').addEventListener('change', (e) => {
        const file = e.target.files[0];
        if (file) {
            currentLogoFile = file;
            document.getElementById('logo-filename').textContent = file.name;
            document.getElementById('upload-btn').disabled = false;
        }
    });
});

// Tab Management
function showTab(tabName) {
    document.querySelectorAll('.tab-content').forEach(tab => tab.classList.add('hidden'));
    document.querySelectorAll('.tab-btn').forEach(btn => btn.classList.remove('bg-blue-800'));
    
    document.getElementById(`${tabName}-tab`).classList.remove('hidden');
    document.getElementById(`tab-${tabName}`).classList.add('bg-blue-800');
    
    if (tabName === 'quotes') {
        loadQuotes();
    } else if (tabName === 'invoices') {
        loadInvoices();
    } else if (tabName === 'customers') {
        loadCustomers();
    } else if (tabName === 'settings') {
        checkCurrentLogo();
    }
}

// Date helper
function setDefaultDate() {
    const today = new Date().toISOString().split('T')[0];
    const quoteDateEl = document.getElementById('quote-date');
    const invoiceDateEl = document.getElementById('invoice-date');
    if (quoteDateEl) quoteDateEl.value = today;
    if (invoiceDateEl) invoiceDateEl.value = today;
}

function formatDate(date) {
    const d = new Date(date);
    const month = String(d.getMonth() + 1).padStart(2, '0');
    const day = String(d.getDate()).padStart(2, '0');
    const year = d.getFullYear();
    return `${month}/${day}/${year}`;
}

// Logo Management
async function checkCurrentLogo() {
    try {
        const response = await fetch('/api/logo-info');
        if (response.ok) {
            const data = await response.json();
            if (data.hasLogo) {
                document.getElementById('logo-preview').classList.remove('hidden');
                document.getElementById('logo-image').src = data.logoPath + '?t=' + Date.now();
            }
        }
    } catch (error) {
        console.error('Error checking logo:', error);
    }
}

async function uploadLogo() {
    if (!currentLogoFile) {
        alert('Please select a file first');
        return;
    }
    
    const formData = new FormData();
    formData.append('logo', currentLogoFile);
    
    const statusDiv = document.getElementById('upload-status');
    statusDiv.innerHTML = '<p class="text-blue-600">Uploading...</p>';
    
    try {
        const response = await fetch('/api/upload-logo', {
            method: 'POST',
            body: formData
        });
        
        if (response.ok) {
            const data = await response.json();
            statusDiv.innerHTML = '<p class="text-green-600">✓ Logo uploaded successfully!</p>';
            document.getElementById('logo-preview').classList.remove('hidden');
            document.getElementById('logo-image').src = data.path + '?t=' + Date.now();
            document.getElementById('upload-btn').disabled = true;
            currentLogoFile = null;
            document.getElementById('logo-filename').textContent = '';
            document.getElementById('logo-upload').value = '';
        } else {
            const error = await response.json();
            statusDiv.innerHTML = `<p class="text-red-600">✗ Error: ${error.error}</p>`;
        }
    } catch (error) {
        console.error('Upload error:', error);
        statusDiv.innerHTML = '<p class="text-red-600">✗ Upload failed</p>';
    }
}

// Customer Management
async function loadCustomers() {
    try {
        const response = await fetch('/api/customers');
        customers = await response.json();
        renderCustomers();
    } catch (error) {
        console.error('Error loading customers:', error);
        alert('Error loading customers');
    }
}

function renderCustomers() {
    const tbody = document.getElementById('customers-list');
    tbody.innerHTML = customers.map(customer => `
        <tr>
            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">${customer.name}</td>
            <td class="px-6 py-4 text-sm text-gray-500">${customer.street}, ${customer.city}, ${customer.state} ${customer.zip_code}</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${customer.account_number || '-'}</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium space-x-2">
                <button onclick="editCustomer(${customer.id})" class="text-blue-600 hover:text-blue-900">Edit</button>
                <button onclick="deleteCustomer(${customer.id})" class="text-red-600 hover:text-red-900">Delete</button>
            </td>
        </tr>
    `).join('');
}

function openCustomerModal(customerId = null) {
    currentCustomerId = customerId;
    const modal = document.getElementById('customer-modal');
    const title = document.getElementById('customer-modal-title');
    
    if (customerId) {
        title.textContent = 'Edit Customer';
        const customer = customers.find(c => c.id === customerId);
        document.getElementById('customer-id').value = customer.id;
        document.getElementById('customer-name').value = customer.name;
        document.getElementById('customer-street').value = customer.street;
        document.getElementById('customer-city').value = customer.city;
        document.getElementById('customer-state').value = customer.state;
        document.getElementById('customer-zip').value = customer.zip_code;
        document.getElementById('customer-account').value = customer.account_number || '';
    } else {
        title.textContent = 'New Customer';
        document.getElementById('customer-form').reset();
        document.getElementById('customer-id').value = '';
    }
    
    modal.classList.add('active');
}

function closeCustomerModal() {
    document.getElementById('customer-modal').classList.remove('active');
    currentCustomerId = null;
}

async function handleCustomerSubmit(e) {
    e.preventDefault();
    
    const data = {
        name: document.getElementById('customer-name').value,
        street: document.getElementById('customer-street').value,
        city: document.getElementById('customer-city').value,
        state: document.getElementById('customer-state').value.toUpperCase(),
        zip_code: document.getElementById('customer-zip').value,
        account_number: document.getElementById('customer-account').value
    };
    
    try {
        const customerId = document.getElementById('customer-id').value;
        const url = customerId ? `/api/customers/${customerId}` : '/api/customers';
        const method = customerId ? 'PUT' : 'POST';
        
        const response = await fetch(url, {
            method,
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(data)
        });
        
        if (response.ok) {
            closeCustomerModal();
            loadCustomers();
        } else {
            alert('Error saving customer');
        }
    } catch (error) {
        console.error('Error:', error);
        alert('Error saving customer');
    }
}

async function editCustomer(id) {
    openCustomerModal(id);
}

async function deleteCustomer(id) {
    if (!confirm('Are you sure you want to delete this customer?')) return;
    
    try {
        const response = await fetch(`/api/customers/${id}`, { method: 'DELETE' });
        if (response.ok) {
            loadCustomers();
        } else {
            alert('Error deleting customer');
        }
    } catch (error) {
        console.error('Error:', error);
        alert('Error deleting customer');
    }
}

// Quote Management
async function loadQuotes() {
    try {
        const response = await fetch('/api/quotes');
        quotes = await response.json();
        renderQuotes();
    } catch (error) {
        console.error('Error loading quotes:', error);
        alert('Error loading quotes');
    }
}

function renderQuotes() {
    const tbody = document.getElementById('quotes-list');
    tbody.innerHTML = quotes.map(quote => {
        const total = quote.has_tbd ? `$${parseFloat(quote.total).toFixed(2)}*` : `$${parseFloat(quote.total).toFixed(2)}`;
        return `
            <tr>
                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">${quote.quote_number}</td>
                <td class="px-6 py-4 text-sm text-gray-500">${quote.customer_name || 'N/A'}</td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${formatDate(quote.quote_date)}</td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 font-semibold">${total}</td>
                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium space-x-2">
                    <button onclick="viewQuotePDF(${quote.id})" class="text-green-600 hover:text-green-900">PDF</button>
                    <button onclick="convertQuoteToInvoice(${quote.id})" class="text-purple-600 hover:text-purple-900">→ Invoice</button>
                    <button onclick="editQuote(${quote.id})" class="text-blue-600 hover:text-blue-900">Edit</button>
                    <button onclick="deleteQuote(${quote.id})" class="text-red-600 hover:text-red-900">Delete</button>
                </td>
            </tr>
        `;
    }).join('');
}

async function openQuoteModal(quoteId = null) {
    currentQuoteId = quoteId;
    const modal = document.getElementById('quote-modal');
    const title = document.getElementById('quote-modal-title');
    
    if (quoteId) {
        title.textContent = 'Edit Quote';
        const response = await fetch(`/api/quotes/${quoteId}`);
        const data = await response.json();
        
        // Set customer in Alpine component
        const customer = customers.find(c => c.id === data.quote.customer_id);
        if (customer) {
            // Find the Alpine component and update it
            const customerInput = document.querySelector('#quote-modal input[placeholder="Search customer..."]');
            if (customerInput) {
                // Trigger Alpine to update
                customerInput.value = customer.name;
                customerInput.dispatchEvent(new Event('input'));
                
                // Set the values directly on the Alpine component
                const alpineData = Alpine.$data(customerInput.closest('[x-data]'));
                if (alpineData) {
                    alpineData.search = customer.name;
                    alpineData.selectedId = customer.id;
                    alpineData.selectedName = customer.name;
                }
            }
        }
        
        document.getElementById('quote-customer').value = data.quote.customer_id;
        
        const dateOnly = data.quote.quote_date.split('T')[0];
        document.getElementById('quote-date').value = dateOnly;
        document.getElementById('quote-tax-exempt').checked = data.quote.tax_exempt;
        
        // Load items
        document.getElementById('quote-items').innerHTML = '';
        itemCounter = 0;
        data.items.forEach(item => {
            addQuoteItem(item);
        });
        
        updateQuoteTotals();
    } else {
        title.textContent = 'New Quote';
        document.getElementById('quote-form').reset();
        document.getElementById('quote-items').innerHTML = '';
        itemCounter = 0;
        setDefaultDate();
        
        // Add one default item
        addQuoteItem();
    }
    
    modal.classList.add('active');
}

function closeQuoteModal() {
    document.getElementById('quote-modal').classList.remove('active');
    currentQuoteId = null;
}

function addQuoteItem(item = null) {
    const itemId = itemCounter++;
    const itemsDiv = document.getElementById('quote-items');
    
    const itemDiv = document.createElement('div');
    itemDiv.className = 'border border-gray-300 rounded-lg mb-3 bg-white';
    itemDiv.id = `quote-item-${itemId}`;
    itemDiv.setAttribute('x-data', `{ open: ${item ? 'false' : 'true'} }`);
    
    // Get preview text
    const previewQty = item ? item.quantity : '';
    const previewAmount = item ? item.amount : '$0.00';
    let previewDesc = 'New item';
    if (item && item.description) {
        const temp = document.createElement('div');
        temp.innerHTML = item.description;
        previewDesc = temp.textContent.substring(0, 60) + (temp.textContent.length > 60 ? '...' : '');
    }
    
    itemDiv.innerHTML = `
        <!-- Accordion Header -->
        <div class="flex items-center p-4">
            <!-- Move Buttons (Left) - Outside accordion click area -->
            <div class="flex flex-col mr-3" onclick="event.stopPropagation()">
                <button type="button" onclick="moveQuoteItemUp(${itemId})" 
                        class="text-blue-600 hover:text-blue-800 text-lg leading-none mb-1"
                        title="Move Up">
                    ↑
                </button>
                <button type="button" onclick="moveQuoteItemDown(${itemId})" 
                        class="text-blue-600 hover:text-blue-800 text-lg leading-none"
                        title="Move Down">
                    ↓
                </button>
            </div>
            
            <!-- Accordion Toggle & Content (Center) -->
            <div @click="open = !open" class="flex items-center flex-1 cursor-pointer hover:bg-gray-50 rounded px-3 py-2">
                <svg x-show="!open" class="w-5 h-5 text-gray-500 mr-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                </svg>
                <svg x-show="open" class="w-5 h-5 text-gray-500 mr-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7" />
                </svg>
                <span class="text-sm font-medium">Qty: <span class="item-qty-preview">${previewQty}</span></span>
                <span class="text-sm text-gray-600 flex-1 truncate mx-4 item-desc-preview">${previewDesc}</span>
                <span class="text-sm font-semibold item-amount-preview">${previewAmount}</span>
            </div>
            
            <!-- Delete Button (Right) - Outside accordion click area -->
            <button type="button" onclick="removeQuoteItem(${itemId}); event.stopPropagation();" 
                    class="ml-3 px-3 py-2 bg-red-500 hover:bg-red-600 text-white rounded-md text-sm">
                ×
            </button>
        </div>
        
        <!-- Accordion Content -->
        <div x-show="open" x-transition class="p-4 border-t border-gray-200">
            <div class="grid grid-cols-12 gap-3 items-start">
                <div class="col-span-1">
                    <label class="block text-xs font-medium text-gray-700 mb-1">Qty</label>
                    <input type="text" data-item="${itemId}" data-field="quantity" 
                           value="${item ? item.quantity : ''}"
                           class="quote-item-input w-full px-2 py-2 border border-gray-300 rounded-md text-sm">
                </div>
                <div class="col-span-6">
                    <label class="block text-xs font-medium text-gray-700 mb-1">Description</label>
                    <div data-item="${itemId}" data-field="description" 
                         class="quote-item-description-editor border border-gray-300 rounded-md bg-white" 
                         style="min-height: 60px;">
                    </div>
                </div>
                <div class="col-span-2">
                    <label class="block text-xs font-medium text-gray-700 mb-1">Rate</label>
                    <input type="text" data-item="${itemId}" data-field="rate" 
                           value="${item ? item.rate : ''}"
                           class="quote-item-input w-full px-2 py-2 border border-gray-300 rounded-md text-sm">
                </div>
                <div class="col-span-3">
                    <label class="block text-xs font-medium text-gray-700 mb-1">Amount</label>
                    <input type="text" data-item="${itemId}" data-field="amount" 
                           value="${item ? item.amount : ''}"
                           class="quote-item-amount w-full px-2 py-2 border border-gray-300 rounded-md text-sm">
                </div>
            </div>
        </div>
    `;
    
    itemsDiv.appendChild(itemDiv);
    
    // Initialize Quill editor
    const editorDiv = itemDiv.querySelector('.quote-item-description-editor');
    const quill = new Quill(editorDiv, {
        theme: 'snow',
        modules: {
            toolbar: [
                ['bold', 'italic', 'underline'],
                [{ 'list': 'ordered'}, { 'list': 'bullet' }],
                ['clean']
            ]
        }
    });
    
    if (item && item.description) {
        quill.root.innerHTML = item.description;
    }
    
    quill.on('text-change', () => {
        updateItemPreview(itemDiv, itemId);
        updateQuoteTotals();
    });
    
    editorDiv.quillInstance = quill;
    
    // Auto-calculate amount and update preview
    const qtyInput = itemDiv.querySelector('[data-field="quantity"]');
    const rateInput = itemDiv.querySelector('[data-field="rate"]');
    const amountInput = itemDiv.querySelector('[data-field="amount"]');
    
    const calculateAmount = () => {
        if (qtyInput.value && rateInput.value && rateInput.value.toUpperCase() !== 'TBD') {
            const qty = parseFloat(qtyInput.value) || 0;
            const rateValue = parseFloat(rateInput.value.replace(/[^0-9.]/g, '')) || 0;
            amountInput.value = (qty * rateValue).toFixed(2);
        }
        updateItemPreview(itemDiv, itemId);
        updateQuoteTotals();
    };
    
    qtyInput.addEventListener('input', calculateAmount);
    rateInput.addEventListener('input', calculateAmount);
    amountInput.addEventListener('input', () => {
        updateItemPreview(itemDiv, itemId);
        updateQuoteTotals();
    });
    
    updateItemPreview(itemDiv, itemId);
    updateQuoteTotals();
}

function updateItemPreview(itemDiv, itemId) {
    const qtyInput = itemDiv.querySelector('[data-field="quantity"]');
    const amountInput = itemDiv.querySelector('[data-field="amount"]');
    const editorDiv = itemDiv.querySelector('.quote-item-description-editor');
    
    const qtyPreview = itemDiv.querySelector('.item-qty-preview');
    const descPreview = itemDiv.querySelector('.item-desc-preview');
    const amountPreview = itemDiv.querySelector('.item-amount-preview');
    
    if (qtyPreview) qtyPreview.textContent = qtyInput.value || '0';
    if (amountPreview) amountPreview.textContent = amountInput.value || '$0.00';
    
    if (descPreview && editorDiv.quillInstance) {
        const plainText = editorDiv.quillInstance.getText().trim();
        const preview = plainText.substring(0, 60) + (plainText.length > 60 ? '...' : '');
        descPreview.textContent = preview || 'New item';
    }
}

function removeQuoteItem(itemId) {
    document.getElementById(`quote-item-${itemId}`).remove();
    updateQuoteTotals();
}

function moveQuoteItemUp(itemId) {
    const item = document.getElementById(`quote-item-${itemId}`);
    const prevItem = item.previousElementSibling;
    
    if (prevItem) {
        item.parentNode.insertBefore(item, prevItem);
        updateQuoteTotals();
    }
}

function moveQuoteItemDown(itemId) {
    const item = document.getElementById(`quote-item-${itemId}`);
    const nextItem = item.nextElementSibling;
    
    if (nextItem) {
        item.parentNode.insertBefore(nextItem, item);
        updateQuoteTotals();
    }
}

function updateQuoteTotals() {
    const items = getQuoteItems();
    const taxExempt = document.getElementById('quote-tax-exempt').checked;
    
    let subtotal = 0;
    let hasTbd = false;
    
    items.forEach(item => {
        if (item.rate.toUpperCase() === 'TBD' || item.amount.toUpperCase() === 'TBD') {
            hasTbd = true;
        } else {
            const amount = parseFloat(item.amount.replace(/[$,]/g, '')) || 0;
            subtotal += amount;
        }
    });
    
    const taxAmount = taxExempt ? 0 : (subtotal * 8.25 / 100);
    const total = subtotal + taxAmount;
    
    document.getElementById('quote-subtotal').textContent = `$${subtotal.toFixed(2)}`;
    document.getElementById('quote-tax').textContent = taxExempt ? '$0.00' : `$${taxAmount.toFixed(2)}`;
    document.getElementById('quote-total').textContent = hasTbd ? `$${total.toFixed(2)}*` : `$${total.toFixed(2)}`;
    
    document.getElementById('quote-tax-row').style.display = taxExempt ? 'none' : 'block';
}

function getQuoteItems() {
    const items = [];
    const itemDivs = document.querySelectorAll('#quote-items > div');
    
    itemDivs.forEach(div => {
        const descEditor = div.querySelector('.quote-item-description-editor');
        const descriptionHTML = descEditor && descEditor.quillInstance 
            ? descEditor.quillInstance.root.innerHTML 
            : '';
        
        const item = {
            quantity: div.querySelector('[data-field="quantity"]').value,
            description: descriptionHTML,
            rate: div.querySelector('[data-field="rate"]').value,
            amount: div.querySelector('[data-field="amount"]').value
        };
        items.push(item);
    });
    
    return items;
}

async function handleQuoteSubmit(e) {
    e.preventDefault();
    
    const items = getQuoteItems();
    
    if (items.length === 0) {
        alert('Please add at least one item');
        return;
    }
    
    const data = {
        customer_id: parseInt(document.getElementById('quote-customer').value),
        quote_date: document.getElementById('quote-date').value,
        tax_exempt: document.getElementById('quote-tax-exempt').checked,
        items: items
    };
    
    try {
        const url = currentQuoteId ? `/api/quotes/${currentQuoteId}` : '/api/quotes';
        const method = currentQuoteId ? 'PUT' : 'POST';
        
        const response = await fetch(url, {
            method,
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(data)
        });
        
        if (response.ok) {
            closeQuoteModal();
            loadQuotes();
        } else {
            alert('Error saving quote');
        }
    } catch (error) {
        console.error('Error:', error);
        alert('Error saving quote');
    }
}

async function editQuote(id) {
    await openQuoteModal(id);
}

async function deleteQuote(id) {
    if (!confirm('Are you sure you want to delete this quote?')) return;
    
    try {
        const response = await fetch(`/api/quotes/${id}`, { method: 'DELETE' });
        if (response.ok) {
            loadQuotes();
        } else {
            alert('Error deleting quote');
        }
    } catch (error) {
        console.error('Error:', error);
        alert('Error deleting quote');
    }
}

function viewQuotePDF(id) {
    window.open(`/api/quotes/${id}/pdf`, '_blank');
}

async function convertQuoteToInvoice(quoteId) {
    if (!confirm('Convert this quote to an invoice?')) return;
    
    try {
        const response = await fetch(`/api/quotes/${quoteId}/convert-to-invoice`, {
            method: 'POST'
        });
        
        if (response.ok) {
            const invoice = await response.json();
            alert(`Invoice ${invoice.invoice_number} created successfully!`);
            loadInvoices();
            showTab('invoices');
        } else {
            const error = await response.json();
            alert(error.error || 'Error converting quote to invoice');
        }
    } catch (error) {
        console.error('Error:', error);
        alert('Error converting quote to invoice');
    }
}

// Invoice Management - Same accordion pattern
async function fetchNextInvoiceNumber() {
    try {
        const response = await fetch('/api/invoices/next-number');
        const data = await response.json();
        document.getElementById('invoice-number').value = data.next_number;
    } catch (error) {
        console.error('Error fetching next invoice number:', error);
    }
}

async function loadInvoices() {
    try {
        const response = await fetch('/api/invoices');
        invoices = await response.json();
        renderInvoices();
    } catch (error) {
        console.error('Error loading invoices:', error);
        alert('Error loading invoices');
    }
}

function renderInvoices() {
    const tbody = document.getElementById('invoices-list');
    tbody.innerHTML = invoices.map(invoice => `
        <tr>
            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">${invoice.invoice_number}</td>
            <td class="px-6 py-4 text-sm text-gray-500">${invoice.customer_name || 'N/A'}</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${formatDate(invoice.invoice_date)}</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${invoice.terms}</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 font-semibold">$${parseFloat(invoice.total).toFixed(2)}</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium space-x-2">
                <button onclick="viewInvoicePDF(${invoice.id})" class="text-green-600 hover:text-green-900">PDF</button>
                <button onclick="editInvoice(${invoice.id})" class="text-blue-600 hover:text-blue-900">Edit</button>
                <button onclick="deleteInvoice(${invoice.id})" class="text-red-600 hover:text-red-900">Delete</button>
            </td>
        </tr>
    `).join('');
}

async function openInvoiceModal(invoiceId = null) {
    currentInvoiceId = invoiceId;
    const modal = document.getElementById('invoice-modal');
    const title = document.getElementById('invoice-modal-title');
    
    if (invoiceId) {
        title.textContent = 'Edit Invoice';
        const response = await fetch(`/api/invoices/${invoiceId}`);
        const data = await response.json();
        
        // Set customer in Alpine component
        const customer = customers.find(c => c.id === data.invoice.customer_id);
        if (customer) {
            const customerInput = document.querySelector('#invoice-modal input[placeholder="Search customer..."]');
            if (customerInput) {
                customerInput.value = customer.name;
                customerInput.dispatchEvent(new Event('input'));
                
                const alpineData = Alpine.$data(customerInput.closest('[x-data]'));
                if (alpineData) {
                    alpineData.search = customer.name;
                    alpineData.selectedId = customer.id;
                    alpineData.selectedName = customer.name;
                }
            }
        }
        
        document.getElementById('invoice-number').value = data.invoice.invoice_number;
        document.getElementById('invoice-customer').value = data.invoice.customer_id;
        const dateOnly = data.invoice.invoice_date.split('T')[0];
        document.getElementById('invoice-date').value = dateOnly;
        document.getElementById('invoice-terms').value = data.invoice.terms;
        document.getElementById('invoice-authorization').value = data.invoice.auth_code || '';
        document.getElementById('invoice-tax-exempt').checked = data.invoice.tax_exempt;
        
        // Load items
        document.getElementById('invoice-items').innerHTML = '';
        itemCounter = 0;
        data.items.forEach(item => {
            addInvoiceItem(item);
        });
        
        updateInvoiceTotals();
    } else {
        title.textContent = 'New Invoice';
        document.getElementById('invoice-form').reset();
        document.getElementById('invoice-items').innerHTML = '';
        document.getElementById('invoice-terms').value = 'Net 30';
        itemCounter = 0;
        setDefaultDate();
        
        // Fetch next invoice number
        fetchNextInvoiceNumber();
        
        // Add one default item
        addInvoiceItem();
    }
    
    modal.classList.add('active');
}

function closeInvoiceModal() {
    document.getElementById('invoice-modal').classList.remove('active');
    currentInvoiceId = null;
}

function addInvoiceItem(item = null) {
    const itemId = itemCounter++;
    const itemsDiv = document.getElementById('invoice-items');
    
    const itemDiv = document.createElement('div');
    itemDiv.className = 'border border-gray-300 rounded-lg mb-3 bg-white';
    itemDiv.id = `invoice-item-${itemId}`;
    itemDiv.setAttribute('x-data', `{ open: ${item ? 'false' : 'true'} }`);
    
    // Get preview text
    const previewQty = item ? item.quantity : '';
    const previewAmount = item ? item.amount : '$0.00';
    let previewDesc = 'New item';
    if (item && item.description) {
        const temp = document.createElement('div');
        temp.innerHTML = item.description;
        previewDesc = temp.textContent.substring(0, 60) + (temp.textContent.length > 60 ? '...' : '');
    }
    
    itemDiv.innerHTML = `
        <!-- Accordion Header -->
        <div class="flex items-center p-4">
            <!-- Move Buttons (Left) - Outside accordion click area -->
            <div class="flex flex-col mr-3" onclick="event.stopPropagation()">
                <button type="button" onclick="moveInvoiceItemUp(${itemId})" 
                        class="text-blue-600 hover:text-blue-800 text-lg leading-none mb-1"
                        title="Move Up">
                    ↑
                </button>
                <button type="button" onclick="moveInvoiceItemDown(${itemId})" 
                        class="text-blue-600 hover:text-blue-800 text-lg leading-none"
                        title="Move Down">
                    ↓
                </button>
            </div>
            
            <!-- Accordion Toggle & Content (Center) -->
            <div @click="open = !open" class="flex items-center flex-1 cursor-pointer hover:bg-gray-50 rounded px-3 py-2">
                <svg x-show="!open" class="w-5 h-5 text-gray-500 mr-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                </svg>
                <svg x-show="open" class="w-5 h-5 text-gray-500 mr-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7" />
                </svg>
                <span class="text-sm font-medium">Qty: <span class="item-qty-preview">${previewQty}</span></span>
                <span class="text-sm text-gray-600 flex-1 truncate mx-4 item-desc-preview">${previewDesc}</span>
                <span class="text-sm font-semibold item-amount-preview">${previewAmount}</span>
            </div>
            
            <!-- Delete Button (Right) - Outside accordion click area -->
            <button type="button" onclick="removeInvoiceItem(${itemId}); event.stopPropagation();" 
                    class="ml-3 px-3 py-2 bg-red-500 hover:bg-red-600 text-white rounded-md text-sm">
                ×
            </button>
        </div>
        
        <!-- Accordion Content -->
        <div x-show="open" x-transition class="p-4 border-t border-gray-200">
            <div class="grid grid-cols-12 gap-3 items-start">
                <div class="col-span-1">
                    <label class="block text-xs font-medium text-gray-700 mb-1">Qty</label>
                    <input type="text" data-item="${itemId}" data-field="quantity" 
                           value="${item ? item.quantity : ''}"
                           class="invoice-item-input w-full px-2 py-2 border border-gray-300 rounded-md text-sm">
                </div>
                <div class="col-span-6">
                    <label class="block text-xs font-medium text-gray-700 mb-1">Description</label>
                    <div data-item="${itemId}" data-field="description" 
                         class="invoice-item-description-editor border border-gray-300 rounded-md bg-white" 
                         style="min-height: 60px;">
                    </div>
                </div>
                <div class="col-span-2">
                    <label class="block text-xs font-medium text-gray-700 mb-1">Rate</label>
                    <input type="text" data-item="${itemId}" data-field="rate" 
                           value="${item ? item.rate : ''}"
                           class="invoice-item-input w-full px-2 py-2 border border-gray-300 rounded-md text-sm">
                </div>
                <div class="col-span-3">
                    <label class="block text-xs font-medium text-gray-700 mb-1">Amount</label>
                    <input type="text" data-item="${itemId}" data-field="amount" 
                           value="${item ? item.amount : ''}"
                           class="invoice-item-amount w-full px-2 py-2 border border-gray-300 rounded-md text-sm">
                </div>
            </div>
        </div>
    `;
    
    itemsDiv.appendChild(itemDiv);
    
    // Initialize Quill editor
    const editorDiv = itemDiv.querySelector('.invoice-item-description-editor');
    const quill = new Quill(editorDiv, {
        theme: 'snow',
        modules: {
            toolbar: [
                ['bold', 'italic', 'underline'],
                [{ 'list': 'ordered'}, { 'list': 'bullet' }],
                ['clean']
            ]
        }
    });
    
    if (item && item.description) {
        quill.root.innerHTML = item.description;
    }
    
    quill.on('text-change', () => {
        updateInvoiceItemPreview(itemDiv, itemId);
        updateInvoiceTotals();
    });
    
    editorDiv.quillInstance = quill;
    
    // Auto-calculate amount and update preview
    const qtyInput = itemDiv.querySelector('[data-field="quantity"]');
    const rateInput = itemDiv.querySelector('[data-field="rate"]');
    const amountInput = itemDiv.querySelector('[data-field="amount"]');
    
    const calculateAmount = () => {
        if (qtyInput.value && rateInput.value) {
            const qty = parseFloat(qtyInput.value) || 0;
            const rateValue = parseFloat(rateInput.value.replace(/[^0-9.]/g, '')) || 0;
            amountInput.value = (qty * rateValue).toFixed(2);
        }
        updateInvoiceItemPreview(itemDiv, itemId);
        updateInvoiceTotals();
    };
    
    qtyInput.addEventListener('input', calculateAmount);
    rateInput.addEventListener('input', calculateAmount);
    amountInput.addEventListener('input', () => {
        updateInvoiceItemPreview(itemDiv, itemId);
        updateInvoiceTotals();
    });
    
    updateInvoiceItemPreview(itemDiv, itemId);
    updateInvoiceTotals();
}

function updateInvoiceItemPreview(itemDiv, itemId) {
    const qtyInput = itemDiv.querySelector('[data-field="quantity"]');
    const amountInput = itemDiv.querySelector('[data-field="amount"]');
    const editorDiv = itemDiv.querySelector('.invoice-item-description-editor');
    
    const qtyPreview = itemDiv.querySelector('.item-qty-preview');
    const descPreview = itemDiv.querySelector('.item-desc-preview');
    const amountPreview = itemDiv.querySelector('.item-amount-preview');
    
    if (qtyPreview) qtyPreview.textContent = qtyInput.value || '0';
    if (amountPreview) amountPreview.textContent = amountInput.value || '$0.00';
    
    if (descPreview && editorDiv.quillInstance) {
        const plainText = editorDiv.quillInstance.getText().trim();
        const preview = plainText.substring(0, 60) + (plainText.length > 60 ? '...' : '');
        descPreview.textContent = preview || 'New item';
    }
}

function removeInvoiceItem(itemId) {
    document.getElementById(`invoice-item-${itemId}`).remove();
    updateInvoiceTotals();
}

function moveInvoiceItemUp(itemId) {
    const item = document.getElementById(`invoice-item-${itemId}`);
    const prevItem = item.previousElementSibling;
    
    if (prevItem) {
        item.parentNode.insertBefore(item, prevItem);
        updateInvoiceTotals();
    }
}

function moveInvoiceItemDown(itemId) {
    const item = document.getElementById(`invoice-item-${itemId}`);
    const nextItem = item.nextElementSibling;
    
    if (nextItem) {
        item.parentNode.insertBefore(nextItem, item);
        updateInvoiceTotals();
    }
}

function updateInvoiceTotals() {
    const items = getInvoiceItems();
    const taxExempt = document.getElementById('invoice-tax-exempt').checked;
    
    let subtotal = 0;
    
    items.forEach(item => {
        const amount = parseFloat(item.amount.replace(/[$,]/g, '')) || 0;
        subtotal += amount;
    });
    
    const taxAmount = taxExempt ? 0 : (subtotal * 8.25 / 100);
    const total = subtotal + taxAmount;
    
    document.getElementById('invoice-subtotal').textContent = `$${subtotal.toFixed(2)}`;
    document.getElementById('invoice-tax').textContent = taxExempt ? '$0.00' : `$${taxAmount.toFixed(2)}`;
    document.getElementById('invoice-total').textContent = `$${total.toFixed(2)}`;
    
    document.getElementById('invoice-tax-row').style.display = taxExempt ? 'none' : 'block';
}

function getInvoiceItems() {
    const items = [];
    const itemDivs = document.querySelectorAll('#invoice-items > div');
    
    itemDivs.forEach(div => {
        const descEditor = div.querySelector('.invoice-item-description-editor');
        const descriptionHTML = descEditor && descEditor.quillInstance 
            ? descEditor.quillInstance.root.innerHTML 
            : '';
        
        const item = {
            quantity: div.querySelector('[data-field="quantity"]').value,
            description: descriptionHTML,
            rate: div.querySelector('[data-field="rate"]').value,
            amount: div.querySelector('[data-field="amount"]').value
        };
        items.push(item);
    });
    
    return items;
}

async function handleInvoiceSubmit(e) {
    e.preventDefault();
    
    const items = getInvoiceItems();
    
    if (items.length === 0) {
        alert('Please add at least one item');
        return;
    }
    
    const invoiceNumber = document.getElementById('invoice-number').value;
    
    if (!invoiceNumber || !/^\d+$/.test(invoiceNumber)) {
        alert('Invalid invoice number. Must be a numeric value.');
        return;
    }
    
    const data = {
        invoice_number: invoiceNumber,
        customer_id: parseInt(document.getElementById('invoice-customer').value),
        invoice_date: document.getElementById('invoice-date').value,
        terms: document.getElementById('invoice-terms').value,
        auth_code: document.getElementById('invoice-authorization').value,
        tax_exempt: document.getElementById('invoice-tax-exempt').checked,
        items: items
    };
    
    try {
        const url = currentInvoiceId ? `/api/invoices/${currentInvoiceId}` : '/api/invoices';
        const method = currentInvoiceId ? 'PUT' : 'POST';
        
        const response = await fetch(url, {
            method,
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(data)
        });
        
        if (response.ok) {
            closeInvoiceModal();
            loadInvoices();
        } else {
            const error = await response.json();
            alert(error.error || 'Error saving invoice');
        }
    } catch (error) {
        console.error('Error:', error);
        alert('Error saving invoice');
    }
}

async function editInvoice(id) {
    await openInvoiceModal(id);
}

async function deleteInvoice(id) {
    if (!confirm('Are you sure you want to delete this invoice?')) return;
    
    try {
        const response = await fetch(`/api/invoices/${id}`, { method: 'DELETE' });
        if (response.ok) {
            loadInvoices();
        } else {
            alert('Error deleting invoice');
        }
    } catch (error) {
        console.error('Error:', error);
        alert('Error deleting invoice');
    }
}

function viewInvoicePDF(id) {
    window.open(`/api/invoices/${id}/pdf`, '_blank');
}