{% extends "base.html" %}
{% block title %}Volatility Regime Sizer{% endblock %}
{% block content %}
<div class="max-w-7xl mx-auto px-4 py-6" x-data="regimeSizingPanel()" x-init="init()">

    <!-- Header -->
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-6">
        <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="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 013 19.875v-6.75zM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V8.625zM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V4.125z"/></svg>
                Volatility Regime Sizer
            </h1>
            <p class="text-gray-400 text-sm mt-1">Dynamic position sizing based on volatility regime &amp; edge degradation</p>
        </div>
        <div class="flex items-center gap-3">
            <select x-model="assetType" @change="fetchData()" class="bg-gray-800 border border-gray-700 text-gray-300 text-sm rounded-lg px-3 py-2">
                <option value="crypto">Crypto</option>
                <option value="stock">Stock ID</option>
                <option value="stock_us">Stock US</option>
                <option value="all">All Assets</option>
            </select>
            <button @click="fetchData()" class="px-4 py-2 bg-koin-600 hover:bg-koin-500 text-white rounded-lg text-sm font-medium transition" :disabled="loading">
                <span x-show="!loading">Refresh</span>
                <span x-show="loading" class="flex items-center gap-1"><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> Loading</span>
            </button>
        </div>
    </div>

    <!-- Market Regime Banner -->
    <template x-if="data.current_market_regime">
        <div class="mb-6 p-4 rounded-xl border" :class="{
            'bg-emerald-900/20 border-emerald-700/50': data.current_market_regime.color === 'emerald',
            'bg-blue-900/20 border-blue-700/50': data.current_market_regime.color === 'blue',
            'bg-amber-900/20 border-amber-700/50': data.current_market_regime.color === 'amber',
            'bg-red-900/20 border-red-700/50': data.current_market_regime.color === 'red',
        }">
            <div class="flex items-center justify-between">
                <div>
                    <span class="text-xs font-semibold uppercase tracking-wider" :class="{
                        'text-emerald-400': data.current_market_regime.color === 'emerald',
                        'text-blue-400': data.current_market_regime.color === 'blue',
                        'text-amber-400': data.current_market_regime.color === 'amber',
                        'text-red-400': data.current_market_regime.color === 'red',
                    }">Current Market Regime</span>
                    <h3 class="text-lg font-bold text-white mt-1" x-text="data.current_market_regime.label"></h3>
                </div>
                <div class="text-right">
                    <div class="text-sm text-gray-400">Avg ATR</div>
                    <div class="text-xl font-bold text-white" x-text="data.current_market_regime.avg_atr + '%'"></div>
                </div>
                <div class="text-right">
                    <div class="text-sm text-gray-400">Avg Adjustment</div>
                    <div class="text-xl font-bold" :class="data.avg_adjustment_factor >= 1 ? 'text-emerald-400' : 'text-red-400'" x-text="data.avg_adjustment_factor + 'x'"></div>
                </div>
            </div>
        </div>
    </template>

    <!-- Stats Cards -->
    <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-4">
            <div class="text-xs text-gray-400 uppercase tracking-wider">Total Assets</div>
            <div class="text-2xl font-bold text-white mt-1" x-text="data.total || 0"></div>
        </div>
        <div class="bg-gray-800 border border-gray-700 rounded-xl p-4">
            <div class="text-xs text-gray-400 uppercase tracking-wider">Amplify</div>
            <div class="text-2xl font-bold text-emerald-400 mt-1" x-text="data.items?.filter(i => i.action === 'AMPLIFY').length || 0"></div>
        </div>
        <div class="bg-gray-800 border border-gray-700 rounded-xl p-4">
            <div class="text-xs text-gray-400 uppercase tracking-wider">Reduce</div>
            <div class="text-2xl font-bold text-amber-400 mt-1" x-text="data.items?.filter(i => i.action === 'REDUCE').length || 0"></div>
        </div>
        <div class="bg-gray-800 border border-gray-700 rounded-xl p-4">
            <div class="text-xs text-gray-400 uppercase tracking-wider">Minimal</div>
            <div class="text-2xl font-bold text-red-400 mt-1" x-text="data.items?.filter(i => i.action === 'MINIMAL').length || 0"></div>
        </div>
    </div>

    <!-- Regime Win Rates -->
    <template x-if="data.regime_win_rates && Object.keys(data.regime_win_rates).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">Regime-Specific Win Rates</h3>
            <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
                <template x-for="(rdata, rname) in data.regime_win_rates" :key="rname">
                    <div class="bg-gray-900/50 rounded-lg p-3">
                        <div class="text-xs font-medium text-gray-400 uppercase" x-text="rname.replace('_', ' ')"></div>
                        <div class="text-xl font-bold mt-1" :class="rdata.win_rate >= 55 ? 'text-emerald-400' : rdata.win_rate >= 45 ? 'text-amber-400' : 'text-red-400'" x-text="rdata.win_rate + '%'"></div>
                        <div class="text-xs text-gray-500 mt-1" x-text="rdata.total + ' trades | Edge: ' + rdata.edge + '%'"></div>
                        <div class="text-xs mt-1" :class="rdata.kelly_pct > 0 ? 'text-emerald-500' : 'text-red-500'" x-text="'Kelly: ' + rdata.kelly_pct + '%'"></div>
                    </div>
                </template>
            </div>
        </div>
    </template>

    <!-- Recommendations -->
    <template x-if="data.recommendations?.length">
        <div class="space-y-2 mb-6">
            <template x-for="rec in data.recommendations" :key="rec.message">
                <div class="p-3 rounded-lg border text-sm" :class="{
                    'bg-red-900/20 border-red-700/50 text-red-300': rec.type === 'critical',
                    'bg-amber-900/20 border-amber-700/50 text-amber-300': rec.type === 'warning',
                    'bg-emerald-900/20 border-emerald-700/50 text-emerald-300': rec.type === 'opportunity',
                    'bg-blue-900/20 border-blue-700/50 text-blue-300': rec.type === 'insight',
                }" x-text="rec.message"></div>
            </template>
        </div>
    </template>

    <!-- Items Grid -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
        <template x-for="item in data.items || []" :key="item.asset_id">
            <div class="bg-gray-800 border border-gray-700 rounded-xl p-5 hover:border-gray-600 transition">
                <div class="flex items-center justify-between mb-3">
                    <div>
                        <span class="text-white font-bold" x-text="item.coin_symbol"></span>
                        <span class="text-gray-500 text-sm ml-1" x-text="item.coin_name"></span>
                    </div>
                    <span class="px-2.5 py-1 rounded-full text-xs font-bold" :class="{
                        'bg-emerald-900/40 text-emerald-300': item.action === 'AMPLIFY',
                        'bg-blue-900/40 text-blue-300': item.action === 'NORMAL',
                        'bg-amber-900/40 text-amber-300': item.action === 'REDUCE',
                        'bg-red-900/40 text-red-300': item.action === 'MINIMAL',
                    }" x-text="item.action"></span>
                </div>
                <div class="grid grid-cols-3 gap-3 text-center mb-3">
                    <div>
                        <div class="text-xs text-gray-500">Regime</div>
                        <div class="text-sm font-medium" :class="{
                            'text-emerald-400': item.regime_color === 'emerald',
                            'text-blue-400': item.regime_color === 'blue',
                            'text-amber-400': item.regime_color === 'amber',
                            'text-red-400': item.regime_color === 'red',
                        }" x-text="item.regime_label"></div>
                    </div>
                    <div>
                        <div class="text-xs text-gray-500">ATR</div>
                        <div class="text-sm font-medium text-white" x-text="item.atr_pct + '%'"></div>
                    </div>
                    <div>
                        <div class="text-xs text-gray-500">Win Rate</div>
                        <div class="text-sm font-medium" :class="item.regime_win_rate >= 55 ? 'text-emerald-400' : 'text-amber-400'" x-text="item.regime_win_rate + '%'"></div>
                    </div>
                </div>
                <!-- Adjustment Factors -->
                <div class="space-y-1.5 mb-3">
                    <div class="flex justify-between text-xs">
                        <span class="text-gray-400">Volatility</span>
                        <span class="font-medium" :class="item.vol_factor >= 1 ? 'text-emerald-400' : 'text-amber-400'" x-text="item.vol_factor + 'x'"></span>
                    </div>
                    <div class="flex justify-between text-xs">
                        <span class="text-gray-400">Edge</span>
                        <span class="font-medium" :class="item.edge_factor >= 1 ? 'text-emerald-400' : 'text-amber-400'" x-text="item.edge_factor + 'x'"></span>
                    </div>
                    <div class="flex justify-between text-xs">
                        <span class="text-gray-400">Momentum</span>
                        <span class="font-medium" :class="item.momentum_factor >= 1 ? 'text-emerald-400' : 'text-amber-400'" x-text="item.momentum_factor + 'x'"></span>
                    </div>
                </div>
                <!-- Position Size -->
                <div class="border-t border-gray-700 pt-3 grid grid-cols-2 gap-3 text-center">
                    <div>
                        <div class="text-xs text-gray-500">Base Size</div>
                        <div class="text-sm text-gray-300" x-text="item.base_size_pct + '% = Rp ' + Number(item.base_amount).toLocaleString('id-ID')"></div>
                    </div>
                    <div>
                        <div class="text-xs text-gray-500">Adjusted Size</div>
                        <div class="text-sm font-bold" :class="item.adjusted_size_pct >= item.base_size_pct ? 'text-emerald-400' : 'text-red-400'" x-text="item.adjusted_size_pct + '% = Rp ' + Number(item.adjusted_amount).toLocaleString('id-ID')"></div>
                    </div>
                </div>
            </div>
        </template>
    </div>

    <!-- Loading -->
    <div x-show="loading" class="text-center py-12">
        <svg class="animate-spin h-8 w-8 text-koin-400 mx-auto" 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>
        <p class="text-gray-400 mt-3">Analyzing volatility regimes...</p>
    </div>

    <!-- Empty -->
    <div x-show="!loading && (!data.items || data.items.length === 0)" class="text-center py-12">
        <p class="text-gray-500">No data available</p>
    </div>
</div>

<script>
function regimeSizingPanel() {
    return {
        data: {},
        loading: false,
        assetType: '{{ asset_mode }}',
        init() { this.fetchData(); },
        async fetchData() {
            this.loading = true;
            try {
                const r = await fetch(`/api/v1/market/regime-sizing?asset_type=${this.assetType}`);
                this.data = await r.json();
            } catch(e) { console.error(e); }
            this.loading = false;
        }
    };
}
</script>
{% endblock %}