@extends('layouts.app')

@section('content')
<div class="flex-1 space-y-6">
    <!-- Header -->
    <div class="flex items-center gap-2 text-slate-500 text-sm mb-2">
        <a href="{{ route('dashboard') }}" class="hover:text-blue-600 cursor-pointer">Trang chủ</a>
        <i data-lucide="chevron-right" class="w-4 h-4"></i>
        <span>Phân tài khoản Tenant</span>
    </div>
    <h1 class="text-3xl font-bold text-slate-900 mb-6">Phân tài khoản Tenant</h1>

    <!-- Message Notification V2 -->
    <div class="message-class hidden fixed top-4 right-4 z-50 max-w-md w-full">
        <div class="notification-v2 bg-white rounded-lg shadow-xl border-l-4 p-4 flex items-start gap-3 animate-slide-in">
            <div class="notification-icon flex-shrink-0 mt-0.5">
                <i data-lucide="check-circle" class="w-6 h-6 text-green-500 notification-icon-success hidden"></i>
                <i data-lucide="x-circle" class="w-6 h-6 text-red-500 notification-icon-error hidden"></i>
            </div>
            <div class="flex-1 min-w-0">
                <div id="content_message" class="text-sm font-medium text-slate-800"></div>
            </div>
            <button type="button" class="notification-close flex-shrink-0 text-slate-400 hover:text-slate-600 transition-colors" aria-label="Close">
                <i data-lucide="x" class="w-5 h-5"></i>
            </button>
        </div>
    </div>

    <!-- Search User Section -->
    <div class="bg-white rounded-xl shadow-sm border border-slate-200 p-6">
        <h3 class="text-lg font-semibold text-slate-900 mb-4">Tìm kiếm người dùng</h3>
        <div class="flex gap-3">
            <div class="flex-1">
                <label for="user-search" class="block text-sm font-medium text-slate-700 mb-1">Tìm kiếm người dùng theo email:</label>
                <input type="text" class="w-full px-3 py-2 bg-white border border-slate-300 rounded-lg text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 outline-none" id="user-search" placeholder="Nhập email người dùng...">
            </div>
            <div class="flex items-end">
                <button class="px-4 py-2 bg-blue-600 text-white rounded-lg text-sm font-medium hover:bg-blue-700 transition-colors shadow-sm flex items-center gap-2" type="button" id="search-btn">
                    <i data-lucide="search" class="w-4 h-4"></i>
                    Tìm kiếm
                </button>
            </div>
        </div>
    </div>

    <!-- Search Results -->
    <div id="search-results" class="hidden bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
        <div class="px-6 py-4 border-b border-slate-200">
            <h3 class="text-lg font-semibold text-slate-900">Kết quả tìm kiếm:</h3>
        </div>
        <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-slate-200">
                <thead class="bg-slate-50">
                    <tr>
                        <th class="px-6 py-3 text-left text-xs font-semibold text-slate-600 uppercase tracking-wider">ID</th>
                        <th class="px-6 py-3 text-left text-xs font-semibold text-slate-600 uppercase tracking-wider">Tên</th>
                        <th class="px-6 py-3 text-left text-xs font-semibold text-slate-600 uppercase tracking-wider">Email</th>
                        <th class="px-6 py-3 text-left text-xs font-semibold text-slate-600 uppercase tracking-wider">Username</th>
                        <th class="px-6 py-3 text-center text-xs font-semibold text-slate-600 uppercase tracking-wider">Hành động</th>
                    </tr>
                </thead>
                <tbody id="search-results-body" class="bg-white divide-y divide-slate-200">
                </tbody>
            </table>
        </div>
    </div>

    <!-- Selected User Info -->
    <div id="selected-user-info" class="hidden bg-white rounded-xl shadow-sm border border-slate-200 p-6">
        <h3 class="text-lg font-semibold text-slate-900 mb-4">Thông tin người dùng đã chọn:</h3>
        <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
            <div>
                <span class="text-sm font-medium text-slate-600">ID:</span>
                <span id="selected-user-id" class="ml-2 text-sm text-slate-900"></span>
            </div>
            <div>
                <span class="text-sm font-medium text-slate-600">Tên:</span>
                <span id="selected-user-name" class="ml-2 text-sm text-slate-900"></span>
            </div>
            <div>
                <span class="text-sm font-medium text-slate-600">Email:</span>
                <span id="selected-user-email" class="ml-2 text-sm text-slate-900"></span>
            </div>
            <div>
                <span class="text-sm font-medium text-slate-600">Username:</span>
                <span id="selected-user-username" class="ml-2 text-sm text-slate-900"></span>
            </div>
        </div>
    </div>

    <!-- Tenant Assignment Section -->
    <div id="tenant-assignment-section" class="hidden grid grid-cols-1 lg:grid-cols-2 gap-6">
        <!-- Assign to Tenant -->
        <div class="bg-white rounded-xl shadow-sm border border-slate-200 p-6">
            <h3 class="text-lg font-semibold text-slate-900 mb-4">Phân tài khoản vào Tenant</h3>
            <div class="space-y-4">
                <div>
                    <label for="tenant-select" class="block text-sm font-medium text-slate-700 mb-1">Chọn Tenant:</label>
                    <select class="w-full px-3 py-2 bg-white border border-slate-300 rounded-lg text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 outline-none" id="tenant-select">
                        <option value="">-- Chọn Tenant --</option>
                        @foreach($tenants as $tenant)
                            <option value="{{ $tenant->id }}" data-db-name="{{ $tenant->db_name }}">
                                {{ $tenant->name }} ({{ $tenant->code }})
                            </option>
                        @endforeach
                    </select>
                </div>
                <div id="role-select-group" class="hidden">
                    <label for="role-select" class="block text-sm font-medium text-slate-700 mb-1">Chọn Vai trò:</label>
                    <select class="w-full px-3 py-2 bg-white border border-slate-300 rounded-lg text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 outline-none" id="role-select">
                        <option value="">-- Chọn Vai trò --</option>
                    </select>
                </div>
                <button class="px-4 py-2 bg-green-600 text-white rounded-lg text-sm font-medium hover:bg-green-700 transition-colors shadow-sm flex items-center gap-2 disabled:bg-slate-300 disabled:cursor-not-allowed" id="assign-btn" disabled>
                    <i data-lucide="plus" class="w-4 h-4"></i>
                    Phân tài khoản
                </button>
            </div>
        </div>

        <!-- Current Tenants -->
        <div class="bg-white rounded-xl shadow-sm border border-slate-200 p-6">
            <h3 class="text-lg font-semibold text-slate-900 mb-4">Tenant hiện tại của người dùng</h3>
            <div id="current-tenants">
                <p class="text-sm text-slate-500">Chưa chọn người dùng</p>
            </div>
        </div>
    </div>
</div>

<!-- Confirm Modal V2 - Assign -->
<div id="confirmAssignModalV2" class="hidden fixed inset-0 z-50 overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true">
    <div class="fixed inset-0 bg-black bg-opacity-50 transition-opacity" id="confirm-assign-modal-backdrop"></div>
    <div class="flex min-h-full items-center justify-center p-4">
        <div class="relative transform overflow-hidden rounded-lg bg-white shadow-xl transition-all w-full max-w-md">
            <div class="flex items-center justify-between px-6 py-4 border-b border-slate-200">
                <div class="flex items-center gap-3">
                    <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center">
                        <i data-lucide="alert-circle" class="w-5 h-5 text-blue-600"></i>
                    </div>
                    <h3 class="text-lg font-semibold text-slate-900">Xác nhận phân tài khoản</h3>
                </div>
                <button type="button" class="text-slate-400 hover:text-slate-600 transition-colors" id="confirm-assign-modal-close">
                    <i data-lucide="x" class="w-5 h-5"></i>
                </button>
            </div>
            <div class="px-6 py-6">
                <p class="text-sm text-slate-600 text-center" id="confirm-assign-modal-message">
                    Bạn có chắc chắn muốn phân tài khoản này vào tenant đã chọn với vai trò đã chọn?
                </p>
            </div>
            <div class="flex items-center justify-end gap-3 px-6 py-4 border-t border-slate-200 bg-slate-50">
                <button type="button" class="px-4 py-2 text-sm font-medium text-slate-700 bg-white border border-slate-300 rounded-lg hover:bg-slate-50 transition-colors" id="confirm-assign-modal-cancel">
                    Hủy bỏ
                </button>
                <button type="button" class="px-4 py-2 text-sm font-medium text-white bg-green-600 rounded-lg hover:bg-green-700 transition-colors" id="confirm-assign-modal-confirm">
                    <i data-lucide="check" class="w-4 h-4 inline-block mr-1"></i>
                    Xác nhận
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Confirm Modal V2 - Remove -->
<div id="confirmRemoveModalV2" class="hidden fixed inset-0 z-50 overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true">
    <div class="fixed inset-0 bg-black bg-opacity-50 transition-opacity" id="confirm-remove-modal-backdrop"></div>
    <div class="flex min-h-full items-center justify-center p-4">
        <div class="relative transform overflow-hidden rounded-lg bg-white shadow-xl transition-all w-full max-w-md">
            <div class="flex items-center justify-between px-6 py-4 border-b border-slate-200">
                <div class="flex items-center gap-3">
                    <div class="w-10 h-10 rounded-full bg-red-100 flex items-center justify-center">
                        <i data-lucide="alert-triangle" class="w-5 h-5 text-red-600"></i>
                    </div>
                    <h3 class="text-lg font-semibold text-slate-900">Xác nhận gỡ tài khoản</h3>
                </div>
                <button type="button" class="text-slate-400 hover:text-slate-600 transition-colors" id="confirm-remove-modal-close">
                    <i data-lucide="x" class="w-5 h-5"></i>
                </button>
            </div>
            <div class="px-6 py-6">
                <p class="text-sm text-slate-600 text-center" id="confirm-remove-message">
                    Bạn có chắc chắn muốn gỡ tài khoản khỏi tenant này?
                </p>
            </div>
            <div class="flex items-center justify-end gap-3 px-6 py-4 border-t border-slate-200 bg-slate-50">
                <button type="button" class="px-4 py-2 text-sm font-medium text-slate-700 bg-white border border-slate-300 rounded-lg hover:bg-slate-50 transition-colors" id="confirm-remove-modal-cancel">
                    Hủy bỏ
                </button>
                <button type="button" class="px-4 py-2 text-sm font-medium text-white bg-red-600 rounded-lg hover:bg-red-700 transition-colors" id="confirm-remove-modal-confirm">
                    <i data-lucide="x" class="w-4 h-4 inline-block mr-1"></i>
                    Xác nhận
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Loading Overlay -->
<div id="loading-overlay" class="hidden fixed inset-0 z-50 bg-black bg-opacity-50 flex items-center justify-center">
    <div class="bg-white rounded-lg p-6 flex flex-col items-center gap-3">
        <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
        <p class="text-sm text-slate-700">Đang xử lý...</p>
    </div>
</div>
@endsection

@section('scripts')
<script>
    function showNotificationV2(type, message) {
        const $notification = $('.message-class');
        const $content = $('#content_message');
        const $iconSuccess = $('.notification-icon-success');
        const $iconError = $('.notification-icon-error');
        const $notificationBox = $notification.find('.notification-v2');
        $content.text(message);
        if (type === 'success') {
            $iconSuccess.removeClass('hidden');
            $iconError.addClass('hidden');
            $notificationBox.removeClass('border-red-500').addClass('border-green-500');
        } else {
            $iconError.removeClass('hidden');
            $iconSuccess.addClass('hidden');
            $notificationBox.removeClass('border-green-500').addClass('border-red-500');
        }
        $notification.removeClass('hidden');
        if (typeof lucide !== 'undefined') lucide.createIcons();
        setTimeout(function() { $('.message-class').addClass('hidden'); }, 5000);
    }
    function hideNotificationV2() { $('.message-class').addClass('hidden'); }
    $(document).on('click', '.notification-close', function() { hideNotificationV2(); });
    function showAlert(message, type) {
        if (type === 'success') showNotificationV2('success', message);
        else showNotificationV2('error', message);
    }
    function showLoading() { $('#loading-overlay').removeClass('hidden'); }
    function hideLoading() { $('#loading-overlay').addClass('hidden'); }

    $(document).ready(function() {
        let selectedUserId = null;

        $('#search-btn').click(function() {
            const searchTerm = $('#user-search').val().trim();
            if (!searchTerm) {
                showAlert('Vui lòng nhập email để tìm kiếm.', 'warning');
                return;
            }
            showLoading();
            $.ajax({
                url: '{{ route("tenant-assignment.search-users") }}',
                method: 'GET',
                data: { search: searchTerm },
                success: function(response) {
                    hideLoading();
                    displaySearchResults(response.users);
                },
                error: function(xhr) {
                    hideLoading();
                    showAlert('Có lỗi xảy ra khi tìm kiếm người dùng.', 'danger');
                }
            });
        });
        $('#user-search').keypress(function(e) {
            if (e.which === 13) $('#search-btn').click();
        });

        function displaySearchResults(users) {
            const tbody = $('#search-results-body');
            tbody.empty();
            if (users.length === 0) {
                tbody.append('<tr><td colspan="5" class="px-6 py-4 text-center text-sm text-slate-500">Không tìm thấy người dùng nào.</td></tr>');
            } else {
                users.forEach(function(user) {
                    tbody.append(`
                        <tr class="hover:bg-slate-50 transition-colors">
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-slate-700">${user.id}</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-slate-700">${user.name || 'N/A'}</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-slate-700">${user.email}</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-slate-700">${user.username || 'N/A'}</td>
                            <td class="px-6 py-4 whitespace-nowrap text-center">
                                <button class="px-3 py-1 bg-blue-600 text-white rounded-lg text-xs font-medium hover:bg-blue-700 transition-colors select-user-btn"
                                        data-user-id="${user.id}" data-user-name="${user.name || 'N/A'}" data-user-email="${user.email}" data-user-username="${user.username || 'N/A'}">
                                    <i data-lucide="check" class="w-3 h-3 inline-block mr-1"></i> Chọn
                                </button>
                            </td>
                        </tr>
                    `);
                });
                if (typeof lucide !== 'undefined') lucide.createIcons();
            }
            $('#search-results').removeClass('hidden');
        }

        $(document).on('click', '.select-user-btn', function() {
            const userId = $(this).data('user-id');
            selectedUserId = userId;
            $('#selected-user-id').text($(this).data('user-id'));
            $('#selected-user-name').text($(this).data('user-name'));
            $('#selected-user-email').text($(this).data('user-email'));
            $('#selected-user-username').text($(this).data('user-username'));
            $('#selected-user-info').removeClass('hidden');
            $('#tenant-assignment-section').removeClass('hidden');
            loadUserTenants(userId);
        });

        function loadUserTenants(userId) {
            $.ajax({
                url: '{{ route("tenant-assignment.get-user-tenants") }}',
                method: 'GET',
                data: { user_id: userId },
                success: function(response) { displayCurrentTenants(response.tenants); },
                error: function(xhr) { console.error('Error loading user tenants:', xhr); }
            });
        }

        function displayCurrentTenants(tenants) {
            const container = $('#current-tenants');
            if (tenants.length === 0) {
                container.html('<p class="text-sm text-slate-500">Người dùng chưa được phân vào tenant nào.</p>');
            } else {
                let html = '<div class="space-y-3">';
                tenants.forEach(function(tenant) {
                    html += `
                        <div class="flex items-center justify-between p-3 bg-slate-50 border border-slate-200 rounded-lg">
                            <div>
                                <div class="text-sm font-medium text-slate-900">${tenant.name} <span class="text-slate-500">(${tenant.code})</span></div>
                                <div class="text-xs text-slate-500 mt-1">DB: ${tenant.db_name}</div>
                            </div>
                            <button class="px-3 py-1 bg-red-600 text-white rounded-lg text-xs font-medium hover:bg-red-700 transition-colors remove-tenant-btn"
                                    data-tenant-id="${tenant.id}" data-tenant-name="${tenant.name}">
                                <i data-lucide="x" class="w-3 h-3 inline-block mr-1"></i> Gỡ
                            </button>
                        </div>
                    `;
                });
                html += '</div>';
                container.html(html);
                if (typeof lucide !== 'undefined') lucide.createIcons();
            }
        }

        $('#tenant-select').change(function() {
            const tenantId = $(this).val();
            const roleSelect = $('#role-select');
            const roleSelectGroup = $('#role-select-group');
            if (tenantId === '') {
                roleSelectGroup.addClass('hidden');
                roleSelect.empty().append('<option value="">-- Chọn Vai trò --</option>');
                $('#assign-btn').prop('disabled', true);
                return;
            }
            roleSelectGroup.removeClass('hidden');
            roleSelect.empty().append('<option value="">Đang tải...</option>');
            roleSelect.prop('disabled', true);
            $.ajax({
                url: '{{ route("role.roles-by-tenant") }}',
                method: 'GET',
                data: { tenant_id: tenantId },
                success: function(response) {
                    roleSelect.empty().append('<option value="">-- Chọn Vai trò --</option>');
                    const roles = response.roles || [];
                    if (roles.length > 0) {
                        roles.forEach(function(role) {
                            roleSelect.append($('<option></option>').attr('value', role.id).text(role.name + (role.short_name ? ' (' + role.short_name + ')' : '')));
                        });
                    } else {
                        roleSelect.append('<option value="">Không có vai trò nào</option>');
                    }
                    roleSelect.prop('disabled', false);
                    updateAssignButtonState();
                },
                error: function(xhr) {
                    roleSelect.empty().append('<option value="">Lỗi khi tải vai trò</option>');
                    roleSelect.prop('disabled', false);
                }
            });
        });
        $('#role-select').change(function() { updateAssignButtonState(); });
        function updateAssignButtonState() {
            $('#assign-btn').prop('disabled', $('#tenant-select').val() === '' || $('#role-select').val() === '');
        }

        let pendingAssignAction = null;
        $('#assign-btn').click(function() {
            const tenantId = $('#tenant-select').val();
            const roleId = $('#role-select').val();
            if (!selectedUserId || !tenantId || !roleId) {
                showAlert('Vui lòng chọn người dùng, tenant và vai trò.', 'warning');
                return;
            }
            const assignTenantId = tenantId, assignRoleId = roleId;
            pendingAssignAction = function() {
                showLoading();
                $.ajax({
                    url: '{{ route("tenant-assignment.assign") }}',
                    method: 'POST',
                    data: { user_id: selectedUserId, tenant_id: assignTenantId, role_id: assignRoleId, _token: '{{ csrf_token() }}' },
                    success: function(response) {
                        hideLoading();
                        if (response.success) {
                            showAlert(response.message, 'success');
                            loadUserTenants(selectedUserId);
                            $('#tenant-select').val('').trigger('change');
                            $('#role-select').val('').trigger('change');
                            $('#role-select-group').addClass('hidden');
                        } else {
                            showAlert(response.message, 'danger');
                        }
                    },
                    error: function(xhr) {
                        hideLoading();
                        showAlert((xhr.responseJSON && xhr.responseJSON.message) || 'Có lỗi xảy ra khi phân tài khoản.', 'danger');
                    }
                });
            };
            $('#confirm-assign-modal-message').text('Bạn có chắc chắn muốn phân tài khoản này vào tenant đã chọn với vai trò đã chọn?');
            $('#confirmAssignModalV2').removeClass('hidden');
        });
        $('#confirm-assign-modal-close, #confirm-assign-modal-cancel, #confirm-assign-modal-backdrop').on('click', function() {
            $('#confirmAssignModalV2').addClass('hidden');
            pendingAssignAction = null;
        });
        $('#confirm-assign-modal-confirm').on('click', function() {
            $('#confirmAssignModalV2').addClass('hidden');
            if (pendingAssignAction) { pendingAssignAction(); pendingAssignAction = null; }
        });

        let pendingRemoveAction = null;
        $(document).on('click', '.remove-tenant-btn', function() {
            const tenantId = $(this).data('tenant-id');
            const tenantName = $(this).data('tenant-name');
            const removeTenantId = tenantId;
            pendingRemoveAction = function() {
                showLoading();
                $.ajax({
                    url: '{{ route("tenant-assignment.remove") }}',
                    method: 'POST',
                    data: { user_id: selectedUserId, tenant_id: removeTenantId, _token: '{{ csrf_token() }}' },
                    success: function(response) {
                        hideLoading();
                        if (response.success) {
                            showAlert(response.message, 'success');
                            loadUserTenants(selectedUserId);
                        } else {
                            showAlert(response.message, 'danger');
                        }
                    },
                    error: function(xhr) {
                        hideLoading();
                        showAlert((xhr.responseJSON && xhr.responseJSON.message) || 'Có lỗi xảy ra khi gỡ tài khoản.', 'danger');
                    }
                });
            };
            $('#confirm-remove-message').text('Bạn có chắc chắn muốn gỡ tài khoản khỏi tenant "' + tenantName + '"?');
            $('#confirmRemoveModalV2').removeClass('hidden');
        });
        $('#confirm-remove-modal-close, #confirm-remove-modal-cancel, #confirm-remove-modal-backdrop').on('click', function() {
            $('#confirmRemoveModalV2').addClass('hidden');
            pendingRemoveAction = null;
        });
        $('#confirm-remove-modal-confirm').on('click', function() {
            $('#confirmRemoveModalV2').addClass('hidden');
            if (pendingRemoveAction) { pendingRemoveAction(); pendingRemoveAction = null; }
        });
    });
</script>
@endsection