@php
    $statusColors = [
        'pending'     => 'text-gray-400',
        'extracting'  => 'text-blue-500',
        'extracted'   => 'text-blue-500',
        'summarizing' => 'text-violet-500',
        'summarized'  => 'text-emerald-500',
        'failed'      => 'text-red-500',
    ];
    $readingColors = [
        'unread'         => 'bg-sky-100 text-sky-700 dark:bg-sky-500/15 dark:text-sky-400',
        'reading'        => 'bg-blue-100 text-blue-700 dark:bg-blue-500/15 dark:text-blue-400',
        'read'           => 'bg-emerald-100 text-emerald-700 dark:bg-emerald-500/15 dark:text-emerald-400',
        'pending_review' => 'bg-amber-100 text-amber-700 dark:bg-amber-500/15 dark:text-amber-400',
        'archived'       => 'bg-gray-100 text-gray-500 dark:bg-white/5 dark:text-gray-400',
    ];
    $platformIcons = [
        'youtube'   => 'fa-brands fa-youtube text-red-500',
        'tiktok'    => 'fa-brands fa-tiktok',
        'instagram' => 'fa-brands fa-instagram text-pink-500',
        'facebook'  => 'fa-brands fa-facebook text-blue-600',
        'x'         => 'fa-brands fa-x-twitter',
        'linkedin'  => 'fa-brands fa-linkedin text-blue-700',
        'pinterest' => 'fa-brands fa-pinterest text-red-600',
        'reddit'    => 'fa-brands fa-reddit text-orange-500',
        'github'    => 'fa-brands fa-github',
        'medium'    => 'fa-brands fa-medium',
        'spotify'   => 'fa-brands fa-spotify text-green-500',
        'vimeo'     => 'fa-brands fa-vimeo text-cyan-500',
        'twitch'    => 'fa-brands fa-twitch text-violet-500',
        'web'       => 'fa-solid fa-globe text-gray-400',
    ];
    $platformIcon = $platformIcons[$link->platform] ?? 'fa-solid fa-globe text-gray-400';
@endphp

<div class="group overflow-hidden rounded-xl border border-gray-100 bg-white shadow-sm transition hover:shadow-md dark:border-white/10 dark:bg-gray-800">
    <div class="flex items-start gap-4 p-4">
        {{-- Icono de plataforma --}}
        <div class="flex size-10 shrink-0 items-center justify-center rounded-lg bg-gray-50 dark:bg-gray-700">
            <i class="{{ $platformIcon }} text-lg"></i>
        </div>

        {{-- Contenido principal --}}
        <div class="min-w-0 flex-1">
            <div class="flex flex-wrap items-start justify-between gap-2">
                <div class="min-w-0">
                    <a href="{{ route('links.show', $link) }}"
                       class="block truncate text-sm font-semibold text-gray-900 hover:text-primary dark:text-white dark:hover:text-primary">
                        {{ $link->display_title }}
                    </a>
                    <p class="mt-0.5 text-xs text-gray-400">
                        {{ $link->domain }}
                        @if ($link->folder)
                            · <i class="fa-solid fa-folder text-[10px]"></i>
                            {{ $link->project?->name }} / {{ $link->folder?->name }}
                        @endif
                    </p>
                </div>

                {{-- Badges --}}
                <div class="flex shrink-0 flex-wrap items-center gap-1.5">
                    @if ($link->is_favorite)
                        <i class="fa-solid fa-star text-amber-400 text-sm"></i>
                    @endif
                    <span class="rounded-full px-2 py-0.5 text-xs font-medium {{ $readingColors[$link->reading_status] ?? '' }}">
                        {{ \App\Models\Link::readingStatusLabel($link->reading_status) }}
                    </span>
                    <span class="text-xs {{ $statusColors[$link->processing_status] ?? 'text-gray-400' }}">
                        @if ($link->processing_status === 'pending' || $link->processing_status === 'extracting')
                            <i class="fa-solid fa-spinner fa-spin text-[10px]"></i>
                        @endif
                        {{ \App\Models\Link::processingStatusLabel($link->processing_status) }}
                    </span>
                </div>
            </div>

            {{-- Acciones rápidas --}}
            <div class="mt-3 flex flex-wrap items-center gap-1.5">
                {{-- Favorito --}}
                <form method="POST" action="{{ route('links.favorite', $link) }}">
                    @csrf
                    <button type="submit" title="{{ $link->is_favorite ? 'Quitar favorito' : 'Marcar favorito' }}"
                            class="rounded px-2 py-1 text-xs transition {{ $link->is_favorite ? 'text-amber-500 hover:text-amber-600' : 'text-gray-400 hover:text-amber-500' }}">
                        <i class="fa-{{ $link->is_favorite ? 'solid' : 'regular' }} fa-star"></i>
                    </button>
                </form>

                {{-- Marcar leído --}}
                @if ($link->reading_status !== \App\Models\Link::READING_READ)
                    <form method="POST" action="{{ route('links.mark-read', $link) }}">
                        @csrf
                        <button type="submit" title="Marcar como leído"
                                class="rounded px-2 py-1 text-xs text-gray-400 transition hover:text-emerald-500">
                            <i class="fa-solid fa-check"></i> Leído
                        </button>
                    </form>
                @endif

                {{-- Archivar --}}
                <form method="POST" action="{{ route('links.archive', $link) }}">
                    @csrf
                    <button type="submit" title="{{ $link->is_archived ? 'Desarchivar' : 'Archivar' }}"
                            class="rounded px-2 py-1 text-xs text-gray-400 transition hover:text-gray-600 dark:hover:text-gray-300">
                        <i class="fa-solid fa-{{ $link->is_archived ? 'box-open' : 'box-archive' }}"></i>
                        {{ $link->is_archived ? 'Desarchivar' : 'Archivar' }}
                    </button>
                </form>

                <a href="{{ route('links.edit', $link) }}"
                   class="rounded px-2 py-1 text-xs text-gray-400 transition hover:text-gray-600 dark:hover:text-gray-300">
                    <i class="fa-solid fa-pen"></i> Editar
                </a>

                <form method="POST" action="{{ route('links.destroy', $link) }}"
                      onsubmit="return confirm('¿Eliminar este enlace permanentemente?')">
                    @csrf
                    @method('DELETE')
                    <button type="submit"
                            class="rounded px-2 py-1 text-xs text-red-400 transition hover:text-red-600">
                        <i class="fa-solid fa-trash"></i>
                    </button>
                </form>

                <a href="{{ $link->url }}" target="_blank" rel="noopener noreferrer"
                   class="ml-auto rounded px-2 py-1 text-xs text-primary transition hover:underline">
                    <i class="fa-solid fa-arrow-up-right-from-square"></i> Abrir
                </a>
            </div>
        </div>
    </div>
</div>