@extends('layouts.app')

@section('title', 'Reports Overview - Admin')

@section('content')
<div class="container-fluid px-4">
    {{-- Page Header --}}
    <div class="d-flex flex-wrap align-items-center justify-content-between mb-4">
        <div>
            <h1 class="h3 mb-1 fw-700">Reports & Analytics</h1>
            <p class="text-muted small mb-0">Comprehensive insights into your marketplace performance</p>
        </div>
        <div class="d-flex gap-2">
            <a href="{{ route('admin.reports.export', ['type' => 'sales'] + request()->query()) }}"
               class="btn btn-sm btn-success">
                <i class="fas fa-file-export me-1"></i> Export Sales
            </a>
            <button type="button" class="btn btn-sm btn-outline-secondary" onclick="window.print()">
                <i class="fas fa-print me-1"></i> Print
            </button>
        </div>
    </div>

    {{-- Report Navigation --}}
    @include('admin.reports.partials.nav')

    {{-- Period Filter --}}
    @include('admin.reports.partials.period-filter', ['from' => $from, 'to' => $to])

    {{-- Summary Statistics --}}
    @include('admin.reports.partials.summary-cards', ['summary' => $summary])

    {{-- Comparison Cards --}}
    @include('admin.reports.partials.comparison-cards', ['comparison' => $comparison])

    {{-- Revenue Chart --}}
    <div class="row g-4 mb-4">
        <div class="col-12">
            <div class="card border-0 shadow-sm">
                <div class="card-header bg-white border-0 py-3">
                    <h6 class="fw-700 mb-0"><i class="fas fa-chart-area text-primary me-2"></i>Revenue & Orders Trend</h6>
                </div>
                <div class="card-body">
                    <canvas id="revenueChart" height="100"></canvas>
                </div>
            </div>
        </div>
    </div>

    {{-- Top Performers --}}
    <div class="row g-4 mb-4">
        {{-- Top Products --}}
        <div class="col-lg-4">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-header bg-white border-0 py-3 d-flex justify-content-between align-items-center">
                    <h6 class="fw-700 mb-0"><i class="fas fa-crown text-primary me-2"></i>Top Products</h6>
                    <a href="{{ route('admin.reports.products', request()->query()) }}" class="btn btn-sm btn-outline-primary">
                        View All
                    </a>
                </div>
                <div class="card-body p-0">
                    @forelse($topProducts as $index => $product)
                        <div class="d-flex align-items-center border-bottom px-3 py-2">
                            <div class="me-3">
                                <span class="badge rounded-circle p-2
                                    {{ $index === 0 ? 'bg-warning text-dark' : 'bg-light text-dark' }}"
                                    style="min-width:30px;height:30px;display:flex;align-items:center;justify-content:center;">
                                    {{ $index + 1 }}
                                </span>
                            </div>
                            <div class="flex-grow-1 min-width-0">
                                <div class="fw-600 text-truncate small">{{ data_get($product, 'product_title', 'Unknown') }}</div>
                                <div class="text-muted small">{{ number_format((int) data_get($product, 'units', 0)) }} units</div>
                            </div>
                            <div class="text-end ms-2">
                                <div class="fw-700 small">{{ number_format((float) data_get($product, 'revenue', 0), 2) }}</div>
                            </div>
                        </div>
                    @empty
                        <div class="text-center text-muted py-4">
                            <i class="fas fa-cube fa-2x mb-2 d-block opacity-25"></i>
                            <small>No product data</small>
                        </div>
                    @endforelse
                </div>
            </div>
        </div>

        {{-- Top Sellers --}}
        <div class="col-lg-4">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-header bg-white border-0 py-3 d-flex justify-content-between align-items-center">
                    <h6 class="fw-700 mb-0"><i class="fas fa-trophy text-warning me-2"></i>Top Sellers</h6>
                    <a href="{{ route('admin.reports.sellers', request()->query()) }}" class="btn btn-sm btn-outline-primary">
                        View All
                    </a>
                </div>
                <div class="card-body p-0">
                    @forelse($topSellers as $index => $seller)
                        <div class="d-flex align-items-center border-bottom px-3 py-2">
                            <div class="me-3">
                                <span class="badge rounded-circle p-2
                                    {{ $index === 0 ? 'bg-warning text-dark' : 'bg-light text-dark' }}"
                                    style="min-width:30px;height:30px;display:flex;align-items:center;justify-content:center;">
                                    {{ $index + 1 }}
                                </span>
                            </div>
                            <div class="flex-grow-1 min-width-0">
                                <div class="fw-600 text-truncate small">{{ data_get($seller, 'seller_name', 'Unknown Seller') }}</div>
                                <div class="text-muted small">{{ number_format((int) data_get($seller, 'total_orders', 0)) }} orders</div>
                            </div>
                            <div class="text-end ms-2">
                                <div class="fw-700 small">{{ number_format((float) data_get($seller, 'total_revenue', 0), 2) }}</div>
                            </div>
                        </div>
                    @empty
                        <div class="text-center text-muted py-4">
                            <i class="fas fa-store fa-2x mb-2 d-block opacity-25"></i>
                            <small>No seller data</small>
                        </div>
                    @endforelse
                </div>
            </div>
        </div>

        {{-- Top Categories --}}
        <div class="col-lg-4">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-header bg-white border-0 py-3 d-flex justify-content-between align-items-center">
                    <h6 class="fw-700 mb-0"><i class="fas fa-tags text-success me-2"></i>Top Categories</h6>
                </div>
                <div class="card-body p-0">
                    @forelse($topCategories as $index => $category)
                        <div class="d-flex align-items-center border-bottom px-3 py-2">
                            <div class="me-3">
                                <span class="badge rounded-circle p-2 bg-light text-dark"
                                      style="min-width:30px;height:30px;display:flex;align-items:center;justify-content:center;">
                                    {{ $index + 1 }}
                                </span>
                            </div>
                            <div class="flex-grow-1 min-width-0">
                                <div class="fw-600 text-truncate small">{{ data_get($category, 'category_name', 'Uncategorized') }}</div>
                                <div class="text-muted small">{{ number_format((int) data_get($category, 'total_units', 0)) }} units</div>
                            </div>
                            <div class="text-end ms-2">
                                <div class="fw-700 small">{{ number_format((float) data_get($category, 'total_revenue', 0), 2) }}</div>
                            </div>
                        </div>
                    @empty
                        <div class="text-center text-muted py-4">
                            <i class="fas fa-tags fa-2x mb-2 d-block opacity-25"></i>
                            <small>No category data</small>
                        </div>
                    @endforelse
                </div>
            </div>
        </div>
    </div>

    {{-- Payment Analytics --}}
    <div class="row g-4 mb-4">
        <div class="col-lg-6">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-header bg-white border-0 py-3">
                    <h6 class="fw-700 mb-0"><i class="fas fa-credit-card text-primary me-2"></i>Revenue by Payment Method</h6>
                </div>
                <div class="card-body">
                    @if(!empty($paymentAnalytics['by_method']))
                        @php
                            $totalRevenue = collect($paymentAnalytics['by_method'])
                                ->sum(fn ($method) => (float) data_get($method, 'total', 0));
                        @endphp
                        @foreach($paymentAnalytics['by_method'] as $method)
                            @php
                                $methodName = (string) data_get($method, 'payment_method', 'unknown');
                                $methodTotal = (float) data_get($method, 'total', 0);
                                $methodCount = (int) data_get($method, 'count', 0);
                                $methodPercentage = $totalRevenue > 0
                                    ? min(100, max(0, ($methodTotal / $totalRevenue) * 100))
                                    : 0;
                            @endphp
                            <div class="mb-2">
                                <div class="d-flex justify-content-between align-items-center mb-1">
                                    <span class="small fw-600">{{ ucfirst(str_replace('_', ' ', $methodName)) }}</span>
                                    <span class="small fw-700">{{ number_format($methodTotal, 2) }}</span>
                                </div>
                                <div class="progress" style="height:8px;">
                                    <div class="progress-bar bg-primary" role="progressbar"
                                         style="width: {{ $methodPercentage }}%"
                                         aria-valuenow="{{ $methodPercentage }}"
                                         aria-valuemin="0"
                                         aria-valuemax="100">
                                    </div>
                                </div>
                                <div class="text-muted small">{{ number_format($methodCount) }} {{ \Illuminate\Support\Str::plural('transaction', $methodCount) }}</div>
                            </div>
                        @endforeach
                    @else
                        <div class="text-center text-muted py-4">
                            <i class="fas fa-credit-card fa-2x mb-2 d-block opacity-25"></i>
                            <small>No payment data</small>
                        </div>
                    @endif
                </div>
            </div>
        </div>

        <div class="col-lg-6">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-header bg-white border-0 py-3">
                    <h6 class="fw-700 mb-0"><i class="fas fa-chart-pie text-primary me-2"></i>Order Status Distribution</h6>
                </div>
                <div class="card-body">
                    @if(!empty($paymentAnalytics['by_status']))
                        <div class="row g-2">
                            @foreach($paymentAnalytics['by_status'] as $status)
                                @php
                                    $paymentStatus = (string) data_get($status, 'payment_status', 'unknown');
                                    $paymentStatusCount = (int) data_get($status, 'count', 0);
                                @endphp
                                <div class="col-6">
                                    <div class="border rounded p-2 text-center">
                                        <span class="text-muted small d-block">
                                            {{ ucfirst(str_replace('_', ' ', $paymentStatus)) }}
                                        </span>
                                        <span class="fw-700 fs-5">{{ number_format($paymentStatusCount) }}</span>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    @else
                        <div class="text-center text-muted py-4">
                            <i class="fas fa-chart-pie fa-2x mb-2 d-block opacity-25"></i>
                            <small>No status data</small>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>

    {{-- Daily Sales Table --}}
    <div class="card border-0 shadow-sm">
        <div class="card-header bg-white border-0 py-3">
            <h6 class="fw-700 mb-0"><i class="fas fa-table text-primary me-2"></i>Daily Sales Breakdown</h6>
        </div>
        <div class="card-body p-0">
            <div class="table-responsive" style="max-height:400px;overflow-y:auto;">
                <table class="table table-hover table-sm align-middle mb-0">
                    <thead class="bg-light sticky-top">
                        <tr>
                            <th>Date</th>
                            <th class="text-end">Orders</th>
                            <th class="text-end">Revenue</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($sales as $row)
                            <tr>
                                <td>{{ \Carbon\Carbon::parse(data_get($row, 'report_date'))->format('M d, Y (D)') }}</td>
                                <td class="text-end">{{ number_format((int) data_get($row, 'orders_count', 0)) }}</td>
                                <td class="text-end fw-700">{{ number_format((float) data_get($row, 'revenue', 0), 2) }}</td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="3" class="text-center text-muted py-4">No sales data for this period</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
@endsection

@push('styles')
<style>
    .fw-600 { font-weight: 600; }
    .fw-700 { font-weight: 700; }
    .min-width-0 { min-width: 0; }
</style>
@endpush

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    var chartData = @json($chartData);
    var ctx = document.getElementById('revenueChart').getContext('2d');

    new Chart(ctx, {
        type: 'line',
        data: {
            labels: chartData.labels || [],
            datasets: [
                {
                    label: 'Revenue',
                    data: chartData.revenue || [],
                    borderColor: '#00a99d',
                    backgroundColor: 'rgba(0,169,157,0.1)',
                    fill: true,
                    tension: 0.4,
                    borderWidth: 3,
                    pointRadius: 3,
                    pointBackgroundColor: '#00a99d',
                    yAxisID: 'y'
                },
                {
                    label: 'Orders',
                    data: chartData.orders || [],
                    borderColor: '#0dcaf0',
                    backgroundColor: 'rgba(13,202,240,0.1)',
                    fill: false,
                    tension: 0.4,
                    borderWidth: 2,
                    pointRadius: 2,
                    pointBackgroundColor: '#0dcaf0',
                    borderDash: [5, 5],
                    yAxisID: 'y1'
                }
            ]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            interaction: { intersect: false, mode: 'index' },
            plugins: {
                legend: { position: 'top', labels: { usePointStyle: true, padding: 20 } },
                tooltip: {
                    backgroundColor: 'rgba(255,255,255,0.95)',
                    titleColor: '#1a202c',
                    bodyColor: '#4a5568',
                    borderColor: '#e2e8f0',
                    borderWidth: 1,
                    padding: 12
                }
            },
            scales: {
                y: { beginAtZero: true, position: 'left', grid: { color: 'rgba(0,0,0,0.05)' } },
                y1: { beginAtZero: true, position: 'right', grid: { display: false } }
            }
        }
    });
});
</script>
@endpush