{% extends "base.html" %}
{% block title %}{{ title }}{% endblock %}
{% block page_title %}{{ title }}{% endblock %}

{% block extra_css %}
#ocrDropZone {
    border: 2px dashed var(--border);
    border-radius: 10px;
    padding: 20px;
    text-align: center;
    cursor: pointer;
    transition: all .2s;
    background: #f8fafc;
}
#ocrDropZone.dragover { border-color: #3b82f6; background: #eff6ff; }
#ocrDropZone.loading { border-color: #818cf8; background: #f5f3ff; }
#ocrDropZone.success { border-color: #10b981; background: #f0fdf4; }
#ocrDropZone.error   { border-color: #ef4444; background: #fef2f2; }
.ocr-field-highlight { animation: ocr-flash .6s ease; }
@keyframes ocr-flash { 0%,100%{background:transparent} 50%{background:#d1fae5} }
{% endblock %}

{% block content %}
<div class="row justify-content-center">
<div class="col-12 col-md-9 col-lg-7">

<!-- OCR Receipt Scanner -->
<div class="pcard mb-3" style="border-left: 4px solid #818cf8;">
    <div class="d-flex justify-content-between align-items-center mb-2">
        <div style="font-size:13px;font-weight:600;color:#4f46e5;">
            <i class="bi bi-stars me-1" style="color:#818cf8;"></i>AI Receipt Scanner
        </div>
        <button type="button" onclick="toggleOcr()" id="ocrToggleBtn"
            style="background:none;border:none;font-size:12px;color:#818cf8;cursor:pointer;">
            <i class="bi bi-chevron-down" id="ocrChevron"></i>
        </button>
    </div>
    <div id="ocrPanel" {% if not txn %}style="display:block;"{% else %}style="display:none;"{% endif %}>
        <div id="ocrDropZone" onclick="document.getElementById('ocrFileInput').click()"
            ondragover="event.preventDefault();this.classList.add('dragover')"
            ondragleave="this.classList.remove('dragover')"
            ondrop="handleDrop(event)">
            <input type="file" id="ocrFileInput" accept=".jpg,.jpeg,.png,.gif,.webp"
                style="display:none;" onchange="handleOcrFile(this.files[0])">
            <div id="ocrDropContent">
                <i class="bi bi-receipt" style="font-size:1.8rem;color:#a5b4fc;"></i>
                <div style="font-size:13px;font-weight:500;color:#4f46e5;margin-top:8px;">
                    Drop receipt image here or click to upload
                </div>
                <div style="font-size:11px;color:var(--muted);margin-top:4px;">
                    JPG, PNG, GIF, WEBP · max 10MB · Powered by Groq vision
                </div>
            </div>
        </div>
        <div id="ocrStatus" style="font-size:12px;margin-top:8px;display:none;"></div>
    </div>
</div>

<!-- Transaction Form -->
<div class="pcard" id="txnCard" style="border-top: 4px solid {% if txn_type=='income' %}var(--income){% else %}var(--expense){% endif %};">
    <form method="POST" novalidate id="txnForm">
        {{ form.hidden_tag() }}
        {{ form.transaction_type() }}
        <input type="hidden" name="next" value="{{ next_url or '' }}">

        <!-- Type toggle — only for income/expense (not transfer) -->
        <div class="mb-3">
            <label class="form-label fw-medium" style="font-size:13px;">Type</label>
            <div class="d-flex gap-2">
                <button type="button" id="toggleIncome" onclick="setTxnType('income')"
                    class="btn btn-sm flex-fill {% if txn_type=='income' %}btn-success{% else %}btn-outline-secondary{% endif %}"
                    style="font-size:13px;">
                    <i class="bi bi-arrow-down-circle me-1"></i>Income
                </button>
                <button type="button" id="toggleExpense" onclick="setTxnType('expense')"
                    class="btn btn-sm flex-fill {% if txn_type=='expense' %}btn-danger{% else %}btn-outline-secondary{% endif %}"
                    style="font-size:13px;">
                    <i class="bi bi-arrow-up-circle me-1"></i>Expense
                </button>
            </div>
        </div>

        <div class="mb-3">
            {{ form.description.label(class="form-label fw-medium", style="font-size:13px;") }}
            {{ form.description(class="form-control" + (" is-invalid" if form.description.errors else ""),
                                placeholder="What was this for?", id="field_description") }}
            {% for e in form.description.errors %}<div class="invalid-feedback">{{ e }}</div>{% endfor %}
        </div>

        <div class="row g-3 mb-3">
            <div class="col-6">
                {{ form.amount.label(class="form-label fw-medium", style="font-size:13px;") }}
                <div class="input-group">
                    <span class="input-group-text" style="font-size:13px;">{{ current_user.currency_symbol }}</span>
                    {{ form.amount(class="form-control" + (" is-invalid" if form.amount.errors else ""),
                                   placeholder="0.00", id="field_amount") }}
                </div>
                {% for e in form.amount.errors %}<div class="text-danger mt-1" style="font-size:12px;">{{ e }}</div>{% endfor %}
            </div>
            <div class="col-6">
                {{ form.date.label(class="form-label fw-medium", style="font-size:13px;") }}
                {{ form.date(class="form-control" + (" is-invalid" if form.date.errors else ""),
                              id="field_date") }}
            </div>
        </div>

        <div class="mb-3">
            {{ form.account_id.label(class="form-label fw-medium", style="font-size:13px;") }}
            {{ form.account_id(class="form-select" + (" is-invalid" if form.account_id.errors else "")) }}
            {% for e in form.account_id.errors %}<div class="invalid-feedback">{{ e }}</div>{% endfor %}
        </div>

        <div class="mb-3">
            {{ form.category_id.label(class="form-label fw-medium", style="font-size:13px;") }}
            {{ form.category_id(class="form-select", id="field_category") }}
        </div>

        <div class="mb-3">
            {{ form.notes.label(class="form-label fw-medium", style="font-size:13px;") }}
            {{ form.notes(class="form-control", rows=2, placeholder="Optional notes", id="field_notes") }}
        </div>

        <div class="d-flex gap-2">
            <button type="submit" id="submitBtn"
                class="btn {% if txn_type=='income' %}btn-success{% else %}btn-danger{% endif %}">
                Save {{ txn_type | title }}
            </button>
            <a id="cancelLink" href="{{ url_for('transactions.index', tab=txn_type) }}" class="btn btn-outline-secondary">Cancel</a>
        </div>
    </form>

    {# Receipt section — kept OUTSIDE #txnForm to avoid nested-form breakage #}
    {% if txn and txn.receipt %}
    <div class="mt-3 p-3" style="background:#f8fafc;border-radius:8px;">
        <div class="d-flex justify-content-between align-items-center">
            <div style="font-size:13px;">
                <i class="bi bi-paperclip me-1 text-muted"></i>
                <a href="{{ url_for('settings.view_receipt', filename=txn.receipt.filename) }}" target="_blank">
                    {{ txn.receipt.original_filename }}
                </a>
            </div>
            <div class="d-flex gap-2">
                <button type="button" onclick="ocrExistingReceipt('{{ txn.receipt.filename }}')"
                    class="btn btn-sm" style="font-size:11px;background:#ede9fe;color:#5b21b6;border:none;">
                    <i class="bi bi-stars me-1"></i>Re-extract
                </button>
                <form method="POST" action="{{ url_for('settings.delete_receipt', txn_id=txn.id) }}"
                      onsubmit="return confirm('Delete receipt?')" style="display:inline;">
                    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                    <button type="submit" class="btn btn-sm btn-outline-danger" style="font-size:11px;">Remove</button>
                </form>
            </div>
        </div>
    </div>
    {% elif txn %}
    <div class="mt-3">
        <label class="form-label fw-medium" style="font-size:13px;">Receipt</label>
        <form method="POST" action="{{ url_for('settings.upload_receipt', txn_id=txn.id) }}"
              enctype="multipart/form-data" id="receiptUploadForm">
            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
            <div class="input-group input-group-sm">
                <input type="file" name="receipt" id="receiptFileEdit"
                       class="form-control" accept=".png,.jpg,.jpeg,.gif,.pdf,.webp"
                       style="font-size:12px;" onchange="autoOcrOnUpload(this)">
                <button type="submit" class="btn btn-outline-secondary" style="font-size:12px;">Upload</button>
            </div>
            <small class="text-muted" style="font-size:11px;">PNG, JPG, WEBP, PDF — max 10MB</small>
        </form>
    </div>
    {% endif %}
</div>
</div>
</div>
{% endblock %}

{% block extra_js %}
<script>
const CSRF = '{{ csrf_token() }}';
const categoryOptions = [...document.getElementById('field_category').options];

// ── OCR panel toggle ─────────────────────────────────────────────────────────
function toggleOcr() {
    const panel = document.getElementById('ocrPanel');
    const icon  = document.getElementById('ocrChevron');
    const open  = panel.style.display !== 'none';
    panel.style.display = open ? 'none' : 'block';
    icon.className = open ? 'bi bi-chevron-down' : 'bi bi-chevron-up';
}

// ── Drag & drop ───────────────────────────────────────────────────────────────
function handleDrop(e) {
    e.preventDefault();
    document.getElementById('ocrDropZone').classList.remove('dragover');
    const file = e.dataTransfer.files[0];
    if (file) handleOcrFile(file);
}

// ── Main OCR handler ──────────────────────────────────────────────────────────
function handleOcrFile(file) {
    if (!file) return;
    const allowed = ['image/jpeg','image/png','image/gif','image/webp'];
    if (!allowed.includes(file.type)) {
        setOcrStatus('error', 'Unsupported format. Use JPG, PNG, GIF or WEBP.');
        return;
    }
    runOcr(file);
}

function runOcr(file) {
    const zone = document.getElementById('ocrDropZone');
    zone.className = 'loading';
    document.getElementById('ocrDropContent').innerHTML = `
        <div style="color:#818cf8;font-size:13px;">
            <span style="display:inline-block;animation:spin .8s linear infinite;font-size:1.5rem;"><i class="bi bi-stars"></i></span><br>
            <span style="margin-top:8px;display:block;">Scanning receipt with AI…</span>
        </div>`;
    setOcrStatus('', '', false);

    const fd = new FormData();
    fd.append('receipt', file);
    fd.append('csrf_token', CSRF);

    fetch('/transactions/ocr', { method: 'POST', body: fd })
        .then(r => r.json())
        .then(data => {
            if (data.error) {
                zone.className = 'error';
                resetOcrZone();
                setOcrStatus('error', '⚠ ' + data.error);
                return;
            }
            zone.className = 'success';
            resetOcrZone(true);
            fillForm(data);
            setOcrStatus('success',
                `✓ Extracted: ${data.description || 'receipt'} · ${data.amount ? '{{ current_user.currency_symbol }}' + data.amount : ''} · ${data.category_suggestion || ''}`
            );
        })
        .catch(err => {
            zone.className = 'error';
            resetOcrZone();
            setOcrStatus('error', '⚠ Network error. Please try again.');
        });
}

function resetOcrZone(success) {
    document.getElementById('ocrDropContent').innerHTML = success
        ? `<i class="bi bi-check-circle" style="font-size:1.8rem;color:#10b981;"></i>
           <div style="font-size:13px;font-weight:500;color:#10b981;margin-top:8px;">Receipt scanned — form filled below</div>
           <div style="font-size:11px;color:var(--muted);margin-top:4px;">Drop another receipt to re-scan</div>`
        : `<i class="bi bi-receipt" style="font-size:1.8rem;color:#a5b4fc;"></i>
           <div style="font-size:13px;font-weight:500;color:#4f46e5;margin-top:8px;">Drop receipt image here or click to upload</div>
           <div style="font-size:11px;color:var(--muted);margin-top:4px;">JPG, PNG, GIF, WEBP · max 10MB</div>`;
}

function setOcrStatus(type, msg, show) {
    const el = document.getElementById('ocrStatus');
    if (show === false) { el.style.display = 'none'; return; }
    el.style.display = msg ? 'block' : 'none';
    el.style.color = type === 'error' ? '#ef4444' : type === 'success' ? '#10b981' : '#64748b';
    el.textContent = msg;
}

// ── Fill form fields ──────────────────────────────────────────────────────────
function fillForm(data) {
    if (data.amount)      setField('field_amount',      data.amount);
    if (data.date)        setField('field_date',        data.date);
    if (data.description) setField('field_description', data.description);
    if (data.notes)       setField('field_notes',       data.notes);

    // Category
    if (data.category_id) {
        const sel = document.getElementById('field_category');
        if (sel) {
            sel.value = String(data.category_id);
            flash(sel);
        }
    }

    // Scroll to form
    document.getElementById('txnForm').scrollIntoView({ behavior: 'smooth', block: 'start' });
}

function setField(id, val) {
    const el = document.getElementById(id);
    if (el) { el.value = val; flash(el); }
}

function flash(el) {
    el.classList.remove('ocr-field-highlight');
    void el.offsetWidth; // reflow
    el.classList.add('ocr-field-highlight');
    setTimeout(() => el.classList.remove('ocr-field-highlight'), 700);
}

// ── Re-extract from already-uploaded receipt (edit mode) ──────────────────────
function ocrExistingReceipt(filename) {
    const btn = event.target.closest('button');
    btn.innerHTML = '<i class="bi bi-stars me-1" style="animation:spin .7s linear infinite;display:inline-block;"></i>Scanning…';
    btn.disabled = true;

    fetch('/transactions/ocr-file', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'X-CSRFToken': CSRF },
        body: JSON.stringify({ filename: filename }),
    })
    .then(r => r.json())
    .then(data => {
        btn.innerHTML = '<i class="bi bi-stars me-1"></i>Re-extract';
        btn.disabled = false;
        if (data.error) { alert('OCR error: ' + data.error); return; }
        fillForm(data);
        const banner = document.createElement('div');
        banner.style.cssText = 'font-size:12px;color:#10b981;margin-top:6px;';
        banner.textContent = '✓ Fields updated from receipt';
        btn.closest('.mb-3').appendChild(banner);
        setTimeout(() => banner.remove(), 3000);
    })
    .catch(() => {
        btn.innerHTML = '<i class="bi bi-stars me-1"></i>Re-extract';
        btn.disabled = false;
        alert('Network error. Please try again.');
    });
}

// ── Client-side form validation ───────────────────────────────────────────────
document.getElementById('txnForm').addEventListener('submit', function(e) {
    let valid = true;

    const desc = document.getElementById('field_description');
    if (!desc.value.trim()) {
        desc.classList.add('is-invalid');
        if (!desc.nextElementSibling || !desc.nextElementSibling.classList.contains('invalid-feedback')) {
            const err = document.createElement('div');
            err.className = 'invalid-feedback';
            err.textContent = 'Description is required.';
            desc.after(err);
        }
        valid = false;
    } else {
        desc.classList.remove('is-invalid');
    }

    const amt = document.getElementById('field_amount');
    const amtVal = parseFloat(amt.value);
    const amtParent = amt.closest('.input-group') || amt;
    if (!amt.value || isNaN(amtVal) || amtVal <= 0) {
        amt.classList.add('is-invalid');
        let errEl = amtParent.parentElement.querySelector('.amt-error');
        if (!errEl) {
            errEl = document.createElement('div');
            errEl.className = 'text-danger mt-1 amt-error';
            errEl.style.fontSize = '12px';
            amtParent.after(errEl);
        }
        errEl.textContent = amtVal < 0 ? 'Amount must be positive.' : 'Amount is required.';
        valid = false;
    } else {
        amt.classList.remove('is-invalid');
        const errEl = amtParent.parentElement.querySelector('.amt-error');
        if (errEl) errEl.remove();
    }

    const dt = document.getElementById('field_date');
    if (!dt.value) {
        dt.classList.add('is-invalid');
        valid = false;
    } else {
        dt.classList.remove('is-invalid');
    }

    if (!valid) e.preventDefault();
});

// Clear validation state on input
['field_description', 'field_amount', 'field_date'].forEach(id => {
    const el = document.getElementById(id);
    if (el) el.addEventListener('input', () => el.classList.remove('is-invalid'));
});

// ── Auto-OCR when receipt is selected in edit form ────────────────────────────
function autoOcrOnUpload(input) {
    const file = input.files[0];
    if (!file) return;
    const imageTypes = ['image/jpeg','image/png','image/gif','image/webp'];
    if (!imageTypes.includes(file.type)) return; // PDF — skip OCR
    // Show OCR panel and run
    const panel = document.getElementById('ocrPanel');
    if (panel) { panel.style.display = 'block'; document.getElementById('ocrChevron').className = 'bi bi-chevron-up'; }
    runOcr(file);
}

// ── Transaction type toggle ───────────────────────────────────────────────────
const incomeCats  = {{ income_cats  | tojson }};
const expenseCats = {{ expense_cats | tojson }};

function setTxnType(type) {
    // Update hidden field
    document.querySelector('[name=transaction_type]').value = type;

    // Toggle button styles
    const incBtn = document.getElementById('toggleIncome');
    const expBtn = document.getElementById('toggleExpense');
    incBtn.className = 'btn btn-sm flex-fill ' + (type === 'income' ? 'btn-success'          : 'btn-outline-secondary');
    expBtn.className = 'btn btn-sm flex-fill ' + (type === 'expense' ? 'btn-danger'           : 'btn-outline-secondary');

    // Card border + submit button
    document.getElementById('txnCard').style.borderTopColor = type === 'income' ? 'var(--income)' : 'var(--expense)';
    const submitBtn = document.getElementById('submitBtn');
    submitBtn.className = 'btn ' + (type === 'income' ? 'btn-success' : 'btn-danger');
    submitBtn.textContent = 'Save ' + (type === 'income' ? 'Income' : 'Expense');

    // Update cancel link tab param
    const cancelLink = document.getElementById('cancelLink');
    if (cancelLink) {
        cancelLink.href = cancelLink.href.replace(/([\?&]tab=)[^&]*/, '$1' + type);
    }

    // Swap category options, preserving current selection if still valid
    const sel = document.getElementById('field_category');
    const prevVal = sel.value;
    const cats = type === 'income' ? incomeCats : expenseCats;
    sel.innerHTML = '<option value="">— None —</option>' +
        cats.map(c => `<option value="${c.id}">${c.name}</option>`).join('');
    if (prevVal && cats.some(c => c.id === prevVal)) {
        sel.value = prevVal;
    }
}
</script>
{% endblock %}