<div class="p-6">
    <h3 class="text-lg font-semibold text-t1 mb-5">Create Short Link</h3>

    <div class="space-y-4">
        <div>
            <label class="block text-xs font-medium text-t2 mb-1.5">Target URL *</label>
            <input wire:model.live="targetUrl" type="url" placeholder="https://example.com/long-url"
                class="block w-full px-3 py-2.5 bg-s2 border border-white/[.06] rounded-lg text-sm text-t1 placeholder-t3 focus:outline-none focus:ring-1 focus:ring-blue/50 focus:border-blue/50">
            @error('targetUrl') <p class="mt-1 text-xs text-red">{{ $message }}</p> @enderror
        </div>

        <div>
            <div class="flex items-center justify-between mb-1.5">
                <label class="block text-xs font-medium text-t2">Custom Slug (optional)</label>
                <button wire:click="suggestSlugs" wire:loading.attr="disabled" wire:target="suggestSlugs"
                    @disabled(!$targetUrl)
                    type="button"
                    class="flex items-center gap-1 text-xs text-accent hover:opacity-80 transition-opacity disabled:opacity-40">
                    <span wire:loading.remove wire:target="suggestSlugs">
                        <x-heroicon-o-sparkles class="w-3 h-3 inline" />
                        AI Slug
                    </span>
                    <span wire:loading wire:target="suggestSlugs" class="flex items-center gap-1">
                        <svg class="animate-spin h-3 w-3" fill="none" viewBox="0 0 24 24">
                            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
                        </svg>
                        Thinking…
                    </span>
                </button>
            </div>
            <div class="flex items-center bg-s2 border border-white/[.06] rounded-lg overflow-hidden focus-within:ring-1 focus-within:ring-blue/50">
                <span class="px-3 py-2.5 text-sm text-t3 border-r border-white/[.06] flex-shrink-0">nimu.li/</span>
                <input wire:model.live="slug" type="text" placeholder="auto-generated"
                    class="flex-1 px-3 py-2.5 bg-transparent text-sm text-t1 placeholder-t3 focus:outline-none font-mono min-w-0">
                <button wire:click="regenerateSlug" type="button" title="Regenerate slug"
                    class="px-3 py-2.5 text-t2 hover:text-t1 border-l border-white/[.06] flex-shrink-0 transition-colors">
                    <x-heroicon-o-arrow-path class="w-4 h-4" />
                </button>
            </div>
            @if($slugSuggestions)
            <div class="flex flex-wrap gap-1.5 mt-2">
                @foreach($slugSuggestions as $suggestion)
                <button wire:click="pickSuggestion('{{ $suggestion }}')" type="button"
                    class="px-2 py-1 bg-accent/10 border border-accent/30 text-accent text-xs rounded font-mono hover:bg-accent/20 transition-colors">
                    {{ $suggestion }}
                </button>
                @endforeach
            </div>
            @endif
            @error('slug') <p class="mt-1 text-xs text-red">{{ $message }}</p> @enderror
        </div>

        <div>
            <label class="block text-xs font-medium text-t2 mb-1.5">Title (optional)</label>
            <input wire:model="title" type="text" placeholder="My awesome link"
                class="block w-full px-3 py-2.5 bg-s2 border border-white/[.06] rounded-lg text-sm text-t1 placeholder-t3 focus:outline-none focus:ring-1 focus:ring-blue/50 focus:border-blue/50">
        </div>
    </div>

    <div class="flex gap-3 mt-6">
        <button wire:click="save" wire:loading.attr="disabled" wire:target="save"
            class="flex-1 px-4 py-2.5 bg-accent-gradient text-white text-sm font-medium rounded-lg hover:opacity-90 transition-opacity disabled:opacity-60">
            <span wire:loading.remove wire:target="save">Create Link</span>
            <span wire:loading wire:target="save" class="flex items-center justify-center gap-2">
                <svg class="animate-spin h-4 w-4" fill="none" viewBox="0 0 24 24">
                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
                </svg>
                Creating...
            </span>
        </button>
        <button wire:click="closeModal" type="button"
            class="px-4 py-2.5 bg-s2 text-t2 text-sm font-medium rounded-lg hover:text-t1 transition-colors border border-white/[.06]">
            Cancel
        </button>
    </div>
</div>
