{% extends "base.html" %}
{% block title %}Simulateur d'Épargne{% endblock %}

{% block content %}
<div class="main-content">
    <div class="page-header">
        <h1><i class="bi bi-graph-up-arrow"></i> Simulateur d'Épargne</h1>
        <p>Projetez la croissance de votre épargne avec les intérêts composés</p>
    </div>

    <div class="row g-4">

        <!-- Formulaire de simulation -->
        <div class="col-lg-4">
            <div class="section-card">
                <div class="section-title">Paramètres</div>

                <form method="POST" action="{{ url_for('simulator') }}" id="simForm">

                    {% if comptes_epargne %}
                    <div class="form-group">
                        <label class="form-label">
                            <i class="bi bi-piggy-bank"></i> Pré-remplir depuis un compte
                        </label>
                        <select id="presetCompte" class="form-select">
                            <option value="">— Saisie manuelle —</option>
                            {% for c in comptes_epargne %}
                            <option value="{{ c.balance }}" data-taux="{{ c.interest_rate * 100 }}">
                                {% if c.account_type == 'livret_a' %}Livret A
                                {% elif c.account_type == 'assurance_vie' %}Assurance Vie
                                {% else %}{{ c.account_type }}{% endif %}
                                — {{ "%.2f"|format(c.balance) }} €
                                ({{ "%.1f"|format(c.interest_rate * 100) }} %)
                            </option>
                            {% endfor %}
                        </select>
                    </div>
                    {% endif %}

                    <div class="form-group">
                        <label class="form-label">
                            <i class="bi bi-currency-euro"></i> Capital initial (€)
                        </label>
                        <input type="number" name="capital_initial" id="capitalInitial"
                               class="form-control" min="0" step="100" value="1000" required>
                    </div>

                    <div class="form-group">
                        <label class="form-label">
                            <i class="bi bi-percent"></i> Taux annuel (%)
                        </label>
                        <input type="number" name="taux_annuel" id="tauxAnnuel"
                               class="form-control" min="0" max="100" step="0.1" value="3.0" required>
                    </div>

                    <div class="form-group">
                        <label class="form-label">
                            <i class="bi bi-calendar-range"></i> Durée (années)
                        </label>
                        <input type="number" name="duree_annees" id="dureeAnnees"
                               class="form-control" min="1" max="40" step="1" value="10" required>
                        <small class="form-text">Entre 1 et 40 ans</small>
                    </div>

                    <div class="form-group">
                        <label class="form-label">
                            <i class="bi bi-plus-circle"></i> Versement mensuel (€)
                        </label>
                        <input type="number" name="versement_mensuel" id="versementMensuel"
                               class="form-control" min="0" step="50" value="0">
                        <small class="form-text">Optionnel — laissez 0 si aucun</small>
                    </div>

                    <button type="submit" class="btn btn-dragon w-100 mt-2">
                        <i class="bi bi-calculator"></i> Calculer
                    </button>
                </form>
            </div>
        </div>

        <!-- Résultats -->
        <div class="col-lg-8">

            {% if resultat %}
            <!-- Métriques clés -->
            <div class="row g-3 mb-4">
                <div class="col-md-4">
                    <div class="stat-card success fade-in">
                        <div class="stat-icon">
                            <i class="bi bi-trophy"></i>
                        </div>
                        <div class="stat-value">
                            {{ "%.2f"|format(resultat.capital_final) }} €
                        </div>
                        <div class="stat-label">Capital final</div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="stat-card info fade-in delay-1">
                        <div class="stat-icon">
                            <i class="bi bi-graph-up"></i>
                        </div>
                        <div class="stat-value">
                            {{ "%.2f"|format(resultat.total_interets) }} €
                        </div>
                        <div class="stat-label">Intérêts générés</div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="stat-card warning fade-in delay-2">
                        <div class="stat-icon">
                            <i class="bi bi-percent"></i>
                        </div>
                        <div class="stat-value">
                            +{{ "%.1f"|format(resultat.gain_pourcentage) }} %
                        </div>
                        <div class="stat-label">Gain sur versements</div>
                    </div>
                </div>
            </div>

            <!-- Graphique -->
            <div class="section-card fade-in delay-3">
                <div class="section-title">
                    <i class="bi bi-bar-chart-line"></i> Évolution sur {{ resultat.duree_annees }} an(s)
                </div>
                <canvas id="simulatorChart" height="280"></canvas>
            </div>

            <!-- Tableau année par année -->
            <div class="section-card fade-in delay-4">
                <div class="section-title">
                    <i class="bi bi-table"></i> Détail annuel
                </div>
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>Année</th>
                                <th class="text-end">Total versé</th>
                                <th class="text-end">Intérêts</th>
                                <th class="text-end">Capital total</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for point in resultat.courbe %}
                            <tr>
                                <td>
                                    <span class="badge bg-secondary">An {{ point.annee }}</span>
                                </td>
                                <td class="text-end text-muted" style="font-family: var(--font-mono);">
                                    {{ "%.2f"|format(point.total_verse) }} €
                                </td>
                                <td class="text-end" style="font-family: var(--font-mono); color: var(--c-green); font-weight: 500;">
                                    +{{ "%.2f"|format(point.interets) }} €
                                </td>
                                <td class="text-end fw-bold" style="font-family: var(--font-mono);">
                                    {{ "%.2f"|format(point.solde) }} €
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>

            {% else %}
            <!-- État initial — pas encore simulé -->
            <div class="section-card text-center py-5 fade-in">
                <i class="bi bi-graph-up-arrow"
                   style="font-size: 5rem; color: var(--c-accent); opacity: 0.3;"></i>
                <h3 class="mt-4" style="color: var(--c-text-secondary);">
                    Renseignez les paramètres et cliquez sur <strong>Calculer</strong>
                </h3>
                <p class="text-muted mt-2">
                    Le simulateur applique la formule des intérêts composés avec versements mensuels réguliers.
                </p>

                <div class="row g-3 mt-4 text-start">
                    <div class="col-md-4">
                        <div class="section-card" style="border-left: 3px solid var(--c-green);">
                            <h6 class="fw-bold mb-1">
                                <i class="bi bi-piggy-bank" style="color: var(--c-green);"></i>
                                Livret A
                            </h6>
                            <p class="text-muted mb-0" style="font-size: 0.8125rem;">
                                Taux réglementé de 3 % par cycle. Essayez avec 10 ans.
                            </p>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="section-card" style="border-left: 3px solid var(--c-amber);">
                            <h6 class="fw-bold mb-1">
                                <i class="bi bi-shield-check" style="color: var(--c-amber);"></i>
                                Assurance Vie
                            </h6>
                            <p class="text-muted mb-0" style="font-size: 0.8125rem;">
                                Fonds euros à 2 % par cycle. Idéal sur le long terme.
                            </p>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="section-card" style="border-left: 3px solid var(--c-accent);">
                            <h6 class="fw-bold mb-1">
                                <i class="bi bi-plus-circle" style="color: var(--c-accent);"></i>
                                Versement mensuel
                            </h6>
                            <p class="text-muted mb-0" style="font-size: 0.8125rem;">
                                Ajoutez un versement régulier pour voir l'effet de l'épargne progressive.
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
{% if resultat %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.min.js"></script>
<script>
    var courbe      = {{ resultat.courbe | tojson }};
    var labels      = courbe.map(function(p) { return 'An ' + p.annee; });
    var soldes      = courbe.map(function(p) { return p.solde; });
    var verses      = courbe.map(function(p) { return p.total_verse; });
    var interets    = courbe.map(function(p) { return p.interets; });

    var ctx = document.getElementById('simulatorChart').getContext('2d');

    new Chart(ctx, {
        type: 'bar',
        data: {
            labels: labels,
            datasets: [
                {
                    label: 'Total versé',
                    data: verses,
                    backgroundColor: 'rgba(59, 130, 246, 0.5)',
                    borderColor: 'rgba(59, 130, 246, 0.8)',
                    borderWidth: 1,
                    borderRadius: 4,
                    stack: 'stack'
                },
                {
                    label: 'Intérêts générés',
                    data: interets,
                    backgroundColor: 'rgba(0, 200, 150, 0.6)',
                    borderColor: 'rgba(0, 200, 150, 0.9)',
                    borderWidth: 1,
                    borderRadius: 4,
                    stack: 'stack'
                }
            ]
        },
        options: {
            responsive: true,
            maintainAspectRatio: true,
            plugins: {
                legend: {
                    position: 'bottom',
                    labels: {
                        font: { family: "'DM Sans', sans-serif", size: 12 },
                        usePointStyle: true,
                        padding: 20
                    }
                },
                tooltip: {
                    callbacks: {
                        label: function(ctx) {
                            return ctx.dataset.label + ' : ' + ctx.parsed.y.toFixed(2) + ' €';
                        },
                        afterBody: function(items) {
                            var annee = items[0].dataIndex;
                            return 'Capital total : ' + soldes[annee].toFixed(2) + ' €';
                        }
                    }
                }
            },
            scales: {
                x: {
                    stacked: true,
                    grid: { display: false },
                    ticks: {
                        font: { family: "'DM Sans', sans-serif", size: 11 }
                    }
                },
                y: {
                    stacked: true,
                    beginAtZero: true,
                    grid: { color: 'rgba(0,0,0,0.05)' },
                    ticks: {
                        font: { family: "'DM Mono', monospace", size: 11 },
                        callback: function(val) { return val.toFixed(0) + ' €'; }
                    }
                }
            }
        }
    });
</script>
{% endif %}

<script>
    // Pré-remplissage depuis le compte épargne sélectionné
    var selectPreset = document.getElementById('presetCompte');
    if (selectPreset) {
        selectPreset.addEventListener('change', function () {
            var option = this.options[this.selectedIndex];
            var solde  = parseFloat(option.value) || 0;
            var taux   = parseFloat(option.getAttribute('data-taux')) || 0;

            if (solde > 0) {
                document.getElementById('capitalInitial').value = solde.toFixed(2);
                document.getElementById('tauxAnnuel').value    = taux.toFixed(1);
            }
        });
    }
</script>
{% endblock %}