@extends('app-admin.layout')
@section('title', 'Dashboard — Wavora Admin')
@section('page-title', 'Dashboard')
@section('page-sub', 'Platform overview')

@section('topbar-actions')
    <a href="{{ route('app-admin.settings.edit') }}" class="btn btn-outline btn-sm">
        <span class="ms">settings</span> Settings
    </a>
@endsection

@section('content')
{{-- Stat Cards --}}
<div class="stat-grid">
    <div class="stat-card">
        <div style="display:flex;justify-content:space-between;align-items:flex-start">
            <div>
                <div class="stat-label">Total Tenants</div>
                <div class="stat-value" style="margin-top:6px">{{ $stats['Tenants'] }}</div>
            </div>
            <div class="stat-card-icon blue"><span class="ms">corporate_fare</span></div>
        </div>
        <div class="stat-trend">Registered businesses</div>
    </div>
    <div class="stat-card">
        <div style="display:flex;justify-content:space-between;align-items:flex-start">
            <div>
                <div class="stat-label">WA Devices</div>
                <div class="stat-value" style="margin-top:6px">{{ $stats['Devices'] }}</div>
            </div>
            <div class="stat-card-icon green"><span class="ms">smartphone</span></div>
        </div>
        <div class="stat-trend">Connected numbers</div>
    </div>
    <div class="stat-card">
        <div style="display:flex;justify-content:space-between;align-items:flex-start">
            <div>
                <div class="stat-label">Queued Messages</div>
                <div class="stat-value" style="margin-top:6px">{{ $stats['Queued'] }}</div>
            </div>
            <div class="stat-card-icon yellow"><span class="ms">schedule_send</span></div>
        </div>
        <div class="stat-trend">Awaiting dispatch</div>
    </div>
    <div class="stat-card">
        <div style="display:flex;justify-content:space-between;align-items:flex-start">
            <div>
                <div class="stat-label">Webhooks</div>
                <div class="stat-value" style="margin-top:6px">{{ $stats['Webhooks'] }}</div>
            </div>
            <div class="stat-card-icon purple"><span class="ms">webhook</span></div>
        </div>
        <div class="stat-trend">Registered endpoints</div>
    </div>
</div>

{{-- Quick links --}}
<div style="display:flex;gap:10px;margin-bottom:20px;flex-wrap:wrap">
    <a href="{{ route('app-admin.modules.show', 'tenants') }}" class="btn btn-outline btn-sm">
        <span class="ms">corporate_fare</span> Manage Tenants
    </a>
    <a href="{{ route('app-admin.modules.show', 'devices') }}" class="btn btn-outline btn-sm">
        <span class="ms">smartphone</span> WA Devices
    </a>
    <a href="{{ route('app-admin.modules.show', 'plans') }}" class="btn btn-outline btn-sm">
        <span class="ms">layers</span> Plans
    </a>
    <a href="{{ route('app-admin.modules.show', 'messages') }}" class="btn btn-outline btn-sm">
        <span class="ms">forum</span> Messages
    </a>
    <a href="{{ route('app-admin.modules.show', 'invoices') }}" class="btn btn-outline btn-sm">
        <span class="ms">description</span> Invoices
    </a>
    <a href="{{ route('app-admin.modules.show', 'audit_logs') }}" class="btn btn-outline btn-sm">
        <span class="ms">history</span> Audit Logs
    </a>
</div>

{{-- Devices + Messages --}}
<div class="grid-2">
    <div class="card">
        <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:14px">
            <div class="card-title" style="margin-bottom:0">Recent Devices</div>
            <a href="{{ route('app-admin.modules.show','devices') }}" class="btn btn-ghost btn-sm">View all</a>
        </div>
        @forelse($devices as $d)
        <div style="display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-top:1px solid var(--border)">
            <div style="display:flex;align-items:center;gap:10px">
                <div style="width:32px;height:32px;border-radius:9px;background:var(--frost);display:grid;place-items:center">
                    <span class="ms" style="font-size:16px;color:var(--muted)">smartphone</span>
                </div>
                <div>
                    <div style="font-size:13px;font-weight:600">{{ $d->name ?? $d->label ?? 'Device' }}</div>
                    <div style="font-size:11px;color:var(--muted);font-family:'IBM Plex Mono',monospace">{{ $d->phone ?? '—' }}</div>
                </div>
            </div>
            @php
                $st = $d->status ?? 'unknown';
                $cls = match($st) { 'connected' => 'badge-green', 'disconnected' => 'badge-red', default => 'badge-gray' };
            @endphp
            <span class="badge {{ $cls }}">{{ $st }}</span>
        </div>
        @empty
        <div class="empty">
            <span class="ms">smartphone</span>
            <p>No devices yet</p>
        </div>
        @endforelse
    </div>

    <div class="card">
        <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:14px">
            <div class="card-title" style="margin-bottom:0">Recent Messages</div>
            <a href="{{ route('app-admin.modules.show','messages') }}" class="btn btn-ghost btn-sm">View all</a>
        </div>
        @forelse($messages as $m)
        <div style="display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-top:1px solid var(--border);gap:10px">
            <div style="min-width:0;flex:1">
                <div style="font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis">
                    {{ $m->to ?? $m->recipient ?? '—' }}
                </div>
                <div style="font-size:11px;color:var(--muted);margin-top:2px">
                    {{ $m->created_at?->diffForHumans() ?? '—' }}
                </div>
            </div>
            @php
                $ms = $m->status ?? 'queued';
                $mc = match($ms) { 'sent' => 'badge-green', 'failed' => 'badge-red', 'queued' => 'badge-yellow', 'processing' => 'badge-blue', default => 'badge-gray' };
            @endphp
            <span class="badge {{ $mc }}">{{ $ms }}</span>
        </div>
        @empty
        <div class="empty">
            <span class="ms">forum</span>
            <p>No messages yet</p>
        </div>
        @endforelse
    </div>
</div>

{{-- System info card --}}
<div class="card" style="margin-top:16px">
    <div class="card-title">System Information</div>
    <div class="grid-3">
        <div>
            <div style="font-size:11px;color:var(--muted);margin-bottom:4px">Application</div>
            <div style="font-size:13px;font-weight:600">{{ config('app.name') }}</div>
            <div style="font-size:11px;color:var(--muted)">{{ app()->version() }}</div>
        </div>
        <div>
            <div style="font-size:11px;color:var(--muted);margin-bottom:4px">Environment</div>
            <div style="font-size:13px;font-weight:600;display:flex;align-items:center;gap:6px">
                {{ config('app.env') }}
                @if(config('app.env') === 'production')
                    <span class="badge badge-green">Production</span>
                @else
                    <span class="badge badge-yellow">{{ config('app.env') }}</span>
                @endif
            </div>
        </div>
        <div>
            <div style="font-size:11px;color:var(--muted);margin-bottom:4px">Server Time</div>
            <div style="font-size:13px;font-weight:600;font-family:'IBM Plex Mono',monospace">
                {{ now()->format('Y-m-d H:i:s T') }}
            </div>
        </div>
    </div>
</div>
@endsection