{% extends "base.html" %}
{% block title %}Smart Money Concepts{% endblock %}
{% block content %}
<div x-data="smartMoney()" x-init="init()" class="space-y-6">
    <!-- Header -->
    <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
        <div>
            <h1 class="text-2xl font-bold text-white flex items-center gap-3">
                <div class="p-2 bg-koin-600/20 rounded-xl">
                    <svg class="w-6 h-6 text-koin-400" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 21v-8.25M15.75 21v-8.25M8.25 21v-8.25M3 9l9-6 9 6m-1.5 12V10.332A48.36 48.36 0 0012 9.75c-2.551 0-5.056.2-7.5.582V21M3 21h18M12 6.75h.008v.008H12V6.75z"/></svg>
                </div>
                Smart Money Concepts
            </h1>
            <p class="text-gray-400 text-sm mt-1">Order Blocks, Fair Value Gaps, Liquidity Sweeps, and Market Structure analysis</p>
        </div>
        <div class="flex items-center gap-2">
            <button @click="loadData()" class="px-4 py-2 bg-koin-600 hover:bg-koin-500 text-white text-sm font-medium rounded-lg transition flex items-center gap-2">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182"/></svg>
                <span x-show="!loading">Analyze</span>
                <span x-show="loading">Loading...</span>
            </button>
        </div>
    </div>

    <!-- Loading -->
    <template x-if="loading">
        <div class="flex items-center justify-center py-20">
            <div class="flex items-center gap-3 text-gray-400">
                <svg class="w-5 h-5 animate-spin" 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>
                <span>Analyzing smart money concepts...</span>
            </div>
        </div>
    </template>

    <!-- Content -->
    <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-800 border border-gray-700 rounded-xl p-4">
                    <div class="text-xs text-gray-500 uppercase tracking-wider">Order Blocks</div>
                    <div class="text-xl font-bold text-white mt-1" x-text="data.order_blocks_count || 0"></div>
                </div>
                <div class="bg-gray-800 border border-gray-700 rounded-xl p-4">
                    <div class="text-xs text-gray-500 uppercase tracking-wider">Fair Value Gaps</div>
                    <div class="text-xl font-bold text-koin-400 mt-1" x-text="data.fvg_count || 0"></div>
                </div>
                <div class="bg-gray-800 border border-gray-700 rounded-xl p-4">
                    <div class="text-xs text-gray-500 uppercase tracking-wider">Liquidity Sweeps</div>
                    <div class="text-xl font-bold text-amber-400 mt-1" x-text="data.sweeps_count || 0"></div>
                </div>
                <div class="bg-gray-800 border border-gray-700 rounded-xl p-4">
                    <div class="text-xs text-gray-500 uppercase tracking-wider">Active Signals</div>
                    <div class="text-xl font-bold text-emerald-400 mt-1" x-text="data.active_signals || 0"></div>
                </div>
            </div>

            <!-- Tab Navigation -->
            <div class="flex gap-1 bg-gray-900 p-1 rounded-xl border border-gray-700">
                <button @click="activeTab = 'order_blocks'"
                        class="flex-1 px-4 py-2 text-sm font-medium rounded-lg transition"
                        :class="activeTab === 'order_blocks' ? 'bg-koin-600 text-white' : 'text-gray-400 hover:text-gray-300 hover:bg-gray-800'">
                    Order Blocks
                </button>
                <button @click="activeTab = 'fvg'"
                        class="flex-1 px-4 py-2 text-sm font-medium rounded-lg transition"
                        :class="activeTab === 'fvg' ? 'bg-koin-600 text-white' : 'text-gray-400 hover:text-gray-300 hover:bg-gray-800'">
                    Fair Value Gaps
                </button>
                <button @click="activeTab = 'sweeps'"
                        class="flex-1 px-4 py-2 text-sm font-medium rounded-lg transition"
                        :class="activeTab === 'sweeps' ? 'bg-koin-600 text-white' : 'text-gray-400 hover:text-gray-300 hover:bg-gray-800'">
                    Liquidity Sweeps
                </button>
                <button @click="activeTab = 'bos_choch'"
                        class="flex-1 px-4 py-2 text-sm font-medium rounded-lg transition"
                        :class="activeTab === 'bos_choch' ? 'bg-koin-600 text-white' : 'text-gray-400 hover:text-gray-300 hover:bg-gray-800'">
                    BOS / CHoCH
                </button>
            </div>

            <!-- Order Blocks Tab -->
            <div x-show="activeTab === 'order_blocks'" class="bg-gray-800 border border-gray-700 rounded-xl overflow-hidden">
                <div class="px-4 py-3 border-b border-gray-700">
                    <h3 class="text-sm font-semibold text-white">Order Blocks</h3>
                </div>
                <div class="overflow-x-auto">
                    <table class="w-full text-sm">
                        <thead class="bg-gray-900/50 text-gray-400 text-xs uppercase">
                            <tr>
                                <th class="px-4 py-3 text-left">Symbol</th>
                                <th class="px-4 py-3 text-center">Type</th>
                                <th class="px-4 py-3 text-right">Zone High</th>
                                <th class="px-4 py-3 text-right">Zone Low</th>
                                <th class="px-4 py-3 text-center">Status</th>
                                <th class="px-4 py-3 text-right">Distance %</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-gray-700/50">
                            <template x-for="item in (data.order_blocks || [])" :key="item.symbol + '-ob-' + item.zone_high">
                                <tr class="hover:bg-gray-700/30 transition">
                                    <td class="px-4 py-3 text-white font-medium" x-text="item.symbol"></td>
                                    <td class="px-4 py-3 text-center">
                                        <span class="px-2 py-0.5 text-xs font-semibold rounded-full"
                                              :class="item.type === 'Bullish OB' ? 'bg-emerald-900/50 text-emerald-400' : 'bg-red-900/50 text-red-400'"
                                              x-text="item.type"></span>
                                    </td>
                                    <td class="px-4 py-3 text-right font-mono text-xs text-white" x-text="'$' + (item.zone_high || 0).toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2})"></td>
                                    <td class="px-4 py-3 text-right font-mono text-xs text-gray-400" x-text="'$' + (item.zone_low || 0).toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2})"></td>
                                    <td class="px-4 py-3 text-center">
                                        <span class="px-2 py-0.5 text-xs font-semibold rounded-full"
                                              :class="item.status === 'Fresh' ? 'bg-emerald-900/50 text-emerald-400' : item.status === 'Tested' ? 'bg-yellow-900/50 text-yellow-400' : 'bg-red-900/50 text-red-400'"
                                              x-text="item.status"></span>
                                    </td>
                                    <td class="px-4 py-3 text-right font-mono text-xs"
                                        :class="item.distance_pct >= 0 ? 'text-emerald-400' : 'text-red-400'"
                                        x-text="(item.distance_pct >= 0 ? '+' : '') + (item.distance_pct || 0).toFixed(2) + '%'"></td>
                                </tr>
                            </template>
                        </tbody>
                    </table>
                </div>
                <template x-if="!data.order_blocks || data.order_blocks.length === 0">
                    <div class="px-4 py-8 text-center text-gray-500 text-sm">No order blocks detected.</div>
                </template>
            </div>

            <!-- Fair Value Gaps Tab -->
            <div x-show="activeTab === 'fvg'" class="bg-gray-800 border border-gray-700 rounded-xl overflow-hidden">
                <div class="px-4 py-3 border-b border-gray-700">
                    <h3 class="text-sm font-semibold text-white">Fair Value Gaps</h3>
                </div>
                <div class="overflow-x-auto">
                    <table class="w-full text-sm">
                        <thead class="bg-gray-900/50 text-gray-400 text-xs uppercase">
                            <tr>
                                <th class="px-4 py-3 text-left">Symbol</th>
                                <th class="px-4 py-3 text-center">Type</th>
                                <th class="px-4 py-3 text-right">Gap High</th>
                                <th class="px-4 py-3 text-right">Gap Low</th>
                                <th class="px-4 py-3 text-right">Gap Size %</th>
                                <th class="px-4 py-3 text-center">Status</th>
                                <th class="px-4 py-3 text-right">Age (bars)</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-gray-700/50">
                            <template x-for="item in (data.fvg || [])" :key="item.symbol + '-fvg-' + item.gap_high">
                                <tr class="hover:bg-gray-700/30 transition">
                                    <td class="px-4 py-3 text-white font-medium" x-text="item.symbol"></td>
                                    <td class="px-4 py-3 text-center">
                                        <span class="px-2 py-0.5 text-xs font-semibold rounded-full"
                                              :class="item.type === 'Bullish FVG' ? 'bg-emerald-900/50 text-emerald-400' : 'bg-red-900/50 text-red-400'"
                                              x-text="item.type"></span>
                                    </td>
                                    <td class="px-4 py-3 text-right font-mono text-xs text-white" x-text="'$' + (item.gap_high || 0).toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2})"></td>
                                    <td class="px-4 py-3 text-right font-mono text-xs text-gray-400" x-text="'$' + (item.gap_low || 0).toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2})"></td>
                                    <td class="px-4 py-3 text-right font-mono text-xs text-koin-400" x-text="(item.gap_size_pct || 0).toFixed(2) + '%'"></td>
                                    <td class="px-4 py-3 text-center">
                                        <span class="px-2 py-0.5 text-xs font-semibold rounded-full"
                                              :class="item.status === 'Open' ? 'bg-emerald-900/50 text-emerald-400' : item.status === 'Partially Filled' ? 'bg-yellow-900/50 text-yellow-400' : 'bg-gray-700 text-gray-400'"
                                              x-text="item.status"></span>
                                    </td>
                                    <td class="px-4 py-3 text-right font-mono text-xs text-gray-400" x-text="item.age_bars || 0"></td>
                                </tr>
                            </template>
                        </tbody>
                    </table>
                </div>
                <template x-if="!data.fvg || data.fvg.length === 0">
                    <div class="px-4 py-8 text-center text-gray-500 text-sm">No fair value gaps detected.</div>
                </template>
            </div>

            <!-- Liquidity Sweeps Tab -->
            <div x-show="activeTab === 'sweeps'" class="bg-gray-800 border border-gray-700 rounded-xl overflow-hidden">
                <div class="px-4 py-3 border-b border-gray-700">
                    <h3 class="text-sm font-semibold text-white">Liquidity Sweeps</h3>
                </div>
                <div class="overflow-x-auto">
                    <table class="w-full text-sm">
                        <thead class="bg-gray-900/50 text-gray-400 text-xs uppercase">
                            <tr>
                                <th class="px-4 py-3 text-left">Symbol</th>
                                <th class="px-4 py-3 text-center">Type</th>
                                <th class="px-4 py-3 text-right">Sweep Level</th>
                                <th class="px-4 py-3 text-left">Sweep Candle</th>
                                <th class="px-4 py-3 text-center">Result</th>
                                <th class="px-4 py-3 text-right">Strength</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-gray-700/50">
                            <template x-for="item in (data.sweeps || [])" :key="item.symbol + '-sweep-' + item.sweep_level">
                                <tr class="hover:bg-gray-700/30 transition">
                                    <td class="px-4 py-3 text-white font-medium" x-text="item.symbol"></td>
                                    <td class="px-4 py-3 text-center">
                                        <span class="px-2 py-0.5 text-xs font-semibold rounded-full"
                                              :class="item.type === 'Buy-side' ? 'bg-emerald-900/50 text-emerald-400' : 'bg-red-900/50 text-red-400'"
                                              x-text="item.type"></span>
                                    </td>
                                    <td class="px-4 py-3 text-right font-mono text-xs text-white" x-text="'$' + (item.sweep_level || 0).toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2})"></td>
                                    <td class="px-4 py-3 text-xs text-gray-400" x-text="item.sweep_candle || '-'"></td>
                                    <td class="px-4 py-3 text-center">
                                        <span class="px-2 py-0.5 text-xs font-semibold rounded-full"
                                              :class="item.result === 'Reversal' ? 'bg-koin-900/50 text-koin-400' : 'bg-gray-700 text-gray-400'"
                                              x-text="item.result"></span>
                                    </td>
                                    <td class="px-4 py-3 text-right">
                                        <div class="flex items-center justify-end gap-2">
                                            <div class="w-12 h-1.5 bg-gray-700 rounded-full overflow-hidden">
                                                <div class="h-full bg-koin-500 rounded-full" :style="'width: ' + Math.min((item.strength || 0), 100) + '%'"></div>
                                            </div>
                                            <span class="text-xs font-mono text-gray-400" x-text="(item.strength || 0).toFixed(0) + '%'"></span>
                                        </div>
                                    </td>
                                </tr>
                            </template>
                        </tbody>
                    </table>
                </div>
                <template x-if="!data.sweeps || data.sweeps.length === 0">
                    <div class="px-4 py-8 text-center text-gray-500 text-sm">No liquidity sweeps detected.</div>
                </template>
            </div>

            <!-- BOS/CHoCH Tab -->
            <div x-show="activeTab === 'bos_choch'" class="bg-gray-800 border border-gray-700 rounded-xl overflow-hidden">
                <div class="px-4 py-3 border-b border-gray-700">
                    <h3 class="text-sm font-semibold text-white">Break of Structure / Change of Character</h3>
                </div>
                <div class="overflow-x-auto">
                    <table class="w-full text-sm">
                        <thead class="bg-gray-900/50 text-gray-400 text-xs uppercase">
                            <tr>
                                <th class="px-4 py-3 text-left">Symbol</th>
                                <th class="px-4 py-3 text-center">Type</th>
                                <th class="px-4 py-3 text-center">Direction</th>
                                <th class="px-4 py-3 text-right">Level</th>
                                <th class="px-4 py-3 text-center">Confirmation</th>
                                <th class="px-4 py-3 text-center">Timeframe</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-gray-700/50">
                            <template x-for="item in (data.bos_choch || [])" :key="item.symbol + '-bos-' + item.level">
                                <tr class="hover:bg-gray-700/30 transition">
                                    <td class="px-4 py-3 text-white font-medium" x-text="item.symbol"></td>
                                    <td class="px-4 py-3 text-center">
                                        <span class="px-2 py-0.5 text-xs font-bold rounded-full"
                                              :class="item.type === 'BOS' ? 'bg-blue-900/50 text-blue-400 border border-blue-700/50' : 'bg-purple-900/50 text-purple-400 border border-purple-700/50'"
                                              x-text="item.type"></span>
                                    </td>
                                    <td class="px-4 py-3 text-center">
                                        <span class="px-2 py-0.5 text-xs font-semibold rounded-full"
                                              :class="item.direction === 'Bullish' ? 'bg-emerald-900/50 text-emerald-400' : 'bg-red-900/50 text-red-400'"
                                              x-text="item.direction"></span>
                                    </td>
                                    <td class="px-4 py-3 text-right font-mono text-xs text-white" x-text="'$' + (item.level || 0).toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2})"></td>
                                    <td class="px-4 py-3 text-center">
                                        <span class="px-2 py-0.5 text-xs rounded-full"
                                              :class="item.confirmation === 'Confirmed' ? 'bg-emerald-900/50 text-emerald-400' : 'bg-yellow-900/50 text-yellow-400'"
                                              x-text="item.confirmation"></span>
                                    </td>
                                    <td class="px-4 py-3 text-center text-xs text-gray-400" x-text="item.timeframe || '-'"></td>
                                </tr>
                            </template>
                        </tbody>
                    </table>
                </div>
                <template x-if="!data.bos_choch || data.bos_choch.length === 0">
                    <div class="px-4 py-8 text-center text-gray-500 text-sm">No BOS/CHoCH signals detected.</div>
                </template>
            </div>
        </div>
    </template>
</div>
{% endblock %}

{% block scripts %}
<script>
function smartMoney() {
    return {
        loading: true,
        data: null,
        activeTab: 'order_blocks',
        asset_type: '{{ asset_mode }}',

        async init() {
            await this.loadData();
        },

        async loadData() {
            this.loading = true;
            try {
                const resp = await fetch(`/api/v1/market/smart-money?asset_type=${this.asset_type}`);
                if (resp.redirected) { window.location.href = '/auth/login'; return; }
                this.data = await resp.json();
            } catch(e) { console.error('smartMoney loadData error:', e); }
            this.loading = false;
        }
    }
}
</script>
{% endblock %}