@php
    $link = $link ?? null;
    $selectedTagIds = old('tags', $link?->tags?->pluck('id')->toArray() ?? []);
    $selectedTagNames = old('tags', $link?->tags?->map(fn ($t) => ['id' => $t->id, 'name' => $t->name, 'color' => $t->color])->values()->toArray() ?? []);
@endphp

<div x-data='{
    projectId: "{{ old('project_id', $link?->project_id ?? $defaultProjectId ?? '') }}",
    folderId:  "{{ old('folder_id',  $link?->folder_id  ?? $defaultFolderId  ?? '') }}",
    foldersByProject: @json($foldersByProject),
    get folders() { return this.foldersByProject[String(this.projectId)] ?? [] },
    duplicateInfo: null,
    checkingDuplicate: false,
    async checkDuplicate(url) {
        if (!url || !url.startsWith("http")) { this.duplicateInfo = null; return; }
        this.checkingDuplicate = true;
        try {
            const r = await fetch("{{ route('links.check-duplicate') }}?url=" + encodeURIComponent(url), {
                headers: { "X-Requested-With": "XMLHttpRequest" }
            });
            const data = await r.json();
            this.duplicateInfo = data.exists ? data.link : null;
        } catch(e) { this.duplicateInfo = null; }
        this.checkingDuplicate = false;
    }
}' class="grid gap-5 sm:grid-cols-2">

    {{-- URL --}}
    <div class="sm:col-span-2">
        <x-label for="url">URL *</x-label>
        @if ($link)
            {{-- En edición la URL no cambia --}}
            <x-input id="url" type="url" name="url" value="{{ $link->url }}" disabled class="bg-gray-100 dark:bg-gray-700" />
            <p class="mt-1 text-xs text-gray-400">La URL no se puede modificar una vez guardada.</p>
        @else
            <x-input id="url" type="url" name="url" value="{{ old('url') }}" required
                placeholder="https://ejemplo.com/articulo"
                x-on:change.debounce.500ms="checkDuplicate($event.target.value)" />
            {{-- Aviso de duplicado --}}
            <div x-show="duplicateInfo" x-cloak
                 class="mt-2 flex items-center gap-2 rounded-lg border border-amber-300 bg-amber-50 p-3 text-sm dark:border-amber-500/30 dark:bg-amber-500/10">
                <i class="fa-solid fa-triangle-exclamation text-amber-500"></i>
                <span class="text-amber-700 dark:text-amber-400">
                    Ya tienes este enlace:
                    <a :href="'/enlaces/' + duplicateInfo?.id" class="underline" x-text="duplicateInfo?.title"></a>
                </span>
            </div>
            <div x-show="checkingDuplicate" x-cloak class="mt-1 text-xs text-gray-400">
                <i class="fa-solid fa-spinner fa-spin"></i> Verificando duplicado…
            </div>
        @endif
        <x-error for="url" />
    </div>

    {{-- Título (opcional) --}}
    <div class="sm:col-span-2">
        <x-label for="title">Título <span class="text-gray-400">(opcional — se rellena automáticamente)</span></x-label>
        <x-input id="title" type="text" name="title" value="{{ old('title', $link?->title) }}" maxlength="512" />
        <x-error for="title" />
    </div>

    {{-- Proyecto --}}
    <div>
        <x-label for="project_id">Proyecto *</x-label>
        <x-select id="project_id" name="project_id" required x-model="projectId" @change="folderId = ''">
            <option value="">Selecciona un proyecto</option>
            @foreach ($projects as $project)
                <option value="{{ $project->id }}">{{ $project->name }}</option>
            @endforeach
        </x-select>
        <x-error for="project_id" />
    </div>

    {{-- Carpeta (dependiente del proyecto) --}}
    <div>
        <x-label for="folder_id">Carpeta *</x-label>
        <select id="folder_id" name="folder_id" required x-model="folderId"
            class="mt-1 block w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm shadow-sm focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary dark:border-white/10 dark:bg-gray-800 dark:text-white">
            <option value="">Selecciona una carpeta</option>
            <template x-for="f in folders" :key="f.id">
                <option :value="f.id" :selected="f.id == folderId" x-text="f.name"></option>
            </template>
        </select>
        <p x-show="projectId && folders.length === 0" x-cloak class="mt-1 text-xs text-amber-600 dark:text-amber-400">
            Este proyecto no tiene carpetas.
            <a href="/proyectos" class="underline">Crea una primero.</a>
        </p>
        <x-error for="folder_id" />
    </div>

    {{-- Categoría --}}
    <div>
        <x-label for="category_id">Categoría</x-label>
        <x-select id="category_id" name="category_id">
            <option value="">Sin categoría</option>
            @foreach ($categories as $cat)
                <option value="{{ $cat->id }}"
                    @selected(old('category_id', $link?->category_id) == $cat->id)>
                    {{ $cat->name }}
                </option>
            @endforeach
        </x-select>
        <x-error for="category_id" />
    </div>

    {{-- Etiquetas typeahead --}}
    <div x-data='{
        search: "",
        suggestions: [],
        selected: @json($selectedTagIds),
        selectedNames: @json($selectedTagNames),
        async fetchSuggestions() {
            if (this.search.length < 1) { this.suggestions = []; return; }
            const r = await fetch("{{ route('api.tags.index') }}?search=" + encodeURIComponent(this.search), {
                headers: { "X-Requested-With": "XMLHttpRequest" }
            });
            this.suggestions = await r.json();
        },
        addTag(tag) {
            if (!this.selected.includes(tag.id)) {
                this.selected.push(tag.id);
                this.selectedNames.push(tag);
            }
            this.search = ""; this.suggestions = [];
        },
        removeTag(id) {
            this.selected = this.selected.filter(i => i !== id);
            this.selectedNames = this.selectedNames.filter(t => t.id !== id);
        }
    }'>
        <x-label>Etiquetas</x-label>
        <div class="mt-1 flex flex-wrap gap-1.5 rounded-lg border border-gray-300 bg-white p-2 dark:border-white/10 dark:bg-gray-800">
            <template x-for="tag in selectedNames" :key="tag.id">
                <span class="inline-flex items-center gap-1 rounded-full px-2.5 py-0.5 text-xs font-medium text-white"
                      :style="'background-color:' + tag.color">
                    <span x-text="tag.name"></span>
                    <button type="button" @click="removeTag(tag.id)" class="hover:opacity-75">×</button>
                    <input type="hidden" name="tags[]" :value="tag.id">
                </span>
            </template>
            <input type="text" x-model="search" @input.debounce.300ms="fetchSuggestions"
                placeholder="Buscar etiqueta…"
                class="flex-1 min-w-24 bg-transparent text-sm outline-none placeholder:text-gray-400 dark:text-white" />
        </div>
        <ul x-show="suggestions.length > 0" x-cloak
            class="mt-1 rounded-lg border border-gray-200 bg-white shadow dark:border-white/10 dark:bg-gray-800">
            <template x-for="tag in suggestions" :key="tag.id">
                <li @click="addTag(tag)"
                    class="flex cursor-pointer items-center gap-2 px-3 py-2 text-sm hover:bg-gray-50 dark:hover:bg-white/5">
                    <span class="size-3 rounded-full" :style="'background-color:' + tag.color"></span>
                    <span x-text="tag.name" class="text-gray-900 dark:text-white"></span>
                </li>
            </template>
        </ul>
    </div>

    {{-- Nota personal --}}
    <div class="sm:col-span-2">
        <x-label for="personal_note">Nota personal</x-label>
        <textarea id="personal_note" name="personal_note" rows="3" maxlength="5000"
            class="mt-1 block w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 shadow-sm placeholder:text-gray-400 focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary dark:border-white/10 dark:bg-gray-800 dark:text-white">{{ old('personal_note', $link?->personal_note) }}</textarea>
        <x-error for="personal_note" />
    </div>
</div>

<div class="mt-8 flex items-center justify-end gap-3">
    @if ($link)
        <a href="{{ route('links.show', $link) }}">
            <x-button type="button" variant="secondary">Cancelar</x-button>
        </a>
    @else
        <a href="{{ route('links.index') }}">
            <x-button type="button" variant="secondary">Cancelar</x-button>
        </a>
    @endif
    <x-button type="submit"><i class="fa-solid fa-floppy-disk"></i> Guardar</x-button>
</div>