{% extends "base.html" %}
{% block title %}Volume Profile Analyzer{% endblock %}
{% block content %}
<div x-data="volumeProfile()" 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="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 013 19.875v-6.75zM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V8.625zM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V4.125z"/></svg>
                </div>
                Volume Profile Analyzer
            </h1>
            <p class="text-gray-400 text-sm mt-1">Analyze volume distribution at price levels to identify POC, Value Area, and key zones</p>
        </div>
        <div class="flex items-center gap-2">
            <select x-model="selectedSymbol" @change="loadData()"
                    class="bg-gray-800 border border-gray-700 text-gray-300 text-sm rounded-lg px-3 py-2 min-w-[160px]">
                <option value="">Select symbol...</option>
                <template x-for="s in symbols" :key="s">
                    <option :value="s" x-text="s"></option>
                </template>
            </select>
            <button @click="loadData()" :disabled="!selectedSymbol" class="px-4 py-2 bg-koin-600 hover:bg-koin-500 disabled:opacity-50 disabled:cursor-not-allowed 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 volume profile...</span>
            </div>
        </div>
    </template>

    <!-- Empty State -->
    <template x-if="!loading && !data && !selectedSymbol">
        <div class="flex flex-col items-center justify-center py-20 text-gray-500">
            <svg class="w-12 h-12 mb-3 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 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 013 19.875v-6.75zM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V8.625zM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V4.125z"/></svg>
            <p class="text-sm">Select a symbol to analyze its volume profile</p>
        </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">POC Price</div>
                    <div class="text-xl font-bold text-koin-400 mt-1" x-text="'$' + (data.poc_price || 0).toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2})"></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">VA High</div>
                    <div class="text-xl font-bold text-emerald-400 mt-1" x-text="'$' + (data.va_high || 0).toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2})"></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">VA Low</div>
                    <div class="text-xl font-bold text-red-400 mt-1" x-text="'$' + (data.va_low || 0).toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2})"></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">Current vs POC</div>
                    <div class="text-xl font-bold mt-1"
                         :class="data.current_vs_poc >= 0 ? 'text-emerald-400' : 'text-red-400'"
                         x-text="(data.current_vs_poc >= 0 ? '+' : '') + (data.current_vs_poc || 0).toFixed(2) + '%'"></div>
                </div>
            </div>

            <!-- Position Signal -->
            <div class="px-4 py-3 rounded-xl border flex items-center gap-3"
                 :class="data.position_signal === 'Bullish' ? 'bg-emerald-900/20 border-emerald-700/50' : data.position_signal === 'Bearish' ? 'bg-red-900/20 border-red-700/50' : 'bg-gray-800 border-gray-700'">
                <div class="w-2.5 h-2.5 rounded-full"
                     :class="data.position_signal === 'Bullish' ? 'bg-emerald-400' : data.position_signal === 'Bearish' ? 'bg-red-400' : 'bg-gray-400'"></div>
                <span class="text-sm font-medium"
                      :class="data.position_signal === 'Bullish' ? 'text-emerald-300' : data.position_signal === 'Bearish' ? 'text-red-300' : 'text-gray-300'"
                      x-text="data.position_signal === 'Bullish' ? 'Price above VA \u2192 Bullish Bias' : data.position_signal === 'Bearish' ? 'Price below VA \u2192 Bearish Bias' : 'Price in VA \u2192 Neutral / Range-Bound'"></span>
                <span class="ml-auto text-xs text-gray-500" x-text="'Current: $' + (data.current_price || 0).toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2})"></span>
            </div>

            <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
                <!-- Volume Profile Chart -->
                <div class="lg:col-span-2 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">Volume at Price</h3>
                    </div>
                    <div class="p-4 space-y-0.5">
                        <template x-for="(level, idx) in data.levels" :key="idx">
                            <div class="flex items-center gap-2 group relative">
                                <!-- Price label -->
                                <div class="w-20 text-right text-xs font-mono shrink-0"
                                     :class="level.is_poc ? 'text-koin-400 font-bold' : level.in_value_area ? 'text-gray-300' : 'text-gray-500'"
                                     x-text="'$' + level.price.toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2})"></div>
                                <!-- Bar -->
                                <div class="flex-1 h-4 bg-gray-700/30 rounded-sm overflow-hidden relative">
                                    <!-- Value Area background -->
                                    <div x-show="level.in_value_area" class="absolute inset-0 bg-koin-600/10"></div>
                                    <!-- Volume bar -->
                                    <div class="h-full rounded-sm transition-all relative z-10"
                                         :class="level.is_poc ? 'bg-koin-400' : level.type === 'hvn' ? 'bg-blue-500/70' : level.type === 'lvn' ? 'bg-gray-500/50' : 'bg-gray-600'"
                                         :style="'width: ' + level.volume_pct + '%'"></div>
                                    <!-- Current price marker -->
                                    <div x-show="level.is_current_price" class="absolute top-0 right-0 h-full w-0.5 bg-white z-20"></div>
                                </div>
                                <!-- Volume -->
                                <div class="w-16 text-right text-xs font-mono text-gray-500 shrink-0"
                                     x-text="formatVolume(level.volume)"></div>
                                <!-- Markers -->
                                <div class="w-8 text-center shrink-0">
                                    <span x-show="level.is_poc" class="text-[10px] font-bold text-koin-400">POC</span>
                                    <span x-show="level.type === 'hvn' && !level.is_poc" class="text-[10px] text-blue-400">HVN</span>
                                    <span x-show="level.type === 'lvn'" class="text-[10px] text-gray-500">LVN</span>
                                </div>
                            </div>
                        </template>
                    </div>
                </div>

                <!-- Key Levels Side Panel -->
                <div 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">Key Levels</h3>
                    </div>
                    <div class="divide-y divide-gray-700/50">
                        <!-- POC -->
                        <div class="px-4 py-3 flex items-center justify-between">
                            <div class="flex items-center gap-2">
                                <span class="w-2 h-2 rounded-full bg-koin-400"></span>
                                <span class="text-xs text-gray-400">POC</span>
                            </div>
                            <span class="text-sm font-mono text-koin-400" x-text="'$' + (data.poc_price || 0).toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2})"></span>
                        </div>
                        <!-- VA High -->
                        <div class="px-4 py-3 flex items-center justify-between">
                            <div class="flex items-center gap-2">
                                <span class="w-2 h-2 rounded-full bg-emerald-400"></span>
                                <span class="text-xs text-gray-400">VA High</span>
                            </div>
                            <span class="text-sm font-mono text-emerald-400" x-text="'$' + (data.va_high || 0).toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2})"></span>
                        </div>
                        <!-- VA Low -->
                        <div class="px-4 py-3 flex items-center justify-between">
                            <div class="flex items-center gap-2">
                                <span class="w-2 h-2 rounded-full bg-red-400"></span>
                                <span class="text-xs text-gray-400">VA Low</span>
                            </div>
                            <span class="text-sm font-mono text-red-400" x-text="'$' + (data.va_low || 0).toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2})"></span>
                        </div>
                        <!-- HVN Levels -->
                        <template x-for="(lvl, i) in (data.hvn_levels || [])" :key="'hvn-'+i">
                            <div class="px-4 py-3 flex items-center justify-between">
                                <div class="flex items-center gap-2">
                                    <span class="w-2 h-2 rounded-full bg-blue-400"></span>
                                    <span class="text-xs text-gray-400" x-text="'HVN ' + (i+1)"></span>
                                </div>
                                <span class="text-sm font-mono text-blue-400" x-text="'$' + lvl.toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2})"></span>
                            </div>
                        </template>
                        <!-- LVN Levels -->
                        <template x-for="(lvl, i) in (data.lvn_levels || [])" :key="'lvn-'+i">
                            <div class="px-4 py-3 flex items-center justify-between">
                                <div class="flex items-center gap-2">
                                    <span class="w-2 h-2 rounded-full bg-gray-500"></span>
                                    <span class="text-xs text-gray-400" x-text="'LVN ' + (i+1)"></span>
                                </div>
                                <span class="text-sm font-mono text-gray-400" x-text="'$' + lvl.toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2})"></span>
                            </div>
                        </template>
                    </div>
                </div>
            </div>
        </div>
    </template>
</div>
{% endblock %}

{% block scripts %}
<script>
function volumeProfile() {
    return {
        loading: false,
        data: null,
        symbols: [],
        selectedSymbol: '',
        asset_type: '{{ asset_mode }}',

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

        async loadSymbols() {
            try {
                const resp = await fetch(`/api/v1/market/assets?asset_type=${this.asset_type}`);
                if (resp.redirected) { window.location.href = '/auth/login'; return; }
                const result = await resp.json();
                this.symbols = (result.items || result.coins || result || []).map(c => c.symbol || c).filter(Boolean);
            } catch(e) { console.error('loadSymbols error:', e); }
        },

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

        formatVolume(v) {
            if (!v) return '0';
            if (v >= 1e9) return (v / 1e9).toFixed(1) + 'B';
            if (v >= 1e6) return (v / 1e6).toFixed(1) + 'M';
            if (v >= 1e3) return (v / 1e3).toFixed(1) + 'K';
            return v.toLocaleString();
        }
    }
}
</script>
{% endblock %}