{% extends "base.html" %}

{% block title %}Analytics - Hyperliquid Trading Bot{% endblock %}

{% block extra_head %}
<style>
    .tab-button.active {
        @apply bg-blue-600 text-white;
    }
    .tab-content {
        display: none;
    }
    .tab-content.active {
        display: block;
    }
</style>
{% endblock %}

{% block content %}
<div class="max-w-7xl mx-auto px-6 py-8" x-data="analyticsApp()" x-init="init()">
    
    <!-- Analytics Header -->
    <div class="mb-8">
        <h1 class="text-3xl font-bold text-gray-900 mb-2">📊 Trading Analytics</h1>
        <p class="text-gray-600">Comprehensive performance analysis and statistics</p>
    </div>

    <!-- Tab Navigation -->
    <div class="mb-8">
        <div class="flex flex-wrap gap-2 border-b border-gray-200">
            <button @click="setActiveTab('overview')" 
                    :class="activeTab === 'overview' ? 'active' : ''"
                    class="tab-button px-6 py-3 font-medium rounded-t-lg bg-gray-100 text-gray-700 hover:bg-gray-200 transition-colors">
                📈 Overview
            </button>
            <button @click="setActiveTab('performance')" 
                    :class="activeTab === 'performance' ? 'active' : ''"
                    class="tab-button px-6 py-3 font-medium rounded-t-lg bg-gray-100 text-gray-700 hover:bg-gray-200 transition-colors">
                🏆 Performance
            </button>
            <button @click="setActiveTab('timeframes')" 
                    :class="activeTab === 'timeframes' ? 'active' : ''"
                    class="tab-button px-6 py-3 font-medium rounded-t-lg bg-gray-100 text-gray-700 hover:bg-gray-200 transition-colors">
                📅 Timeframes
            </button>
            <button @click="setActiveTab('tokens')" 
                    :class="activeTab === 'tokens' ? 'active' : ''"
                    class="tab-button px-6 py-3 font-medium rounded-t-lg bg-gray-100 text-gray-700 hover:bg-gray-200 transition-colors">
                🪙 Tokens
            </button>
            <button @click="setActiveTab('metrics')" 
                    :class="activeTab === 'metrics' ? 'active' : ''"
                    class="tab-button px-6 py-3 font-medium rounded-t-lg bg-gray-100 text-gray-700 hover:bg-gray-200 transition-colors">
                📊 Risk Metrics
            </button>
        </div>
    </div>

    <!-- Loading State -->
    <div x-show="loading" class="text-center py-8">
        <div class="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
        <p class="mt-2 text-gray-600">Loading analytics...</p>
    </div>

    <!-- Overview Tab -->
    <div x-show="activeTab === 'overview'" class="tab-content">
        <div x-show="data.overview" class="space-y-6">
            
            <!-- Performance Summary Cards -->
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
                <div class="metric-card">
                    <h3 class="font-semibold text-gray-700 mb-2">💰 Total P&L</h3>
                    <div class="text-2xl font-bold" :class="data.overview?.total_pnl >= 0 ? 'text-profit' : 'text-loss'" 
                         x-text="utils.formatCurrency(data.overview?.total_pnl || 0)"></div>
                    <div class="text-sm text-gray-500" 
                         x-text="'(' + utils.formatPercent(data.overview?.total_return_pct || 0) + ' return)'"></div>
                </div>
                
                <div class="metric-card">
                    <h3 class="font-semibold text-gray-700 mb-2">🎯 Win Rate</h3>
                    <div class="text-2xl font-bold text-blue-600" 
                         x-text="utils.formatPercent(data.overview?.win_rate || 0)"></div>
                    <div class="text-sm text-gray-500" 
                         x-text="(data.overview?.total_wins || 0) + 'W / ' + (data.overview?.total_losses || 0) + 'L'"></div>
                </div>
                
                <div class="metric-card">
                    <h3 class="font-semibold text-gray-700 mb-2">⚡ Profit Factor</h3>
                    <div class="text-2xl font-bold text-purple-600" 
                         x-text="(data.overview?.profit_factor || 0).toFixed(2)"></div>
                    <div class="text-sm text-gray-500">Profit/Loss Ratio</div>
                </div>
                
                <div class="metric-card">
                    <h3 class="font-semibold text-gray-700 mb-2">📉 Max Drawdown</h3>
                    <div class="text-2xl font-bold text-red-500" 
                         x-text="utils.formatPercent(data.overview?.max_drawdown_pct || 0)"></div>
                    <div class="text-sm text-gray-500" 
                         x-text="utils.formatCurrency(data.overview?.max_drawdown || 0)"></div>
                </div>
            </div>

            <!-- Additional Stats -->
            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                <div class="metric-card">
                    <h3 class="font-semibold text-gray-700 mb-3">📊 Trade Summary</h3>
                    <div class="space-y-2">
                        <div class="flex justify-between">
                            <span class="text-gray-600">Total Trades:</span>
                            <span class="font-medium" x-text="data.overview?.total_trades || 0"></span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-gray-600">Avg Trade P&L:</span>
                            <span class="font-medium" x-text="utils.formatCurrency(data.overview?.avg_trade_pnl || 0)"></span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-gray-600">Total Volume:</span>
                            <span class="font-medium" x-text="utils.formatCurrency(data.overview?.total_volume || 0)"></span>
                        </div>
                    </div>
                </div>
                
                <div class="metric-card">
                    <h3 class="font-semibold text-gray-700 mb-3">🏆 Best Performance</h3>
                    <div class="space-y-2">
                        <div class="flex justify-between">
                            <span class="text-gray-600">Largest Win:</span>
                            <span class="font-medium text-profit" x-text="utils.formatCurrency(data.overview?.largest_win || 0)"></span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-gray-600">Best Token:</span>
                            <span class="font-medium" x-text="data.overview?.best_token || 'N/A'"></span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-gray-600">Token P&L:</span>
                            <span class="font-medium" x-text="utils.formatCurrency(data.overview?.best_token_pnl || 0)"></span>
                        </div>
                    </div>
                </div>
                
                <div class="metric-card">
                    <h3 class="font-semibold text-gray-700 mb-3">📉 Worst Performance</h3>
                    <div class="space-y-2">
                        <div class="flex justify-between">
                            <span class="text-gray-600">Largest Loss:</span>
                            <span class="font-medium text-loss" x-text="utils.formatCurrency(data.overview?.largest_loss || 0)"></span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-gray-600">Worst Token:</span>
                            <span class="font-medium" x-text="data.overview?.worst_token || 'N/A'"></span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-gray-600">Token P&L:</span>
                            <span class="font-medium" x-text="utils.formatCurrency(data.overview?.worst_token_pnl || 0)"></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Performance Tab -->
    <div x-show="activeTab === 'performance'" class="tab-content">
        <div class="space-y-6">
            <div class="flex justify-between items-center">
                <h2 class="text-xl font-bold">🏆 Token Performance Ranking</h2>
                <select @change="loadPerformance($event.target.value)" class="form-select">
                    <option value="20">Top 20</option>
                    <option value="10">Top 10</option>
                    <option value="50">Top 50</option>
                </select>
            </div>
            
            <div x-show="data.performance && data.performance.length > 0" class="overflow-x-auto">
                <table class="min-w-full bg-white rounded-lg shadow">
                    <thead class="bg-gray-50">
                        <tr>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Token</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">P&L</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">ROE %</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Win Rate</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Trades</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Volume</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Avg Duration</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-200">
                        <template x-for="(token, index) in data.performance" :key="token.token">
                            <tr class="hover:bg-gray-50">
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="flex items-center">
                                        <span class="text-sm font-medium text-gray-900" x-text="token.token"></span>
                                        <span class="ml-2 text-xs text-gray-500" x-text="'#' + (index + 1)"></span>
                                    </div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <span :class="token.total_pnl >= 0 ? 'text-profit' : 'text-loss'" 
                                          class="text-sm font-medium" x-text="utils.formatCurrency(token.total_pnl)"></span>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <span :class="token.roe_percentage >= 0 ? 'text-profit' : 'text-loss'" 
                                          class="text-sm font-medium" x-text="utils.formatPercent(token.roe_percentage)"></span>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <span class="text-sm text-gray-900" x-text="utils.formatPercent(token.win_rate)"></span>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <span class="text-sm text-gray-900" x-text="token.total_trades"></span>
                                    <div class="text-xs text-gray-500" x-text="token.winning_trades + 'W / ' + token.losing_trades + 'L'"></div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <span class="text-sm text-gray-900" x-text="utils.formatCurrency(token.entry_volume)"></span>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <span class="text-sm text-gray-900" x-text="token.avg_duration"></span>
                                </td>
                            </tr>
                        </template>
                    </tbody>
                </table>
            </div>
            
            <div x-show="!data.performance || data.performance.length === 0" class="text-center py-8">
                <p class="text-gray-500">📭 No token performance data available yet.</p>
            </div>
        </div>
    </div>

    <!-- Timeframes Tab -->
    <div x-show="activeTab === 'timeframes'" class="tab-content">
        <div class="space-y-8">
            
            <!-- Timeframe Selector -->
            <div class="flex space-x-4">
                <button @click="setTimeframe('daily')" 
                        :class="selectedTimeframe === 'daily' ? 'bg-blue-600 text-white' : 'bg-gray-200 text-gray-700'"
                        class="px-4 py-2 rounded-lg font-medium">📅 Daily</button>
                <button @click="setTimeframe('weekly')" 
                        :class="selectedTimeframe === 'weekly' ? 'bg-blue-600 text-white' : 'bg-gray-200 text-gray-700'"
                        class="px-4 py-2 rounded-lg font-medium">📊 Weekly</button>
                <button @click="setTimeframe('monthly')" 
                        :class="selectedTimeframe === 'monthly' ? 'bg-blue-600 text-white' : 'bg-gray-200 text-gray-700'"
                        class="px-4 py-2 rounded-lg font-medium">📆 Monthly</button>
            </div>

            <!-- Timeframe Data -->
            <div x-show="data.timeframes[selectedTimeframe]" class="space-y-4">
                <h3 class="text-lg font-semibold capitalize" x-text="selectedTimeframe + ' Performance'"></h3>
                
                <div class="grid gap-4">
                    <template x-for="period in data.timeframes[selectedTimeframe]" :key="period.period">
                        <div class="bg-white rounded-lg shadow-sm border p-4">
                            <div class="flex justify-between items-center">
                                <div>
                                    <h4 class="font-medium" x-text="period.period_formatted"></h4>
                                    <div x-show="!period.has_trades" class="text-gray-500 text-sm">📭 No trading activity</div>
                                </div>
                                <div x-show="period.has_trades" class="text-right">
                                    <div :class="period.pnl >= 0 ? 'text-profit' : 'text-loss'" 
                                         class="font-bold" x-text="utils.formatCurrency(period.pnl)"></div>
                                    <div class="text-sm text-gray-500">
                                        <span x-text="utils.formatPercent(period.roe)"></span> ROE • 
                                        <span x-text="period.trades"></span> trades
                                    </div>
                                </div>
                            </div>
                        </div>
                    </template>
                </div>
            </div>
        </div>
    </div>

    <!-- Tokens Tab -->
    <div x-show="activeTab === 'tokens'" class="tab-content">
        <div class="space-y-6">
            <div class="flex justify-between items-center">
                <h2 class="text-xl font-bold">🪙 Token Analysis</h2>
                <div class="flex space-x-2">
                    <input type="text" x-model="tokenSearch" @input="searchToken()" 
                           placeholder="Search token (e.g., BTC)" 
                           class="px-3 py-2 border rounded-lg">
                    <button @click="tokenSearch = ''; loadTokenStats()" class="px-4 py-2 bg-gray-200 rounded-lg">Clear</button>
                </div>
            </div>
            
            <!-- Individual Token Stats -->
            <div x-show="data.selectedToken" class="bg-white rounded-lg shadow-sm border p-6">
                <h3 class="text-lg font-bold mb-4" x-text="'📊 ' + (data.selectedToken?.token || '') + ' Detailed Statistics'"></h3>
                
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                    <div class="space-y-2">
                        <h4 class="font-medium text-gray-700">Performance</h4>
                        <div class="text-lg font-bold" :class="data.selectedToken?.total_pnl >= 0 ? 'text-profit' : 'text-loss'" 
                             x-text="utils.formatCurrency(data.selectedToken?.total_pnl || 0)"></div>
                        <div class="text-sm text-gray-500" x-text="utils.formatPercent(data.selectedToken?.roe_percentage || 0) + ' ROE'"></div>
                    </div>
                    
                    <div class="space-y-2">
                        <h4 class="font-medium text-gray-700">Trading Activity</h4>
                        <div class="text-lg font-bold" x-text="data.selectedToken?.total_trades || 0"></div>
                        <div class="text-sm text-gray-500" x-text="(data.selectedToken?.winning_trades || 0) + 'W / ' + (data.selectedToken?.losing_trades || 0) + 'L'"></div>
                    </div>
                    
                    <div class="space-y-2">
                        <h4 class="font-medium text-gray-700">Win Rate</h4>
                        <div class="text-lg font-bold text-blue-600" x-text="utils.formatPercent(data.selectedToken?.win_rate || 0)"></div>
                        <div class="text-sm text-gray-500">Success Rate</div>
                    </div>
                </div>
            </div>
            
            <div x-show="tokenSearchError" class="bg-red-50 border border-red-200 rounded-lg p-4">
                <p class="text-red-600" x-text="tokenSearchError"></p>
            </div>
        </div>
    </div>

    <!-- Risk Metrics Tab -->
    <div x-show="activeTab === 'metrics'" class="tab-content">
        <div x-show="data.metrics" class="space-y-6">
            <h2 class="text-xl font-bold">📊 Risk & Performance Metrics</h2>
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div class="metric-card">
                    <h3 class="font-semibold text-gray-700 mb-3">📈 Risk Analysis</h3>
                    <div class="space-y-3">
                        <div class="flex justify-between">
                            <span class="text-gray-600">Sharpe Ratio:</span>
                            <span class="font-medium" x-text="data.metrics?.sharpe_ratio?.toFixed(2) || 'N/A'"></span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-gray-600">Max Drawdown:</span>
                            <span class="font-medium text-red-500" 
                                  x-text="utils.formatPercent(data.metrics?.risk_metrics?.max_drawdown_percentage || 0)"></span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-gray-600">Volatility:</span>
                            <span class="font-medium" x-text="utils.formatPercent(data.metrics?.volatility || 0)"></span>
                        </div>
                    </div>
                </div>
                
                <div class="metric-card">
                    <h3 class="font-semibold text-gray-700 mb-3">🏆 Trade Quality</h3>
                    <div class="space-y-3">
                        <div class="flex justify-between">
                            <span class="text-gray-600">Best ROE Trade:</span>
                            <span class="font-medium text-profit" 
                                  x-text="data.metrics?.best_roe_trade ? utils.formatPercent(data.metrics.best_roe_trade.percentage) + ' (' + data.metrics.best_roe_trade.token + ')' : 'N/A'"></span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-gray-600">Worst ROE Trade:</span>
                            <span class="font-medium text-loss" 
                                  x-text="data.metrics?.worst_roe_trade ? utils.formatPercent(data.metrics.worst_roe_trade.percentage) + ' (' + data.metrics.worst_roe_trade.token + ')' : 'N/A'"></span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-gray-600">Avg Duration:</span>
                            <span class="font-medium" x-text="data.metrics?.avg_trade_duration || 'N/A'"></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>

<script>
function analyticsApp() {
    return {
        activeTab: 'overview',
        selectedTimeframe: 'daily',
        tokenSearch: '',
        tokenSearchError: '',
        loading: false,
        data: {
            overview: null,
            performance: null,
            timeframes: {
                daily: null,
                weekly: null,
                monthly: null
            },
            selectedToken: null,
            metrics: null
        },

        async init() {
            this.loading = true;
            try {
                await this.loadOverview();
            } catch (error) {
                console.error('Failed to load analytics:', error);
            } finally {
                this.loading = false;
            }
        },

        setActiveTab(tab) {
            this.activeTab = tab;
            
            // Load data for the active tab if not already loaded
            switch(tab) {
                case 'overview':
                    if (!this.data.overview) this.loadOverview();
                    break;
                case 'performance':
                    if (!this.data.performance) this.loadPerformance();
                    break;
                case 'timeframes':
                    if (!this.data.timeframes[this.selectedTimeframe]) this.loadTimeframes();
                    break;
                case 'metrics':
                    if (!this.data.metrics) this.loadMetrics();
                    break;
            }
        },

        setTimeframe(timeframe) {
            this.selectedTimeframe = timeframe;
            if (!this.data.timeframes[timeframe]) {
                this.loadTimeframes();
            }
        },

        async loadOverview() {
            try {
                const response = await utils.authenticatedFetch('/api/analytics/stats');
                if (response.ok) {
                    this.data.overview = await response.json();
                }
            } catch (error) {
                console.error('Error loading overview:', error);
            }
        },

        async loadPerformance(limit = 20) {
            try {
                const response = await utils.authenticatedFetch(`/api/analytics/performance?limit=${limit}`);
                if (response.ok) {
                    this.data.performance = await response.json();
                }
            } catch (error) {
                console.error('Error loading performance:', error);
            }
        },

        async loadTimeframes() {
            try {
                const response = await utils.authenticatedFetch(`/api/analytics/${this.selectedTimeframe}`);
                if (response.ok) {
                    this.data.timeframes[this.selectedTimeframe] = await response.json();
                }
            } catch (error) {
                console.error('Error loading timeframes:', error);
            }
        },

        async loadMetrics() {
            try {
                const response = await utils.authenticatedFetch('/api/analytics/metrics');
                if (response.ok) {
                    this.data.metrics = await response.json();
                }
            } catch (error) {
                console.error('Error loading metrics:', error);
            }
        },

        async searchToken() {
            this.tokenSearchError = '';
            
            if (!this.tokenSearch.trim()) {
                this.data.selectedToken = null;
                return;
            }

            try {
                const response = await utils.authenticatedFetch(`/api/analytics/stats/${this.tokenSearch.trim()}`);
                if (response.ok) {
                    this.data.selectedToken = await response.json();
                } else if (response.status === 404) {
                    this.tokenSearchError = `No trading data found for ${this.tokenSearch.toUpperCase()}`;
                    this.data.selectedToken = null;
                } else {
                    throw new Error('Failed to load token data');
                }
            } catch (error) {
                console.error('Error searching token:', error);
                this.tokenSearchError = 'Error loading token data';
                this.data.selectedToken = null;
            }
        },

        async loadTokenStats() {
            this.data.selectedToken = null;
            this.tokenSearchError = '';
        }
    }
}
</script>
{% endblock %}