@section('page-title', 'Bulk Assign')

<div class="p-3 sm:p-6 max-w-7xl mx-auto" x-data="bulkScanner()" x-init="init()">

    {{-- Header --}}
    <div class="mb-4 sm:mb-6">
        <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 mb-4">
            <div>
                <h1 class="text-xl sm:text-2xl font-bold text-gray-900 dark:text-gray-100">Bulk Assign</h1>
                <p class="text-xs sm:text-sm text-gray-600 dark:text-gray-400 mt-1">Scan codes and assign to seller</p>
            </div>
            <a href="{{ route('sellers.index') }}" class="px-4 py-2 bg-gray-600 hover:bg-gray-700 text-white rounded-lg font-medium transition-colors text-center">
                Back to Sellers
            </a>
        </div>

        {{-- Success/Error Messages --}}
        @if(session('success'))
            <div class="mb-4 p-4 bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 text-green-800 dark:text-green-200 rounded-lg">
                {{ session('success') }}
            </div>
        @endif
        @if(session('error'))
            <div class="mb-4 p-4 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 text-red-800 dark:text-red-200 rounded-lg">
                {{ session('error') }}
            </div>
        @endif
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">

        {{-- LEFT COLUMN: Scanner --}}
        <div class="space-y-6">

            {{-- Step 1: Scan Codes --}}
            <div class="bg-white dark:bg-gray-800 shadow-sm sm:rounded-lg">
                <div class="p-4 sm:p-6">
                    <h2 class="text-base sm:text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4">Step 1: Scan QR Codes</h2>

                    {{-- Scanner Mode Toggle --}}
                    <div class="flex gap-2 mb-4">
                        <button
                            @click="switchMode('manual')"
                            :class="scanMode === 'manual' ? 'bg-blue-600 text-white' : 'bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300'"
                            class="flex-1 px-3 sm:px-4 py-2 rounded-lg font-medium transition text-xs sm:text-sm">
                            Manual/Scanner
                        </button>
                        <button
                            @click="switchMode('camera')"
                            :class="scanMode === 'camera' ? 'bg-blue-600 text-white' : 'bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300'"
                            class="flex-1 px-3 sm:px-4 py-2 rounded-lg font-medium transition text-xs sm:text-sm">
                            Camera Scan
                        </button>
                    </div>

                    {{-- Manual/Scanner Input Mode --}}
                    <div x-show="scanMode === 'manual'" class="space-y-3">
                        <div>
                            <label class="block text-xs sm:text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                Scan or Enter Serial Number
                            </label>
                            <input
                                type="text"
                                x-ref="manualInput"
                                x-model="manualInputValue"
                                @keydown.enter="handleManualInput()"
                                style="font-size: 16px;"
                                class="w-full px-3 sm:px-4 py-3 border-2 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 font-mono"
                                placeholder="Scan or type serial"
                                autocomplete="off">
                            <p class="mt-2 text-xs text-gray-500 dark:text-gray-400">
                                Use scanner or type serial. Press Enter to add.
                            </p>
                        </div>
                    </div>

                    {{-- Camera Scan Mode --}}
                    <div x-show="scanMode === 'camera'" class="space-y-3">
                        <div id="qr-reader" class="w-full rounded-lg overflow-hidden border-2 border-gray-300 dark:border-gray-600" style="min-height: 300px;">
                            <!-- Camera feed will appear here -->
                        </div>
                        <div class="flex gap-2">
                            <button
                                @click="startCamera()"
                                x-show="!cameraActive"
                                class="flex-1 px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition">
                                Start Camera
                            </button>
                            <button
                                @click="stopCamera()"
                                x-show="cameraActive"
                                class="flex-1 px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition">
                                Stop Camera
                            </button>
                        </div>
                        <p class="text-xs text-gray-500 dark:text-gray-400">
                            Point your camera at the QR code. Codes will be added automatically.
                        </p>
                    </div>

                    {{-- Summary Stats --}}
                    <div class="mt-4 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
                        <div class="grid grid-cols-2 gap-3 text-sm">
                            <div>
                                <span class="text-gray-600 dark:text-gray-400">Total Scanned:</span>
                                <span class="ml-2 font-bold text-gray-900 dark:text-gray-100">{{ $this->summary['total'] }}</span>
                            </div>
                            <div>
                                <span class="text-gray-600 dark:text-gray-400">Available:</span>
                                <span class="ml-2 font-bold text-green-600">{{ $this->summary['available'] }}</span>
                            </div>
                            <div>
                                <span class="text-gray-600 dark:text-gray-400">Already Assigned:</span>
                                <span class="ml-2 font-bold text-yellow-600">{{ $this->summary['assigned'] }}</span>
                            </div>
                            <div>
                                <span class="text-gray-600 dark:text-gray-400">Already Used:</span>
                                <span class="ml-2 font-bold text-red-600">{{ $this->summary['used'] }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Step 2: Select Seller --}}
            <div class="bg-white dark:bg-gray-800 shadow-sm sm:rounded-lg">
                <div class="p-4 sm:p-6">
                    <h2 class="text-base sm:text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4">Step 2: Select Seller</h2>

                    <div x-data="{
                        searchQuery: '',
                        showDropdown: false,
                        filteredSellers: @js($sellers->toArray()),
                        allSellers: @js($sellers->toArray()),
                        selectedSeller: null,
                        filterSellers() {
                            if (this.searchQuery === '') {
                                this.filteredSellers = this.allSellers;
                            } else {
                                const query = this.searchQuery.toLowerCase();
                                this.filteredSellers = this.allSellers.filter(agent =>
                                    agent.name.toLowerCase().includes(query) ||
                                    agent.seller_id.toLowerCase().includes(query)
                                );
                            }
                        },
                        selectSeller(agent) {
                            this.selectedSeller = agent;
                            this.searchQuery = agent.name + ' (' + agent.seller_id + ')';
                            this.showDropdown = false;
                            @this.set('selectedSellerId', agent.id);
                        }
                    }">
                        <label class="block text-xs sm:text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                            Search & Select Seller
                        </label>

                        {{-- Search Input --}}
                        <div class="relative">
                            <input
                                type="text"
                                x-model="searchQuery"
                                @input="filterSellers(); showDropdown = true"
                                @focus="showDropdown = true"
                                @click.away="showDropdown = false"
                                placeholder="Type to search seller..."
                                class="w-full px-4 py-3 text-sm sm:text-base 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"
                            />

                            {{-- Dropdown Results --}}
                            <div
                                x-show="showDropdown && filteredSellers.length > 0"
                                x-transition
                                class="absolute z-10 w-full mt-1 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg shadow-lg max-h-60 overflow-y-auto">
                                <template x-for="agent in filteredSellers" :key="agent.id">
                                    <button
                                        type="button"
                                        @click="selectSeller(agent)"
                                        class="w-full text-left px-4 py-2 text-sm hover:bg-gray-100 dark:hover:bg-gray-600 text-gray-900 dark:text-gray-100 border-b border-gray-100 dark:border-gray-600 last:border-b-0"
                                        x-text="agent.name + ' (' + agent.seller_id + ')'">
                                    </button>
                                </template>
                            </div>

                            {{-- No Results --}}
                            <div
                                x-show="showDropdown && filteredSellers.length === 0"
                                x-transition
                                class="absolute z-10 w-full mt-1 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg shadow-lg">
                                <div class="px-4 py-3 text-sm text-gray-500 dark:text-gray-400">
                                    No sellers found
                                </div>
                            </div>
                        </div>

                        @error('selectedSellerId')
                            <p class="mt-1 text-xs sm:text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                        @enderror
                    </div>

                    @if($selectedSellerId)
                        @php
                            $selectedSeller = $sellers->find($selectedSellerId);
                        @endphp
                        @if($selectedSeller)
                            <div class="mt-4 p-4 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg">
                                <p class="text-sm font-medium text-blue-900 dark:text-blue-100">Selected: {{ $selectedSeller->name }}</p>
                                @if($selectedSeller->email)
                                    <p class="text-xs text-blue-700 dark:text-blue-300">Email: {{ $selectedSeller->email }}</p>
                                @endif
                                @if($selectedSeller->phone)
                                    <p class="text-xs text-blue-700 dark:text-blue-300">Phone: {{ $selectedSeller->phone }}</p>
                                @endif
                            </div>
                        @endif
                    @endif

                    {{-- Show action buttons right here if agent is selected and codes are scanned --}}
                    @if(count($scannedCodes) > 0 && $selectedSellerId)
                        <div class="mt-4 pt-4 border-t border-gray-200 dark:border-gray-700">
                            <div class="mb-4 p-3 sm:p-4 bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-lg">
                                <p class="text-xs sm:text-sm font-semibold text-green-800 dark:text-green-200 mb-2">Ready to Assign</p>
                                <p class="text-xs text-green-700 dark:text-green-300">
                                    You are about to assign <strong>{{ $this->summary['available'] }}</strong> available code(s) to
                                    <strong>{{ $sellers->find($selectedSellerId)->name }}</strong>
                                </p>
                                @if($this->summary['assigned'] > 0 || $this->summary['used'] > 0)
                                    <p class="text-xs text-green-700 dark:text-green-300 mt-2">
                                        {{ $this->summary['assigned'] + $this->summary['used'] }} code(s) will be skipped (already assigned/used)
                                    </p>
                                @endif
                            </div>

                            <div class="flex flex-col sm:flex-row gap-3">
                                <button
                                    wire:click="clearAll"
                                    type="button"
                                    class="flex-1 px-4 sm:px-6 py-3 bg-gray-600 hover:bg-gray-700 text-white rounded-lg transition font-medium text-sm sm:text-base">
                                    Clear All
                                </button>
                                <button
                                    wire:click="assignCodes"
                                    type="button"
                                    class="flex-1 px-4 sm:px-6 py-3 bg-green-600 text-white rounded-lg hover:bg-green-700 transition font-medium shadow-lg text-sm sm:text-base">
                                    Assign to Seller
                                </button>
                            </div>
                        </div>
                    @endif
                </div>
            </div>

        </div>

        {{-- RIGHT COLUMN: Scanned Codes List --}}
        <div>
            <div class="bg-white dark:bg-gray-800 shadow-sm sm:rounded-lg sticky top-6">
                <div class="p-6">
                    <div class="flex items-center justify-between mb-4">
                        <h2 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Scanned Codes ({{ count($scannedCodes) }})</h2>
                        @if(count($scannedCodes) > 0)
                            <button
                                wire:click="clearAll"
                                class="text-sm text-red-600 hover:text-red-700 dark:text-red-400 font-medium">
                                Clear All
                            </button>
                        @endif
                    </div>

                    @if(count($scannedCodes) === 0)
                        <div class="text-center py-12">
                            <svg class="w-16 h-16 mx-auto text-gray-400 dark:text-gray-600 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"></path>
                            </svg>
                            <p class="text-gray-500 dark:text-gray-400">No codes scanned yet</p>
                            <p class="text-sm text-gray-400 dark:text-gray-500 mt-2">Start scanning to add codes to this list</p>
                        </div>
                    @else
                        <div class="space-y-2 max-h-[600px] overflow-y-auto">
                            @foreach($scannedCodes as $index => $code)
                                <div class="flex items-center gap-3 p-3 rounded-lg border-2
                                    @if($code['status'] === 'available') border-green-300 bg-green-50 dark:bg-green-900/20 dark:border-green-700
                                    @elseif($code['status'] === 'assigned') border-yellow-300 bg-yellow-50 dark:bg-yellow-900/20 dark:border-yellow-700
                                    @elseif($code['status'] === 'used') border-orange-300 bg-orange-50 dark:bg-orange-900/20 dark:border-orange-700
                                    @else border-red-300 bg-red-50 dark:bg-red-900/20 dark:border-red-700
                                    @endif
                                ">
                                    <div class="flex-shrink-0 w-8 h-8 rounded-full flex items-center justify-center
                                        @if($code['status'] === 'available') bg-green-500
                                        @elseif($code['status'] === 'assigned') bg-yellow-500
                                        @elseif($code['status'] === 'used') bg-orange-500
                                        @else bg-red-500
                                        @endif
                                    ">
                                        <span class="text-white text-sm font-bold">{{ $index + 1 }}</span>
                                    </div>

                                    <div class="flex-1 min-w-0">
                                        <p class="font-mono font-bold text-gray-900 dark:text-gray-100">{{ $code['serial'] }}</p>
                                        <p class="text-xs
                                            @if($code['status'] === 'available') text-green-700 dark:text-green-300
                                            @elseif($code['status'] === 'assigned') text-yellow-700 dark:text-yellow-300
                                            @elseif($code['status'] === 'used') text-orange-700 dark:text-orange-300
                                            @else text-red-700 dark:text-red-300
                                            @endif
                                        ">
                                            @if($code['status'] === 'available')
                                                {{ $code['message'] }}
                                                @if(isset($code['product']))
                                                    <br>Product: {{ $code['product'] }}
                                                @endif
                                            @else
                                                {{ $code['message'] }}
                                            @endif
                                        </p>
                                    </div>

                                    <button
                                        wire:click="removeCode({{ $index }})"
                                        class="flex-shrink-0 p-2 text-gray-400 hover:text-red-600 dark:hover:text-red-400 transition">
                                        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                                            <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
                                        </svg>
                                    </button>
                                </div>
                            @endforeach
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>

{{-- Load html5-qrcode library from CDN --}}
<script src="https://unpkg.com/html5-qrcode@2.3.8/html5-qrcode.min.js"></script>

<script>
function bulkScanner() {
    return {
        scanMode: 'manual',
        manualInputValue: '',
        cameraActive: false,
        html5QrCode: null,

        init() {
            // Auto-focus manual input on load
            this.$nextTick(() => {
                if (this.$refs.manualInput) {
                    this.$refs.manualInput.focus();
                }
            });

            // Listen for Livewire events
            Livewire.on('code-added', (event) => {
                this.playBeep(event.status);
                this.manualInputValue = ''; // Clear input
                if (this.$refs.manualInput && this.scanMode === 'manual') {
                    this.$refs.manualInput.focus();
                }
            });

            Livewire.on('scan-duplicate', () => {
                this.playBeep('duplicate');
                this.manualInputValue = '';
            });

            Livewire.on('scan-limit-reached', () => {
                alert('Maximum limit of 100 codes reached!');
                this.manualInputValue = '';
            });
        },

        switchMode(mode) {
            this.scanMode = mode;

            if (mode === 'camera') {
                this.stopCamera(); // Stop if switching away
            } else {
                this.stopCamera();
                this.$nextTick(() => {
                    if (this.$refs.manualInput) {
                        this.$refs.manualInput.focus();
                    }
                });
            }
        },

        handleManualInput() {
            if (this.manualInputValue.trim()) {
                @this.call('addCode', this.manualInputValue.trim());
            }
        },

        async startCamera() {
            try {
                this.html5QrCode = new Html5Qrcode("qr-reader");

                await this.html5QrCode.start(
                    { facingMode: "environment" }, // Use back camera
                    {
                        fps: 10,
                        qrbox: { width: 250, height: 250 }
                    },
                    (decodedText, decodedResult) => {
                        // QR code detected
                        @this.call('addCode', decodedText);
                    },
                    (errorMessage) => {
                        // Parsing error (can be ignored for continuous scanning)
                    }
                );

                this.cameraActive = true;
            } catch (err) {
                console.error('Camera error:', err);
                alert('Failed to start camera: ' + err);
            }
        },

        async stopCamera() {
            if (this.html5QrCode && this.cameraActive) {
                try {
                    await this.html5QrCode.stop();
                    this.html5QrCode.clear();
                    this.cameraActive = false;
                } catch (err) {
                    console.error('Error stopping camera:', err);
                }
            }
        },

        playBeep(status) {
            // Audio feedback for scans
            const audioContext = new (window.AudioContext || window.webkitAudioContext)();
            const oscillator = audioContext.createOscillator();
            const gainNode = audioContext.createGain();

            oscillator.connect(gainNode);
            gainNode.connect(audioContext.destination);

            if (status === 'available') {
                oscillator.frequency.value = 800; // High beep for success
            } else if (status === 'duplicate') {
                oscillator.frequency.value = 300; // Low beep for duplicate
            } else {
                oscillator.frequency.value = 400; // Medium beep for warning
            }

            oscillator.start(audioContext.currentTime);
            oscillator.stop(audioContext.currentTime + 0.1);
        }
    }
}
</script>