@section('page-title', 'Generate QR Codes')

<div class="p-6" wire:poll.2s="updateProgress">
    <div class="max-w-4xl mx-auto">

        {{-- Success Message --}}
        @if (session()->has('message'))
            <div class="mb-6 p-4 bg-green-50 dark:bg-green-900/30 border border-green-200 dark:border-green-800 rounded-lg">
                <p class="text-sm text-green-700 dark:text-green-300">{{ session('message') }}</p>
            </div>
        @endif

        {{-- Generation Form --}}
        <div class="bg-white dark:bg-gray-800 shadow-sm sm:rounded-lg overflow-hidden">
            <div class="p-6">
                <h2 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-6">Generate QR Codes</h2>

                <form wire:submit="generateCodes" class="space-y-6">

                    {{-- Quantity Input --}}
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                            Quantity to Generate
                        </label>
                        <div class="flex items-center gap-3">
                            <input
                                type="text"
                                wire:model="quantity"
                                readonly
                                class="w-48 px-4 py-2 text-center text-lg font-semibold border border-gray-300 dark:border-gray-600 rounded-lg bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100"
                            />
                            <button
                                type="button"
                                wire:click="decrement"
                                @if($isGenerating) disabled @endif
                                class="px-4 py-2 bg-gray-500 hover:bg-gray-600 text-white font-bold rounded-lg disabled:opacity-50 disabled:cursor-not-allowed"
                            >
                                -
                            </button>
                            <button
                                type="button"
                                wire:click="increment"
                                @if($isGenerating) disabled @endif
                                class="px-4 py-2 bg-gray-500 hover:bg-gray-600 text-white font-bold rounded-lg disabled:opacity-50 disabled:cursor-not-allowed"
                            >
                                +
                            </button>
                        </div>
                        <p class="mt-2 text-xs text-gray-500 dark:text-gray-400">Min: 10,000 | Increment: +10,000</p>
                        @error('quantity') <span class="text-xs text-red-500 mt-1">{{ $message }}</span> @enderror
                    </div>

                    {{-- Starting Serial Number --}}
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                            Starting Serial Number (Optional)
                        </label>
                        <input
                            type="number"
                            wire:model="startingSerial"
                            @if($isGenerating) disabled @endif
                            class="w-48 px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 disabled:opacity-50"
                            placeholder="100000"
                            min="0"
                        />
                        <p class="mt-2 text-xs text-gray-500 dark:text-gray-400">Leave blank for auto-increment from last code</p>
                        @error('startingSerial') <span class="text-xs text-red-500 mt-1">{{ $message }}</span> @enderror
                    </div>

                    {{-- Generation Method Toggle --}}
                    <div class="p-4 bg-gray-50 dark:bg-gray-700 rounded-lg">
                        <label class="flex items-center cursor-pointer">
                            <div class="relative">
                                <input
                                    type="checkbox"
                                    wire:model="useQueue"
                                    @if($isGenerating) disabled @endif
                                    class="sr-only peer"
                                />
                                <div class="w-11 h-6 bg-gray-300 dark:bg-gray-600 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"></div>
                            </div>
                            <div class="ml-3">
                                <span class="text-sm font-medium text-gray-900 dark:text-gray-100">
                                    Use Queue System
                                </span>
                                <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">
                                    @if($useQueue)
                                        <span class="text-blue-600 dark:text-blue-400">✓ Queue enabled</span> - Requires queue worker running (for production)
                                    @else
                                        <span class="text-green-600 dark:text-green-400">✓ Direct generation</span> - Works without queue worker (recommended for local)
                                    @endif
                                </p>
                            </div>
                        </label>
                    </div>

                    {{-- Generate Button --}}
                    <div>
                        <button
                            type="submit"
                            @if($isGenerating) disabled @endif
                            class="px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
                        >
                            @if($isGenerating)
                                Generating...
                            @else
                                Generate Codes
                            @endif
                        </button>
                    </div>

                </form>

            </div>
        </div>

        {{-- Progress Section --}}
        @if($isGenerating || $progress > 0)
            <div class="mt-6 bg-white dark:bg-gray-800 shadow-sm sm:rounded-lg overflow-hidden">
                <div class="p-6">
                    <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4">Generation Progress</h3>

                    {{-- Progress Bar --}}
                    <div class="mb-4">
                        <div class="flex justify-between items-center mb-2">
                            <span class="text-sm text-gray-600 dark:text-gray-300">
                                {{ number_format($progress) }} / {{ number_format($totalQuantity) }}
                            </span>
                            <span class="text-sm font-semibold text-gray-900 dark:text-gray-100">
                                {{ $totalQuantity > 0 ? round(($progress / $totalQuantity) * 100) : 0 }}%
                            </span>
                        </div>
                        <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-6 overflow-hidden">
                            <div
                                class="bg-blue-600 h-6 rounded-full transition-all duration-500 flex items-center justify-end pr-2"
                                style="width: {{ $totalQuantity > 0 ? ($progress / $totalQuantity) * 100 : 0 }}%"
                            >
                                @if($progress > 0)
                                    <span class="text-xs font-bold text-white">
                                        {{ $totalQuantity > 0 ? round(($progress / $totalQuantity) * 100) : 0 }}%
                                    </span>
                                @endif
                            </div>
                        </div>
                    </div>

                    {{-- Status Display --}}
                    <div class="space-y-2">
                        @if($isGenerating)
                            <div class="flex items-center gap-2 text-blue-600 dark:text-blue-400">
                                <svg class="animate-spin h-5 w-5" 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 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                                </svg>
                                <span class="text-sm font-medium">Generating codes in batches of 1,000...</span>
                            </div>
                        @else
                            <div class="flex items-center gap-2 text-green-600 dark:text-green-400">
                                <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
                                </svg>
                                <span class="text-sm font-medium">Generation complete!</span>
                            </div>
                        @endif

                        <div class="text-xs text-gray-500 dark:text-gray-400">
                            Processing in batches of 1,000 codes for optimal performance
                        </div>

                        @if($totalQuantity > 0)
                            <div class="text-xs text-gray-500 dark:text-gray-400">
                                Estimated time: ~{{ ceil($totalQuantity / 1000) }} seconds
                            </div>
                        @endif
                    </div>

                </div>
            </div>
        @endif

    </div>
</div>