<div>
    @php $ws = current_workspace(); @endphp
    {{-- Header --}}
    <div class="flex items-center justify-between mb-6 nim-reveal nim-reveal-1">
        <h1 class="text-t1">Links</h1>
        @if($ws)
        <div class="flex items-center gap-2">
            <button @click="$dispatch('openModal', {component: 'modals.utm-builder', arguments: {workspaceUlid: '{{ $ws->ulid }}'}})"
                    class="px-3 py-2 bg-s2 border border-white/[.06] text-t1 rounded-lg text-sm font-medium hover:bg-s3 transition-colors flex items-center gap-1.5">
                <x-heroicon-o-beaker class="w-4 h-4" />
                UTM Builder
            </button>
            <button @click="$dispatch('openModal', {component: 'modals.create-link', arguments: {workspaceUlid: '{{ $ws->ulid }}'}})"
                    class="px-4 py-2 bg-accent-gradient text-white rounded-lg text-sm font-medium hover:opacity-90 transition-opacity">
                + New Link
            </button>
        </div>
        @endif
    </div>

    {{-- Filter Bar --}}
    <div class="flex gap-3 mb-4">
        <input wire:model.live.debounce.300ms="search"
               type="text"
               placeholder="Search links..."
               class="flex-1 px-3 py-2.5 bg-s1 border border-white/[.06] rounded-lg text-sm text-t1 placeholder-t3 focus:outline-none focus:ring-1 focus:ring-blue/50 focus:border-blue/50" />
        <select wire:model.live="statusFilter"
                class="px-3 py-2.5 bg-s1 border border-white/[.06] rounded-lg text-sm text-t2 focus:outline-none focus:ring-1 focus:ring-blue/50 cursor-pointer">
            <option value="">All statuses</option>
            <option value="active">Active</option>
            <option value="disabled">Disabled</option>
            <option value="expired">Expired</option>
        </select>
    </div>

    {{-- Table --}}
    <div class="bg-s1 border border-white/[.06] rounded-xl overflow-hidden card-shadow">
        <table class="w-full text-sm">
            <thead class="border-b border-white/[.06] bg-s2/40">
                <tr class="text-t3 text-xs uppercase tracking-widest">
                    <th class="px-4 py-3 text-left font-semibold">Link</th>
                    <th class="px-4 py-3 text-left font-semibold">Target</th>
                    <th class="px-4 py-3 text-left font-semibold hidden md:table-cell">Tags</th>
                    <th class="px-4 py-3 text-center font-semibold">Status</th>
                    <th class="px-4 py-3 w-48"></th>
                </tr>
            </thead>
            <tbody>
                @forelse($links as $link)
                <tr class="border-b border-white/[.03] last:border-0 table-row-hover hover:bg-white/[.015] group relative">
                    {{-- Slug + title --}}
                    <td class="px-4 py-3">
                        <div class="flex items-baseline gap-1">
                            <span class="text-t3 text-xs">nimu.li/</span>
                            <span class="font-mono text-blue text-sm font-semibold">{{ $link->slug }}</span>
                        </div>
                        @if($link->title)
                        <div class="text-t3 text-xs mt-0.5 truncate max-w-xs">{{ $link->title }}</div>
                        @endif
                    </td>

                    {{-- Target URL --}}
                    <td class="px-4 py-3 text-t3 text-xs max-w-xs">
                        <span class="block truncate" title="{{ $link->target_url }}">{{ $link->target_url }}</span>
                    </td>

                    {{-- Tags --}}
                    <td class="px-4 py-3 hidden md:table-cell">
                        @if(!empty($link->tags))
                        <div class="flex flex-wrap gap-1">
                            @foreach($link->tags as $tag)
                            <span class="badge bg-s3 text-t3">{{ $tag }}</span>
                            @endforeach
                        </div>
                        @else
                        <span class="text-t3 text-xs">—</span>
                        @endif
                    </td>

                    {{-- Status Badge --}}
                    <td class="px-4 py-3 text-center">
                        @if($link->status === 'active')
                            <span class="badge bg-green/10 text-green">
                                <span class="w-1 h-1 rounded-full bg-green inline-block"></span>
                                active
                            </span>
                        @elseif($link->status === 'expired')
                            <span class="badge bg-amber/10 text-amber">expired</span>
                        @else
                            <span class="badge bg-white/[.06] text-t3">{{ $link->status }}</span>
                        @endif
                    </td>

                    {{-- Actions + Clicks badge (badge always rightmost) --}}
                    <td class="px-4 py-3">
                        <div class="flex items-center justify-end gap-3">
                            {{-- Hover-revealed actions --}}
                            <div class="flex items-center gap-3 opacity-0 group-hover:opacity-100 transition-all duration-150">
                                <x-ui.copy-button :value="'https://nimu.li/'.$link->slug" label="Copy" />
                                <button
                                    @click="$dispatch('openModal', {component: 'modals.link-variants', arguments: {linkUlid: '{{ $link->ulid }}'}})"
                                    class="text-t3 text-xs hover:text-blue transition-colors flex items-center gap-1">
                                    <x-heroicon-o-chart-bar class="w-3 h-3" />
                                    A/B
                                </button>
                                <button
                                    @click="$dispatch('openModal', {component: 'modals.edit-link', arguments: {linkUlid: '{{ $link->ulid }}'}})"
                                    class="text-t2 text-xs hover:text-t1 transition-colors">
                                    Edit
                                </button>
                                <button
                                    @click="$dispatch('openModal', {component: 'modals.delete-link', arguments: {linkUlid: '{{ $link->ulid }}'}})"
                                    class="text-t3 text-xs hover:text-red transition-colors">
                                    Delete
                                </button>
                            </div>
                            {{-- Clicks badge — always visible, rightmost --}}
                            <span class="shrink-0 font-mono text-xs text-t2 px-2 py-1 bg-s3 rounded">
                                {{ number_format($link->clicks_count ?? 0) }}
                            </span>
                        </div>
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="5" class="px-4 py-16 text-center">
                        <div class="flex flex-col items-center gap-3">
                            <svg class="w-10 h-10 text-t3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622 1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244" />
                            </svg>
                            <p class="text-t3 text-sm">No links yet.</p>
                            @if($ws)
                            <button @click="$dispatch('openModal', {component: 'modals.create-link', arguments: {workspaceUlid: '{{ $ws->ulid }}'}})"
                                    class="text-blue text-sm hover:underline">Create your first short link</button>
                            @endif
                        </div>
                    </td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    @if($links->hasPages())
    <div class="mt-4">{{ $links->links() }}</div>
    @endif
</div>
