{% extends "base.html" %}
{% block title %}Sector Rotation{% endblock %}

{% block content %}
<div x-data="sectorRotationApp()" x-init="init()" class="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="M19.5 12c0-1.232-.046-2.453-.138-3.662a4.006 4.006 0 00-3.7-3.7 48.678 48.678 0 00-7.324 0 4.006 4.006 0 00-3.7 3.7c-.017.22-.032.441-.046.662M19.5 12l3-3m-3 3l-3-3m-12 3c0 1.232.046 2.453.138 3.662a4.006 4.006 0 003.7 3.7 48.656 48.656 0 007.324 0 4.006 4.006 0 003.7-3.7c.017-.22.032-.441.046-.662M4.5 12l3 3m-3-3l-3 3"/>
                </svg>
                Sector Rotation
            </h1>
            <p class="mt-1 text-sm text-gray-400">Sector-level performance analysis &#8212; identify which sectors money is flowing into and out of</p>
        </div>
        <div class="flex items-center gap-3">
            <span class="text-xs text-gray-500" x-text="lastRefresh ? 'Updated: ' + lastRefresh : ''"></span>
            <button @click="fetchData()" :disabled="loading"
                    class="px-4 py-2 text-sm bg-koin-600 hover:bg-koin-500 text-white rounded-lg transition disabled:opacity-50 font-medium">
                <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>

    <!-- Loading -->
    <div x-show="loading" x-cloak class="flex items-center justify-center py-16">
        <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 12h4z"/>
            </svg>
            <p class="text-sm text-gray-500">Analyzing sector rotation patterns...</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>

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

        <!-- Summary 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-5">
                <p class="text-xs text-gray-400 uppercase tracking-wider">Total Sectors</p>
                <p class="text-2xl font-bold text-white mt-1" x-text="data.total_sectors || sectors.length || 0"></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">Leading Sector</p>
                <p class="text-lg font-bold text-emerald-400 mt-1 truncate" x-text="data.leading_sector || '-'"></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">Rotation Clarity</p>
                <p class="text-2xl font-bold mt-1"
                   :class="(data.rotation_clarity||0) >= 70 ? 'text-emerald-400' : (data.rotation_clarity||0) >= 40 ? 'text-amber-400' : 'text-red-400'"
                   x-text="fmt(data.rotation_clarity, 0) + '/100'"></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">Recommended Action</p>
                <p class="text-sm font-bold text-koin-400 mt-1 leading-tight" x-text="data.recommended_action || '-'"></p>
            </div>
        </div>

        <!-- Rotation Clarity Score Display -->
        <div class="bg-gray-800 border border-gray-700 rounded-xl p-6 mb-6">
            <div class="flex items-center justify-between mb-3">
                <h3 class="text-sm font-semibold text-gray-300 uppercase tracking-wider">Rotation Clarity Score</h3>
                <span class="text-3xl font-extrabold tabular-nums"
                      :class="(data.rotation_clarity||0) >= 70 ? 'text-emerald-400' : (data.rotation_clarity||0) >= 40 ? 'text-amber-400' : 'text-red-400'"
                      x-text="fmt(data.rotation_clarity, 0)"></span>
            </div>
            <div class="w-full h-3 bg-gray-900 rounded-full overflow-hidden">
                <div class="h-full rounded-full transition-all duration-700"
                     :class="(data.rotation_clarity||0) >= 70 ? 'bg-emerald-500' : (data.rotation_clarity||0) >= 40 ? 'bg-amber-500' : 'bg-red-500'"
                     :style="'width:' + Math.min(data.rotation_clarity||0, 100) + '%'"></div>
            </div>
            <div class="flex justify-between text-[10px] text-gray-600 mt-1">
                <span>No Clear Rotation</span>
                <span>Strong Rotation Signal</span>
            </div>
        </div>

        <!-- Info Box -->
        <div class="bg-koin-900/15 border border-koin-700/25 rounded-xl p-4 mb-6">
            <div class="flex items-start gap-3">
                <svg class="w-5 h-5 text-koin-400 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                <div>
                    <h4 class="text-sm font-medium text-koin-300">Sector Rotation Strategy</h4>
                    <p class="text-xs text-gray-400 mt-1">Money flows from sector to sector in predictable patterns. As one sector peaks, capital rotates into the next. By identifying which sectors are gaining momentum (leading) and which are losing (lagging), you can position ahead of the rotation. A high clarity score means the rotation pattern is well-defined and actionable.</p>
                </div>
            </div>
        </div>

        <!-- Sector Ranking Table -->
        <div class="bg-gray-800 border border-gray-700 rounded-xl overflow-hidden mb-6">
            <div class="px-5 py-4 border-b border-gray-700">
                <h3 class="text-sm font-semibold text-gray-300 uppercase tracking-wider">Sector Rankings</h3>
            </div>
            <div class="overflow-x-auto">
                <table class="w-full text-sm">
                    <thead>
                        <tr class="border-b border-gray-700 text-gray-400 text-xs uppercase tracking-wider">
                            <th class="px-4 py-3 text-left font-medium">Rank</th>
                            <th class="px-4 py-3 text-left font-medium">Sector</th>
                            <th class="px-4 py-3 text-center font-medium">Coins</th>
                            <th class="px-4 py-3 text-right font-medium">24h Avg</th>
                            <th class="px-4 py-3 text-right font-medium">7d Avg</th>
                            <th class="px-4 py-3 text-center font-medium">Breadth %</th>
                            <th class="px-4 py-3 text-right font-medium">Momentum</th>
                            <th class="px-4 py-3 text-right font-medium">Score</th>
                            <th class="px-4 py-3 text-center font-medium">Direction</th>
                        </tr>
                    </thead>
                    <tbody>
                        <template x-for="(s, idx) in sectors" :key="s.sector || idx">
                            <tr class="border-b border-gray-700/50 hover:bg-gray-750 transition"
                                :class="idx < leadingCount ? 'bg-emerald-900/5' : idx >= sectors.length - laggingCount ? 'bg-red-900/5' : ''">
                                <td class="px-4 py-3">
                                    <span class="inline-flex items-center justify-center w-7 h-7 rounded-full text-xs font-bold"
                                          :class="idx === 0 ? 'bg-koin-600 text-white' : idx === 1 ? 'bg-gray-600 text-white' : idx === 2 ? 'bg-amber-700 text-white' : 'bg-gray-800 text-gray-400'"
                                          x-text="idx + 1"></span>
                                </td>
                                <td class="px-4 py-3">
                                    <span class="text-white font-bold" x-text="s.sector || s.name"></span>
                                </td>
                                <td class="px-4 py-3 text-center text-gray-400" x-text="s.coin_count || 0"></td>
                                <td class="px-4 py-3 text-right tabular-nums font-medium"
                                    :class="(s.avg_change_24h||0) >= 0 ? 'text-emerald-400' : 'text-red-400'"
                                    x-text="fmtPct(s.avg_change_24h)"></td>
                                <td class="px-4 py-3 text-right tabular-nums font-medium"
                                    :class="(s.avg_change_7d||0) >= 0 ? 'text-emerald-400' : 'text-red-400'"
                                    x-text="fmtPct(s.avg_change_7d)"></td>
                                <td class="px-4 py-3 text-center">
                                    <div class="flex items-center gap-1 justify-center">
                                        <div class="w-12 h-1.5 bg-gray-700 rounded-full overflow-hidden">
                                            <div class="h-full rounded-full"
                                                 :class="(s.breadth_pct||0) >= 60 ? 'bg-emerald-500' : (s.breadth_pct||0) >= 40 ? 'bg-amber-500' : 'bg-red-500'"
                                                 :style="'width:' + Math.min(s.breadth_pct||0, 100) + '%'"></div>
                                        </div>
                                        <span class="text-xs text-gray-300 tabular-nums" x-text="fmt(s.breadth_pct, 0) + '%'"></span>
                                    </div>
                                </td>
                                <td class="px-4 py-3 text-right tabular-nums"
                                    :class="(s.momentum||0) >= 0 ? 'text-emerald-400' : 'text-red-400'"
                                    x-text="fmt(s.momentum, 1)"></td>
                                <td class="px-4 py-3 text-right">
                                    <div class="flex items-center gap-1 justify-end">
                                        <div class="w-16 h-2 bg-gray-700 rounded-full overflow-hidden">
                                            <div class="h-full rounded-full"
                                                 :class="(s.composite_score||0) >= 70 ? 'bg-emerald-500' : (s.composite_score||0) >= 40 ? 'bg-amber-500' : 'bg-red-500'"
                                                 :style="'width:' + Math.min(s.composite_score||0, 100) + '%'"></div>
                                        </div>
                                        <span class="text-xs font-bold tabular-nums"
                                              :class="(s.composite_score||0) >= 70 ? 'text-emerald-400' : (s.composite_score||0) >= 40 ? 'text-amber-400' : 'text-red-400'"
                                              x-text="fmt(s.composite_score, 0)"></span>
                                    </div>
                                </td>
                                <td class="px-4 py-3 text-center">
                                    <span class="text-xs px-2 py-0.5 rounded-full font-semibold"
                                          :class="(s.direction||'') === 'gaining' ? 'bg-emerald-900/50 text-emerald-400' : (s.direction||'') === 'losing' ? 'bg-red-900/50 text-red-400' : 'bg-gray-700 text-gray-400'"
                                          x-text="(s.direction||'stable') === 'gaining' ? 'Gaining' : (s.direction||'stable') === 'losing' ? 'Losing' : 'Stable'"></span>
                                </td>
                            </tr>
                        </template>
                    </tbody>
                </table>
            </div>
        </div>

        <!-- Leading vs Lagging Highlight -->
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
            <div class="bg-gray-800 border border-emerald-800/40 rounded-xl p-5">
                <h4 class="text-xs font-semibold text-emerald-400 uppercase tracking-wider mb-3">Leading Sectors (Gaining)</h4>
                <div class="space-y-2">
                    <template x-for="s in leadingSectors" :key="'lead_' + s.sector">
                        <div class="flex items-center justify-between bg-emerald-900/10 rounded-lg px-3 py-2">
                            <span class="text-sm text-white font-bold" x-text="s.sector || s.name"></span>
                            <div class="flex items-center gap-3">
                                <span class="text-xs text-emerald-400 tabular-nums" x-text="fmtPct(s.avg_change_7d)"></span>
                                <span class="text-xs font-bold text-emerald-400" x-text="fmt(s.composite_score, 0)"></span>
                            </div>
                        </div>
                    </template>
                    <div x-show="leadingSectors.length === 0" class="text-xs text-gray-500 text-center py-2">No leading sectors detected</div>
                </div>
            </div>
            <div class="bg-gray-800 border border-red-800/40 rounded-xl p-5">
                <h4 class="text-xs font-semibold text-red-400 uppercase tracking-wider mb-3">Lagging Sectors (Losing)</h4>
                <div class="space-y-2">
                    <template x-for="s in laggingSectors" :key="'lag_' + s.sector">
                        <div class="flex items-center justify-between bg-red-900/10 rounded-lg px-3 py-2">
                            <span class="text-sm text-white font-bold" x-text="s.sector || s.name"></span>
                            <div class="flex items-center gap-3">
                                <span class="text-xs text-red-400 tabular-nums" x-text="fmtPct(s.avg_change_7d)"></span>
                                <span class="text-xs font-bold text-red-400" x-text="fmt(s.composite_score, 0)"></span>
                            </div>
                        </div>
                    </template>
                    <div x-show="laggingSectors.length === 0" class="text-xs text-gray-500 text-center py-2">No lagging sectors detected</div>
                </div>
            </div>
        </div>

        <!-- Top Coins per Leading Sector -->
        <div x-show="leadingSectors.length > 0" class="bg-gray-800 border border-gray-700 rounded-xl p-5">
            <h3 class="text-sm font-semibold text-gray-300 uppercase tracking-wider mb-4">Top Coins in Leading Sectors</h3>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <template x-for="s in leadingSectors.slice(0,4)" :key="'top_' + s.sector">
                    <div class="bg-gray-900/50 rounded-lg p-3">
                        <p class="text-xs text-koin-400 font-semibold uppercase tracking-wider mb-2" x-text="s.sector || s.name"></p>
                        <div class="space-y-1.5">
                            <template x-for="tc in (s.top_coins || []).slice(0,5)" :key="tc.symbol">
                                <div class="flex items-center justify-between">
                                    <span class="text-xs text-white font-medium" x-text="tc.symbol"></span>
                                    <div class="flex items-center gap-2">
                                        <span class="text-xs tabular-nums"
                                              :class="(tc.change_24h||0) >= 0 ? 'text-emerald-400' : 'text-red-400'"
                                              x-text="fmtPct(tc.change_24h)"></span>
                                        <span class="text-[10px] text-gray-500 tabular-nums" x-text="'Score ' + fmt(tc.score, 0)"></span>
                                    </div>
                                </div>
                            </template>
                            <div x-show="!(s.top_coins || []).length" class="text-[10px] text-gray-600">No coin data</div>
                        </div>
                    </div>
                </template>
            </div>
        </div>
    </div>

    <!-- Empty State -->
    <div x-show="!loading && !error && !data" x-cloak class="text-center py-16 bg-gray-800 border border-gray-700 rounded-xl">
        <svg class="mx-auto h-12 w-12 text-gray-600 mb-4" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 12c0-1.232-.046-2.453-.138-3.662a4.006 4.006 0 00-3.7-3.7 48.678 48.678 0 00-7.324 0 4.006 4.006 0 00-3.7 3.7c-.017.22-.032.441-.046.662M19.5 12l3-3m-3 3l-3-3m-12 3c0 1.232.046 2.453.138 3.662a4.006 4.006 0 003.7 3.7 48.656 48.656 0 007.324 0 4.006 4.006 0 003.7-3.7c.017-.22.032-.441.046-.662M4.5 12l3 3m-3-3l-3 3"/>
        </svg>
        <h3 class="text-lg font-medium text-gray-400">No Sector Data</h3>
        <p class="mt-2 text-sm text-gray-600">Run analysis via <a href="/admin/workflow" class="text-koin-400 hover:text-koin-300">Pipeline Workflow</a> first.</p>
    </div>
</div>

<script>
function sectorRotationApp() {
    return {
        loading: false,
        error: null,
        lastRefresh: null,
        data: null,
        sectors: [],
        leadingCount: 3,
        laggingCount: 3,

        init() { this.fetchData(); },

        async fetchData() {
            this.loading = true;
            this.error = null;
            try {
                const res = await fetch('/api/v1/market/sector-rotation?asset_type={{ asset_mode }}');
                if (res.redirected) { window.location.href = res.url; return; }
                const json = await res.json();
                if (json.error) { this.error = json.error; }
                else {
                    this.data = json.data || json;
                    this.sectors = this.data.sectors || this.data.items || [];
                    this.sectors.sort((a, b) => (b.composite_score || 0) - (a.composite_score || 0));
                }
            } catch (e) {
                this.error = e.message;
            } finally {
                this.loading = false;
                this.lastRefresh = new Date().toLocaleTimeString('id-ID');
            }
        },

        get leadingSectors() {
            return this.sectors.filter(s => (s.direction || '') === 'gaining' || (s.composite_score || 0) >= 60).slice(0, 5);
        },

        get laggingSectors() {
            return [...this.sectors].reverse().filter(s => (s.direction || '') === 'losing' || (s.composite_score || 0) < 30).slice(0, 5);
        },

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