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

{% block title %}{% trans "Create Source User" %} - {{ source.name_en }}{% endblock %}

{% block extra_css %}
<style>
    .tab-container {
        display: none;
    }
    .tab-container.active {
        display: block;
    }
    .tab-button {
        border-bottom: 2px solid transparent;
        transition: all 0.2s;
    }
    .tab-button.active {
        border-bottom-color: #005696;
        color: #005696;
    }
</style>
{% endblock %}

{% block content %}
<div class="p-6">
    <!-- Breadcrumb -->
    <nav class="mb-4">
        <ol class="flex items-center gap-2 text-sm text-slate">
            <li><a href="{% url 'px_sources:source_list' %}" class="text-blue hover:text-navy">{% trans "PX Sources" %}</a></li>
            <li><i data-lucide="chevron-right" class="w-4 h-4"></i></li>
            <li><a href="{% url 'px_sources:source_detail' source.pk %}" class="text-blue hover:text-navy">{{ source.name_en }}</a></li>
            <li><i data-lucide="chevron-right" class="w-4 h-4"></i></li>
            <li class="text-navy font-semibold">
                {% trans "Create Source User" %}
            </li>
        </ol>
    </nav>

    <!-- Page Header -->
    <div class="flex flex-wrap justify-between items-center gap-4 mb-6">
        <div>
            <h1 class="text-2xl font-bold text-navy flex items-center gap-3">
                <i data-lucide="user-plus" class="w-8 h-8 text-blue"></i>
                {% trans "Create Source User" %}
            </h1>
            <p class="text-slate mt-1">{{ source.name_en }}</p>
        </div>
        <div>
            <a href="{% url 'px_sources:source_detail' source.pk %}"
               class="inline-flex items-center gap-2 px-4 py-2 border border-slate-200 text-slate-700 rounded-lg hover:bg-slate-50 transition">
                <i data-lucide="arrow-left" class="w-4 h-4"></i> {% trans "Back to Source" %}
            </a>
        </div>
    </div>

    <!-- Form Card -->
    <div class="bg-white rounded-xl shadow-sm border border-slate-200 max-w-4xl">
        <!-- Tabs -->
        <div class="border-b border-slate-200 bg-slate-50/50 rounded-t-xl">
            <div class="flex gap-6 px-6 pt-4">
                <button type="button" onclick="switchTab('existing')" id="tab-existing"
                        class="tab-button active pb-3 px-2 font-semibold text-slate-600 hover:text-navy transition">
                    <i data-lucide="users" class="w-5 h-5 inline mr-2"></i>
                    {% trans "Select Existing User" %}
                </button>
                <button type="button" onclick="switchTab('new')" id="tab-new"
                        class="tab-button pb-3 px-2 font-semibold text-slate-600 hover:text-navy transition">
                    <i data-lucide="user-plus" class="w-5 h-5 inline mr-2"></i>
                    {% trans "Create New User" %}
                </button>
            </div>
        </div>

        <div class="p-6">
            <form method="POST" novalidate id="sourceUserForm">
                {% csrf_token %}

                <!-- Creation Mode Hidden Field -->
                <input type="hidden" name="creation_mode" id="creationMode" value="existing">

                <!-- Tab 1: Select Existing User -->
                <div id="tab-existing-content" class="tab-container active">
                    <div class="mb-6">
                        <label for="id_user" class="block text-sm font-semibold text-navy mb-2">
                            {% trans "Select User" %} <span class="text-red-500">*</span>
                        </label>
                        <select name="user" id="id_user"
                                class="w-full px-4 py-3 border-2 border-slate-200 rounded-lg focus:outline-none focus:border-blue focus:ring-2 focus:ring-blue/20 bg-white">
                            <option value="">{% trans "Choose a user..." %}</option>
                            {% for user in available_users %}
                                <option value="{{ user.id }}">
                                    {{ user.email }} 
                                    {% if user.get_full_name %}
                                        - {{ user.get_full_name }}
                                    {% endif %}
                                    {% if user.groups.first %}
                                        ({{ user.groups.first.name }})
                                    {% endif %}
                                </option>
                            {% endfor %}
                        </select>
                        <p class="text-slate text-sm mt-2">
                            <i data-lucide="info" class="w-4 h-4 inline mr-1"></i>
                            {% trans "Select an existing user to assign as source user. A user can only manage one source." %}
                        </p>
                    </div>

                    <!-- Info Box -->
                    <div class="bg-blue-50 border border-blue-200 rounded-lg p-4 mb-6">
                        <div class="flex items-start gap-3">
                            <i data-lucide="lightbulb" class="w-5 h-5 text-blue-600 mt-0.5"></i>
                            <div>
                                <p class="text-sm font-semibold text-blue-800 mb-1">{% trans "Quick Tip" %}</p>
                                <p class="text-sm text-blue-700">
                                    {% trans "If you need to create a new user account first, switch to the 'Create New User' tab above." %}
                                </p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Tab 2: Create New User -->
                <div id="tab-new-content" class="tab-container">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-5 mb-6">
                        <!-- Email -->
                        <div class="md:col-span-2">
                            <label for="new_email" class="block text-sm font-semibold text-navy mb-2">
                                {% trans "Email Address" %} <span class="text-red-500">*</span>
                            </label>
                            <input type="email" name="new_email" id="new_email" required
                                   class="w-full px-4 py-3 border-2 border-slate-200 rounded-lg focus:outline-none focus:border-blue focus:ring-2 focus:ring-blue/20"
                                   placeholder="user@example.com">
                            <p class="text-xs text-slate mt-1">
                                {% trans "This will be the user's login email" %}
                            </p>
                        </div>

                        <!-- First Name -->
                        <div>
                            <label for="new_first_name" class="block text-sm font-semibold text-navy mb-2">
                                {% trans "First Name" %} <span class="text-red-500">*</span>
                            </label>
                            <input type="text" name="new_first_name" id="new_first_name" required
                                   class="w-full px-4 py-3 border-2 border-slate-200 rounded-lg focus:outline-none focus:border-blue focus:ring-2 focus:ring-blue/20"
                                   placeholder="{% trans 'John' %}">
                        </div>

                        <!-- Last Name -->
                        <div>
                            <label for="new_last_name" class="block text-sm font-semibold text-navy mb-2">
                                {% trans "Last Name" %} <span class="text-red-500">*</span>
                            </label>
                            <input type="text" name="new_last_name" id="new_last_name" required
                                   class="w-full px-4 py-3 border-2 border-slate-200 rounded-lg focus:outline-none focus:border-blue focus:ring-2 focus:ring-blue/20"
                                   placeholder="{% trans 'Doe' %}">
                        </div>

                        <!-- Phone -->
                        <div>
                            <label for="new_phone" class="block text-sm font-semibold text-navy mb-2">
                                {% trans "Phone Number" %}
                            </label>
                            <input type="tel" name="new_phone" id="new_phone"
                                   class="w-full px-4 py-3 border-2 border-slate-200 rounded-lg focus:outline-none focus:border-blue focus:ring-2 focus:ring-blue/20"
                                   placeholder="+966 XX XXX XXXX">
                        </div>

                        <!-- Employee ID -->
                        <div>
                            <label for="new_employee_id" class="block text-sm font-semibold text-navy mb-2">
                                {% trans "Employee ID" %}
                            </label>
                            <input type="text" name="new_employee_id" id="new_employee_id"
                                   class="w-full px-4 py-3 border-2 border-slate-200 rounded-lg focus:outline-none focus:border-blue focus:ring-2 focus:ring-blue/20"
                                   placeholder="{% trans 'Optional' %}">
                        </div>

                        <!-- Password -->
                        <div>
                            <label for="new_password" class="block text-sm font-semibold text-navy mb-2">
                                {% trans "Password" %} <span class="text-red-500">*</span>
                            </label>
                            <input type="password" name="new_password" id="new_password" required minlength="8"
                                   class="w-full px-4 py-3 border-2 border-slate-200 rounded-lg focus:outline-none focus:border-blue focus:ring-2 focus:ring-blue/20"
                                   placeholder="••••••••">
                            <p class="text-xs text-slate mt-1">
                                {% trans "Minimum 8 characters" %}
                            </p>
                        </div>

                        <!-- Confirm Password -->
                        <div>
                            <label for="new_password_confirm" class="block text-sm font-semibold text-navy mb-2">
                                {% trans "Confirm Password" %} <span class="text-red-500">*</span>
                            </label>
                            <input type="password" name="new_password_confirm" id="new_password_confirm" required minlength="8"
                                   class="w-full px-4 py-3 border-2 border-slate-200 rounded-lg focus:outline-none focus:border-blue focus:ring-2 focus:ring-blue/20"
                                   placeholder="••••••••">
                        </div>
                    </div>

                    <!-- Info Box -->
                    <div class="bg-emerald-50 border border-emerald-200 rounded-lg p-4 mb-6">
                        <div class="flex items-start gap-3">
                            <i data-lucide="shield-check" class="w-5 h-5 text-emerald-600 mt-0.5"></i>
                            <div>
                                <p class="text-sm font-semibold text-emerald-800 mb-1">{% trans "Auto-Assignment" %}</p>
                                <p class="text-sm text-emerald-700">
                                    {% trans "The new user will be automatically assigned the PX Admin role and linked to this source." %}
                                </p>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="border-t border-slate-200 my-6"></div>

                <!-- Status -->
                <div class="mb-6">
                    <label class="block text-sm font-semibold text-navy mb-2">{% trans "Status" %}</label>
                    <label class="flex items-center gap-3 cursor-pointer">
                        <input type="checkbox" name="is_active" id="id_is_active" checked
                               class="w-5 h-5 text-navy border-slate-300 rounded focus:ring-blue">
                        <span class="text-navy font-medium">{% trans "Active" %}</span>
                    </label>
                    <p class="text-slate text-sm mt-1">
                        {% trans "Inactive users will not be able to access their dashboard." %}
                    </p>
                </div>

                <div class="border-t border-slate-200 my-6"></div>

                <!-- Permissions -->
                <h5 class="text-lg font-semibold text-navy mb-4">{% trans "Permissions" %}</h5>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
                    <div>
                        <label class="flex items-center gap-3 cursor-pointer">
                            <input type="checkbox" name="can_create_complaints" id="id_can_create_complaints" checked
                                   class="w-5 h-5 text-navy border-slate-300 rounded focus:ring-blue">
                            <span class="text-navy">{% trans "Can create complaints" %}</span>
                        </label>
                    </div>
                    <div>
                        <label class="flex items-center gap-3 cursor-pointer">
                            <input type="checkbox" name="can_create_inquiries" id="id_can_create_inquiries" checked
                                   class="w-5 h-5 text-navy border-slate-300 rounded focus:ring-blue">
                            <span class="text-navy">{% trans "Can create inquiries" %}</span>
                        </label>
                    </div>
                </div>

                <!-- Info Alert -->
                <div class="bg-blue-50 border border-blue-200 rounded-lg p-4 mb-6">
                    <div class="flex items-center gap-3">
                        <i data-lucide="info" class="w-5 h-5 text-blue-600"></i>
                        <span class="text-blue-700 text-sm">{% trans "Permissions control what the source user can do in their dashboard. Uncheck to restrict access." %}</span>
                    </div>
                </div>

                <!-- Submit Buttons -->
                <div class="border-t border-slate-200 pt-4 flex gap-3">
                    <button type="submit"
                            class="inline-flex items-center gap-2 px-6 py-3 bg-navy text-white rounded-lg hover:bg-blue transition shadow-lg shadow-navy/20 font-semibold">
                        <i data-lucide="check" class="w-4 h-4"></i> {% trans "Create Source User" %}
                    </button>
                    <a href="{% url 'px_sources:source_detail' source.pk %}"
                       class="inline-flex items-center gap-2 px-6 py-3 border border-slate-200 text-slate-700 rounded-lg hover:bg-slate-50 transition font-semibold">
                        <i data-lucide="x" class="w-4 h-4"></i> {% trans "Cancel" %}
                    </a>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    lucide.createIcons();
    
    // Form validation
    const form = document.getElementById('sourceUserForm');
    form.addEventListener('submit', function(e) {
        const mode = document.getElementById('creationMode').value;
        
        if (mode === 'existing') {
            const userSelect = document.getElementById('id_user');
            if (!userSelect.value) {
                e.preventDefault();
                showAlert('error', '{% trans "Please select a user" %}');
                userSelect.focus();
                return false;
            }
        } else {
            // Validate new user fields
            const email = document.getElementById('new_email').value;
            const firstName = document.getElementById('new_first_name').value;
            const lastName = document.getElementById('new_last_name').value;
            const password = document.getElementById('new_password').value;
            const passwordConfirm = document.getElementById('new_password_confirm').value;
            
            if (!email || !firstName || !lastName || !password) {
                e.preventDefault();
                showAlert('error', '{% trans "Please fill in all required fields" %}');
                return false;
            }
            
            if (password.length < 8) {
                e.preventDefault();
                showAlert('error', '{% trans "Password must be at least 8 characters" %}');
                document.getElementById('new_password').focus();
                return false;
            }
            
            if (password !== passwordConfirm) {
                e.preventDefault();
                showAlert('error', '{% trans "Passwords do not match" %}');
                document.getElementById('new_password_confirm').focus();
                return false;
            }
        }
    });
});

function switchTab(tab) {
    // Update hidden field
    document.getElementById('creationMode').value = tab;
    
    // Update tab buttons
    document.querySelectorAll('.tab-button').forEach(btn => {
        btn.classList.remove('active');
    });
    document.getElementById('tab-' + tab).classList.add('active');
    
    // Update tab content
    document.querySelectorAll('.tab-container').forEach(content => {
        content.classList.remove('active');
    });
    document.getElementById('tab-' + tab + '-content').classList.add('active');
    
    // Toggle required attributes
    const existingFields = ['id_user'];
    const newFields = ['new_email', 'new_first_name', 'new_last_name', 'new_password', 'new_password_confirm'];
    
    if (tab === 'existing') {
        existingFields.forEach(id => {
            document.getElementById(id).setAttribute('required', 'required');
        });
        newFields.forEach(id => {
            document.getElementById(id).removeAttribute('required');
        });
    } else {
        existingFields.forEach(id => {
            document.getElementById(id).removeAttribute('required');
        });
        newFields.forEach(id => {
            document.getElementById(id).setAttribute('required', 'required');
        });
    }
}

function showAlert(type, message) {
    const alertClass = type === 'success' ? 'bg-emerald-500' : 'bg-red-500';
    const icon = type === 'success' ? 'check-circle' : 'alert-circle';
    
    const alert = document.createElement('div');
    alert.className = `${alertClass} text-white px-6 py-4 rounded-xl shadow-xl z-50 flex items-center gap-3 fixed top-4 right-4`;
    alert.innerHTML = `
        <i data-lucide="${icon}" class="w-5 h-5"></i>
        <span class="font-semibold">${message}</span>
        <button type="button" onclick="this.parentElement.remove()" class="text-white/80 hover:text-white">
            <i data-lucide="x" class="w-4 h-4"></i>
        </button>
    `;
    
    document.body.appendChild(alert);
    lucide.createIcons();
    
    setTimeout(() => {
        alert.remove();
    }, 5000);
}
</script>
{% endblock %}