{% extends "base.html" %}
{% block title %}Performance Attribution{% endblock %}

{% block content %}
<div x-data="attributionPanel()" class="space-y-5">

    <!-- Breadcrumb -->
    <nav class="flex items-center gap-2 text-xs text-gray-500">
        <a href="{{ tools_base }}/" class="hover:text-gray-300 transition">Admin</a>
        <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
        <span class="text-gray-400">Performance Attribution</span>
    </nav>

    <!-- ═══════════════════════════════════════════════════════════ -->
    <!-- A. 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">📊</span>
                    Performance Attribution
                </h1>
                <p class="text-sm text-gray-500 mt-0.5">Breakdown performa sinyal berdasarkan strategi, tipe, timeframe, dan dimensi lainnya.</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-koin-600 hover:bg-koin-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>

    <!-- ═══════════════════════════════════════════════════════════ -->
    <!-- B. SUMMARY STATS (4 cards)                                  -->
    <!-- ═══════════════════════════════════════════════════════════ -->
    <div class="grid grid-cols-2 md:grid-cols-4 gap-3">
        <div class="bg-gray-800 border border-gray-700 rounded-xl p-4">
            <p class="text-xs text-gray-500 uppercase tracking-wider">Total Signals</p>
            <p class="text-2xl font-bold text-white mt-1" x-text="summary.total_signals ?? '-'"></p>
            <p class="text-xs text-gray-500 mt-1">
                <span x-text="summary.evaluated ?? 0"></span> evaluated
            </p>
        </div>
        <div class="bg-gray-800 border border-gray-700 rounded-xl p-4">
            <p class="text-xs text-gray-500 uppercase tracking-wider">Win Rate</p>
            <p class="text-2xl font-bold mt-1" :class="winRateColor(summary.win_rate_pct ?? 0)"
               x-text="summary.win_rate_pct != null ? summary.win_rate_pct.toFixed(1) + '%' : '-'"></p>
            <p class="text-xs text-gray-500 mt-1">
                <span class="text-emerald-400" x-text="summary.wins ?? 0"></span>W /
                <span class="text-red-400" x-text="summary.losses ?? 0"></span>L
            </p>
        </div>
        <div class="bg-gray-800 border border-gray-700 rounded-xl p-4">
            <p class="text-xs text-gray-500 uppercase tracking-wider">Total Return</p>
            <p class="text-2xl font-bold mt-1" :class="returnColor(summary.total_return_pct ?? 0)"
               x-text="summary.total_return_pct != null ? formatPct(summary.total_return_pct) : '-'"></p>
            <p class="text-xs text-gray-500 mt-1">
                Avg <span :class="returnColor(summary.avg_return_pct ?? 0)" x-text="formatPct(summary.avg_return_pct)"></span>
            </p>
        </div>
        <div class="bg-gray-800 border border-gray-700 rounded-xl p-4">
            <p class="text-xs text-gray-500 uppercase tracking-wider">Profit Factor</p>
            <p class="text-2xl font-bold mt-1" :class="pfColor(summary.profit_factor ?? 0)"
               x-text="summary.profit_factor != null ? summary.profit_factor.toFixed(2) : '-'"></p>
            <p class="text-xs text-gray-500 mt-1">
                Gross P/L ratio
            </p>
        </div>
    </div>

    <!-- ═══════════════════════════════════════════════════════════ -->
    <!-- C. FILTERS ROW                                              -->
    <!-- ═══════════════════════════════════════════════════════════ -->
    <div class="flex flex-wrap items-center gap-2 bg-gray-800/50 border border-gray-700 rounded-xl p-3">
        <!-- Period -->
        <div class="flex items-center gap-1">
            <span class="text-xs text-gray-500 mr-1">Periode:</span>
            <template x-for="p in [{v: 7, l: '7d'}, {v: 30, l: '30d'}, {v: 90, l: '90d'}, {v: 0, l: 'All'}]" :key="p.v">
                <button @click="period = p.v; fetchData()"
                        class="px-3 py-1 text-xs rounded-full transition"
                        :class="period === p.v ? 'bg-koin-600 text-white' : 'bg-gray-800 text-gray-400 hover:text-white hover:bg-gray-700'"
                        x-text="p.l">
                </button>
            </template>
        </div>

        <div class="w-px h-5 bg-gray-700 mx-1"></div>

        <!-- Group By -->
        <div class="flex items-center gap-1">
            <span class="text-xs text-gray-500 mr-1">Group By:</span>
            <select x-model="groupBy" @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-koin-500">
                <option value="strategy">Strategy</option>
                <option value="signal_type">Signal Type</option>
                <option value="timeframe">Timeframe</option>
                <option value="confidence">Confidence</option>
                <option value="safety">Safety Level</option>
                <option value="coin">Coin / Asset</option>
            </select>
        </div>

        <div class="w-px h-5 bg-gray-700 mx-1"></div>

        <!-- Asset Type -->
        <div class="flex items-center gap-1">
            <span class="text-xs text-gray-500 mr-1">Aset:</span>
            <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-koin-500">
                <option value="all">Semua Aset</option>
                <option value="crypto">Crypto</option>
                <option value="stock">Saham</option>
                <option value="stock_us">Saham US</option>
            </select>
        </div>
    </div>

    <!-- ═══════════════════════════════════════════════════════════ -->
    <!-- LOADING STATE                                               -->
    <!-- ═══════════════════════════════════════════════════════════ -->
    <div x-show="loading" x-cloak class="text-center py-16">
        <svg class="animate-spin h-8 w-8 text-koin-500 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-gray-500 text-sm">Memuat data attribution...</p>
    </div>

    <!-- ═══════════════════════════════════════════════════════════ -->
    <!-- EMPTY STATE                                                 -->
    <!-- ═══════════════════════════════════════════════════════════ -->
    <div x-show="!loading && items.length === 0" x-cloak
         class="text-center py-16 bg-gray-800/30 border border-gray-700 rounded-xl">
        <svg class="w-12 h-12 text-gray-600 mx-auto mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
        </svg>
        <p class="text-gray-500 text-sm">Belum ada data attribution untuk filter ini.</p>
        <p class="text-gray-600 text-xs mt-1">Coba ubah periode atau group by.</p>
    </div>

    <!-- ═══════════════════════════════════════════════════════════ -->
    <!-- D. ATTRIBUTION CARDS                                        -->
    <!-- ═══════════════════════════════════════════════════════════ -->
    <div x-show="!loading && items.length > 0" x-cloak class="space-y-4">

        <!-- Results count -->
        <div class="flex items-center justify-between">
            <p class="text-xs text-gray-500">
                <span x-text="items.length"></span> group<span x-show="items.length !== 1">s</span>
                — grouped by <span class="text-gray-400 font-medium" x-text="groupBy.replace('_', ' ')"></span>
            </p>
            <p class="text-xs text-gray-500">
                Periode: <span class="text-gray-400" x-text="period === 0 ? 'All time' : period + ' hari'"></span>
            </p>
        </div>

        <!-- Desktop Table -->
        <div class="hidden xl:block bg-gray-800 border border-gray-700 rounded-xl overflow-hidden">
            <div class="overflow-x-auto">
                <table class="w-full text-sm">
                    <thead>
                        <tr class="border-b border-gray-700 text-xs text-gray-500 uppercase tracking-wider">
                            <th class="px-4 py-3 text-left">#</th>
                            <th class="px-4 py-3 text-left">Group</th>
                            <th class="px-4 py-3 text-center">Signals</th>
                            <th class="px-4 py-3 text-center">Win / Loss</th>
                            <th class="px-4 py-3 text-center">Win Rate</th>
                            <th class="px-4 py-3 text-right">Avg Return</th>
                            <th class="px-4 py-3 text-right">Total Return</th>
                            <th class="px-4 py-3 text-right">Profit Factor</th>
                            <th class="px-4 py-3 text-right">Dir. Accuracy</th>
                        </tr>
                    </thead>
                    <tbody>
                        <template x-for="(item, idx) in items" :key="'tbl-' + idx">
                            <tr class="border-b border-gray-700/50 hover:bg-gray-700/20 transition">
                                <td class="px-4 py-3 text-gray-500 text-xs" x-text="idx + 1"></td>
                                <td class="px-4 py-3">
                                    <span class="font-medium text-white" x-text="item.group_name || item.group_key || '-'"></span>
                                </td>
                                <td class="px-4 py-3 text-center">
                                    <span class="text-white" x-text="item.evaluated ?? 0"></span>
                                    <span class="text-gray-600">/</span>
                                    <span class="text-gray-400" x-text="item.total_signals ?? 0"></span>
                                </td>
                                <td class="px-4 py-3 text-center">
                                    <span class="text-emerald-400" x-text="item.wins ?? 0"></span>
                                    <span class="text-gray-600">/</span>
                                    <span class="text-red-400" x-text="item.losses ?? 0"></span>
                                </td>
                                <td class="px-4 py-3 text-center">
                                    <div class="flex items-center gap-2 justify-center">
                                        <div class="w-16 bg-gray-900 rounded-full h-1.5 overflow-hidden">
                                            <div class="h-1.5 rounded-full"
                                                 :class="(item.win_rate_pct ?? 0) >= 60 ? 'bg-emerald-500' : (item.win_rate_pct ?? 0) >= 45 ? 'bg-amber-500' : 'bg-red-500'"
                                                 :style="'width: ' + Math.min(item.win_rate_pct ?? 0, 100) + '%'"></div>
                                        </div>
                                        <span class="text-xs font-medium" :class="winRateColor(item.win_rate_pct ?? 0)"
                                              x-text="(item.win_rate_pct ?? 0).toFixed(1) + '%'"></span>
                                    </div>
                                </td>
                                <td class="px-4 py-3 text-right font-medium"
                                    :class="returnColor(item.avg_return_pct ?? 0)"
                                    x-text="formatPct(item.avg_return_pct)"></td>
                                <td class="px-4 py-3 text-right font-medium"
                                    :class="returnColor(item.total_return_pct ?? 0)"
                                    x-text="formatPct(item.total_return_pct)"></td>
                                <td class="px-4 py-3 text-right font-medium"
                                    :class="pfColor(item.profit_factor ?? 0)"
                                    x-text="(item.profit_factor ?? 0).toFixed(2)"></td>
                                <td class="px-4 py-3 text-right font-medium"
                                    :class="winRateColor(item.direction_accuracy_pct ?? 0)"
                                    x-text="(item.direction_accuracy_pct ?? 0).toFixed(1) + '%'"></td>
                            </tr>
                        </template>
                    </tbody>
                </table>
            </div>
        </div>

        <!-- Mobile/Tablet Card Grid -->
        <div class="xl:hidden grid grid-cols-1 md:grid-cols-2 gap-4">
            <template x-for="(item, idx) in items" :key="'card-' + idx">
                <div class="bg-gray-800 border border-gray-700 rounded-xl p-5 hover:border-gray-600 transition">

                    <!-- Card Header: Group Name + Rank -->
                    <div class="flex items-center justify-between mb-4">
                        <div class="flex items-center gap-2">
                            <span class="flex items-center justify-center w-7 h-7 rounded-full text-xs font-bold"
                                  :class="idx === 0 ? 'bg-amber-500/20 text-amber-400' : idx === 1 ? 'bg-gray-400/20 text-gray-300' : idx === 2 ? 'bg-orange-500/20 text-orange-400' : 'bg-gray-700 text-gray-400'"
                                  x-text="'#' + (idx + 1)"></span>
                            <h3 class="text-base font-semibold text-white" x-text="item.group_name || item.group_key || '-'"></h3>
                        </div>
                        <span class="text-xs px-2 py-0.5 rounded-full"
                              :class="(item.win_rate_pct ?? 0) >= 60 ? 'bg-emerald-900/40 text-emerald-400' : (item.win_rate_pct ?? 0) >= 45 ? 'bg-amber-900/40 text-amber-400' : 'bg-red-900/40 text-red-400'"
                              x-text="(item.win_rate_pct ?? 0).toFixed(1) + '% WR'"></span>
                    </div>

                    <!-- Signals Count Row -->
                    <div class="grid grid-cols-3 gap-2 mb-4">
                        <div class="text-center bg-gray-900/50 rounded-lg p-2">
                            <p class="text-xs text-gray-500">Total</p>
                            <p class="text-sm font-bold text-white" x-text="item.total_signals ?? 0"></p>
                        </div>
                        <div class="text-center bg-gray-900/50 rounded-lg p-2">
                            <p class="text-xs text-gray-500">Evaluated</p>
                            <p class="text-sm font-bold text-koin-400" x-text="item.evaluated ?? 0"></p>
                        </div>
                        <div class="text-center bg-gray-900/50 rounded-lg p-2">
                            <p class="text-xs text-gray-500">Pending</p>
                            <p class="text-sm font-bold text-gray-400" x-text="item.pending ?? 0"></p>
                        </div>
                    </div>

                    <!-- Win / Loss / Breakeven Badges -->
                    <div class="flex items-center gap-2 mb-4">
                        <span class="inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-xs font-medium bg-emerald-900/30 text-emerald-400 border border-emerald-800/50">
                            <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/></svg>
                            <span x-text="(item.wins ?? 0) + ' Win'"></span>
                        </span>
                        <span class="inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-xs font-medium bg-red-900/30 text-red-400 border border-red-800/50">
                            <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"/></svg>
                            <span x-text="(item.losses ?? 0) + ' Loss'"></span>
                        </span>
                        <span x-show="(item.breakeven ?? 0) > 0"
                              class="inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-xs font-medium bg-gray-700/50 text-gray-400 border border-gray-600/50">
                            <span x-text="(item.breakeven ?? 0) + ' BE'"></span>
                        </span>
                    </div>

                    <!-- Win Rate Progress Bar -->
                    <div class="mb-4">
                        <div class="flex items-center justify-between mb-1">
                            <span class="text-xs text-gray-500">Win Rate</span>
                            <span class="text-xs font-semibold" :class="winRateColor(item.win_rate_pct ?? 0)"
                                  x-text="(item.win_rate_pct ?? 0).toFixed(1) + '%'"></span>
                        </div>
                        <div class="w-full bg-gray-900 rounded-full h-2 overflow-hidden">
                            <div class="h-2 rounded-full transition-all duration-500"
                                 :class="(item.win_rate_pct ?? 0) >= 60 ? 'bg-emerald-500' : (item.win_rate_pct ?? 0) >= 45 ? 'bg-amber-500' : 'bg-red-500'"
                                 :style="'width: ' + Math.min(item.win_rate_pct ?? 0, 100) + '%'"></div>
                        </div>
                    </div>

                    <!-- Metrics Grid -->
                    <div class="grid grid-cols-2 gap-x-4 gap-y-3 mb-4">
                        <div>
                            <p class="text-xs text-gray-500">Avg Return</p>
                            <p class="text-sm font-semibold" :class="returnColor(item.avg_return_pct ?? 0)"
                               x-text="formatPct(item.avg_return_pct)"></p>
                        </div>
                        <div>
                            <p class="text-xs text-gray-500">Total Return</p>
                            <p class="text-sm font-semibold" :class="returnColor(item.total_return_pct ?? 0)"
                               x-text="formatPct(item.total_return_pct)"></p>
                        </div>
                        <div>
                            <p class="text-xs text-gray-500">Profit Factor</p>
                            <p class="text-sm font-semibold" :class="pfColor(item.profit_factor ?? 0)"
                               x-text="(item.profit_factor ?? 0).toFixed(2)"></p>
                        </div>
                        <div>
                            <p class="text-xs text-gray-500">Direction Accuracy</p>
                            <p class="text-sm font-semibold" :class="winRateColor(item.direction_accuracy_pct ?? 0)"
                               x-text="(item.direction_accuracy_pct ?? 0).toFixed(1) + '%'"></p>
                        </div>
                    </div>

                    <!-- Gross Profit vs Gross Loss Bar -->
                    <div class="mb-3">
                        <div class="flex items-center justify-between mb-1">
                            <span class="text-xs text-emerald-400">Profit: <span x-text="formatPct(item.gross_profit_pct)"></span></span>
                            <span class="text-xs text-red-400">Loss: <span x-text="formatPct(item.gross_loss_pct)"></span></span>
                        </div>
                        <div class="flex w-full h-1.5 rounded-full overflow-hidden bg-gray-900">
                            <div class="bg-emerald-500 h-full transition-all duration-500"
                                 :style="'width: ' + grossProfitWidth(item) + '%'"></div>
                            <div class="bg-red-500 h-full transition-all duration-500"
                                 :style="'width: ' + grossLossWidth(item) + '%'"></div>
                        </div>
                    </div>

                    <!-- Best / Worst Indicators -->
                    <div class="flex items-center justify-between pt-3 border-t border-gray-700/50">
                        <div x-show="item.best_symbol" class="flex items-center gap-1.5">
                            <svg class="w-3.5 h-3.5 text-emerald-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18"/>
                            </svg>
                            <span class="text-xs text-gray-500">Best:</span>
                            <span class="text-xs font-medium text-emerald-400" x-text="item.best_symbol"></span>
                            <span class="text-xs text-emerald-400/70" x-text="formatPct(item.best_return_pct)"></span>
                        </div>
                        <div x-show="item.worst_symbol" class="flex items-center gap-1.5">
                            <svg class="w-3.5 h-3.5 text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"/>
                            </svg>
                            <span class="text-xs text-gray-500">Worst:</span>
                            <span class="text-xs font-medium text-red-400" x-text="item.worst_symbol"></span>
                            <span class="text-xs text-red-400/70" x-text="formatPct(item.worst_return_pct)"></span>
                        </div>
                    </div>
                </div>
            </template>
        </div>
    </div>

</div>
{% endblock %}

{% block scripts %}
<script>
function attributionPanel() {
    return {
        items: [],
        summary: {},
        loading: false,
        period: 30,
        groupBy: 'strategy',
        filters: {
            asset_type: '{{ asset_mode }}'
        },

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

        async fetchData() {
            this.loading = true;
            try {
                const params = new URLSearchParams({
                    period: this.period,
                    group_by: this.groupBy,
                    asset_type: this.filters.asset_type
                });
                const res = await fetch('/api/v1/market/performance/attribution?' + params);
                if (res.redirected) {
                    window.location.href = '/auth/login';
                    return;
                }
                if (res.ok) {
                    const data = await res.json();
                    this.items = data.items || [];
                    this.summary = data.summary || {};
                } else {
                    this.items = [];
                    this.summary = {};
                }
            } catch (e) {
                console.error('Attribution fetch error:', e);
                this.items = [];
                this.summary = {};
            } finally {
                this.loading = false;
            }
        },

        /* ── Color Helpers ─────────────────────────────── */
        winRateColor(rate) {
            if (rate >= 70) return 'text-emerald-400';
            if (rate >= 50) return 'text-amber-400';
            return 'text-red-400';
        },

        returnColor(r) {
            return r >= 0 ? 'text-emerald-400' : 'text-red-400';
        },

        pfColor(pf) {
            if (pf >= 2) return 'text-emerald-400';
            if (pf >= 1) return 'text-amber-400';
            return 'text-red-400';
        },

        /* ── Format Helpers ────────────────────────────── */
        formatPct(val) {
            if (val == null) return '-';
            return (val >= 0 ? '+' : '') + val.toFixed(2) + '%';
        },

        formatNumber(n) {
            if (n == null) return '-';
            return n.toLocaleString('id-ID');
        },

        /* ── Gross Profit/Loss Bar Width Helpers ───────── */
        grossProfitWidth(item) {
            const profit = Math.abs(item.gross_profit_pct ?? 0);
            const loss = Math.abs(item.gross_loss_pct ?? 0);
            const total = profit + loss;
            if (total === 0) return 50;
            return ((profit / total) * 100).toFixed(1);
        },

        grossLossWidth(item) {
            const profit = Math.abs(item.gross_profit_pct ?? 0);
            const loss = Math.abs(item.gross_loss_pct ?? 0);
            const total = profit + loss;
            if (total === 0) return 50;
            return ((loss / total) * 100).toFixed(1);
        }
    };
}
</script>
{% endblock %}