// ── Document type field toggling ──────────────────────────────
const FIELD_GROUPS = {
    invoice:      ['invoice', 'invoice_quote', 'line_items'],
    quote:        ['quote', 'invoice_quote', 'line_items'],
    proposal:     ['proposal'],
    receipt:      ['receipt', 'proposal receipt custom'],
    statement:    ['statement'],
    work_order:   ['work_order', 'line_items'],
    delivery_note: ['delivery_note', 'line_items'],
    contract:     ['contract'],
    certificate:  ['certificate'],
    report:       ['report'],
    custom:       ['invoice', 'invoice_quote', 'line_items', 'proposal', 'proposal receipt custom'],
};

function toggleDocFields() {
    const dtype = document.getElementById('gen-doc-type').value;
    const groups = FIELD_GROUPS[dtype] || [];

    // Hide all field groups first
    document.querySelectorAll('[data-field-group]').forEach(el => {
        el.style.display = 'none';
    });

    // Show the groups that match this type
    groups.forEach(g => {
        document.querySelectorAll(`[data-field-group="${g}"]`).forEach(el => {
            el.style.display = '';
        });
    });

    // Update layout hint text
    const hint = document.querySelector('#gen-layout + .form-hint');
    if (hint) {
        const labels = {
            invoice: 'invoice', quote: 'quote', proposal: 'proposal', receipt: 'receipt',
            statement: 'statement', work_order: 'work order', delivery_note: 'delivery note',
            contract: 'contract', certificate: 'certificate', report: 'report', custom: 'document',
        };
        hint.textContent = 'Choose the visual layout for this ' + (labels[dtype] || 'document') + '.';
    }

    // Update line item total label
    const totalEl = document.querySelector('.line-total');
    if (totalEl) {
        totalEl.textContent = (dtype === 'invoice' || dtype === 'quote') ? 'Total: $' : '';
    }
}

function filterDocs(status, chipEl) {
    document.querySelectorAll('#status-filters .status-chip').forEach(c => c.classList.remove('active'));
    if (chipEl) chipEl.classList.add('active');
    const rows = document.querySelectorAll('#doc-table tbody tr');
    const activeType = document.querySelector('#doc-type-filters .status-chip.active')?.dataset?.type || 'all';
    rows.forEach(row => {
        const typeMatch = !activeType || activeType === 'all' || row.dataset.type === activeType;
        const statusMatch = !status || row.dataset.status === status;
        row.style.display = (typeMatch && statusMatch) ? '' : 'none';
    });
}

function filterByType(dtype, chipEl) {
    document.querySelectorAll('#doc-type-filters .status-chip').forEach(c => c.classList.remove('active'));
    if (chipEl) {
        chipEl.classList.add('active');
        chipEl.dataset.type = dtype || 'all';
    }
    const rows = document.querySelectorAll('#doc-table tbody tr');
    const activeStatus = document.querySelector('#status-filters .status-chip.active')?.dataset?.status || null;
    rows.forEach(row => {
        const typeMatch = !dtype || dtype === 'all' || row.dataset.type === dtype;
        const statusMatch = !activeStatus || row.dataset.status === activeStatus;
        row.style.display = (typeMatch && statusMatch) ? '' : 'none';
    });
}

// Tab switching
function switchTab(tab, btnEl) {
    document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
    btnEl.classList.add('active');
    document.getElementById('tab-documents').style.display = tab === 'documents' ? '' : 'none';
    document.getElementById('tab-templates').style.display = tab === 'templates' ? '' : 'none';
    if (tab === 'templates') loadTemplates();
}

// Toast
function showToast(msg) {
    const t = document.getElementById('toast');
    t.textContent = msg;
    t.classList.add('show');
    setTimeout(() => t.classList.remove('show'), 3000);
}

// ---- Template Management ----
let templates = [];

async function loadTemplates() {
    try {
        const res = await fetch('/documents/templates');
        if (!res.ok) {
            throw new Error('HTTP ' + res.status + ': ' + res.statusText);
        }
        const contentType = res.headers.get('content-type');
        if (!contentType || !contentType.includes('application/json')) {
            throw new Error('Unexpected response — not JSON (possible login redirect)');
        }
        const data = await res.json();
        templates = data.templates || [];
        renderTemplates();
    } catch (e) {
        console.error('Failed to load templates', e);
        document.getElementById('template-grid').innerHTML =
            '<div style="grid-column:1/-1;text-align:center;padding:48px 20px;color:#888;">' +
            '<p>Failed to load templates.</p>' +
            '<p style="font-size:12px;color:#bbb;">' + e.message + '</p></div>';
    }
}

function renderTemplates() {
    const grid = document.getElementById('template-grid');
    if (templates.length === 0) {
        grid.innerHTML = `
            <div style="grid-column:1/-1;text-align:center;padding:48px 20px;color:#888;">
                <p>No templates yet.</p>
                <button class="primary-btn" data-onclick="openTemplateModal()" style="margin-top:12px;">+ Create Template</button>
            </div>`;
        return;
    }
    grid.innerHTML = templates.map(t => `
        <div class="template-card" data-id="${t.id}">
            <div style="display:flex;justify-content:space-between;align-items:start;">
                <h4>${escapeHtml(t.name)}</h4>
                <span class="tpl-type">${escapeHtml(t.document_type || 'invoice')}</span>
            </div>
            <div class="tpl-layout">Layout: ${escapeHtml(t.layout || 'classic')}</div>
            ${t.invoice_number_format ? `<div style="font-size:12px;color:#666;">Format: ${escapeHtml(t.invoice_number_format)}</div>` : ''}
            <div class="tpl-actions">
                <button class="action-btn primary" data-onclick="generateFromTemplate(${t.id})">Generate</button>
                <button class="action-btn danger" data-onclick="deleteTemplate(${t.id})">Delete</button>
            </div>
        </div>
    `).join('');
}

function openTemplateModal() {
    document.getElementById('template-modal').classList.add('open');
    document.getElementById('tpl-name').value = '';
    document.getElementById('tpl-doc-type').value = 'invoice';
    document.getElementById('tpl-layout').value = 'classic';
    document.getElementById('tpl-inv-format').value = 'INV-YYYY-####';
    document.getElementById('tpl-error').style.display = 'none';
    document.body.style.overflow = 'hidden';
    document.querySelector('nav').style.display = 'none';
}

function closeTemplateModal() {
    document.getElementById('template-modal').classList.remove('open');
    document.body.style.overflow = '';
    document.querySelector('nav').style.display = '';
}

async function createTemplate() {
    const name = document.getElementById('tpl-name').value.trim();
    if (!name) {
        showFormError('tpl-error', 'Template name is required.');
        return;
    }
    const data = {
        name: name,
        document_type: document.getElementById('tpl-doc-type').value,
        layout: document.getElementById('tpl-layout').value,
        invoice_number_format: document.getElementById('tpl-inv-format').value.trim() || 'INV-YYYY-####',
    };
    try {
        const res = await fetch('/documents/templates', {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify(data),
        });
        const result = await res.json();
        if (!res.ok) throw new Error(result.error || 'Failed to create template');
        closeTemplateModal();
        await loadTemplates();
        showToast('Template created');
    } catch (e) {
        showFormError('tpl-error', e.message);
    }
}

async function deleteTemplate(templateId) {
    if (!confirm('Delete this template? This cannot be undone.')) return;
    try {
        const res = await fetch(`/documents/templates/${templateId}`, { method: 'DELETE' });
        const result = await res.json();
        if (!res.ok) throw new Error(result.error || 'Failed to delete template');
        await loadTemplates();
        showToast('Template deleted');
    } catch (e) {
        showToast('Error: ' + e.message);
    }
}

// ---- Invoice Generation ----
function openGenerateModal() {
    document.getElementById('generate-modal').classList.add('open');
    document.getElementById('gen-customer-name').value = '';
    document.getElementById('gen-customer-email').value = '';
    const tomorrow = new Date();
    tomorrow.setDate(tomorrow.getDate() + 14);
    document.getElementById('gen-due-date').value = tomorrow.toISOString().split('T')[0];
    document.getElementById('line-items-container').innerHTML = `
        <div class="line-item-row">
            <input type="text" placeholder="Description" class="li-desc">
            <input type="number" placeholder="Qty" value="1" min="1" class="li-qty" data-oninput="calcTotal()">
            <input type="number" placeholder="Price" step="any" class="li-price" data-oninput="calcTotal()">
            <button class="line-item-remove" data-onclick="removeLineItem(this)">×</button>
        </div>`;
    document.getElementById('gen-error').style.display = 'none';
    toggleDocFields();
    loadTemplateSelect();
    document.body.style.overflow = 'hidden';
    document.querySelector('nav').style.display = 'none';
}

function closeGenerateModal() {
    document.getElementById('generate-modal').classList.remove('open');
    document.body.style.overflow = '';
    document.querySelector('nav').style.display = '';
}

async function loadTemplateSelect() {
    const sel = document.getElementById('gen-template-select');
    if (templates.length === 0) {
        try {
            const res = await fetch('/documents/templates');
            const data = await res.json();
            templates = data.templates || [];
        } catch (e) { /* ignore */ }
    }
    sel.innerHTML = '<option value="">— No template (standalone) —</option>' +
        templates.map(t => `<option value="${t.id}">${escapeHtml(t.name)} (${t.document_type || 'invoice'})</option>`).join('');
}

async function generateFromTemplate(templateId) {
    // Ensure templates are loaded first
    if (templates.length === 0) {
        try {
            const res = await fetch('/documents/templates');
            const data = await res.json();
            templates = data.templates || [];
        } catch (e) { /* ignore */ }
    }
    // Populate the template select dropdown with options
    await loadTemplateSelect();
    openGenerateModal();
    document.getElementById('gen-template-select').value = templateId;
    // Sync document type to match the selected template
    const template = templates.find(t => t.id == templateId);
    if (template && template.document_type) {
        document.getElementById('gen-doc-type').value = template.document_type;
        toggleDocFields();
    }
}

function addLineItem() {
    const container = document.getElementById('line-items-container');
    const row = document.createElement('div');
    row.className = 'line-item-row';
    row.innerHTML = `
        <input type="text" placeholder="Description" class="li-desc">
        <input type="number" placeholder="Qty" value="1" min="1" class="li-qty" data-oninput="calcTotal()">
        <input type="number" placeholder="Price" step="any" class="li-price" data-oninput="calcTotal()">
        <button class="line-item-remove" data-onclick="removeLineItem(this)">×</button>`;
    container.appendChild(row);
}

function removeLineItem(btn) {
    const container = document.getElementById('line-items-container');
    if (container.children.length > 1) {
        btn.closest('.line-item-row').remove();
        calcTotal();
    }
}

function calcTotal() {
    let total = 0;
    document.querySelectorAll('.line-item-row').forEach(row => {
        const qty = parseFloat(row.querySelector('.li-qty').value) || 0;
        const price = parseFloat(row.querySelector('.li-price').value) || 0;
        total += qty * price;
    });
    document.getElementById('line-total').textContent = total.toFixed(2);
}

async function generateInvoice() {
    const customerName = document.getElementById('gen-customer-name').value.trim();
    const customerEmail = document.getElementById('gen-customer-email').value.trim();
    if (!customerName) {
        showFormError('gen-error', 'Customer name is required.');
        return;
    }
    const dtype = document.getElementById('gen-doc-type').value;
    // Determine which types need line items vs other data
    const needsLineItems = ['invoice', 'quote', 'custom', 'work_order', 'delivery_note'].includes(dtype);
    const lineItems = [];
    if (needsLineItems) {
        let valid = true;
        document.querySelectorAll('.line-item-row').forEach(row => {
            const desc = row.querySelector('.li-desc').value.trim();
            const qty = parseFloat(row.querySelector('.li-qty').value) || 0;
            const price = parseFloat(row.querySelector('.li-price').value) || 0;
            if (!desc || price <= 0) valid = false;
            lineItems.push({ description: desc || 'Service', qty, unit_price: price });
        });
        if (!valid || lineItems.length === 0) {
            showFormError('gen-error', 'Each line item needs a description and price.');
            return;
        }
    }
    try {
        const payload = {
            template_id: document.getElementById('gen-template-select').value || null,
            document_type: dtype,
            layout: document.getElementById('gen-layout').value,
            style: {
                primary_color: document.getElementById('gen-primary-color').value,
            },
            customer_name: customerName,
            customer_email: customerEmail,
            due_date: dtype === 'invoice' ? (document.getElementById('gen-due-date').value || null) : null,
            line_items: lineItems,
            notes: document.getElementById('gen-notes')?.value.trim() || '',
            tax_rate: parseFloat(document.getElementById('gen-tax-rate').value) || 0,
            payment_terms: document.getElementById('gen-payment-terms')?.value.trim() || '',
            payment_link: document.getElementById('gen-payment-link')?.value.trim() || '',
            payment_link_text: document.getElementById('gen-payment-link-text')?.value.trim() || 'Pay Now',
        };
        // Handle type-specific fields
        if (dtype === 'quote') {
            payload.due_date = document.getElementById('gen-expiry-date').value || null;
        }
        if (dtype === 'proposal') {
            payload.scope = document.getElementById('gen-scope')?.value.trim() || '';
            payload.due_date = document.getElementById('gen-valid-until').value || null;
        }
        if (dtype === 'receipt') {
            payload.due_date = document.getElementById('gen-receipt-date').value || null;
        }
        // Pass through any additional custom fields for all types
        const extraFields = [
            'executive_summary', 'scope', 'scope_items', 'timeline', 'terms', 'title',
            'transactions', 'opening_balance', 'total_charges', 'total_payments', 'closing_balance',
            'period_start', 'period_end',
            'tasks', 'time_in', 'time_out', 'total_hours', 'work_order_number', 'service_address', 'scheduled_date',
            'po_number', 'order_number', 'carrier', 'tracking_number', 'weight',
            'contract_title', 'preamble', 'terms_sections', 'effective_date',
        ];
        for (const field of extraFields) {
            const el = document.getElementById('gen-' + field);
            if (el) {
                payload[field] = el.value?.trim() || '';
            }
        }
        // Build from/to objects for templates
        payload.from = {
            name: document.getElementById('gen-from-name')?.value.trim() || '',
            email: document.getElementById('gen-from-email')?.value.trim() || '',
            address: document.getElementById('gen-from-address')?.value.trim() || '',
            phone: document.getElementById('gen-from-phone')?.value.trim() || '',
        };
        payload.to = {
            name: customerName,
            email: customerEmail,
            address: document.getElementById('gen-customer_address')?.value.trim() || '',
        };
        const res = await fetch('/documents/generate', {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify(payload),
        });
        const result = await res.json();
        if (!res.ok) throw new Error(result.error || 'Generation failed');
        closeGenerateModal();
        // Show preview of the generated document
        openPreview(result.document_id, result.invoice_number || 'Invoice Generated');
        showToast('Document generated!');
    } catch (e) {
        showFormError('gen-error', e.message);
    }
}

// ---- Portal Actions ----
async function copyPortalLink(documentId, btnEl) {
    try {
        const res = await fetch(`/documents/${documentId}/share-link`);
        const data = await res.json();
        if (!res.ok) throw new Error(data.error || 'Failed to get link');
        await navigator.clipboard.writeText(data.portal_url);
        const orig = btnEl.textContent;
        btnEl.textContent = '✓';
        btnEl.style.color = '#10b981';
        showToast('Portal link copied to clipboard');
        setTimeout(() => { btnEl.textContent = orig; btnEl.style.color = ''; }, 2000);
    } catch (e) {
        showToast('Error: ' + e.message);
    }
}

async function sendInvoice(documentId, customerEmail, btnEl) {
    if (!confirm(`Send invoice to ${customerEmail}?`)) return;
    const orig = btnEl.textContent;
    btnEl.textContent = '⏳';
    btnEl.disabled = true;
    try {
        const res = await fetch(`/documents/${documentId}/send`, { method: 'POST' });
        const data = await res.json();
        if (!res.ok) throw new Error(data.error || 'Failed to send');
        btnEl.textContent = '✓';
        btnEl.style.color = '#10b981';
        showToast('Invoice sent to ' + customerEmail);
        setTimeout(() => { btnEl.textContent = orig; btnEl.style.color = ''; btnEl.disabled = false; }, 2000);
    } catch (e) {
        btnEl.textContent = orig;
        btnEl.disabled = false;
        showToast('Error: ' + e.message);
    }
}

// ---- PDF Preview ----
function openPreview(documentId, title) {
    document.getElementById('preview-title').textContent = title;
    document.getElementById('preview-iframe').src = '/documents/' + documentId + '/embed?_t=' + Date.now();
    document.getElementById('preview-download').href = '/documents/' + documentId + '/download';
    document.getElementById('preview-fullscreen').href = '/documents/' + documentId + '/download';
    document.getElementById('preview-modal').classList.add('open');
    document.body.style.overflow = 'hidden';
    document.querySelector('nav').style.display = 'none';
}

function printPreview() {
    const iframe = document.getElementById('preview-iframe');
    if (iframe.src) {
        const printWin = window.open(iframe.src, '_blank');
        printWin.onload = function() {
            printWin.focus();
            printWin.print();
        };
    }
}

function closePreview() {
    document.getElementById('preview-modal').classList.remove('open');
    document.getElementById('preview-iframe').src = '';
    document.body.style.overflow = '';
    document.querySelector('nav').style.display = '';
}

// ---- Helpers ----
function showFormError(elId, msg) {
    const el = document.getElementById(elId);
    el.textContent = msg;
    el.style.display = 'block';
}

function escapeHtml(str) {
    const div = document.createElement('div');
    div.textContent = str;
    return div.innerHTML;
}
