@extends('admin.layout')

@section('title', 'Dashboard')

@section('content')
<div class="px-4 sm:px-0">
    <h2 class="text-3xl font-bold text-gray-900 mb-8">Dashboard</h2>

    <!-- Stats Grid -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
        <div class="bg-white rounded-xl shadow-sm p-6 border border-gray-100">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm font-medium text-gray-600">Articoli Totali</p>
                    <p class="text-3xl font-bold text-gray-900 mt-2">{{ $stats['total_articles'] }}</p>
                </div>
                <div class="bg-indigo-100 rounded-full p-3">
                    <i data-lucide="file-text" class="text-indigo-600" width="24" height="24"></i>
                </div>
            </div>
        </div>

        <div class="bg-white rounded-xl shadow-sm p-6 border border-gray-100">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm font-medium text-gray-600">Pubblicati</p>
                    <p class="text-3xl font-bold text-green-600 mt-2">{{ $stats['published_articles'] }}</p>
                </div>
                <div class="bg-green-100 rounded-full p-3">
                    <i data-lucide="check-circle" class="text-green-600" width="24" height="24"></i>
                </div>
            </div>
        </div>

        <div class="bg-white rounded-xl shadow-sm p-6 border border-gray-100">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm font-medium text-gray-600">Bozze</p>
                    <p class="text-3xl font-bold text-yellow-600 mt-2">{{ $stats['draft_articles'] }}</p>
                </div>
                <div class="bg-yellow-100 rounded-full p-3">
                    <i data-lucide="edit" class="text-yellow-600" width="24" height="24"></i>
                </div>
            </div>
        </div>
    </div>

    <!-- Recent Articles -->
    <div class="bg-white rounded-xl shadow-sm border border-gray-100">
        <div class="px-6 py-5 border-b border-gray-100 flex justify-between items-center">
            <h3 class="text-lg font-semibold text-gray-900">Articoli Recenti</h3>
            <a href="{{ route('admin.articles.create') }}" class="bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700 transition-colors text-sm font-medium inline-flex items-center">
                <i data-lucide="plus" class="mr-2" width="16" height="16"></i>
                Nuovo Articolo
            </a>
        </div>

        @if($stats['recent_articles']->count() > 0)
            <div class="divide-y divide-gray-100">
                @foreach($stats['recent_articles'] as $article)
                    <div class="px-6 py-4 hover:bg-gray-50 transition-colors">
                        <div class="flex justify-between items-start">
                            <div class="flex-1">
                                <h4 class="text-base font-semibold text-gray-900">{{ $article->title }}</h4>
                                <p class="text-sm text-gray-600 mt-1">
                                    {{ $article->author->name ?? 'Sconosciuto' }} •
                                    {{ $article->created_at->diffForHumans() }}
                                </p>
                            </div>
                            <div class="flex items-center space-x-3 ml-4">
                                @if($article->is_published)
                                    <span class="px-3 py-1 text-xs font-medium bg-green-100 text-green-800 rounded-full">
                                        Pubblicato
                                    </span>
                                @else
                                    <span class="px-3 py-1 text-xs font-medium bg-yellow-100 text-yellow-800 rounded-full">
                                        Bozza
                                    </span>
                                @endif
                                <a href="{{ route('admin.articles.edit', $article) }}" class="text-indigo-600 hover:text-indigo-700">
                                    <i data-lucide="edit" width="18" height="18"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        @else
            <div class="px-6 py-12 text-center">
                <i data-lucide="inbox" class="mx-auto text-gray-400 mb-4" width="48" height="48"></i>
                <p class="text-gray-500">Nessun articolo disponibile</p>
                <a href="{{ route('admin.articles.create') }}" class="mt-4 inline-block text-indigo-600 hover:text-indigo-700 font-medium">
                    Crea il tuo primo articolo
                </a>
            </div>
        @endif

        @if($stats['recent_articles']->count() > 0)
            <div class="px-6 py-4 bg-gray-50 border-t border-gray-100">
                <a href="{{ route('admin.articles.index') }}" class="text-sm text-indigo-600 hover:text-indigo-700 font-medium">
                    Vedi tutti gli articoli →
                </a>
            </div>
        @endif
    </div>
</div>
@endsection