@extends('layouts.app', ['title' => 'Dashboard'])

@section('content')
<div class="space-y-6">
    <section class="rounded-[2rem] border border-white/10 bg-slate-900/70 p-6">
        <h1 class="font-display text-3xl font-bold text-white">Customer dashboard</h1>
        <p class="mt-2 text-sm text-slate-400">Manage licenses, access downloads, track billing, and keep customer operations moving from one place.</p>
        <div class="mt-8 grid gap-4 sm:grid-cols-2 xl:grid-cols-5">
            <div class="rounded-3xl border border-white/10 bg-white/5 p-5"><div class="text-sm text-slate-400">Licenses</div><div class="mt-2 text-3xl font-bold text-white">{{ $stats['licenses'] }}</div></div>
            <div class="rounded-3xl border border-white/10 bg-white/5 p-5"><div class="text-sm text-slate-400">Downloads</div><div class="mt-2 text-3xl font-bold text-white">{{ $stats['downloads'] }}</div></div>
            <div class="rounded-3xl border border-white/10 bg-white/5 p-5"><div class="text-sm text-slate-400">Orders</div><div class="mt-2 text-3xl font-bold text-white">{{ $stats['orders'] }}</div></div>
            <div class="rounded-3xl border border-white/10 bg-white/5 p-5"><div class="text-sm text-slate-400">Notifications</div><div class="mt-2 text-3xl font-bold text-white">{{ $stats['notifications'] }}</div></div>
            <div class="rounded-3xl border border-white/10 bg-white/5 p-5"><div class="text-sm text-slate-400">Open tickets</div><div class="mt-2 text-3xl font-bold text-white">{{ $stats['tickets'] }}</div></div>
        </div>
        <div class="mt-6 flex flex-wrap gap-3 text-sm">
            <a href="{{ route('downloads.index') }}" class="rounded-full bg-brand-500 px-4 py-2 font-medium text-white">Downloads</a>
            <a href="{{ route('billing.index') }}" class="rounded-full border border-white/15 px-4 py-2 text-slate-200">Billing</a>
            <a href="{{ route('support.index') }}" class="rounded-full border border-white/15 px-4 py-2 text-slate-200">Support</a>
            <a href="{{ route('notifications.index') }}" class="rounded-full border border-white/15 px-4 py-2 text-slate-200">Notifications</a>
            <a href="{{ route('profile.index') }}" class="rounded-full border border-white/15 px-4 py-2 text-slate-200">Profile</a>
        </div>
    </section>

<div class="grid gap-6 lg:grid-cols-[1.2fr_0.8fr]">
    <section class="rounded-[2rem] border border-white/10 bg-slate-900/70 p-6">
        <h2 class="font-display text-3xl font-bold text-white">Your licenses</h2>
        <p class="mt-2 text-sm text-slate-400">Track product licenses, manage domain activations, and monitor verification activity.</p>
        <div class="mt-8 grid gap-4 sm:grid-cols-2 xl:grid-cols-3">
            @foreach ($licenses as $license)
                <div class="rounded-3xl border border-white/10 bg-white/5 p-5">
                    <div class="text-xs uppercase tracking-[0.25em] text-slate-400">{{ $license->product?->name }}</div>
                    <div class="mt-2 text-lg font-semibold text-white">{{ $license->license_key }}</div>
                    <div class="mt-4 text-sm text-slate-300">Status: {{ ucfirst($license->status) }}</div>
                    <div class="text-sm text-slate-300">Active installs: {{ $license->activations->whereNull('deactivated_at')->count() }}/{{ $license->activation_limit }}</div>
                </div>
            @endforeach
        </div>
    </section>
    <section class="rounded-[2rem] border border-white/10 bg-slate-900/70 p-6">
        <h2 class="font-display text-2xl font-semibold text-white">Recent activity</h2>
        <div class="mt-6 space-y-4">
            @forelse ($activityLogs as $entry)
                <div class="rounded-2xl border border-white/10 bg-white/5 p-4">
                    <div class="text-sm font-semibold text-white">{{ $entry->event }}</div>
                    <div class="mt-1 text-sm text-slate-300">{{ $entry->description }}</div>
                    <div class="mt-2 text-xs text-slate-500">{{ $entry->created_at?->diffForHumans() }}</div>
                </div>
            @empty
                <p class="text-sm text-slate-400">No activity has been recorded yet.</p>
            @endforelse
        </div>
    </section>
</div>
</div>
@endsection