@extends('layouts.app')

@section('title', 'Dashboard')
@section('heading', 'Dashboard')

@section('content')
<div class="space-y-8">
    <!-- Stats -->
    <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
        <div class="rounded-xl border border-slate-200 bg-white p-6 shadow-sm">
            <p class="text-sm font-medium text-slate-500">Products</p>
            <p class="mt-2 text-3xl font-bold text-slate-900">{{ $stats['products'] }}</p>
        </div>
        <div class="rounded-xl border border-slate-200 bg-white p-6 shadow-sm">
            <p class="text-sm font-medium text-slate-500">Orders</p>
            <p class="mt-2 text-3xl font-bold text-slate-900">{{ $stats['orders'] }}</p>
        </div>
        <div class="rounded-xl border border-slate-200 bg-white p-6 shadow-sm">
            <p class="text-sm font-medium text-slate-500">Campaigns</p>
            <p class="mt-2 text-3xl font-bold text-slate-900">{{ $stats['campaigns'] }}</p>
        </div>
        <div class="rounded-xl border border-slate-200 bg-white p-6 shadow-sm">
            <p class="text-sm font-medium text-slate-500">AI requests</p>
            <p class="mt-2 text-3xl font-bold text-slate-900">{{ $stats['ai_requests'] }}</p>
        </div>
    </div>

    <!-- Quick sections -->
    <div class="grid gap-8 lg:grid-cols-2">
        @can('viewAny', App\Models\User::class)
        <section id="users" class="rounded-xl border border-slate-200 bg-white p-6 shadow-sm">
            <h2 class="text-lg font-semibold text-slate-900">Users</h2>
            <p class="mt-2 text-sm text-slate-600">Manage team members, roles, and access. Add users and assign roles (Tenant Admin, Marketing Manager, Sales Manager, Viewer).</p>
            <a href="{{ route('users.index') }}" class="mt-4 inline-flex items-center text-sm font-medium text-indigo-600 hover:text-indigo-500">Manage users →</a>
        </section>
        @endcan
        <section id="products" class="rounded-xl border border-slate-200 bg-white p-6 shadow-sm">
            <h2 class="text-lg font-semibold text-slate-900">Products</h2>
            <p class="mt-2 text-sm text-slate-600">Manage your digital products and files. Add products, set prices, and deliver via secure download links.</p>
            <a href="{{ route('products.index') }}" class="mt-4 inline-flex items-center text-sm font-medium text-indigo-600 hover:text-indigo-500">View products →</a>
        </section>
        <section id="orders" class="rounded-xl border border-slate-200 bg-white p-6 shadow-sm">
            <h2 class="text-lg font-semibold text-slate-900">Orders</h2>
            <p class="mt-2 text-sm text-slate-600">Track orders from pending to paid and completed. Customers get secure, time-limited download links.</p>
            <a href="{{ route('orders.index') }}" class="mt-4 inline-flex items-center text-sm font-medium text-indigo-600 hover:text-indigo-500">View orders →</a>
        </section>
        <section id="campaigns" class="rounded-xl border border-slate-200 bg-white p-6 shadow-sm">
            <h2 class="text-lg font-semibold text-slate-900">Campaigns</h2>
            <p class="mt-2 text-sm text-slate-600">Create and send email campaigns. Draft, schedule, and send in batches with delivery tracking.</p>
            <a href="{{ route('campaigns.index') }}" class="mt-4 inline-flex items-center text-sm font-medium text-indigo-600 hover:text-indigo-500">View campaigns →</a>
        </section>
        <section id="ai" class="rounded-xl border border-slate-200 bg-white p-6 shadow-sm">
            <h2 class="text-lg font-semibold text-slate-900">AI Studio</h2>
            <p class="mt-2 text-sm text-slate-600">Generate marketing copy and content with AI. Requests are queued and processed in the background.</p>
            <a href="{{ route('ai-studio.index') }}" class="mt-4 inline-flex items-center text-sm font-medium text-indigo-600 hover:text-indigo-500">Open AI Studio →</a>
        </section>
    </div>
</div>
@endsection