@extends('layouts.app')

@section('title', 'Vendor Analytics Dashboard')

@section('content')
<div class="row g-4">
    <!-- Sidebar -->
    @include('vendor.partials.sidebar-column')

    <!-- Main Content -->
    <div class="col-lg-10">
        <!-- Header -->
        <div class="d-flex justify-content-between align-items-center mb-4">
            <div>
                <h4 class="fw-bold mb-1">Analytics Dashboard 🚀</h4>
                <p class="text-muted small mb-0">Real-time insights on your shop's performance.</p>
            </div>
            <div class="d-flex gap-2">
                <a href="{{ route('vendor.analytics.export') }}" class="btn btn-white border shadow-sm"><i class="bi bi-download"></i> Export Report</a>
            </div>
        </div>

        <!-- Smart Insights Section (AI) -->
        @if(count($insights) > 0)
        <div class="card border-0 shadow-sm mb-4 bg-gradient-primary-to-secondary">
             <div class="card-body">
                 <h6 class="fw-bold mb-3"><i class="bi bi-stars text-warning me-2"></i> Smart Insights & Recommendations</h6>
                 <div class="row g-3">
                     @foreach($insights as $insight)
                     <div class="col-md-4">
                         <div class="alert alert-{{ $insight['type'] === 'warning' ? 'warning' : ($insight['type'] === 'success' ? 'success' : 'light border') }} mb-0 d-flex align-items-start small">
                             <i class="bi {{ $insight['icon'] }} fs-5 me-2"></i>
                             <div>
                                 {{ $insight['message'] }}
                             </div>
                         </div>
                     </div>
                     @endforeach
                 </div>
             </div>
        </div>
        @endif

        <!-- 1. KPI Cards (Top Section) -->
        <div class="row g-3 mb-4">
            <div class="col-lg-3 col-md-6 col-6">
                <div class="card border-0 shadow-sm h-100 kpi-card bg-primary-subtle text-primary">
                    <div class="card-body p-3">
                        <div class="d-flex justify-content-between align-items-start">
                             <div>
                                 <span class="small text-uppercase fw-bold opacity-75">Total Revenue</span>
                                 <h4 class="fw-bold mb-0 mt-1">₹{{ number_format($totalRevenue) }}</h4>
                             </div>
                             <div class="icon-box bg-white rounded-circle p-2 shadow-sm text-primary">
                                 <i class="bi bi-cash-stack fs-5"></i>
                             </div>
                        </div>
                        <div class="mt-3 small">
                            <span class="text-success fw-bold"><i class="bi bi-arrow-up"></i> 12%</span> vs last month
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-6 col-6">
                 <div class="card border-0 shadow-sm h-100 kpi-card bg-success-subtle text-success">
                    <div class="card-body p-3">
                        <div class="d-flex justify-content-between align-items-start">
                             <div>
                                 <span class="small text-uppercase fw-bold opacity-75">Total Orders</span>
                                 <h4 class="fw-bold mb-0 mt-1">{{ $totalOrders }}</h4>
                             </div>
                             <div class="icon-box bg-white rounded-circle p-2 shadow-sm text-success">
                                 <i class="bi bi-box-seam fs-5"></i>
                             </div>
                        </div>
                         <div class="mt-3 small">
                            <span class="text-success fw-bold"><i class="bi bi-arrow-up"></i> 5 new</span> today
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-6 col-6">
                 <div class="card border-0 shadow-sm h-100 kpi-card bg-warning-subtle text-warning-emphasis">
                    <div class="card-body p-3">
                        <div class="d-flex justify-content-between align-items-start">
                             <div>
                                 <span class="small text-uppercase fw-bold opacity-75">Avg Rating</span>
                                 <h4 class="fw-bold mb-0 mt-1">{{ $avgRating }} <small class="fs-6 text-muted">/ 5</small></h4>
                             </div>
                             <div class="icon-box bg-white rounded-circle p-2 shadow-sm text-warning">
                                 <i class="bi bi-star-fill fs-5"></i>
                             </div>
                        </div>
                         <div class="mt-3 small">
                            <span class="opacity-75">{{ $totalReviews }} total reviews</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-6 col-6">
                 <div class="card border-0 shadow-sm h-100 kpi-card bg-danger-subtle text-danger">
                    <div class="card-body p-3">
                        <div class="d-flex justify-content-between align-items-start">
                             <div>
                                 <span class="small text-uppercase fw-bold opacity-75">Cancel Rate</span>
                                 <h4 class="fw-bold mb-0 mt-1">{{ $cancelRate }}%</h4>
                             </div>
                             <div class="icon-box bg-white rounded-circle p-2 shadow-sm text-danger">
                                 <i class="bi bi-x-circle fs-5"></i>
                             </div>
                        </div>
                         <div class="mt-3 small">
                            <span class="opacity-75">Keep below 5%</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 2. Charts & Product Status -->
        <div class="row g-4 mb-4">
            <!-- Sales Chart -->
            <div class="col-lg-8">
                <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-bold mb-0"><i class="bi bi-graph-up me-2 text-primary"></i> Monthly Sales Overview</h6>
                        <select class="form-select form-select-sm w-auto border-0 bg-light fw-bold text-muted">
                            <option>Last 6 Months</option>
                            <option>Last Year</option>
                        </select>
                    </div>
                    <div class="card-body">
                        <canvas id="salesChart" height="250" style="width: 100%;"></canvas>
                    </div>
                </div>
            </div>

            <!-- Product Status Summary -->
            <div class="col-lg-4">
                <div class="card border-0 shadow-sm h-100">
                    <div class="card-header bg-white border-0 py-3">
                         <h6 class="fw-bold mb-0"><i class="bi bi-pie-chart me-2 text-primary"></i> Product Status</h6>
                    </div>
                    <div class="card-body d-flex align-items-center justify-content-center flex-column">
                        <div class="position-relative mb-3" style="width: 150px; height: 150px;">
                            <canvas id="statusChart"></canvas>
                             <div class="position-absolute top-50 start-50 translate-middle text-center">
                                <h4 class="fw-bold mb-0">{{ $totalProducts }}</h4>
                                <small class="text-muted" style="font-size: 0.7rem;">Total</small>
                            </div>
                        </div>
                        
                        <div class="w-100 mt-2">
                            <div class="d-flex justify-content-between mb-2 small border-bottom pb-2">
                                <span><i class="bi bi-circle-fill text-success fs-6 me-1"></i> Active (Approved)</span>
                                <span class="fw-bold">{{ $approvedProducts }}</span>
                            </div>
                            <div class="d-flex justify-content-between mb-2 small border-bottom pb-2">
                                <span><i class="bi bi-circle-fill text-warning fs-6 me-1"></i> Pending Review</span>
                                <span class="fw-bold">{{ $pendingProducts }}</span>
                            </div>
                            <div class="d-flex justify-content-between small">
                                <span><i class="bi bi-circle-fill text-danger fs-6 me-1"></i> Rejected</span>
                                <span class="fw-bold">{{ $rejectedProducts }}</span>
                            </div>
                        </div>

                         <div class="alert alert-info border-0 bg-info-subtle text-info-emphasis mt-3 w-100 py-2 small mb-0">
                            <i class="bi bi-clock-history me-1"></i> Avg Approval Time: <strong>{{ $avgApprovalHours }} hrs</strong>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 3. Top Products & Earnings -->
        <div class="row g-4 mb-4">
            <!-- Top Selling Products -->
             <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-bold mb-0"><i class="bi bi-trophy me-2 text-warning"></i> Top Selling Products</h6>
                    </div>
                    <div class="card-body p-0">
                        <div class="table-responsive">
                            <table class="table table-hover align-middle mb-0">
                                <thead class="bg-light small">
                                    <tr>
                                        <th class="ps-4 text-uppercase border-0 text-muted">Product</th>
                                        <th class="text-uppercase border-0 text-muted">Sold</th>
                                        <th class="text-uppercase border-0 text-muted text-end pe-4">Revenue</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse($topProducts as $item)
                                    <tr>
                                        <td class="ps-4">
                                            <div class="d-flex align-items-center">
                                                @php $img = $item->product->images->where('is_primary', 1)->first(); @endphp
                                                <img src="{{ $img ? media_url($img->image_path) : 'https://placehold.co/40' }}" class="rounded me-2 border" width="40" height="40">
                                                <div>
                                                    <h6 class="mb-0 small fw-bold text-truncate" style="max-width: 150px;">{{ $item->product->name }}</h6>
                                                    <small class="text-muted d-block" style="font-size: 0.7rem;">SKU: {{ $item->product->sku }}</small>
                                                </div>
                                            </div>
                                        </td>
                                        <td class="fw-bold text-primary">{{ $item->sold }}</td>
                                        <td class="text-end pe-4 fw-bold">₹{{ number_format($item->sold * $item->product->sale_price ?? $item->product->price) }}</td>
                                    </tr>
                                    @empty
                                    <tr><td colspan="3" class="text-center py-4 text-muted small">No sales yet</td></tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                 </div>
             </div>

             <!-- Earnings Details -->
             <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-bold mb-0"><i class="bi bi-wallet2 me-2 text-success"></i> Earnings Breakdown</h6>
                    </div>
                    <div class="card-body">
                        <div class="d-flex align-items-center mb-4 p-3 rounded-3 bg-light border-dashed">
                            <div class="me-3 display-6 text-success"><i class="bi bi-currency-rupee"></i></div>
                            <div>
                                <h3 class="fw-bold mb-0">₹{{ number_format($earnings['month']) }}</h3>
                                <small class="text-muted">Earnings this Month</small>
                            </div>
                        </div>
                        
                        <div class="row g-3">
                            <div class="col-6">
                                <div class="border rounded p-3 text-center">
                                    <small class="text-muted d-block mb-1">Today</small>
                                    <h5 class="fw-bold mb-0 text-dark">₹{{ number_format($earnings['today']) }}</h5>
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="border rounded p-3 text-center">
                                    <small class="text-muted d-block mb-1">This Week</small>
                                    <h5 class="fw-bold mb-0 text-dark">₹{{ number_format($earnings['week']) }}</h5>
                                </div>
                            </div>
                             <div class="col-12 mt-3">
                                <div class="border rounded p-3 d-flex justify-content-between align-items-center bg-warning-subtle border-warning-subtle">
                                    <div class="d-flex align-items-center">
                                        <i class="bi bi-hourglass-split text-warning-emphasis me-2 fs-5"></i>
                                        <div>
                                            <h6 class="fw-bold mb-0 text-dark">Pending Payout</h6>
                                            <small class="text-muted" style="font-size: 0.75rem;">To be processed next cycle</small>
                                        </div>
                                    </div>
                                    <h5 class="fw-bold mb-0 text-dark">₹{{ number_format($earnings['pending']) }}</h5>
                                </div>
                            </div>
                        </div>
                     </div> 
                </div>
             </div>
        </div>

        <!-- 4. Ratings & Low Performance -->
        <div class="row g-4 mb-5">
             <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-bold mb-0"><i class="bi bi-star me-2 text-warning"></i> Feedback Overview</h6>
                    </div>
                    <div class="card-body">
                        <div class="d-flex align-items-center mb-4">
                            <div class="text-center me-4">
                                <h1 class="fw-bold mb-0 display-4 text-warning">{{ $avgRating }}</h1>
                                <div class="small text-muted">Average Rating</div>
                            </div>
                            <div class="flex-grow-1">
                                <!-- Ratings Bars -->
                                @foreach([5,4,3,2,1] as $star)
                                @php 
                                    $count = $ratingsCount[$star] ?? 0;
                                    $percent = $totalReviews > 0 ? ($count / $totalReviews) * 100 : 0;
                                    $color = $star >= 4 ? 'bg-success' : ($star == 3 ? 'bg-warning' : 'bg-danger');
                                @endphp
                                <div class="d-flex align-items-center mb-1 small">
                                    <span class="me-2 text-muted" style="width: 20px;">{{ $star }} <i class="bi bi-star-fill" style="font-size: 8px;"></i></span>
                                    <div class="progress flex-grow-1" style="height: 6px;">
                                        <div class="progress-bar {{ $color }}" style="width: {{ $percent }}%"></div>
                                    </div>
                                    <span class="ms-2 text-muted text-end" style="width: 30px;">{{ $count }}</span>
                                </div>
                                @endforeach
                            </div>
                        </div>
                        
                         <h6 class="fw-bold small text-uppercase text-muted mb-3">Recent Alerts</h6>
                         <div class="alert alert-light border d-flex align-items-start small p-2">
                             <i class="bi bi-info-circle text-primary me-2 mt-1"></i>
                             <div>
                                 <strong>Quality Improvement Needed</strong>
                                 <p class="mb-0 text-muted">2 products have rating below 3.0. Check reviews for details.</p>
                             </div>
                         </div>
                    </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-bold mb-0"><i class="bi bi-exclamation-triangle me-2 text-danger"></i> Low Performing / Review Needed</h6>
                    </div>
                    <div class="card-body p-0">
                         <div class="list-group list-group-flush">
                             @forelse($lowPerforming as $product)
                             <div class="list-group-item d-flex align-items-center p-3 border-0 border-bottom">
                                 <x-product-list-thumb :product="$product" size="md" class="me-3 mb-0 flex-shrink-0" />
                                 <div class="flex-grow-1">
                                     <h6 class="mb-1 small fw-bold">{{ $product->name }}</h6>
                                     <div class="small">
                                         @if($product->orderItems_count == 0)
                                            <span class="badge bg-danger-subtle text-danger">Zero Sales</span>
                                         @else
                                            <span class="badge bg-warning-subtle text-warning-emphasis">Low Rating</span>
                                         @endif
                                         <span class="text-muted ms-2">Stock: {{ $product->stock_qty }}</span>
                                     </div>
                                 </div>
                                 <a href="{{ route('vendor.products.edit', $product->id) }}" class="btn btn-sm btn-outline-dark">Fix</a>
                             </div>
                             @empty
                             <div class="text-center py-5 text-muted small">
                                 <i class="bi bi-check-circle fs-1 text-success d-block mb-2"></i>
                                 Great! No low performing products found.
                             </div>
                             @endforelse
                         </div>
                    </div>
                 </div>
             </div>
        </div>

    </div>
</div>

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    // Sales Chart
    const ctx = document.getElementById('salesChart').getContext('2d');
    new Chart(ctx, {
        type: 'line',
        data: {
            labels: @json($months),
            datasets: [{
                label: 'Revenue (₹)',
                data: @json($salesValues),
                borderColor: '#4f46e5',
                backgroundColor: 'rgba(79, 70, 229, 0.1)',
                borderWidth: 2,
                tension: 0.4,
                fill: true,
                pointBackgroundColor: '#ffffff',
                pointBorderColor: '#4f46e5',
                pointBorderWidth: 2,
                pointRadius: 4,
                pointHoverRadius: 6
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: { display: false }
            },
            scales: {
                y: {
                    beginAtZero: true,
                    grid: { borderDash: [2, 2], drawBorder: false },
                    ticks: { callback: function(value) { return '₹' + value; } }
                },
                x: {
                    grid: { display: false, drawBorder: false }
                }
            }
        }
    });

    // Product Status Chart
    const ctxStatus = document.getElementById('statusChart').getContext('2d');
    new Chart(ctxStatus, {
        type: 'doughnut',
        data: {
            labels: ['Approved', 'Pending', 'Rejected'],
            datasets: [{
                data: [{{ $approvedProducts }}, {{ $pendingProducts }}, {{ $rejectedProducts }}],
                backgroundColor: ['#10b981', '#f59e0b', '#ef4444'],
                borderWidth: 0,
                hoverOffset: 4
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            cutout: '75%',
            plugins: {
                legend: { display: false }
            }
        }
    });
</script>
@endpush

<style>
    .kpi-card { transition: transform 0.2s; }
    .kpi-card:hover { transform: translateY(-5px); }
    .border-dashed { border: 2px dashed #e5e7eb; }
</style>
@endsection