{% extends "layouts/base.html" %}
{% load i18n %}{% get_current_language as LANG %}

{% block title %}{% if edit_user %}{% trans "Edit User" %}{% else %}{% trans "Create User" %}{% endif %} - PX360{% endblock %}

{% block extra_css %}
<style>
    .page-header-gradient {
        background: linear-gradient(135deg, #005696 0%, #0069a8 50%, #007bbd 100%);
        color: white;
        padding: 1.5rem 2rem;
        border-radius: 1rem;
        margin-bottom: 1.5rem;
        box-shadow: 0 10px 15px -3px rgba(0, 86, 150, 0.2);
    }

    .form-section {
        background: #fff;
        border: 2px solid #e2e8f0;
        border-radius: 1rem;
        padding: 1.5rem;
        margin-bottom: 1.5rem;
        transition: all 0.3s ease;
    }
    .form-section:hover {
        border-color: #005696;
        box-shadow: 0 4px 12px rgba(0, 86, 150, 0.1);
    }

    .role-item {
        display: flex;
        align-items: flex-start;
        gap: 0.75rem;
        padding: 0.75rem 1rem;
        border: 2px solid #e2e8f0;
        border-radius: 0.75rem;
        transition: all 0.2s ease;
        cursor: pointer;
    }
    .role-item:hover {
        border-color: #005696;
        background: #f8fafc;
    }
    .role-item:has(input:checked) {
        border-color: #005696;
        background: #eff6ff;
    }
    .role-item input[type="checkbox"] {
        margin-top: 0.25rem;
        width: 1rem;
        height: 1rem;
        accent-color: #005696;
    }

    .staff-search-container {
        position: relative;
    }
    .staff-search-results {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: white;
        border: 2px solid #e2e8f0;
        border-radius: 0.75rem;
        max-height: 240px;
        overflow-y: auto;
        z-index: 50;
        display: none;
        box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
    }
    .staff-search-results.active {
        display: block;
    }
    .staff-search-item {
        padding: 0.75rem 1rem;
        cursor: pointer;
        border-bottom: 1px solid #f1f5f9;
        transition: background 0.15s;
    }
    .staff-search-item:hover {
        background: #f8fafc;
    }
    .staff-search-item:last-child {
        border-bottom: none;
    }
    .staff-chip {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.5rem 1rem;
        background: #eff6ff;
        border: 2px solid #005696;
        border-radius: 0.75rem;
        font-size: 0.875rem;
        font-weight: 600;
        color: #005696;
    }
    .password-wrapper {
        position: relative;
    }
    .password-wrapper input {
        padding-right: 100px;
    }
    .password-actions {
        position: absolute;
        right: 8px;
        top: 50%;
        transform: translateY(-50%);
        display: flex;
        gap: 4px;
    }
</style>
{% endblock %}

{% block content %}
<div class="p-6">
    <!-- Page Header -->
    <div class="page-header-gradient">
        <div class="flex items-center gap-2 mb-3">
            <a href="{% url 'config:hospital_users_list' %}"
               class="inline-flex items-center gap-2 px-4 py-2 bg-white/20 backdrop-blur-sm rounded-xl text-white hover:bg-white/30 transition text-sm font-semibold">
                <i data-lucide="arrow-left" class="w-4 h-4"></i> {% trans "Back" %}
            </a>
        </div>
        <h1 class="text-2xl font-bold">
            {% if edit_user %}{% trans "Edit User" %}{% else %}{% trans "Create New User" %}{% endif %}
        </h1>
        <p class="text-white/80 mt-1">
            {% if edit_user %}{% trans "Update user account information and roles" %}{% else %}{% trans "Create a new user account with roles and permissions" %}{% endif %}
        </p>
    </div>

    {% if form.errors %}
    <div class="mb-6 p-4 bg-red-50 border border-red-200 rounded-xl">
        <div class="flex items-center gap-2 mb-2">
            <i data-lucide="alert-circle" class="w-5 h-5 text-red-600"></i>
            <h6 class="font-bold text-red-700">{% trans "Please correct the errors below" %}</h6>
        </div>
        {% for field, errors in form.errors.items %}
        <p class="text-sm text-red-600 ml-7">{{ field }}: {{ errors.0 }}</p>
        {% endfor %}
    </div>
    {% endif %}

    <!-- Main Content Grid -->
    <div class="grid grid-cols-12 gap-8">
        <!-- Left Column (Form) -->
        <div class="col-span-8">
            <form method="post" id="userForm" class="space-y-6">
                {% csrf_token %}
                <input type="hidden" name="staff_id" id="staffIdInput" value="">

                {% if not edit_user %}
                <!-- Link to Staff -->
                <section class="form-section">
                    <h3 class="font-bold text-navy mb-6 text-lg flex items-center gap-2">
                        <i data-lucide="link" class="w-5 h-5 text-blue"></i>
                        {% trans "Link to Staff" %}
                    </h3>
                    <p class="text-sm text-slate mb-4">{% trans "Optionally link this user account to an existing staff member. Their information will be auto-filled." %}</p>
                    
                    <div id="staffSearchContainer" class="staff-search-container">
                        <div id="staffSearchInput-wrap">
                            <label class="block text-sm font-semibold text-navy mb-2">{% trans "Search Staff" %}</label>
                            <input type="text" id="staffSearchInput"
                                   class="w-full px-4 py-3 border border-slate-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-navy focus:border-transparent transition bg-white text-sm"
                                   placeholder="{% trans 'Type name, email, or employee ID...' %}" autocomplete="off">
                        </div>
                        <div id="staffSearchResults" class="staff-search-results"></div>
                    </div>

                    <div id="selectedStaffChip" class="hidden mt-3">
                        <div class="staff-chip">
                            <i data-lucide="user" class="w-4 h-4"></i>
                            <span id="selectedStaffName"></span>
                            <button type="button" onclick="clearStaffSelection()" class="ml-1 hover:bg-navy/10 rounded-full p-0.5">
                                <i data-lucide="x" class="w-3 h-3"></i>
                            </button>
                        </div>
                    </div>
                </section>
                {% endif %}

                <!-- Personal Information -->
                <section class="form-section">
                    <h3 class="font-bold text-navy mb-6 text-lg flex items-center gap-2">
                        <i data-lucide="user" class="w-5 h-5 text-blue"></i>
                        {% trans "Personal Information" %}
                    </h3>
                    <div class="grid grid-cols-2 gap-6">
                        <div>
                            <label for="{{ form.first_name.id_for_label }}" class="block text-sm font-semibold text-navy mb-2">
                                {% trans "First Name" %} <span class="text-red-500">*</span>
                            </label>
                            {{ form.first_name }}
                            {% if form.first_name.errors %}
                            <div class="text-red-500 text-sm mt-1 flex items-center gap-1">
                                <i data-lucide="alert-circle" class="w-4 h-4"></i>
                                {{ form.first_name.errors.0 }}
                            </div>
                            {% endif %}
                        </div>
                        <div>
                            <label for="{{ form.last_name.id_for_label }}" class="block text-sm font-semibold text-navy mb-2">
                                {% trans "Last Name" %} <span class="text-red-500">*</span>
                            </label>
                            {{ form.last_name }}
                            {% if form.last_name.errors %}
                            <div class="text-red-500 text-sm mt-1 flex items-center gap-1">
                                <i data-lucide="alert-circle" class="w-4 h-4"></i>
                                {{ form.last_name.errors.0 }}
                            </div>
                            {% endif %}
                        </div>
                        {% if not edit_user %}
                        <div>
                            <label for="{{ form.email.id_for_label }}" class="block text-sm font-semibold text-navy mb-2">
                                {% trans "Email" %} <span class="text-red-500">*</span>
                            </label>
                            {{ form.email }}
                            {% if form.email.errors %}
                            <div class="text-red-500 text-sm mt-1 flex items-center gap-1">
                                <i data-lucide="alert-circle" class="w-4 h-4"></i>
                                {{ form.email.errors.0 }}
                            </div>
                            {% endif %}
                        </div>
                        {% endif %}
                        <div>
                            <label for="{{ form.phone.id_for_label }}" class="block text-sm font-semibold text-navy mb-2">
                                {% trans "Phone" %}
                            </label>
                            {{ form.phone }}
                        </div>
                        <div>
                            <label for="{{ form.employee_id.id_for_label }}" class="block text-sm font-semibold text-navy mb-2">
                                {% trans "Employee ID" %}
                            </label>
                            {{ form.employee_id }}
                        </div>
                    </div>
                </section>

                <!-- Organization -->
                <section class="form-section">
                    <h3 class="font-bold text-navy mb-6 text-lg flex items-center gap-2">
                        <i data-lucide="building-2" class="w-5 h-5 text-blue"></i>
                        {% trans "Organization" %}
                    </h3>
                    <div class="grid grid-cols-2 gap-6">
                        <div>
                            <label for="{{ form.hospital.id_for_label }}" class="block text-sm font-semibold text-navy mb-2">
                                {% trans "Hospital" %}
                            </label>
                            {{ form.hospital }}
                            {% if form.hospital.errors %}
                            <div class="text-red-500 text-sm mt-1 flex items-center gap-1">
                                <i data-lucide="alert-circle" class="w-4 h-4"></i>
                                {{ form.hospital.errors.0 }}
                            </div>
                            {% endif %}
                        </div>
                        <div>
                            <label for="{{ form.department.id_for_label }}" class="block text-sm font-semibold text-navy mb-2">
                                {% trans "Department" %}
                            </label>
                            <select name="{{ form.department.name }}" id="{{ form.department.id_for_label }}" data-tomselect
                                    class="w-full px-4 py-3 border border-slate-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-navy focus:border-transparent transition bg-white text-sm">
                                <option value="">{% trans "Select Department" %}</option>
                                {% for choice in form.department.field.choices %}
                                {% if choice.0 %}
                                <option value="{{ choice.0 }}" {% if form.department.value|stringformat:"s" == choice.0|stringformat:"s" %}selected{% endif %}>{{ choice.1 }}</option>
                                {% endif %}
                                {% endfor %}
                            </select>
                            {% if form.department.errors %}
                            <div class="text-red-500 text-sm mt-1 flex items-center gap-1">
                                <i data-lucide="alert-circle" class="w-4 h-4"></i>
                                {{ form.department.errors.0 }}
                            </div>
                            {% endif %}
                        </div>
                    </div>
                </section>

                <!-- Roles & Permissions -->
                <section class="form-section">
                    <h3 class="font-bold text-navy mb-6 text-lg flex items-center gap-2">
                        <i data-lucide="shield" class="w-5 h-5 text-blue"></i>
                        {% trans "Roles & Permissions" %}
                    </h3>
                    <p class="text-sm text-slate mb-4">{% trans "Select the roles this user should have. Roles determine what actions the user can perform in the system." %}</p>
                    <div class="grid grid-cols-1 gap-3">
                        {% for group in form.groups.field.queryset %}
                        <label class="role-item">
                            <input type="checkbox" name="groups" value="{{ group.pk }}"
                                   {% if group in form.groups.initial %}checked{% endif %}>
                            <div>
                                <span class="text-sm font-semibold text-navy block">{{ group.name }}</span>
                            </div>
                        </label>
                        {% empty %}
                        <p class="text-sm text-slate">{% trans "No roles available. Contact your administrator to set up roles." %}</p>
                        {% endfor %}
                    </div>
                    {% if form.groups.errors %}
                    <div class="text-red-500 text-sm mt-2 flex items-center gap-1">
                        <i data-lucide="alert-circle" class="w-4 h-4"></i>
                        {{ form.groups.errors.0 }}
                    </div>
                    {% endif %}
                </section>

                {% if not edit_user %}
                <!-- Password -->
                <section class="form-section">
                    <h3 class="font-bold text-navy mb-6 text-lg flex items-center gap-2">
                        <i data-lucide="lock" class="w-5 h-5 text-blue"></i>
                        {% trans "Password" %}
                    </h3>
                    <div class="grid grid-cols-2 gap-6">
                        <div>
                            <label for="{{ form.password.id_for_label }}" class="block text-sm font-semibold text-navy mb-2">
                                {% trans "Password" %}
                            </label>
                            <div class="password-wrapper">
                                {{ form.password }}
                                <div class="password-actions">
                                    <button type="button" onclick="generatePassword()" class="px-3 py-1.5 bg-navy text-white rounded-lg text-xs font-bold hover:bg-blue transition" title="{% trans 'Generate Random Password' %}">
                                        <i data-lucide="refresh-cw" class="w-3 h-3 inline"></i> {% trans "Generate" %}
                                    </button>
                                    <button type="button" onclick="copyPassword()" class="px-3 py-1.5 bg-slate-100 text-slate rounded-lg text-xs font-bold hover:bg-slate-200 transition" title="{% trans 'Copy Password' %}">
                                        <i data-lucide="copy" class="w-3 h-3 inline"></i>
                                    </button>
                                </div>
                            </div>
                            {% if form.password.errors %}
                            <div class="text-red-500 text-sm mt-1 flex items-center gap-1">
                                <i data-lucide="alert-circle" class="w-4 h-4"></i>
                                {{ form.password.errors.0 }}
                            </div>
                            {% endif %}
                        </div>
                        <div>
                            <label for="{{ form.password_confirm.id_for_label }}" class="block text-sm font-semibold text-navy mb-2">
                                {% trans "Confirm Password" %}
                            </label>
                            {{ form.password_confirm }}
                            {% if form.password_confirm.errors %}
                            <div class="text-red-500 text-sm mt-1 flex items-center gap-1">
                                <i data-lucide="alert-circle" class="w-4 h-4"></i>
                                {{ form.password_confirm.errors.0 }}
                            </div>
                            {% endif %}
                        </div>
                    </div>
                    <div class="mt-4 p-3 bg-blue-50 border border-blue-100 rounded-lg">
                        <p class="text-blue-700 text-xs flex items-start gap-2">
                            <i data-lucide="info" class="w-4 h-4 flex-shrink-0 mt-0.5"></i>
                            {% trans "Leave password blank and click Generate for a random password. The credentials will be sent to the user's email." %}
                        </p>
                    </div>
                </section>
                {% endif %}

                <!-- Status -->
                <section class="form-section">
                    <h3 class="font-bold text-navy mb-6 text-lg flex items-center gap-2">
                        <i data-lucide="toggle-left" class="w-5 h-5 text-blue"></i>
                        {% trans "Status" %}
                    </h3>
                    <div class="flex items-center gap-3 p-4 bg-light/30 rounded-xl">
                        {{ form.is_active }}
                        <div>
                            <label for="{{ form.is_active.id_for_label }}" class="text-sm font-semibold text-navy block">
                                {% trans "Active" %}
                            </label>
                            <p class="text-xs text-slate">{% trans "Inactive users cannot log in to the system" %}</p>
                        </div>
                    </div>
                </section>

                <!-- Actions -->
                <div class="flex items-center gap-4 pt-4">
                    <button type="submit" class="inline-flex items-center gap-2 px-6 py-3 bg-navy text-white rounded-xl font-semibold hover:bg-blue transition">
                        <i data-lucide="save" class="w-5 h-5"></i>
                        {% trans "Save" %}
                    </button>
                    <a href="{% url 'config:hospital_users_list' %}"
                       class="inline-flex items-center gap-2 px-6 py-3 bg-white text-slate border-2 border-slate-200 rounded-xl font-semibold hover:bg-slate-50 transition">
                        <i data-lucide="x" class="w-5 h-5"></i>
                        {% trans "Cancel" %}
                    </a>
                </div>
            </form>
        </div>

        <!-- Right Column (Sidebar) -->
        <div class="col-span-4 space-y-6">
            <!-- Tips -->
            <section class="form-section">
                <h3 class="font-bold text-navy mb-4 text-sm flex items-center gap-2">
                    <i data-lucide="lightbulb" class="w-4 h-4 text-blue"></i>
                    {% trans "Tips" %}
                </h3>
                <ul class="space-y-3 text-sm text-slate">
                    <li class="flex items-start gap-2">
                        <i data-lucide="check" class="w-4 h-4 text-green-600 flex-shrink-0 mt-0.5"></i>
                        <span>{% trans "All fields marked with * are required" %}</span>
                    </li>
                    <li class="flex items-start gap-2">
                        <i data-lucide="check" class="w-4 h-4 text-green-600 flex-shrink-0 mt-0.5"></i>
                        <span>{% trans "Email must be unique and is used for login" %}</span>
                    </li>
                    <li class="flex items-start gap-2">
                        <i data-lucide="check" class="w-4 h-4 text-green-600 flex-shrink-0 mt-0.5"></i>
                        <span>{% trans "Assign at least one role for proper access" %}</span>
                    </li>
                    <li class="flex items-start gap-2">
                        <i data-lucide="check" class="w-4 h-4 text-green-600 flex-shrink-0 mt-0.5"></i>
                        <span>{% trans "A password reset email will be sent automatically" %}</span>
                    </li>
                </ul>
            </section>

            {% if edit_user %}
            <!-- User Info -->
            <section class="form-section">
                <h3 class="font-bold text-navy mb-4 text-sm flex items-center gap-2">
                    <i data-lucide="info" class="w-4 h-4 text-blue"></i>
                    {% trans "User Info" %}
                </h3>
                <div class="space-y-2 text-sm">
                    <div class="flex justify-between">
                        <span class="text-slate">{% trans "Email" %}</span>
                        <span class="font-medium text-navy">{{ edit_user.email }}</span>
                    </div>
                    <div class="flex justify-between">
                        <span class="text-slate">{% trans "Joined" %}</span>
                        <span class="font-medium text-navy">{{ edit_user.date_joined|date:"M d, Y" }}</span>
                    </div>
                    <div class="flex justify-between">
                        <span class="text-slate">{% trans "Last Login" %}</span>
                        <span class="font-medium text-navy">{{ edit_user.last_login|date:"M d, Y"|default:"Never" }}</span>
                    </div>
                </div>
            </section>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    const hospitalField = document.getElementById('id_hospital');
    const departmentSelect = document.getElementById('id_department');

    // ===== Department loading =====
    function loadDepartments(hospitalId, selectedDept) {
        if (!departmentSelect) return;
        if (!hospitalId) {
            departmentSelect.innerHTML = '<option value="">{% trans "Select Department" %}</option>';
            return;
        }

        departmentSelect.innerHTML = '<option value="">{% trans "Loading..." %}</option>';

        fetch('/organizations/api/departments/?hospital=' + hospitalId)
            .then(response => response.json())
            .then(data => {
                const results = data.results || data;
                departmentSelect.innerHTML = '<option value="">{% trans "Select Department" %}</option>';

                results.forEach(dept => {
                    const option = document.createElement('option');
                    option.value = dept.id;
                    option.textContent = {% if LANG == 'ar' %}dept.name_ar || dept.name{% else %}dept.name{% endif %};
                    departmentSelect.appendChild(option);
                });

                if (selectedDept) {
                    departmentSelect.value = selectedDept;
                } else if ('{{ form.department.value }}') {
                    departmentSelect.value = '{{ form.department.value }}';
                }
            })
            .catch(error => {
                console.error('Error loading departments:', error);
                departmentSelect.innerHTML = '<option value="">{% trans "Error loading departments" %}</option>';
            });
    }

    if (hospitalField) {
        hospitalField.addEventListener('change', function() {
            loadDepartments(this.value);
        });
        if (hospitalField.value) {
            loadDepartments(hospitalField.value);
        }
    }

    // ===== Staff Search =====
    const staffSearchInput = document.getElementById('staffSearchInput');
    const staffSearchResults = document.getElementById('staffSearchResults');
    const staffIdInput = document.getElementById('staffIdInput');
    const selectedStaffChip = document.getElementById('selectedStaffChip');
    const selectedStaffName = document.getElementById('selectedStaffName');
    const staffSearchInputWrap = document.getElementById('staffSearchInput-wrap');

    if (staffSearchInput) {
        let debounceTimer;

        staffSearchInput.addEventListener('input', function() {
            clearTimeout(debounceTimer);
            const query = this.value.trim();

            if (query.length < 2) {
                staffSearchResults.classList.remove('active');
                return;
            }

            debounceTimer = setTimeout(() => {
                fetch('/api/staffs/search/?q=' + encodeURIComponent(query))
                    .then(response => response.json())
                    .then(data => {
                        if (data.length === 0) {
                            staffSearchResults.innerHTML = '<div class="px-4 py-3 text-sm text-slate">{% trans "No staff found" %}</div>';
                        } else {
                            staffSearchResults.innerHTML = data.map(s =>
                                `<div class="staff-search-item" onclick="selectStaff('${s.id}', '${(s.first_name + ' ' + s.last_name).replace(/'/g, "\\'")}', '${(s.employee_id || '').replace(/'/g, "\\'")}')">
                                    <div class="font-semibold text-navy text-sm">${s.first_name} ${s.last_name}</div>
                                    <div class="text-xs text-slate">${s.employee_id ? 'ID: ' + s.employee_id : ''}</div>
                                </div>`
                            ).join('');
                        }
                        staffSearchResults.classList.add('active');
                    })
                    .catch(() => {
                        staffSearchResults.innerHTML = '<div class="px-4 py-3 text-sm text-red-500">{% trans "Search failed" %}</div>';
                        staffSearchResults.classList.add('active');
                    });
            }, 300);
        });

        staffSearchInput.addEventListener('focus', function() {
            if (this.value.trim().length >= 2 && staffSearchResults.innerHTML) {
                staffSearchResults.classList.add('active');
            }
        });

        document.addEventListener('click', function(e) {
            if (!e.target.closest('.staff-search-container')) {
                staffSearchResults.classList.remove('active');
            }
        });
    }

    // ===== Password Generation =====
    window.generatePassword = function() {
        const chars = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@#$%^&*';
        let password = '';
        const array = new Uint8Array(16);
        crypto.getRandomValues(array);
        for (let i = 0; i < 16; i++) {
            password += chars[array[i] % chars.length];
        }
        const pwField = document.getElementById('id_password');
        const pwConfirmField = document.getElementById('id_password_confirm');
        if (pwField) pwField.value = password;
        if (pwConfirmField) pwConfirmField.value = password;
        if (pwField) pwField.type = 'text';
        if (pwConfirmField) pwConfirmField.type = 'text';
        setTimeout(() => {
            if (pwField) pwField.type = 'password';
            if (pwConfirmField) pwConfirmField.type = 'password';
        }, 2000);
    };

    window.copyPassword = function() {
        const pwField = document.getElementById('id_password');
        if (pwField && pwField.value) {
            navigator.clipboard.writeText(pwField.value).then(() => {
                alert('{% trans "Password copied to clipboard" %}');
            });
        }
    };

    // ===== Staff Selection =====
    window.selectStaff = function(staffId, name, employeeId) {
        fetch('/api/staffs/' + staffId + '/for-user-creation/')
            .then(response => response.json())
            .then(data => {
                if (data.error) {
                    alert(data.error);
                    return;
                }

                staffIdInput.value = staffId;
                selectedStaffName.textContent = name + (employeeId ? ' (' + employeeId + ')' : '');
                staffSearchInputWrap.classList.add('hidden');
                selectedStaffChip.classList.remove('hidden');

                // Auto-fill fields
                const fields = {
                    'id_first_name': data.first_name,
                    'id_last_name': data.last_name,
                    'id_email': data.email,
                    'id_phone': data.phone,
                    'id_employee_id': data.employee_id,
                };

                Object.entries(fields).forEach(([fieldId, value]) => {
                    const field = document.getElementById(fieldId);
                    if (field && value) field.value = value;
                });

                // Set hospital and load departments
                if (data.hospital && hospitalField) {
                    hospitalField.value = data.hospital;
                    loadDepartments(data.hospital, data.department);
                }

                lucide.createIcons();
            })
            .catch(error => {
                console.error('Error fetching staff:', error);
            });
    };

    window.clearStaffSelection = function() {
        staffIdInput.value = '';
        selectedStaffChip.classList.add('hidden');
        staffSearchInputWrap.classList.remove('hidden');
        staffSearchInput.value = '';
        staffSearchResults.classList.remove('active');
    };

    if (typeof lucide !== 'undefined') {
        lucide.createIcons();
    }
});
</script>
{% endblock %}