<x-app-layout>
    <x-slot name="header">
        <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between">
            <h2 class="text-xl font-bold text-gray-900 dark:text-white">
                {{ __('Tags') }}
            </h2>
            <button onclick="document.getElementById('createTagModal').classList.remove('hidden')"
                    class="mt-3 sm:mt-0 inline-flex items-center px-4 py-2 bg-indigo-600 hover:bg-indigo-700 text-white text-sm font-medium rounded-lg transition">
                <i class="fas fa-plus me-2"></i>
                Add Tag
            </button>
        </div>
    </x-slot>

    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm p-6">
            <div class="flex flex-wrap gap-3">
                @forelse($tags ?? [] as $tag)
                    <div class="group relative inline-flex items-center px-4 py-2 rounded-full text-sm font-medium transition"
                         style="background-color: {{ $tag->color }}20; color: {{ $tag->color }}; border: 1px solid {{ $tag->color }}40;">
                        <span>{{ $tag->name }}</span>
                        <span class="ml-2 text-xs opacity-60">({{ $tag->transactions_count ?? 0 }})</span>

                        <div class="hidden group-hover:flex items-center ml-2 space-x-1">
                            <button onclick="editTag({{ $tag->id }}, '{{ $tag->name }}', '{{ $tag->color }}')"
                                    class="opacity-60 hover:opacity-100">
                                <i class="fas fa-edit text-xs"></i>
                            </button>
                            @if(($tag->transactions_count ?? 0) == 0)
                                <form action="{{ route('tags.destroy', $tag) }}" method="POST" class="inline">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="opacity-60 hover:opacity-100 text-red-500">
                                        <i class="fas fa-times text-xs"></i>
                                    </button>
                                </form>
                            @endif
                        </div>
                    </div>
                @empty
                    <div class="w-full py-12 text-center">
                        <i class="fas fa-tags text-gray-300 dark:text-gray-600 text-5xl mb-4"></i>
                        <h3 class="text-lg font-medium text-gray-900 dark:text-white">No tags yet</h3>
                        <p class="text-gray-500 mt-1">Create tags to organize your transactions</p>
                    </div>
                @endforelse
            </div>
        </div>
    </div>

    <!-- Create Tag Modal -->
    <div id="createTagModal" class="fixed inset-0 z-50 hidden overflow-y-auto">
        <div class="flex items-center justify-center min-h-screen px-4">
            <div class="fixed inset-0 bg-black opacity-50" onclick="document.getElementById('createTagModal').classList.add('hidden')"></div>
            <div class="relative bg-white dark:bg-gray-800 rounded-xl shadow-lg max-w-md w-full p-6">
                <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Create Tag</h3>
                <form action="{{ route('tags.store') }}" method="POST">
                    @csrf
                    <div class="mb-4">
                        <x-input-label for="name" :value="__('Tag Name')" />
                        <x-text-input id="name" name="name" type="text" class="mt-1 block w-full" required placeholder="e.g., vacation, project-x" />
                    </div>
                    <div class="mb-4">
                        <x-input-label for="color" :value="__('Color')" />
                        <input type="color" id="color" name="color" value="#6366f1" class="mt-1 h-10 w-full rounded border-gray-300">
                    </div>
                    <div class="flex justify-end space-x-4">
                        <button type="button" onclick="document.getElementById('createTagModal').classList.add('hidden')"
                                class="px-4 py-2 text-gray-600 hover:text-gray-800">Cancel</button>
                        <x-primary-button>Create Tag</x-primary-button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Edit Tag Modal -->
    <div id="editTagModal" class="fixed inset-0 z-50 hidden overflow-y-auto">
        <div class="flex items-center justify-center min-h-screen px-4">
            <div class="fixed inset-0 bg-black opacity-50" onclick="document.getElementById('editTagModal').classList.add('hidden')"></div>
            <div class="relative bg-white dark:bg-gray-800 rounded-xl shadow-lg max-w-md w-full p-6">
                <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Edit Tag</h3>
                <form id="editTagForm" method="POST">
                    @csrf
                    @method('PUT')
                    <div class="mb-4">
                        <x-input-label for="edit_name" :value="__('Tag Name')" />
                        <x-text-input id="edit_name" name="name" type="text" class="mt-1 block w-full" required />
                    </div>
                    <div class="mb-4">
                        <x-input-label for="edit_color" :value="__('Color')" />
                        <input type="color" id="edit_color" name="color" class="mt-1 h-10 w-full rounded border-gray-300">
                    </div>
                    <div class="flex justify-end space-x-4">
                        <button type="button" onclick="document.getElementById('editTagModal').classList.add('hidden')"
                                class="px-4 py-2 text-gray-600 hover:text-gray-800">Cancel</button>
                        <x-primary-button>Update Tag</x-primary-button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    @push('scripts')
    <script>
        function editTag(id, name, color) {
            document.getElementById('editTagForm').action = '/tags/' + id;
            document.getElementById('edit_name').value = name;
            document.getElementById('edit_color').value = color;
            document.getElementById('editTagModal').classList.remove('hidden');
        }
    </script>
    @endpush
</x-app-layout>
