@extends('layouts.admin')

@section('title', 'Tableau de bord')

@section('content')

    <div class="mb-6 flex flex-col gap-1">
        <h1 class="text-xl font-bold text-brand-ink">Tableau de bord</h1>
        <p class="text-sm text-brand-muted">Vue d'ensemble du site public NH TRANS.</p>
    </div>

    <div class="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-7">
        <x-admin.stat-card label="Pages" :value="$stats['pages']" icon="layers" :href="route('admin.content.index')" />
        <x-admin.stat-card label="Services" :value="$stats['services']" icon="briefcase" :href="route('admin.services.index')" />
        <x-admin.stat-card label="Partenaires" :value="$stats['partners']" icon="handshake" :href="route('admin.partners.index')" />
        <x-admin.stat-card label="Clients" :value="$stats['clients']" icon="users" :href="route('admin.clients.index')" />
        <x-admin.stat-card label="Realisations" :value="$stats['gallery_items']" icon="image" :href="route('admin.gallery.index')" />
        <x-admin.stat-card label="Medias" :value="$stats['media']" icon="folder" :href="route('admin.media.index')" />
        <x-admin.stat-card label="Messages non lus" :value="$stats['unread_messages']" icon="mail" :href="route('admin.messages.index')" />
    </div>

    <div class="mt-6 grid grid-cols-1 gap-6 lg:grid-cols-3">
        <div class="admin-card p-5 lg:col-span-2">
            <div class="mb-4 flex items-center justify-between">
                <h2 class="text-sm font-semibold text-brand-ink">Etat du contenu</h2>
                <a href="{{ route('admin.content.index') }}" class="btn-text text-xs font-semibold">Tout voir</a>
            </div>

            <div class="flex flex-col divide-y divide-brand-border">
                @foreach ($contentStatus as $page)
                    <div class="flex flex-col gap-2 py-3 first:pt-0 last:pb-0 sm:flex-row sm:items-center sm:justify-between">
                        <div class="flex items-center gap-3">
                            <x-admin.status-badge :status="$page['status']" />
                            <span class="text-sm font-medium text-brand-ink">{{ $page['label'] }}</span>
                        </div>

                        <div class="flex items-center gap-3">
                            <div class="h-1.5 w-32 overflow-hidden rounded-full bg-brand-surface">
                                <div class="h-full rounded-full bg-brand-primary" style="width: {{ $page['completeness'] }}%"></div>
                            </div>
                            <span class="w-9 text-right text-xs font-semibold text-brand-muted">{{ $page['completeness'] }}%</span>
                            <a href="{{ route($page['edit_route']) }}" class="btn btn-secondary btn-sm">Modifier</a>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>

        <div class="admin-card p-5">
            <h2 class="mb-4 text-sm font-semibold text-brand-ink">Etat technique</h2>
            <dl class="flex flex-col gap-3 text-sm">
                <div class="flex items-center justify-between">
                    <dt class="text-brand-muted">Environnement</dt>
                    <dd class="font-medium text-brand-ink">{{ app()->environment() }}</dd>
                </div>
                <div class="flex items-center justify-between">
                    <dt class="text-brand-muted">Laravel</dt>
                    <dd class="font-medium text-brand-ink">{{ app()->version() }}</dd>
                </div>
                <div class="flex items-center justify-between">
                    <dt class="text-brand-muted">PHP</dt>
                    <dd class="font-medium text-brand-ink">{{ PHP_VERSION }}</dd>
                </div>
                <div class="flex items-center justify-between">
                    <dt class="text-brand-muted">Etat du site</dt>
                    <dd><x-admin.status-badge :status="$siteStatus" /></dd>
                </div>
            </dl>
        </div>
    </div>

    <div class="mt-6 grid grid-cols-1 gap-6 lg:grid-cols-3">
        <div class="admin-card p-5 lg:col-span-1">
            <h2 class="mb-4 text-sm font-semibold text-brand-ink">Actions rapides</h2>
            <div class="flex flex-col gap-2">
                <a href="{{ route('admin.content.home') }}" class="admin-nav-link"><x-icon name="home" class="h-4 w-4" /> Modifier l'accueil</a>
                <a href="{{ route('admin.services.create') }}" class="admin-nav-link"><x-icon name="plus" class="h-4 w-4" /> Ajouter un service</a>
                <a href="{{ route('admin.partners.create') }}" class="admin-nav-link"><x-icon name="plus" class="h-4 w-4" /> Ajouter un partenaire</a>
                <a href="{{ route('admin.clients.create') }}" class="admin-nav-link"><x-icon name="plus" class="h-4 w-4" /> Ajouter un client</a>
                <a href="{{ route('admin.gallery.create') }}" class="admin-nav-link"><x-icon name="plus" class="h-4 w-4" /> Ajouter une realisation</a>
                <a href="{{ route('admin.messages.index') }}" class="admin-nav-link"><x-icon name="mail" class="h-4 w-4" /> Consulter les messages</a>
                <a href="{{ route('home') }}" target="_blank" rel="noopener" class="admin-nav-link"><x-icon name="external" class="h-4 w-4" /> Ouvrir le site public</a>
            </div>
        </div>

        <div class="admin-card p-5">
            <div class="mb-4 flex items-center justify-between">
                <h2 class="text-sm font-semibold text-brand-ink">Activite recente</h2>
            </div>
            <ul class="flex flex-col gap-3">
                @forelse ($recentActivity as $entry)
                    <li class="flex items-start gap-2.5 text-sm">
                        <span class="mt-1.5 h-1.5 w-1.5 shrink-0 rounded-full bg-brand-primary"></span>
                        <span class="flex-1">
                            <span class="text-brand-ink">{{ $entry['label'] }}</span>
                            <span class="block text-xs text-brand-muted">{{ $entry['time_demo'] }}</span>
                        </span>
                    </li>
                @empty
                    <li class="text-sm text-brand-muted">Aucune activite enregistree.</li>
                @endforelse
            </ul>
            <a href="{{ route('admin.activity.index') }}" class="btn-text mt-3 inline-block text-xs font-semibold">Voir le journal complet</a>
        </div>

        <div class="admin-card p-5">
            <div class="mb-4 flex items-center justify-between">
                <h2 class="text-sm font-semibold text-brand-ink">Messages recents</h2>
            </div>
            <ul class="flex flex-col divide-y divide-brand-border">
                @forelse ($recentMessages as $msg)
                    <li class="flex items-center justify-between gap-2 py-2.5 first:pt-0 last:pb-0">
                        <a href="{{ route('admin.messages.show', $msg['id']) }}" class="min-w-0 flex-1">
                            <p class="truncate text-sm font-medium text-brand-ink">{{ $msg['subject'] }}</p>
                            <p class="truncate text-xs text-brand-muted">{{ $msg['name'] }} - {{ $msg['received_at_demo'] }}</p>
                        </a>
                        <x-admin.status-badge :status="$msg['status']" />
                    </li>
                @empty
                    <li class="py-2.5 text-sm text-brand-muted">Aucun message recu.</li>
                @endforelse
            </ul>
            <a href="{{ route('admin.messages.index') }}" class="btn-text mt-3 inline-block text-xs font-semibold">Voir tous les messages</a>
        </div>
    </div>

@endsection
