@extends('layouts.admin')

@section('title', trans('admin.metrics_title'))
@section('header_title', trans('admin.metrics_header'))

@section('content')
<div class="space-y-8 text-xs">

    <!-- Top System & SaaS KPI Cards -->
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-4">
        <div class="p-5 rounded-2xl bg-navy-900 border border-slate-800 shadow-lg">
            <div class="flex items-center justify-between text-slate-400 text-xs mb-2">
                <span>{{ trans('admin.total_tenants') }}</span>
                <i class="fa-solid fa-building text-emerald-400 text-base"></i>
            </div>
            <div class="text-3xl font-black text-white">{{ number_format($totalTenants) }}</div>
            <div class="flex items-center gap-1.5 text-[11px] mt-2">
                <span class="text-emerald-400 font-bold">{{ trans('admin.active_tenants_sub', ['count' => $activeTenants]) }}</span>
                @if($suspendedTenants > 0)
                    <span class="text-slate-500">•</span>
                    <span class="text-rose-400 font-bold">{{ trans('admin.suspended_tenants_sub', ['count' => $suspendedTenants]) }}</span>
                @endif
            </div>
        </div>

        <div class="p-5 rounded-2xl bg-navy-900 border border-slate-800 shadow-lg">
            <div class="flex items-center justify-between text-slate-400 text-xs mb-2">
                <span>{{ trans('admin.mrr_label') }}</span>
                <i class="fa-solid fa-sack-dollar text-emerald-400 text-base"></i>
            </div>
            <div class="text-2xl font-black text-emerald-400 code-font">{{ number_format($estimatedMonthlyRevenue, 2) }} <span class="sar-symbol">﷼</span></div>
            <div class="text-[11px] text-slate-400 mt-2">{{ trans('admin.mrr_sub') }}</div>
        </div>

        <div class="p-5 rounded-2xl bg-navy-900 border border-slate-800 shadow-lg">
            <div class="flex items-center justify-between text-slate-400 text-xs mb-2">
                <span>{{ trans('admin.total_invoices_processed') }}</span>
                <i class="fa-solid fa-file-invoice text-emerald-400 text-base"></i>
            </div>
            <div class="text-3xl font-black text-white">{{ number_format($totalInvoices) }}</div>
            <div class="text-[11px] text-slate-400 mt-2">{{ trans('admin.across_subscribers') }}</div>
        </div>

        <div class="p-5 rounded-2xl bg-navy-900 border border-slate-800 shadow-lg">
            <div class="flex items-center justify-between text-slate-400 text-xs mb-2">
                <span>{{ trans('admin.zatca_success_rate') }}</span>
                <i class="fa-solid fa-bolt text-emerald-400 text-base"></i>
            </div>
            <div class="text-3xl font-black text-emerald-400">{{ $successRate }}%</div>
            <div class="text-[11px] text-slate-400 mt-2">{{ trans('admin.cleared_and_reported') }}</div>
        </div>

        <div class="p-5 rounded-2xl bg-navy-900 border border-slate-800 shadow-lg">
            <div class="flex items-center justify-between text-slate-400 text-xs mb-2">
                <span>{{ trans('admin.ready_devices') }}</span>
                <i class="fa-solid fa-shield-halved text-emerald-400 text-base"></i>
            </div>
            <div class="text-2xl font-black text-emerald-400 code-font">{{ $readyDevices }} / {{ $totalDevices }}</div>
            <div class="text-[11px] text-slate-400 mt-2">{{ trans('admin.pos_ready') }}</div>
        </div>
    </div>

    <!-- Subscription Plans Breakdown & Usage Alerts -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <!-- Plans Distribution -->
        <div class="lg:col-span-2 bg-navy-900 border border-slate-800 rounded-2xl p-6 shadow-xl">
            <div class="flex items-center justify-between mb-4">
                <div class="flex items-center gap-2 font-bold text-white text-sm">
                    <i class="fa-solid fa-credit-card text-emerald-400"></i>
                    <h3>{{ trans('admin.plan_distribution') }}</h3>
                </div>
                <a href="{{ route('admin.plans.index') }}" class="text-xs font-bold text-emerald-400 hover:underline">
                    {{ trans('admin.plans_header') }} ←
                </a>
            </div>

            <div class="grid grid-cols-2 sm:grid-cols-4 gap-4">
                @foreach($plans as $p)
                    <a href="{{ route('admin.tenants.index', ['plan' => $p->slug]) }}" class="p-4 rounded-xl bg-navy-950/70 border border-slate-800 hover:border-emerald-500/50 transition flex flex-col justify-between group">
                        <div class="flex items-center justify-between mb-1">
                            <span class="font-bold text-white text-xs group-hover:text-emerald-300 transition">{{ $p->displayName() }}</span>
                            @if($p->is_popular)
                                <span class="w-1.5 h-1.5 rounded-full bg-emerald-400"></span>
                            @endif
                        </div>
                        <div class="text-xl font-black text-emerald-400 code-font my-1">{{ $p->tenants_count }}</div>
                        <div class="text-[10px] text-slate-400 flex items-center justify-between">
                            <span>{{ $p->formattedPrice() }}</span>
                            <span class="text-slate-500 group-hover:text-emerald-400 transition">{{ trans('admin.view_arrow') }}</span>
                        </div>
                    </a>
                @endforeach
            </div>
        </div>

        <!-- Near-Quota Warning Alert -->
        <div class="bg-navy-900 border border-slate-800 rounded-2xl p-6 shadow-xl">
            <div class="flex items-center justify-between mb-3">
                <div class="flex items-center gap-2 font-bold text-white text-xs">
                    <i class="fa-solid fa-triangle-exclamation text-amber-400"></i>
                    <h3>{{ trans('admin.near_quota_tenants') }}</h3>
                </div>
            </div>

            @if(count($nearQuotaTenants) > 0)
                <ul class="divide-y divide-slate-800/80 text-xs">
                    @foreach($nearQuotaTenants as $t)
                        <li class="py-2.5 flex items-center justify-between">
                            <div class="truncate pe-2">
                                <a href="{{ route('admin.tenants.show', $t->uuid) }}" class="font-bold text-white hover:text-emerald-400 transition truncate block">
                                    {{ $t->name }}
                                </a>
                                <span class="text-[10px] text-amber-400 code-font">
                                    {{ trans('admin.used_of_limit', ['used' => $t->invoices_used_this_month, 'limit' => $t->monthly_invoice_limit]) }}
                                </span>
                            </div>
                            <a href="{{ route('admin.tenants.show', $t->uuid) }}" class="px-2 py-1 rounded bg-slate-800 hover:bg-slate-700 text-emerald-300 text-[10px] font-bold transition flex-shrink-0">
                                {{ trans('admin.raise_limit') }}
                            </a>
                        </li>
                    @endforeach
                </ul>
            @else
                <div class="py-8 text-center text-slate-500">
                    <i class="fa-solid fa-circle-check text-2xl text-emerald-500/50 mb-2"></i>
                    <p class="mt-1 text-[11px]">{{ trans('admin.all_normal_quota') }}</p>
                </div>
            @endif
        </div>
    </div>

    <!-- Live Client Activity Feed & Live Invoices Stream -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">

        <!-- Live Client Activity Stream -->
        <div class="bg-navy-900 border border-slate-800 rounded-2xl p-6 shadow-xl">
            <div class="flex items-center justify-between mb-4">
                <div class="flex items-center gap-2 font-bold text-white text-sm">
                    <span class="w-2.5 h-2.5 rounded-full bg-emerald-400 animate-pulse"></span>
                    <h3>{{ trans('admin.live_activity_stream') }}</h3>
                </div>
                <span class="text-[11px] text-slate-500">{{ trans('admin.live_indicator') }}</span>
            </div>

            <div class="space-y-3">
                @forelse($clientActivityStream as $activity)
                    <div class="p-3 rounded-xl bg-navy-950/60 border border-slate-800/80 flex items-start gap-3 hover:border-slate-700 transition">
                        <span class="text-base p-1.5 rounded-lg bg-slate-800/80">{{ $activity['icon'] }}</span>
                        <div class="flex-1 min-w-0">
                            <div class="flex items-center justify-between gap-2">
                                @if($activity['tenant_uuid'])
                                    <a href="{{ route('admin.tenants.show', $activity['tenant_uuid']) }}" class="font-bold text-white hover:text-emerald-400 transition truncate text-xs">
                                        {{ $activity['tenant_name'] }}
                                    </a>
                                @else
                                    <span class="font-bold text-white truncate text-xs">{{ $activity['tenant_name'] }}</span>
                                @endif
                                <span class="text-[10px] text-slate-500 whitespace-nowrap code-font">
                                    {{ $activity['timestamp'] ? $activity['timestamp']->diffForHumans() : '' }}
                                </span>
                            </div>
                            <div class="text-[11px] text-slate-300 mt-0.5 truncate">{{ $activity['title'] }}</div>
                            <div class="text-[10px] text-slate-400 mt-0.5 code-font truncate">{{ $activity['detail'] }}</div>
                        </div>
                    </div>
                @empty
                    <div class="py-8 text-center text-slate-500">
                        {{ trans('admin.no_activities_yet') }}
                    </div>
                @endforelse
            </div>
        </div>

        <!-- Recent Global Invoices -->
        <div class="bg-navy-900 border border-slate-800 rounded-2xl p-6 shadow-xl">
            <div class="flex items-center justify-between mb-4">
                <div class="flex items-center gap-2 font-bold text-white text-sm">
                    <i class="fa-solid fa-file-invoice text-emerald-400"></i>
                    <h3>{{ trans('admin.live_traffic') }}</h3>
                </div>
                <span class="text-[11px] text-slate-500">{{ trans('admin.live_indicator') }}</span>
            </div>

            <div class="overflow-x-auto">
                <table class="w-full text-start text-xs">
                    <thead class="text-slate-400 border-b border-slate-800">
                        <tr>
                            <th class="pb-3 text-start">{{ trans('dashboard.invoice_number') }}</th>
                            <th class="pb-3 text-start">{{ trans('admin.company') }}</th>
                            <th class="pb-3 text-start">{{ trans('dashboard.total_amount') }}</th>
                            <th class="pb-3 text-start">{{ trans('dashboard.status_in_zatca') }}</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-800/60 text-slate-300">
                        @forelse($recentInvoices as $inv)
                            <tr class="hover:bg-navy-950/40 transition">
                                <td class="py-3 font-bold text-white code-font">{{ $inv->invoice_number }}</td>
                                <td class="py-3">
                                    @if($inv->tenant)
                                        <a href="{{ route('admin.tenants.show', $inv->tenant->uuid) }}" class="text-emerald-300 hover:underline">
                                            {{ $inv->tenant->name }}
                                        </a>
                                    @else
                                        <span class="text-slate-500">-</span>
                                    @endif
                                </td>
                                <td class="py-3 font-bold text-emerald-400 code-font">{{ number_format($inv->total, 2) }} <span class="sar-symbol">﷼</span></td>
                                <td class="py-3">
                                    @if($inv->status->value === 'cleared')
                                        <span class="px-2 py-0.5 rounded-full bg-emerald-500/10 text-emerald-400 text-[10px] font-bold">{{ trans('dashboard.cleared_badge') }}</span>
                                    @elseif($inv->status->value === 'reported')
                                        <span class="px-2 py-0.5 rounded-full bg-sky-500/10 text-sky-400 text-[10px] font-bold">{{ trans('dashboard.reported_badge') }}</span>
                                    @else
                                        <span class="px-2 py-0.5 rounded-full bg-amber-500/10 text-amber-400 text-[10px] font-bold">{{ $inv->status->label() }}</span>
                                    @endif
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="4" class="text-center py-6 text-slate-500">{{ trans('admin.no_invoices_yet') }}</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>

    </div>

    <!-- Recent Registered Tenants Table -->
    <div class="bg-navy-900 border border-slate-800 rounded-2xl p-6 shadow-xl">
        <div class="flex items-center justify-between mb-4">
            <div class="flex items-center gap-2 font-bold text-white text-sm">
                <i class="fa-solid fa-building text-emerald-400"></i>
                <h3>{{ trans('admin.recent_tenants') }}</h3>
            </div>
            <a href="{{ route('admin.tenants.index') }}" class="text-xs font-bold text-emerald-400 hover:underline">{{ trans('admin.view_all') }}</a>
        </div>
        <div class="overflow-x-auto">
            <table class="w-full text-start text-xs">
                <thead class="text-slate-400 border-b border-slate-800">
                    <tr>
                        <th class="pb-3 text-start">{{ trans('admin.company') }}</th>
                        <th class="pb-3 text-start">{{ trans('admin.vat_number') }}</th>
                        <th class="pb-3 text-start">{{ trans('admin.plan') }}</th>
                        <th class="pb-3 text-start">{{ trans('admin.quota_usage') }}</th>
                        <th class="pb-3 text-start">{{ trans('admin.devices') }}</th>
                        <th class="pb-3 text-start">{{ trans('admin.status') }}</th>
                        <th class="pb-3 text-center">{{ trans('admin.action') }}</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-800/60 text-slate-300">
                    @forelse($recentTenants as $t)
                        <tr class="hover:bg-navy-950/40 transition">
                            <td class="py-3 font-bold text-white">{{ $t->name }}</td>
                            <td class="py-3 code-font text-slate-400">{{ $t->vat_number }}</td>
                            <td class="py-3">
                                <span class="px-2 py-0.5 rounded-full bg-emerald-500/10 text-emerald-400 text-[10px] font-bold uppercase">{{ $t->plan }}</span>
                            </td>
                            <td class="py-3 code-font">
                                {{ $t->invoices_used_this_month }} / {{ $t->monthly_invoice_limit }}
                            </td>
                            <td class="py-3 code-font">{{ $t->devices_count }}</td>
                            <td class="py-3">
                                @if($t->is_active)
                                    <span class="px-2 py-0.5 rounded-full bg-emerald-500/10 text-emerald-400 text-[10px] font-bold">{{ trans('admin.active') }}</span>
                                @else
                                    <span class="px-2 py-0.5 rounded-full bg-rose-500/10 text-rose-400 text-[10px] font-bold">{{ trans('admin.inactive') }}</span>
                                @endif
                            </td>
                            <td class="py-3 text-center">
                                <a href="{{ route('admin.tenants.show', $t->uuid) }}" class="px-3 py-1.5 rounded-lg bg-slate-800 hover:bg-emerald-600 text-emerald-300 hover:text-white font-bold transition text-[11px]">
                                    {{ trans('admin.manage') }}
                                </a>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="7" class="text-center py-6 text-slate-500">{{ trans('admin.no_tenants_yet') }}</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

</div>
@endsection