@props([
    'route' => 'my-tasks',
    'filters' => [],
])

@php
    $hasFilters = collect($filters)->filter(fn ($v) => $v !== null && $v !== '' && (!is_array($v) || count($v) > 0))->isNotEmpty();
@endphp

@if ($hasFilters)
<div
    class="inline-block"
    x-data="saveFilterButton({{ Js::from([
        'apiBase' => url('/api/v1'),
        'csrf' => csrf_token(),
        'route' => $route,
        'filters' => $filters,
    ]) }})"
>
    <button type="button" @click="open = true" class="inline-flex items-center gap-1.5 rounded-md border border-gray-300 bg-white px-3 py-1.5 text-sm font-medium text-gray-700 hover:bg-gray-50">
        <svg class="h-4 w-4 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z"/></svg>
        Save this filter
    </button>
    <div x-show="open" x-cloak class="fixed inset-0 z-50 overflow-y-auto" aria-modal="true">
        <div class="fixed inset-0 bg-black/40" @click="open = false"></div>
        <div class="flex min-h-full items-center justify-center p-4">
            <div @click.stop class="w-full max-w-sm rounded-lg bg-white p-4 shadow-xl" x-show="open" x-transition>
                <h3 class="text-lg font-semibold text-gray-900">Save filter</h3>
                <p class="mt-1 text-sm text-gray-500">Give this filter a name to find it in Saved Views.</p>
                <input type="text" x-model="name" placeholder="e.g. John's overdue high-priority tasks" class="mt-3 w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-indigo-500 focus:ring-indigo-500" @keydown.enter="save()" />
                <div class="mt-4 flex justify-end gap-2">
                    <button type="button" @click="open = false" class="rounded-md border border-gray-300 bg-white px-3 py-1.5 text-sm font-medium text-gray-700 hover:bg-gray-50">Cancel</button>
                    <button type="button" @click="save()" :disabled="saving || !name.trim()" class="rounded-md bg-indigo-600 px-3 py-1.5 text-sm font-medium text-white hover:bg-indigo-700 disabled:opacity-50">Save</button>
                </div>
                <p x-show="error" x-text="error" class="mt-2 text-sm text-red-600"></p>
            </div>
        </div>
    </div>
</div>
@push('scripts')
<script>
document.addEventListener('alpine:init', () => {
    Alpine.data('saveFilterButton', (config) => ({
        apiBase: config.apiBase,
        csrf: config.csrf,
        route: config.route,
        filters: config.filters || {},
        open: false,
        name: '',
        saving: false,
        error: '',
        async save() {
            this.error = '';
            const name = (this.name || '').trim();
            if (!name) return;
            this.saving = true;
            try {
                const r = await fetch(this.apiBase + '/saved-filters', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json', 'Accept': 'application/json', 'X-CSRF-TOKEN': this.csrf },
                    body: JSON.stringify({ name, route: this.route, filters: this.filters }),
                    credentials: 'same-origin',
                });
                const data = await r.json().catch(() => ({}));
                if (r.ok) {
                    this.open = false;
                    this.name = '';
                    window.dispatchEvent(new CustomEvent('saved-filters-updated'));
                } else {
                    this.error = data.message || 'Failed to save.';
                }
            } catch (_) {
                this.error = 'Failed to save.';
            } finally {
                this.saving = false;
            }
        },
    }));
});
</script>
@endpush
@endif