@extends('layouts.app')

@section('title', 'HastAI Admin - AI Usage Dashboard')
@section('page_title', 'AI Usage Dashboard')

@section('styles')
<style>
    :root {
        --glass-bg: rgba(255, 255, 255, 0.75);
        --glass-border: rgba(255, 255, 255, 0.5);
        --glass-shadow: 0 8px 32px 10px rgba(31, 38, 135, 0.08);
        --accent-purple: #6c5ce7;
        --accent-blue: #0984e3;
        --accent-green: #00b894;
        --accent-orange: #e17055;
        --accent-red: #d63031;
        --text-dark: #2d3436;
        --text-muted: #636e72;
    }

    .glass-card {
        background: #fff;
        border: 1px solid rgba(0,0,0,0.08);
        border-radius: 16px;
        box-shadow: 0 4px 20px 0 rgba(0,0,0,0.05);
        transition: all 0.3s ease;
        margin-bottom: 24px;
        padding: 24px;
    }

    .glass-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 30px rgba(0,0,0,0.1);
    }

    .stat-card {
        display: flex;
        align-items: center;
    }

    .stat-icon {
        width: 56px;
        height: 56px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 20px;
        font-size: 24px;
        color: #fff;
    }

    .icon-purple { background: linear-gradient(135deg, #a29bfe, #6c5ce7); }
    .icon-blue { background: linear-gradient(135deg, #74b9ff, #0984e3); }
    .icon-green { background: linear-gradient(135deg, #55efc4, #00b894); }
    .icon-orange { background: linear-gradient(135deg, #fab1a0, #e17055); }
    .icon-red { background: linear-gradient(135deg, #ff7675, #d63031); }

    .stat-info h3 {
        margin: 0;
        font-size: 28px;
        font-weight: 700;
        color: var(--text-dark);
    }

    .stat-info p {
        margin: 2px 0 0;
        color: var(--text-muted);
        font-size: 12px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .chart-container {
        position: relative;
        height: 320px;
    }

    .filter-wrapper {
        position: relative;
        display: flex;
        gap: 10px;
        background: rgba(0, 0, 0, 0.05);
        padding: 5px;
        border-radius: 12px;
        border: 1px solid rgba(0, 0, 0, 0.08);
    }

    .premium-select {
        background: transparent;
        border: none;
        font-weight: 700;
        color: var(--text-dark);
        padding: 5px 10px;
        font-size: 13px;
        cursor: pointer;
        outline: none;
        border-radius: 8px;
        transition: all 0.3s;
    }

    .premium-select:hover {
        background: rgba(255, 255, 255, 0.8);
    }
</style>
@endsection

@section('content')
<!-- ========================================== -->
<!-- 1. CREDIT ANALYTICS SECTION                 -->
<!-- ========================================== -->
<div class="mb-5">
    <div class="d-flex align-items-center mb-4">
        <i class="feather icon-credit-card text-c-blue f-28 mr-3"></i>
        <h3 class="mb-0 text-primary font-weight-bold">Credit Analytics Section</h3>
    </div>

    <!-- Credit Stats Row -->
    <div class="row">
        <div class="col-md-3">
            <div class="glass-card stat-card">
                <div class="stat-icon icon-blue">
                    <i class="feather icon-cpu"></i>
                </div>
                <div class="stat-info">
                    <h3>{{ number_format($totalCreditsInWallets) }}</h3>
                    <p>Total User Wallet Balance</p>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="glass-card stat-card">
                <div class="stat-icon icon-orange">
                    <i class="feather icon-zap"></i>
                </div>
                <div class="stat-info">
                    <h3>{{ number_format($totalUsedCredits) }}</h3>
                    <p>Total Credits Spent</p>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="glass-card stat-card">
                <div class="stat-icon icon-green">
                    <i class="feather icon-activity"></i>
                </div>
                <div class="stat-info">
                    <h3>{{ number_format($totalTransactionsCount) }}</h3>
                    <p>Transactions Logged</p>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="glass-card stat-card">
                <div class="stat-icon icon-purple">
                    <i class="feather icon-check-circle"></i>
                </div>
                <div class="stat-info">
                    <h3>{{ $avgCreditCost }}</h3>
                    <p>Avg. Credit / Report</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Credit Chart Row -->
    <div class="row">
        <div class="col-lg-8">
            <div class="glass-card">
                <h5 class="mb-4"><i class="feather icon-trending-up text-primary mr-2"></i> Credits Transaction Flow (Last 12 Months)</h5>
                <div class="chart-container">
                    <canvas id="creditFlowChart"></canvas>
                </div>
            </div>
        </div>
        <div class="col-lg-4">
            <div class="glass-card">
                <h5 class="mb-4"><i class="feather icon-pie-chart text-success mr-2"></i> Transaction Types</h5>
                <div class="chart-container" style="height: 320px;">
                    @if(empty($transactionTypeData))
                        <div class="d-flex align-items-center justify-content-center h-100">
                            <span class="text-muted font-weight-bold">No data available</span>
                        </div>
                    @else
                        <canvas id="transactionTypeChart"></canvas>
                    @endif
                </div>
            </div>
        </div>
    </div>

    <!-- Credit Table Row -->
    <div class="row">
        <div class="col-lg-12">
            <div class="glass-card">
                <div class="d-flex justify-content-between align-items-center mb-4">
                    <h5 class="mb-0"><i class="feather icon-list text-primary mr-2"></i> Recent Credit Transactions</h5>
                    <form id="filterForm" method="GET" action="{{ route('dashboard.ai-usage') }}">
                        <div class="filter-wrapper">
                            <select name="filter_month" class="premium-select" onchange="filterData(event)">
                                <option value="">All Months</option>
                                @foreach(range(1, 12) as $m)
                                    <option value="{{ $m }}" {{ $selectedMonth == $m ? 'selected' : '' }}>
                                        {{ date('F', mktime(0, 0, 0, $m, 1)) }}
                                    </option>
                                @endforeach
                            </select>
                            <div style="width: 1px; background: rgba(0, 0, 0, 0.08); margin: 5px 0;"></div>
                            <select name="filter_year" class="premium-select" onchange="filterData(event)">
                                <option value="">All Years</option>
                                @foreach(range(date('Y'), date('Y') - 5) as $y)
                                    <option value="{{ $y }}" {{ $selectedYear == $y ? 'selected' : '' }}>
                                        {{ $y }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </form>
                </div>
                <div class="table-responsive" id="transactionsTableContainer">
                    @include('dashboard.partials.transactions_table')
                </div>
            </div>
        </div>
    </div>
</div>

<hr class="my-5" style="border-top: 2px dashed rgba(0,0,0,0.1);">

<!-- ========================================== -->
<!-- 2. AI TOKEN USAGE SECTION                  -->
<!-- ========================================== -->
<div class="mb-5">
    <div class="d-flex align-items-center mb-4">
        <i class="feather icon-cpu text-c-green f-28 mr-3"></i>
        <h3 class="mb-0 text-success font-weight-bold">AI Token Usage Section</h3>
    </div>

    <!-- Token Usage Stats Row 1 -->
    <div class="row">
        <div class="col-md-4">
            <div class="glass-card stat-card">
                <div class="stat-icon icon-purple">
                    <i class="feather icon-cpu"></i>
                </div>
                <div class="stat-info">
                    <h3>{{ number_format($totalTokens) }}</h3>
                    <p>Total Tokens Used</p>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="glass-card stat-card">
                <div class="stat-icon icon-blue">
                    <i class="feather icon-arrow-down-left"></i>
                </div>
                <div class="stat-info">
                    <h3>{{ number_format($totalInputTokens) }}</h3>
                    <p>Input Tokens</p>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="glass-card stat-card">
                <div class="stat-icon icon-green">
                    <i class="feather icon-arrow-up-right"></i>
                </div>
                <div class="stat-info">
                    <h3>{{ number_format($totalOutputTokens) }}</h3>
                    <p>Output Tokens</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Token Usage Stats Row 2 -->
    <div class="row">
        <div class="col-md-4">
            <div class="glass-card stat-card">
                <div class="stat-icon icon-orange">
                    <i class="feather icon-bar-chart"></i>
                </div>
                <div class="stat-info">
                    <h3>{{ number_format($avgTokensPerGen) }}</h3>
                    <p>Avg Tokens / Gen</p>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="glass-card stat-card">
                <div class="stat-icon icon-purple">
                    <i class="feather icon-users"></i>
                </div>
                <div class="stat-info">
                    <h3>{{ number_format($totalActiveProfiles) }}</h3>
                    <p>Profiles With Token Activity</p>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="glass-card stat-card">
                <div class="stat-icon icon-green">
                    <i class="feather icon-bar-chart-2"></i>
                </div>
                <div class="stat-info">
                    <h3>{{ number_format($avgTokensPerProfile) }}</h3>
                    <p>Avg Tokens / Profile</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Token Charts Row -->
    <div class="row">
        <div class="col-lg-6">
            <div class="glass-card">
                <h5 class="mb-4"><i class="feather icon-bar-chart-2 text-success mr-2"></i> AI Token Usage Trend (Last 12 Months)</h5>
                <div class="chart-container">
                    <canvas id="tokenUsageChart"></canvas>
                </div>
            </div>
        </div>
        <div class="col-lg-6">
            <div class="glass-card">
                <h5 class="mb-4"><i class="feather icon-pie-chart text-info mr-2"></i> Top 5 Palm Profiles by Token Usage</h5>
                <div class="chart-container">
                    <canvas id="topProfilesChart"></canvas>
                </div>
            </div>
        </div>
    </div>

    <!-- Token Tables Row -->
    <div class="row">
        <!-- Token Usage Table (Report Wise) -->
        <div class="col-lg-6">
            <div class="glass-card">
                <div class="d-flex justify-content-between align-items-center mb-4">
                    <h5 class="mb-0"><i class="feather icon-bar-chart-2 text-success mr-2"></i> Token Usage Report Wise</h5>
                    <form id="tokenFilterForm" method="GET" action="{{ route('dashboard.ai-usage') }}">
                        <div class="filter-wrapper">
                            <select name="filter_month" class="premium-select" onchange="filterData(event)">
                                <option value="">All Months</option>
                                @foreach(range(1, 12) as $m)
                                    <option value="{{ $m }}" {{ $selectedMonth == $m ? 'selected' : '' }}>
                                        {{ date('F', mktime(0, 0, 0, $m, 1)) }}
                                    </option>
                                @endforeach
                            </select>
                            <div style="width: 1px; background: rgba(0, 0, 0, 0.08); margin: 5px 0;"></div>
                            <select name="filter_year" class="premium-select" onchange="filterData(event)">
                                <option value="">All Years</option>
                                @foreach(range(date('Y'), date('Y') - 5) as $y)
                                    <option value="{{ $y }}" {{ $selectedYear == $y ? 'selected' : '' }}>
                                        {{ $y }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </form>
                </div>
                <div class="table-responsive" id="tokenUsageTableContainer">
                    @include('dashboard.partials.token_usage_table')
                </div>
            </div>
        </div>

        <!-- Palm Profile Token Usage Table -->
        <div class="col-lg-6">
            <div class="glass-card">
                <div class="d-flex justify-content-between align-items-center mb-4">
                    <h5 class="mb-0"><i class="feather icon-user text-primary mr-2"></i> Palm Profile Token Usage</h5>
                    <form id="profileFilterForm" method="GET" action="{{ route('dashboard.ai-usage') }}">
                        <div class="filter-wrapper">
                            <select name="filter_month" class="premium-select" onchange="filterData(event)">
                                <option value="">All Months</option>
                                @foreach(range(1, 12) as $m)
                                    <option value="{{ $m }}" {{ $selectedMonth == $m ? 'selected' : '' }}>
                                        {{ date('F', mktime(0, 0, 0, $m, 1)) }}
                                    </option>
                                @endforeach
                            </select>
                            <div style="width: 1px; background: rgba(0, 0, 0, 0.08); margin: 5px 0;"></div>
                            <select name="filter_year" class="premium-select" onchange="filterData(event)">
                                <option value="">All Years</option>
                                @foreach(range(date('Y'), date('Y') - 5) as $y)
                                    <option value="{{ $y }}" {{ $selectedYear == $y ? 'selected' : '' }}>
                                        {{ $y }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </form>
                </div>
                <div class="table-responsive" id="profileTokensTableContainer">
                    @include('dashboard.partials.profile_tokens_table')
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const spentData = @json($monthlySpentData);
        const purchasedData = @json($monthlyPurchasedData);
        const transactionTypeData = @json($transactionTypeData);

        const colors = {
            green: '#00b894',
            red: '#d63031',
            blue: '#0984e3',
            purple: '#6c5ce7',
            orange: '#e17055'
        };

        // Transaction Type Chart
        const canvasType = document.getElementById('transactionTypeChart');
        if (canvasType) {
            const ctxType = canvasType.getContext('2d');
            new Chart(ctxType, {
                type: 'doughnut',
                data: {
                    labels: Object.keys(transactionTypeData).map(t => t.charAt(0).toUpperCase() + t.slice(1)),
                    datasets: [{
                        data: Object.values(transactionTypeData),
                        backgroundColor: [colors.green, colors.blue, colors.purple, colors.orange, colors.red]
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'bottom'
                        }
                    }
                }
            });
        }

        // Credit flow chart (Double line: spent vs added)
        const ctxFlow = document.getElementById('creditFlowChart').getContext('2d');
        new Chart(ctxFlow, {
            type: 'line',
            data: {
                labels: spentData.labels,
                datasets: [
                    {
                        label: 'Credits Added / Purchased',
                        data: purchasedData.data,
                        borderColor: colors.green,
                        backgroundColor: 'rgba(0, 184, 148, 0.1)',
                        borderWidth: 3,
                        fill: true,
                        tension: 0.4
                    },
                    {
                        label: 'Credits Spent',
                        data: spentData.data,
                        borderColor: colors.red,
                        backgroundColor: 'rgba(214, 48, 49, 0.1)',
                        borderWidth: 3,
                        fill: true,
                        tension: 0.4
                    }
                ]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });

        // Token Usage chart (Double line: input vs output tokens)
        const tokensData = @json($monthlyTokensData);
        const ctxTokens = document.getElementById('tokenUsageChart').getContext('2d');
        new Chart(ctxTokens, {
            type: 'line',
            data: {
                labels: tokensData.labels,
                datasets: [
                    {
                        label: 'Input Tokens',
                        data: tokensData.input,
                        borderColor: '#0984e3',
                        backgroundColor: 'rgba(9, 132, 227, 0.1)',
                        borderWidth: 3,
                        fill: true,
                        tension: 0.4
                    },
                    {
                        label: 'Output Tokens',
                        data: tokensData.output,
                        borderColor: '#6c5ce7',
                        backgroundColor: 'rgba(108, 92, 231, 0.1)',
                        borderWidth: 3,
                        fill: true,
                        tension: 0.4
                    }
                ]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });

        // Top Palm Profiles Chart (Horizontal Bar Chart)
        const topProfilesData = @json($topProfilesChartData);
        const ctxProfiles = document.getElementById('topProfilesChart').getContext('2d');
        new Chart(ctxProfiles, {
            type: 'bar',
            data: {
                labels: topProfilesData.labels,
                datasets: [{
                    label: 'Total Tokens Used',
                    data: topProfilesData.data,
                    backgroundColor: 'rgba(108, 92, 231, 0.2)',
                    borderColor: '#6c5ce7',
                    borderWidth: 2,
                    borderRadius: 8,
                    barThickness: 25
                }]
            },
            options: {
                indexAxis: 'y',
                responsive: true,
                maintainAspectRatio: false,
                scales: {
                    x: {
                        beginAtZero: true
                    }
                }
            }
        });
    });

    window.filterData = function(event) {
        // Sync selected dropdown values across both forms
        const monthSelects = document.querySelectorAll('select[name="filter_month"]');
        const yearSelects = document.querySelectorAll('select[name="filter_year"]');

        let selectedMonth = "";
        let selectedYear = "";

        if (event && event.target) {
            if (event.target.name === 'filter_month') {
                selectedMonth = event.target.value;
                monthSelects.forEach(sel => sel.value = selectedMonth);
                selectedYear = yearSelects[0].value;
            } else if (event.target.name === 'filter_year') {
                selectedYear = event.target.value;
                yearSelects.forEach(sel => sel.value = selectedYear);
                selectedMonth = monthSelects[0].value;
            }
        } else {
            selectedMonth = monthSelects[0].value;
            selectedYear = yearSelects[0].value;
        }

        // Fetch transactions table
        const transContainer = document.getElementById('transactionsTableContainer');
        transContainer.style.opacity = '0.5';
        transContainer.style.pointerEvents = 'none';
        fetch(`{{ route('dashboard.ai-usage') }}?type=transactions&filter_month=${selectedMonth}&filter_year=${selectedYear}`, {
            headers: { 'X-Requested-With': 'XMLHttpRequest' }
        })
        .then(response => response.text())
        .then(html => {
            transContainer.innerHTML = html;
            transContainer.style.opacity = '1';
            transContainer.style.pointerEvents = 'auto';
        })
        .catch(error => {
            console.error('Error fetching transactions:', error);
            transContainer.style.opacity = '1';
            transContainer.style.pointerEvents = 'auto';
        });

        // Fetch token usage table
        const tokenContainer = document.getElementById('tokenUsageTableContainer');
        tokenContainer.style.opacity = '0.5';
        tokenContainer.style.pointerEvents = 'none';
        fetch(`{{ route('dashboard.ai-usage') }}?type=token_usage&filter_month=${selectedMonth}&filter_year=${selectedYear}`, {
            headers: { 'X-Requested-With': 'XMLHttpRequest' }
        })
        .then(response => response.text())
        .then(html => {
            tokenContainer.innerHTML = html;
            tokenContainer.style.opacity = '1';
            tokenContainer.style.pointerEvents = 'auto';
        })
        .catch(error => {
            console.error('Error fetching token usage:', error);
            tokenContainer.style.opacity = '1';
            tokenContainer.style.pointerEvents = 'auto';
        });

        // Fetch palm profile token usage table
        const profileContainer = document.getElementById('profileTokensTableContainer');
        profileContainer.style.opacity = '0.5';
        profileContainer.style.pointerEvents = 'none';
        fetch(`{{ route('dashboard.ai-usage') }}?type=profile_tokens&filter_month=${selectedMonth}&filter_year=${selectedYear}`, {
            headers: { 'X-Requested-With': 'XMLHttpRequest' }
        })
        .then(response => response.text())
        .then(html => {
            profileContainer.innerHTML = html;
            profileContainer.style.opacity = '1';
            profileContainer.style.pointerEvents = 'auto';
        })
        .catch(error => {
            console.error('Error fetching profile token usage:', error);
            profileContainer.style.opacity = '1';
            profileContainer.style.pointerEvents = 'auto';
        });
    }

    // Handle AJAX Pagination clicks
    document.addEventListener('click', function(e) {
        if (e.target.closest('#transactionsTableContainer .pagination a')) {
            e.preventDefault();
            let url = e.target.closest('a').href;
            if (!url.includes('type=')) {
                url += url.includes('?') ? '&type=transactions' : '?type=transactions';
            }
            const container = document.getElementById('transactionsTableContainer');
            
            container.style.opacity = '0.5';
            container.style.pointerEvents = 'none';

            fetch(url, { 
                headers: { 
                    'X-Requested-With': 'XMLHttpRequest' 
                } 
            })
            .then(res => res.text())
            .then(html => {
                container.innerHTML = html;
                container.style.opacity = '1';
                container.style.pointerEvents = 'auto';
            })
            .catch(error => {
                console.error('Error paginating transactions:', error);
                container.style.opacity = '1';
                container.style.pointerEvents = 'auto';
            });
        }

        if (e.target.closest('#tokenUsageTableContainer .pagination a')) {
            e.preventDefault();
            let url = e.target.closest('a').href;
            if (!url.includes('type=')) {
                url += url.includes('?') ? '&type=token_usage' : '?type=token_usage';
            }
            const container = document.getElementById('tokenUsageTableContainer');
            
            container.style.opacity = '0.5';
            container.style.pointerEvents = 'none';

            fetch(url, { 
                headers: { 
                    'X-Requested-With': 'XMLHttpRequest' 
                } 
            })
            .then(res => res.text())
            .then(html => {
                container.innerHTML = html;
                container.style.opacity = '1';
                container.style.pointerEvents = 'auto';
            })
            .catch(error => {
                console.error('Error paginating token usage:', error);
                container.style.opacity = '1';
                container.style.pointerEvents = 'auto';
            });
        }

        if (e.target.closest('#profileTokensTableContainer .pagination a')) {
            e.preventDefault();
            let url = e.target.closest('a').href;
            if (!url.includes('type=')) {
                url += url.includes('?') ? '&type=profile_tokens' : '?type=profile_tokens';
            }
            const container = document.getElementById('profileTokensTableContainer');
            
            container.style.opacity = '0.5';
            container.style.pointerEvents = 'none';

            fetch(url, { 
                headers: { 
                    'X-Requested-With': 'XMLHttpRequest' 
                } 
            })
            .then(res => res.text())
            .then(html => {
                container.innerHTML = html;
                container.style.opacity = '1';
                container.style.pointerEvents = 'auto';
            })
            .catch(error => {
                console.error('Error paginating profile token usage:', error);
                container.style.opacity = '1';
                container.style.pointerEvents = 'auto';
            });
        }
    });
</script>
@endsection