{% extends "base.html" %}
{% block content %}
<div x-data="painPointPanel()" class="space-y-5">
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
        <div>
            <h1 class="text-xl font-bold text-white flex items-center gap-2">
                <svg class="w-6 h-6 text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 16.5c-.77.833.192 2.5 1.732 2.5z"/></svg>
                Pain Point Filter
            </h1>
            <p class="text-sm text-gray-400 mt-1">Identify & avoid toxic trading patterns that lose money</p>
        </div>
        <div class="flex gap-2">
            <button @click="view='toxic'" :class="view==='toxic' ? 'bg-red-600 text-white' : 'bg-gray-800 text-gray-400'" class="px-3 py-2 rounded-lg text-sm transition">Toxic</button>
            <button @click="view='golden'" :class="view==='golden' ? 'bg-green-600 text-white' : 'bg-gray-800 text-gray-400'" class="px-3 py-2 rounded-lg text-sm transition">Golden</button>
            <button @click="view='detail'" :class="view==='detail' ? 'bg-koin-600 text-white' : 'bg-gray-800 text-gray-400'" class="px-3 py-2 rounded-lg text-sm transition">Detail</button>
        </div>
    </div>

    <!-- Recovery Potential -->
    <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 text-center">
            <p class="text-2xl font-bold text-white" x-text="report.total || 0"></p>
            <p class="text-xs text-gray-400 mt-1">Signals Analyzed</p>
        </div>
        <div class="bg-gray-800 border border-gray-700 rounded-xl p-4 text-center">
            <p class="text-2xl font-bold" :class="(report.overall_win_rate||0) >= 55 ? 'text-green-400' : 'text-red-400'" x-text="(report.overall_win_rate || 0) + '%'"></p>
            <p class="text-xs text-gray-400 mt-1">Overall Win Rate</p>
        </div>
        <div class="bg-gray-800 border border-gray-700 rounded-xl p-4 text-center">
            <p class="text-2xl font-bold text-red-400" x-text="(report.avoidable_losses || 0).toFixed(1) + '%'"></p>
            <p class="text-xs text-gray-400 mt-1">Avoidable Losses</p>
        </div>
        <div class="bg-gray-800 border border-gray-700 rounded-xl p-4 text-center">
            <p class="text-2xl font-bold text-koin-400" x-text="(report.recovery_potential_pct || 0) + '%'"></p>
            <p class="text-xs text-gray-400 mt-1">Recovery Potential</p>
        </div>
    </div>

    <div x-show="loading" class="text-center py-12"><div class="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-koin-400"></div></div>

    <!-- Toxic Patterns -->
    <div x-show="!loading && view === 'toxic'" class="space-y-2">
        <h3 class="text-sm font-semibold text-red-400">🔴 Toxic Patterns — AVOID THESE</h3>
        <template x-for="t in report.toxic_patterns || []" :key="t.pattern + t.dimension">
            <div class="bg-gray-800 border rounded-xl p-4" :class="t.severity === 'critical' ? 'border-red-700/50' : 'border-yellow-700/50'">
                <div class="flex items-center justify-between">
                    <div class="flex items-center gap-2">
                        <span class="px-2 py-0.5 rounded text-xs font-bold" :class="t.severity === 'critical' ? 'bg-red-900/50 text-red-300' : 'bg-yellow-900/50 text-yellow-300'" x-text="t.severity"></span>
                        <span class="text-white font-medium" x-text="t.dimension + ': ' + t.pattern"></span>
                    </div>
                    <span class="text-red-400 font-bold" x-text="t.win_rate + '% WR'"></span>
                </div>
                <p class="text-xs text-gray-400 mt-1" x-text="t.total_trades + ' trades, total loss: ' + t.total_loss.toFixed(1) + '%'"></p>
            </div>
        </template>
        <!-- Avoid Rules -->
        <div x-show="(report.avoid_rules||[]).length" class="bg-red-900/10 border border-red-800/30 rounded-xl p-4 mt-4">
            <h4 class="text-sm font-semibold text-red-400 mb-2">📋 Avoid Rules</h4>
            <template x-for="rule in report.avoid_rules || []" :key="rule.rule">
                <div class="flex items-start gap-2 py-1 text-sm">
                    <span class="text-red-400">✕</span>
                    <div><span class="text-white font-medium" x-text="rule.rule"></span><br><span class="text-xs text-gray-400" x-text="rule.reason + ' → Save ' + rule.potential_savings.toFixed(1) + '%'"></span></div>
                </div>
            </template>
        </div>
    </div>

    <!-- Golden Patterns -->
    <div x-show="!loading && view === 'golden'" class="space-y-2">
        <h3 class="text-sm font-semibold text-green-400">🟢 Golden Patterns — FOCUS ON THESE</h3>
        <template x-for="g in report.golden_patterns || []" :key="g.pattern + g.dimension">
            <div class="bg-gray-800 border border-green-700/30 rounded-xl p-4">
                <div class="flex items-center justify-between">
                    <div class="flex items-center gap-2">
                        <span class="px-2 py-0.5 bg-green-900/50 text-green-300 rounded text-xs font-bold">golden</span>
                        <span class="text-white font-medium" x-text="g.dimension + ': ' + g.pattern"></span>
                    </div>
                    <span class="text-green-400 font-bold" x-text="g.win_rate + '% WR'"></span>
                </div>
                <p class="text-xs text-gray-400 mt-1" x-text="g.total_trades + ' trades, total return: +' + g.total_return.toFixed(1) + '%'"></p>
            </div>
        </template>
    </div>

    <!-- Detail View -->
    <div x-show="!loading && view === 'detail'" class="space-y-4">
        <template x-for="dim in ['by_setup', 'by_signal_type', 'by_regime']" :key="dim">
            <div class="bg-gray-800 border border-gray-700 rounded-xl p-4">
                <h3 class="text-sm font-semibold text-white mb-3" x-text="dim.replace('by_', 'By ').replace('_', ' ')"></h3>
                <div class="space-y-2">
                    <template x-for="item in report[dim] || []" :key="Object.values(item)[0]">
                        <div class="flex items-center gap-3">
                            <span class="text-xs text-gray-300 w-24 truncate" x-text="Object.values(item)[1]"></span>
                            <div class="flex-1 bg-gray-700 rounded-full h-3 relative">
                                <div class="h-3 rounded-full" :class="item.win_rate >= 60 ? 'bg-green-500' : item.win_rate >= 45 ? 'bg-yellow-500' : 'bg-red-500'" :style="'width:' + item.win_rate + '%'"></div>
                            </div>
                            <span class="text-xs w-16 text-right" :class="item.win_rate >= 55 ? 'text-green-400' : 'text-red-400'" x-text="item.win_rate + '% (' + item.total + ')'"></span>
                        </div>
                    </template>
                </div>
            </div>
        </template>
    </div>
</div>

<script>
function painPointPanel() {
    return {
        report: {}, loading: true, view: 'toxic',
        init() { this.fetchData(); },
        async fetchData() {
            this.loading = true;
            try {
                const r = await fetch(`/api/v1/market/pain-points?asset_type={{ asset_mode }}&period=90`);
                this.report = await r.json();
            } catch(e) { console.error(e); }
            this.loading = false;
        }
    }
}
</script>
{% endblock %}