<!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>My Links - {{ 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;
                --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%; }
            }
            [x-cloak] { display: none !important; }
        </style>
    </head>
    <body class="bg-surface font-body text-on-surface selection:bg-[#4648d4]/20">
        @php
            $visibleLinks = $links->getCollection();
            $visibleClicks = $visibleLinks->sum('total_clicks');
            $visibleInterstitial = $visibleLinks->where('redirect_type', 'interstitial')->count();
            $visibleActive = $visibleLinks->where('status', 'active')->count();
            $canUseQrCodes = auth()->user()->hasPaidPlanAccess();
        @endphp

        <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', false, false],
                        [route('links.create'), 'add_link', 'Create New Link', false, true],
                        [route('links.index'), 'link', 'My Links', true, 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">My Links</h2>
                            <p class="text-xs text-secondary">Manage destinations, monetized redirects, and click performance.</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($links->total()), 'All campaigns', 'bg-[#4648d4]/5 text-primary', 'text-primary bg-[#4648d4]/10'],
                            ['touch_app', 'Visible Clicks', number_format($visibleClicks), 'This page', 'bg-[#006c49]/5 text-tertiary', 'text-tertiary bg-[#006c49]/10'],
                            ['ads_click', 'Interstitial', number_format($visibleInterstitial), 'Monetized', 'bg-[#4648d4]/5 text-primary', 'text-primary bg-[#4648d4]/10'],
                            ['check_circle', 'Active Links', number_format($visibleActive), 'Live now', 'bg-[#515f74]/5 text-secondary', 'text-secondary bg-[#515f74]/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="overflow-hidden rounded-xl bg-surface-container-lowest shadow-sm">
                        <div class="grid gap-5 border-b border-slate-100 p-6 lg:grid-cols-[1fr_auto] lg:items-center">
                            <div>
                                <h3 class="font-manrope text-xl font-bold">Campaign Library</h3>
                                <p class="mt-1 text-sm text-secondary">Short links, destination URLs, ad modes, and recent performance.</p>
                            </div>
                            <div class="flex flex-col gap-3 sm:flex-row sm:items-center">
                                <div class="flex items-center gap-2 rounded-full bg-surface-container-low px-4 py-3 text-secondary">
                                    <span class="material-symbols-outlined text-sm">filter_list</span>
                                    <span class="text-sm font-semibold">All links</span>
                                </div>
                                <a href="{{ route('links.create') }}" class="inline-flex items-center justify-center gap-2 rounded-full bg-primary px-5 py-3 text-sm font-bold text-white transition-transform hover:scale-95 active:scale-90">
                                    <span class="material-symbols-outlined text-lg">add_link</span>
                                    Create New Link
                                </a>
                            </div>
                        </div>

                        <div class="divide-y divide-slate-100">
                            @forelse ($links as $link)
                                <article class="grid gap-5 p-6 transition-colors hover:bg-slate-50/80 xl:grid-cols-[1fr_auto] xl:items-center" x-data="{ shareOpen: false, copied: false }">
                                    <div class="min-w-0">
                                        <div class="mb-3 flex flex-wrap items-center gap-2">
                                            <h4 class="font-manrope truncate text-lg font-bold text-on-surface">{{ $link->title ?: $link->publicCode() }}</h4>
                                            <span class="rounded bg-[#4648d4]/10 px-2 py-1 text-[10px] font-bold uppercase tracking-normal text-primary">{{ $link->redirect_type }}</span>
                                            <span class="rounded px-2 py-1 text-[10px] font-bold uppercase tracking-normal {{ $link->status === 'active' ? 'bg-[#006c49]/10 text-tertiary' : 'bg-[#ba1a1a]/10 text-error' }}">{{ $link->status }}</span>
                                            @if ($link->expires_at)
                                                <span class="rounded bg-surface-container px-2 py-1 text-[10px] font-bold uppercase tracking-normal text-secondary">Expires {{ $link->expires_at->format('M d') }}</span>
                                            @endif
                                        </div>

                                        <div class="grid gap-3 lg:grid-cols-[0.82fr_1fr]">
                                            <div class="rounded-lg bg-surface p-4">
                                                <p class="text-[10px] font-bold uppercase tracking-normal text-secondary">Short link</p>
                                                <div class="mt-2 flex min-w-0 items-center gap-2">
                                                    <a href="{{ $link->shortUrl() }}" class="truncate font-mono text-sm font-semibold text-primary hover:underline">{{ $link->shortUrl() }}</a>
                                                    <button type="button" onclick="navigator.clipboard?.writeText(@js($link->shortUrl()))" class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-white text-secondary transition-colors hover:text-primary">
                                                        <span class="material-symbols-outlined text-lg">content_copy</span>
                                                    </button>
                                                </div>
                                            </div>

                                            <div class="rounded-lg bg-surface p-4">
                                                <p class="text-[10px] font-bold uppercase tracking-normal text-secondary">Destination</p>
                                                <a href="{{ $link->redirect_target_url }}" target="_blank" rel="noopener" class="mt-2 block truncate text-sm font-semibold text-on-surface hover:text-primary">{{ $link->redirect_target_url }}</a>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="grid gap-3 sm:grid-cols-3 xl:w-[28rem]">
                                        <div class="rounded-lg bg-surface p-4">
                                            <p class="text-[10px] font-bold uppercase tracking-normal text-secondary">Clicks</p>
                                            <p class="font-manrope mt-1 text-2xl font-black">{{ number_format($link->total_clicks) }}</p>
                                        </div>
                                        <div class="rounded-lg bg-surface p-4">
                                            <p class="text-[10px] font-bold uppercase tracking-normal text-secondary">Last click</p>
                                            <p class="mt-2 text-sm font-bold text-on-surface">{{ optional($link->last_clicked_at)->diffForHumans() ?: 'No clicks' }}</p>
                                        </div>
                                        <div class="flex flex-col gap-2">
                                            <button type="button" @click="shareOpen = true" class="inline-flex flex-1 items-center justify-center gap-2 rounded-lg bg-primary px-4 py-3 text-sm font-bold text-white transition-transform hover:scale-95 active:scale-90">
                                                View
                                                <span class="material-symbols-outlined text-lg">visibility</span>
                                            </button>
                                            <a href="{{ route('dashboard.analytics') }}" class="inline-flex flex-1 items-center justify-center gap-2 rounded-lg bg-surface px-4 py-3 text-sm font-bold text-secondary transition-colors hover:text-primary">
                                                Analytics
                                                <span class="material-symbols-outlined text-lg">monitoring</span>
                                            </a>
                                        </div>
                                    </div>

                                    <div
                                        x-show="shareOpen"
                                        x-cloak
                                        x-transition.opacity
                                        class="fixed inset-0 z-[70] flex items-center justify-center bg-slate-950/70 p-4 backdrop-blur-sm"
                                        role="dialog"
                                        aria-modal="true"
                                        aria-label="Short link share preview"
                                        @click.self="shareOpen = false"
                                        @keydown.escape.window="shareOpen = false"
                                    >
                                        <div class="w-full max-w-2xl rounded-xl bg-white p-6 shadow-2xl">
                                            <div class="flex items-start justify-between gap-4">
                                                <div>
                                                    <p class="text-[10px] font-bold uppercase tracking-normal text-secondary">Short link preview</p>
                                                    <h3 class="font-manrope mt-2 text-xl font-black text-on-surface">{{ $link->title ?: $link->publicCode() }}</h3>
                                                </div>
                                                <button type="button" @click="shareOpen = false" class="inline-flex h-10 w-10 items-center justify-center rounded-lg bg-surface-container-low text-secondary transition-colors hover:text-primary" aria-label="Close share preview">
                                                    <span class="material-symbols-outlined">close</span>
                                                </button>
                                            </div>

                                            <div class="mt-6 grid gap-4 md:grid-cols-[1fr_0.78fr]">
                                                <div class="rounded-xl bg-surface p-5">
                                                    <p class="font-manrope text-sm font-bold text-primary">Shorten link</p>
                                                    <a href="{{ $link->shortUrl() }}" target="_blank" rel="noopener" class="mt-2 block break-all font-mono text-sm font-bold text-secondary hover:text-primary">{{ $link->shortUrl() }}</a>
                                                    <div class="mt-5 flex flex-col gap-3 sm:flex-row">
                                                        <button type="button" @click="navigator.clipboard?.writeText(@js($link->shortUrl())); copied = true; setTimeout(() => copied = false, 1800)" class="inline-flex items-center justify-center gap-2 rounded-lg bg-primary px-5 py-3 text-sm font-bold text-white transition-transform hover:scale-95 active:scale-90">
                                                            <span class="material-symbols-outlined text-lg" x-text="copied ? 'check' : 'content_copy'"></span>
                                                            <span x-text="copied ? 'Copied' : 'Copy Link'"></span>
                                                        </button>
                                                        <a href="{{ $link->shortUrl() }}" target="_blank" rel="noopener" class="inline-flex items-center justify-center gap-2 rounded-lg bg-surface-container-low px-5 py-3 text-sm font-bold text-secondary transition-colors hover:text-primary">
                                                            <span class="material-symbols-outlined text-lg">open_in_new</span>
                                                            Open
                                                        </a>
                                                    </div>
                                                </div>

                                                <div class="rounded-xl bg-surface p-5">
                                                    <p class="font-manrope text-sm font-bold text-primary">
                                                        <span class="material-symbols-outlined text-base">qr_code_2</span>
                                                        QR Code
                                                    </p>
                                                    @if ($canUseQrCodes)
                                                        <img src="{{ route('links.qr-code.show', $link) }}" alt="QR code for {{ $link->shortUrl() }}" class="mx-auto mt-4 h-36 w-36 rounded-lg bg-white object-contain p-3 shadow-sm">
                                                        <a href="{{ route('links.qr-code.download', $link) }}" class="mt-5 inline-flex w-full items-center justify-center gap-2 rounded-lg bg-primary px-5 py-3 text-sm font-bold text-white transition-transform hover:scale-95 active:scale-90">
                                                            <span class="material-symbols-outlined text-lg">download</span>
                                                            Download
                                                        </a>
                                                    @else
                                                        <div class="mt-4 rounded-lg border border-dashed border-[#4648d4]/30 bg-white p-5 text-center">
                                                            <span class="material-symbols-outlined text-4xl text-primary">workspace_premium</span>
                                                            <p class="mt-2 text-sm font-bold text-on-surface">QR code is available on paid plans.</p>
                                                        </div>
                                                    @endif
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </article>
                            @empty
                                <div class="p-12 text-center">
                                    <div class="mx-auto flex h-14 w-14 items-center justify-center rounded-xl bg-[#4648d4]/10 text-primary">
                                        <span class="material-symbols-outlined">add_link</span>
                                    </div>
                                    <h3 class="font-manrope mt-5 text-2xl font-black">No links yet</h3>
                                    <p class="mx-auto mt-2 max-w-md text-sm leading-6 text-secondary">Create a direct link or attach an ad page before the redirect.</p>
                                    <a href="{{ route('links.create') }}" class="mt-6 inline-flex items-center justify-center gap-2 rounded-lg bg-primary px-6 py-3 text-sm font-bold text-white transition-transform hover:scale-95 active:scale-90">
                                        Create New Link
                                        <span class="material-symbols-outlined text-lg">arrow_forward</span>
                                    </a>
                                </div>
                            @endforelse
                        </div>
                    </section>

                    @if ($links->hasPages())
                        <section class="rounded-xl bg-surface-container-lowest p-4 shadow-sm">
                            {{ $links->links() }}
                        </section>
                    @endif
                </div>
            </main>
        </div>
    </body>
</html>
