{% extends "base.html" %}
{% block title %}Compound Growth Planner{% endblock %}

{% block content %}
<div x-data="compoundGrowthApp()" x-init="init()" class="max-w-5xl mx-auto space-y-6">

    <!-- Header -->
    <div class="flex items-center justify-between flex-wrap gap-3">
        <div>
            <h1 class="text-2xl font-bold text-white flex items-center gap-2">
                <svg class="w-7 h-7 text-koin-400" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 18L9 11.25l4.306 4.307a11.95 11.95 0 015.814-5.519l2.74-1.22m0 0l-5.94-2.28m5.94 2.28l-2.28 5.941"/>
                </svg>
                Compound Growth Planner
            </h1>
            <p class="mt-1 text-sm text-gray-400">Calculate compound growth projections across multiple scenarios with market-context adjustments</p>
        </div>
        <span class="text-xs text-gray-500" x-text="lastRefresh ? 'Calculated: ' + lastRefresh : ''"></span>
    </div>

    <!-- Input Section -->
    <div class="bg-gray-800 border border-gray-700 rounded-xl p-6">
        <h3 class="text-sm font-semibold text-gray-300 uppercase tracking-wider mb-5">Growth Parameters</h3>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <!-- Initial Capital -->
            <div>
                <label class="block text-xs text-gray-400 mb-2">Initial Capital (Rp)</label>
                <input type="number" x-model.number="params.initial_capital" step="1000000" min="100000"
                       class="w-full bg-gray-900 border border-gray-700 rounded-lg px-4 py-2.5 text-white text-sm focus:outline-none focus:ring-2 focus:ring-koin-500 focus:border-transparent"
                       placeholder="10,000,000">
                <p class="text-xs text-gray-500 mt-1" x-text="'= ' + fmtM(params.initial_capital)"></p>
            </div>
            <!-- Monthly Return -->
            <div>
                <label class="block text-xs text-gray-400 mb-2">Monthly Return Target: <span class="text-white font-semibold" x-text="params.monthly_return + '%'"></span></label>
                <input type="range" x-model.number="params.monthly_return" min="1" max="20" step="0.5"
                       class="w-full h-2 accent-koin-500 cursor-pointer">
                <div class="flex justify-between text-[10px] text-gray-600 mt-1">
                    <span>1%</span><span>5%</span><span>10%</span><span>15%</span><span>20%</span>
                </div>
            </div>
            <!-- Years -->
            <div>
                <label class="block text-xs text-gray-400 mb-2">Investment Period: <span class="text-white font-semibold" x-text="params.years + ' years'"></span></label>
                <input type="range" x-model.number="params.years" min="1" max="10" step="1"
                       class="w-full h-2 accent-koin-500 cursor-pointer">
                <div class="flex justify-between text-[10px] text-gray-600 mt-1">
                    <span>1yr</span><span>3yr</span><span>5yr</span><span>7yr</span><span>10yr</span>
                </div>
            </div>
            <!-- Reinvest % -->
            <div>
                <label class="block text-xs text-gray-400 mb-2">Reinvestment Rate: <span class="text-white font-semibold" x-text="params.reinvest_pct + '%'"></span></label>
                <input type="range" x-model.number="params.reinvest_pct" min="0" max="100" step="5"
                       class="w-full h-2 accent-koin-500 cursor-pointer">
                <div class="flex justify-between text-[10px] text-gray-600 mt-1">
                    <span>0%</span><span>25%</span><span>50%</span><span>75%</span><span>100%</span>
                </div>
            </div>
        </div>
        <div class="mt-6 flex justify-center">
            <button @click="calculate()" :disabled="loading"
                    class="px-8 py-3 bg-gradient-to-r from-koin-600 to-koin-500 hover:from-koin-500 hover:to-koin-400 text-white rounded-xl text-sm font-bold transition disabled:opacity-50 shadow-lg shadow-koin-900/30">
                <span x-show="!loading" class="flex items-center gap-2">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 15.75V18m-7.5-6.75h.008v.008H8.25v-.008zm0 2.25h.008v.008H8.25V13.5zm0 2.25h.008v.008H8.25v-.008zm0 2.25h.008v.008H8.25V18zm2.498-6.75h.007v.008h-.007v-.008zm0 2.25h.007v.008h-.007V13.5zm0 2.25h.007v.008h-.007v-.008zm0 2.25h.007v.008h-.007V18zm2.504-6.75h.008v.008h-.008v-.008zm0 2.25h.008v.008h-.008V13.5zm0 2.25h.008v.008h-.008v-.008zm0 2.25h.008v.008h-.008V18zm2.498-6.75h.008v.008h-.008v-.008zm0 2.25h.008v.008h-.008V13.5zM8.25 6h7.5v2.25h-7.5V6zM12 2.25c-1.892 0-3.758.11-5.593.322C5.307 2.7 4.5 3.65 4.5 4.757V19.5a2.25 2.25 0 002.25 2.25h10.5a2.25 2.25 0 002.25-2.25V4.757c0-1.108-.806-2.057-1.907-2.185A48.507 48.507 0 0012 2.25z"/></svg>
                    Calculate Projections
                </span>
                <span x-show="loading" class="flex items-center gap-2">
                    <svg class="animate-spin w-4 h-4" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/></svg>
                    Calculating...
                </span>
            </button>
        </div>
    </div>

    <!-- Loading -->
    <div x-show="loading" x-cloak class="flex items-center justify-center py-12">
        <div class="text-center">
            <svg class="w-8 h-8 animate-spin text-koin-400 mx-auto mb-3" fill="none" viewBox="0 0 24 24">
                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/>
                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"/>
            </svg>
            <p class="text-sm text-gray-500">Computing projections...</p>
        </div>
    </div>

    <!-- Error -->
    <div x-show="error" x-cloak class="bg-red-900/20 border border-red-800 rounded-xl p-4">
        <p class="text-sm text-red-400" x-text="error"></p>
    </div>

    <!-- Results -->
    <div x-show="!loading && !error && data" x-cloak>

        <!-- Summary Stats -->
        <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
            <div class="bg-gray-800 border border-gray-700 rounded-xl p-5">
                <p class="text-xs text-gray-400 uppercase tracking-wider">Initial Capital</p>
                <p class="text-xl font-bold text-white mt-1" x-text="fmtM(params.initial_capital)"></p>
            </div>
            <div class="bg-gray-800 border border-gray-700 rounded-xl p-5">
                <p class="text-xs text-gray-400 uppercase tracking-wider">Monthly Target</p>
                <p class="text-xl font-bold text-koin-400 mt-1" x-text="params.monthly_return + '%'"></p>
            </div>
            <div class="bg-gray-800 border border-gray-700 rounded-xl p-5">
                <p class="text-xs text-gray-400 uppercase tracking-wider">Period</p>
                <p class="text-xl font-bold text-white mt-1" x-text="params.years + ' years'"></p>
            </div>
            <div class="bg-gray-800 border border-gray-700 rounded-xl p-5">
                <p class="text-xs text-gray-400 uppercase tracking-wider">Reinvestment</p>
                <p class="text-xl font-bold text-white mt-1" x-text="params.reinvest_pct + '%'"></p>
            </div>
        </div>

        <!-- 4 Scenario Cards -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
            <template x-for="(sc, i) in data.scenarios || []" :key="sc.name">
                <div class="rounded-xl p-5 border transition"
                     :class="i === 0 ? 'bg-gradient-to-br from-koin-900/40 to-gray-800 border-koin-600/50' : 'bg-gray-800 border-gray-700'">
                    <p class="text-xs font-semibold uppercase tracking-wider"
                       :class="i === 0 ? 'text-koin-400' : 'text-gray-400'" x-text="sc.name"></p>
                    <p class="text-2xl font-extrabold mt-2"
                       :class="i === 0 ? 'text-koin-300' : 'text-white'" x-text="fmtM(sc.final_capital)"></p>
                    <p class="text-xs mt-1"
                       :class="(sc.total_return_pct || 0) >= 0 ? 'text-emerald-400' : 'text-red-400'"
                       x-text="fmtPct(sc.total_return_pct) + ' return'"></p>
                    <p class="text-[10px] text-gray-500 mt-1" x-text="sc.description || ''"></p>
                    <div class="mt-3 pt-3 border-t border-gray-700/50">
                        <div class="flex items-center justify-between text-[10px]">
                            <span class="text-gray-500">Monthly Return</span>
                            <span class="text-gray-300 tabular-nums" x-text="fmt(sc.monthly_return_pct, 1) + '%'"></span>
                        </div>
                        <div class="flex items-center justify-between text-[10px] mt-0.5">
                            <span class="text-gray-500">Annual Return</span>
                            <span class="text-gray-300 tabular-nums" x-text="fmtPct(sc.annual_return_pct)"></span>
                        </div>
                    </div>
                </div>
            </template>
        </div>

        <!-- Milestones Timeline -->
        <template x-if="data.milestones && data.milestones.length">
            <div class="bg-gray-800 border border-gray-700 rounded-xl p-5 mb-6">
                <h3 class="text-sm font-semibold text-gray-300 uppercase tracking-wider mb-4">Growth Milestones</h3>
                <div class="flex items-center gap-4 overflow-x-auto pb-2">
                    <template x-for="ms in data.milestones" :key="ms.label">
                        <div class="flex-shrink-0 text-center">
                            <div class="w-14 h-14 rounded-full flex items-center justify-center mx-auto mb-2"
                                 :class="ms.achieved ? 'bg-emerald-900/40 border-2 border-emerald-500' : 'bg-gray-900 border-2 border-gray-600'">
                                <span class="text-sm font-bold" :class="ms.achieved ? 'text-emerald-400' : 'text-gray-500'"
                                      x-text="ms.label"></span>
                            </div>
                            <p class="text-xs font-medium" :class="ms.achieved ? 'text-emerald-400' : 'text-gray-500'"
                               x-text="ms.date || 'Not reached'"></p>
                            <p class="text-[10px] text-gray-600" x-text="ms.months ? ms.months + ' months' : ''"></p>
                        </div>
                    </template>
                </div>
            </div>
        </template>

        <!-- Passive Income Potential -->
        <template x-if="data.passive_income">
            <div class="bg-gray-800 border border-gray-700 rounded-xl p-5 mb-6">
                <h3 class="text-sm font-semibold text-gray-300 uppercase tracking-wider mb-3">Passive Income Potential</h3>
                <div class="grid grid-cols-3 gap-4">
                    <div class="text-center">
                        <p class="text-xs text-gray-500">Monthly Income (Year 1)</p>
                        <p class="text-lg font-bold text-koin-400 mt-1" x-text="fmtM(data.passive_income.year1_monthly)"></p>
                    </div>
                    <div class="text-center">
                        <p class="text-xs text-gray-500">Monthly Income (Year 3)</p>
                        <p class="text-lg font-bold text-emerald-400 mt-1" x-text="fmtM(data.passive_income.year3_monthly)"></p>
                    </div>
                    <div class="text-center">
                        <p class="text-xs text-gray-500">Monthly Income (Year 5)</p>
                        <p class="text-lg font-bold text-emerald-300 mt-1" x-text="fmtM(data.passive_income.year5_monthly)"></p>
                    </div>
                </div>
            </div>
        </template>

        <!-- Monthly Projection Table -->
        <template x-if="data.monthly_projections && data.monthly_projections.length">
            <div class="bg-gray-800 border border-gray-700 rounded-xl overflow-hidden mb-6">
                <div class="p-5 pb-3">
                    <h3 class="text-sm font-semibold text-gray-300 uppercase tracking-wider">Monthly Projections</h3>
                </div>
                <div class="overflow-x-auto max-h-80 overflow-y-auto">
                    <table class="w-full text-sm">
                        <thead class="sticky top-0 bg-gray-900">
                            <tr>
                                <th class="text-left text-xs text-gray-500 font-medium px-5 py-2">Month</th>
                                <th class="text-right text-xs text-gray-500 font-medium px-3 py-2">Compound</th>
                                <th class="text-right text-xs text-gray-500 font-medium px-3 py-2">Conservative</th>
                                <th class="text-right text-xs text-gray-500 font-medium px-3 py-2">Moderate</th>
                                <th class="text-right text-xs text-gray-500 font-medium px-5 py-2">Aggressive</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-gray-700/50">
                            <template x-for="(row, ri) in data.monthly_projections" :key="ri">
                                <tr class="hover:bg-gray-700/30 transition">
                                    <td class="px-5 py-2 text-gray-300 font-medium" x-text="'Month ' + row.month"></td>
                                    <td class="px-3 py-2 text-right text-koin-400 tabular-nums font-medium" x-text="fmtM(row.compound)"></td>
                                    <td class="px-3 py-2 text-right text-gray-300 tabular-nums" x-text="fmtM(row.conservative)"></td>
                                    <td class="px-3 py-2 text-right text-gray-300 tabular-nums" x-text="fmtM(row.moderate)"></td>
                                    <td class="px-5 py-2 text-right text-gray-300 tabular-nums" x-text="fmtM(row.aggressive)"></td>
                                </tr>
                            </template>
                        </tbody>
                    </table>
                </div>
            </div>
        </template>

        <!-- Key Metrics Comparison -->
        <template x-if="data.scenarios && data.scenarios.length >= 2">
            <div class="bg-gray-800 border border-gray-700 rounded-xl p-5 mb-6">
                <h3 class="text-sm font-semibold text-gray-300 uppercase tracking-wider mb-3">Scenario Comparison</h3>
                <div class="overflow-x-auto">
                    <table class="w-full text-sm">
                        <thead>
                            <tr>
                                <th class="text-left text-xs text-gray-500 font-medium px-3 py-2">Metric</th>
                                <template x-for="sc in data.scenarios" :key="sc.name">
                                    <th class="text-right text-xs text-gray-500 font-medium px-3 py-2" x-text="sc.name"></th>
                                </template>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-gray-700/50">
                            <tr>
                                <td class="px-3 py-2 text-gray-400 text-xs">Final Capital</td>
                                <template x-for="sc in data.scenarios" :key="sc.name + '_fc'">
                                    <td class="px-3 py-2 text-right text-white font-medium tabular-nums text-xs" x-text="fmtM(sc.final_capital)"></td>
                                </template>
                            </tr>
                            <tr>
                                <td class="px-3 py-2 text-gray-400 text-xs">Total Return</td>
                                <template x-for="sc in data.scenarios" :key="sc.name + '_tr'">
                                    <td class="px-3 py-2 text-right tabular-nums text-xs"
                                        :class="(sc.total_return_pct || 0) >= 0 ? 'text-emerald-400' : 'text-red-400'"
                                        x-text="fmtPct(sc.total_return_pct)"></td>
                                </template>
                            </tr>
                            <tr>
                                <td class="px-3 py-2 text-gray-400 text-xs">Total Profit</td>
                                <template x-for="sc in data.scenarios" :key="sc.name + '_tp'">
                                    <td class="px-3 py-2 text-right text-emerald-400 font-medium tabular-nums text-xs" x-text="fmtM(sc.total_profit)"></td>
                                </template>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </template>

        <!-- Market Context -->
        <template x-if="data.market_context">
            <div class="bg-gray-800 border border-gray-700 rounded-xl p-5 mb-6">
                <h3 class="text-sm font-semibold text-gray-300 uppercase tracking-wider mb-3">Market Context & Realistic Assessment</h3>
                <div class="space-y-3">
                    <template x-for="(ctx, ci) in data.market_context.insights || []" :key="ci">
                        <div class="flex items-start gap-3 p-3 bg-gray-900/50 rounded-lg">
                            <svg class="w-4 h-4 text-koin-400 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z"/>
                            </svg>
                            <p class="text-sm text-gray-300" x-text="ctx"></p>
                        </div>
                    </template>
                    <div x-show="data.market_context.risk_warning" class="p-3 bg-amber-900/20 border border-amber-700/50 rounded-lg">
                        <p class="text-xs text-amber-400" x-text="data.market_context.risk_warning"></p>
                    </div>
                </div>
            </div>
        </template>
    </div>
</div>

<script>
function compoundGrowthApp() {
    return {
        loading: false,
        error: null,
        lastRefresh: null,
        data: null,
        params: {
            initial_capital: 10000000,
            monthly_return: 5,
            years: 5,
            reinvest_pct: 100,
        },

        init() { /* Do not auto-calculate; wait for user */ },

        async calculate() {
            this.loading = true;
            this.error = null;
            try {
                const qs = new URLSearchParams({
                    asset_type: '{{ asset_mode }}',
                    initial_capital: this.params.initial_capital,
                    monthly_return: this.params.monthly_return,
                    years: this.params.years,
                    reinvest_pct: this.params.reinvest_pct,
                });
                const res = await fetch(`/api/v1/market/compound-growth?${qs}`);
                const json = await res.json();
                if (json.status === 'success') {
                    this.data = json.data || json;
                } else if (json.scenarios || json.monthly_projections) {
                    this.data = json;
                } else {
                    this.error = json.message || 'Calculation failed';
                }
            } catch (e) {
                this.error = e.message;
            } finally {
                this.loading = false;
                this.lastRefresh = new Date().toLocaleTimeString('id-ID');
            }
        },

        fmt(n, d=2) { return n != null ? Number(n).toFixed(d) : '-'; },
        fmtPct(n) { return n != null ? (n >= 0 ? '+' : '') + Number(n).toFixed(2) + '%' : '-'; },
        fmtPrice(n) { return n != null ? 'Rp ' + Number(n).toLocaleString('id-ID') : '-'; },
        fmtM(n) {
            if (!n) return '-';
            if (n >= 1e12) return 'Rp ' + (n/1e12).toFixed(1) + 'T';
            if (n >= 1e9) return 'Rp ' + (n/1e9).toFixed(1) + 'B';
            if (n >= 1e6) return 'Rp ' + (n/1e6).toFixed(1) + 'M';
            return 'Rp ' + Number(n).toLocaleString('id-ID');
        },
    };
}
</script>
{% endblock %}