@extends('layouts.app')

@section('title', 'Etiquetas')

@section('content')
<div x-data="{
    showCreate: false,
    editId: null,
    editName: '',
    editColor: '#A78BFA',
    openEdit(tag) { this.editId = tag.id; this.editName = tag.name; this.editColor = tag.color; },
    closeEdit() { this.editId = null; }
}">

    <div class="mb-6 flex flex-wrap items-center justify-between gap-4">
        <p class="text-sm text-gray-600 dark:text-gray-400">
            Etiqueta tus enlaces con múltiples palabras clave.
        </p>
        <x-button type="button" @click="showCreate = !showCreate">
            <i class="fa-solid fa-plus"></i> Nueva etiqueta
        </x-button>
    </div>

    {{-- Formulario crear --}}
    <div x-show="showCreate" x-cloak class="mb-6">
        <x-card>
            <h3 class="mb-4 text-sm font-semibold text-gray-900 dark:text-white">Nueva etiqueta</h3>
            <form method="POST" action="{{ route('tags.store') }}" class="flex flex-wrap gap-4">
                @csrf
                <div class="flex-1 min-w-40">
                    <x-label for="tag_name">Nombre *</x-label>
                    <x-input id="tag_name" name="name" type="text" value="{{ old('name') }}" required maxlength="60" />
                    <x-error for="name" />
                </div>
                <div>
                    <x-label for="tag_color">Color</x-label>
                    <input id="tag_color" name="color" type="color" value="{{ old('color', '#A78BFA') }}"
                        class="mt-1 h-10 w-24 cursor-pointer rounded-lg border border-gray-300 p-1 dark:border-white/10" />
                </div>
                <div class="flex items-end gap-3">
                    <x-button type="button" variant="secondary" @click="showCreate = false">Cancelar</x-button>
                    <x-button type="submit"><i class="fa-solid fa-floppy-disk"></i> Guardar</x-button>
                </div>
            </form>
        </x-card>
    </div>

    {{-- Lista --}}
    @if ($tags->isEmpty())
        <x-card class="flex flex-col items-center justify-center py-16 text-center">
            <i class="fa-solid fa-hashtag 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">Sin etiquetas todavía.</p>
            <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Crea etiquetas para describir tus enlaces con flexibilidad.</p>
        </x-card>
    @else
        <x-card>
            {{-- Chips --}}
            <div class="mb-4 flex flex-wrap gap-2">
                @foreach ($tags as $tag)
                    <span class="inline-flex items-center gap-1.5 rounded-full px-3 py-1 text-sm font-medium text-white"
                          style="background-color: {{ $tag->color }}">
                        {{ $tag->name }}
                        <span class="rounded-full bg-black/20 px-1.5 text-xs">{{ $tag->links_count }}</span>
                    </span>
                @endforeach
            </div>

            {{-- Tabla de gestión --}}
            <ul class="divide-y divide-gray-100 dark:divide-white/10">
                @foreach ($tags as $tag)
                    <li class="py-3">
                        <div x-show="editId !== {{ $tag->id }}" class="flex flex-wrap items-center justify-between gap-3">
                            <div class="flex items-center gap-3">
                                <span class="size-4 rounded-full" style="background-color: {{ $tag->color }}"></span>
                                <p class="text-sm font-medium text-gray-900 dark:text-white">{{ $tag->name }}</p>
                                <span class="text-xs text-gray-400">{{ $tag->links_count }} {{ Str::plural('enlace', $tag->links_count) }}</span>
                            </div>
                            <div class="flex items-center gap-2">
                                <button type="button"
                                        @click="openEdit({{ json_encode(['id' => $tag->id, 'name' => $tag->name, 'color' => $tag->color]) }})"
                                        class="rounded px-2 py-1 text-xs text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">
                                    <i class="fa-solid fa-pen"></i>
                                </button>
                                <form method="POST" action="{{ route('tags.destroy', $tag) }}"
                                      onsubmit="return confirm('¿Eliminar la etiqueta «{{ addslashes($tag->name) }}»? Los enlaces no se borrarán.')">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="rounded px-2 py-1 text-xs text-red-400 hover:text-red-600">
                                        <i class="fa-solid fa-trash"></i>
                                    </button>
                                </form>
                            </div>
                        </div>

                        <div x-show="editId === {{ $tag->id }}" x-cloak>
                            <form method="POST" action="{{ route('tags.update', $tag) }}" class="flex flex-wrap gap-4">
                                @csrf
                                @method('PUT')
                                <div class="flex-1 min-w-40">
                                    <x-input name="name" type="text" x-model="editName" required maxlength="60" />
                                </div>
                                <div>
                                    <input name="color" type="color" x-model="editColor"
                                        class="h-10 w-20 cursor-pointer rounded-lg border border-gray-300 p-1 dark:border-white/10" />
                                </div>
                                <div class="flex items-center gap-2">
                                    <x-button type="button" variant="secondary" @click="closeEdit()">Cancelar</x-button>
                                    <x-button type="submit"><i class="fa-solid fa-floppy-disk"></i></x-button>
                                </div>
                            </form>
                        </div>
                    </li>
                @endforeach
            </ul>
        </x-card>
    @endif
</div>
@endsection