{% extends "base.html" %}
{% block title %}Trailing Stop Engine{% endblock %}

{% block content %}
<div x-data="trailingStopApp()" 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="M3 4.5h14.25M3 9h9.75M3 13.5h5.25m5.25-.75L17.25 9m0 0L21 12.75M17.25 9v12"/>
                </svg>
                Trailing Stop Engine
            </h1>
            <p class="mt-1 text-sm text-gray-400">Compare 6 trailing stop strategies per asset with backtest results and regime-aware recommendations</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 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-500">Analyzing trailing stop strategies...</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 Analyzed</p>
                <p class="text-2xl font-bold text-white mt-1" x-text="data.total_analyzed || 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">Trending Regime</p>
                <p class="text-2xl font-bold text-emerald-400 mt-1" x-text="data.trending_count || 0"></p>
                <p class="text-xs text-gray-500 mt-0.5">Good for trailing</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">Avg Profit Retention</p>
                <p class="text-2xl font-bold text-koin-400 mt-1" x-text="fmtPct(data.avg_profit_retention)"></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">Best Strategy Overall</p>
                <p class="text-lg font-bold text-white mt-1" x-text="data.best_strategy_overall || '-'"></p>
            </div>
        </div>

        <!-- Strategy Legend -->
        <div class="bg-gray-800 border border-gray-700 rounded-xl p-4 mb-6">
            <h3 class="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-3">6 Trailing Stop Strategies</h3>
            <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-3">
                <template x-for="s in strategies" :key="s.key">
                    <div class="flex items-center gap-2">
                        <span class="w-2 h-2 rounded-full" :style="'background-color:' + s.color"></span>
                        <span class="text-xs text-gray-300" x-text="s.name"></span>
                    </div>
                </template>
            </div>
        </div>

        <!-- Global Strategy Performance -->
        <template x-if="data.strategy_summary">
            <div class="bg-gray-800 border border-gray-700 rounded-xl p-5 mb-6">
                <h3 class="text-sm font-semibold text-gray-300 uppercase tracking-wider mb-4">Strategy Performance Summary</h3>
                <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-3">
                    <template x-for="strat in strategies" :key="strat.key">
                        <div class="bg-gray-900/50 rounded-lg p-3 text-center">
                            <div class="flex items-center justify-center gap-1.5 mb-2">
                                <span class="w-2 h-2 rounded-full" :style="'background-color:' + strat.color"></span>
                                <span class="text-[10px] font-medium text-gray-400" x-text="strat.name"></span>
                            </div>
                            <div class="text-lg font-bold tabular-nums"
                                 :class="getGlobalStrat(strat.key, 'avg_retention') >= 70 ? 'text-emerald-400' : 'text-amber-400'"
                                 x-text="fmt(getGlobalStrat(strat.key, 'avg_retention'), 1) + '%'"></div>
                            <p class="text-[10px] text-gray-500 mt-0.5">Avg Retention</p>
                            <div class="mt-2 grid grid-cols-2 gap-1 text-center">
                                <div>
                                    <p class="text-[10px] text-gray-600">Win</p>
                                    <p class="text-[10px] font-semibold text-emerald-400" x-text="getGlobalStrat(strat.key, 'win_count') || 0"></p>
                                </div>
                                <div>
                                    <p class="text-[10px] text-gray-600">Lose</p>
                                    <p class="text-[10px] font-semibold text-red-400" x-text="getGlobalStrat(strat.key, 'loss_count') || 0"></p>
                                </div>
                            </div>
                        </div>
                    </template>
                </div>
            </div>
        </template>

        <!-- Recommendations -->
        <template x-if="data.recommendations && data.recommendations.length">
            <div class="space-y-2 mb-6">
                <template x-for="(rec, ri) in data.recommendations" :key="ri">
                    <div class="p-3 rounded-lg border text-sm" :class="{
                        'bg-emerald-900/20 border-emerald-700/50 text-emerald-300': rec.type === 'opportunity',
                        'bg-amber-900/20 border-amber-700/50 text-amber-300': rec.type === 'warning',
                        'bg-blue-900/20 border-blue-700/50 text-blue-300': rec.type === 'insight',
                        'bg-red-900/20 border-red-700/50 text-red-300': rec.type === 'critical',
                    }" x-text="rec.message || rec"></div>
                </template>
            </div>
        </template>

        <!-- Per-Coin Cards -->
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
            <template x-for="(item, idx) in data.items || []" :key="item.coin_symbol || idx">
                <div class="bg-gray-800 border rounded-xl overflow-hidden hover:border-gray-600 transition"
                     :class="item.recommended_strategy ? 'border-emerald-700/50' : 'border-gray-700'">

                    <!-- Card Header -->
                    <div class="p-5 pb-3">
                        <div class="flex items-center justify-between">
                            <div class="flex items-center gap-3 min-w-0">
                                <div class="w-9 h-9 rounded-full bg-gray-700 flex items-center justify-center text-xs font-bold text-gray-300 flex-shrink-0"
                                     x-text="(item.coin_symbol || '?').substring(0, 3).toUpperCase()"></div>
                                <div class="min-w-0">
                                    <span class="text-white font-semibold truncate block" x-text="item.coin_name || item.coin_symbol"></span>
                                    <span class="text-xs text-gray-500 font-mono" x-text="(item.coin_symbol || '').toUpperCase()"></span>
                                </div>
                            </div>
                            <div class="flex items-center gap-2 flex-shrink-0">
                                <!-- Regime Badge -->
                                <span class="px-2 py-0.5 text-xs font-medium rounded-full"
                                      :class="item.regime === 'trending' ? 'bg-emerald-900/50 text-emerald-400' : 'bg-amber-900/50 text-amber-400'"
                                      x-text="item.regime || 'unknown'"></span>
                            </div>
                        </div>
                        <!-- Recommended Strategy -->
                        <div class="mt-3 flex items-center gap-2">
                            <span class="text-xs text-gray-500">Recommended:</span>
                            <span class="px-2 py-0.5 text-xs font-semibold rounded-full bg-emerald-900/40 text-emerald-300"
                                  x-text="item.recommended_strategy || '-'"></span>
                            <span class="text-xs text-gray-500 truncate" x-text="item.recommendation_reason || ''"></span>
                        </div>
                    </div>

                    <!-- Strategy Comparison -->
                    <div class="px-5 pb-4">
                        <div class="space-y-2">
                            <template x-for="strat in strategies" :key="strat.key">
                                <div class="bg-gray-900/50 rounded-lg p-3 border transition"
                                     :class="item.recommended_strategy === strat.name ? 'border-emerald-700/60' : 'border-transparent'">
                                    <div class="flex items-center justify-between mb-2">
                                        <div class="flex items-center gap-2">
                                            <span class="w-2 h-2 rounded-full flex-shrink-0" :style="'background-color:' + strat.color"></span>
                                            <span class="text-xs font-medium text-gray-300" x-text="strat.name"></span>
                                            <span x-show="item.recommended_strategy === strat.name"
                                                  class="text-[10px] px-1.5 py-0.5 bg-emerald-900/50 text-emerald-400 rounded font-bold">BEST</span>
                                        </div>
                                        <span class="text-xs font-semibold tabular-nums"
                                              :class="getStratData(item, strat.key, 'profit_retained') >= 70 ? 'text-emerald-400' : 'text-amber-400'"
                                              x-text="getStratData(item, strat.key, 'profit_retained') != null ? getStratData(item, strat.key, 'profit_retained') + '% kept' : '-'"></span>
                                    </div>
                                    <div class="grid grid-cols-4 gap-2 text-center">
                                        <div>
                                            <p class="text-[10px] text-gray-500">Stop Level</p>
                                            <p class="text-xs text-gray-300 tabular-nums mt-0.5" x-text="fmtPrice(getStratData(item, strat.key, 'stop_level'))"></p>
                                        </div>
                                        <div>
                                            <p class="text-[10px] text-gray-500">Distance</p>
                                            <p class="text-xs text-gray-300 tabular-nums mt-0.5" x-text="fmt(getStratData(item, strat.key, 'distance_pct')) + '%'"></p>
                                        </div>
                                        <div>
                                            <p class="text-[10px] text-gray-500">Times Stopped</p>
                                            <p class="text-xs text-gray-300 tabular-nums mt-0.5" x-text="getStratData(item, strat.key, 'times_stopped') ?? '-'"></p>
                                        </div>
                                        <div>
                                            <p class="text-[10px] text-gray-500">Avg Profit</p>
                                            <p class="text-xs tabular-nums mt-0.5"
                                               :class="(getStratData(item, strat.key, 'avg_profit') || 0) >= 0 ? 'text-emerald-400' : 'text-red-400'"
                                               x-text="fmtPct(getStratData(item, strat.key, 'avg_profit'))"></p>
                                        </div>
                                    </div>
                                </div>
                            </template>
                        </div>
                    </div>

                    <!-- Price Info -->
                    <div class="px-5 pb-3">
                        <div class="grid grid-cols-3 gap-3 text-center">
                            <div>
                                <p class="text-[10px] text-gray-500 uppercase">Current Price</p>
                                <p class="text-xs font-semibold text-white tabular-nums mt-0.5" x-text="fmtPrice(item.current_price)"></p>
                            </div>
                            <div>
                                <p class="text-[10px] text-gray-500 uppercase">24h Change</p>
                                <p class="text-xs font-semibold tabular-nums mt-0.5"
                                   :class="(item.change_24h || 0) >= 0 ? 'text-emerald-400' : 'text-red-400'"
                                   x-text="fmtPct(item.change_24h)"></p>
                            </div>
                            <div>
                                <p class="text-[10px] text-gray-500 uppercase">ATR %</p>
                                <p class="text-xs font-semibold text-gray-300 tabular-nums mt-0.5" x-text="fmt(item.atr_pct) + '%'"></p>
                            </div>
                        </div>
                    </div>

                    <!-- Overall Score Bar -->
                    <div class="px-5 pb-4 border-t border-gray-700 pt-3">
                        <div class="flex items-center justify-between text-xs mb-1">
                            <span class="text-gray-400">Overall Score</span>
                            <span class="font-bold tabular-nums"
                                  :class="(item.overall_score || 0) >= 70 ? 'text-emerald-400' : (item.overall_score || 0) >= 40 ? 'text-amber-400' : 'text-red-400'"
                                  x-text="(item.overall_score || 0) + '/100'"></span>
                        </div>
                        <div class="w-full h-2 bg-gray-900 rounded-full overflow-hidden">
                            <div class="h-full rounded-full transition-all duration-500"
                                 :class="(item.overall_score || 0) >= 70 ? 'bg-emerald-500' : (item.overall_score || 0) >= 40 ? 'bg-amber-500' : 'bg-red-500'"
                                 :style="'width: ' + Math.min(item.overall_score || 0, 100) + '%'"></div>
                        </div>
                    </div>
                </div>
            </template>
        </div>

        <!-- Empty State -->
        <div x-show="!data.items || data.items.length === 0" class="text-center py-16 bg-gray-800 rounded-xl border border-gray-700">
            <svg class="mx-auto h-12 w-12 text-gray-600" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" d="M3 4.5h14.25M3 9h9.75M3 13.5h5.25m5.25-.75L17.25 9m0 0L21 12.75M17.25 9v12"/>
            </svg>
            <h3 class="mt-4 text-lg font-medium text-gray-400">No Trailing Stop Data</h3>
            <p class="mt-2 text-sm text-gray-600">Run a scan from the admin workflow to generate trailing stop analysis.</p>
        </div>
    </div>
</div>

<script>
function trailingStopApp() {
    return {
        loading: false,
        error: null,
        lastRefresh: null,
        data: null,
        strategies: [
            { key: 'atr_trailing', name: 'ATR Trailing', color: '#3b82f6' },
            { key: 'chandelier', name: 'Chandelier', color: '#8b5cf6' },
            { key: 'parabolic_sar', name: 'Parabolic SAR', color: '#f59e0b' },
            { key: 'percentage', name: 'Percentage', color: '#10b981' },
            { key: 'keltner', name: 'Keltner', color: '#ec4899' },
            { key: 'supertrend', name: 'Supertrend', color: '#06b6d4' },
        ],

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

        async fetchData() {
            this.loading = true;
            this.error = null;
            try {
                const params = new URLSearchParams({ asset_type: '{{ asset_mode }}' });
                const res = await fetch(`/api/v1/market/trailing-stop?${params}`);
                const json = await res.json();
                if (json.status === 'success') {
                    this.data = json.data || json;
                } else if (json.items || json.total_analyzed != null) {
                    this.data = json;
                } else {
                    this.error = json.message || 'Failed to load trailing stop data';
                }
            } catch (e) {
                this.error = e.message;
            } finally {
                this.loading = false;
                this.lastRefresh = new Date().toLocaleTimeString('id-ID');
            }
        },

        getStratData(item, stratKey, field) {
            if (!item.strategies) return null;
            const s = item.strategies[stratKey];
            return s ? s[field] : null;
        },

        getGlobalStrat(stratKey, field) {
            if (!this.data.strategy_summary) return null;
            const s = this.data.strategy_summary[stratKey];
            return s ? s[field] : null;
        },

        fmt(n, d=2) { return n != null ? Number(n).toFixed(d) : '-'; },
        fmtPct(n) { return n != null ? (n >= 0 ? '+' : '') + Number(n).toFixed(2) + '%' : '-'; },
        fmtPrice(n) {
            if (n == null) return '-';
            const v = Number(n);
            if (Math.abs(v) >= 100) return 'Rp ' + new Intl.NumberFormat('id-ID', { maximumFractionDigits: 0 }).format(v);
            if (Math.abs(v) >= 1) return 'Rp ' + new Intl.NumberFormat('id-ID', { maximumFractionDigits: 2 }).format(v);
            return 'Rp ' + new Intl.NumberFormat('id-ID', { maximumFractionDigits: 8 }).format(v);
        },
    };
}
</script>
{% endblock %}