{#
    Login Setup Modal

    Displays when enabling login access for a team member.
    Offers two methods: email invitation or admin-created credentials.

    Hidden Inputs:
    - login-team-member-id: The team member's ID
    - login-team-member-name: For display purposes

    Method Selection:
    - invite: Send email invitation for self-registration
    - admin: Admin creates username/password directly

    Form Fields (admin method):
    - login-username: Username for the new account
    - login-password: Password with show/hide and generate
    - also-set-pin: Checkbox to enable PIN field
    - login-pin: 4-6 digit clock PIN

    Events:
    - Form submission handled by parent page JavaScript
#}
<div class="modal fade" id="login-setup-modal" tabindex="-1" role="dialog" data-bs-backdrop="static" aria-labelledby="login-setup-modal-title" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            {# Modal Header with gradient #}
            <div class="modal-header" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border-bottom: none;">
                <h4 class="modal-title" id="login-setup-modal-title">
                    <i class="fa fa-user-plus"></i> Set Up BuyerKiosk Access
                </h4>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>

            <div class="modal-body">
                {# Hidden inputs for team member data #}
                <input type="hidden" id="login-team-member-id" value="">
                <input type="hidden" id="login-team-member-name" value="">

                {# Error Alert #}
                <div class="alert alert-danger d-none" id="login-error-alert" role="alert">
                    <i class="fa fa-exclamation-triangle"></i>
                    <span id="login-error-message">An error occurred.</span>
                </div>

                {# Intro text with member name #}
                <p class="mb-3">
                    Create login credentials for <strong id="login-member-display-name">this team member</strong>.
                </p>

                {# Method Selection Cards #}
                <div class="login-method-options">
                    {# Option 1: Email Invitation (hidden - untested) #}
                    <div class="login-method-option card mb-3 d-none" data-method="invite">
                        <div class="card-body">
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="loginMethod" id="method-invite" value="invite" disabled>
                                <label class="form-check-label" for="method-invite">
                                    <strong>Send Email Invitation</strong>
                                </label>
                            </div>
                            <p class="text-muted small mb-0 ms-4">
                                They'll receive an email to create their own password.
                            </p>
                            {# Email display when this method is selected #}
                            <div class="invite-details mt-3 ms-4" style="display: none;">
                                <label class="form-label" for="invite-email">Email</label>
                                <input type="email" class="form-control" id="invite-email" readonly>
                                <div class="form-text text-warning" id="invite-no-email-warning" style="display: none;">
                                    <i class="fa fa-exclamation-circle"></i>
                                    This team member has no email address on file. Please add one first.
                                </div>
                            </div>
                        </div>
                    </div>

                    {# Option 2: Admin Create Credentials #}
                    <div class="login-method-option card mb-3" data-method="admin">
                        <div class="card-body">
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="loginMethod" id="method-admin" value="admin" checked>
                                <label class="form-check-label" for="method-admin">
                                    <strong>Create Credentials Now</strong>
                                </label>
                            </div>
                            <p class="text-muted small mb-0 ms-4">
                                You'll set their username and password.
                            </p>

                            {# Admin create form fields #}
                            <div class="admin-details mt-3 ms-4" id="admin-create-fields">
                                {# Username Field #}
                                <div class="mb-3">
                                    <label class="form-label" for="login-username">
                                        Username <span class="text-danger">*</span>
                                    </label>
                                    <input type="text" class="form-control" id="login-username" name="username" required autocomplete="off" placeholder="e.g., jsmith">
                                    <div class="invalid-feedback" id="username-feedback">
                                        Please enter a valid username.
                                    </div>
                                </div>

                                {# Password Field with Toggle and Generate #}
                                <div class="mb-3">
                                    <label class="form-label" for="login-password">
                                        Password <span class="text-danger">*</span>
                                    </label>
                                    <div class="input-group">
                                        <input type="password" class="form-control" id="login-password" name="password" minlength="8" required autocomplete="new-password" placeholder="Enter password">
                                        <button class="btn btn-outline-secondary" type="button" id="toggle-password-visibility" title="Show/Hide Password">
                                            <i class="fa fa-eye" id="password-visibility-icon"></i>
                                        </button>
                                        <button class="btn btn-outline-secondary" type="button" id="generate-password" title="Generate Random Password">
                                            <i class="fa fa-random"></i>
                                        </button>
                                    </div>
                                    <div class="form-text">Min 8 characters</div>
                                    <div class="invalid-feedback" id="password-feedback">
                                        Password must be at least 8 characters.
                                    </div>
                                </div>

                                {# Optional PIN Section #}
                                <div class="mb-3">
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" id="also-set-pin">
                                        <label class="form-check-label" for="also-set-pin">
                                            Also set clock PIN
                                        </label>
                                    </div>
                                </div>

                                {# PIN Field (hidden by default) #}
                                <div class="pin-field mb-3" id="pin-field-container" style="display: none;">
                                    <label class="form-label" for="login-pin">Clock PIN</label>
                                    <input type="text" class="form-control" id="login-pin" name="pin" maxlength="6" pattern="[0-9]*" inputmode="numeric" placeholder="4-6 digits" style="max-width: 120px; text-align: center; letter-spacing: 3px;">
                                    <div class="form-text">4-6 digits</div>
                                    <div class="invalid-feedback" id="pin-feedback">
                                        PIN must be 4-6 digits.
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" id="enable-login-btn">
                    <span class="spinner-border spinner-border-sm d-none" id="login-spinner" role="status" aria-hidden="true"></span>
                    <span id="login-btn-text">Enable Login Access</span>
                </button>
            </div>
        </div>
    </div>
</div>

<style>
/* Login Method Option Cards */
.login-method-option {
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.login-method-option:hover {
    border-color: #667eea;
}

.login-method-option.selected {
    border-color: #667eea;
    box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2);
}

.login-method-option .form-check-input:checked + .form-check-label {
    color: #667eea;
}

/* PIN field styling */
#login-pin {
    font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
    font-size: 1.25rem;
}

/* Disabled state for invite option when no email */
.login-method-option.disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.login-method-option.disabled .form-check-input {
    pointer-events: none;
}
</style>

<script>
/**
 * Login Setup Modal Controller
 * Handles method selection toggling and form field visibility
 */
(function() {
    'use strict';

    function initLoginModal() {
        var modal = document.getElementById('login-setup-modal');
        if (!modal) return;

        var methodInvite = document.getElementById('method-invite');
        var methodAdmin = document.getElementById('method-admin');
        var inviteDetails = modal.querySelector('.invite-details');
        var adminDetails = document.getElementById('admin-create-fields');
        var alsoSetPinCheckbox = document.getElementById('also-set-pin');
        var pinFieldContainer = document.getElementById('pin-field-container');
        var togglePasswordBtn = document.getElementById('toggle-password-visibility');
        var passwordInput = document.getElementById('login-password');
        var passwordVisibilityIcon = document.getElementById('password-visibility-icon');
        var generatePasswordBtn = document.getElementById('generate-password');
        var methodOptions = modal.querySelectorAll('.login-method-option');

        /**
         * Toggle visibility of method-specific fields
         */
        function updateMethodVisibility() {
            var isInvite = methodInvite && methodInvite.checked;

            if (inviteDetails) {
                inviteDetails.style.display = isInvite ? '' : 'none';
            }
            if (adminDetails) {
                adminDetails.style.display = isInvite ? 'none' : '';
            }

            // Update card selected states
            methodOptions.forEach(function(option) {
                var method = option.getAttribute('data-method');
                if ((method === 'invite' && isInvite) || (method === 'admin' && !isInvite)) {
                    option.classList.add('selected');
                } else {
                    option.classList.remove('selected');
                }
            });
        }

        /**
         * Toggle PIN field visibility
         */
        function updatePinVisibility() {
            if (pinFieldContainer && alsoSetPinCheckbox) {
                pinFieldContainer.style.display = alsoSetPinCheckbox.checked ? '' : 'none';
            }
        }

        /**
         * Toggle password visibility
         */
        function togglePasswordVisibility() {
            if (!passwordInput || !passwordVisibilityIcon) return;

            if (passwordInput.type === 'password') {
                passwordInput.type = 'text';
                passwordVisibilityIcon.classList.remove('fa-eye');
                passwordVisibilityIcon.classList.add('fa-eye-slash');
            } else {
                passwordInput.type = 'password';
                passwordVisibilityIcon.classList.remove('fa-eye-slash');
                passwordVisibilityIcon.classList.add('fa-eye');
            }
        }

        /**
         * Generate a random password
         */
        function generatePassword() {
            var length = 12;
            var charset = 'abcdefghijkmnpqrstuvwxyzABCDEFGHJKLMNPQRSTUVWXYZ23456789!@#$%';
            var password = '';

            // Ensure at least one of each type
            var lowercase = 'abcdefghijkmnpqrstuvwxyz';
            var uppercase = 'ABCDEFGHJKLMNPQRSTUVWXYZ';
            var numbers = '23456789';
            var special = '!@#$%';

            password += lowercase.charAt(Math.floor(Math.random() * lowercase.length));
            password += uppercase.charAt(Math.floor(Math.random() * uppercase.length));
            password += numbers.charAt(Math.floor(Math.random() * numbers.length));
            password += special.charAt(Math.floor(Math.random() * special.length));

            for (var i = password.length; i < length; i++) {
                password += charset.charAt(Math.floor(Math.random() * charset.length));
            }

            // Shuffle the password
            password = password.split('').sort(function() {
                return 0.5 - Math.random();
            }).join('');

            if (passwordInput) {
                passwordInput.value = password;
                passwordInput.type = 'text';
                if (passwordVisibilityIcon) {
                    passwordVisibilityIcon.classList.remove('fa-eye');
                    passwordVisibilityIcon.classList.add('fa-eye-slash');
                }
            }
        }

        // Bind event listeners
        if (methodInvite) {
            methodInvite.addEventListener('change', updateMethodVisibility);
        }
        if (methodAdmin) {
            methodAdmin.addEventListener('change', updateMethodVisibility);
        }
        if (alsoSetPinCheckbox) {
            alsoSetPinCheckbox.addEventListener('change', updatePinVisibility);
        }
        if (togglePasswordBtn) {
            togglePasswordBtn.addEventListener('click', togglePasswordVisibility);
        }
        if (generatePasswordBtn) {
            generatePasswordBtn.addEventListener('click', generatePassword);
        }

        // Allow clicking on card to select method
        methodOptions.forEach(function(option) {
            option.addEventListener('click', function(e) {
                if (e.target.closest('.form-control') || e.target.closest('.form-check-input')) {
                    return; // Don't interfere with input focus
                }

                var method = option.getAttribute('data-method');
                if (method === 'invite' && methodInvite && !option.classList.contains('disabled')) {
                    methodInvite.checked = true;
                    methodInvite.dispatchEvent(new Event('change'));
                } else if (method === 'admin' && methodAdmin) {
                    methodAdmin.checked = true;
                    methodAdmin.dispatchEvent(new Event('change'));
                }
            });
        });

        // Initialize visibility on modal show
        modal.addEventListener('shown.bs.modal', function() {
            updateMethodVisibility();
            updatePinVisibility();

            // Reset form state
            var errorAlert = document.getElementById('login-error-alert');
            if (errorAlert) {
                errorAlert.classList.add('d-none');
            }

            // Focus first appropriate field
            if (methodAdmin && methodAdmin.checked) {
                var usernameInput = document.getElementById('login-username');
                if (usernameInput) {
                    usernameInput.focus();
                }
            }
        });

        // Reset on modal hide
        modal.addEventListener('hidden.bs.modal', function() {
            // Reset form fields
            var usernameInput = document.getElementById('login-username');
            var pinInput = document.getElementById('login-pin');

            if (usernameInput) usernameInput.value = '';
            if (passwordInput) {
                passwordInput.value = '';
                passwordInput.type = 'password';
            }
            if (pinInput) pinInput.value = '';
            if (alsoSetPinCheckbox) alsoSetPinCheckbox.checked = false;

            // Reset visibility icon
            if (passwordVisibilityIcon) {
                passwordVisibilityIcon.classList.remove('fa-eye-slash');
                passwordVisibilityIcon.classList.add('fa-eye');
            }

            // Reset to admin method
            if (methodAdmin) {
                methodAdmin.checked = true;
            }

            updateMethodVisibility();
            updatePinVisibility();

            // Clear validation states
            var invalidInputs = modal.querySelectorAll('.is-invalid');
            invalidInputs.forEach(function(input) {
                input.classList.remove('is-invalid');
            });
        });

        // Initial visibility setup
        updateMethodVisibility();
        updatePinVisibility();
    }

    // Initialize when DOM is ready
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', initLoginModal);
    } else {
        initLoginModal();
    }
})();
</script>