<!DOCTYPE html>
<html class="light" lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta content="width=device-width, initial-scale=1.0" name="viewport">
        <meta name="csrf-token" content="{{ csrf_token() }}">
        <title>Overview - {{ config('app.name', 'urless') }}</title>
        <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Manrope:wght@700;800;900&family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet">
        @vite(['resources/css/app.css', 'resources/js/app.js'])
        @include('partials.website-theme')
        <style>
            :root {
                --primary: #4648d4;
                --primary-container: #6063ee;
                --secondary: #515f74;
                --surface: #f7f9fb;
                --surface-container-low: #f2f4f6;
                --surface-container-lowest: #ffffff;
                --surface-container: #eceef0;
                --on-surface: #191c1e;
                --tertiary: #006c49;
                --error: #ba1a1a;
            }

            .font-manrope,
            .font-headline { font-family: "Manrope", ui-sans-serif, system-ui, sans-serif; }
            .font-body,
            .font-label { font-family: "Inter", ui-sans-serif, system-ui, sans-serif; }
            .bg-surface { background-color: var(--surface); }
            .bg-primary { background-color: var(--primary); }
            .bg-secondary { background-color: var(--secondary); }
            .bg-on-surface { background-color: var(--on-surface); }
            .bg-surface-container-low { background-color: var(--surface-container-low); }
            .bg-surface-container-lowest { background-color: var(--surface-container-lowest); }
            .bg-surface-container { background-color: var(--surface-container); }
            .text-primary { color: var(--primary); }
            .text-secondary { color: var(--secondary); }
            .text-on-surface { color: var(--on-surface); }
            .text-tertiary { color: var(--tertiary); }
            .text-error { color: var(--error); }
            .hover\:text-primary:hover { color: var(--primary); }
            .hover\:bg-primary:hover { background-color: var(--primary); }
            .material-symbols-outlined {
                font-family: "Material Symbols Outlined";
                font-weight: normal;
                font-style: normal;
                font-size: 24px;
                line-height: 1;
                letter-spacing: normal;
                text-transform: none;
                display: inline-block;
                white-space: nowrap;
                word-wrap: normal;
                direction: ltr;
                -webkit-font-feature-settings: "liga";
                -webkit-font-smoothing: antialiased;
                font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
            }
            .glass-panel {
                background: rgba(255, 255, 255, 0.7);
                backdrop-filter: blur(20px);
            }
            .sidebar-create-link {
                position: relative;
                overflow: hidden;
                background: linear-gradient(135deg, #4648d4 0%, #006c49 100%);
                color: #ffffff;
                box-shadow: 0 14px 28px rgba(70, 72, 212, 0.24);
                animation: sidebar-create-pulse 2.8s ease-in-out infinite;
            }
            .sidebar-create-link::after {
                content: "";
                position: absolute;
                inset: -60% auto -60% -50%;
                width: 42%;
                transform: rotate(14deg);
                background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.34), transparent);
                animation: sidebar-create-shine 3.4s ease-in-out infinite;
            }
            .sidebar-create-link > * {
                position: relative;
                z-index: 1;
            }
            @keyframes sidebar-create-pulse {
                0%, 100% { transform: translateY(0); box-shadow: 0 14px 28px rgba(70, 72, 212, 0.24); }
                50% { transform: translateY(-1px); box-shadow: 0 18px 34px rgba(70, 72, 212, 0.34); }
            }
            @keyframes sidebar-create-shine {
                0% { left: -55%; }
                45%, 100% { left: 130%; }
            }
        </style>
    </head>
    <body class="bg-surface font-body text-on-surface selection:bg-[#4648d4]/20">
        <div class="flex min-h-screen">
            <aside class="fixed left-0 top-0 z-50 hidden h-screen w-64 flex-col gap-2 bg-slate-50 p-4 md:flex">
                <div class="mb-8 px-2">
                    <div class="min-w-0">
                        @include('partials.website-brand', [
                            'showText' => false,
                            'class' => 'font-manrope text-xl font-black text-indigo-600',
                            'imageClass' => 'h-10 max-w-40 object-contain',
                        ])
                        <p class="mt-1 text-[10px] font-bold uppercase tracking-normal text-secondary">{{ auth()->user()->plan?->name ?? 'Starter' }} Plan</p>
                    </div>
                </div>

                <nav class="flex-1 space-y-1">
                    @foreach ([
                        [route('dashboard'), 'dashboard', 'Overview', true, false],
                        [route('links.create'), 'add_link', 'Create New Link', false, true],
                        [route('links.index'), 'link', 'My Links', false, false],
                        [route('dashboard.analytics'), 'monitoring', 'Analytics', false, false],
                        [route('dashboard.subscription'), 'workspace_premium', 'Subscription', false, false],
                        [route('profile.edit'), 'settings', 'Settings', false, false],
                    ] as [$href, $icon, $label, $active, $highlight])
                        <a class="flex items-center gap-3 rounded-xl px-4 py-3 transition-all duration-200 {{ $highlight ? 'sidebar-create-link' : ($active ? 'bg-white text-indigo-600 shadow-sm' : 'text-slate-500 hover:bg-indigo-50/50 hover:text-indigo-500') }}" href="{{ $href }}">
                            <span class="material-symbols-outlined">{{ $icon }}</span>
                            <span class="font-manrope text-sm font-medium">{{ $label }}</span>
                        </a>
                    @endforeach
                </nav>

                <div class="mt-auto space-y-1 border-t border-slate-200/50 pt-4">
                    <a class="flex items-center gap-3 rounded-xl px-4 py-3 text-slate-500 transition-all duration-200 hover:bg-indigo-50/50 hover:text-indigo-500" href="{{ route('pages.public', 'contact') }}">
                        <span class="material-symbols-outlined">help</span>
                        <span class="font-manrope text-sm font-medium">Help Center</span>
                    </a>
                    <form method="POST" action="{{ route('logout') }}">
                        @csrf
                        <button type="submit" class="flex w-full items-center gap-3 rounded-xl px-4 py-3 text-left text-slate-500 transition-all duration-200 hover:bg-indigo-50/50 hover:text-indigo-500">
                            <span class="material-symbols-outlined">logout</span>
                            <span class="font-manrope text-sm font-medium">Log Out</span>
                        </button>
                    </form>
                </div>
            </aside>

            <main class="min-h-screen flex-1 md:ml-64">
                <header class="glass-panel sticky top-0 z-40 flex w-full items-center justify-between border-b border-slate-100/50 px-6 py-3">
                    <div class="flex items-center gap-4">
                        <div class="flex h-10 w-10 items-center justify-center rounded-lg bg-[#4648d4]/10 text-primary md:hidden">
                            <span class="material-symbols-outlined">menu</span>
                        </div>
                        <div class="flex flex-col">
                            <h2 class="font-manrope text-lg font-bold text-on-surface">Overview</h2>
                            <p class="text-xs text-secondary">Your link command center is ready for the next campaign.</p>
                        </div>
                    </div>
                    <div class="flex items-center gap-4">
                        <div class="hidden items-center gap-2 rounded-full bg-surface-container-low px-4 py-2 text-secondary transition-all focus-within:ring-2 focus-within:ring-[#4648d4]/20 sm:flex">
                            <span class="material-symbols-outlined text-sm">search</span>
                            <input class="w-48 border-none bg-transparent text-sm focus:ring-0" placeholder="Search links..." type="text">
                        </div>
                        <x-user-notification-bell />
                        <a href="{{ route('links.create') }}" class="hidden rounded-full bg-primary px-4 py-2 text-sm font-semibold text-white transition-transform hover:scale-95 active:scale-90 lg:block">Create New Link</a>
                        <div class="flex h-9 w-9 items-center justify-center rounded-full border-2 border-white bg-indigo-100 text-sm font-black text-indigo-700 shadow-sm">
                            {{ Str::of(auth()->user()->name)->substr(0, 1)->upper() }}
                        </div>
                    </div>
                </header>

                <div class="mx-auto max-w-7xl space-y-6 p-6">
                    @if (session('created_link'))
                        <section class="rounded-xl border border-[#4648d4]/20 bg-white p-5 shadow-sm">
                            <p class="font-manrope text-sm font-bold text-primary">Ready to share</p>
                            <a href="{{ session('created_link') }}" class="mt-1 block break-all text-sm font-semibold text-secondary hover:text-primary">{{ session('created_link') }}</a>
                        </section>
                    @endif

                    <section class="grid grid-cols-1 gap-6 md:grid-cols-2 xl:grid-cols-4">
                        @foreach ([
                            ['link', 'Total Links', number_format($stats['links']), 'Library size', 'bg-[#4648d4]/5 text-primary', 'text-primary bg-[#4648d4]/10'],
                            ['touch_app', 'Clicks Today', number_format($stats['clicks_today']), '+12.5%', 'bg-[#006c49]/5 text-tertiary', 'text-tertiary bg-[#006c49]/10'],
                            ['ads_click', 'Active Ads', number_format($stats['active_ads']), 'Interstitial', 'bg-[#4648d4]/5 text-primary', 'text-primary bg-[#4648d4]/10'],
                            ['event_available', 'Remaining', $stats['remaining_days_label'], $stats['remaining_links_label'].' links left', 'bg-[#006c49]/5 text-tertiary', 'text-tertiary bg-[#006c49]/10'],
                        ] as [$icon, $label, $value, $badge, $iconClass, $badgeClass])
                            <article class="group rounded-xl border border-transparent bg-surface-container-lowest p-6 shadow-sm transition-all hover:border-[#4648d4]/10">
                                <div class="mb-4 flex items-start justify-between">
                                    <div class="rounded-lg p-2 {{ $iconClass }}">
                                        <span class="material-symbols-outlined">{{ $icon }}</span>
                                    </div>
                                    <span class="rounded-full px-2 py-1 text-xs font-bold {{ $badgeClass }}">{{ $badge }}</span>
                                </div>
                                <h3 class="font-label mb-1 text-sm font-medium text-secondary">{{ $label }}</h3>
                                <p class="font-manrope text-3xl font-extrabold text-on-surface">{{ $value }}</p>
                            </article>
                        @endforeach
                    </section>

                    <section class="grid grid-cols-1 gap-6 xl:grid-cols-[1.25fr_0.75fr]">
                        <div class="overflow-hidden rounded-xl bg-primary text-white shadow-sm">
                            <div class="grid gap-8 p-6 lg:grid-cols-[1fr_0.9fr] lg:p-8">
                                <div>
                                    <span class="rounded-full bg-white/15 px-3 py-1 text-xs font-bold uppercase tracking-normal text-white">Quick Shorten</span>
                                    <h3 class="font-manrope mt-5 max-w-xl text-3xl font-black leading-tight">Launch a direct or monetized link without leaving the overview.</h3>
                                    <p class="mt-3 max-w-lg text-sm leading-6 text-white/75">Paste the destination, choose an alias, and keep the campaign moving.</p>
                                    <div class="mt-8 grid grid-cols-3 gap-3">
                                        @foreach ([['30D Clicks', number_format($stats['clicks_30_days'])], ['7D Clicks', number_format($stats['clicks_7_days'])], ['CTR', number_format($stats['ctr_rate'], 2).'%']] as [$label, $value])
                                            <div class="rounded-lg bg-white/10 p-4">
                                                <p class="text-[10px] font-bold uppercase tracking-normal text-white/55">{{ $label }}</p>
                                                <p class="font-manrope mt-1 text-xl font-black">{{ $value }}</p>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>

                                <form method="POST" action="{{ route('links.store') }}" class="rounded-xl bg-white p-3 shadow-xl">
                                    @csrf
                                    <div class="space-y-2">
                                        <input name="original_url" type="url" required placeholder="https://your-long-url.com/campaign" value="{{ old('original_url') }}" class="w-full rounded-lg border-0 bg-surface-container-low px-4 py-4 text-sm text-on-surface placeholder:text-slate-400 focus:ring-2 focus:ring-[#4648d4]/30">
                                        <div class="grid gap-2 sm:grid-cols-[1fr_auto]">
                                            <input name="custom_alias" type="text" placeholder="custom-alias" value="{{ old('custom_alias') }}" class="w-full rounded-lg border-0 bg-surface-container-low px-4 py-4 text-sm text-on-surface placeholder:text-slate-400 focus:ring-2 focus:ring-[#4648d4]/30">
                                            <button type="submit" class="inline-flex items-center justify-center gap-2 rounded-lg bg-primary px-6 py-4 text-sm font-bold text-white transition-transform hover:scale-95 active:scale-90">
                                                Shorten
                                                <span class="material-symbols-outlined text-xl">bolt</span>
                                            </button>
                                        </div>
                                        @if ($errors->any())
                                            <p class="px-1 text-xs font-semibold text-error">{{ $errors->first() }}</p>
                                        @endif
                                    </div>
                                </form>
                            </div>
                        </div>

                        <div class="rounded-xl bg-surface-container-lowest p-6 shadow-sm">
                            <div class="mb-6 flex items-center justify-between">
                                <div>
                                    <h3 class="font-manrope text-lg font-bold">Plan Usage</h3>
                                    <p class="text-sm text-secondary">Growth plan limits and monetization health.</p>
                                </div>
                                <span class="material-symbols-outlined text-primary">workspace_premium</span>
                            </div>
                            <div class="space-y-6">
                                @foreach ([['Links used', $stats['plan_usage'], 'bg-primary'], ['Monetized links', $stats['conversion_health'], 'bg-[#006c49]'], ['Analytics retention', 76, 'bg-secondary']] as [$label, $percent, $bar])
                                    <div>
                                        <div class="mb-2 flex items-center justify-between">
                                            <span class="text-sm font-semibold">{{ $label }}</span>
                                            <span class="font-manrope text-sm font-bold">{{ $percent }}%</span>
                                        </div>
                                        <div class="h-2 overflow-hidden rounded-full bg-surface-container">
                                            <div class="h-full {{ $bar }}" style="width: {{ $percent }}%"></div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                            <a href="{{ route('dashboard.analytics') }}" class="mt-8 inline-flex items-center gap-2 text-sm font-bold text-primary">
                                Open analytics
                                <span class="material-symbols-outlined text-lg">arrow_forward</span>
                            </a>
                        </div>
                    </section>

                    <section class="grid grid-cols-1 gap-6 lg:grid-cols-3">
                        <div class="rounded-xl bg-surface-container-lowest p-6 shadow-sm lg:col-span-2">
                            <div class="mb-8 flex items-center justify-between">
                                <div>
                                    <h3 class="font-manrope text-lg font-bold">Performance Snapshot</h3>
                                    <p class="text-sm text-secondary">Click momentum across the active campaign window.</p>
                                </div>
                                <div class="flex rounded-lg bg-surface-container-low p-1">
                                    <span class="rounded-md bg-white px-3 py-1 text-xs font-semibold text-primary shadow-sm">7D</span>
                                    <span class="rounded-md px-3 py-1 text-xs font-semibold text-secondary">30D</span>
                                </div>
                            </div>
                            <div class="flex h-72 items-end gap-2">
                                @foreach ($trafficChart->take(-12) as $point)
                                    <div class="flex min-w-0 flex-1 flex-col justify-end">
                                        <div class="rounded-t-sm bg-[#4648d4]/15 transition-colors hover:bg-primary" style="height: {{ $point['height'] }}%" title="{{ $point['label'] }}: {{ $point['clicks'] }} clicks"></div>
                                    </div>
                                @endforeach
                            </div>
                            <div class="mt-4 flex justify-between text-[10px] font-bold uppercase tracking-normal text-secondary">
                                <span>{{ $trafficChart->take(-12)->first()['label'] ?? now()->subDays(11)->format('M d') }}</span>
                                <span>{{ $trafficChart->take(-8)->first()['label'] ?? now()->subDays(7)->format('M d') }}</span>
                                <span>{{ $trafficChart->take(-4)->first()['label'] ?? now()->subDays(3)->format('M d') }}</span>
                                <span>{{ $trafficChart->last()['label'] ?? now()->format('M d') }}</span>
                            </div>
                        </div>

                        <div class="rounded-xl bg-surface-container-lowest p-6 shadow-sm">
                            <div class="mb-6 flex items-center justify-between">
                                <h3 class="font-manrope text-lg font-bold">Recent Activity</h3>
                                <span class="material-symbols-outlined text-secondary">history</span>
                            </div>
                            <div class="space-y-4">
                                @forelse ($recentClicks as $click)
                                    <div class="flex gap-3 rounded-lg bg-surface p-3">
                                        <div class="flex h-9 w-9 items-center justify-center rounded-lg bg-[#4648d4]/10 text-primary">
                                            <span class="material-symbols-outlined text-lg">touch_app</span>
                                        </div>
                                        <div class="min-w-0 flex-1">
                                            <p class="truncate text-sm font-bold">{{ $click->link?->publicCode() ?? 'Deleted link' }}</p>
                                            <p class="text-xs text-secondary">{{ $click->device_type ?: 'Unknown device' }} - {{ $click->browser ?: 'Browser' }} - {{ optional($click->clicked_at)->diffForHumans() }}</p>
                                        </div>
                                    </div>
                                @empty
                                    @foreach ([['Launch your first link', 'Create a campaign to start collecting clicks.'], ['Enable interstitial ads', 'Monetized redirects will appear here.'], ['Share with your audience', 'Recent traffic events update instantly.']] as [$title, $body])
                                        <div class="flex gap-3 rounded-lg bg-surface p-3">
                                            <div class="flex h-9 w-9 items-center justify-center rounded-lg bg-[#4648d4]/10 text-primary">
                                                <span class="material-symbols-outlined text-lg">radio_button_checked</span>
                                            </div>
                                            <div>
                                                <p class="text-sm font-bold">{{ $title }}</p>
                                                <p class="text-xs text-secondary">{{ $body }}</p>
                                            </div>
                                        </div>
                                    @endforeach
                                @endforelse
                            </div>
                        </div>
                    </section>

                    <section class="grid grid-cols-1 gap-6 lg:grid-cols-[1fr_0.72fr]">
                        <div class="overflow-hidden rounded-xl bg-surface-container-lowest shadow-sm">
                            <div class="flex items-center justify-between border-b border-slate-100 p-6">
                                <div>
                                    <h3 class="font-manrope text-lg font-bold">Top Performing Links</h3>
                                    <p class="text-sm text-secondary">Your highest impact destinations.</p>
                                </div>
                                <a href="{{ route('links.index') }}" class="text-sm font-semibold text-primary hover:underline">View all</a>
                            </div>
                            <div class="overflow-x-auto">
                                <table class="w-full text-left">
                                    <thead class="bg-surface-container-low">
                                        <tr>
                                            <th class="px-6 py-4 text-xs font-bold uppercase tracking-normal text-secondary">Short Link</th>
                                            <th class="px-6 py-4 text-right text-xs font-bold uppercase tracking-normal text-secondary">Clicks</th>
                                            <th class="px-6 py-4 text-right text-xs font-bold uppercase tracking-normal text-secondary">Mode</th>
                                        </tr>
                                    </thead>
                                    <tbody class="divide-y divide-slate-100">
                                        @forelse ($topLinks as $link)
                                            <tr class="transition-colors hover:bg-slate-50">
                                                <td class="px-6 py-4">
                                                    <div class="max-w-sm truncate text-sm font-semibold">{{ $link->title ?: $link->publicCode() }}</div>
                                                    <a href="{{ $link->shortUrl() }}" class="font-mono text-xs text-secondary hover:text-primary">{{ $link->shortUrl() }}</a>
                                                </td>
                                                <td class="font-manrope px-6 py-4 text-right text-sm font-bold">{{ number_format($link->total_clicks) }}</td>
                                                <td class="px-6 py-4 text-right">
                                                    <span class="rounded bg-[#4648d4]/10 px-2 py-1 text-[10px] font-bold uppercase tracking-normal text-primary">{{ $link->redirect_type }}</span>
                                                </td>
                                            </tr>
                                        @empty
                                            <tr>
                                                <td colspan="3" class="px-6 py-8 text-center text-sm text-secondary">No links yet. Create one from the quick panel.</td>
                                            </tr>
                                        @endforelse
                                    </tbody>
                                </table>
                            </div>
                        </div>

                        <div class="rounded-xl bg-surface-container-lowest p-6 shadow-sm">
                            <div class="mb-6 flex items-center justify-between">
                                <div>
                                    <h3 class="font-manrope text-lg font-bold">Campaign Focus</h3>
                                    <p class="text-sm text-secondary">Suggested next moves.</p>
                                </div>
                                <span class="material-symbols-outlined text-primary">auto_awesome</span>
                            </div>
                            <div class="space-y-4">
                                @foreach ([['Add QR codes', 'Turn high intent links into offline-ready campaigns.', 'qr_code_2'], ['Review referrers', 'Spot which channels deserve more distribution.', 'share'], ['Create sponsor page', 'Attach a polished timer page to the next link.', 'ads_click']] as [$title, $body, $icon])
                                    <article class="rounded-lg border border-transparent bg-surface p-4 transition-colors hover:border-[#4648d4]/10 hover:bg-[#4648d4]/5">
                                        <div class="flex items-start gap-3">
                                            <div class="flex h-10 w-10 items-center justify-center rounded-lg bg-white text-primary shadow-sm">
                                                <span class="material-symbols-outlined">{{ $icon }}</span>
                                            </div>
                                            <div>
                                                <h4 class="text-sm font-bold">{{ $title }}</h4>
                                                <p class="mt-1 text-sm leading-6 text-secondary">{{ $body }}</p>
                                            </div>
                                        </div>
                                    </article>
                                @endforeach
                            </div>
                        </div>
                    </section>
                </div>
            </main>
        </div>

        <a href="{{ route('links.create') }}" class="group fixed bottom-8 right-8 z-50 flex h-14 w-14 items-center justify-center rounded-full bg-primary text-white shadow-lg transition-all hover:scale-110 active:scale-95">
            <span class="material-symbols-outlined">add</span>
            <span class="absolute right-16 whitespace-nowrap rounded bg-on-surface px-3 py-1 text-sm text-white opacity-0 transition-opacity group-hover:opacity-100">Quick Shorten</span>
        </a>
    </body>
</html>
