{% extends "base.html" %}

{% block title %}Review - Fin{% endblock %}

{% block content %}
<h1>Review</h1>

<p style="color: var(--text-muted); margin-bottom: 12px;">
    <a href="/dashboard" style="color: var(--accent-blue);">&#8592; Back to Dashboard</a>
    &nbsp;|&nbsp; Categorization triage for current month
</p>

<!-- Account Filter -->
{% if all_accounts %}
<div class="account-filter" style="margin-bottom: 24px;">
    <label class="filter-label">Accounts:</label>
    <div class="account-chips">
        {% for acc in all_accounts %}
        {% set is_selected = (acc['account_id'] in selected_accounts) if selected_accounts else (not show_no_data) %}
        <label class="account-chip{% if is_selected %} selected{% endif %}">
            <input type="checkbox"
                   value="{{ acc['account_id'] }}"
                   {% if is_selected %}checked{% endif %}
                   onchange="updateAccountFilter()">
            <span class="chip-text">{{ acc['name'] }}</span>
        </label>
        {% endfor %}
    </div>
    {% if selected_accounts or show_no_data %}
    <a href="/review" class="btn btn-sm" style="margin-left: 8px;">All Accounts</a>
    {% endif %}
</div>
{% endif %}

{% if show_no_data %}
<div class="card">
    <div class="card-body">
        <div class="empty-state"><p>Select accounts to view review data.</p></div>
    </div>
</div>
{% else %}

{% set needs_review_count = (ghosts | length) + (low_confidence | length) %}

<!-- Needs Review Count Badge -->
{% if needs_review_count > 0 %}
<div class="review-count-banner">
    <span class="review-count-num">{{ needs_review_count }}</span>
    transaction{{ 's' if needs_review_count != 1 else '' }} need{{ '' if needs_review_count != 1 else 's' }} review
</div>
{% else %}
<div class="review-count-banner review-count-clear">
    All caught up — no transactions need review
</div>
{% endif %}

<!-- Ghost Transactions (Uncategorized) — triage queue, top priority -->
{% if ghosts %}
<div class="card">
    <div class="card-header">
        <h2>Uncategorized Expenses ({{ ghosts|length }})</h2>
    </div>
    <div class="card-body">
    <div class="table-wrap">
        <table class="audit-table">
            <thead>
                <tr>
                    <th>Date</th>
                    <th>Merchant</th>
                    <th class="num">Amount</th>
                    <th>Description</th>
                    <th>Category</th>
                </tr>
            </thead>
            <tbody>
                {% for txn in ghosts %}
                <tr id="ghost-{{ loop.index }}">
                    <td>{{ txn.posted_at }}</td>
                    <td>{{ txn.merchant_norm }}</td>
                    <td class="num">${{ "%.2f"|format(txn.amount_cents|abs / 100) }}</td>
                    <td class="desc-cell">{{ txn.raw_description }}</td>
                    <td>
                        <select class="cat-select" onchange="setCategory('{{ txn.merchant_norm }}', this.value, this)">
                            <option value="">--</option>
                            {% for cid, cat in categories.items() %}
                            {% if cid not in ('other', 'income', 'one_time_deposit', 'transfer') %}
                            <option value="{{ cid }}">{{ cat.name }}</option>
                            {% endif %}
                            {% endfor %}
                        </select>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    </div>
</div>
{% endif %}

<!-- Low Confidence Review Queue -->
{% if low_confidence %}
<div class="card">
    <div class="card-header">
        <h2>Low Confidence ({{ low_confidence|length }})</h2>
    </div>
    <div class="card-body">
    <div class="table-wrap">
        <table class="audit-table">
            <thead>
                <tr>
                    <th>Date</th>
                    <th>Merchant</th>
                    <th class="num">Amount</th>
                    <th>Type</th>
                    <th>Confidence</th>
                    <th>Reason</th>
                </tr>
            </thead>
            <tbody>
                {% for txn in low_confidence %}
                <tr style="cursor: pointer;" onclick="finDrilldown.open('merchant:{{ txn.merchant_norm }}')" tabindex="0" role="row" onkeydown="if(event.key==='Enter'||event.key===' '){event.preventDefault();finDrilldown.open('merchant:{{ txn.merchant_norm }}')}">
                    <td>{{ txn.posted_at }}</td>
                    <td>{{ txn.merchant_norm }}</td>
                    <td class="num">${{ "%.2f"|format(txn.amount_cents|abs / 100) }}</td>
                    <td>{{ txn.txn_type.name }}</td>
                    <td>
                        <span class="conf-badge conf-{{ 'low' if txn.reason.confidence < 0.5 else 'med' }}">
                            {{ "%.0f"|format(txn.reason.confidence * 100) }}%
                        </span>
                    </td>
                    <td class="reason-cell">{{ txn.reason.primary_code }}</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    </div>
</div>
{% endif %}

{% if not ghosts and not low_confidence %}
<div class="card">
    <div class="card-body">
        <div class="empty-state"><p>No transactions need review this month.</p></div>
    </div>
</div>
{% endif %}

<!-- Top Merchants Table -->
<div class="card">
    <div class="card-header">
        <h2>Top Merchants by Spend ({{ top_merchants|length }})</h2>
    </div>
    <div class="card-body">
    {% if top_merchants %}
    <div class="table-wrap">
        <table class="audit-table">
            <thead>
                <tr>
                    <th>Merchant</th>
                    <th class="num">Charges</th>
                    <th class="num">Total</th>
                    <th>Last Seen</th>
                    <th>Type</th>
                </tr>
            </thead>
            <tbody>
                {% for m in top_merchants %}
                <tr style="cursor: pointer;" onclick="finDrilldown.open('merchant:{{ m.merchant | lower }}')" tabindex="0" role="row" onkeydown="if(event.key==='Enter'||event.key===' '){event.preventDefault();finDrilldown.open('merchant:{{ m.merchant | lower }}')}">
                    <td>{{ m.merchant }}</td>
                    <td class="num">{{ m.count }}</td>
                    <td class="num">${{ "%.2f"|format(m.total_cents / 100) }}</td>
                    <td>{{ m.last_seen }}</td>
                    <td>
                        {% if m.status == 'tracked' %}
                        <span class="status-badge status-tracked">Subscription / Bill</span>
                        {% elif m.status == 'recurring' %}
                        <span class="status-badge status-recurring">Recurring</span>
                        {% else %}
                        <span class="status-badge status-untracked">One-time</span>
                        {% endif %}
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    {% else %}
    <div class="empty-state"><p>No merchant data available.</p></div>
    {% endif %}
    </div>
</div>

<!-- Coverage Summary (de-emphasized, below action queues) -->
<div class="audit-stats">
    <div class="audit-stat">
        <div class="audit-stat-value">{{ coverage.total_txns }}</div>
        <div class="audit-stat-label">Transactions</div>
    </div>
    <div class="audit-stat">
        <div class="audit-stat-value {% if coverage.cat_pct >= 90 %}stat-good{% elif coverage.cat_pct >= 70 %}stat-warn{% else %}stat-bad{% endif %}">{{ coverage.cat_pct }}%</div>
        <div class="audit-stat-label">Categorized</div>
    </div>
    <div class="audit-stat">
        <div class="audit-stat-value">{{ coverage.tracked_merchants }}</div>
        <div class="audit-stat-label">Tracked Merchants</div>
    </div>
    <div class="audit-stat">
        <div class="audit-stat-value {% if coverage.low_conf == 0 %}stat-good{% else %}stat-warn{% endif %}">{{ coverage.low_conf }}</div>
        <div class="audit-stat-label">Low Confidence</div>
    </div>
</div>

{% endif %}

<script>
function updateAccountFilter() {
    const checked = [...document.querySelectorAll('.account-chip input:checked')].map(el => el.value);
    const params = new URLSearchParams(window.location.search);
    if (checked.length === 0) {
        params.set('accounts', 'none');
    } else if (checked.length === document.querySelectorAll('.account-chip input').length) {
        params.delete('accounts');
    } else {
        params.set('accounts', checked.join(','));
    }
    window.location.search = params.toString();
}

async function setCategory(merchant, categoryId, selectEl) {
    if (!categoryId) return;
    const row = selectEl.closest('tr');
    try {
        const resp = await finApi.postJSON('/api/category-override', {merchant: merchant, category_id: categoryId});
        if (!resp.ok) throw new Error(await resp.text());
        selectEl.disabled = true;
        row.style.opacity = '0.5';
        const label = selectEl.options[selectEl.selectedIndex].text;
        selectEl.parentElement.innerHTML = '<span class="status-badge status-tracked">' + label + '</span>';
    } catch (e) {
        alert('Failed: ' + e.message);
        selectEl.value = '';
    }
}
</script>

<style>
/* Review Count Banner */
.review-count-banner {
    background: var(--accent-red-dim, #fed7d7);
    color: var(--accent-red);
    border-radius: 10px;
    padding: 14px 20px;
    margin-bottom: 20px;
    font-size: 0.9375rem;
    font-weight: 500;
}

.review-count-banner.review-count-clear {
    background: var(--accent-green-dim, #c6f6d5);
    color: var(--accent-green);
}

.review-count-num {
    font-size: 1.375rem;
    font-weight: 700;
    margin-right: 6px;
}

/* Coverage Stats Row */
.audit-stats {
    display: flex;
    gap: 16px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.audit-stat {
    flex: 1;
    min-width: 120px;
    background: var(--card-bg, var(--bg-secondary));
    border-radius: 12px;
    padding: 20px;
    text-align: center;
}

.audit-stat-value {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.1;
}

.audit-stat-label {
    font-size: 0.8125rem;
    color: var(--text-muted);
    margin-top: 4px;
}

.stat-good { color: var(--accent-green); }
.stat-warn { color: var(--accent-yellow); }
.stat-bad { color: var(--accent-red); }

/* Audit Table */
.table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.audit-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.audit-table th {
    text-align: left;
    padding: 8px 12px;
    border-bottom: 2px solid var(--border-color);
    color: var(--text-muted);
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.audit-table th.num,
.audit-table td.num {
    text-align: right;
}

.audit-table td {
    padding: 8px 12px;
    border-bottom: 1px solid var(--border-color);
    vertical-align: middle;
}

.audit-table tbody tr:hover {
    background: var(--hover-bg, rgba(0,0,0,0.02));
}

/* Status Badges */
.status-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
}

.status-tracked {
    background: var(--accent-green-dim, #c6f6d5);
    color: var(--accent-green);
}

.status-recurring {
    background: rgba(37, 99, 235, 0.1);
    color: var(--accent-blue);
}

.status-untracked {
    background: rgba(0, 0, 0, 0.05);
    color: var(--text-muted);
}

/* Confidence Badge */
.conf-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
}

.conf-low {
    background: var(--accent-red-dim, #fed7d7);
    color: var(--accent-red);
}

.conf-med {
    background: rgba(183, 121, 31, 0.1);
    color: var(--accent-yellow);
}

/* Category select */
.cat-select {
    font-size: 0.8125rem;
    padding: 4px 8px;
    border-radius: 4px;
    border: 1px solid var(--border-color);
    background: var(--bg-primary, var(--bg));
    color: var(--text-primary);
    cursor: pointer;
    max-width: 160px;
}

/* Cell helpers */
.reason-cell {
    font-family: monospace;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.desc-cell {
    max-width: 250px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

/* Card styles */
.card {
    background: var(--card-bg, var(--bg-secondary));
    border-radius: 12px;
    margin-bottom: 16px;
    overflow: hidden;
}

.card-header {
    padding: 16px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.card-header h2 {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
}

.card-body {
    padding: 0 20px 20px;
}

.empty-state {
    text-align: center;
    padding: 24px;
    color: var(--text-muted);
}

/* Mobile */
@media (max-width: 640px) {
    .audit-stats {
        gap: 8px;
    }
    .audit-stat {
        min-width: 80px;
        padding: 12px;
    }
    .audit-stat-value {
        font-size: 1.5rem;
    }
    .audit-table {
        font-size: 0.8125rem;
    }
    .audit-table th,
    .audit-table td {
        padding: 6px 8px;
    }
}
</style>
{% endblock %}