@extends('backend.layout')

@section('backend_css')
    <style>
        .user-item {
            transition: opacity 0.2s ease;
        }

        .user-item[style*="display: none"] {
            opacity: 0.3;
        }

        .form-check-input:checked+.form-check-label {
            font-weight: 600;
            color: #0d6efd;
        }

        .search-item {
            transition: background-color 0.2s ease;
        }

        .search-item:hover {
            background-color: #f8f9fa !important;
        }

        .user-badge {
            transition: all 0.2s ease;
            animation: fadeIn 0.3s ease-in;
        }

        .user-badge:hover {
            transform: translateY(-1px);
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .user-badge:hover .remove-user-btn {
            opacity: 1 !important;
            transform: scale(1.1);
        }

        .remove-user-btn {
            opacity: 0.7;
            transition: all 0.2s ease;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(10px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes fadeOut {
            from {
                opacity: 1;
                transform: translateY(0);
            }

            to {
                opacity: 0;
                transform: translateY(-10px);
            }
        }

        .user-notification {
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
    </style>
@endsection

@section('backend_content')
    <div class="container-fluid">
        {{-- ══ Header ══ --}}
        <div class="d-flex justify-content-between align-items-center mb-4">
            <div>
                <h4 class="fw-bold mb-1">Edit Shop: {{ $shop->name }}</h4>
                <small class="text-muted">Update shop details</small>
            </div>
            <a href="{{ route('admin.shops.index') }}" class="btn btn-light">
                <i class="bx bx-arrow-back"></i> Back
            </a>
        </div>

        {{-- ══ Edit Form ══ --}}
        <div class="card border-0 shadow-sm">
            <div class="card-body">
                <form id="shopUpdateForm" action="{{ route('admin.shops.update', $shop) }}" method="POST"
                    enctype="multipart/form-data">
                    @csrf
                    @method('PUT')

                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label fw-semibold">Shop Name <span class="text-danger">*</span></label>
                            <input type="text" name="name" class="form-control" value="{{ old('name', $shop->name) }}"
                                required>
                        </div>

                        <div class="col-md-6 mb-3">
                            <label class="form-label fw-semibold">Brand Color</label>
                            <input type="color" name="brand_color" class="form-control"
                                value="{{ old('brand_color', $shop->brand_color) }}">
                        </div>
                    </div>

                    <div class="mb-3">
                        <label class="form-label fw-semibold">Logo</label>
                        <input type="file" name="logo" class="form-control"
                            accept="image/jpeg,image/png,image/jpg,image/gif,image/webp" id="logoInput">
                        <small class="text-muted">Upload a new logo image (JPEG, PNG, JPG, GIF, WebP — max 2MB). Leave empty
                            to
                            keep current logo.</small>
                        <div class="mt-2">
                            <div id="logoPreview">
                                @if ($shop->logo)
                                    <img id="previewImg" src="{{ asset('storage/' . $shop->logo) }}"
                                        alt="{{ $shop->name }}" class="img-thumbnail"
                                        style="max-width: 150px; max-height: 150px;">
                                @else
                                    <div class="text-muted">No logo uploaded</div>
                                @endif
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-4 mb-3">
                            <label class="form-label fw-semibold">Phone</label>
                            <input type="text" name="contact[phone]" class="form-control"
                                value="{{ old('contact.phone', $shop->contact['phone'] ?? '') }}">
                        </div>
                        <div class="col-md-4 mb-3">
                            <label class="form-label fw-semibold">Email</label>
                            <input type="email" name="contact[email]" class="form-control"
                                value="{{ old('contact.email', $shop->contact['email'] ?? '') }}">
                        </div>
                        <div class="col-md-4 mb-3">
                            <label class="form-label fw-semibold">Address</label>
                            <input type="text" name="contact[address]" class="form-control"
                                value="{{ old('contact.address', $shop->contact['address'] ?? '') }}">
                        </div>
                    </div>

                    <div class="mb-3">
                        <label class="form-label fw-semibold">Associated Users (Staff)</label>
                        <div class="mb-2">
                            <input type="text" id="userSearch" class="form-control"
                                placeholder="Search users by name or email...">
                            <div id="searchLoading" class="d-none mt-1">
                                <small class="text-muted"><i class="bx bx-loader-alt bx-spin"></i> Searching...</small>
                            </div>
                        </div>
                        <div class="alert alert-info py-2 px-3 mb-2" style="font-size:0.9rem;">
                            Search any existing user and click Add to assign them as staff for this shop.
                            Selected users will automatically receive the <strong>shop-staff</strong> role.
                        </div>
                        <div id="searchResults" class="border rounded p-3"
                            style="max-height: 300px; overflow-y: auto; display: none;">
                            <!-- Search results will appear here -->
                        </div>
                        <div id="selectedUsers" class="mt-3">
                            <div class="d-flex align-items-center justify-content-between mb-2">
                                <h6 class="mb-0 fw-semibold">Selected Staff</h6>
                                <span class="badge bg-primary" id="selectedUsersCount">{{ $shop->users->count() }}
                                    Assigned</span>
                            </div>
                            <div id="selectedUsersList" class="d-flex flex-wrap gap-2 min-vh-0">
                                @foreach ($shop->users as $user)
                                    <span class="badge bg-primary d-flex align-items-center gap-1 user-badge"
                                        data-user-id="{{ $user->id }}">
                                        {{ $user->name }} ({{ $user->email }})
                                        <button type="button" class="btn-close btn-close-white remove-user-btn"
                                            onclick="removeUser({{ $user->id }})" style="font-size: 10px;"
                                            title="Remove {{ $user->name }}"></button>
                                    </span>
                                @endforeach
                                @foreach ($shop->users as $user)
                                    <input type="hidden" name="users[]" value="{{ $user->id }}">
                                @endforeach
                            </div>
                            <div id="noUsersSelected" class="text-muted small mt-2"
                                style="display: {{ $shop->users->count() > 0 ? 'none' : 'block' }};">
                                <i class="bx bx-info-circle"></i> No staff selected yet. Search and add users above.
                            </div>
                        </div>
                        <input type="hidden" name="users_present" value="1">
                        <small class="text-muted">Search and select users who will be associated with this shop as
                            staff</small>
                    </div>

                    <div class="d-flex gap-2">
                        <button type="submit" class="btn btn-primary">
                            <i class="bx bx-save"></i> Update Shop
                        </button>
                        <a href="{{ route('admin.shops.index') }}" class="btn btn-light">Cancel</a>
                </form>
            </div>
        </div>
    </div>

    @php
        $initialUsersForJs = $shop->users
            ->map(function ($user) {
                return [
                    'id' => $user->id,
                    'name' => $user->name,
                    'email' => $user->email,
                ];
            })
            ->values();
    @endphp

    <script>
        // Logo preview functionality
        document.getElementById('logoInput').addEventListener('change', function(e) {
            const file = e.target.files[0];
            const previewImg = document.getElementById('previewImg');

            if (file) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    previewImg.src = e.target.result;
                    previewImg.style.display = 'block';
                };
                reader.readAsDataURL(file);
            }
        });

        // User search functionality
        const initialUsers = @json($initialUsersForJs);
        let existingUsers = Object.fromEntries(initialUsers.map(user => [user.id, user]));
        let selectedUsers = initialUsers.map(user => user.id);
        let searchTimeout;
        let searchCache = {}; // Client-side cache for search results
        let currentFocus = -1; // For keyboard navigation

        const searchInput = document.getElementById('userSearch');
        const searchResults = document.getElementById('searchResults');

        if (searchInput && searchResults) {
            searchInput.addEventListener('input', function() {
                const searchTerm = this.value.trim();

                clearTimeout(searchTimeout);
                currentFocus = -1;

                if (searchTerm.length < 1) {
                    fetchUsers('');
                    return;
                }

                // Check client-side cache first
                if (searchCache[searchTerm]) {
                    displaySearchResults(searchCache[searchTerm]);
                    return;
                }

                searchTimeout = setTimeout(() => {
                    fetchUsers(searchTerm);
                }, 300);
            });

            searchInput.addEventListener('focus', function() {
                const searchTerm = this.value.trim();
                fetchUsers(searchTerm);
            });

            // Keyboard navigation
            searchInput.addEventListener('keydown', function(e) {
                const items = searchResults.querySelectorAll('.search-item');
                if (!items.length) return;

                if (e.key === 'ArrowDown') {
                    e.preventDefault();
                    currentFocus = currentFocus < items.length - 1 ? currentFocus + 1 : 0;
                    updateFocus(items);
                } else if (e.key === 'ArrowUp') {
                    e.preventDefault();
                    currentFocus = currentFocus > 0 ? currentFocus - 1 : items.length - 1;
                    updateFocus(items);
                } else if (e.key === 'Enter') {
                    e.preventDefault();
                    if (currentFocus >= 0 && items[currentFocus]) {
                        items[currentFocus].click();
                    }
                } else if (e.key === 'Escape') {
                    searchResults.style.display = 'none';
                    currentFocus = -1;
                }
            });
        }

        function updateFocus(items) {
            items.forEach((item, index) => {
                if (index === currentFocus) {
                    item.classList.add('bg-light');
                } else {
                    item.classList.remove('bg-light');
                }
            });
        }

        function fetchUsers(query) {
            console.log('fetchUsers called with query:', query);
            const searchResults = document.getElementById('searchResults');
            const searchLoading = document.getElementById('searchLoading');

            // Show loading indicator
            searchLoading.classList.remove('d-none');

            const url =
                `/admin/users/search?q=${encodeURIComponent(query)}&selected=${selectedUsers.join(',')}&shop_id={{ $shop->id }}`;

            fetch(url, {
                    headers: {
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                        'Accept': 'application/json'
                    }
                })
                .then(response => response.json())
                .then(users => {
                    // Hide loading indicator
                    searchLoading.classList.add('d-none');
                    // Cache the results client-side
                    searchCache[query] = users;
                    displaySearchResults(users);
                })
                .catch(error => {
                    console.error('Error fetching users:', error);
                    searchLoading.classList.add('d-none');
                });
        }

        function displaySearchResults(users) {
            const searchResults = document.getElementById('searchResults');
            searchResults.innerHTML = '';

            if (users.length === 0) {
                searchResults.innerHTML = '<p class="text-muted mb-0">No users found.</p>';
                searchResults.style.display = 'block';
                return;
            }

            users.forEach(user => {
                const userDiv = document.createElement('div');
                userDiv.className =
                    'd-flex align-items-center justify-content-between p-2 border-bottom search-item';
                userDiv.style.cursor = 'pointer';
                userDiv.onclick = () => selectUser(user.id, user.name, user.email);
                userDiv.innerHTML = `
                    <div class="flex-grow-1">
                        <strong>${user.name}</strong><br>
                        <small class="text-muted">${user.email}</small>
                    </div>
                    <button type="button" class="btn btn-sm btn-success" onclick="event.stopPropagation(); selectUser(${user.id}, '${user.name}', '${user.email}')" title="Add ${user.name} as staff">
                        <i class="bx bx-plus"></i> Add
                    </button>
                `;
                searchResults.appendChild(userDiv);
            });

            searchResults.style.display = 'block';
        }

        function selectUser(id, name, email) {
            if (selectedUsers.includes(id)) {
                // Show already selected message
                showNotification(`${name} is already selected`, 'warning');
                return;
            }

            selectedUsers.push(id);
            existingUsers[id] = {
                id,
                name,
                email
            };
            updateSelectedUsersDisplay();
            updateHiddenInputs();

            // Show success message
            showNotification(`${name} has been added as staff`, 'success');

            // Hide search results and clear input
            document.getElementById('searchResults').style.display = 'none';
            document.getElementById('userSearch').value = '';

            // Clear cache to refresh search results
            searchCache = {};
        }

        function removeUser(id) {
            const userBadge = document.querySelector(`[data-user-id="${id}"]`);
            const user = existingUsers[id];

            if (userBadge) {
                // Add fade-out animation
                userBadge.style.animation = 'fadeOut 0.3s ease-out forwards';

                // Remove the badge after animation completes
                setTimeout(() => {
                    selectedUsers = selectedUsers.filter(userId => userId !== id);
                    updateSelectedUsersDisplay();
                    updateHiddenInputs();

                    if (user) {
                        showNotification(`${user.name} has been removed from staff`, 'info');
                    }
                }, 300);
            } else {
                // Fallback if badge not found
                selectedUsers = selectedUsers.filter(userId => userId !== id);
                updateSelectedUsersDisplay();
                updateHiddenInputs();

                if (user) {
                    showNotification(`${user.name} has been removed from staff`, 'info');
                }
            }
        }

        function updateSelectedUsersDisplay() {
            const selectedUsersList = document.getElementById('selectedUsersList');
            const selectedUsersCount = document.getElementById('selectedUsersCount');
            const noUsersSelected = document.getElementById('noUsersSelected');
            if (selectedUsersList) {
                selectedUsersList.innerHTML = '';

                if (selectedUsers.length === 0) {
                    if (noUsersSelected) noUsersSelected.style.display = 'block';
                    if (selectedUsersCount) {
                        selectedUsersCount.textContent = '0 Assigned';
                        selectedUsersCount.className = 'badge bg-secondary';
                    }
                    return;
                }

                if (noUsersSelected) noUsersSelected.style.display = 'none';

                selectedUsers.forEach(id => {
                    const user = existingUsers[id];
                    if (user) {
                        const userBadge = document.createElement('span');
                        userBadge.className = 'badge bg-primary d-flex align-items-center gap-1 user-badge';
                        userBadge.setAttribute('data-user-id', id);
                        userBadge.innerHTML = `
                            ${user.name} (${user.email})
                            <button type="button" class="btn-close btn-close-white remove-user-btn" onclick="removeUser(${id})" style="font-size: 10px;" title="Remove ${user.name}"></button>
                        `;
                        selectedUsersList.appendChild(userBadge);
                    }
                });

                if (selectedUsersCount) {
                    selectedUsersCount.textContent = `${selectedUsers.length} Assigned`;
                    selectedUsersCount.className = 'badge bg-success';
                }
            }
        }

        function updateHiddenInputs() {
            // Remove existing hidden inputs
            document.querySelectorAll('input[name="users[]"]').forEach(input => input.remove());

            // Add new hidden inputs to the correct form (not the sidebar logout form)
            const form = document.getElementById('shopUpdateForm');
            selectedUsers.forEach(id => {
                const hiddenInput = document.createElement('input');
                hiddenInput.type = 'hidden';
                hiddenInput.name = 'users[]';
                hiddenInput.value = id;
                form.appendChild(hiddenInput);
            });
        }

        function showNotification(message, type = 'info') {
            // Remove existing notifications
            const existingNotifications = document.querySelectorAll('.user-notification');
            existingNotifications.forEach(notification => notification.remove());

            // Create notification element
            const notification = document.createElement('div');
            notification.className =
                `alert alert-${type === 'success' ? 'success' : type === 'warning' ? 'warning' : 'info'} alert-dismissible fade show user-notification position-fixed`;
            notification.style.cssText = 'top: 20px; right: 20px; z-index: 9999; min-width: 300px;';
            notification.innerHTML = `
                ${message}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            `;

            // Add to page
            document.body.appendChild(notification);

            // Auto remove after 3 seconds
            setTimeout(() => {
                if (notification.parentNode) {
                    notification.remove();
                }
            }, 3000);
        }

        document.addEventListener('DOMContentLoaded', function() {
            if (document.getElementById('selectedUsersList')) {
                updateSelectedUsersDisplay();
                updateHiddenInputs();
            }
        });
    </script>
@endsection