{% extends "base.html" %}

{% block title %}Recurring Charges - Fin{% endblock %}

{% block content %}
<h1>Recurring Charges</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; Showing charges from last {{ days }} days
</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="/subs?days={{ days }}" class="btn btn-sm" style="margin-left: 8px;">All Accounts</a>
    {% endif %}
</div>
{% endif %}

<!-- Subscriptions Card -->
<div class="card">
    <div class="card-header">
        <h2>
            <span class="toggle-icon">&#9660;</span>
            Subscriptions ({{ subscriptions|length }})
        </h2>
        <div class="card-actions">
            <span style="font-size: 12px; color: var(--text-muted);">Click to see transactions</span>
            <a href="/export/subscriptions" class="btn btn-sm">Export CSV</a>
        </div>
    </div>

    <div class="card-body">
    {% if subscriptions %}
    <div class="subs-list">
        {% for sub in subscriptions %}
        {% set merchant = sub[0] %}
        {% set monthly_cents = sub[1] %}
        {% set cadence = sub[2] %}
        {% set first_seen = sub[3] %}
        {% set last_seen = sub[4] %}
        {% set is_dup = sub[5] %}
        {% set txn_type = sub[6] %}
        {% set is_known = sub[7] %}
        {% set display_name = sub[8] %}
        {% set actual_charge = sub[9] %}
        {% set cadence_label = 'Billed annually' if cadence == 'annual' else 'Billed quarterly' if cadence == 'quarterly' else 'Billed weekly' if cadence == 'weekly' else 'Billed biweekly' if cadence == 'biweekly' else '' %}
        <div class="sub-item" data-payee="{{ merchant }}">
            <div class="sub-icon type-toggle" onclick="event.stopPropagation(); toggleType('{{ merchant }}', 'subscription')" title="Click to change to Bill" tabindex="0" role="button" aria-label="Change {{ merchant }} to bill" onkeydown="if(event.key==='Enter'||event.key===' '){event.preventDefault();event.stopPropagation();toggleType('{{ merchant }}', 'subscription')}">
                {% if txn_type == 'insurance' %}&#128737;{% else %}&#128260;{% endif %}
            </div>
            <div class="sub-info clickable" onclick="drillPayee('{{ merchant }}')" tabindex="0" role="button" aria-label="View transactions for {{ merchant }}" onkeydown="if(event.key==='Enter'||event.key===' '){event.preventDefault();drillPayee('{{ merchant }}')}">
                <div class="sub-name">
                    {% if display_name %}{{ display_name }}{% else %}{{ merchant }}{% endif %}
                    {% if is_known %}<span class="badge badge-known">&#10003; Known</span>{% endif %}
                    {% if is_dup %}<span class="badge badge-duplicate">duplicate?</span>{% endif %}
                </div>
                <div class="sub-meta">
                    {% if cadence_label %}{{ cadence_label }} (${{ "%.2f"|format(actual_charge / 100) }}) &bull; {% endif %}Since {{ first_seen.strftime('%b %Y') }}
                    {% if display_name and display_name != merchant %}&bull; <span style="opacity: 0.7;">{{ merchant }}</span>{% endif %}
                </div>
            </div>
            <div class="sub-amount">${{ "%.2f"|format(monthly_cents / 100) }}<span class="sub-freq">/mo</span></div>
            <div class="sub-expand clickable" onclick="drillPayee('{{ merchant }}')" tabindex="0" role="button" aria-label="Expand transactions for {{ merchant }}" onkeydown="if(event.key==='Enter'||event.key===' '){event.preventDefault();drillPayee('{{ merchant }}')}">&#9654;</div>
        </div>
        <!-- Drill-down section (hidden by default) -->
        <div class="payee-drilldown" id="payee-{{ loop.index }}" data-payee="{{ merchant }}" style="display: none;">
            <div class="drilldown-loading">Loading transactions...</div>
            <div class="drilldown-content"></div>
        </div>
        {% endfor %}
    </div>
    {% else %}
    <div class="empty-state">
        <p>No subscriptions detected yet.</p>
        <p style="margin-top: 8px;">Subscriptions are detected after 3+ recurring charges with consistent timing.</p>
    </div>
    {% endif %}
    </div>
</div>

<!-- Bills (Utilities) Card -->
<div class="card">
    <div class="card-header">
        <h2>
            <span class="toggle-icon">&#9660;</span>
            Utility Bills ({{ bills|length }})
        </h2>
        <div class="card-actions">
            <span style="font-size: 12px; color: var(--text-muted);">Click to see transactions</span>
        </div>
    </div>

    <div class="card-body">
    {% if bills %}
    <div class="subs-list">
        {% for bill in bills %}
        {% set merchant = bill[0] %}
        {% set monthly_cents = bill[1] %}
        {% set cadence = bill[2] %}
        {% set first_seen = bill[3] %}
        {% set last_seen = bill[4] %}
        <div class="sub-item bill" data-payee="{{ merchant }}">
            <div class="sub-icon type-toggle" onclick="event.stopPropagation(); toggleType('{{ merchant }}', 'bill')" title="Click to change to Subscription" tabindex="0" role="button" aria-label="Change {{ merchant }} to subscription" onkeydown="if(event.key==='Enter'||event.key===' '){event.preventDefault();event.stopPropagation();toggleType('{{ merchant }}', 'bill')}">&#9889;</div>
            {% set bill_cadence_label = 'Billed annually' if cadence == 'annual' else 'Billed quarterly' if cadence == 'quarterly' else 'Billed bimonthly' if cadence == 'bimonthly' else '' %}
            <div class="sub-info clickable" onclick="drillPayee('{{ merchant }}')" tabindex="0" role="button" aria-label="View transactions for {{ merchant }}" onkeydown="if(event.key==='Enter'||event.key===' '){event.preventDefault();drillPayee('{{ merchant }}')}">
                <div class="sub-name">{{ merchant }}</div>
                <div class="sub-meta">
                    {% if bill_cadence_label %}{{ bill_cadence_label }} &bull; {% endif %}Since {{ first_seen.strftime('%b %Y') }}
                </div>
            </div>
            <div class="sub-amount">${{ "%.2f"|format(monthly_cents / 100) }}<span class="sub-freq">/mo</span></div>
            <div class="sub-expand clickable" onclick="drillPayee('{{ merchant }}')" tabindex="0" role="button" aria-label="Expand transactions for {{ merchant }}" onkeydown="if(event.key==='Enter'||event.key===' '){event.preventDefault();drillPayee('{{ merchant }}')}">&#9654;</div>
        </div>
        <!-- Drill-down section -->
        <div class="payee-drilldown" id="bill-{{ loop.index }}" data-payee="{{ merchant }}" style="display: none;">
            <div class="drilldown-loading">Loading transactions...</div>
            <div class="drilldown-content"></div>
        </div>
        {% endfor %}
    </div>
    {% else %}
    <div class="empty-state">
        <p>No utility bills detected.</p>
        <p style="margin-top: 8px;">Bills include electric, gas, internet, and phone services.</p>
    </div>
    {% endif %}
    </div>
</div>

<!-- Duplicate Groups Card -->
{% if duplicates %}
<div class="card">
    <div class="card-header">
        <h2>
            <span class="toggle-icon">&#9660;</span>
            Possible Duplicates ({{ duplicates|length }})
        </h2>
        <div class="card-actions">
            <a href="/export/duplicates" class="btn btn-sm">Export CSV</a>
        </div>
    </div>

    <div class="card-body">
    <div class="alert-list">
        {% for dup in duplicates %}
        <div class="alert-item {{ dup.severity }}">
            <span class="alert-icon">
                {% if dup.severity == 'high' %}&#128308;{% else %}&#128993;{% endif %}
            </span>
            <div class="alert-content">
                <div class="alert-title">
                    {{ dup.detail }}
                    <span class="alert-amount">${{ "%.2f"|format(dup.total_monthly_cents / 100) }}/mo</span>
                </div>
                <div class="alert-detail">
                    {% for item in dup.items %}
                    {{ item[0] }} (${{ "%.2f"|format(item[1] / 100) }}/mo, {{ item[2] }}){% if not loop.last %}, {% endif %}
                    {% endfor %}
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
    </div>
</div>
{% endif %}

<script>
// Update account filter - navigates to new URL with selected accounts
function updateAccountFilter() {
    const checkboxes = document.querySelectorAll('.account-chip input[type="checkbox"]');
    const selectedAccounts = [];

    checkboxes.forEach(cb => {
        if (cb.checked) {
            selectedAccounts.push(cb.value);
        }
    });

    // Update visual state
    checkboxes.forEach(cb => {
        cb.closest('.account-chip').classList.toggle('selected', cb.checked);
    });

    // Build new URL
    const urlParams = new URLSearchParams(window.location.search);

    if (selectedAccounts.length === checkboxes.length) {
        // All selected = remove filter (show all)
        urlParams.delete('accounts');
    } else if (selectedAccounts.length === 0) {
        // None selected = use special marker to show no data
        urlParams.set('accounts', 'none');
    } else {
        urlParams.set('accounts', selectedAccounts.join(','));
    }

    // Preserve days parameter
    if (!urlParams.has('days')) {
        urlParams.set('days', '{{ days }}');
    }

    // Navigate to new URL
    const newUrl = window.location.pathname + (urlParams.toString() ? '?' + urlParams.toString() : '');
    window.location.href = newUrl;
}

// Payee drill-down
async function drillPayee(payee) {
    // Find the drill-down element for this payee
    const items = document.querySelectorAll('[data-payee="' + payee + '"]');
    let drilldownEl = null;
    let clickedItem = null;

    for (const item of items) {
        if (item.classList.contains('payee-drilldown')) {
            drilldownEl = item;
        } else if (item.classList.contains('sub-item')) {
            clickedItem = item;
        }
    }

    if (!drilldownEl || !clickedItem) return;

    const expandIcon = clickedItem.querySelector('.sub-expand');
    const isVisible = drilldownEl.style.display !== 'none';

    if (isVisible) {
        drilldownEl.style.display = 'none';
        if (expandIcon) expandIcon.textContent = '\u25B6';
        return;
    }

    // Show and load
    drilldownEl.style.display = 'block';
    if (expandIcon) expandIcon.textContent = '\u25BC';

    const loadingEl = drilldownEl.querySelector('.drilldown-loading');
    const contentEl = drilldownEl.querySelector('.drilldown-content');

    // Check if already loaded
    if (contentEl.innerHTML.trim()) {
        loadingEl.style.display = 'none';
        return;
    }

    loadingEl.style.display = 'block';

    try {
        // Include account filter if present in URL
        const urlParams = new URLSearchParams(window.location.search);
        const accountsParam = urlParams.get('accounts');
        let url = '/api/payee/' + encodeURIComponent(payee) + '?days={{ days }}';
        if (accountsParam) {
            url += '&accounts=' + encodeURIComponent(accountsParam);
        }
        const resp = await fetch(url);
        const data = await resp.json();

        let html = '<div class="drilldown-transactions">';

        // Show known service badge and display name in header
        html += '<div class="drilldown-summary">';
        if (data.is_known_service && data.display_name) {
            html += '<span class="badge badge-known" style="margin-right: 8px;">&#10003; Known Service</span>';
            html += '<strong>' + data.display_name + '</strong> &mdash; ';
        }
        html += data.transaction_count + ' transactions totaling $' + (data.total_cents / 100).toFixed(2);
        html += '</div>';

        html += '<table class="txn-table"><thead><tr>';
        html += '<th>Date</th>';
        html += '<th>Amount</th>';
        html += '<th>Account</th>';
        html += '<th>Bank Payee</th>';
        html += '<th>First Seen</th>';
        html += '</tr></thead><tbody>';

        for (const txn of data.transactions) {
            const amount = txn.amount_cents;
            const amountClass = amount >= 0 ? 'positive' : 'negative';
            const provenanceInfo = txn.last_updated
                ? txn.first_seen + ' <span class="updated-badge" title="Updated ' + txn.last_updated + '">↻</span>'
                : txn.first_seen || '-';
            html += '<tr>';
            html += '<td>' + txn.date + '</td>';
            html += '<td class="' + amountClass + '">$' + Math.abs(amount / 100).toFixed(2) + '</td>';
            html += '<td>' + txn.account + '</td>';
            html += '<td class="bank-field">' + (txn.bank_merchant || txn.bank_description || '-') + '</td>';
            html += '<td class="provenance">' + provenanceInfo + '</td>';
            html += '</tr>';
        }

        html += '</tbody></table></div>';

        contentEl.innerHTML = html;
        loadingEl.style.display = 'none';

    } catch (err) {
        contentEl.innerHTML = '<div class="error">Failed to load transactions</div>';
        loadingEl.style.display = 'none';
    }
}
</script>

<style>
/* Subs list styles */
.subs-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sub-item {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    background: var(--card-bg);
    border-radius: 8px;
    gap: 12px;
    transition: background 0.15s;
}

.sub-item:hover {
    background: var(--hover-bg);
}

.sub-item.bill {
    border-left: 3px solid var(--accent-yellow);
}

.sub-icon {
    font-size: 20px;
    width: 32px;
    text-align: center;
}

.sub-icon.type-toggle {
    cursor: pointer;
    border-radius: 6px;
    padding: 4px;
    transition: all 0.15s;
}

.sub-icon.type-toggle:hover {
    background: var(--bg-hover);
    transform: scale(1.1);
}

.sub-info {
    flex: 1;
    min-width: 0;
}

.sub-name {
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
}

.sub-meta {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 2px;
}

.sub-amount {
    font-size: 16px;
    font-weight: 600;
    text-align: right;
}

.sub-freq {
    font-size: 12px;
    font-weight: 400;
    color: var(--text-muted);
}

.sub-expand {
    color: var(--text-muted);
    font-size: 12px;
}

/* Payee drill-down */
.payee-drilldown {
    background: var(--section-bg);
    margin-left: 44px;
    margin-bottom: 8px;
    padding: 12px 16px;
    border-radius: 0 0 8px 8px;
    border-left: 2px solid var(--border-color);
}

.drilldown-summary {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 12px;
    font-weight: 500;
}

.drilldown-transactions .txn-table {
    width: 100%;
    font-size: 13px;
}

.drilldown-transactions .txn-table th {
    text-align: left;
    padding: 6px 8px;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-muted);
    font-weight: 500;
}

.drilldown-transactions .txn-table td {
    padding: 6px 8px;
    border-bottom: 1px solid var(--border-color);
}

.drilldown-transactions .txn-table td.positive {
    color: var(--accent-green);
}

.drilldown-transactions .txn-table td.negative {
    color: var(--text-primary);
}

.drilldown-transactions .txn-table td.bank-field {
    font-family: monospace;
    font-size: 11px;
    color: var(--text-secondary);
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.drilldown-transactions .txn-table td.provenance {
    font-size: 11px;
    color: var(--text-muted);
}

.updated-badge {
    display: inline-block;
    color: var(--accent-yellow);
    cursor: help;
    margin-left: 4px;
}
</style>
{% endblock %}