@props([
    'baseUrl',
    'showAssignee' => false,
    'workspaceUsers' => collect(),
    'workspaceTags' => collect(),
    'filterParams' => [],
])

@php
    $statuses = ['todo', 'in_progress', 'review', 'done'];
    $priorities = ['low', 'medium', 'high', 'urgent'];
    $dateRanges = [
        'today' => 'Today',
        'tomorrow' => 'Tomorrow',
        'today_tomorrow' => 'Today & Tomorrow',
        'this_week' => 'This Week',
        'this_month' => 'This Month',
        'overdue' => 'Overdue',
        'future' => 'Future',
        'custom' => 'Custom range',
    ];
    $sorts = [
        'due_asc' => 'Due date (earliest)',
        'due_desc' => 'Due date (latest)',
        'priority_high' => 'Priority (high first)',
        'priority_low' => 'Priority (low first)',
        'created_asc' => 'Created (oldest)',
        'created_desc' => 'Created (newest)',
        'title_asc' => 'Title (A–Z)',
        'title_desc' => 'Title (Z–A)',
    ];
    $currentStatus = (array) ($filterParams['status'] ?? []);
    $currentPriority = (array) ($filterParams['priority'] ?? []);
    $currentTagIds = (array) ($filterParams['tag_ids'] ?? []);
    $hasFilters = !empty($currentStatus) || !empty($currentPriority) || !empty($filterParams['assignee'] ?? '') || !empty($filterParams['date_range'] ?? '') || !empty($currentTagIds) || !empty($filterParams['q'] ?? '');
    $dateRangeValue = $filterParams['date_range'] ?? '';
    $assigneeValue = $filterParams['assignee'] ?? '';
    $sortValue = $filterParams['sort'] ?? 'due_asc';
    $qValue = $filterParams['q'] ?? '';
    $dateFromValue = $filterParams['date_from'] ?? '';
    $dateToValue = $filterParams['date_to'] ?? '';
@endphp

<div class="rounded-lg border border-gray-200 bg-white p-4 shadow-sm mb-4" x-data="{ open: false, dateRange: '{{ $dateRangeValue }}' }">
    <div class="flex flex-wrap items-center gap-2">
        <button type="button" @click="open = !open" class="inline-flex items-center gap-1.5 rounded-md border border-gray-300 bg-white px-3 py-2 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="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"/></svg>
            Filters
            @if ($hasFilters)
                <span class="rounded-full bg-indigo-100 px-2 py-0.5 text-xs text-indigo-800">on</span>
            @endif
        </button>
        <a href="{{ $baseUrl }}" class="inline-flex items-center rounded-md border border-gray-300 bg-white px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 {{ $hasFilters ? '' : 'invisible' }}">Clear filters</a>
    </div>

    <div x-show="open" class="mt-4 border-t border-gray-200 pt-4" x-cloak style="display: none;">
        <form method="get" action="{{ $baseUrl }}" class="space-y-4">
            @foreach (request()->query() as $key => $value)
                @if (!in_array($key, ['status', 'priority', 'assignee', 'date_range', 'date_from', 'date_to', 'tag_ids', 'sort', 'q'], true))
                    @if (is_array($value))
                        @foreach ($value as $v)
                            <input type="hidden" name="{{ $key }}[]" value="{{ $v }}">
                        @endforeach
                    @else
                        <input type="hidden" name="{{ $key }}" value="{{ $value }}">
                    @endif
                @endif
            @endforeach

            <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
                <div>
                    <label class="block text-xs font-medium text-gray-500 mb-1">Status</label>
                    <div class="flex flex-wrap gap-2">
                        @foreach ($statuses as $s)
                            <label class="inline-flex items-center gap-1 text-sm">
                                <input type="checkbox" name="status[]" value="{{ $s }}" {{ in_array($s, $currentStatus) ? 'checked' : '' }} class="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
                                <span>{{ str_replace('_', ' ', $s) }}</span>
                            </label>
                        @endforeach
                    </div>
                </div>
                <div>
                    <label class="block text-xs font-medium text-gray-500 mb-1">Priority</label>
                    <div class="flex flex-wrap gap-2">
                        @foreach ($priorities as $p)
                            <label class="inline-flex items-center gap-1 text-sm">
                                <input type="checkbox" name="priority[]" value="{{ $p }}" {{ in_array($p, $currentPriority) ? 'checked' : '' }} class="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
                                <span>{{ $p }}</span>
                            </label>
                        @endforeach
                    </div>
                </div>
                @if ($showAssignee && $workspaceUsers->isNotEmpty())
                    <div>
                        <label class="block text-xs font-medium text-gray-500 mb-1">Assignee</label>
                        <select name="assignee" class="block w-full rounded-md border-gray-300 text-sm focus:border-indigo-500 focus:ring-indigo-500">
                            <option value="">Any</option>
                            @foreach ($workspaceUsers as $u)
                                <option value="{{ $u->id }}" {{ $assigneeValue == $u->id ? 'selected' : '' }}>{{ $u->name }}</option>
                            @endforeach
                        </select>
                    </div>
                @endif
                <div>
                    <label class="block text-xs font-medium text-gray-500 mb-1">Date range</label>
                    <select name="date_range" x-model="dateRange" class="block w-full rounded-md border-gray-300 text-sm focus:border-indigo-500 focus:ring-indigo-500">
                        <option value="">Any</option>
                        @foreach ($dateRanges as $value => $label)
                            <option value="{{ $value }}" {{ $dateRangeValue === $value ? 'selected' : '' }}>{{ $label }}</option>
                        @endforeach
                    </select>
                    <div class="mt-2 flex gap-2" x-show="dateRange === 'custom'" x-cloak style="display: none;">
                        <input type="date" name="date_from" value="{{ $dateFromValue }}" class="block w-full rounded-md border-gray-300 text-sm focus:border-indigo-500 focus:ring-indigo-500" placeholder="From">
                        <input type="date" name="date_to" value="{{ $dateToValue }}" class="block w-full rounded-md border-gray-300 text-sm focus:border-indigo-500 focus:ring-indigo-500" placeholder="To">
                    </div>
                </div>
            </div>

            <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
                @if ($workspaceTags->isNotEmpty())
                    <div>
                        <label class="block text-xs font-medium text-gray-500 mb-1">Tags</label>
                        <div class="flex flex-wrap gap-2 max-h-24 overflow-y-auto">
                            @foreach ($workspaceTags as $tag)
                                <label class="inline-flex items-center gap-1 text-sm">
                                    <input type="checkbox" name="tag_ids[]" value="{{ $tag->id }}" {{ in_array($tag->id, $currentTagIds) ? 'checked' : '' }} class="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
                                    <span class="rounded px-1.5 py-0.5 text-xs" style="background-color: {{ $tag->color ?? '#e5e7eb' }}20; color: {{ $tag->color ?? '#374151' }}">{{ $tag->name }}</span>
                                </label>
                            @endforeach
                        </div>
                    </div>
                @endif
                <div>
                    <label class="block text-xs font-medium text-gray-500 mb-1">Search (title &amp; description)</label>
                    <input type="text" name="q" value="{{ $qValue }}" placeholder="Search…" class="block w-full rounded-md border-gray-300 text-sm focus:border-indigo-500 focus:ring-indigo-500">
                </div>
                <div>
                    <label class="block text-xs font-medium text-gray-500 mb-1">Sort</label>
                    <select name="sort" class="block w-full rounded-md border-gray-300 text-sm focus:border-indigo-500 focus:ring-indigo-500">
                        @foreach ($sorts as $value => $label)
                            <option value="{{ $value }}" {{ $sortValue === $value ? 'selected' : '' }}>{{ $label }}</option>
                        @endforeach
                    </select>
                </div>
            </div>

            <div class="flex justify-end">
                <button type="submit" class="rounded-md bg-indigo-600 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-700">Apply filters</button>
            </div>
        </form>
    </div>
</div>