{% extends "base.html" %}
{% block title %}Multi-Timeframe Confluence{% endblock %}
{% block content %}
<div x-data="multiTimeframe()" 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="M9.348 14.651a3.75 3.75 0 010-5.303m5.304 0a3.75 3.75 0 010 5.303m-7.425 2.122a6.75 6.75 0 010-9.546m9.546 0a6.75 6.75 0 010 9.546M5.106 18.894c-3.808-3.808-3.808-9.98 0-13.789m13.788 0c3.808 3.808 3.808 9.981 0 13.79M12 12h.008v.007H12V12zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z"/></svg>
                </div>
                Multi-Timeframe Confluence
            </h1>
            <p class="text-gray-400 text-sm mt-1">Analyze signal confluence across multiple timeframes (1H, 4H, Daily, Weekly)</p>
        </div>
        <div class="flex items-center gap-2">
            <div class="flex items-center gap-2 text-xs text-gray-500">
                <span>Min Score:</span>
                <input type="range" min="0" max="12" step="1" x-model.number="minScore" @input="filterData()"
                       class="w-24 h-1.5 bg-gray-700 rounded-lg appearance-none cursor-pointer accent-koin-500">
                <span class="text-koin-400 font-mono w-4" x-text="minScore"></span>
            </div>
            <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 multi-timeframe confluence...</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">Total Scanned</div>
                    <div class="text-xl font-bold text-white mt-1" x-text="data.total_scanned?.toLocaleString() || 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">Bullish Confluence</div>
                    <div class="text-xl font-bold text-emerald-400 mt-1" x-text="data.bullish_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">Bearish Confluence</div>
                    <div class="text-xl font-bold text-red-400 mt-1" x-text="data.bearish_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">Average Score</div>
                    <div class="text-xl font-bold text-koin-400 mt-1" x-text="(data.avg_score || 0).toFixed(2)"></div>
                </div>
            </div>

            <!-- Main Table -->
            <div class="bg-gray-800 border border-gray-700 rounded-xl overflow-hidden">
                <div class="px-4 py-3 border-b border-gray-700 flex items-center justify-between">
                    <h3 class="text-sm font-semibold text-white">Confluence Results</h3>
                    <span class="text-xs text-gray-500" x-text="filteredItems.length + ' assets shown'"></span>
                </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 w-10">#</th>
                                <th class="px-4 py-3 text-left">Symbol</th>
                                <th class="px-4 py-3 text-left">Name</th>
                                <th class="px-4 py-3 text-center">1H</th>
                                <th class="px-4 py-3 text-center">4H</th>
                                <th class="px-4 py-3 text-center">Daily</th>
                                <th class="px-4 py-3 text-center">Weekly</th>
                                <th class="px-4 py-3 text-left">Confluence Score</th>
                                <th class="px-4 py-3 text-center">Direction</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, idx) in filteredItems" :key="item.symbol">
                                <tr class="hover:bg-gray-700/30 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="text-white font-medium" x-text="item.symbol"></span>
                                    </td>
                                    <td class="px-4 py-3 text-gray-400 text-xs" x-text="item.name"></td>
                                    <!-- 1H -->
                                    <td class="px-4 py-3 text-center">
                                        <div class="flex items-center justify-center gap-1">
                                            <template x-if="item.tf_1h === 'bullish'">
                                                <svg class="w-4 h-4 text-emerald-400" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 15.75l7.5-7.5 7.5 7.5"/></svg>
                                            </template>
                                            <template x-if="item.tf_1h === 'bearish'">
                                                <svg class="w-4 h-4 text-red-400" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5"/></svg>
                                            </template>
                                            <template x-if="item.tf_1h === 'neutral'">
                                                <span class="text-gray-600 font-bold">—</span>
                                            </template>
                                        </div>
                                    </td>
                                    <!-- 4H -->
                                    <td class="px-4 py-3 text-center">
                                        <div class="flex items-center justify-center gap-1">
                                            <template x-if="item.tf_4h === 'bullish'">
                                                <svg class="w-4 h-4 text-emerald-400" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 15.75l7.5-7.5 7.5 7.5"/></svg>
                                            </template>
                                            <template x-if="item.tf_4h === 'bearish'">
                                                <svg class="w-4 h-4 text-red-400" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5"/></svg>
                                            </template>
                                            <template x-if="item.tf_4h === 'neutral'">
                                                <span class="text-gray-600 font-bold">—</span>
                                            </template>
                                        </div>
                                    </td>
                                    <!-- Daily -->
                                    <td class="px-4 py-3 text-center">
                                        <div class="flex items-center justify-center gap-1">
                                            <template x-if="item.tf_daily === 'bullish'">
                                                <svg class="w-4 h-4 text-emerald-400" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 15.75l7.5-7.5 7.5 7.5"/></svg>
                                            </template>
                                            <template x-if="item.tf_daily === 'bearish'">
                                                <svg class="w-4 h-4 text-red-400" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5"/></svg>
                                            </template>
                                            <template x-if="item.tf_daily === 'neutral'">
                                                <span class="text-gray-600 font-bold">—</span>
                                            </template>
                                        </div>
                                    </td>
                                    <!-- Weekly -->
                                    <td class="px-4 py-3 text-center">
                                        <div class="flex items-center justify-center gap-1">
                                            <template x-if="item.tf_weekly === 'bullish'">
                                                <svg class="w-4 h-4 text-emerald-400" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 15.75l7.5-7.5 7.5 7.5"/></svg>
                                            </template>
                                            <template x-if="item.tf_weekly === 'bearish'">
                                                <svg class="w-4 h-4 text-red-400" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5"/></svg>
                                            </template>
                                            <template x-if="item.tf_weekly === 'neutral'">
                                                <span class="text-gray-600 font-bold">—</span>
                                            </template>
                                        </div>
                                    </td>
                                    <!-- Confluence Score Bar -->
                                    <td class="px-4 py-3">
                                        <div class="flex items-center gap-2">
                                            <div class="flex-1 h-2 bg-gray-700 rounded-full overflow-hidden">
                                                <div class="h-full rounded-full transition-all"
                                                     :class="item.confluence_score > 8 ? 'bg-emerald-500' : item.confluence_score >= 5 ? 'bg-yellow-500' : 'bg-red-500'"
                                                     :style="'width: ' + Math.min((item.confluence_score / 12) * 100, 100) + '%'"></div>
                                            </div>
                                            <span class="text-xs font-mono w-6 text-right"
                                                  :class="item.confluence_score > 8 ? 'text-emerald-400' : item.confluence_score >= 5 ? 'text-yellow-400' : 'text-red-400'"
                                                  x-text="item.confluence_score"></span>
                                        </div>
                                    </td>
                                    <!-- Direction Badge -->
                                    <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' : item.direction === 'BEARISH' ? 'bg-red-900/50 text-red-400' : 'bg-gray-700 text-gray-400'"
                                              x-text="item.direction"></span>
                                    </td>
                                    <!-- Strength -->
                                    <td class="px-4 py-3 text-right">
                                        <span class="font-mono text-xs"
                                              :class="item.strength >= 70 ? 'text-emerald-400' : item.strength >= 40 ? 'text-yellow-400' : 'text-red-400'"
                                              x-text="item.strength.toFixed(2) + '%'"></span>
                                    </td>
                                </tr>
                            </template>
                        </tbody>
                    </table>
                </div>
                <template x-if="filteredItems.length === 0">
                    <div class="px-4 py-8 text-center text-gray-500 text-sm">No assets match the current filter criteria.</div>
                </template>
            </div>
        </div>
    </template>
</div>
{% endblock %}

{% block scripts %}
<script>
function multiTimeframe() {
    return {
        loading: true,
        data: null,
        filteredItems: [],
        minScore: 0,
        asset_type: '{{ asset_mode }}',

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

        async loadData() {
            this.loading = true;
            try {
                const resp = await fetch(`/api/v1/market/multi-timeframe?asset_type=${this.asset_type}`);
                if (resp.redirected) { window.location.href = '/auth/login'; return; }
                this.data = await resp.json();
                this.filterData();
            } catch(e) { console.error('multiTimeframe loadData error:', e); }
            this.loading = false;
        },

        filterData() {
            if (!this.data || !this.data.items) { this.filteredItems = []; return; }
            this.filteredItems = this.data.items
                .filter(item => item.confluence_score >= this.minScore)
                .sort((a, b) => b.confluence_score - a.confluence_score);
        }
    }
}
</script>
{% endblock %}