@extends('admin.layouts.app')

@section('titulo', 'Dashboard SaaS')
@section('subtitulo', 'Visión general de la plataforma · '.now()->translatedFormat('l, d \d\e F Y'))

@section('contenido')
{{-- KPIs de plataforma --}}
<div class="grid grid-cols-2 lg:grid-cols-4 gap-4">
    @foreach ([
        ['Empresas', $kpis['empresas'], $kpis['activas'].' activas', 'from-brand-500 to-brand-400', 'building'],
        ['MRR (ingreso mensual)', 'S/ '.number_format($kpis['mrr'], 2), 'ARR S/ '.number_format($kpis['arr'], 0), 'from-emerald-500 to-teal-400', 'wallet'],
        ['En prueba', $kpis['prueba'], 'suscripciones', 'from-amber-500 to-orange-400', 'clipboard'],
        ['Usuarios (tenants)', $kpis['usuarios'], 'cuentas', 'from-violet-500 to-fuchsia-400', 'users'],
    ] as [$label, $valor, $sub, $color, $icono])
        <div class="bg-white rounded-2xl p-5 shadow-sm shadow-slate-200/60">
            <div class="h-11 w-11 rounded-2xl bg-gradient-to-br {{ $color }} text-white flex items-center justify-center shadow-lg">
                @include('partials.icon', ['name' => $icono, 'class' => 'h-6 w-6'])
            </div>
            <p class="mt-4 text-2xl font-extrabold text-slate-800">{{ $valor }}</p>
            <p class="text-sm text-slate-500">{{ $label }}</p>
            <p class="text-xs text-slate-400 mt-0.5">{{ $sub }}</p>
        </div>
    @endforeach
</div>

<div class="grid grid-cols-1 lg:grid-cols-3 gap-5 mt-5">
    {{-- Empresas por plan --}}
    <div class="bg-white rounded-2xl p-6 shadow-sm shadow-slate-200/60">
        <h3 class="font-bold text-slate-800 mb-4">Empresas por plan</h3>
        <canvas id="chartPlanes" height="200"></canvas>
    </div>

    {{-- Empresas por tipo --}}
    <div class="bg-white rounded-2xl p-6 shadow-sm shadow-slate-200/60">
        <h3 class="font-bold text-slate-800 mb-4">Por tipo de institución</h3>
        <div class="space-y-3">
            @forelse ($porTipo as $t)
                <div>
                    <div class="flex justify-between text-sm mb-1">
                        <span class="text-slate-600">{{ $t->nombre }}</span>
                        <span class="font-semibold text-slate-700">{{ $t->empresas_count }}</span>
                    </div>
                    <div class="h-2 rounded-full bg-slate-100 overflow-hidden">
                        <div class="h-full bg-brand-500 rounded-full" style="width: {{ $kpis['empresas'] ? ($t->empresas_count / $kpis['empresas'] * 100) : 0 }}%"></div>
                    </div>
                </div>
            @empty
                <p class="text-sm text-slate-400">Sin datos.</p>
            @endforelse
        </div>
    </div>

    {{-- Vencimientos --}}
    <div class="bg-white rounded-2xl p-6 shadow-sm shadow-slate-200/60">
        <h3 class="font-bold text-slate-800 mb-4">Próximos vencimientos</h3>
        <div class="space-y-3">
            @forelse ($porVencer as $s)
                <div class="flex items-center justify-between gap-2">
                    <div class="min-w-0">
                        <p class="text-sm font-medium text-slate-700 truncate">{{ $s->empresa?->nombre }}</p>
                        <p class="text-xs text-slate-400">{{ $s->plan?->nombre }} · {{ $s->fecha_fin?->format('d/m/Y') }}</p>
                    </div>
                    @php $dias = $s->diasRestantes(); @endphp
                    <span class="text-xs font-medium px-2 py-1 rounded-lg shrink-0 {{ $dias !== null && $dias < 0 ? 'bg-red-50 text-red-600' : ($dias !== null && $dias <= 7 ? 'bg-amber-50 text-amber-600' : 'bg-emerald-50 text-emerald-600') }}">
                        {{ $dias !== null ? ($dias < 0 ? 'vencida' : $dias.' días') : '—' }}
                    </span>
                </div>
            @empty
                <p class="text-sm text-slate-400">Sin vencimientos próximos.</p>
            @endforelse
        </div>
    </div>
</div>

{{-- Últimas empresas --}}
<div class="bg-white rounded-2xl shadow-sm shadow-slate-200/60 overflow-hidden mt-5">
    <div class="flex items-center justify-between px-6 py-4 border-b border-slate-100">
        <h3 class="font-bold text-slate-800">Últimas empresas registradas</h3>
        <a href="{{ route('admin.empresas.index') }}" class="text-sm font-medium text-brand-600 hover:underline">Ver todas</a>
    </div>
    <div class="overflow-x-auto">
        <table class="w-full text-sm">
            <thead>
                <tr class="text-left text-slate-400 border-b border-slate-100">
                    <th class="px-6 py-3 font-semibold">Empresa</th>
                    <th class="px-6 py-3 font-semibold">Tipo</th>
                    <th class="px-6 py-3 font-semibold">Plan</th>
                    <th class="px-6 py-3 font-semibold text-center">Estado</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-slate-50">
                @foreach ($ultimas as $e)
                    <tr class="hover:bg-slate-50/60 transition">
                        <td class="px-6 py-3">
                            <a href="{{ route('admin.empresas.show', $e) }}" class="flex items-center gap-3">
                                <div class="h-9 w-9 rounded-lg flex items-center justify-center text-white font-bold text-xs" style="background: {{ $e->color_primario }}">{{ mb_strtoupper(mb_substr($e->nombre, 0, 2)) }}</div>
                                <span class="font-semibold text-slate-800">{{ $e->nombre }}</span>
                            </a>
                        </td>
                        <td class="px-6 py-3 text-slate-600">{{ $e->tipoNegocio?->nombre }}</td>
                        <td class="px-6 py-3"><span class="text-xs font-medium px-2.5 py-1 rounded-lg bg-brand-50 text-brand-600">{{ $e->planActual?->nombre ?? '—' }}</span></td>
                        <td class="px-6 py-3 text-center">
                            @if ($e->activo)
                                <span class="inline-flex items-center gap-1.5 text-xs font-medium text-emerald-600"><span class="h-2 w-2 rounded-full bg-emerald-500"></span>Activa</span>
                            @else
                                <span class="inline-flex items-center gap-1.5 text-xs font-medium text-slate-400"><span class="h-2 w-2 rounded-full bg-slate-300"></span>Inactiva</span>
                            @endif
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>
@endsection

@push('scripts')
<script>
    const planesLabels = @json($porPlan->pluck('nombre'));
    const planesData = @json($porPlan->pluck('empresas_count'));
    new Chart(document.getElementById('chartPlanes'), {
        type: 'doughnut',
        data: {
            labels: planesLabels,
            datasets: [{ data: planesData, backgroundColor: ['#bccfff', '#2f6bff', '#153dc7'], borderWidth: 0 }]
        },
        options: { cutout: '65%', plugins: { legend: { position: 'bottom', labels: { color: '#64748b', boxWidth: 12 } } } }
    });
</script>
@endpush