{% extends "base.html" %}
{% block title %}Win Rate Collapse Detector{% endblock %}

{% block content %}
<div x-data="winrateCollapsePanel()" x-init="fetchData()" class="space-y-5">
    <!-- Header -->
    <div class="flex items-center justify-between flex-wrap gap-3">
        <div class="flex items-center gap-3">
            <a href="{{ tools_base }}/" class="text-gray-500 hover:text-gray-300 transition">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/></svg>
            </a>
            <div>
                <h1 class="text-2xl font-bold text-white flex items-center gap-2">
                    <svg class="w-6 h-6 text-red-400" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z"/>
                    </svg>
                    Win Rate Collapse Detector
                </h1>
                <p class="text-sm text-gray-500 mt-0.5">Monitor edge degradation &amp; prevent catastrophic drawdowns</p>
            </div>
        </div>
        <div class="flex items-center gap-2 flex-wrap">
            <!-- Asset Type -->
            <select x-model="filters.asset_type" @change="fetchData()"
                    class="bg-gray-800 border border-gray-700 rounded-lg px-3 py-1.5 text-sm text-gray-300 focus:outline-none focus:ring-1 focus:ring-red-500">
                <option value="all">All Assets</option>
                <option value="crypto">Crypto</option>
                <option value="stock">Saham IDX</option>
                <option value="stock_us">Saham US</option>
            </select>
            <!-- Baseline Days -->
            <select x-model="filters.baseline" @change="fetchData()"
                    class="bg-gray-800 border border-gray-700 rounded-lg px-3 py-1.5 text-sm text-gray-300 focus:outline-none focus:ring-1 focus:ring-red-500">
                <option value="30">Baseline 30d</option>
                <option value="60">Baseline 60d</option>
                <option value="90">Baseline 90d</option>
            </select>
            <!-- Refresh -->
            <button @click="fetchData()" :disabled="loading"
                    class="flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg transition"
                    :class="loading ? 'bg-gray-800 text-gray-500 cursor-not-allowed' : 'bg-red-600 hover:bg-red-700 text-white'">
                <svg :class="loading && 'animate-spin'" class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg>
                <span x-text="loading ? 'Loading...' : 'Refresh'"></span>
            </button>
        </div>
    </div>

    <!-- Loading State -->
    <div x-show="loading" x-cloak class="text-center py-12">
        <svg class="animate-spin h-8 w-8 text-red-500 mx-auto" fill="none" viewBox="0 0 24 24">
            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
        </svg>
        <p class="text-gray-500 text-sm mt-3">Analyzing win rate collapse data...</p>
    </div>

    <!-- Empty State -->
    <div x-show="!loading && !data" x-cloak
         class="text-center py-16 bg-gray-800 rounded-xl border border-gray-700">
        <svg class="mx-auto h-12 w-12 text-gray-600" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z"/>
        </svg>
        <h3 class="mt-4 text-lg font-medium text-gray-400">No Win Rate Data Available</h3>
        <p class="mt-2 text-sm text-gray-600 max-w-md mx-auto">
            Signals need to be generated and evaluated first. Run a scan from
            <a href="/admin/workflow" class="text-red-400 hover:text-red-300">Pipeline Workflow</a>.
        </p>
    </div>

    <!-- Main Content (shown when data exists) -->
    <template x-if="!loading && data">
        <div class="space-y-5">

            <!-- ═══════════════════════════════════════════════════════
                 ALERT BANNER — full width, colored by alert_level
                 ═══════════════════════════════════════════════════════ -->
            <div x-show="data.alert_level && data.alert_level !== 'HEALTHY'"
                 class="rounded-xl border p-4 animate-fadeIn"
                 :class="alertBannerClass(data.alert_level)">
                <div class="flex items-start gap-3">
                    <!-- Alert Icon -->
                    <div class="flex-shrink-0 mt-0.5">
                        <svg x-show="data.alert_level === 'CRITICAL'" class="w-6 h-6 text-red-400 animate-pulse" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z"/>
                        </svg>
                        <svg x-show="data.alert_level === 'WARNING'" class="w-6 h-6 text-amber-400" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z"/>
                        </svg>
                        <svg x-show="data.alert_level === 'WATCH'" class="w-6 h-6 text-yellow-400" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.64 0 8.577 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.64 0-8.577-3.007-9.963-7.178z"/>
                            <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
                        </svg>
                    </div>
                    <!-- Alert Content -->
                    <div class="flex-1 min-w-0">
                        <div class="flex items-center gap-2 flex-wrap">
                            <span class="text-xs font-bold uppercase tracking-wider px-2 py-0.5 rounded"
                                  :class="alertLevelBadge(data.alert_level)"
                                  x-text="data.alert_level"></span>
                            <span class="text-sm font-semibold"
                                  :class="alertTextColor(data.alert_level)"
                                  x-text="data.alert_action || 'Action required'"></span>
                        </div>
                        <div class="flex items-center gap-4 mt-2 text-sm flex-wrap">
                            <span class="text-gray-300">
                                Current Drop: <span class="font-bold" :class="alertTextColor(data.alert_level)" x-text="formatDrop(data.current_drop_pct)"></span>
                            </span>
                            <span class="text-gray-300" x-show="data.trend">
                                Trend: <span class="font-semibold" :class="trendColor(data.trend)" x-text="data.trend"></span>
                            </span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Healthy Banner -->
            <div x-show="data.alert_level === 'HEALTHY'"
                 class="rounded-xl border border-emerald-800/50 bg-emerald-900/20 p-4 animate-fadeIn">
                <div class="flex items-center gap-3">
                    <svg class="w-6 h-6 text-emerald-400 flex-shrink-0" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                    </svg>
                    <div>
                        <span class="text-xs font-bold uppercase tracking-wider px-2 py-0.5 rounded bg-emerald-900/60 text-emerald-400 border border-emerald-700/50">HEALTHY</span>
                        <span class="text-sm text-emerald-300 ml-2">Win rate is within normal parameters. No action required.</span>
                    </div>
                </div>
            </div>

            <!-- ═══════════════════════════════════════════════════════
                 STATS ROW
                 ═══════════════════════════════════════════════════════ -->
            <div class="grid grid-cols-2 md:grid-cols-4 gap-3">
                <!-- Overall Win Rate -->
                <div class="bg-gray-800 rounded-xl border border-gray-700 p-3">
                    <p class="text-xs text-gray-500 uppercase tracking-wider">Overall Win Rate</p>
                    <div class="flex items-center gap-2 mt-1">
                        <span class="text-lg font-bold text-gray-400 tabular-nums" x-text="formatPct(data.baseline_wr)"></span>
                        <svg class="w-4 h-4 text-gray-600" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3"/></svg>
                        <span class="text-lg font-bold tabular-nums"
                              :class="wrColor(data.current_wr)"
                              x-text="formatPct(data.current_wr)"></span>
                    </div>
                    <p class="text-[10px] text-gray-600 mt-0.5">Baseline &rarr; Current</p>
                </div>
                <!-- Total Signals -->
                <div class="bg-gray-800 rounded-xl border border-gray-700 p-3">
                    <p class="text-xs text-gray-500 uppercase tracking-wider">Total Signals</p>
                    <p class="text-xl font-bold text-white mt-1 tabular-nums" x-text="data.total_signals ?? '-'"></p>
                </div>
                <!-- Alert Level -->
                <div class="bg-gray-800 rounded-xl border border-gray-700 p-3">
                    <p class="text-xs text-gray-500 uppercase tracking-wider">Alert Level</p>
                    <div class="mt-1">
                        <span class="text-sm font-bold uppercase tracking-wider px-2.5 py-1 rounded"
                              :class="alertLevelBadge(data.alert_level)"
                              x-text="data.alert_level || '-'"></span>
                    </div>
                </div>
                <!-- Trend -->
                <div class="bg-gray-800 rounded-xl border border-gray-700 p-3">
                    <p class="text-xs text-gray-500 uppercase tracking-wider">Trend</p>
                    <div class="flex items-center gap-2 mt-1">
                        <svg x-show="data.trend === 'IMPROVING'" class="w-5 h-5 text-emerald-400" fill="none" stroke="currentColor" stroke-width="2" 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.22"/><path stroke-linecap="round" stroke-linejoin="round" d="M18.75 7.5h3v3"/></svg>
                        <svg x-show="data.trend === 'DETERIORATING'" class="w-5 h-5 text-red-400" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 6L9 12.75l4.286-4.286a11.948 11.948 0 014.306 6.43l.776 2.898"/><path stroke-linecap="round" stroke-linejoin="round" d="M16.5 18h5.25v-5.25"/></svg>
                        <svg x-show="data.trend === 'STABLE'" class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 12h-15"/></svg>
                        <span class="text-lg font-bold"
                              :class="trendColor(data.trend)"
                              x-text="data.trend || '-'"></span>
                    </div>
                </div>
            </div>

            <!-- ═══════════════════════════════════════════════════════
                 ROLLING WINDOW CARDS (7d / 14d / 30d / 60d / 90d)
                 ═══════════════════════════════════════════════════════ -->
            <div x-show="data.rolling_windows && data.rolling_windows.length > 0">
                <div class="flex items-center gap-2 mb-3">
                    <svg class="w-5 h-5 text-blue-400" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 3v11.25A2.25 2.25 0 006 16.5h2.25M3.75 3h-1.5m1.5 0h16.5m0 0h1.5m-1.5 0v11.25A2.25 2.25 0 0118 16.5h-2.25m-7.5 0h7.5m-7.5 0l-1 3m8.5-3l1 3m0 0l.5 1.5m-.5-1.5h-9.5m0 0l-.5 1.5"/>
                    </svg>
                    <h2 class="text-lg font-semibold text-white">Rolling Window Analysis</h2>
                </div>
                <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-3">
                    <template x-for="(win, idx) in data.rolling_windows" :key="win.period || idx">
                        <div class="bg-gray-800 rounded-xl border border-gray-700 p-4 hover:border-gray-600 transition">
                            <!-- Period Label -->
                            <div class="flex items-center justify-between mb-3">
                                <span class="text-sm font-bold text-white" x-text="win.period || '-'"></span>
                                <span class="text-[10px] font-bold uppercase tracking-wider px-1.5 py-0.5 rounded"
                                      :class="statusBadge(win.status)"
                                      x-text="win.status || '-'"></span>
                            </div>
                            <!-- Win Rate -->
                            <div class="text-center mb-3">
                                <p class="text-3xl font-extrabold tabular-nums"
                                   :class="wrColor(win.win_rate)"
                                   x-text="formatPct(win.win_rate)"></p>
                                <p class="text-[10px] text-gray-500 uppercase tracking-wider mt-0.5">Win Rate</p>
                            </div>
                            <!-- Drop from Baseline -->
                            <div class="flex items-center justify-between text-xs mb-2">
                                <span class="text-gray-500">Drop</span>
                                <span class="font-semibold tabular-nums"
                                      :class="dropColor(win.drop_from_baseline)"
                                      x-text="formatDrop(win.drop_from_baseline)"></span>
                            </div>
                            <!-- Drop Bar -->
                            <div class="w-full h-1.5 bg-gray-900 rounded-full overflow-hidden mb-2">
                                <div class="h-full rounded-full transition-all duration-500"
                                     :class="dropBarColor(win.drop_from_baseline)"
                                     :style="'width: ' + Math.min(Math.abs(win.drop_from_baseline || 0), 50) * 2 + '%'"></div>
                            </div>
                            <!-- Total Signals -->
                            <div class="flex items-center justify-between text-xs">
                                <span class="text-gray-500">Signals</span>
                                <span class="text-gray-300 font-semibold tabular-nums" x-text="win.total_signals ?? '-'"></span>
                            </div>
                        </div>
                    </template>
                </div>
            </div>

            <!-- ═══════════════════════════════════════════════════════
                 SIGNAL TYPE BREAKDOWN TABLE
                 ═══════════════════════════════════════════════════════ -->
            <div x-show="data.signal_breakdown && data.signal_breakdown.length > 0">
                <div class="flex items-center gap-2 mb-3">
                    <svg class="w-5 h-5 text-purple-400" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25H12"/>
                    </svg>
                    <h2 class="text-lg font-semibold text-white">Signal Type Breakdown</h2>
                </div>
                <div class="bg-gray-800 rounded-xl border border-gray-700 overflow-hidden">
                    <div class="overflow-x-auto">
                        <table class="w-full text-sm">
                            <thead>
                                <tr class="border-b border-gray-700">
                                    <th class="text-left px-4 py-3 text-xs font-semibold text-gray-500 uppercase tracking-wider">Signal Type</th>
                                    <th class="text-right px-4 py-3 text-xs font-semibold text-gray-500 uppercase tracking-wider">Baseline WR</th>
                                    <th class="text-right px-4 py-3 text-xs font-semibold text-gray-500 uppercase tracking-wider">Current WR</th>
                                    <th class="text-right px-4 py-3 text-xs font-semibold text-gray-500 uppercase tracking-wider">Drop</th>
                                    <th class="text-center px-4 py-3 text-xs font-semibold text-gray-500 uppercase tracking-wider">Status</th>
                                    <th class="text-right px-4 py-3 text-xs font-semibold text-gray-500 uppercase tracking-wider">Avg Return</th>
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-gray-700/50">
                                <template x-for="(row, idx) in data.signal_breakdown" :key="row.signal_type || idx">
                                    <tr class="hover:bg-gray-700/30 transition">
                                        <td class="px-4 py-3">
                                            <span class="text-white font-semibold" x-text="row.signal_type || '-'"></span>
                                        </td>
                                        <td class="px-4 py-3 text-right">
                                            <span class="text-gray-400 tabular-nums" x-text="formatPct(row.baseline_wr)"></span>
                                        </td>
                                        <td class="px-4 py-3 text-right">
                                            <span class="font-semibold tabular-nums"
                                                  :class="wrColor(row.current_wr)"
                                                  x-text="formatPct(row.current_wr)"></span>
                                        </td>
                                        <td class="px-4 py-3 text-right">
                                            <span class="font-semibold tabular-nums"
                                                  :class="dropColor(row.drop)"
                                                  x-text="formatDrop(row.drop)"></span>
                                        </td>
                                        <td class="px-4 py-3 text-center">
                                            <span class="text-[10px] font-bold uppercase tracking-wider px-2 py-0.5 rounded"
                                                  :class="statusBadge(row.status)"
                                                  x-text="row.status || '-'"></span>
                                        </td>
                                        <td class="px-4 py-3 text-right">
                                            <span class="tabular-nums"
                                                  :class="(row.avg_return || 0) >= 0 ? 'text-emerald-400' : 'text-red-400'"
                                                  x-text="formatPercent(row.avg_return)"></span>
                                        </td>
                                    </tr>
                                </template>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <!-- ═══════════════════════════════════════════════════════
                 LOSS STREAK SECTION
                 ═══════════════════════════════════════════════════════ -->
            <div x-show="data.loss_streaks">
                <div class="flex items-center gap-2 mb-3">
                    <svg class="w-5 h-5 text-orange-400" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M15.362 5.214A8.252 8.252 0 0112 21 8.25 8.25 0 016.038 7.048 8.287 8.287 0 009 9.6a8.983 8.983 0 013.361-6.867 8.21 8.21 0 003 2.48z"/>
                        <path stroke-linecap="round" stroke-linejoin="round" d="M12 18a3.75 3.75 0 00.495-7.467 5.99 5.99 0 00-1.925 3.546 5.974 5.974 0 01-2.133-1A3.75 3.75 0 0012 18z"/>
                    </svg>
                    <h2 class="text-lg font-semibold text-white">Loss Streaks</h2>
                </div>
                <div class="grid grid-cols-1 md:grid-cols-3 gap-3">
                    <!-- Max Streak -->
                    <div class="bg-gray-800 rounded-xl border border-gray-700 p-4">
                        <p class="text-xs text-gray-500 uppercase tracking-wider">Max Loss Streak</p>
                        <p class="text-3xl font-extrabold mt-2 tabular-nums"
                           :class="(data.loss_streaks.max_streak || 0) >= 10 ? 'text-red-400' : (data.loss_streaks.max_streak || 0) >= 5 ? 'text-amber-400' : 'text-gray-300'"
                           x-text="data.loss_streaks.max_streak ?? '-'"></p>
                        <p class="text-[10px] text-gray-600 mt-1">Consecutive losses (all time)</p>
                    </div>
                    <!-- Active Streak -->
                    <div class="bg-gray-800 rounded-xl border p-4"
                         :class="(data.loss_streaks.active_streak || 0) >= 5 ? 'border-red-700/50 bg-red-900/10' : 'border-gray-700'">
                        <p class="text-xs text-gray-500 uppercase tracking-wider">Active Streak</p>
                        <div class="flex items-center gap-2 mt-2">
                            <p class="text-3xl font-extrabold tabular-nums"
                               :class="(data.loss_streaks.active_streak || 0) >= 5 ? 'text-red-400 animate-pulse' : (data.loss_streaks.active_streak || 0) >= 3 ? 'text-amber-400' : 'text-emerald-400'"
                               x-text="data.loss_streaks.active_streak ?? '0'"></p>
                            <span x-show="(data.loss_streaks.active_streak || 0) >= 5"
                                  class="text-[10px] font-bold uppercase tracking-wider px-2 py-0.5 rounded bg-red-900/60 text-red-400 border border-red-700/50">
                                DANGER
                            </span>
                        </div>
                        <p class="text-[10px] text-gray-600 mt-1">Current consecutive losses</p>
                    </div>
                    <!-- Avg Streak -->
                    <div class="bg-gray-800 rounded-xl border border-gray-700 p-4">
                        <p class="text-xs text-gray-500 uppercase tracking-wider">Avg Streak Length</p>
                        <p class="text-3xl font-extrabold text-gray-300 mt-2 tabular-nums"
                           x-text="data.loss_streaks.avg_streak != null ? data.loss_streaks.avg_streak.toFixed(1) : '-'"></p>
                        <p class="text-[10px] text-gray-600 mt-1">Average loss streak duration</p>
                    </div>
                </div>
                <!-- Notable Streaks List -->
                <div x-show="data.loss_streaks.notable_streaks && data.loss_streaks.notable_streaks.length > 0"
                     class="mt-3 bg-gray-800 rounded-xl border border-gray-700 p-4">
                    <p class="text-xs text-gray-500 uppercase tracking-wider mb-3">Notable Streaks</p>
                    <div class="space-y-2">
                        <template x-for="(streak, idx) in data.loss_streaks.notable_streaks" :key="idx">
                            <div class="flex items-center gap-3 bg-gray-900/50 rounded-lg px-3 py-2">
                                <span class="text-sm font-bold tabular-nums w-8 text-center"
                                      :class="streak.length >= 8 ? 'text-red-400' : streak.length >= 5 ? 'text-amber-400' : 'text-gray-400'"
                                      x-text="streak.length"></span>
                                <div class="flex-1 h-1.5 bg-gray-800 rounded-full overflow-hidden">
                                    <div class="h-full rounded-full transition-all duration-500"
                                         :class="streak.length >= 8 ? 'bg-red-500' : streak.length >= 5 ? 'bg-amber-500' : 'bg-gray-600'"
                                         :style="'width: ' + Math.min((streak.length / (data.loss_streaks.max_streak || 10)) * 100, 100) + '%'"></div>
                                </div>
                                <span class="text-xs text-gray-500 tabular-nums" x-text="streak.period || '-'"></span>
                                <span class="text-xs tabular-nums"
                                      :class="(streak.pnl || 0) < 0 ? 'text-red-400' : 'text-gray-400'"
                                      x-text="streak.pnl != null ? formatPercent(streak.pnl) : '-'"></span>
                            </div>
                        </template>
                    </div>
                </div>
            </div>

            <!-- ═══════════════════════════════════════════════════════
                 REGIME BREAKDOWN
                 ═══════════════════════════════════════════════════════ -->
            <div x-show="data.regime_breakdown && data.regime_breakdown.length > 0">
                <div class="flex items-center gap-2 mb-3">
                    <svg class="w-5 h-5 text-cyan-400" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 6a7.5 7.5 0 107.5 7.5h-7.5V6z"/>
                        <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 10.5H21A7.5 7.5 0 0013.5 3v7.5z"/>
                    </svg>
                    <h2 class="text-lg font-semibold text-white">Regime Breakdown</h2>
                </div>
                <div class="bg-gray-800 rounded-xl border border-gray-700 p-4">
                    <div class="space-y-3">
                        <template x-for="(regime, idx) in data.regime_breakdown" :key="regime.regime || idx">
                            <div>
                                <div class="flex items-center justify-between mb-1.5">
                                    <div class="flex items-center gap-2">
                                        <span class="w-2.5 h-2.5 rounded-full flex-shrink-0"
                                              :class="regimeDotColor(regime.regime)"></span>
                                        <span class="text-sm font-semibold text-white" x-text="regime.regime || 'Unknown'"></span>
                                        <span class="text-xs text-gray-500 tabular-nums" x-text="'(' + (regime.total ?? 0) + ' signals)'"></span>
                                    </div>
                                    <div class="flex items-center gap-3">
                                        <span class="text-sm font-bold tabular-nums"
                                              :class="wrColor(regime.win_rate)"
                                              x-text="formatPct(regime.win_rate)"></span>
                                        <span class="text-xs tabular-nums"
                                              :class="(regime.avg_return || 0) >= 0 ? 'text-emerald-400' : 'text-red-400'"
                                              x-text="formatPercent(regime.avg_return)"></span>
                                    </div>
                                </div>
                                <!-- Win Rate Bar -->
                                <div class="w-full h-2 bg-gray-900 rounded-full overflow-hidden">
                                    <div class="h-full rounded-full transition-all duration-500"
                                         :class="(regime.win_rate || 0) >= 60 ? 'bg-emerald-500' : (regime.win_rate || 0) >= 45 ? 'bg-amber-500' : 'bg-red-500'"
                                         :style="'width: ' + Math.min(regime.win_rate || 0, 100) + '%'"></div>
                                </div>
                            </div>
                        </template>
                    </div>
                </div>
            </div>

            <!-- ═══════════════════════════════════════════════════════
                 RECOMMENDATIONS
                 ═══════════════════════════════════════════════════════ -->
            <div x-show="data.recommendations && data.recommendations.length > 0">
                <div class="flex items-center gap-2 mb-3">
                    <svg class="w-5 h-5 text-yellow-400" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M12 18v-5.25m0 0a6.01 6.01 0 001.5-.189m-1.5.189a6.01 6.01 0 01-1.5-.189m3.75 7.478a12.06 12.06 0 01-4.5 0m3.75 2.383a14.406 14.406 0 01-3 0M14.25 18v-.192c0-.983.658-1.823 1.508-2.316a7.5 7.5 0 10-7.517 0c.85.493 1.509 1.333 1.509 2.316V18"/>
                    </svg>
                    <h2 class="text-lg font-semibold text-white">Recommendations</h2>
                </div>
                <div class="bg-gray-800 rounded-xl border border-gray-700 p-4">
                    <div class="space-y-2">
                        <template x-for="(rec, idx) in data.recommendations" :key="idx">
                            <div class="flex items-start gap-3 bg-gray-900/50 rounded-lg px-4 py-3">
                                <div class="flex-shrink-0 mt-0.5">
                                    <span class="w-6 h-6 rounded-full flex items-center justify-center text-[10px] font-bold"
                                          :class="recPriorityBadge(rec.priority)"
                                          x-text="idx + 1"></span>
                                </div>
                                <div class="flex-1 min-w-0">
                                    <div class="flex items-center gap-2 flex-wrap">
                                        <span class="text-sm font-semibold text-white" x-text="rec.title || rec.action || '-'"></span>
                                        <span x-show="rec.priority"
                                              class="text-[10px] font-bold uppercase tracking-wider px-1.5 py-0.5 rounded"
                                              :class="recPriorityBadge(rec.priority)"
                                              x-text="rec.priority"></span>
                                    </div>
                                    <p class="text-xs text-gray-400 mt-1" x-text="rec.description || rec.detail || ''"></p>
                                </div>
                                <div x-show="rec.impact" class="flex-shrink-0 text-right">
                                    <p class="text-[10px] text-gray-500 uppercase">Impact</p>
                                    <p class="text-xs font-bold"
                                       :class="rec.impact === 'HIGH' ? 'text-red-400' : rec.impact === 'MEDIUM' ? 'text-amber-400' : 'text-gray-400'"
                                       x-text="rec.impact"></p>
                                </div>
                            </div>
                        </template>
                    </div>
                </div>
            </div>

            <!-- Last Updated -->
            <div class="text-center text-xs text-gray-600 py-2">
                <span x-show="data.generated_at">
                    Data generated: <span x-text="formatDate(data.generated_at)"></span>
                </span>
                <span x-show="data.baseline_period">
                    &bull; Baseline: <span x-text="data.baseline_period"></span>
                </span>
            </div>

        </div>
    </template>
</div>

<script>
function winrateCollapsePanel() {
    return {
        loading: false,
        data: null,
        filters: {
            asset_type: '{{ asset_mode }}' || 'all',
            baseline: '60',
        },

        async fetchData() {
            this.loading = true;
            try {
                const params = new URLSearchParams({
                    asset_type: this.filters.asset_type,
                    baseline: this.filters.baseline,
                });
                const resp = await fetch(`/api/v1/market/winrate-collapse?${params}`);
                if (resp.redirected) { window.location.href = '/auth/login'; return; }
                if (!resp.ok) throw new Error(`HTTP ${resp.status}`);
                const json = await resp.json();
                this.data = json;
            } catch (e) {
                console.error('Win rate collapse fetch error:', e);
                this.data = null;
            } finally {
                this.loading = false;
            }
        },

        // ── Alert Banner Styling ─────────────────────────────
        alertBannerClass(level) {
            const map = {
                'CRITICAL': 'border-red-700/50 bg-red-900/20',
                'WARNING':  'border-amber-700/50 bg-amber-900/20',
                'WATCH':    'border-yellow-700/50 bg-yellow-900/20',
                'HEALTHY':  'border-emerald-700/50 bg-emerald-900/20',
            };
            return map[level] || 'border-gray-700 bg-gray-800';
        },

        alertLevelBadge(level) {
            const map = {
                'CRITICAL': 'bg-red-900/60 text-red-400 border border-red-700/50',
                'WARNING':  'bg-amber-900/60 text-amber-400 border border-amber-700/50',
                'WATCH':    'bg-yellow-900/60 text-yellow-400 border border-yellow-700/50',
                'HEALTHY':  'bg-emerald-900/60 text-emerald-400 border border-emerald-700/50',
            };
            return map[level] || 'bg-gray-700/60 text-gray-400 border border-gray-600/50';
        },

        alertTextColor(level) {
            const map = {
                'CRITICAL': 'text-red-400',
                'WARNING':  'text-amber-400',
                'WATCH':    'text-yellow-400',
                'HEALTHY':  'text-emerald-400',
            };
            return map[level] || 'text-gray-400';
        },

        // ── Status Badge (for rolling windows + signal breakdown) ──
        statusBadge(status) {
            const s = (status || '').toUpperCase();
            if (s === 'CRITICAL' || s === 'COLLAPSED') return 'bg-red-900/60 text-red-400 border border-red-700/50';
            if (s === 'WARNING' || s === 'DEGRADED')   return 'bg-amber-900/60 text-amber-400 border border-amber-700/50';
            if (s === 'WATCH' || s === 'DECLINING')     return 'bg-yellow-900/60 text-yellow-400 border border-yellow-700/50';
            if (s === 'HEALTHY' || s === 'STABLE' || s === 'OK') return 'bg-emerald-900/60 text-emerald-400 border border-emerald-700/50';
            return 'bg-gray-700/60 text-gray-400 border border-gray-600/50';
        },

        // ── Win Rate Color ───────────────────────────────────
        wrColor(wr) {
            if (wr == null) return 'text-gray-400';
            if (wr >= 60) return 'text-emerald-400';
            if (wr >= 50) return 'text-green-400';
            if (wr >= 40) return 'text-amber-400';
            if (wr >= 30) return 'text-orange-400';
            return 'text-red-400';
        },

        // ── Drop Color ───────────────────────────────────────
        dropColor(drop) {
            if (drop == null) return 'text-gray-400';
            const abs = Math.abs(drop);
            if (abs >= 20) return 'text-red-400';
            if (abs >= 10) return 'text-amber-400';
            if (abs >= 5)  return 'text-yellow-400';
            return 'text-gray-400';
        },

        dropBarColor(drop) {
            if (drop == null) return 'bg-gray-600';
            const abs = Math.abs(drop);
            if (abs >= 20) return 'bg-red-500';
            if (abs >= 10) return 'bg-amber-500';
            if (abs >= 5)  return 'bg-yellow-500';
            return 'bg-gray-600';
        },

        // ── Trend Color ──────────────────────────────────────
        trendColor(trend) {
            const map = {
                'IMPROVING':     'text-emerald-400',
                'STABLE':        'text-gray-400',
                'DETERIORATING': 'text-red-400',
                'DECLINING':     'text-amber-400',
            };
            return map[trend] || 'text-gray-400';
        },

        // ── Regime Dot Color ─────────────────────────────────
        regimeDotColor(regime) {
            const r = (regime || '').toLowerCase();
            if (r.includes('bull'))    return 'bg-emerald-400';
            if (r.includes('bear'))    return 'bg-red-400';
            if (r.includes('rang') || r.includes('sideways')) return 'bg-amber-400';
            if (r.includes('volatile') || r.includes('crash')) return 'bg-purple-400';
            if (r.includes('recovery')) return 'bg-cyan-400';
            return 'bg-gray-400';
        },

        // ── Recommendation Priority Badge ────────────────────
        recPriorityBadge(priority) {
            const p = (priority || '').toUpperCase();
            if (p === 'CRITICAL' || p === 'URGENT') return 'bg-red-900/60 text-red-400 border border-red-700/50';
            if (p === 'HIGH')    return 'bg-orange-900/60 text-orange-400 border border-orange-700/50';
            if (p === 'MEDIUM')  return 'bg-amber-900/60 text-amber-400 border border-amber-700/50';
            if (p === 'LOW')     return 'bg-gray-700/60 text-gray-400 border border-gray-600/50';
            return 'bg-gray-700/60 text-gray-400 border border-gray-600/50';
        },

        // ── Formatters ───────────────────────────────────────
        formatPct(val) {
            if (val == null || isNaN(val)) return '-';
            return Number(val).toFixed(1) + '%';
        },

        formatDrop(val) {
            if (val == null || isNaN(val)) return '-';
            const v = Number(val);
            return (v <= 0 ? '' : '+') + v.toFixed(1) + '%';
        },

        formatPercent(val) {
            if (val == null || isNaN(val)) return '-';
            const v = Number(val);
            return (v >= 0 ? '+' : '') + v.toFixed(2) + '%';
        },

        formatDate(iso) {
            if (!iso) return '-';
            try {
                const d = new Date(iso);
                return d.toLocaleDateString('id-ID', { day: '2-digit', month: 'short', year: 'numeric' })
                     + ' ' + d.toLocaleTimeString('id-ID', { hour: '2-digit', minute: '2-digit' });
            } catch { return iso; }
        },
    };
}
</script>
{% endblock %}