{% extends "base.html" %}
{% block title %}Cross-Asset Correlation{% endblock %}

{% block content %}
<div x-data="crossAssetApp()" x-init="init()" class="space-y-6">
    <!-- Header -->
    <div class="flex items-center justify-between">
        <div>
            <h1 class="text-2xl font-bold text-white">Cross-Asset Correlation</h1>
            <p class="mt-1 text-sm text-gray-400">Analisis korelasi, divergensi, dan regime antar aset</p>
        </div>
        <div class="flex items-center gap-3">
            <span class="text-xs text-gray-500" x-text="lastRefresh ? 'Last refresh: ' + lastRefresh : ''"></span>
            <button @click="fetchData()" :disabled="loading"
                    class="px-3 py-1.5 text-xs bg-gray-800 hover:bg-gray-700 text-gray-300 rounded-lg transition disabled:opacity-50">
                Refresh
            </button>
        </div>
    </div>

    <!-- Loading State -->
    <div x-show="loading" 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 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"/>
            </svg>
            <p class="text-sm text-gray-400">Calculating cross-asset correlations...</p>
        </div>
    </div>

    <template x-if="!loading && data">
        <div class="space-y-6">
            <!-- Summary Cards -->
            <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
                <div class="bg-gray-900 border border-gray-800 rounded-xl p-4">
                    <p class="text-xs text-gray-500 uppercase tracking-wider">Avg Corr. to BTC</p>
                    <p class="text-2xl font-bold mt-1"
                       :class="(data.summary?.avg_correlation || 0) > 0.5 ? 'text-emerald-400' : (data.summary?.avg_correlation || 0) > 0 ? 'text-amber-400' : 'text-red-400'"
                       x-text="fmt(data.summary?.avg_correlation)"></p>
                </div>
                <div class="bg-gray-900 border border-gray-800 rounded-xl p-4">
                    <p class="text-xs text-gray-500 uppercase tracking-wider">Decoupling Signals</p>
                    <p class="text-2xl font-bold text-amber-400 mt-1" x-text="data.summary?.decoupling_signals || 0"></p>
                </div>
                <div class="bg-gray-900 border border-gray-800 rounded-xl p-4">
                    <p class="text-xs text-gray-500 uppercase tracking-wider">Leading Assets</p>
                    <p class="text-2xl font-bold text-koin-400 mt-1" x-text="data.summary?.leading_assets || 0"></p>
                </div>
                <div class="bg-gray-900 border border-gray-800 rounded-xl p-4">
                    <p class="text-xs text-gray-500 uppercase tracking-wider">Market Regime</p>
                    <p class="text-xl font-bold mt-1">
                        <span class="px-2 py-0.5 rounded-full text-sm"
                              :class="(data.summary?.regime || '').toLowerCase() === 'correlated' ? 'bg-emerald-900/50 text-emerald-400' : 'bg-amber-900/50 text-amber-400'"
                              x-text="data.summary?.regime || '-'"></span>
                    </p>
                </div>
            </div>

            <!-- Benchmark Info -->
            <div class="bg-gray-900 border border-gray-800 rounded-xl p-4 flex items-center justify-between" x-show="data.benchmark">
                <div class="flex items-center gap-3">
                    <div class="w-8 h-8 rounded-full bg-amber-900/50 flex items-center justify-center">
                        <span class="text-sm font-bold text-amber-400">B</span>
                    </div>
                    <div>
                        <p class="text-sm font-medium text-white">Benchmark: <span x-text="data.benchmark?.name || 'BTC'"></span></p>
                        <p class="text-xs text-gray-500" x-text="data.benchmark?.symbol || 'BTC'"></p>
                    </div>
                </div>
                <div class="text-right">
                    <p class="text-sm font-mono text-white" x-text="'$' + fmtPrice(data.benchmark?.price)"></p>
                    <p class="text-xs font-mono"
                       :class="(data.benchmark?.change_24h || 0) >= 0 ? 'text-emerald-400' : 'text-red-400'"
                       x-text="((data.benchmark?.change_24h || 0) >= 0 ? '+' : '') + fmt(data.benchmark?.change_24h) + '%'"></p>
                </div>
            </div>

            <!-- Tabs -->
            <div class="flex gap-1 border-b border-gray-800">
                <button @click="tab = 'correlations'"
                        class="px-4 py-2 text-sm font-medium border-b-2 transition"
                        :class="tab === 'correlations' ? 'border-koin-500 text-koin-400' : 'border-transparent text-gray-500 hover:text-gray-300'">
                    Correlations
                </button>
                <button @click="tab = 'divergences'"
                        class="px-4 py-2 text-sm font-medium border-b-2 transition"
                        :class="tab === 'divergences' ? 'border-koin-500 text-koin-400' : 'border-transparent text-gray-500 hover:text-gray-300'">
                    Divergences
                </button>
                <button @click="tab = 'matrix'"
                        class="px-4 py-2 text-sm font-medium border-b-2 transition"
                        :class="tab === 'matrix' ? 'border-koin-500 text-koin-400' : 'border-transparent text-gray-500 hover:text-gray-300'">
                    Matrix
                </button>
            </div>

            <!-- Correlations Tab -->
            <div x-show="tab === 'correlations'" class="bg-gray-900 border border-gray-800 rounded-xl p-6">
                <h2 class="text-lg font-semibold text-white mb-4">Asset Correlations</h2>
                <div class="overflow-x-auto">
                    <table class="w-full text-sm">
                        <thead class="text-xs text-gray-500 uppercase bg-gray-900/50">
                            <tr>
                                <th class="px-3 py-2 text-left">Symbol</th>
                                <th class="px-3 py-2 text-left w-48">Correlation</th>
                                <th class="px-3 py-2 text-right">Beta</th>
                                <th class="px-3 py-2 text-right">Rel. Strength %</th>
                                <th class="px-3 py-2 text-center">Signal</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-gray-800">
                            <template x-for="item in data.correlations || []" :key="item.symbol">
                                <tr class="hover:bg-gray-800/50 transition">
                                    <td class="px-3 py-2.5 text-left font-medium text-white" x-text="item.symbol"></td>
                                    <td class="px-3 py-2.5">
                                        <div class="flex items-center gap-2">
                                            <div class="flex-1 h-3 bg-gray-800 rounded-full overflow-hidden relative">
                                                <!-- Center marker (0 correlation) -->
                                                <div class="absolute top-0 bottom-0 w-px bg-gray-600 left-1/2"></div>
                                                <!-- Correlation bar -->
                                                <div class="absolute top-0 bottom-0 rounded-full"
                                                     :class="(item.correlation || 0) >= 0 ? 'bg-emerald-500/70' : 'bg-red-500/70'"
                                                     :style="corrBarStyle(item.correlation)"></div>
                                            </div>
                                            <span class="text-xs font-mono w-10 text-right"
                                                  :class="(item.correlation || 0) >= 0 ? 'text-emerald-400' : 'text-red-400'"
                                                  x-text="fmt(item.correlation)"></span>
                                        </div>
                                    </td>
                                    <td class="px-3 py-2.5 text-right font-mono text-gray-300" x-text="fmt(item.beta)"></td>
                                    <td class="px-3 py-2.5 text-right font-mono"
                                        :class="(item.relative_strength || 0) >= 0 ? 'text-emerald-400' : 'text-red-400'"
                                        x-text="((item.relative_strength || 0) >= 0 ? '+' : '') + fmt(item.relative_strength) + '%'"></td>
                                    <td class="px-3 py-2.5 text-center">
                                        <span class="text-xs px-2 py-0.5 rounded-full"
                                              :class="signalBadge(item.signal)"
                                              x-text="item.signal || '-'"></span>
                                    </td>
                                </tr>
                            </template>
                        </tbody>
                    </table>
                </div>
                <p x-show="!data.correlations || data.correlations.length === 0" class="text-sm text-gray-500 text-center py-8">No correlation data.</p>
            </div>

            <!-- Divergences Tab -->
            <div x-show="tab === 'divergences'" class="bg-gray-900 border border-gray-800 rounded-xl p-6">
                <h2 class="text-lg font-semibold text-white mb-1">Divergences from Benchmark</h2>
                <p class="text-sm text-gray-400 mb-4">Aset yang bergerak berlawanan arah dari benchmark</p>
                <div class="overflow-x-auto">
                    <table class="w-full text-sm">
                        <thead class="text-xs text-gray-500 uppercase bg-gray-900/50">
                            <tr>
                                <th class="px-3 py-2 text-left">Symbol</th>
                                <th class="px-3 py-2 text-center">Expected Dir.</th>
                                <th class="px-3 py-2 text-center">Actual Dir.</th>
                                <th class="px-3 py-2 text-right">Div. Strength</th>
                                <th class="px-3 py-2 text-right">Duration</th>
                                <th class="px-3 py-2 text-center">Trading Signal</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-gray-800">
                            <template x-for="item in data.divergences || []" :key="item.symbol + '-div'">
                                <tr class="hover:bg-gray-800/50 transition">
                                    <td class="px-3 py-2.5 text-left font-medium text-white" x-text="item.symbol"></td>
                                    <td class="px-3 py-2.5 text-center">
                                        <span class="text-xs px-2 py-0.5 rounded-full"
                                              :class="item.expected_direction === 'up' ? 'bg-emerald-900/50 text-emerald-400' : 'bg-red-900/50 text-red-400'"
                                              x-text="item.expected_direction === 'up' ? '&#8593; Up' : '&#8595; Down'"></span>
                                    </td>
                                    <td class="px-3 py-2.5 text-center">
                                        <span class="text-xs px-2 py-0.5 rounded-full"
                                              :class="item.actual_direction === 'up' ? 'bg-emerald-900/50 text-emerald-400' : 'bg-red-900/50 text-red-400'"
                                              x-text="item.actual_direction === 'up' ? '&#8593; Up' : '&#8595; Down'"></span>
                                    </td>
                                    <td class="px-3 py-2.5 text-right font-mono"
                                        :class="(item.divergence_strength || 0) > 50 ? 'text-amber-400 font-semibold' : 'text-gray-300'"
                                        x-text="fmt(item.divergence_strength) + '%'"></td>
                                    <td class="px-3 py-2.5 text-right font-mono text-gray-400" x-text="(item.duration || 0) + ' bars'"></td>
                                    <td class="px-3 py-2.5 text-center">
                                        <span class="text-xs px-2 py-0.5 rounded-full"
                                              :class="signalBadge(item.trading_signal)"
                                              x-text="item.trading_signal || '-'"></span>
                                    </td>
                                </tr>
                            </template>
                        </tbody>
                    </table>
                </div>
                <p x-show="!data.divergences || data.divergences.length === 0" class="text-sm text-gray-500 text-center py-8">No divergences detected.</p>
            </div>

            <!-- Matrix Tab -->
            <div x-show="tab === 'matrix'" class="bg-gray-900 border border-gray-800 rounded-xl p-6">
                <h2 class="text-lg font-semibold text-white mb-1">Correlation Matrix</h2>
                <p class="text-sm text-gray-400 mb-4">NxN heatmap korelasi antar aset. Hover cell untuk detail.</p>
                <div class="overflow-x-auto">
                    <template x-if="data.matrix && data.matrix.labels && data.matrix.labels.length > 0">
                        <div>
                            <!-- Matrix Grid -->
                            <div class="inline-block">
                                <!-- Header row -->
                                <div class="flex">
                                    <div class="w-16 h-8 flex-shrink-0"></div>
                                    <template x-for="(label, ci) in data.matrix.labels" :key="'mh-' + ci">
                                        <div class="w-12 h-8 flex items-end justify-center flex-shrink-0">
                                            <span class="text-[9px] text-gray-500 -rotate-45 origin-bottom-left whitespace-nowrap"
                                                  x-text="label"></span>
                                        </div>
                                    </template>
                                </div>
                                <!-- Data rows -->
                                <template x-for="(row, ri) in data.matrix.values" :key="'mr-' + ri">
                                    <div class="flex">
                                        <div class="w-16 h-10 flex items-center justify-end pr-2 flex-shrink-0">
                                            <span class="text-[10px] text-gray-400 font-mono truncate" x-text="data.matrix.labels[ri]"></span>
                                        </div>
                                        <template x-for="(val, ci) in row" :key="'mc-' + ri + '-' + ci">
                                            <div class="w-12 h-10 flex items-center justify-center flex-shrink-0 border border-gray-800/50 text-[10px] font-mono cursor-default"
                                                 :style="'background-color:' + matrixColor(val)"
                                                 :title="data.matrix.labels[ri] + ' vs ' + data.matrix.labels[ci] + ': ' + (val != null ? val.toFixed(2) : '-')"
                                                 x-text="val != null ? val.toFixed(1) : '-'"
                                                 :class="ri === ci ? 'text-gray-600' : Math.abs(val || 0) > 0.5 ? 'text-white font-semibold' : 'text-gray-300'"></div>
                                        </template>
                                    </div>
                                </template>
                            </div>
                            <!-- Legend -->
                            <div class="flex items-center gap-2 mt-4 text-xs text-gray-500">
                                <span>-1.0</span>
                                <div class="flex h-3 rounded overflow-hidden" style="width:200px">
                                    <div class="flex-1" style="background:#ef4444"></div>
                                    <div class="flex-1" style="background:#f87171"></div>
                                    <div class="flex-1" style="background:#fca5a5"></div>
                                    <div class="flex-1" style="background:#374151"></div>
                                    <div class="flex-1" style="background:#6ee7b7"></div>
                                    <div class="flex-1" style="background:#34d399"></div>
                                    <div class="flex-1" style="background:#10b981"></div>
                                </div>
                                <span>+1.0</span>
                            </div>
                        </div>
                    </template>
                </div>
                <p x-show="!data.matrix || !data.matrix.labels || data.matrix.labels.length === 0" class="text-sm text-gray-500 text-center py-8">No matrix data available.</p>
            </div>
        </div>
    </template>

    <!-- Error State -->
    <div x-show="!loading && error" class="bg-red-900/20 border border-red-800 rounded-xl p-6 text-center">
        <p class="text-sm text-red-400" x-text="error"></p>
        <button @click="fetchData()" class="mt-3 px-4 py-1.5 text-xs bg-red-800 hover:bg-red-700 text-red-200 rounded-lg transition">Retry</button>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
function crossAssetApp() {
    return {
        asset_type: '{{ asset_mode }}',
        loading: false,
        data: null,
        error: null,
        lastRefresh: null,
        tab: 'correlations',

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

        async fetchData() {
            this.loading = true;
            this.error = null;
            try {
                const resp = await fetch(`/api/v1/market/cross-asset?asset_type=${this.asset_type}`);
                if (resp.redirected) { window.location.href = '/auth/login'; return; }
                const json = await resp.json();
                if (json.error) {
                    this.error = json.error;
                } else {
                    this.data = json;
                }
                this.lastRefresh = new Date().toLocaleTimeString('id-ID');
            } catch (e) {
                this.error = 'Failed to fetch cross-asset data: ' + e.message;
            }
            this.loading = false;
        },

        fmt(v) {
            if (v == null) return '-';
            return Number(v).toFixed(2);
        },

        fmtPrice(v) {
            if (v == null) return '-';
            const n = Number(v);
            if (n >= 1) return n.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
            return n.toLocaleString('en-US', { minimumFractionDigits: 4, maximumFractionDigits: 6 });
        },

        corrBarStyle(corr) {
            const v = corr || 0;
            const pct = Math.abs(v) * 50;
            if (v >= 0) {
                return `left:50%;width:${pct}%`;
            } else {
                return `right:50%;width:${pct}%`;
            }
        },

        signalBadge(signal) {
            const s = (signal || '').toLowerCase();
            if (s === 'decoupling') return 'bg-amber-900/50 text-amber-400';
            if (s === 'convergence') return 'bg-emerald-900/50 text-emerald-400';
            if (s === 'leading') return 'bg-koin-900/50 text-koin-400';
            if (s === 'lagging') return 'bg-gray-700 text-gray-400';
            if (s === 'buy' || s === 'bullish') return 'bg-emerald-900/50 text-emerald-400';
            if (s === 'sell' || s === 'bearish') return 'bg-red-900/50 text-red-400';
            return 'bg-gray-800 text-gray-500';
        },

        matrixColor(val) {
            if (val == null) return '#1f2937';
            const v = Math.max(-1, Math.min(1, val));
            if (v >= 0) {
                // Positive: gray -> green
                const intensity = v;
                const r = Math.round(55 - intensity * 39);
                const g = Math.round(65 + intensity * 170);
                const b = Math.round(81 - intensity * 50);
                return `rgb(${r},${g},${b})`;
            } else {
                // Negative: gray -> red
                const intensity = Math.abs(v);
                const r = Math.round(55 + intensity * 184);
                const g = Math.round(65 - intensity * 33);
                const b = Math.round(81 - intensity * 13);
                return `rgb(${r},${g},${b})`;
            }
        },
    };
}
</script>
{% endblock %}