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

{% block content %}

{% if not plaid_configured %}
<div class="alert alert-warning" style="font-size:13px;">
    <i class="bi bi-exclamation-triangle me-2"></i>
    Plaid is not configured. Add <code>PLAID_CLIENT_ID</code>, <code>PLAID_SECRET</code>, and
    <code>PLAID_ENV</code> to your <code>.env</code> file and restart the app.
</div>
{% endif %}

<!-- Connect card -->
<div class="pcard mb-4">
    <div class="d-flex align-items-center justify-content-between flex-wrap gap-3">
        <div>
            <div class="d-flex align-items-center gap-2 mb-1">
                <div style="width:32px;height:32px;border-radius:8px;background:#f5f3ff;display:flex;align-items:center;justify-content:center;">
                    <i class="bi bi-bank2" style="color:#7c3aed;font-size:16px;"></i>
                </div>
                <span style="font-weight:600;font-size:15px;">Connect a Bank Account</span>
            </div>
            <div style="font-size:12px;color:var(--muted);">
                Plaid supports 12,000+ US financial institutions — checking, savings, credit cards, and investments.
                Trial accounts work in sandbox and development environments.
            </div>
        </div>
        <button id="plaid-link-btn" class="btn btn-primary"
                style="font-size:13px;min-width:150px;"
                {% if not plaid_configured %}disabled{% endif %}>
            <i class="bi bi-plus-lg me-1"></i>Connect Bank
        </button>
    </div>
</div>

{% if items %}
{% for item in items %}
<div class="pcard mb-3">
    <!-- Item header -->
    <div class="d-flex justify-content-between align-items-start mb-3">
        <div>
            <div style="font-size:15px;font-weight:600;">{{ item.institution_name }}</div>
            <div style="font-size:11px;color:var(--muted);">
                {{ item.accounts.filter_by(is_active=True).count() }} account(s) connected
                {% if item.last_synced_at %}· Last synced {{ item.last_synced_at.strftime('%b %d, %Y %H:%M') }}{% endif %}
            </div>
        </div>
        <div class="d-flex gap-2 flex-wrap">
            <a href="{{ url_for('plaid.sync_preview_view', item_db_id=item.id) }}"
               class="btn btn-sm btn-outline-primary" style="font-size:12px;">
                <i class="bi bi-cloud-download me-1"></i>Sync Transactions
            </a>
            <form method="POST" action="{{ url_for('plaid.refresh_liabilities_view', item_db_id=item.id) }}">
                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                <input type="hidden" name="next" value="{{ url_for('plaid.index') }}">
                <button type="submit" class="btn btn-sm btn-outline-secondary" style="font-size:12px;"
                        title="Refresh credit card due dates and minimum payments">
                    <i class="bi bi-credit-card me-1"></i>Billing Details
                </button>
            </form>
            <form method="POST" action="{{ url_for('plaid.full_resync', item_db_id=item.id) }}"
                  onsubmit="return confirm('Reset sync cursor for {{ item.institution_name }}?\nThe next sync will re-fetch full available history. Duplicate transactions will be skipped automatically.')">
                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                <button type="submit" class="btn btn-sm btn-outline-warning" style="font-size:12px;">
                    <i class="bi bi-arrow-counterclockwise me-1"></i>Reset
                </button>
            </form>
            <form method="POST" action="{{ url_for('plaid.disconnect', item_db_id=item.id) }}"
                  onsubmit="return confirm('Disconnect {{ item.institution_name }}?\nImported transactions will be kept.')">
                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                <button type="submit" class="btn btn-sm btn-outline-danger" style="font-size:12px;">
                    <i class="bi bi-x-lg me-1"></i>Disconnect
                </button>
            </form>
        </div>
    </div>

    <!-- Accounts table -->
    {% set accts = item.accounts.filter_by(is_active=True).all() %}
    {% if accts %}
    <div style="overflow-x:auto;">
        <table class="pfm-table mb-0">
            <thead>
                <tr>
                    <th>Account</th>
                    <th>Type</th>
                    <th>Mapped to</th>
                    <th>Last Sync</th>
                    <th>Credit Card Billing</th>
                    <th style="text-align:right;padding-right:12px;">Actions</th>
                </tr>
            </thead>
            <tbody>
            {% for pa in accts %}
            <tr>
                <td>
                    <div style="font-size:13px;font-weight:500;">{{ pa.display_name }}</div>
                    <div style="font-size:11px;color:var(--muted);">{{ pa.account_type | title }} · {{ pa.account_subtype | replace('_',' ') | title }}</div>
                </td>
                <td>
                    <span class="badge" style="font-size:10px;
                        {% if pa.account_type == 'credit' %}background:#fee2e2;color:#991b1b;
                        {% elif pa.account_type == 'depository' %}background:#dbeafe;color:#1e40af;
                        {% else %}background:#f1f5f9;color:#475569;{% endif %}">
                        {{ pa.account_type | title }}
                    </span>
                </td>
                <td style="font-size:12px;">
                    {% if pa.pfm_account %}
                        <span style="color:#10b981;font-weight:500;">{{ pa.pfm_account.name }}</span>
                    {% else %}
                        <a href="{{ url_for('plaid.map_accounts', item_db_id=item.id) }}"
                           style="font-size:11px;color:#f59e0b;">Map Account</a>
                    {% endif %}
                </td>
                <td style="font-size:11px;color:var(--muted);">
                    {{ pa.last_sync_date.strftime('%b %d') if pa.last_sync_date else '—' }}
                </td>
                <td style="font-size:11px;">
                    {% if pa.account_type == 'credit' %}
                        {% if pa.cc_due_date %}
                        {% set days_left = (pa.cc_due_date - today).days %}
                        <div>
                            <span style="color:#6d28d9;font-weight:600;">Due {{ pa.cc_due_date.strftime('%b %d') }}</span>
                            {% if days_left <= 0 %}
                            <span style="color:#ef4444;font-size:10px;"> · Overdue!</span>
                            {% elif days_left <= 3 %}
                            <span style="color:#f59e0b;font-size:10px;"> · {{ days_left }}d left</span>
                            {% else %}
                            <span style="color:var(--muted);font-size:10px;"> · {{ days_left }}d</span>
                            {% endif %}
                        </div>
                        {% if pa.cc_minimum_payment %}
                        <div style="color:var(--muted);">Min: {{ pa.cc_minimum_payment | currency }}</div>
                        {% endif %}
                        {% else %}
                        <span style="color:var(--muted);">—</span>
                        {% endif %}
                    {% else %}
                        <span style="color:var(--muted);">N/A</span>
                    {% endif %}
                </td>
                <td style="text-align:right;padding-right:12px;">
                    {% if pa.pfm_account_id %}
                    <button onclick="refreshPlaidBalance({{ pa.id }}, {{ pa.pfm_account_id }}, '{{ pa.account_type }}', this)"
                            class="btn btn-sm btn-outline-secondary" style="font-size:11px;">
                        <i class="bi bi-arrow-clockwise me-1"></i>Balance
                    </button>
                    {% endif %}
                </td>
            </tr>
            {% endfor %}
            </tbody>
        </table>
    </div>
    {% endif %}
</div>
{% endfor %}

{% else %}
<div class="pcard text-center py-5 text-muted">
    <i class="bi bi-bank" style="font-size:3rem;opacity:.25;display:block;margin-bottom:16px;"></i>
    <div style="font-size:14px;font-weight:500;margin-bottom:4px;">No banks connected yet</div>
    <div style="font-size:12px;">Click "Connect Bank" to link your first account via Plaid.</div>
</div>
{% endif %}

{% endblock %}

{% block extra_js %}
<script src="https://cdn.plaid.com/link/v2/stable/link-initialize.js"></script>
<script>
(function () {
    const CSRF = document.querySelector('meta[name="csrf-token"]').content;
    const linkBtn = document.getElementById('plaid-link-btn');

    linkBtn && linkBtn.addEventListener('click', async () => {
        linkBtn.disabled = true;
        linkBtn.innerHTML = '<span class="spinner-border spinner-border-sm me-1"></span>Loading…';

        try {
            const r    = await fetch('{{ url_for("plaid.create_link_token_view") }}',
                                     { method: 'POST', headers: { 'X-CSRFToken': CSRF } });
            const data = await r.json();
            if (!r.ok || data.error) throw new Error(data.error || 'Failed to create link token');

            const handler = Plaid.create({
                token: data.link_token,
                onSuccess: async (publicToken, metadata) => {
                    linkBtn.innerHTML = '<span class="spinner-border spinner-border-sm me-1"></span>Connecting…';
                    const resp = await fetch('{{ url_for("plaid.exchange_token") }}', {
                        method: 'POST',
                        headers: { 'Content-Type': 'application/json', 'X-CSRFToken': CSRF },
                        body: JSON.stringify({
                            public_token:     publicToken,
                            institution_id:   metadata.institution?.institution_id || '',
                            institution_name: metadata.institution?.name || 'Unknown Bank',
                            accounts:         metadata.accounts || [],
                        }),
                    });
                    const result = await resp.json();
                    if (result.error) {
                        alert('Error: ' + result.error);
                        resetBtn();
                    } else {
                        window.location.href = result.redirect;
                    }
                },
                onExit: (err) => {
                    if (err) console.error('[Plaid] Link exit with error:', err);
                    resetBtn();
                },
            });
            handler.open();

        } catch (err) {
            alert('Could not open Plaid Link: ' + err.message);
            resetBtn();
        }

        function resetBtn() {
            linkBtn.disabled = false;
            linkBtn.innerHTML = '<i class="bi bi-plus-lg me-1"></i>Connect Bank';
        }
    });

    // Balance refresh (AJAX)
    window.refreshPlaidBalance = function (paId, acctId, acctType, btn) {
        btn.disabled = true;
        btn.innerHTML = '<span class="spinner-border spinner-border-sm"></span>';
        fetch('/plaid/balance/' + paId, { method: 'POST', headers: { 'X-CSRFToken': CSRF } })
            .then(r => r.json())
            .then(data => {
                btn.disabled = false;
                btn.innerHTML = '<i class="bi bi-arrow-clockwise me-1"></i>Balance';
                if (data.error) {
                    btn.title = data.error;
                    btn.style.color = '#ef4444';
                    setTimeout(() => { btn.style.color = ''; btn.title = ''; }, 4000);
                } else {
                    btn.style.color = '#10b981';
                    btn.title = 'Updated just now';
                    setTimeout(() => { btn.style.color = ''; btn.title = ''; }, 3000);
                }
            })
            .catch(() => {
                btn.disabled = false;
                btn.innerHTML = '<i class="bi bi-arrow-clockwise me-1"></i>Balance';
                btn.style.color = '#ef4444';
                setTimeout(() => { btn.style.color = ''; }, 4000);
            });
    };
})();
</script>
{% endblock %}