{% extends "base.html" %}
{% block title %}Market Breadth{% endblock %}

{% block content %}
<div x-data="marketBreadthPanel()" 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">
                    <span class="text-2xl">&#x1F4CA;</span>
                    Market Breadth
                </h1>
                <p class="text-sm text-gray-500 mt-0.5">Dashboard kesehatan pasar &mdash; advance/decline ratio, RSI distribution, dan breadth indicators.</p>
            </div>
        </div>
        <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-cyan-600 hover:bg-cyan-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>

    <!-- Stats Summary -->
    <div class="grid grid-cols-2 md:grid-cols-4 gap-3">
        <div class="glass rounded-xl border border-gray-800 p-3">
            <p class="text-xs text-gray-500 uppercase tracking-wider">Breadth Score</p>
            <p class="text-xl font-bold mt-1"
               :class="breadthScoreColor(stats.breadth_score)"
               x-text="stats.breadth_score != null ? stats.breadth_score.toFixed(0) + '/100' : '-'"></p>
        </div>
        <div class="glass rounded-xl border border-gray-800 p-3">
            <p class="text-xs text-gray-500 uppercase tracking-wider">Advance / Decline</p>
            <p class="text-xl font-bold mt-1">
                <span class="text-emerald-400" x-text="stats.advancing || 0"></span>
                <span class="text-gray-600 text-sm"> / </span>
                <span class="text-red-400" x-text="stats.declining || 0"></span>
            </p>
        </div>
        <div class="glass rounded-xl border border-gray-800 p-3">
            <p class="text-xs text-gray-500 uppercase tracking-wider">Bullish Ratio</p>
            <p class="text-xl font-bold mt-1"
               :class="(stats.bullish_ratio || 0) >= 60 ? 'text-emerald-400' : (stats.bullish_ratio || 0) >= 40 ? 'text-amber-400' : 'text-red-400'"
               x-text="stats.bullish_ratio != null ? stats.bullish_ratio.toFixed(1) + '%' : '-'"></p>
        </div>
        <div class="glass rounded-xl border border-gray-800 p-3">
            <p class="text-xs text-gray-500 uppercase tracking-wider">Avg RSI</p>
            <p class="text-xl font-bold mt-1"
               :class="rsiColor(stats.avg_rsi)"
               x-text="stats.avg_rsi != null ? stats.avg_rsi.toFixed(1) : '-'"></p>
        </div>
    </div>

    <!-- Filters -->
    <div class="flex flex-wrap items-center gap-2">
        <!-- 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-cyan-500">
            <option value="all">Semua Aset</option>
            <option value="crypto">Kripto</option>
            <option value="stock">Saham IDX</option>
            <option value="stock_us">Saham US</option>
        </select>

        <!-- Timeframe -->
        <select x-model="filters.timeframe" @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-cyan-500">
            <option value="1d">1 Hari</option>
            <option value="7d">7 Hari</option>
            <option value="30d">30 Hari</option>
        </select>
    </div>

    <!-- Loading State -->
    <div x-show="loading" x-cloak class="text-center py-12">
        <svg class="animate-spin h-8 w-8 text-cyan-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">Menganalisis breadth pasar...</p>
    </div>

    <!-- Empty State -->
    <div x-show="!loading && !stats.breadth_score && stats.breadth_score !== 0" x-cloak
         class="text-center py-16 glass rounded-xl border border-gray-800">
        <svg class="mx-auto h-12 w-12 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" 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>
        <h3 class="mt-4 text-lg font-medium text-gray-400">Belum Ada Data Breadth</h3>
        <p class="mt-2 text-sm text-gray-600 max-w-md mx-auto">
            Jalankan scan terlebih dahulu melalui
            <a href="/admin/workflow" class="text-cyan-400 hover:text-cyan-300">Pipeline Workflow</a>
            untuk menghasilkan data analisis.
        </p>
    </div>

    <!-- Dashboard Content -->
    <div x-show="!loading && (stats.breadth_score != null || stats.breadth_score === 0)" x-cloak class="space-y-5">

        <!-- Breadth Score Gauge -->
        <div class="glass rounded-xl border border-gray-800 p-6">
            <div class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-4">Breadth Score Gauge</div>
            <div class="flex items-center justify-center">
                <div class="relative w-64 h-32">
                    <!-- Gauge Background Arc -->
                    <svg class="w-full h-full" viewBox="0 0 200 100">
                        <!-- Background arc -->
                        <path d="M 10 95 A 85 85 0 0 1 190 95" fill="none" stroke="#1f2937" stroke-width="14" stroke-linecap="round"/>
                        <!-- Red zone (0-30) -->
                        <path d="M 10 95 A 85 85 0 0 1 64 22" fill="none" stroke="#ef4444" stroke-width="14" stroke-linecap="round" opacity="0.3"/>
                        <!-- Yellow zone (30-60) -->
                        <path d="M 64 22 A 85 85 0 0 1 136 22" fill="none" stroke="#eab308" stroke-width="14" stroke-linecap="round" opacity="0.3"/>
                        <!-- Green zone (60-100) -->
                        <path d="M 136 22 A 85 85 0 0 1 190 95" fill="none" stroke="#22c55e" stroke-width="14" stroke-linecap="round" opacity="0.3"/>
                        <!-- Active arc -->
                        <path :d="gaugeArc(stats.breadth_score || 0)" fill="none"
                              :stroke="gaugeColor(stats.breadth_score || 0)"
                              stroke-width="14" stroke-linecap="round"
                              class="transition-all duration-1000"/>
                    </svg>
                    <!-- Center Text -->
                    <div class="absolute inset-0 flex flex-col items-center justify-end pb-1">
                        <span class="text-3xl font-bold"
                              :class="breadthScoreColor(stats.breadth_score)"
                              x-text="stats.breadth_score != null ? stats.breadth_score.toFixed(0) : '-'"></span>
                        <span class="text-[10px] text-gray-500 uppercase" x-text="breadthLabel(stats.breadth_score)"></span>
                    </div>
                </div>
            </div>
            <!-- Scale Labels -->
            <div class="flex justify-between px-8 mt-2">
                <span class="text-[10px] text-red-400">0 - Bearish</span>
                <span class="text-[10px] text-amber-400">50 - Neutral</span>
                <span class="text-[10px] text-emerald-400">100 - Bullish</span>
            </div>
        </div>

        <!-- Advance vs Decline Bar + Market Sentiment -->
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
            <!-- Advance vs Decline -->
            <div class="glass rounded-xl border border-gray-800 p-4">
                <div class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-3">Advance vs Decline</div>
                <!-- Stacked bar -->
                <div class="space-y-3">
                    <div>
                        <div class="flex items-center justify-between text-sm mb-1">
                            <span class="text-emerald-400 font-medium">Advancing</span>
                            <span class="text-emerald-400 font-bold" x-text="stats.advancing || 0"></span>
                        </div>
                        <div class="h-4 bg-gray-800 rounded-full overflow-hidden">
                            <div class="h-full bg-emerald-500 rounded-full transition-all duration-700"
                                 :style="'width: ' + advancePct() + '%'"></div>
                        </div>
                    </div>
                    <div>
                        <div class="flex items-center justify-between text-sm mb-1">
                            <span class="text-gray-400 font-medium">Unchanged</span>
                            <span class="text-gray-400 font-bold" x-text="stats.unchanged || 0"></span>
                        </div>
                        <div class="h-4 bg-gray-800 rounded-full overflow-hidden">
                            <div class="h-full bg-gray-500 rounded-full transition-all duration-700"
                                 :style="'width: ' + unchangedPct() + '%'"></div>
                        </div>
                    </div>
                    <div>
                        <div class="flex items-center justify-between text-sm mb-1">
                            <span class="text-red-400 font-medium">Declining</span>
                            <span class="text-red-400 font-bold" x-text="stats.declining || 0"></span>
                        </div>
                        <div class="h-4 bg-gray-800 rounded-full overflow-hidden">
                            <div class="h-full bg-red-500 rounded-full transition-all duration-700"
                                 :style="'width: ' + declinePct() + '%'"></div>
                        </div>
                    </div>
                </div>
                <!-- A/D Ratio -->
                <div class="mt-3 flex items-center justify-between text-sm">
                    <span class="text-gray-500">A/D Ratio</span>
                    <span class="font-bold"
                          :class="(stats.ad_ratio || 0) >= 1 ? 'text-emerald-400' : 'text-red-400'"
                          x-text="stats.ad_ratio != null ? stats.ad_ratio.toFixed(2) : '-'"></span>
                </div>
                <!-- New Highs / New Lows -->
                <div class="mt-2 flex items-center justify-between text-sm">
                    <span class="text-gray-500">New Highs / Lows</span>
                    <span>
                        <span class="text-emerald-400 font-bold" x-text="stats.new_highs || 0"></span>
                        <span class="text-gray-600"> / </span>
                        <span class="text-red-400 font-bold" x-text="stats.new_lows || 0"></span>
                    </span>
                </div>
            </div>

            <!-- RSI Distribution -->
            <div class="glass rounded-xl border border-gray-800 p-4">
                <div class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-3">RSI Distribution</div>
                <div class="space-y-2">
                    <!-- Oversold (0-30) -->
                    <div class="flex items-center gap-3">
                        <span class="text-xs text-gray-400 w-20">Oversold</span>
                        <span class="text-[10px] text-gray-500 w-10">&lt;30</span>
                        <div class="flex-1 h-5 bg-gray-800 rounded-full overflow-hidden">
                            <div class="h-full bg-emerald-500 rounded-full transition-all duration-700 flex items-center justify-end px-2"
                                 :style="'width: ' + rsiDistPct('oversold') + '%'">
                                <span class="text-[10px] text-white font-bold" x-text="rsiDist.oversold || 0" x-show="(rsiDist.oversold || 0) > 0"></span>
                            </div>
                        </div>
                        <span class="text-xs text-emerald-400 font-mono w-8 text-right" x-text="rsiDist.oversold || 0"></span>
                    </div>
                    <!-- Neutral Low (30-45) -->
                    <div class="flex items-center gap-3">
                        <span class="text-xs text-gray-400 w-20">Neutral Low</span>
                        <span class="text-[10px] text-gray-500 w-10">30-45</span>
                        <div class="flex-1 h-5 bg-gray-800 rounded-full overflow-hidden">
                            <div class="h-full bg-cyan-500 rounded-full transition-all duration-700 flex items-center justify-end px-2"
                                 :style="'width: ' + rsiDistPct('neutral_low') + '%'">
                                <span class="text-[10px] text-white font-bold" x-text="rsiDist.neutral_low || 0" x-show="(rsiDist.neutral_low || 0) > 0"></span>
                            </div>
                        </div>
                        <span class="text-xs text-cyan-400 font-mono w-8 text-right" x-text="rsiDist.neutral_low || 0"></span>
                    </div>
                    <!-- Neutral (45-55) -->
                    <div class="flex items-center gap-3">
                        <span class="text-xs text-gray-400 w-20">Neutral</span>
                        <span class="text-[10px] text-gray-500 w-10">45-55</span>
                        <div class="flex-1 h-5 bg-gray-800 rounded-full overflow-hidden">
                            <div class="h-full bg-gray-500 rounded-full transition-all duration-700 flex items-center justify-end px-2"
                                 :style="'width: ' + rsiDistPct('neutral') + '%'">
                                <span class="text-[10px] text-white font-bold" x-text="rsiDist.neutral || 0" x-show="(rsiDist.neutral || 0) > 0"></span>
                            </div>
                        </div>
                        <span class="text-xs text-gray-400 font-mono w-8 text-right" x-text="rsiDist.neutral || 0"></span>
                    </div>
                    <!-- Neutral High (55-70) -->
                    <div class="flex items-center gap-3">
                        <span class="text-xs text-gray-400 w-20">Neutral High</span>
                        <span class="text-[10px] text-gray-500 w-10">55-70</span>
                        <div class="flex-1 h-5 bg-gray-800 rounded-full overflow-hidden">
                            <div class="h-full bg-amber-500 rounded-full transition-all duration-700 flex items-center justify-end px-2"
                                 :style="'width: ' + rsiDistPct('neutral_high') + '%'">
                                <span class="text-[10px] text-white font-bold" x-text="rsiDist.neutral_high || 0" x-show="(rsiDist.neutral_high || 0) > 0"></span>
                            </div>
                        </div>
                        <span class="text-xs text-amber-400 font-mono w-8 text-right" x-text="rsiDist.neutral_high || 0"></span>
                    </div>
                    <!-- Overbought (>70) -->
                    <div class="flex items-center gap-3">
                        <span class="text-xs text-gray-400 w-20">Overbought</span>
                        <span class="text-[10px] text-gray-500 w-10">&gt;70</span>
                        <div class="flex-1 h-5 bg-gray-800 rounded-full overflow-hidden">
                            <div class="h-full bg-red-500 rounded-full transition-all duration-700 flex items-center justify-end px-2"
                                 :style="'width: ' + rsiDistPct('overbought') + '%'">
                                <span class="text-[10px] text-white font-bold" x-text="rsiDist.overbought || 0" x-show="(rsiDist.overbought || 0) > 0"></span>
                            </div>
                        </div>
                        <span class="text-xs text-red-400 font-mono w-8 text-right" x-text="rsiDist.overbought || 0"></span>
                    </div>
                </div>
                <!-- Average RSI -->
                <div class="mt-3 flex items-center justify-between text-sm">
                    <span class="text-gray-500">Average RSI</span>
                    <span class="font-bold" :class="rsiColor(stats.avg_rsi)"
                          x-text="stats.avg_rsi != null ? stats.avg_rsi.toFixed(1) : '-'"></span>
                </div>
            </div>
        </div>

        <!-- Sector Breadth Table -->
        <div class="glass rounded-xl border border-gray-800 p-4">
            <div class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-3">Sector / Category Breadth</div>
            <div class="overflow-x-auto">
                <table class="w-full text-sm">
                    <thead>
                        <tr class="border-b border-gray-800">
                            <th class="text-left text-xs text-gray-500 font-medium py-2 px-3">Sektor</th>
                            <th class="text-center text-xs text-gray-500 font-medium py-2 px-3">Advancing</th>
                            <th class="text-center text-xs text-gray-500 font-medium py-2 px-3">Declining</th>
                            <th class="text-center text-xs text-gray-500 font-medium py-2 px-3">Ratio</th>
                            <th class="text-center text-xs text-gray-500 font-medium py-2 px-3">Avg Change</th>
                            <th class="text-left text-xs text-gray-500 font-medium py-2 px-3 w-32">Breadth</th>
                        </tr>
                    </thead>
                    <tbody>
                        <template x-for="(sector, i) in sectors" :key="sector.name">
                            <tr class="border-b border-gray-800/50 hover:bg-gray-800/30 transition">
                                <td class="py-2 px-3">
                                    <span class="text-white font-medium" x-text="sector.name"></span>
                                </td>
                                <td class="py-2 px-3 text-center">
                                    <span class="text-emerald-400 font-mono" x-text="sector.advancing || 0"></span>
                                </td>
                                <td class="py-2 px-3 text-center">
                                    <span class="text-red-400 font-mono" x-text="sector.declining || 0"></span>
                                </td>
                                <td class="py-2 px-3 text-center">
                                    <span class="font-mono"
                                          :class="(sector.ratio || 0) >= 1 ? 'text-emerald-400' : 'text-red-400'"
                                          x-text="sector.ratio != null ? sector.ratio.toFixed(2) : '-'"></span>
                                </td>
                                <td class="py-2 px-3 text-center">
                                    <span class="font-mono"
                                          :class="(sector.avg_change || 0) >= 0 ? 'text-emerald-400' : 'text-red-400'"
                                          x-text="sector.avg_change != null ? (sector.avg_change >= 0 ? '+' : '') + sector.avg_change.toFixed(2) + '%' : '-'"></span>
                                </td>
                                <td class="py-2 px-3">
                                    <div class="h-2 bg-gray-800 rounded-full overflow-hidden">
                                        <div class="h-full rounded-full transition-all duration-500"
                                             :class="(sector.breadth_pct || 0) >= 60 ? 'bg-emerald-500' : (sector.breadth_pct || 0) >= 40 ? 'bg-amber-500' : 'bg-red-500'"
                                             :style="'width: ' + (sector.breadth_pct || 0) + '%'"></div>
                                    </div>
                                </td>
                            </tr>
                        </template>
                    </tbody>
                </table>
            </div>
            <!-- Empty sector state -->
            <div x-show="sectors.length === 0" class="text-center py-6">
                <p class="text-sm text-gray-600">Tidak ada data sektor tersedia.</p>
            </div>
        </div>

        <!-- Market Indicators Row -->
        <div class="grid grid-cols-2 md:grid-cols-4 gap-3">
            <div class="glass rounded-xl border border-gray-800 p-3 text-center">
                <p class="text-[10px] text-gray-500 uppercase tracking-wider">Above MA50</p>
                <p class="text-lg font-bold mt-1"
                   :class="(stats.above_ma50_pct || 0) >= 50 ? 'text-emerald-400' : 'text-red-400'"
                   x-text="stats.above_ma50_pct != null ? stats.above_ma50_pct.toFixed(0) + '%' : '-'"></p>
            </div>
            <div class="glass rounded-xl border border-gray-800 p-3 text-center">
                <p class="text-[10px] text-gray-500 uppercase tracking-wider">Above MA200</p>
                <p class="text-lg font-bold mt-1"
                   :class="(stats.above_ma200_pct || 0) >= 50 ? 'text-emerald-400' : 'text-red-400'"
                   x-text="stats.above_ma200_pct != null ? stats.above_ma200_pct.toFixed(0) + '%' : '-'"></p>
            </div>
            <div class="glass rounded-xl border border-gray-800 p-3 text-center">
                <p class="text-[10px] text-gray-500 uppercase tracking-wider">52W High</p>
                <p class="text-lg font-bold text-emerald-400 mt-1" x-text="stats.at_52w_high || 0"></p>
            </div>
            <div class="glass rounded-xl border border-gray-800 p-3 text-center">
                <p class="text-[10px] text-gray-500 uppercase tracking-wider">52W Low</p>
                <p class="text-lg font-bold text-red-400 mt-1" x-text="stats.at_52w_low || 0"></p>
            </div>
        </div>

        <!-- Breadth History Sparkline -->
        <div class="glass rounded-xl border border-gray-800 p-4">
            <div class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-3">Breadth Trend (7 Hari Terakhir)</div>
            <div class="flex items-end gap-1 h-24">
                <template x-for="(point, i) in breadthHistory" :key="i">
                    <div class="flex-1 flex flex-col items-center gap-1">
                        <div class="w-full rounded-t transition-all duration-500"
                             :class="point.score >= 60 ? 'bg-emerald-500' : point.score >= 40 ? 'bg-amber-500' : 'bg-red-500'"
                             :style="'height: ' + (point.score || 0) + '%'"></div>
                        <span class="text-[9px] text-gray-600" x-text="point.label || ''"></span>
                    </div>
                </template>
            </div>
            <div x-show="breadthHistory.length === 0" class="text-center py-6">
                <p class="text-sm text-gray-600">Belum ada data history breadth.</p>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
function marketBreadthPanel() {
    return {
        loading: false,
        filters: {
            asset_type: '{{ asset_mode }}',
            timeframe: '1d',
        },
        stats: {
            breadth_score: null, advancing: 0, declining: 0, unchanged: 0,
            bullish_ratio: null, avg_rsi: null, ad_ratio: null,
            new_highs: 0, new_lows: 0,
            above_ma50_pct: null, above_ma200_pct: null,
            at_52w_high: 0, at_52w_low: 0,
        },
        sectors: [],
        rsiDist: { oversold: 0, neutral_low: 0, neutral: 0, neutral_high: 0, overbought: 0 },
        breadthHistory: [],

        async fetchData() {
            this.loading = true;
            try {
                const params = new URLSearchParams({
                    asset_type: this.filters.asset_type,
                    timeframe: this.filters.timeframe,
                });
                const resp = await fetch(`/api/v1/market/market-breadth?${params}`);
                if (!resp.ok) throw new Error(`HTTP ${resp.status}`);
                const d = await resp.json();
                this.stats = d.stats || this.stats;
                this.sectors = d.sectors || [];
                this.rsiDist = d.rsi_distribution || this.rsiDist;
                this.breadthHistory = d.breadth_history || [];
            } catch (e) {
                console.error('Fetch error:', e);
            } finally {
                this.loading = false;
            }
        },

        breadthScoreColor(score) {
            if (score == null) return 'text-gray-400';
            if (score >= 70) return 'text-emerald-400';
            if (score >= 50) return 'text-cyan-400';
            if (score >= 30) return 'text-amber-400';
            return 'text-red-400';
        },

        breadthLabel(score) {
            if (score == null) return '';
            if (score >= 70) return 'Bullish';
            if (score >= 50) return 'Slightly Bullish';
            if (score >= 30) return 'Slightly Bearish';
            return 'Bearish';
        },

        rsiColor(rsi) {
            if (rsi == null) return 'text-gray-400';
            if (rsi >= 70) return 'text-red-400';
            if (rsi >= 55) return 'text-amber-400';
            if (rsi >= 45) return 'text-gray-300';
            if (rsi >= 30) return 'text-cyan-400';
            return 'text-emerald-400';
        },

        advancePct() {
            const total = (this.stats.advancing || 0) + (this.stats.declining || 0) + (this.stats.unchanged || 0);
            return total > 0 ? ((this.stats.advancing || 0) / total * 100).toFixed(1) : 0;
        },

        unchangedPct() {
            const total = (this.stats.advancing || 0) + (this.stats.declining || 0) + (this.stats.unchanged || 0);
            return total > 0 ? ((this.stats.unchanged || 0) / total * 100).toFixed(1) : 0;
        },

        declinePct() {
            const total = (this.stats.advancing || 0) + (this.stats.declining || 0) + (this.stats.unchanged || 0);
            return total > 0 ? ((this.stats.declining || 0) / total * 100).toFixed(1) : 0;
        },

        rsiDistPct(key) {
            const total = Object.values(this.rsiDist).reduce((a, b) => a + (b || 0), 0);
            return total > 0 ? ((this.rsiDist[key] || 0) / total * 100).toFixed(1) : 0;
        },

        gaugeArc(score) {
            const pct = Math.max(0, Math.min(100, score)) / 100;
            const startAngle = Math.PI;
            const endAngle = startAngle + (Math.PI * pct);
            const cx = 100, cy = 95, r = 85;
            const x1 = cx + r * Math.cos(startAngle);
            const y1 = cy + r * Math.sin(startAngle);
            const x2 = cx + r * Math.cos(endAngle);
            const y2 = cy + r * Math.sin(endAngle);
            const largeArc = pct > 0.5 ? 1 : 0;
            return `M ${x1} ${y1} A ${r} ${r} 0 ${largeArc} 1 ${x2} ${y2}`;
        },

        gaugeColor(score) {
            if (score >= 70) return '#22c55e';
            if (score >= 50) return '#06b6d4';
            if (score >= 30) return '#eab308';
            return '#ef4444';
        },
    };
}
</script>
{% endblock %}