@extends('dashboard.app')

@section('title', 'Dashboard')
@section('page_title', 'Your Overview')
@section('page_subtitle', 'Quick stats and recent keyword activity.')

@section('dashboard_content')
@php
    $user = auth()->user();
    $isPersonal = $user && (string) $user->tier === 'personal';
    $subscription = $subscription ?? null;
@endphp

<div class="grid gap-6 lg:grid-cols-4">
    <div class="rounded-3xl glass-card p-6">
        <div class="text-xs uppercase tracking-[0.25em] text-gray-400">Total keywords</div>
        <div class="mt-3 text-3xl font-semibold text-white">{{ number_format($totalKeywords ?? 0) }}</div>
        <div class="mt-2 text-sm text-gray-400">Across your emoji library</div>
    </div>
    <div class="rounded-3xl glass-card p-6">
        <div class="text-xs uppercase tracking-[0.25em] text-gray-400">Last 7 days</div>
        <div class="mt-3 text-3xl font-semibold text-white">{{ number_format($recentWeekCount ?? 0) }}</div>
        <div class="mt-2 text-sm text-gray-400">New keywords added</div>
    </div>
    <div class="rounded-3xl glass-card p-6">
        <div class="text-xs uppercase tracking-[0.25em] text-gray-400">API keys</div>
        <div class="mt-3 text-3xl font-semibold text-white">{{ number_format($apiKeyCount ?? 0) }}</div>
        <div class="mt-2 text-sm text-gray-400">Active keys</div>
    </div>
    <div class="rounded-3xl glass-card p-6">
        <div class="text-xs uppercase tracking-[0.25em] text-gray-400">Plan</div>
        <div class="mt-3 text-2xl font-semibold text-white">{{ $isPersonal ? 'Personal' : 'Free' }}</div>
        <div class="mt-2 text-sm text-gray-400">
            {{ $subscription?->status ? ucfirst($subscription->status) : 'No active subscription' }}
        </div>
    </div>
    <div class="rounded-3xl glass-card p-6">
        <div class="text-xs uppercase tracking-[0.25em] text-gray-400">Synced devices</div>
        <div class="mt-3 text-3xl font-semibold text-white">0</div>
        <div class="mt-2 text-sm text-gray-400">Coming soon</div>
    </div>
</div>

<div class="mt-8 grid gap-6 lg:grid-cols-3">
    <div class="lg:col-span-2 rounded-3xl glass-card p-6">
        <div class="flex items-center justify-between">
            <div>
                <div class="text-xs uppercase tracking-[0.25em] text-gray-400">Recent keywords</div>
                <div class="mt-2 text-xl font-semibold text-white">Latest additions</div>
            </div>
            <a href="{{ route('dashboard.keywords') }}" class="rounded-full border border-white/10 px-4 py-2 text-xs text-gray-300 hover:bg-white/5">
                Manage keywords
            </a>
        </div>

        <div class="mt-6 grid gap-3 md:grid-cols-2">
            @forelse ($recentKeywords ?? [] as $keyword)
                <div class="rounded-2xl bg-white/5 border border-white/10 p-4">
                    <div class="text-xs uppercase tracking-[0.2em] text-gray-500">{{ $keyword->lang ?? 'und' }}</div>
                    <div class="mt-2 text-lg font-semibold text-white">{{ $keyword->keyword }}</div>
                    <div class="mt-1 text-xs text-gray-400">Emoji slug: {{ $keyword->emoji_slug }}</div>
                </div>
            @empty
                <div class="rounded-2xl border border-dashed border-white/10 p-6 text-sm text-gray-400">
                    No keywords yet. Add your first keyword from an emoji detail page or the dashboard.
                </div>
            @endforelse
        </div>
    </div>

    <div class="rounded-3xl glass-card p-6 flex flex-col gap-4">
        <div>
            <div class="text-xs uppercase tracking-[0.25em] text-gray-400">Next steps</div>
            <div class="mt-2 text-xl font-semibold text-white">Personalize faster</div>
        </div>
        <div class="rounded-2xl bg-white/5 border border-white/10 p-4 text-sm text-gray-300">
            Add keywords right on emoji detail pages to speed up your searches.
        </div>
        @if (!$isPersonal)
            <div class="rounded-2xl border border-amber-200 bg-amber-50 p-4 text-sm text-amber-800 dark:border-brand-sun/30 dark:bg-brand-sun/10 dark:text-brand-sun">
                Upgrade to Personal to unlock private keywords and sync across devices.
            </div>
            <a href="{{ route('pricing') }}" class="inline-flex items-center justify-center rounded-full bg-brand-sun text-black font-semibold px-4 py-2 text-sm">
                Upgrade to Personal
            </a>
        @else
            <a href="{{ route('dashboard.keywords') }}" class="inline-flex items-center justify-center rounded-full bg-brand-ocean text-white font-semibold px-4 py-2 text-sm">
                Add keywords
            </a>
        @endif
    </div>
</div>
@endsection