@extends('layouts.promoter')

@section('page-title', 'Analytics')

@section('content')
<div class="py-6">
    {{-- Header --}}
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between mb-8 gap-4">
        <div class="flex items-center gap-3">
            <div class="p-2 bg-gradient-to-br from-purple-500 to-pink-600 rounded-xl shadow-sm">
                <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 013 19.875v-6.75zM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V8.625zM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V4.125z"/></svg>
            </div>
            <div>
                <h1 class="text-2xl font-bold text-gray-900 tracking-tight">Analytics</h1>
                <p class="text-sm text-gray-500">Track your live session performance</p>
            </div>
        </div>
        <form method="GET" class="flex items-center gap-2">
            <select name="period" onchange="this.form.submit()" class="pl-3 pr-10 py-2 border border-gray-200 rounded-lg text-sm bg-white focus:ring-2 focus:ring-purple-500 focus:border-purple-500">
                <option value="7" {{ $period == '7' ? 'selected' : '' }}>Last 7 Days</option>
                <option value="30" {{ $period == '30' ? 'selected' : '' }}>Last 30 Days</option>
                <option value="90" {{ $period == '90' ? 'selected' : '' }}>Last 90 Days</option>
            </select>
        </form>
    </div>

    {{-- Stat Cards --}}
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
        <div class="bg-white rounded-xl border border-gray-200 p-5 shadow-sm">
            <div class="flex items-center justify-between mb-3">
                <div class="p-2.5 bg-purple-50 rounded-xl">
                    <svg class="w-5 h-5 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15.75 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"/></svg>
                </div>
                @if($sessionsChange != 0)
                <span class="inline-flex items-center gap-1 px-2 py-1 rounded-full text-xs font-medium {{ $sessionsChange > 0 ? 'bg-emerald-50 text-emerald-700' : 'bg-red-50 text-red-700' }}">
                    <svg class="w-3 h-3 {{ $sessionsChange > 0 ? '' : 'rotate-180' }}" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7"/></svg>
                    {{ abs($sessionsChange) }}%
                </span>
                @endif
            </div>
            <p class="text-2xl font-bold text-gray-900">{{ number_format($periodSessions) }}</p>
            <p class="text-xs text-gray-500 mt-1">Sessions this period</p>
        </div>

        <div class="bg-white rounded-xl border border-gray-200 p-5 shadow-sm">
            <div class="flex items-center justify-between mb-3">
                <div class="p-2.5 bg-blue-50 rounded-xl">
                    <svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z"/></svg>
                </div>
            </div>
            <p class="text-2xl font-bold text-gray-900">{{ number_format($periodViewers) }}</p>
            <p class="text-xs text-gray-500 mt-1">Avg {{ $avgViewersPerSession }} viewers/session</p>
        </div>

        <div class="bg-white rounded-xl border border-gray-200 p-5 shadow-sm">
            <div class="flex items-center justify-between mb-3">
                <div class="p-2.5 bg-emerald-50 rounded-xl">
                    <svg class="w-5 h-5 text-emerald-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 00-3 3h15.75m-12.75-3h11.218c1.121-2.3 2.1-4.684 2.924-7.138a60.114 60.114 0 00-16.536-1.84M7.5 14.25L5.106 5.272M6 20.25a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zm12.75 0a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0z"/></svg>
                </div>
            </div>
            <p class="text-2xl font-bold text-gray-900">{{ number_format($periodSales) }}</p>
            <p class="text-xs text-gray-500 mt-1">Sales this period</p>
        </div>

        <div class="bg-white rounded-xl border border-gray-200 p-5 shadow-sm">
            <div class="flex items-center justify-between mb-3">
                <div class="p-2.5 bg-amber-50 rounded-xl">
                    <svg class="w-5 h-5 text-amber-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 6v12m-3-2.818l.879.659c1.171.879 3.07.879 4.242 0 1.172-.879 1.172-2.303 0-3.182C13.536 12.219 12.768 12 12 12c-.725 0-1.45-.22-2.003-.659-1.106-.879-1.106-2.303 0-3.182s2.9-.879 4.006 0l.415.33M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                </div>
            </div>
            <p class="text-2xl font-bold text-gray-900">{{ price($periodCommission) }}</p>
            <p class="text-xs text-gray-500 mt-1">Commission this period</p>
        </div>
    </div>

    {{-- Charts Row --}}
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
        <div class="lg:col-span-2 bg-white rounded-xl border border-gray-200 p-6 shadow-sm">
            <div class="flex items-center justify-between mb-6">
                <div>
                    <h2 class="text-lg font-semibold text-gray-900">Activity Over Time</h2>
                    <p class="text-sm text-gray-500">Sessions & viewers trend</p>
                </div>
                <div class="flex items-center gap-4">
                    <div class="flex items-center gap-1.5">
                        <div class="w-3 h-3 rounded-full bg-purple-500"></div>
                        <span class="text-xs text-gray-500">Sessions</span>
                    </div>
                    <div class="flex items-center gap-1.5">
                        <div class="w-3 h-3 rounded-full bg-blue-400"></div>
                        <span class="text-xs text-gray-500">Viewers</span>
                    </div>
                </div>
            </div>
            <div class="h-72">
                <canvas id="sessionsChart"></canvas>
            </div>
        </div>

        <div class="bg-white rounded-xl border border-gray-200 p-6 shadow-sm">
            <div class="flex items-center justify-between mb-6">
                <div>
                    <h2 class="text-lg font-semibold text-gray-900">Session Status</h2>
                    <p class="text-sm text-gray-500">Distribution of sessions</p>
                </div>
            </div>
            <div class="h-48">
                <canvas id="statusChart"></canvas>
            </div>
            <div class="mt-4 space-y-2">
                @php
                    $statusColors = ['active' => 'bg-red-400', 'completed' => 'bg-emerald-400', 'scheduled' => 'bg-blue-400', 'cancelled' => 'bg-gray-400'];
                @endphp
                @foreach($statusDistribution as $status)
                <div class="flex items-center justify-between text-sm">
                    <div class="flex items-center gap-2">
                        <div class="w-2.5 h-2.5 rounded-full {{ $statusColors[$status->status] ?? 'bg-gray-400' }}"></div>
                        <span class="text-gray-600 capitalize">{{ $status->status }}</span>
                    </div>
                    <span class="font-medium text-gray-900">{{ $status->count }}</span>
                </div>
                @endforeach
            </div>
        </div>
    </div>

    {{-- Performance Metrics --}}
    <div class="bg-white rounded-xl border border-gray-200 p-6 shadow-sm mb-8">
        <h2 class="text-lg font-semibold text-gray-900 mb-1">Performance Summary</h2>
        <p class="text-sm text-gray-500 mb-6">Overall live streaming metrics</p>
        <div class="grid grid-cols-2 sm:grid-cols-5 gap-4">
            <div class="p-4 bg-purple-50 rounded-lg text-center">
                <p class="text-3xl font-bold text-purple-600">{{ number_format($totalSessions) }}</p>
                <p class="text-xs text-gray-500 mt-1">Total Sessions</p>
            </div>
            <div class="p-4 bg-blue-50 rounded-lg text-center">
                <p class="text-3xl font-bold text-blue-600">{{ number_format($totalViewers) }}</p>
                <p class="text-xs text-gray-500 mt-1">Total Viewers</p>
            </div>
            <div class="p-4 bg-emerald-50 rounded-lg text-center">
                <p class="text-3xl font-bold text-emerald-600">{{ number_format($totalSales) }}</p>
                <p class="text-xs text-gray-500 mt-1">Total Sales</p>
            </div>
            <div class="p-4 bg-amber-50 rounded-lg text-center">
                <p class="text-3xl font-bold text-amber-600">{{ price($totalCommission) }}</p>
                <p class="text-xs text-gray-500 mt-1">Total Commission</p>
            </div>
            <div class="p-4 bg-indigo-50 rounded-lg text-center">
                <p class="text-3xl font-bold text-indigo-600">{{ $avgSalesPerSession }}</p>
                <p class="text-xs text-gray-500 mt-1">Avg Sales/Session</p>
            </div>
        </div>
    </div>

    {{-- Recent Sessions & Top Products --}}
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        {{-- Recent Sessions --}}
        <div class="bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-200 bg-gradient-to-r from-gray-50 to-white">
                <div class="flex items-center gap-3">
                    <div class="p-2 bg-purple-100 rounded-lg">
                        <svg class="w-5 h-5 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15.75 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"/></svg>
                    </div>
                    <div>
                        <h2 class="text-lg font-semibold text-gray-900">Recent Sessions</h2>
                        <p class="text-sm text-gray-500">Your latest live sessions</p>
                    </div>
                </div>
            </div>
            <div class="overflow-x-auto">
                <table class="min-w-full">
                    <thead>
                        <tr class="text-left text-xs font-medium text-gray-500 uppercase tracking-wider border-b border-gray-100">
                            <th class="px-6 py-3">Title</th>
                            <th class="px-6 py-3 text-center">Status</th>
                            <th class="px-6 py-3 text-center">Viewers</th>
                            <th class="px-6 py-3 text-right">Revenue</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-100">
                        @forelse($sessions as $session)
                        <tr class="hover:bg-gray-50/50">
                            <td class="px-6 py-3.5">
                                <p class="text-sm font-medium text-gray-900 truncate max-w-[160px]">{{ $session->title }}</p>
                                <p class="text-xs text-gray-400">{{ $session->product_name }}</p>
                            </td>
                            <td class="px-6 py-3.5 text-center">
                                <span class="inline-flex px-2.5 py-0.5 text-xs font-medium rounded-full capitalize
                                    {{ $session->status === 'active' ? 'bg-red-50 text-red-700' : ($session->status === 'completed' ? 'bg-emerald-50 text-emerald-700' : ($session->status === 'scheduled' ? 'bg-blue-50 text-blue-700' : 'bg-gray-50 text-gray-700')) }}">
                                    {{ $session->status }}
                                </span>
                            </td>
                            <td class="px-6 py-3.5 text-center">
                                <span class="text-sm font-semibold text-gray-900">{{ number_format($session->viewers_count) }}</span>
                            </td>
                            <td class="px-6 py-3.5 text-right">
                                <span class="text-sm font-semibold text-emerald-600">{{ price($session->revenue) }}</span>
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="4" class="px-6 py-8 text-center text-sm text-gray-500">No sessions yet</td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>

        {{-- Top Products --}}
        <div class="bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-200 bg-gradient-to-r from-gray-50 to-white">
                <div class="flex items-center gap-3">
                    <div class="p-2 bg-indigo-100 rounded-lg">
                        <svg class="w-5 h-5 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M20.25 7.5l-.625 10.632a2.25 2.25 0 01-2.247 2.118H6.622a2.25 2.25 0 01-2.247-2.118L3.75 7.5m6 4.125l2.25 2.25m0 0l2.25 2.25M12 13.875l2.25-2.25M12 13.875l-2.25 2.25M3.375 7.5h17.25c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125z"/></svg>
                    </div>
                    <div>
                        <h2 class="text-lg font-semibold text-gray-900">Top Products</h2>
                        <p class="text-sm text-gray-500">Best sellers from your sessions</p>
                    </div>
                </div>
            </div>
            <div class="overflow-x-auto">
                <table class="min-w-full">
                    <thead>
                        <tr class="text-left text-xs font-medium text-gray-500 uppercase tracking-wider border-b border-gray-100">
                            <th class="px-6 py-3">#</th>
                            <th class="px-6 py-3">Product</th>
                            <th class="px-6 py-3 text-right">Sales</th>
                            <th class="px-6 py-3 text-right">Revenue</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-100">
                        @forelse($topProducts as $index => $product)
                        <tr class="hover:bg-gray-50/50">
                            <td class="px-6 py-3.5">
                                <span class="inline-flex items-center justify-center w-6 h-6 text-xs font-medium {{ $index < 3 ? 'bg-amber-100 text-amber-700' : 'bg-gray-100 text-gray-600' }} rounded-full">{{ $index + 1 }}</span>
                            </td>
                            <td class="px-6 py-3.5">
                                <p class="text-sm font-medium text-gray-900 truncate max-w-[180px]">{{ $product->name }}</p>
                            </td>
                            <td class="px-6 py-3.5 text-right">
                                <span class="text-sm font-semibold text-gray-900">{{ number_format($product->sales_count) }}</span>
                            </td>
                            <td class="px-6 py-3.5 text-right">
                                <span class="text-sm font-semibold text-emerald-600">{{ price($product->revenue) }}</span>
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="4" class="px-6 py-8 text-center text-sm text-gray-500">No sales data available</td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

@php
    $currency = currentCurrency();
    $currencySymbol = $currency->symbol;
    $exchangeRate = (float) $currency->exchange_rate;
@endphp
@push('scripts')
<script>
const currencySymbol = @json($currencySymbol);
const exchangeRate = @json($exchangeRate);
const chartColors = {
    purple: 'rgba(147, 51, 234, 1)',
    purpleLight: 'rgba(147, 51, 234, 0.1)',
    blue: 'rgba(59, 130, 246, 1)',
    blueLight: 'rgba(59, 130, 246, 0.1)',
    emerald: 'rgba(16, 185, 129, 1)',
    red: 'rgba(239, 68, 68, 1)',
    amber: 'rgba(245, 158, 11, 1)',
    gray: 'rgba(156, 163, 175, 1)',
};

new Chart(document.getElementById('sessionsChart'), {
    type: 'line',
    data: {
        labels: @json($sessionsOverTime->pluck('date')->map(fn($d) => \Carbon\Carbon::parse($d)->format('M d'))),
        datasets: [
            {
                label: 'Sessions',
                data: @json($sessionsOverTime->pluck('sessions')),
                borderColor: chartColors.purple,
                backgroundColor: chartColors.purpleLight,
                fill: true,
                tension: 0.4,
                pointRadius: 3,
                pointBackgroundColor: chartColors.purple,
                borderWidth: 2,
                yAxisID: 'y',
            },
            {
                label: 'Viewers',
                data: @json($sessionsOverTime->pluck('viewers')->map(fn($v) => $v ?? 0)),
                borderColor: chartColors.blue,
                backgroundColor: chartColors.blueLight,
                fill: true,
                tension: 0.4,
                pointRadius: 3,
                pointBackgroundColor: chartColors.blue,
                borderWidth: 2,
                yAxisID: 'y1',
            }
        ]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
            legend: { display: false },
            tooltip: {
                backgroundColor: '#1e293b',
                titleFont: { size: 12 },
                bodyFont: { size: 13 },
                padding: 12,
                cornerRadius: 8,
            }
        },
        scales: {
            x: {
                grid: { display: false },
                ticks: { font: { size: 11 }, color: '#9ca3af', maxTicksLimit: 8 }
            },
            y: {
                type: 'linear',
                display: true,
                position: 'left',
                grid: { color: '#f3f4f6' },
                ticks: { font: { size: 11 }, color: '#9ca3af', stepSize: 1 },
                border: { display: false },
                title: { display: true, text: 'Sessions', font: { size: 11 }, color: '#9ca3af' }
            },
            y1: {
                type: 'linear',
                display: true,
                position: 'right',
                grid: { display: false },
                ticks: { font: { size: 11 }, color: '#9ca3af' },
                border: { display: false },
                title: { display: true, text: 'Viewers', font: { size: 11 }, color: '#9ca3af' }
            }
        },
        interaction: { intersect: false, mode: 'index' }
    }
});

new Chart(document.getElementById('statusChart'), {
    type: 'doughnut',
    data: {
        labels: @json($statusDistribution->pluck('status')->map(fn($s) => ucfirst($s))),
        datasets: [{
            data: @json($statusDistribution->pluck('count')),
            backgroundColor: [
                chartColors.red,
                chartColors.emerald,
                chartColors.blue,
                chartColors.gray,
            ],
            borderWidth: 0,
            hoverOffset: 4,
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        cutout: '70%',
        plugins: {
            legend: { display: false },
            tooltip: {
                backgroundColor: '#1e293b',
                padding: 10,
                cornerRadius: 8,
                callbacks: {
                    label: ctx => ` ${ctx.label}: ${ctx.parsed} sessions`
                }
            }
        }
    }
});
</script>
@endpush
@endsection