{% extends "base.html" %}
{% block content %}
<div x-data="sessionPanel()" 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-koin-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                Sessions & Hourly Analysis
            </h1>
            <p class="text-sm text-gray-400 mt-1">Win rate by hour, day of week & trading session</p>
        </div>
        <select x-model="period" @change="fetchData()" class="bg-gray-800 border border-gray-700 text-white text-sm rounded-lg px-3 py-2">
            <option value="30">30 days</option><option value="60">60 days</option><option value="90" selected>90 days</option><option value="180">180 days</option>
        </select>
    </div>

    <!-- Recommendations -->
    <template x-for="rec in report.recommendations || []" :key="rec.message">
        <div class="rounded-lg px-4 py-3 text-sm" :class="{'bg-green-900/30 text-green-300': rec.type==='opportunity', 'bg-red-900/30 text-red-300': rec.type==='warning', 'bg-blue-900/30 text-blue-300': rec.type==='insight'}">
            <span x-text="rec.type === 'opportunity' ? '🟢' : rec.type === 'warning' ? '🔴' : '🔵'"></span> <span x-text="rec.message"></span>
        </div>
    </template>

    <!-- Session Cards -->
    <div class="grid grid-cols-2 md:grid-cols-5 gap-3">
        <template x-for="(sess, key) in report.sessions || {}" :key="key">
            <div class="bg-gray-800 border border-gray-700 rounded-xl p-3 text-center">
                <p class="text-xs text-gray-400 mb-1" x-text="sess.label"></p>
                <p class="text-2xl font-bold" :class="sess.win_rate >= 60 ? 'text-green-400' : sess.win_rate >= 50 ? 'text-yellow-400' : 'text-red-400'" x-text="sess.win_rate + '%'"></p>
                <p class="text-xs text-gray-500 mt-1" x-text="sess.total + ' trades'"></p>
            </div>
        </template>
    </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>

    <!-- Heatmap: Hour × Day -->
    <div x-show="!loading && (report.heatmap||[]).length" class="bg-gray-800 border border-gray-700 rounded-xl p-4 overflow-x-auto">
        <h3 class="text-sm font-semibold text-white mb-3">Win Rate Heatmap (Hour × Day)</h3>
        <table class="w-full text-xs">
            <thead><tr><th class="text-gray-500 px-1 py-1 text-left">Day</th>
                <template x-for="h in 24" :key="h"><th class="text-gray-500 px-1 py-1 text-center" x-text="(h-1).toString().padStart(2,'0')"></th></template>
            </tr></thead>
            <tbody>
                <template x-for="row in report.heatmap || []" :key="row.day">
                    <tr><td class="text-gray-400 px-1 py-1 font-medium" x-text="row.day"></td>
                        <template x-for="(cell, i) in row.hours" :key="i">
                            <td class="px-0.5 py-0.5 text-center">
                                <div class="w-6 h-6 rounded flex items-center justify-center text-[9px] font-bold"
                                     :class="cell.win_rate === null ? 'bg-gray-700/30 text-gray-600' : cell.win_rate >= 65 ? 'bg-green-600/60 text-green-200' : cell.win_rate >= 50 ? 'bg-yellow-600/40 text-yellow-200' : 'bg-red-600/40 text-red-200'"
                                     x-text="cell.win_rate !== null ? cell.win_rate : ''" :title="cell.count + ' trades'"></div>
                            </td>
                        </template>
                    </tr>
                </template>
            </tbody>
        </table>
    </div>

    <!-- Hourly Bars -->
    <div x-show="!loading" class="bg-gray-800 border border-gray-700 rounded-xl p-4">
        <h3 class="text-sm font-semibold text-white mb-3">Win Rate by Hour (UTC)</h3>
        <div class="flex items-end gap-0.5 h-32">
            <template x-for="h in report.hourly || []" :key="h.hour">
                <div class="flex-1 flex flex-col items-center gap-0.5">
                    <span class="text-[8px]" :class="h.win_rate >= 60 ? 'text-green-400' : h.win_rate >= 50 ? 'text-yellow-400' : h.total < 3 ? 'text-gray-600' : 'text-red-400'" x-text="h.total >= 3 ? h.win_rate + '%' : ''"></span>
                    <div class="w-full rounded-t" :class="h.win_rate >= 60 ? 'bg-green-500/60' : h.win_rate >= 50 ? 'bg-yellow-500/40' : h.total < 3 ? 'bg-gray-700/30' : 'bg-red-500/40'" :style="'height:' + (h.total >= 3 ? h.win_rate : 5) + '%'"></div>
                    <span class="text-[8px] text-gray-500" x-text="h.hour"></span>
                </div>
            </template>
        </div>
    </div>

    <!-- Daily Bars -->
    <div x-show="!loading" class="bg-gray-800 border border-gray-700 rounded-xl p-4">
        <h3 class="text-sm font-semibold text-white mb-3">Win Rate by Day of Week</h3>
        <div class="grid grid-cols-7 gap-2">
            <template x-for="d in report.daily || []" :key="d.dow">
                <div class="text-center">
                    <div class="h-20 flex items-end justify-center mb-1">
                        <div class="w-8 rounded-t" :class="d.win_rate >= 60 ? 'bg-green-500/60' : d.win_rate >= 50 ? 'bg-yellow-500/40' : d.total < 3 ? 'bg-gray-700/30' : 'bg-red-500/40'" :style="'height:' + (d.total >= 3 ? d.win_rate : 5) + '%'"></div>
                    </div>
                    <p class="text-xs font-bold" :class="d.win_rate >= 60 ? 'text-green-400' : 'text-gray-400'" x-text="d.label"></p>
                    <p class="text-[10px] text-gray-500" x-text="d.win_rate + '% (' + d.total + ')'"></p>
                </div>
            </template>
        </div>
    </div>
</div>

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