@extends('layouts.app')

@section('title', 'Recordatorios')

@section('content')
<div class="max-w-5xl mx-auto py-6 px-4 space-y-6">

    {{-- Encabezado --}}
    <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
        <div>
            <h1 class="text-2xl font-bold text-gray-900 dark:text-white">Recordatorios</h1>
            <p class="text-sm text-gray-500 dark:text-gray-400">
                Programa avisos para revisar tus enlaces más tarde.
            </p>
        </div>
    </div>

    {{-- Filtros --}}
    <div class="flex flex-wrap items-center gap-2">
        @php
            $filters = [
                'all'       => 'Todos',
                'pending'   => 'Pendientes',
                'done'      => 'Hechos',
                'cancelled' => 'Cancelados',
            ];
        @endphp
        @foreach($filters as $key => $label)
            <a href="{{ route('reminders.index', $key === 'all' ? [] : ['status' => $key]) }}"
               class="px-3 py-1.5 rounded-full text-sm font-medium border transition-colors
                   {{ $filter === $key
                       ? 'bg-primary text-white border-primary'
                       : 'border-gray-200 dark:border-gray-700 text-gray-600 dark:text-gray-300 hover:border-primary hover:text-primary' }}">
                {{ $label }}
            </a>
        @endforeach
    </div>

    {{-- Listado --}}
    @if($reminders->count() > 0)
        <div class="space-y-3">
            @foreach($reminders as $reminder)
                @php
                    $statusStyles = match($reminder->status) {
                        'pending'   => 'bg-amber-100 text-amber-700 dark:bg-amber-500/15 dark:text-amber-300',
                        'done'      => 'bg-emerald-100 text-emerald-700 dark:bg-emerald-500/15 dark:text-emerald-300',
                        'cancelled' => 'bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-300',
                        default     => 'bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-300',
                    };
                @endphp
                <x-card>
                    <div class="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
                        <div class="min-w-0 flex-1">
                            <div class="flex flex-wrap items-center gap-2 mb-1">
                                <h3 class="text-base font-semibold text-gray-900 dark:text-white truncate">
                                    {{ $reminder->title }}
                                </h3>
                                <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium {{ $statusStyles }}">
                                    {{ \App\Models\Reminder::statusLabel($reminder->status) }}
                                </span>
                            </div>
                            @if($reminder->link)
                                <a href="{{ route('links.read', $reminder->link) }}"
                                   class="text-sm text-gray-600 dark:text-gray-300 hover:text-primary truncate inline-block max-w-full">
                                    <i class="fa-solid fa-link mr-1 text-xs text-gray-400"></i>
                                    {{ $reminder->link->display_title }}
                                </a>
                            @endif
                            <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">
                                <i class="fa-regular fa-clock mr-1"></i>
                                {{ $reminder->remind_at->format('d/m/Y H:i') }}
                                <span class="text-gray-400 dark:text-gray-500">({{ $reminder->remind_at->diffForHumans() }})</span>
                            </p>
                        </div>
                        <div class="flex flex-wrap items-center gap-2 sm:flex-shrink-0">
                            @if($reminder->isPending())
                                <a href="{{ route('reminders.edit', $reminder) }}"
                                   class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg border border-gray-200 dark:border-gray-700 text-sm text-gray-600 dark:text-gray-300 hover:border-primary hover:text-primary transition-colors">
                                    <i class="fa-solid fa-pen text-xs"></i> Editar
                                </a>
                                <form method="POST" action="{{ route('reminders.complete', $reminder) }}">
                                    @csrf
                                    <button type="submit"
                                            class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg border border-emerald-200 dark:border-emerald-700 text-sm text-emerald-600 dark:text-emerald-400 hover:bg-emerald-50 dark:hover:bg-emerald-500/10 transition-colors">
                                        <i class="fa-solid fa-check text-xs"></i> Completar
                                    </button>
                                </form>
                                <form method="POST" action="{{ route('reminders.cancel', $reminder) }}">
                                    @csrf
                                    <button type="submit"
                                            class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg border border-gray-200 dark:border-gray-700 text-sm text-gray-600 dark:text-gray-300 hover:border-gray-400 transition-colors">
                                        <i class="fa-solid fa-ban text-xs"></i> Cancelar
                                    </button>
                                </form>
                            @endif
                            <form method="POST" action="{{ route('reminders.destroy', $reminder) }}"
                                  onsubmit="return confirm('¿Eliminar este recordatorio? Esta acción no se puede deshacer.')">
                                @csrf
                                @method('DELETE')
                                <button type="submit"
                                        class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg border border-red-200 dark:border-red-700 text-sm text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-500/10 transition-colors">
                                    <i class="fa-solid fa-trash text-xs"></i> Eliminar
                                </button>
                            </form>
                        </div>
                    </div>
                </x-card>
            @endforeach
        </div>

        <div class="mt-4">
            {{ $reminders->links() }}
        </div>
    @else
        <x-card>
            <div class="flex flex-col items-center justify-center gap-3 py-10 text-center">
                <span class="flex size-14 items-center justify-center rounded-2xl bg-primary-light text-primary dark:bg-primary/20">
                    <i class="fa-solid fa-bell text-xl"></i>
                </span>
                <h3 class="text-base font-semibold text-gray-900 dark:text-white">No tienes recordatorios</h3>
                <p class="max-w-md text-sm text-gray-500 dark:text-gray-400">
                    @if($filter === 'all')
                        Programa uno desde cualquier enlace en su modo lectura.
                    @else
                        No hay recordatorios en este estado.
                    @endif
                </p>
            </div>
        </x-card>
    @endif

</div>
@endsection