@extends('layouts.app')

@section('title', 'HastAI Admin - Report Dashboard')
@section('page_title', 'Report 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 {
        display: flex;
        align-items: center;
        background: rgba(0, 0, 0, 0.04);
        border-radius: 12px;
        padding: 4px 8px;
        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')
<!-- Quick Stats Row -->
<div class="row">
    <div class="col-md-3">
        <div class="glass-card stat-card">
            <div class="stat-icon icon-purple">
                <i class="feather icon-file-text"></i>
            </div>
            <div class="stat-info">
                <h3>{{ number_format($totalReports) }}</h3>
                <p>Total Palm Reports</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-user"></i>
            </div>
            <div class="stat-info">
                <h3>{{ number_format($totalProfiles) }}</h3>
                <p>Active Palm Profiles</p>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="glass-card stat-card">
            <div class="stat-icon icon-blue">
                <i class="feather icon-bar-chart-2"></i>
            </div>
            <div class="stat-info">
                <h3>{{ $avgReportsPerUser }}</h3>
                <p>Avg Reports Per User</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-check-circle"></i>
            </div>
            <div class="stat-info">
                <h3>{{ $successRate }}%</h3>
                <p>Report Success Rate</p>
            </div>
        </div>
    </div>
</div>

<!-- Charts Row -->
<div class="row">
    <div class="col-lg-8">
        <div class="glass-card">
            <h5 class="mb-4"><i class="feather icon-activity text-primary mr-2"></i> Reports Generation Trend (Last 12 Months)</h5>
            <div class="chart-container">
                <canvas id="reportsTrendChart"></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> Category Distribution</h5>
            <div class="chart-container" style="height: 250px;">
                @if(empty($categoriesData))
                    <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="categoryDistributionChart"></canvas>
                @endif
            </div>
        </div>
    </div>
</div>

<!-- Language Distribution and Active Palms Row -->
<div class="row">
    <div class="col-lg-4">
        <div class="glass-card">
            <h5 class="mb-4"><i class="feather icon-globe text-primary mr-2"></i> Language Distribution</h5>
            <div class="chart-container" style="height: 250px;">
                @if(empty($languageData))
                    <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="languageDistributionChart"></canvas>
                @endif
            </div>
        </div>
    </div>
    <div class="col-lg-8">
        <div class="glass-card" style="min-height: 334px;">
            <h5 class="mb-4"><i class="feather icon-award text-warning mr-2"></i> Most Active Palm Profiles</h5>
            <div class="table-responsive">
                <table class="table table-hover mb-0">
                    <thead>
                        <tr>
                            <th>Profile Name / ID</th>
                            <th>User</th>
                            <th>Gender</th>
                            <th>Total Reports</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($topPalms as $palm)
                        <tr>
                            <td>
                                <a href="{{ route('palm-profiles.show', $palm->uuid) }}" class="text-primary font-weight-bold">
                                    {{ trim(($palm->first_name ?? '') . ' ' . ($palm->last_name ?? '')) ?: 'Profile #'.$palm->id }}
                                </a>
                            </td>
                            <td>{{ $palm->user->name ?? 'N/A' }}</td>
                            <td>{{ ucfirst($palm->gender ?? 'N/A') }}</td>
                            <td><span class="badge badge-light-success">{{ number_format($palm->reports_count ?? 0) }} Reports</span></td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="4" class="text-center text-muted">No active palm profiles found.</td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- AI Engine Failure Logs -->
<div class="row">
    <div class="col-lg-12">
        <div class="glass-card">
            <h5 class="mb-4"><i class="feather icon-alert-octagon text-danger mr-2"></i> AI Engine Failure Logs</h5>
            <div class="table-responsive">
                <table class="table table-hover">
                    <thead>
                        <tr>
                            <th>Report ID</th>
                            <th>User</th>
                            <th>Category</th>
                            <th>Error Message</th>
                            <th>Failed At</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($failedReports as $report)
                        <tr>
                            <td>
                                <a href="{{ route('reports.show', $report->uuid) }}" class="text-danger font-weight-bold">
                                    {{ $report->formatted_id }}
                                </a>
                            </td>
                            <td>{{ $report->user->name ?? 'N/A' }}</td>
                            <td>
                                <span class="badge badge-light-danger">
                                    {{ $report->category->title ?? 'Default' }}
                                </span>
                            </td>
                            <td><span class="text-danger font-weight-600">{{ $report->status_message ?? 'Unknown AI Generation Error' }}</span></td>
                            <td>{{ $report->created_at->diffForHumans() }}</td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="5" class="text-center text-muted">No failed reports logged. All engine services operational.</td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- Recent Reports Table -->
<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 Generated Reports</h5>
                <form id="filterForm" method="GET" action="{{ route('dashboard.reports') }}">
                    <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="reportsTableContainer">
                @include('dashboard.partials.reports_table')
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const trendData = @json($monthlyReportData);
        const categoryData = @json($categoriesData);
        const languageData = @json($languageData);

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

        // 1. Reports Generation Trend Chart
        const ctxTrend = document.getElementById('reportsTrendChart').getContext('2d');
        new Chart(ctxTrend, {
            type: 'line',
            data: {
                labels: trendData.labels,
                datasets: [{
                    label: 'Palm Reports Generated',
                    data: trendData.data,
                    borderColor: colors.purple,
                    backgroundColor: 'rgba(108, 92, 231, 0.1)',
                    borderWidth: 3,
                    fill: true,
                    tension: 0.4
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });

        // 2. Category Distribution Chart
        const canvasCategory = document.getElementById('categoryDistributionChart');
        if (canvasCategory) {
            const ctxCategory = canvasCategory.getContext('2d');
            new Chart(ctxCategory, {
                type: 'pie',
                data: {
                    labels: Object.keys(categoryData),
                    datasets: [{
                        data: Object.values(categoryData),
                        backgroundColor: [colors.blue, colors.purple, colors.teal, colors.orange, colors.red, '#ffeaa7', '#fab1a0']
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'right'
                        }
                    }
                }
            });
        }

        // 3. Language Distribution Chart
        const canvasLanguage = document.getElementById('languageDistributionChart');
        if (canvasLanguage) {
            const ctxLanguage = canvasLanguage.getContext('2d');
            new Chart(ctxLanguage, {
                type: 'doughnut',
                data: {
                    labels: Object.keys(languageData).map(lang => lang.toUpperCase()),
                    datasets: [{
                        data: Object.values(languageData),
                        backgroundColor: [colors.teal, colors.orange, colors.purple, colors.blue, colors.red, '#ffeaa7', '#fab1a0']
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'right'
                        }
                    }
                }
            });
        }
    });

    window.filterData = function(event) {
        const monthSelect = document.querySelector('select[name="filter_month"]');
        const yearSelect = document.querySelector('select[name="filter_year"]');

        const selectedMonth = monthSelect ? monthSelect.value : "";
        const selectedYear = yearSelect ? yearSelect.value : "";

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

    // Handle AJAX Pagination clicks
    document.addEventListener('click', function(e) {
        if (e.target.closest('#reportsTableContainer .pagination a')) {
            e.preventDefault();
            const url = e.target.closest('a').href;
            const container = document.getElementById('reportsTableContainer');
            
            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 reports:', error);
                container.style.opacity = '1';
                container.style.pointerEvents = 'auto';
            });
        }
    });
</script>
@endsection