{% extends "mobile/base.html" %}
{% block title %}Import — Bills{% endblock %}

{% block content %}
<h2 style="margin-bottom:1rem; font-size:1.2rem;">Upload Receipt or Invoice</h2>

<!-- Drop zone / camera area -->
<div id="m-dropzone"
     style="border: 2px dashed var(--border); border-radius: var(--radius);
            padding: 2.5rem 1rem; text-align: center; cursor: pointer;
            background: var(--bg); transition: border-color .2s, background .2s;">
    <img src="{{ url_for('static', filename='figs/upload_icon.png') }}"
         alt="Upload" style="width:64px; opacity:.7; margin-bottom:.75rem;">
    <p style="font-size:1rem; font-weight:600; margin:0 0 .4rem;">
        Tap to take a photo or select a file
    </p>
    <p style="font-size:.85rem; color:var(--muted); margin:0;">
        PDF, JPG, PNG accepted
    </p>
</div>

<!-- Hidden file input — capture="environment" opens rear camera on phones -->
<input type="file" id="m-file-input" multiple
       accept="image/*,application/pdf"
       capture="environment"
       style="display:none;">

<!-- Progress / result area -->
<div id="m-result" style="margin-top:1rem;"></div>

<script>
(function () {
    const zone  = document.getElementById('m-dropzone');
    const input = document.getElementById('m-file-input');
    const result = document.getElementById('m-result');

    // Tap on zone → trigger file picker
    zone.addEventListener('click', () => input.click());

    // Drag-and-drop (desktop fallback)
    zone.addEventListener('dragover', e => {
        e.preventDefault();
        zone.style.borderColor = 'var(--primary)';
        zone.style.background  = '#eef2ff';
    });
    zone.addEventListener('dragleave', () => {
        zone.style.borderColor = 'var(--border)';
        zone.style.background  = 'var(--bg)';
    });
    zone.addEventListener('drop', e => {
        e.preventDefault();
        zone.style.borderColor = 'var(--border)';
        zone.style.background  = 'var(--bg)';
        handleFiles(e.dataTransfer.files);
    });

    // File selected
    input.addEventListener('change', () => {
        if (input.files.length) handleFiles(input.files);
        input.value = ''; // reset so same file can be re-selected
    });

    async function handleFiles(files) {
        if (!files.length) return;

        result.innerHTML = `<p style="color:var(--muted); font-size:.9rem;">
            ⏳ Uploading ${files.length} file(s)…</p>`;

        const fd = new FormData();
        for (const f of files) fd.append('file', f);

        try {
            const resp = await fetch('/import/upload', { method: 'POST', body: fd });
            const data = await resp.json();

            // Count successes and errors across results array
            const ok  = (data.results || []).filter(r => !r.error).length;
            const err = (data.results || []).filter(r =>  r.error).length;

            let html = '';
            if (ok)  html += `<p style="color:var(--success); font-size:.95rem;">
                ✅ ${ok} file(s) uploaded successfully.</p>`;
            if (err) html += `<p style="color:var(--error); font-size:.95rem;">
                ⚠️ ${err} file(s) had errors.</p>`;

            // Detail lines
            (data.results || []).forEach(r => {
                const color = r.error ? 'var(--error)' : 'var(--success)';
                html += `<p style="font-size:.8rem; color:${color}; margin:.2rem 0;">
                    ${r.filename || r.file || ''}: ${r.error || r.status || 'ok'}</p>`;
            });

            result.innerHTML = html ||
                `<p style="color:var(--success);">✅ Upload complete.</p>`;

        } catch (e) {
            result.innerHTML = `<p style="color:var(--error);">❌ Upload failed: ${e.message}</p>`;
        }
    }
})();
</script>
{% endblock %}