@extends('layouts.app')

@section('title', 'Mis enlaces')

@section('content')
    {{-- Barra superior --}}
    <div class="mb-6 flex flex-wrap items-center justify-between gap-4">
        <p class="text-sm text-gray-600 dark:text-gray-400">
            {{ $links->total() }} {{ Str::plural('enlace', $links->total()) }} guardado{{ $links->total() !== 1 ? 's' : '' }}.
        </p>
        <a href="{{ route('links.create') }}">
            <x-button type="button"><i class="fa-solid fa-plus"></i> Guardar enlace</x-button>
        </a>
    </div>

    {{-- Filtros --}}
    <form method="GET" action="{{ route('links.index') }}"
          class="mb-6 flex flex-wrap gap-3">
        <select name="proyecto"
            class="rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm dark:border-white/10 dark:bg-gray-800 dark:text-white">
            <option value="">Todos los proyectos</option>
            @foreach ($projects as $proj)
                <option value="{{ $proj->id }}" @selected(request('proyecto') == $proj->id)>{{ $proj->name }}</option>
            @endforeach
        </select>
        <select name="estado"
            class="rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm dark:border-white/10 dark:bg-gray-800 dark:text-white">
            <option value="">Todos los estados</option>
            <option value="unread"         @selected(request('estado') === 'unread')>No leído</option>
            <option value="reading"        @selected(request('estado') === 'reading')>Leyendo</option>
            <option value="read"           @selected(request('estado') === 'read')>Leído</option>
            <option value="pending_review" @selected(request('estado') === 'pending_review')>Pendiente</option>
            <option value="archived"       @selected(request('estado') === 'archived')>Archivado</option>
        </select>
        <label class="flex items-center gap-2 rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm dark:border-white/10 dark:bg-gray-800 dark:text-white">
            <input type="checkbox" name="favoritos" value="1" @checked(request()->boolean('favoritos'))> Favoritos
        </label>
        <x-button type="submit" variant="secondary"><i class="fa-solid fa-filter"></i> Filtrar</x-button>
        @if (request()->hasAny(['proyecto', 'carpeta', 'estado', 'favoritos']))
            <a href="{{ route('links.index') }}">
                <x-button type="button" variant="secondary"><i class="fa-solid fa-xmark"></i> Limpiar</x-button>
            </a>
        @endif
    </form>

    {{-- Lista --}}
    @if ($links->isEmpty())
        <x-card class="flex flex-col items-center justify-center py-16 text-center">
            <i class="fa-solid fa-link text-5xl text-gray-300 dark:text-gray-600"></i>
            <p class="mt-4 text-base font-medium text-gray-700 dark:text-gray-300">No tienes enlaces guardados.</p>
            <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Guarda el primero para empezar tu biblioteca.</p>
            <a href="{{ route('links.create') }}" class="mt-5">
                <x-button type="button"><i class="fa-solid fa-plus"></i> Guardar enlace</x-button>
            </a>
        </x-card>
    @else
        <div class="space-y-3">
            @foreach ($links as $link)
                @include('enlaces._card', ['link' => $link])
            @endforeach
        </div>
        <div class="mt-6">{{ $links->links() }}</div>
    @endif
@endsection