@props(['options', 'selected', 'userId'])

<!-- resources/views/components/status-modal-dropdown.blade.php -->
@php
// Convert selected to a string to ensure consistent comparison
$selectedKey = (string) $selected;

// Get color mapping from enum 
$statusColorMapping = App\Enum\TenantStatus::colorMap();
$defaultColors = App\Enum\TenantStatus::defaultColors();

// Get status colors (fall back to default indigo if needed)
$status = $statusColorMapping[$selectedKey] ?? $defaultColors;
$bgColor = $status['bg'];
$textColor = $status['text'];
$dotColor = $status['dot'];
$borderColor = $status['border'];
@endphp

<div class="inline-block text-left" x-data="{ isOpen: false }">
    <!-- Status Badge - Compact but readable -->
    <button 
        type="button"
        @click="isOpen = true"
        class="inline-flex items-center px-2 py-1 text-xs font-medium rounded-md border {{ $borderColor }} {{ $bgColor }} {{ $textColor }} shadow-sm hover:shadow-md transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-opacity-30"
        style="touch-action: manipulation; -webkit-tap-highlight-color: transparent;"
    >
        <span class="inline-block w-2 h-2 rounded-full mr-2 {{ $dotColor }}"></span>
        <span>{{ $options[$selectedKey] ?? 'Select' }}</span>
        <svg class="ml-1.5 h-3.5 w-3.5 opacity-70" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
        </svg>
    </button>

    <!-- Modal Dialog - Better balanced size -->
    <div 
        x-show="isOpen" 
        x-cloak
        class="fixed inset-0 z-50 overflow-hidden"
        style="display: none;"
    >
        <!-- Overlay with indigo tint -->
        <div 
            class="absolute inset-0 bg-gray-500 bg-opacity-75 transition-opacity"
            @click="isOpen = false"
        ></div>
        
        <!-- Modal panel centered -->
        <div class="fixed inset-0 z-10 overflow-y-auto">
            <div class="flex min-h-full items-center justify-center p-4 text-center">
                <div 
                    class="relative transform overflow-hidden rounded-lg bg-white dark:bg-gray-800 text-left shadow-xl ring-1 ring-black ring-opacity-5 transition-all sm:my-8 sm:w-full sm:max-w-sm"
                    @click.away="isOpen = false"
                >
                    <!-- Modal header -->
                    <div class="px-5 py-4 border-b border-gray-200 dark:border-gray-700">
                        <h3 class="text-base font-medium text-gray-900 dark:text-white">Update Status</h3>
                    </div>
                    
                    <!-- Status options - Improved spacing and readability -->
                    <div class="max-h-80 overflow-y-auto py-3 px-3">
                        <div class="space-y-2">
                            @foreach ($options as $id => $name)
                                @php
                                    // Get status colors for this option
                                    $optionStatus = $statusColorMapping[$id] ?? $defaultColors;
                                    
                                    // Selected state classes
                                    $isSelected = $selectedKey == $id;
                                    $selectedClasses = $isSelected 
                                        ? 'ring-2 ring-indigo-500 dark:ring-indigo-400' 
                                        : 'hover:bg-gray-50 dark:hover:bg-gray-700';
                                @endphp
                                <button
                                    type="button"
                                    wire:click="statusChanged('{{ $id }}', {{ $userId }})"
                                    @click="isOpen = false"
                                    class="w-full flex items-center px-4 py-3 rounded-md text-base transition-all duration-150 {{ $selectedClasses }}"
                                >
                                    <span 
                                        class="inline-block w-3 h-3 rounded-full mr-3 {{ $optionStatus['dot'] }}"
                                    ></span>
                                    <span class="{{ $isSelected ? 'font-medium' : 'font-normal' }} {{ $optionStatus['text'] }}">
                                        {{ $name }}
                                    </span>
                                    
                                    @if($isSelected)
                                    
                                        <svg class="ml-auto h-5 w-5 text-indigo-600 dark:text-indigo-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                                            <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
                                        </svg>
                                    @endif
                                </button>
                            @endforeach
                        </div>
                    </div>
                    
                    <!-- Modal footer - Better proportioned -->
                    <div class="bg-gray-50 dark:bg-gray-700/50 px-5 py-3 border-t border-gray-200 dark:border-gray-700 flex justify-end">
                        <button 
                            type="button" 
                            class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 rounded-md border border-gray-300 dark:border-gray-600 transition-colors shadow-sm"
                            @click="isOpen = false"
                        >
                            Close
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
[x-cloak] { display: none !important; }

/* Modal scrollbar styling */
.max-h-80::-webkit-scrollbar {
  width: 4px;
}
.max-h-80::-webkit-scrollbar-track {
  background: transparent; 
}
.max-h-80::-webkit-scrollbar-thumb {
  background-color: rgba(99, 102, 241, 0.3);
  border-radius: 4px;
}

/* Enhance tap targets for mobile */
@media (max-width: 640px) {
  button {
    min-height: 42px;
  }
}
</style>