{% extends 'base.html.twig' %}

{% block title %}AI Insights{% endblock %}

{% block content %}
<div class="page-header insights-page-header">
    <div>
        <h1 class="page-title">✨ AI Spending Insights</h1>
        <p class="page-sub">Patterns from your last {{ dataset.historyCount }} completed pay periods and the current period to date.</p>
    </div>
    {% if aiConfigured %}
    <form method="post" action="{{ path('app_insights_generate') }}">
        <input type="hidden" name="_token" value="{{ csrf_token('generate_spending_insights') }}">
        <input type="hidden" name="force" value="{{ analysis ? '1' : '0' }}">
        <button type="submit" class="btn btn-primary">{{ analysis ? '↻ Refresh AI analysis' : '✨ Generate AI analysis' }}</button>
    </form>
    {% endif %}
</div>

<div class="notice-banner insights-setup-notice">
    <span class="notice-emoji">ℹ️</span>
    <div>
        <strong>Context included in your analysis</strong>
        <p>Reliable tracking starts in {{ dataset.context.trackingStarted }}. This is your partner's first full-pay month after maternity leave, so earlier income is not treated as your normal household baseline.</p>
    </div>
</div>

{% if not aiConfigured %}
<div class="notice-banner insights-setup-notice">
    <span class="notice-emoji">🔑</span>
    <div>
        <strong>AI recommendations are ready to activate</strong>
        <p>Add <code>OPENAI_API_KEY=your-key</code> to <code>.env.local</code>, then clear the production cache. Monthly averages below already work without AI.</p>
    </div>
</div>
{% endif %}

<div class="stats-grid stats-grid--4 insights-stats">
    <div class="stat-card stat-card--expense">
        <div class="stat-label">Current spending</div>
        <div class="stat-value">£{{ dataset.current.totalSpending|number_format(2) }}</div>
        <div class="stat-meta">Day {{ dataset.daysElapsed }} of {{ dataset.totalDays }}</div>
    </div>
    <div class="stat-card">
        <div class="stat-label">Past monthly average</div>
        <div class="stat-value">£{{ dataset.averageMonthlySpend|number_format(2) }}</div>
        <div class="stat-meta">Across {{ dataset.historyCount }} completed period{{ dataset.historyCount == 1 ? '' : 's' }}</div>
    </div>
    <div class="stat-card stat-card--essential">
        <div class="stat-label">Projected this period</div>
        <div class="stat-value">£{{ dataset.projectedCurrentSpend|number_format(2) }}</div>
        <div class="stat-meta">Bills counted once + day-to-day pace</div>
    </div>
    <div class="stat-card stat-card--savings">
        <div class="stat-label">Saved this period</div>
        <div class="stat-value">£{{ dataset.current.savings|number_format(2) }}</div>
        <div class="stat-meta">From £{{ dataset.current.workIncome|number_format(2) }} work income</div>
    </div>
</div>

{% if analysis %}
{% if not analysisIsCurrent %}
<div class="notice-banner insights-setup-notice">
    <span class="notice-emoji">↻</span>
    <div>
        <strong>Showing your last AI analysis</strong>
        <p>Your spending data has changed or the analysis is over 24 hours old. Use “Refresh AI analysis” for recommendations based on the latest figures.</p>
    </div>
</div>
{% endif %}
<section class="insights-ai-panel" aria-labelledby="ai-analysis-title">
    <div class="insights-ai-heading">
        <div>
            <span class="insights-eyebrow">AI analysis</span>
            <h2 id="ai-analysis-title">Your spending coach</h2>
        </div>
        <div class="insights-opportunity">
            <span>Potential monthly opportunity</span>
            <strong>£{{ analysis.estimatedTotalMonthlySaving|number_format(2) }}</strong>
        </div>
    </div>
    <p class="insights-summary">{{ analysis.summary }}</p>

    {% if analysis.patterns|length > 0 %}
    <div class="insights-pattern-grid">
        {% for pattern in analysis.patterns %}
        <article class="insight-pattern insight-pattern--{{ pattern.impact }}">
            <span class="insight-pattern-icon">{{ pattern.impact == 'positive' ? '↗' : (pattern.impact == 'watch' ? '!' : '•') }}</span>
            <div>
                <h3>{{ pattern.title }}</h3>
                <p>{{ pattern.evidence }}</p>
            </div>
        </article>
        {% endfor %}
    </div>
    {% endif %}

    {% if analysis.recommendations|length > 0 %}
    <div class="section-header insights-recommendation-heading">
        <h2 class="section-title">Recommended next moves</h2>
    </div>
    <div class="insights-recommendations">
        {% for recommendation in analysis.recommendations %}
        <article class="insight-recommendation">
            <span class="insight-recommendation-number">{{ loop.index }}</span>
            <div class="insight-recommendation-copy">
                <div class="insight-recommendation-title">
                    <h3>{{ recommendation.title }}</h3>
                    <span class="insight-priority insight-priority--{{ recommendation.priority }}">{{ recommendation.priority }}</span>
                </div>
                <p>{{ recommendation.action }}</p>
                <small>{{ recommendation.reason }}</small>
            </div>
            <div class="insight-saving">
                <strong>£{{ recommendation.estimated_monthly_saving|number_format(2) }}</strong>
                <span>possible / month</span>
            </div>
        </article>
        {% endfor %}
    </div>
    {% endif %}

    <div class="insights-ai-footer">
        <div>
            <strong>{{ analysis.encouragement }}</strong>
            {% if analysis.watch_categories|length > 0 %}
            <div class="insight-watch-list">
                <span>Watch:</span>
                {% for category in analysis.watch_categories %}<span class="chip">{{ category|replace({'_': ' '})|title }}</span>{% endfor %}
            </div>
            {% endif %}
        </div>
        <small>Generated {{ analysis.generatedAt|date('d M Y, H:i') }} · Suggestions are budgeting guidance, not financial advice.</small>
    </div>
</section>
{% elseif aiConfigured %}
<div class="empty-card insights-empty-ai">
    <span>✨</span>
    <h2>Your data is ready</h2>
    <p>Generate an analysis to spot repeated patterns and get practical saving suggestions. Unchanged results are cached for 24 hours.</p>
    <form method="post" action="{{ path('app_insights_generate') }}">
        <input type="hidden" name="_token" value="{{ csrf_token('generate_spending_insights') }}">
        <button type="submit" class="btn btn-primary">Generate my insights</button>
    </form>
</div>
{% endif %}

<section class="section insights-average-section">
    <div class="section-header">
        <div>
            <h2 class="section-title">Average spending by category</h2>
            <p class="insights-section-sub">Completed payday periods only, with the live period shown separately.</p>
        </div>
        <span class="section-badge">{{ dataset.historyCount }}-period average</span>
    </div>

    {% if dataset.categoryComparison|length > 0 %}
    <div class="card insights-table-wrap">
        <table class="insights-table">
            <thead>
                <tr>
                    <th>Category</th>
                    <th>Monthly average</th>
                    <th>Current so far</th>
                    <th>Vs average</th>
                    <th>Budget</th>
                </tr>
            </thead>
            <tbody>
                {% for row in dataset.categoryComparison %}
                <tr>
                    <td><strong>{{ row.category|replace({'_': ' '})|title }}</strong></td>
                    <td>£{{ row.average|number_format(2) }}</td>
                    <td>£{{ row.current|number_format(2) }}</td>
                    <td>
                        {% if row.differencePercent is null %}
                            <span class="insight-change insight-change--new">New</span>
                        {% elseif row.difference > 0 %}
                            <span class="insight-change insight-change--up">+{{ row.differencePercent|number_format(1) }}%</span>
                        {% elseif row.difference < 0 %}
                            <span class="insight-change insight-change--down">{{ row.differencePercent|number_format(1) }}%</span>
                        {% else %}
                            <span class="insight-change">0%</span>
                        {% endif %}
                    </td>
                    <td>{{ row.budget is not null ? '£' ~ row.budget|number_format(2) : '—' }}</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    {% else %}
    <div class="empty-card"><p>Add more historical expenses to calculate monthly category averages.</p></div>
    {% endif %}
</section>

{% if dataset.historical|length > 0 %}
<section class="section">
    <div class="section-header">
        <div>
            <h2 class="section-title">Completed period history</h2>
            <p class="insights-section-sub">A quick view of income, spending and savings movement.</p>
        </div>
    </div>
    <div class="card insights-table-wrap">
        <table class="insights-table insights-history-table">
            <thead><tr><th>Period</th><th>Dates</th><th>Income</th><th>Spent</th><th>Saved</th></tr></thead>
            <tbody>
            {% for period in dataset.historical %}
                <tr>
                    <td><strong>{{ period.label }}</strong></td>
                    <td>{{ period.start|date('d M') }} – {{ period.endDisplay|date('d M') }}</td>
                    <td>£{{ period.totalIncome|number_format(2) }}</td>
                    <td>£{{ period.totalSpending|number_format(2) }}</td>
                    <td>£{{ period.savings|number_format(2) }}</td>
                </tr>
            {% endfor %}
            </tbody>
        </table>
    </div>
</section>
{% endif %}

<div class="insights-privacy-note">
    <span>🔒</span>
    <p><strong>Privacy:</strong> AI analysis receives category totals, budgets, income totals and period dates only. Merchant names, transaction descriptions, account IDs and personal names are not sent.</p>
</div>
{% endblock %}