@extends('layouts.app')

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

@section('content')
    <div class="mb-6 flex flex-wrap items-center justify-between gap-4">
        <p class="text-sm text-gray-600 dark:text-gray-400">
            Organiza tus enlaces en proyectos temáticos.
        </p>
        <a href="{{ route('projects.create') }}">
            <x-button type="button"><i class="fa-solid fa-plus"></i> Nuevo proyecto</x-button>
        </a>
    </div>

    @if ($projects->isEmpty())
        <x-card class="flex flex-col items-center justify-center py-16 text-center">
            <i class="fa-solid fa-folder-open 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">Aún no tienes proyectos.</p>
            <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Crea el primero para empezar a organizar tus enlaces.</p>
            <a href="{{ route('projects.create') }}" class="mt-5">
                <x-button type="button"><i class="fa-solid fa-plus"></i> Crear proyecto</x-button>
            </a>
        </x-card>
    @else
        <div class="grid gap-5 sm:grid-cols-2 xl:grid-cols-3">
            @foreach ($projects as $project)
                <div class="group relative overflow-hidden rounded-2xl border border-white/20 bg-white/60 shadow backdrop-blur-sm transition hover:shadow-md dark:border-white/10 dark:bg-gray-800/60">
                    {{-- Franja de color --}}
                    <div class="h-2 w-full" style="background-color: {{ $project->color }}"></div>

                    <div class="p-5">
                        {{-- Icono + nombre --}}
                        <div class="flex items-start gap-3">
                            <span class="flex size-10 shrink-0 items-center justify-center rounded-xl text-white"
                                  style="background-color: {{ $project->color }}">
                                <i class="fa-solid {{ $project->icon }} text-sm"></i>
                            </span>
                            <div class="min-w-0 flex-1">
                                <h3 class="truncate text-base font-semibold text-gray-900 dark:text-white">
                                    {{ $project->name }}
                                </h3>
                                @if ($project->is_public)
                                    <span class="inline-flex items-center gap-1 rounded-full bg-emerald-100 px-2 py-0.5 text-xs font-medium text-emerald-700 dark:bg-emerald-500/15 dark:text-emerald-400">
                                        <i class="fa-solid fa-globe text-[10px]"></i> Público
                                    </span>
                                @endif
                            </div>
                        </div>

                        {{-- Descripción --}}
                        @if ($project->description)
                            <p class="mt-3 line-clamp-2 text-sm text-gray-500 dark:text-gray-400">
                                {{ $project->description }}
                            </p>
                        @endif

                        {{-- Acciones --}}
                        <div class="mt-4 flex items-center gap-2 border-t border-gray-100 pt-4 dark:border-white/10">
                            <a href="{{ route('projects.show', $project) }}"
                               class="flex-1 rounded-lg border border-gray-200 px-3 py-1.5 text-center text-xs font-medium text-gray-600 transition hover:border-gray-400 dark:border-white/10 dark:text-gray-400 dark:hover:border-white/30">
                                <i class="fa-solid fa-eye"></i> Ver
                            </a>
                            <a href="{{ route('projects.edit', $project) }}"
                               class="flex-1 rounded-lg border border-gray-200 px-3 py-1.5 text-center text-xs font-medium text-gray-600 transition hover:border-gray-400 dark:border-white/10 dark:text-gray-400 dark:hover:border-white/30">
                                <i class="fa-solid fa-pen"></i> Editar
                            </a>
                            <form method="POST" action="{{ route('projects.destroy', $project) }}"
                                  onsubmit="return confirm('¿Eliminar el proyecto «{{ addslashes($project->name) }}» y todo su contenido? Esta acción es permanente.')">
                                @csrf
                                @method('DELETE')
                                <button type="submit"
                                        class="rounded-lg border border-red-200 px-3 py-1.5 text-xs font-medium text-red-500 transition hover:border-red-400 hover:bg-red-50 dark:border-red-500/30 dark:hover:bg-red-500/10">
                                    <i class="fa-solid fa-trash"></i>
                                </button>
                            </form>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    @endif
@endsection