@extends('layouts.panel')

@section('title', 'Analíticas - Panel Operativo')

@section('content')

@php
    // $formattedDishes ahora viene directamente del controlador
@endphp

{{-- ════════════════════════════════════════════════════════
     PHP → JS BRIDGE: datos del backend pasados al frontend
     ════════════════════════════════════════════════════════ --}}
<script>
/**
 * analyticsData: datos de revenue por período.
 */
window.analyticsData = {
    '7d': {
        labels: ['D6', 'D5', 'D4', 'D3', 'D2', 'D1', 'Hoy'],
        revenue: {!! json_encode($dailyRevenue ?? [0,0,0,0,0,0,0]) !!},
        total: {{ $sucursalesStats ? collect($sucursalesStats)->sum('total_7d') : 0 }},
        orders: {{ $sucursalesStats ? collect($sucursalesStats)->sum('total_ordenes') : 0 }},
        avg: 0,
        trend: 0,
        label: 'Ingresos Totales (Últimos 7 días)'
    },
    '30d': {
        labels: ['S1', 'S2', 'S3', 'S4'],
        revenue: [0, 0, 0, 0],
        total: {{ $sucursalesStats ? collect($sucursalesStats)->sum('total_30d') : 0 }},
        orders: {{ $sucursalesStats ? collect($sucursalesStats)->sum('total_ordenes') : 0 }},
        avg: 0,
        trend: 0,
        label: 'Ingresos Totales (Últimos 30 días)'
    },
    '90d': {
        labels: ['Mes 1', 'Mes 2', 'Mes 3'],
        revenue: [0, 0, 0],
        total: 0,
        orders: 0,
        avg: 0,
        trend: 0,
        label: 'Ingresos Totales (Trimestre)'
    }
};

window.topDishes = {!! json_encode($formattedDishes) !!};


// Calcular ticket promedio (7d y 30d)
@if($sucursalesStats)
    const _ord7  = {{ collect($sucursalesStats)->sum('total_ordenes') }};
    const _tot7  = {{ collect($sucursalesStats)->sum('total_7d') }};
    const _tot30 = {{ collect($sucursalesStats)->sum('total_30d') }};
    if (_ord7 > 0) {
        window.analyticsData['7d'].avg  = _tot7  / _ord7;
        window.analyticsData['30d'].avg = _tot30 / _ord7;
    }
@endif

// ─────────────────────────────────────────────────────────
// RECURSOS INLINE (Fallback para fallos de Vite)
// ─────────────────────────────────────────────────────────
/** Renderizado inmediato de platos (por si analytics.js falla) */
document.addEventListener('DOMContentLoaded', () => {
    const container = document.getElementById('topDishList');
    const loading = document.getElementById('dishLoading');
    if (!container) return;
    
    // Si ya hay datos, no re-renderizar
    if (container.querySelector('.flex.items-center.justify-between')) return;

    if (window.topDishes && window.topDishes.length > 0) {
        if (loading) loading.remove();
        container.innerHTML = window.topDishes.map(d => `
            <div class="flex items-center justify-between px-6 py-4 hover:bg-slate-50/70 transition-colors">
                <div class="flex items-center gap-4">
                    <div class="w-10 h-10 rounded-xl bg-[var(--theme-accent, #194B95)]/10 flex items-center justify-center shrink-0">
                        <span class="text-xs font-[1000] text-[var(--theme-accent, #194B95)]">#${d.rank}</span>
                    </div>
                    <div>
                        <p class="font-[1000] dynamic-title text-sm leading-tight">${d.name}</p>
                        <p class="text-[11px] dynamic-subtitle font-bold">
                            ${d.orders.toLocaleString()} órdenes · ${d.total_sold.toLocaleString()} unidades
                        </p>
                    </div>
                </div>
                <span class="font-[1000] dynamic-title text-sm font-mono tabular-nums">S/ ${Number(d.revenue).toLocaleString('es-PE', { minimumFractionDigits: 2 })}</span>
            </div>
        `).join('');
    } else {
        if (loading) {
            loading.innerHTML = '<span class="text-slate-400">Sin datos de platos disponibles</span>';
        }
    }

    // --- CHART FALLBACK ---
    const canvas = document.getElementById('chartRevenue');
    if (canvas && window.analyticsData) {
        // Evitar duplicados si analytics.js ya inició el chart
        if (Chart.getChart(canvas)) return;

        const data = window.analyticsData['7d'];
        const accent = getComputedStyle(document.documentElement).getPropertyValue('--theme-accent').trim() || '#194B95';
        
        // Mock simple de chart si analytics.js no carga
        new Chart(ctx, {
            type: 'line',
            data: {
                labels: data.labels,
                datasets: [{
                    data: data.revenue,
                    borderColor: accent,
                    backgroundColor: accent + '22',
                    fill: true,
                    tension: 0.4,
                    borderWidth: 2.5,
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: { legend: { display: false } },
                scales: { 
                    y: { beginAtZero: true, display: false }, 
                    x: { display: false } 
                }
            }
        });

        // Actualizar KPIs iniciales
        document.getElementById('revenueTotal').textContent = 'S/ ' + Number(data.total).toLocaleString('es-PE', { minimumFractionDigits: 2 });
        document.getElementById('totalOrders').textContent = data.orders;
    }
});
</script>

{{-- ════════════ ENCABEZADO ════════════ --}}
<div class="flex flex-col md:flex-row justify-between items-end mb-8 gap-4">
    <div>
        <p class="text-xs font-black dynamic-accent uppercase tracking-[0.25em] mb-2 flex items-center gap-2">
            <span class="w-2 h-2 rounded-full bg-emerald-400 animate-pulse inline-block"></span>
            Reporte y Analíticas
        </p>
        <h1 class="text-3xl md:text-4xl font-[1000] dynamic-title tracking-tight leading-tight">
            Hola, {{ $user->nombre_completo ?? 'Administrador' }} 👋
        </h1>
        <p class="text-sm dynamic-subtitle mt-1 font-medium">Resumen de rendimiento de tu negocio</p>
    </div>
    {{-- Selector de periodo --}}
    <div class="flex items-center gap-2 bg-white/60 backdrop-blur-sm border border-white/80 rounded-2xl p-1.5 shadow-sm">
        <button id="btn7d"  onclick="setPeriod('7d')"  class="period-btn px-4 py-2 rounded-xl text-xs font-black transition-all active-period">7 Días</button>
        <button id="btn30d" onclick="setPeriod('30d')" class="period-btn px-4 py-2 rounded-xl text-xs font-black transition-all text-slate-500">30 Días</button>
        <button id="btn90d" onclick="setPeriod('90d')" class="period-btn px-4 py-2 rounded-xl text-xs font-black transition-all text-slate-500">Trimestre</button>
    </div>
</div>

{{-- ════════════ KPI + GRÁFICA ════════════ --}}
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">

    {{-- Gráfica principal --}}
    <div class="lg:col-span-2 bg-white rounded-3xl border border-slate-100 shadow-sm p-6 overflow-hidden">
        <div class="flex justify-between items-start mb-6">
            <div class="p-3 rounded-2xl bg-[var(--theme-accent)]/10">
                <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 text-[var(--theme-accent)]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
                </svg>
            </div>
            <span id="trendBadge" class="flex items-center gap-1 px-3 py-1.5 rounded-xl text-xs font-black bg-slate-50 text-slate-400 border border-slate-100">— 0.0%</span>
        </div>
        <p class="text-sm font-black dynamic-subtitle uppercase tracking-[0.15em] mb-1" id="revenueLabel">Ingresos Totales</p>
        <h2 class="text-5xl font-[1000] dynamic-title tracking-tighter" id="revenueTotal">S/ 0.00</h2>
        <div class="relative h-44 mt-6 w-full">
            <canvas id="chartRevenue"></canvas>
        </div>
    </div>

    {{-- KPIs laterales --}}
    <div class="flex flex-col gap-4">
        <div class="bg-white rounded-3xl border border-slate-100 shadow-sm p-5 flex-1">
            <div class="flex items-center gap-3 mb-3">
                <div class="p-2 bg-emerald-50 rounded-xl">
                    <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-emerald-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg>
                </div>
                <span class="text-xs font-black dynamic-subtitle uppercase tracking-wider">Órdenes</span>
            </div>
            <p class="text-3xl font-[1000] dynamic-title" id="totalOrders">—</p>
            <p class="text-xs dynamic-subtitle mt-1">en el período</p>
        </div>
        <div class="bg-white rounded-3xl border border-slate-100 shadow-sm p-5 flex-1">
            <div class="flex items-center gap-3 mb-3">
                <div class="p-2 bg-amber-50 rounded-xl">
                    <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-amber-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"/></svg>
                </div>
                <span class="text-xs font-black dynamic-subtitle uppercase tracking-wider">Ticket Prom.</span>
            </div>
            <p class="text-3xl font-[1000] dynamic-title" id="avgTicket">—</p>
            <p class="text-xs dynamic-subtitle mt-1">por orden</p>
        </div>
        <div class="bg-white rounded-3xl border border-slate-100 shadow-sm p-5 flex-1">
            <div class="flex items-center gap-3 mb-3">
                <div class="p-2 bg-violet-50 rounded-xl">
                    <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-violet-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg>
                </div>
                <span class="text-xs font-black dynamic-subtitle uppercase tracking-wider">Mejor Período</span>
            </div>
            <p class="text-xl font-[1000] dynamic-title" id="bestDay">—</p>
            <p class="text-xs dynamic-subtitle mt-1" id="bestDayAmount">—</p>
        </div>
    </div>
</div>

{{-- ════════════ SUCURSALES ════════════ --}}
<div class="mb-6">
    <div class="flex justify-between items-center mb-4">
        <h2 class="text-lg font-[1000] dynamic-title tracking-tight">Rendimiento de Sucursales</h2>
        <span class="text-xs font-bold dynamic-subtitle">Últimos 30 días · {{ $sucursales->count() }} sucursal{{ $sucursales->count() !== 1 ? 'es' : '' }}</span>
    </div>

    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
        @forelse($sucursales as $branch)
        @php
            // Revenue de esta sucursal (Normalizado a Mayúsculas)
            $bid = strtoupper(trim((string)$branch->id_sucursal));
            $stat = $sucursalesStats[$bid] ?? null;
            $total30d = $stat ? (float)$stat->total_30d : 0;
            $totalOrdenes = $stat ? (int)$stat->total_ordenes : 0;
            $meta = $branch->meta_ventas_mensual ? (float)$branch->meta_ventas_mensual : 0;
            $pct  = ($meta > 0 && $total30d > 0) ? min(round(($total30d / $meta) * 100), 200) : 0;

            // Foto
            $foto = null;
            if (!empty($branch->imagen_url)) {
                $raw = $branch->imagen_url;
                $foto = str_starts_with($raw, 'http')
                    ? $raw
                    : url('/api/Security/uploads/' . ltrim(str_replace(['uploads/', 'uploads\\'], '', $raw), '/\\'));
            }

            // Dirección y Extracción de Ciudad
            $rawDir = $branch->direccion ?? '';
            $parts  = explode(' · ', $rawDir);
            $ciudad = (count($parts) > 1) ? end($parts) : 'General';
            $lugar  = trim($branch->direccion ?? '');
            if (!$lugar) $lugar = 'Sin dirección registrada';

            // Latitud / longitud para mapa
            $lat = !empty($branch->latitud) ? $branch->latitud : 'null';
            $lng = !empty($branch->longitud) ? $branch->longitud : 'null';
        @endphp
        <div class="bg-white rounded-2xl border border-slate-100 shadow-sm overflow-hidden hover:-translate-y-1 transition-all duration-300 group flex flex-col">

            {{-- Imagen de sucursal --}}
            <div class="h-36 bg-gradient-to-br from-slate-100 to-slate-200 relative overflow-hidden shrink-0">
                @if($foto)
                    <img src="{{ $foto }}" alt="{{ $branch->nombre }}"
                         class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
                         onerror="this.style.display='none'">
                @else
                    <div class="w-full h-full flex items-center justify-center">
                        <svg xmlns="http://www.w3.org/2000/svg" class="w-10 h-10 text-slate-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h4a1 1 0 011 1v5m-6 0h6"/>
                        </svg>
                    </div>
                @endif

                {{-- Estado badge --}}
                <div class="absolute top-3 left-3">
                    @php $activo = true; /* Valor por defecto ya que "estado" no existe en BD */ @endphp
                    <span class="px-2 py-1 rounded-lg text-[10px] font-black backdrop-blur-sm {{ $activo ? 'bg-emerald-500/90 text-white' : 'bg-slate-600/80 text-white' }}">
                        {{ $activo ? 'ACTIVO' : 'INACTIVO' }}
                    </span>
                </div>

                {{-- Botón mapa --}}
                <button onclick="openBranchMap({{ $lat }}, {{ $lng }}, '{{ addslashes($branch->nombre) }}')"
                        class="absolute top-3 right-3 w-7 h-7 bg-white/80 backdrop-blur-sm rounded-lg flex items-center justify-center text-slate-600 hover:bg-white hover:text-[var(--theme-accent)] transition-colors shadow-sm" title="Ver en mapa">
                    <svg xmlns="http://www.w3.org/2000/svg" class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a2 2 0 01-2.828 0L6.343 16.657a8 8 0 1111.314 0z"/>
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
                    </svg>
                </button>
            </div>

            {{-- Info Card --}}
            <div class="p-4 flex flex-col flex-1">
                <div class="flex justify-between items-start mb-0.5">
                    <h3 class="font-[1000] dynamic-title text-sm leading-tight truncate mr-2">{{ $branch->nombre }}</h3>
                    <span class="px-1.5 py-0.5 rounded-md bg-slate-100 text-[9px] font-black text-slate-500 uppercase">{{ $ciudad }}</span>
                </div>
                <p class="text-[10px] dynamic-subtitle font-bold truncate flex items-center gap-1 mb-3" title="{{ $lugar }}">
                    <svg xmlns="http://www.w3.org/2000/svg" class="w-3 h-3 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a2 2 0 01-2.828 0L6.343 16.657a8 8 0 1111.314 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
                    {{ Str::limit($lugar, 40) }}
                </p>

                {{-- Revenue --}}
                <div class="flex items-end justify-between mb-3">
                    <div>
                        <p class="text-[10px] dynamic-subtitle font-bold uppercase tracking-wider mb-0.5">Ingresos 30d</p>
                        <p class="text-xl font-[1000] dynamic-title leading-none">
                            S/ {{ number_format($total30d, 0, '.', ',') }}
                        </p>
                    </div>
                    <div class="text-right">
                        <p class="text-[10px] dynamic-subtitle font-bold uppercase tracking-wider mb-0.5">Órdenes</p>
                        <p class="text-xl font-[1000] dynamic-title leading-none">{{ $totalOrdenes }}</p>
                    </div>
                </div>

                {{-- Barra de meta --}}
                @if($meta > 0)
                <div class="mt-auto">
                    <div class="flex justify-between text-[10px] font-black dynamic-subtitle mb-1">
                        <span>Meta mensual</span>
                        <span class="{{ $pct >= 100 ? 'text-emerald-500' : 'text-[var(--theme-accent)]' }}">{{ $pct }}%</span>
                    </div>
                    <div class="w-full bg-slate-100 rounded-full h-1.5">
                        <div class="h-1.5 rounded-full transition-all duration-700 {{ $pct >= 100 ? 'bg-emerald-500' : 'bg-[var(--theme-accent)]' }}"
                             style="width: {{ min($pct, 100) }}%"></div>
                    </div>
                    <p class="text-[9px] dynamic-subtitle mt-1">Meta: S/ {{ number_format($meta, 0, '.', ',') }}</p>
                </div>
                @endif
            </div>
        </div>
        @empty
        <div class="col-span-full flex flex-col items-center justify-center py-16 text-slate-400">
            <svg xmlns="http://www.w3.org/2000/svg" class="w-12 h-12 mb-3 opacity-30" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h4a1 1 0 011 1v5m-6 0h6"/>
            </svg>
            <p class="font-bold text-sm">No hay sucursales registradas en esta empresa</p>
        </div>
        @endforelse
    </div>
</div>

{{-- ════════════ TOP PLATOS ════════════ --}}
<div class="bg-white rounded-3xl border border-slate-100 shadow-sm overflow-hidden mb-6">
    <div class="flex justify-between items-center p-6 border-b border-slate-50">
        <h2 class="text-lg font-[1000] dynamic-title tracking-tight flex items-center gap-2">
            <span class="text-xl">🏆</span> Platos Más Vendidos
        </h2>
        <span class="text-[10px] dynamic-subtitle font-bold uppercase tracking-wider">Ranking Histórico (Total)</span>
    </div>
    <div id="topDishList" class="divide-y divide-slate-50">
        <div class="p-10 flex items-center justify-center text-slate-400 text-sm font-medium" id="dishLoading">
            <svg class="animate-spin w-5 h-5 mr-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 12 0 12 12H4z"></path>
            </svg>
            Cargando datos...
        </div>
    </div>
</div>

<style>
.period-btn { transition: all 0.2s; }
.active-period { background: var(--theme-accent); color: white; box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
</style>

@endsection

@push('scripts')
@vite(['src/assets/js/admin/analytics.js'])
@endpush