@extends('layouts.admin')

@section('title', 'Dashboard - Report Admin')

@section('content')
<div class="space-y-6">
    <!-- Welcome Banner -->
    <div class="relative overflow-hidden rounded-xl bg-gradient-to-r from-blue-600 via-blue-500 to-cyan-400 text-white p-6 shadow-sm">
        <div class="relative z-10 flex flex-col lg:flex-row lg:items-center justify-between gap-4">
            <div class="flex items-start gap-4 max-w-3xl">
                <div class="p-3 bg-white/15 backdrop-blur-md rounded-xl flex-shrink-0">
                    <span class="material-symbols-outlined text-[32px]">rocket_launch</span>
                </div>
                <div class="flex flex-col gap-2">
                    <div class="inline-flex items-center gap-2 px-2.5 py-0.5 rounded-full bg-white/20 w-fit">
                        <span class="w-1.5 h-1.5 rounded-full bg-green-300"></span>
                        <span class="text-xs font-semibold tracking-wide">PANDUAN PEMULA UMKM</span>
                    </div>
                    <h2 class="text-xl font-bold">Mulai hitung laba bersih toko dalam 2 langkah mudah:</h2>
                    <div class="flex flex-col sm:flex-row sm:items-center gap-2 mt-1 text-sm">
                        <div class="flex items-center gap-2">
                            <span class="flex items-center justify-center w-5 h-5 rounded-full bg-white text-blue-600 text-xs font-bold">1</span>
                            <span>Upload laporan settlement marketplace</span>
                        </div>
                        <span class="hidden sm:inline text-white/60">→</span>
                        <div class="flex items-center gap-2">
                            <span class="flex items-center justify-center w-5 h-5 rounded-full bg-white text-blue-600 text-xs font-bold">2</span>
                            <span>Lihat keuntungan bersih otomatis</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="flex-shrink-0">
                <a href="{{ route('admin.import') }}" class="inline-flex items-center justify-center gap-2 px-6 py-2.5 rounded-lg bg-white text-blue-600 font-semibold shadow-sm hover:bg-gray-100 transition-all">
                    <span>Upload Laporan Sekarang</span>
                    <span class="material-symbols-outlined text-lg">arrow_forward</span>
                </a>
            </div>
        </div>
    </div>

    @if($missingHppCount > 0 || $missingHppOrdersCount > 0)
    <!-- Peringatan: Produk/transaksi belum ada HPP -->
    <div class="bg-amber-50 border border-amber-200 rounded-xl p-4 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
        <div class="flex items-start gap-3">
            <span class="material-symbols-outlined text-amber-600">warning</span>
            <div class="text-sm text-amber-800">
                <p class="font-semibold">Ada produk yang belum memiliki HPP</p>
                <p class="text-amber-700">
                    {{ $missingHppCount }} produk di database belum ada HPP
                    @if($missingHppOrdersCount > 0) — {{ number_format($missingHppOrdersCount) }} transaksi tidak diikutkan dalam perhitungan laba @endif
                </p>
            </div>
        </div>
        <a href="{{ route('admin.products', ['hpp' => 'missing']) }}"
           class="h-9 px-4 rounded-lg bg-amber-600 text-white text-sm font-medium hover:bg-amber-700 flex items-center justify-center gap-2 whitespace-nowrap">
            <span class="material-symbols-outlined text-base">edit</span>
            Lengkapi HPP
        </a>
    </div>
    @endif

    <!-- Period Label -->
    <div class="flex items-center gap-2 text-sm text-gray-500">
        <span class="material-symbols-outlined text-base">calendar_month</span>
        <span>Periode: <strong class="text-gray-700">30 hari terakhir</strong> ({{ $startDate->format('d M Y') }} - {{ $today->format('d M Y') }})</span>
    </div>

    <!-- 3 Metric Cards -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
        <!-- Card 1: Total Omset -->
        <div class="bg-white rounded-xl p-6 border border-gray-200 shadow-sm flex flex-col justify-between">
            <div class="flex items-center justify-between mb-3">
                <span class="text-sm text-gray-500">Total Omset Penjualan</span>
                <div class="w-10 h-10 rounded-lg bg-blue-100 flex items-center justify-center text-blue-600">
                    <span class="material-symbols-outlined text-xl">payments</span>
                </div>
            </div>
            <div class="flex flex-col gap-1">
                <span class="text-2xl font-bold text-gray-900">Rp {{ number_format($totalRevenue, 0, ',', '.') }}</span>
                <div class="flex items-center gap-2 mt-1">
                    <span class="bg-gray-100 px-2 py-0.5 rounded text-xs font-medium text-gray-700">{{ number_format($totalOrders) }} Pesanan</span>
                    <span class="text-gray-400 text-xs">Gross Revenue</span>
                </div>
            </div>
        </div>

        <!-- Card 2: Biaya -->
        <div class="bg-white rounded-xl p-6 border border-gray-200 shadow-sm flex flex-col justify-between">
            <div class="flex items-center justify-between mb-3">
                <span class="text-sm text-gray-500">Total Biaya (HPP)</span>
                <div class="w-10 h-10 rounded-lg bg-red-100 flex items-center justify-center text-red-600">
                    <span class="material-symbols-outlined text-xl">receipt_long</span>
                </div>
            </div>
            <div class="flex flex-col gap-1">
                <span class="text-2xl font-bold text-gray-900">Rp {{ number_format($totalCost, 0, ',', '.') }}</span>
                <div class="flex items-center gap-2 mt-1">
                    <span class="bg-red-100 px-2 py-0.5 rounded text-xs font-semibold text-red-700">Modal Barang</span>
                    <span class="text-gray-400 text-xs">Shopee & TikTok</span>
                </div>
            </div>
        </div>

        <!-- Card 3: Laba Bersih -->
        <div class="bg-white rounded-xl p-6 border border-gray-200 shadow-sm flex flex-col justify-between">
            <div class="flex items-center justify-between mb-3">
                <span class="text-sm text-gray-500">Laba Bersih Riil (Net)</span>
                <div class="w-10 h-10 rounded-lg bg-green-100 flex items-center justify-center text-green-600">
                    <span class="material-symbols-outlined text-xl">account_balance_wallet</span>
                </div>
            </div>
            <div class="flex flex-col gap-1">
                <span class="text-2xl font-bold {{ $totalProfit >= 0 ? 'text-green-600' : 'text-red-600' }}">Rp {{ number_format($totalProfit, 0, ',', '.') }}</span>
                <div class="flex items-center gap-2 mt-1">
                    <span class="bg-green-100 px-2 py-0.5 rounded text-xs font-semibold text-green-700 flex items-center gap-1">
                        <span class="material-symbols-outlined text-xs">trending_up</span>
                        @if($totalRevenue > 0)
                            {{ number_format($totalProfit / $totalRevenue * 100, 1) }}% Margin
                        @else
                            0% Margin
                        @endif
                    </span>
                    <span class="text-gray-400 text-xs">After all fees</span>
                </div>
            </div>
        </div>
    </div>

    <!-- Platform Comparison: Bar Chart + Donut Chart -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <!-- LEFT: Revenue vs Cost vs Profit Bar Chart -->
        <div class="bg-white rounded-xl p-6 border border-gray-200 shadow-sm">
            <div class="mb-4">
                <h3 class="font-semibold text-gray-900">Revenue vs Cost vs Profit</h3>
                <p class="text-sm text-gray-500">30 hari terakhir</p>
            </div>
            <div class="relative" style="height: 280px;">
                <canvas id="revenueCostChart"></canvas>
            </div>
        </div>

        <!-- RIGHT: Shopee vs TikTok Donut Chart -->
        <div class="bg-white rounded-xl p-6 border border-gray-200 shadow-sm">
            <div class="mb-4">
                <h3 class="font-semibold text-gray-900">Platform Revenue Split</h3>
                <p class="text-sm text-gray-500">Shopee vs TikTok</p>
            </div>
            <div class="relative" style="height: 280px;">
                <canvas id="platformChart"></canvas>
            </div>
        </div>
    </div>

    <!-- Daily Trend Line Chart -->
    <div class="bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden">
        <div class="p-4 border-b border-gray-200">
            <h3 class="font-semibold text-gray-900">Tren Revenue Harian per Toko</h3>
            <p class="text-sm text-gray-500">30 hari terakhir</p>
        </div>
        <div class="p-4">
            <div class="relative" style="height: 300px;">
                <canvas id="dailyChart"></canvas>
            </div>
        </div>
    </div>

    <!-- Sales Forecast Section -->
    @if($forecastData['has_data'])
    <div class="bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden">
        <div class="p-4 border-b border-gray-200">
            <h3 class="font-semibold text-gray-900">Prediksi Penjualan</h3>
            <p class="text-sm text-gray-500">Perkiraan revenue menggunakan Simple Moving Average</p>
        </div>
        <div class="p-6">
            <!-- Forecast Cards -->
            <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
                <div class="bg-gradient-to-br from-blue-50 to-blue-100 rounded-xl p-5 border border-blue-200">
                    <div class="flex items-center justify-between mb-2">
                        <span class="text-sm text-blue-600 font-medium">7 Hari ke Depan</span>
                        <span class="material-symbols-outlined text-blue-500 text-xl">calendar_view_week</span>
                    </div>
                    <span class="text-2xl font-bold text-blue-900">Rp {{ number_format($forecastData['forecast_7'], 0, ',', '.') }}</span>
                </div>
                <div class="bg-gradient-to-br from-purple-50 to-purple-100 rounded-xl p-5 border border-purple-200">
                    <div class="flex items-center justify-between mb-2">
                        <span class="text-sm text-purple-600 font-medium">14 Hari ke Depan</span>
                        <span class="material-symbols-outlined text-purple-500 text-xl">calendar_view_month</span>
                    </div>
                    <span class="text-2xl font-bold text-purple-900">Rp {{ number_format($forecastData['forecast_14'], 0, ',', '.') }}</span>
                </div>
                <div class="bg-gradient-to-br from-cyan-50 to-cyan-100 rounded-xl p-5 border border-cyan-200">
                    <div class="flex items-center justify-between mb-2">
                        <span class="text-sm text-cyan-600 font-medium">30 Hari ke Depan</span>
                        <span class="material-symbols-outlined text-cyan-500 text-xl">date_range</span>
                    </div>
                    <span class="text-2xl font-bold text-cyan-900">Rp {{ number_format($forecastData['forecast_30'], 0, ',', '.') }}</span>
                </div>
            </div>

            <!-- Trend Info -->
            <div class="flex flex-wrap items-center gap-4 p-4 bg-gray-50 rounded-lg">
                <div class="flex items-center gap-2">
                    <span class="text-sm text-gray-500">Avg. Harian:</span>
                    <span class="font-semibold text-gray-900">Rp {{ number_format($forecastData['avg_daily_revenue'], 0, ',', '.') }}</span>
                </div>
                <div class="flex items-center gap-2">
                    <span class="text-sm text-gray-500">Trend:</span>
                    @if($forecastData['trend'] === 'up')
                        <span class="inline-flex items-center gap-1 px-2 py-0.5 bg-green-100 text-green-700 text-xs font-semibold rounded">
                            <span class="material-symbols-outlined text-xs">trending_up</span>
                            Naik {{ number_format($forecastData['trend_percent'], 1) }}%
                        </span>
                    @elseif($forecastData['trend'] === 'down')
                        <span class="inline-flex items-center gap-1 px-2 py-0.5 bg-red-100 text-red-700 text-xs font-semibold rounded">
                            <span class="material-symbols-outlined text-xs">trending_down</span>
                            Turun {{ number_format(abs($forecastData['trend_percent']), 1) }}%
                        </span>
                    @else
                        <span class="inline-flex items-center gap-1 px-2 py-0.5 bg-gray-200 text-gray-700 text-xs font-semibold rounded">
                            <span class="material-symbols-outlined text-xs">trending_flat</span>
                            Stabil {{ number_format($forecastData['trend_percent'], 1) }}%
                        </span>
                    @endif
                </div>
            </div>
        </div>
    </div>
    @else
    <!-- No Data Forecast Message -->
    <div class="bg-gray-50 border border-gray-200 rounded-xl p-8 text-center">
        <span class="material-symbols-outlined text-5xl text-gray-300">analytics</span>
        <p class="mt-3 text-gray-600 font-medium">Upload data transaksi terlebih dahulu untuk melihat forecast</p>
        <p class="mt-1 text-sm text-gray-400">Data minimal 1 hari diperlukan untuk prediksi</p>
    </div>
    @endif

    <!-- Top Products Section -->
    @if(!empty($topProducts))
    <div class="bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden">
        <div class="p-4 border-b border-gray-200">
            <h3 class="font-semibold text-gray-900">🏆 Produk dengan Nilai Penjualan Terbesar</h3>
            <p class="text-sm text-gray-500">Berdasarkan total revenue (30 hari terakhir)</p>
        </div>
        <div class="overflow-x-auto">
            <table class="w-full text-left text-sm">
                <thead class="bg-gray-50 text-gray-500 text-xs uppercase">
                    <tr>
                        <th class="px-4 py-3 font-semibold w-8">#</th>
                        <th class="px-4 py-3 font-semibold">Produk</th>
                        <th class="px-4 py-3 font-semibold text-right">Terjual</th>
                        <th class="px-4 py-3 font-semibold text-right">Revenue</th>
                        <th class="px-4 py-3 font-semibold text-right">Profit</th>
                        <th class="px-4 py-3 font-semibold text-right">Avg Harga</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-100">
                    @foreach($topProducts as $i => $p)
                    <tr class="hover:bg-gray-50">
                        <td class="px-4 py-3 text-gray-400 text-xs">{{ $i + 1 }}</td>
                        <td class="px-4 py-3 font-medium text-gray-900 max-w-[200px] truncate">{{ $p['product_name'] }}</td>
                        <td class="px-4 py-3 text-right">
                            <span class="inline-flex items-center gap-1 px-2 py-0.5 bg-blue-50 text-blue-700 text-xs font-semibold rounded">
                                {{ number_format($p['total_sold']) }} pcs
                            </span>
                        </td>
                        <td class="px-4 py-3 text-right text-gray-700">Rp {{ number_format($p['total_revenue'], 0, ',', '.') }}</td>
                        <td class="px-4 py-3 text-right font-semibold {{ ($p['total_profit'] ?? 0) >= 0 ? 'text-green-600' : 'text-red-600' }}">
                            Rp {{ number_format($p['total_profit'] ?? 0, 0, ',', '.') }}
                        </td>
                        <td class="px-4 py-3 text-right text-gray-500 text-xs">
                            @if($p['total_sold'] > 0)
                                Rp {{ number_format(round($p['total_revenue'] / $p['total_sold']), 0, ',', '.') }}
                            @else
                                -
                            @endif
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
    @endif
</div>
@endsection

@section('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Platform Data
    const shopeeRevenue = {{ $shopeeRevenue }};
    const tiktokRevenue = {{ $tiktokRevenue }};

    // Format currency for tooltips
    const formatCurrency = (value) => {
        return 'Rp ' + value.toLocaleString('id-ID', { minimumFractionDigits: 0, maximumFractionDigits: 0 });
    };

    // Common chart options
    const commonOptions = {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
            tooltip: {
                callbacks: {
                    label: function(context) {
                        return context.dataset.label + ': ' + formatCurrency(context.raw);
                    }
                }
            }
        }
    };

    // 1. Revenue vs Cost vs Profit Bar Chart
    const revenueCostCtx = document.getElementById('revenueCostChart').getContext('2d');
    const dailyTotals = @json($dailyTotals);
    new Chart(revenueCostCtx, {
        type: 'bar',
        data: {
            labels: dailyTotals.map(r => r.date),
            datasets: [
                {
                    label: 'Revenue',
                    data: dailyTotals.map(r => r.revenue),
                    backgroundColor: 'rgba(59, 130, 246, 0.8)',
                    borderRadius: 4,
                    barPercentage: 0.6,
                },
                {
                    label: 'Cost',
                    data: dailyTotals.map(r => r.cost),
                    backgroundColor: 'rgba(239, 68, 68, 0.8)',
                    borderRadius: 4,
                    barPercentage: 0.6,
                },
                {
                    label: 'Profit',
                    data: dailyTotals.map(r => r.profit),
                    backgroundColor: 'rgba(34, 197, 94, 0.8)',
                    borderRadius: 4,
                    barPercentage: 0.6,
                }
            ]
        },
        options: {
            ...commonOptions,
            scales: {
                x: {
                    ticks: {
                        maxRotation: 45,
                        minRotation: 45,
                        font: { size: 10 }
                    },
                    grid: { display: false }
                },
                y: {
                    beginAtZero: true,
                    ticks: {
                        callback: function(value) {
                            if (value >= 1000000) return 'Rp ' + (value / 1000000).toFixed(1) + 'jt';
                            if (value >= 1000) return 'Rp ' + (value / 1000).toFixed(0) + 'rb';
                            return 'Rp ' + value;
                        }
                    },
                    grid: { color: 'rgba(0,0,0,0.05)' }
                }
            }
        }
    });

    // 2. Shopee vs TikTok Donut Chart
    const platformCtx = document.getElementById('platformChart').getContext('2d');
    new Chart(platformCtx, {
        type: 'doughnut',
        data: {
            labels: ['Shopee', 'TikTok'],
            datasets: [{
                data: [shopeeRevenue, tiktokRevenue],
                backgroundColor: [
                    'rgba(249, 115, 22, 0.9)',  // Orange for Shopee
                    'rgba(34, 211, 238, 0.9)'   // Cyan for TikTok
                ],
                borderWidth: 0,
                hoverOffset: 8
            }]
        },
        options: {
            ...commonOptions,
            cutout: '60%',
            plugins: {
                legend: {
                    position: 'bottom',
                    labels: {
                        padding: 20,
                        usePointStyle: true,
                        pointStyle: 'circle',
                        font: { size: 12 }
                    }
                },
                tooltip: {
                    callbacks: {
                        label: function(context) {
                            const total = context.dataset.data.reduce((a, b) => a + b, 0);
                            const percentage = total > 0 ? ((context.raw / total) * 100).toFixed(1) : 0;
                            return context.label + ': ' + formatCurrency(context.raw) + ' (' + percentage + '%)';
                        }
                    }
                }
            }
        }
    });

    // 3. Daily Revenue Per Store Line Chart
    const dailyCtx = document.getElementById('dailyChart').getContext('2d');
    new Chart(dailyCtx, {
        type: 'line',
        data: {
            labels: @json($dailyTrend['dates']),
            datasets: @json($dailyTrend['datasets']),
        },
        options: {
            ...commonOptions,
            interaction: {
                intersect: false,
                mode: 'index'
            },
            scales: {
                x: {
                    ticks: {
                        maxRotation: 45,
                        minRotation: 45,
                        font: { size: 10 }
                    },
                    grid: { display: false }
                },
                y: {
                    beginAtZero: true,
                    ticks: {
                        callback: function(value) {
                            if (value >= 1000000) return 'Rp ' + (value / 1000000).toFixed(1) + 'jt';
                            if (value >= 1000) return 'Rp ' + (value / 1000).toFixed(0) + 'rb';
                            return 'Rp ' + value;
                        }
                    },
                    grid: { color: 'rgba(0,0,0,0.05)' }
                }
            }
        }
    });
});
</script>
@endsection