{% extends 'base.html.twig' %}
{% block title %}Monzo Integration{% endblock %}
{% block content %}

<div class="page-header">
    <div>
        <h1 class="page-title">Monzo</h1>
        <p class="page-sub">Connect your joint account to auto-import expenses</p>
    </div>
</div>

{% if token %}
{# ── Connected or Pending ── #}
<div class="card" style="margin-bottom:1.5rem">
    <div style="display:flex;align-items:center;gap:1rem;margin-bottom:1rem">
        <span style="font-size:2rem">{% if token.accountId == 'pending' %}⏳{% else %}🔗{% endif %}</span>
        <div>
            {% if token.accountId == 'pending' %}
            <div style="font-weight:600;color:var(--color-warning, #f59e0b)">Awaiting approval in Monzo app</div>
            <div class="item-meta">Open your Monzo app and approve the connection, then click Confirm below</div>
            {% else %}
            <div style="font-weight:600;color:var(--color-success)">Connected</div>
            <div class="item-meta">Joint account · connected by {{ token.connectedBy.name }}</div>
            {% if token.isExpired() %}
            <div style="color:var(--color-danger);font-size:.8rem;margin-top:.25rem">⚠ Token expired — sync will auto-refresh it</div>
            {% else %}
            <div style="color:var(--color-muted);font-size:.8rem;margin-top:.25rem">Token valid until {{ token.expiresAt|date("d M Y H:i") }}</div>
            {% endif %}
            {% endif %}
        </div>
    </div>

    {% if token.accountId == 'pending' %}
    <form method="post" action="{{ path('app_monzo_confirm') }}" style="margin-bottom:1rem">
        <input type="hidden" name="_token" value="{{ csrf_token('monzo_confirm') }}">
        <button type="submit" class="btn btn-primary">✓ Confirm Connection</button>
    </form>
    {% else %}
    <form method="post" action="{{ path('app_monzo_sync') }}" class="notion-form" style="margin-bottom:1rem">
        <input type="hidden" name="_token" value="{{ csrf_token('monzo_sync') }}">
        <div class="form-group" style="margin-bottom:.75rem">
            <label class="form-label">Pay period to sync</label>
            <select name="period_key" class="form-input" onchange="
                var parts = this.value.split('-');
                this.form.querySelector('[name=month]').value = parts[0];
                this.form.querySelector('[name=year]').value  = parts[1];
            ">
                {% for period in periods %}
                <option value="{{ period.month }}-{{ period.year }}" {% if period.isCurrent %}selected{% endif %}>
                    {{ period.label }} ({{ period.periodStart|date('d M') }} – {{ period.periodEnd|date('d M Y') }}){% if period.isCurrent %} — current{% endif %}
                </option>
                {% endfor %}
            </select>
            <input type="hidden" name="month" value="{{ periods[0].month }}">
            <input type="hidden" name="year"  value="{{ periods[0].year }}">
        </div>
        <button type="submit" class="btn btn-primary">⬇ Sync selected period</button>
    </form>
    {% endif %}

    <form method="post" action="{{ path('app_monzo_disconnect') }}" onsubmit="return confirm('Disconnect Monzo?')">
        <input type="hidden" name="_token" value="{{ csrf_token('monzo_disconnect') }}">
        <button type="submit" class="btn btn-ghost" style="color:var(--color-danger)">Disconnect</button>
    </form>
</div>

{% else %}
{# ── Not connected ── #}
<div class="card" style="margin-bottom:1.5rem;text-align:center;padding:2.5rem 1.5rem">
    <div style="font-size:3rem;margin-bottom:.75rem">🏦</div>
    <h2 style="margin-bottom:.5rem">Connect your joint Monzo account</h2>
    <p style="color:var(--color-muted);margin-bottom:1.5rem;max-width:420px;margin-inline:auto">
        Once connected, you can sync your joint spending directly — pot transfers and top-ups are automatically filtered out.
    </p>
    <a href="{{ path('app_monzo_connect') }}" class="btn btn-primary">Connect with Monzo</a>
</div>

<div class="card">
    <h3 style="margin-bottom:.75rem">Setup instructions</h3>
    <ol style="padding-left:1.25rem;line-height:2;color:var(--color-muted)">
        <li>Go to <strong>developers.monzo.com</strong> and sign in</li>
        <li>Create a new <strong>confidential</strong> OAuth client</li>
        <li>Set the redirect URI to: <code style="background:var(--color-surface);padding:.2rem .4rem;border-radius:4px">{{ monzo_redirect_uri }}</code></li>
        <li>Copy your <strong>Client ID</strong> and <strong>Client Secret</strong> into <code>.env.local</code></li>
        <li>Then click <em>Connect with Monzo</em> above</li>
    </ol>
</div>
{% endif %}

{% endblock %}