@extends('layouts.super-admin', ['title' => 'Super Admin Dashboard - Booklio', 'pageTitle' => 'Super Admin Dashboard', 'active' => 'dashboard'])

@section('content')
    <div class="space-y-6">
        <div class="flex flex-col gap-3 lg:flex-row lg:items-end lg:justify-between">
            <p class="text-sm font-semibold text-booklio-muted">Monitor the Booklio SaaS platform, subscriptions, revenue, usage, and operational health.</p>
            <div class="flex flex-col gap-2 sm:flex-row">
                <x-ui.button variant="secondary" data-booklio-placeholder="Platform report export is prepared as a backend export job placeholder.">
                    <x-ui.icon name="download" class="h-4 w-4" />
                    Export report
                </x-ui.button>
                <x-ui.button href="{{ route('super-admin.businesses.index') }}">Manage businesses</x-ui.button>
            </div>
        </div>

        <div class="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
            @foreach ($kpis as $kpi)
                @include('super-admin.partials.kpi', $kpi)
            @endforeach
        </div>

        <div class="grid gap-5 xl:grid-cols-[minmax(0,1fr)_360px]">
            <x-ui.card title="Recent Businesses" description="Latest platform tenants and subscription state.">
                <x-ui.table :headers="['Business', 'Plan', 'Subscription', 'Revenue', 'Status']">
                    @foreach ($recentBusinesses as $business)
                        <tr class="hover:bg-slate-50">
                            <td>
                                <p class="font-extrabold">{{ $business['name'] }}</p>
                                <p class="mt-1 text-xs font-semibold text-booklio-muted">{{ $business['owner'] }}</p>
                            </td>
                            <td class="font-bold">{{ $business['plan'] }}</td>
                            <td><x-ui.badge :variant="$business['subscription_variant']">{{ $business['subscription'] }}</x-ui.badge></td>
                            <td class="font-extrabold">{{ $business['revenue'] }}</td>
                            <td><x-ui.badge :variant="$business['status_variant']">{{ $business['status'] }}</x-ui.badge></td>
                        </tr>
                    @endforeach
                </x-ui.table>
            </x-ui.card>

            <div class="space-y-5">
                <x-ui.card title="Revenue Snapshot" description="Live SaaS growth snapshot from database totals.">
                    <div class="space-y-4">
                        @foreach ($revenueSnapshot as $item)
                            <div>
                                <div class="mb-2 flex items-center justify-between gap-3">
                                    <span class="text-sm font-bold">{{ $item['label'] }}</span>
                                    <span class="text-sm font-extrabold text-booklio-primary">{{ $item['value'] }}</span>
                                </div>
                                <div class="h-3 rounded-full bg-slate-100"><div class="h-3 rounded-full bg-booklio-primary" style="width: {{ $item['percent'] }}%"></div></div>
                            </div>
                        @endforeach
                    </div>
                </x-ui.card>

                <x-ui.card title="Platform Alerts" description="Operational platform signals from current records.">
                    <div class="space-y-3">
                        @foreach ($alerts as $alert)
                            <div class="flex items-center justify-between gap-3 rounded-lg border border-booklio-border bg-slate-50 p-3">
                                <span class="text-sm font-bold">{{ $alert['label'] }}</span>
                                <x-ui.badge :variant="$alert['variant']">Live</x-ui.badge>
                            </div>
                        @endforeach
                    </div>
                </x-ui.card>
            </div>
        </div>
    </div>
@endsection