{% extends "base.html" %}
{% block title %}Sync Preview{% endblock %}
{% block page_title %}Sync Preview — {{ ta.account_name }}{% endblock %}

{% block content %}
{% if preview %}
<form method="POST" action="{{ url_for('teller.sync_confirm') }}" id="importForm">
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">

<div class="pcard mb-3 d-flex justify-content-between align-items-center">
    <div>
        <div style="font-size:14px;font-weight:600;">{{ ta.institution_name }} — {{ ta.account_name }}</div>
        <div style="font-size:12px;color:var(--muted);">
            Mapped to: <strong>{{ ta.pfm_account.name }}</strong> ·
            <span id="selectedCount">{{ count }}</span> of {{ count }} selected
            {% if ta.last_sync_date %}· Last sync: {{ ta.last_sync_date.strftime('%b %d, %Y') }}{% endif %}
        </div>
    </div>
    <div class="d-flex gap-2">
        <a href="{{ url_for('teller.index') }}" class="btn btn-sm btn-outline-secondary" style="font-size:12px;">Cancel</a>
        <button type="submit" class="btn btn-sm btn-success" style="font-size:12px;" id="importBtn">
            <i class="bi bi-check-lg me-1"></i>Import <span id="importBtnCount">{{ count }}</span> Transaction(s)
        </button>
    </div>
</div>

<div class="pcard p-0">
    <table class="pfm-table">
        <thead>
            <tr>
                <th style="width:36px;padding-left:16px;">
                    <input type="checkbox" id="selectAll" checked
                        style="width:15px;height:15px;cursor:pointer;"
                        title="Select / deselect all">
                </th>
                <th style="white-space:nowrap;">Date</th>
                <th>Description</th>
                <th style="width:160px;">Type</th>
                <th>Category</th>
                <th class="text-end" style="padding-right:20px;">Amount</th>
            </tr>
        </thead>
        <tbody>
        {% for txn in preview %}
        <tr class="preview-row" data-id="{{ txn.teller_id }}">
            <td style="padding-left:16px;">
                <input type="checkbox" name="selected" value="{{ txn.teller_id }}"
                    class="row-check" checked
                    style="width:15px;height:15px;cursor:pointer;">
            </td>
            <td style="font-size:12px;color:var(--muted);white-space:nowrap;">
                {{ txn.date.strftime('%b %d, %Y') }}
            </td>
            <td style="font-size:13px;">{{ txn.description }}</td>
            <td>
                <select name="type_{{ txn.teller_id }}"
                        class="type-select form-select form-select-sm"
                        style="width:130px;font-size:12px;border-radius:6px;
                               {% if txn.transaction_type == 'income' %}border-color:#10b981;color:#10b981;{% else %}border-color:#ef4444;color:#ef4444;{% endif %}">
                    <option value="expense" {% if txn.transaction_type == 'expense' %}selected{% endif %}>Expense</option>
                    <option value="income"  {% if txn.transaction_type == 'income'  %}selected{% endif %}>Income</option>
                </select>
            </td>
            <td style="font-size:12px;color:var(--muted);">
                {% if txn.category_id and txn.category_id in cat_map %}
                    {{ cat_map[txn.category_id] }}
                {% else %}
                    <span style="color:#f59e0b;">Uncategorised</span>
                {% endif %}
            </td>
            <td class="text-end mono amount-cell
                        {% if txn.transaction_type == 'income' %}text-income{% else %}text-expense{% endif %}"
                style="font-size:13px;font-weight:600;padding-right:20px;">
                <span class="sign">{% if txn.transaction_type == 'income' %}+{% else %}-{% endif %}</span>{{ txn.amount | currency }}
            </td>
        </tr>
        {% endfor %}
        </tbody>
    </table>
</div>

<div class="d-flex justify-content-end mt-3">
    <button type="submit" class="btn btn-success" id="importBtn2">
        <i class="bi bi-check-lg me-1"></i>Confirm Import (<span id="importBtnCount2">{{ count }}</span> transactions)
    </button>
</div>

</form>

{% else %}
<div class="pcard text-center py-5">
    <i class="bi bi-check-circle text-success" style="font-size:3rem;"></i>
    <h5 class="mt-3 mb-1">All up to date</h5>
    <p class="text-muted small">No new transactions found since last sync.</p>
    <a href="{{ url_for('teller.index') }}" class="btn btn-sm btn-outline-secondary">Back</a>
</div>
{% endif %}

<script>
(function () {
    const selectAll = document.getElementById('selectAll');
    const checks    = document.querySelectorAll('.row-check');
    const countEl   = document.getElementById('selectedCount');
    const btnCount  = document.getElementById('importBtnCount');
    const btnCount2 = document.getElementById('importBtnCount2');

    function updateCount() {
        const n = document.querySelectorAll('.row-check:checked').length;
        countEl.textContent  = n;
        btnCount.textContent = n;
        btnCount2.textContent = n;
        // Dim unchecked rows
        document.querySelectorAll('.preview-row').forEach(row => {
            const cb = row.querySelector('.row-check');
            row.style.opacity = cb.checked ? '1' : '0.4';
        });
        // Sync select-all state
        selectAll.indeterminate = n > 0 && n < checks.length;
        selectAll.checked = n === checks.length;
    }

    selectAll.addEventListener('change', () => {
        checks.forEach(cb => { cb.checked = selectAll.checked; });
        updateCount();
    });

    checks.forEach(cb => cb.addEventListener('change', updateCount));

    // Update type-select color + amount sign on change
    document.querySelectorAll('.type-select').forEach(sel => {
        sel.addEventListener('change', function () {
            const isIncome = this.value === 'income';
            this.style.borderColor = isIncome ? '#10b981' : '#ef4444';
            this.style.color       = isIncome ? '#10b981' : '#ef4444';

            const row   = this.closest('.preview-row');
            const cell  = row.querySelector('.amount-cell');
            const sign  = row.querySelector('.sign');
            cell.classList.toggle('text-income',  isIncome);
            cell.classList.toggle('text-expense', !isIncome);
            sign.textContent = isIncome ? '+' : '-';
        });
    });
})();
</script>
{% endblock %}