{% extends 'admin/layout.html.twig' %}
{% block title %}{{ is_new ? 'New User' : 'Edit User' }} - KitscoApp{% endblock %}
{% block page_title %}{{ is_new ? 'New User' : 'Edit User' }}{% endblock %}

{% block content %}
<div class="max-w-2xl">
    <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
        {{ form_start(form, {'attr': {'class': 'space-y-6'}}) }}

        <div class="grid grid-cols-2 gap-2 md:gap-4">
            <div>
                {{ form_row(form.firstName) }}
            </div>
            <div>
                {{ form_row(form.lastName) }}
            </div>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div>
                {{ form_row(form.email) }}
            </div>
            <div>
                {{ form_row(form.phone) }}
            </div>
        </div>

        <div class="border-t border-gray-200 pt-6">
            <h3 class="text-sm font-semibold text-gray-800 mb-3">{{ is_new ? 'Password' : 'Change Password' }}</h3>
            {% if not is_new %}
                <p class="text-xs text-gray-500 mb-3">Leave blank to keep the current password.</p>
            {% endif %}
            <div class="grid grid-cols-2 gap-2 md:gap-4">
                <div>
                    {{ form_widget(form.plainPassword.first, {'attr': {'placeholder': 'Password'}}) }}
                </div>
                <div>
                    {{ form_widget(form.plainPassword.second, {'attr': {'placeholder': 'Confirm'}}) }}
                </div>
            </div>
            {{ form_errors(form.plainPassword) }}
        </div>

        <div class="border-t border-gray-200 pt-6">
            <h3 class="text-sm font-semibold text-gray-800 mb-3">Role</h3>
            <p class="text-xs text-gray-500 mb-3">Higher roles inherit all permissions from lower roles.</p>

            {% set role_meta = {
                'ROLE_SUPER_ADMIN': {'label': 'Super Admin', 'icon': 'bi-shield-lock-fill', 'color': 'purple', 'desc': 'Full system access, user management, CMS'},
                'ROLE_ADMIN': {'label': 'Admin', 'icon': 'bi-gear-fill', 'color': 'blue', 'desc': 'Settings, reports, all manager permissions'},
                'ROLE_MANAGER': {'label': 'Manager', 'icon': 'bi-people-fill', 'color': 'cyan', 'desc': 'Oversees shop and accounting operations'},
                'ROLE_ACCOUNTANT': {'label': 'Accountant', 'icon': 'bi-calculator-fill', 'color': 'green', 'desc': 'Invoices, payments, financial reports'},
                'ROLE_SHOPKEEPER': {'label': 'Shopkeeper', 'icon': 'bi-shop', 'color': 'orange', 'desc': 'Products, inventory, orders'},
                'ROLE_CUSTOMER': {'label': 'Customer', 'icon': 'bi-person-fill', 'color': 'gray', 'desc': 'Customer portal access only'}
            } %}

            {% set current_role = null %}
            {% for role in form.role %}
                {% if role.vars.checked %}
                    {% set current_role = role.vars.value %}
                {% endif %}
            {% endfor %}
            {% set current_meta = current_role ? role_meta[current_role] : null %}

            <div class="max-w-md relative" data-role-dropdown>
                <input type="hidden" name="{{ form.role.vars.full_name }}" value="{{ current_role }}" data-role-input>

                {% set icon_bg = {
                    'purple': 'bg-purple-100', 'blue': 'bg-blue-100', 'cyan': 'bg-cyan-100',
                    'green': 'bg-green-100', 'orange': 'bg-orange-100', 'gray': 'bg-gray-100'
                } %}
                {% set icon_text = {
                    'purple': 'text-purple-500', 'blue': 'text-blue-500', 'cyan': 'text-cyan-500',
                    'green': 'text-green-500', 'orange': 'text-orange-500', 'gray': 'text-gray-500'
                } %}

                <button type="button" data-role-trigger
                    class="w-full flex items-center gap-3 p-3 border border-gray-300 rounded-lg bg-white hover:border-gray-400 focus:ring-2 focus:ring-kitsco-accent focus:border-kitsco-accent transition-all text-left">
                    {% if current_meta %}
                        <span class="w-8 h-8 rounded-lg flex items-center justify-center flex-shrink-0 {{ icon_bg[current_meta.color] }}">
                            <i class="bi {{ current_meta.icon }} {{ icon_text[current_meta.color] }}"></i>
                        </span>
                        <div class="flex-1 min-w-0">
                            <span class="text-sm font-medium text-gray-800">{{ current_meta.label }}</span>
                            <span class="text-xs text-gray-400 ml-1">— {{ current_meta.desc }}</span>
                        </div>
                    {% else %}
                        <span class="w-8 h-8 rounded-lg flex items-center justify-center flex-shrink-0 bg-gray-100">
                            <i class="bi bi-person-fill text-gray-400"></i>
                        </span>
                        <span class="flex-1 text-sm text-gray-400">Select a role...</span>
                    {% endif %}
                    <i class="bi bi-chevron-down text-gray-400 transition-transform flex-shrink-0" data-role-chevron></i>
                </button>

                {% set hover_bg = {
                    'purple': 'hover:bg-purple-50', 'blue': 'hover:bg-blue-50', 'cyan': 'hover:bg-cyan-50',
                    'green': 'hover:bg-green-50', 'orange': 'hover:bg-orange-50', 'gray': 'hover:bg-gray-50'
                } %}
                {% set selected_bg = {
                    'purple': 'bg-purple-50', 'blue': 'bg-blue-50', 'cyan': 'bg-cyan-50',
                    'green': 'bg-green-50', 'orange': 'bg-orange-50', 'gray': 'bg-gray-50'
                } %}

                <div data-role-menu class="hidden absolute z-50 w-full mt-1 bg-white border border-gray-200 rounded-lg shadow-lg overflow-hidden">
                    {% for value, meta in role_meta %}
                        <div data-role-option="{{ value }}"
                            class="flex items-center gap-3 p-3 cursor-pointer transition-all {{ hover_bg[meta.color] }} {{ current_role == value ? selected_bg[meta.color] : '' }}">
                            <span class="w-8 h-8 rounded-lg flex items-center justify-center flex-shrink-0 {{ icon_bg[meta.color] }}">
                                <i class="bi {{ meta.icon }} {{ icon_text[meta.color] }}"></i>
                            </span>
                            <div class="flex-1 min-w-0">
                                <span class="text-sm font-medium text-gray-800">{{ meta.label }}</span>
                                <span class="text-xs text-gray-400 ml-1">— {{ meta.desc }}</span>
                            </div>
                            {% if current_role == value %}
                                <i class="bi bi-check-lg {{ icon_text[meta.color] }} flex-shrink-0"></i>
                            {% endif %}
                        </div>
                    {% endfor %}
                </div>
            </div>
            {{ form_errors(form.role) }}
        </div>

        <div class="border-t border-gray-200 pt-6">
            <label class="flex items-center gap-2 cursor-pointer">
                {{ form_widget(form.isActive, {'attr': {'class': 'w-4 h-4 text-kitsco-accent border-gray-300 rounded focus:ring-kitsco-accent'}}) }}
                <span class="text-sm font-medium text-gray-700">Account Active</span>
            </label>
            <p class="text-xs text-gray-500 mt-1 ml-6">Inactive users cannot log in to the system.</p>
        </div>

        <div class="flex justify-end items-center gap-3 pt-4 border-t border-gray-200">
            <a href="{{ path('admin_user_index') }}" class="inline-flex items-center py-2.5 px-5 border border-gray-300 rounded-lg text-gray-600 hover:bg-gray-50 transition-colors text-sm">Cancel</a>
            <button type="submit" class="inline-flex items-center gap-2 bg-kitsco-accent hover:bg-kitsco-dark text-white font-medium py-2.5 px-5 rounded-lg transition-colors text-sm">
                <i class="bi bi-check-lg"></i> {{ is_new ? 'Create' : 'Update' }}
            </button>
        </div>

        {# Mark role field as rendered to prevent duplicate output #}
        {% do form.role.setRendered %}
        {{ form_end(form) }}
    </div>
</div>
{% endblock %}

{% block javascripts %}
{{ parent() }}
<script>
document.addEventListener('DOMContentLoaded', function() {
    const dropdown = document.querySelector('[data-role-dropdown]');
    if (!dropdown) return;

    const trigger = dropdown.querySelector('[data-role-trigger]');
    const menu = dropdown.querySelector('[data-role-menu]');
    const input = dropdown.querySelector('[data-role-input]');
    const chevron = dropdown.querySelector('[data-role-chevron]');
    const options = dropdown.querySelectorAll('[data-role-option]');

    const roleMeta = {
        'ROLE_SUPER_ADMIN': {label: 'Super Admin', icon: 'bi-shield-lock-fill', iconBg: 'bg-purple-100', iconText: 'text-purple-500', hoverBg: 'hover:bg-purple-50', selectedBg: 'bg-purple-50', desc: 'Full system access, user management, CMS'},
        'ROLE_ADMIN': {label: 'Admin', icon: 'bi-gear-fill', iconBg: 'bg-blue-100', iconText: 'text-blue-500', hoverBg: 'hover:bg-blue-50', selectedBg: 'bg-blue-50', desc: 'Settings, reports, all manager permissions'},
        'ROLE_MANAGER': {label: 'Manager', icon: 'bi-people-fill', iconBg: 'bg-cyan-100', iconText: 'text-cyan-500', hoverBg: 'hover:bg-cyan-50', selectedBg: 'bg-cyan-50', desc: 'Oversees shop and accounting operations'},
        'ROLE_ACCOUNTANT': {label: 'Accountant', icon: 'bi-calculator-fill', iconBg: 'bg-green-100', iconText: 'text-green-500', hoverBg: 'hover:bg-green-50', selectedBg: 'bg-green-50', desc: 'Invoices, payments, financial reports'},
        'ROLE_SHOPKEEPER': {label: 'Shopkeeper', icon: 'bi-shop', iconBg: 'bg-orange-100', iconText: 'text-orange-500', hoverBg: 'hover:bg-orange-50', selectedBg: 'bg-orange-50', desc: 'Products, inventory, orders'},
        'ROLE_CUSTOMER': {label: 'Customer', icon: 'bi-person-fill', iconBg: 'bg-gray-100', iconText: 'text-gray-500', hoverBg: 'hover:bg-gray-50', selectedBg: 'bg-gray-50', desc: 'Customer portal access only'}
    };

    function toggleMenu(show) {
        menu.classList.toggle('hidden', !show);
        chevron.classList.toggle('rotate-180', show);
    }

    function selectRole(value) {
        const meta = roleMeta[value];
        input.value = value;

        trigger.innerHTML = `
            <span class="w-8 h-8 rounded-lg flex items-center justify-center flex-shrink-0 ${meta.iconBg}">
                <i class="bi ${meta.icon} ${meta.iconText}"></i>
            </span>
            <div class="flex-1 min-w-0">
                <span class="text-sm font-medium text-gray-800">${meta.label}</span>
                <span class="text-xs text-gray-400 ml-1">— ${meta.desc}</span>
            </div>
            <i class="bi bi-chevron-down text-gray-400 transition-transform flex-shrink-0" data-role-chevron></i>
        `;

        options.forEach(opt => {
            const optValue = opt.dataset.roleOption;
            const optMeta = roleMeta[optValue];
            const isSelected = optValue === value;

            opt.className = `flex items-center gap-3 p-3 cursor-pointer transition-all ${optMeta.hoverBg} ${isSelected ? optMeta.selectedBg : ''}`;

            const existingCheck = opt.querySelector('.bi-check-lg');
            if (isSelected && !existingCheck) {
                const check = document.createElement('i');
                check.className = `bi bi-check-lg ${optMeta.iconText} flex-shrink-0`;
                opt.appendChild(check);
            } else if (!isSelected && existingCheck) {
                existingCheck.remove();
            }
        });

        toggleMenu(false);
    }

    trigger.addEventListener('click', (e) => {
        e.preventDefault();
        toggleMenu(menu.classList.contains('hidden'));
    });

    options.forEach(option => {
        option.addEventListener('click', () => {
            selectRole(option.dataset.roleOption);
        });
    });

    document.addEventListener('click', (e) => {
        if (!dropdown.contains(e.target)) {
            toggleMenu(false);
        }
    });
});
</script>
{% endblock %}