@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>

    <!-- Import CSV Section -->
    <div class="bg-white rounded-xl shadow-sm border border-slate-200 p-6">
        <div class="flex flex-wrap items-center justify-between gap-2 mb-4">
            <h3 class="text-lg font-semibold text-slate-900">Import CSV phân tài khoản</h3>
            <a href="{{ asset('samples/tenant-assignment-import-demo.csv') }}"
               download="tenant-assignment-import-demo.csv"
               class="px-3 py-1.5 text-sm font-medium text-indigo-700 bg-indigo-50 border border-indigo-200 rounded-lg hover:bg-indigo-100 transition-colors inline-flex items-center gap-2">
                <i data-lucide="download" class="w-4 h-4"></i>
                Tải file CSV mẫu
            </a>
        </div>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4 items-end">
            <div>
                <label for="import-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="import-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>
                <label for="import-csv-file" class="block text-sm font-medium text-slate-700 mb-1">File CSV:</label>
                <input type="file" id="import-csv-file" accept=".csv,text/csv,text/plain"
                       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">
            </div>
            <div>
                <button type="button" id="import-csv-btn"
                        class="px-4 py-2 bg-indigo-600 text-white rounded-lg text-sm font-medium hover:bg-indigo-700 transition-colors shadow-sm flex items-center gap-2 disabled:bg-slate-300 disabled:cursor-not-allowed"
                        disabled>
                    <i data-lucide="upload" class="w-4 h-4"></i>
                    Import CSV
                </button>
            </div>
        </div>
        <p class="text-xs text-slate-500 mt-3">Cột bắt buộc: <code>email</code>, <code>role_id</code>, <code>campaign_id</code>. Cột tùy chọn: <code>name</code>, <code>ref_code</code>. <code>campaign_id</code> hỗ trợ nhiều ID cách nhau bởi dấu phẩy (ví dụ: <code>1,2,3</code>). Thay <code>role_id</code>/<code>campaign_id</code> bằng ID thật trong tenant trước khi import.</p>
        <p class="text-xs text-slate-500 mt-1">Import chạy process nền (artisan command). File lớn có thể mất vài phút — theo dõi tiến trình bên dưới.</p>

        <div id="import-csv-progress" class="hidden mt-4 p-4 bg-slate-50 border border-slate-200 rounded-lg">
            <div class="flex items-center justify-between mb-2">
                <h4 class="text-sm font-semibold text-slate-900">Tiến trình import</h4>
                <span id="import-csv-progress-text" class="text-xs text-slate-600">0 / 0 dòng</span>
            </div>
            <div class="w-full bg-slate-200 rounded-full h-2.5 overflow-hidden">
                <div id="import-csv-progress-bar" class="bg-indigo-600 h-2.5 rounded-full transition-all duration-300" style="width: 0%"></div>
            </div>
            <p id="import-csv-progress-status" class="text-xs text-slate-600 mt-2">Đang chờ worker xử lý...</p>
        </div>

        <div id="import-csv-results" class="hidden mt-4">
            <div class="flex flex-wrap items-center justify-between gap-2 mb-2">
                <h4 class="text-sm font-semibold text-slate-900">Kết quả import (preview lỗi)</h4>
                <div class="flex items-center gap-3">
                    <span id="import-csv-summary" class="text-xs text-slate-600"></span>
                    <a id="import-csv-download-errors" href="#"
                       class="hidden px-3 py-1.5 text-xs font-medium text-red-700 bg-red-50 border border-red-200 rounded-lg hover:bg-red-100 transition-colors inline-flex items-center gap-1">
                        <i data-lucide="download" class="w-3.5 h-3.5"></i>
                        Tải file lỗi (CSV)
                    </a>
                </div>
            </div>
            <p id="import-csv-truncated-note" class="hidden text-xs text-amber-700 mb-2">Chỉ hiển thị tối đa 100 dòng lỗi. Tải file CSV để xem đầy đủ.</p>
            <div class="overflow-x-auto border border-slate-200 rounded-lg max-h-72 overflow-y-auto">
                <table class="min-w-full divide-y divide-slate-200">
                    <thead class="bg-slate-50 sticky top-0">
                        <tr>
                            <th class="px-4 py-2 text-left text-xs font-semibold text-slate-600 uppercase">Dòng</th>
                            <th class="px-4 py-2 text-left text-xs font-semibold text-slate-600 uppercase">Email</th>
                            <th class="px-4 py-2 text-left text-xs font-semibold text-slate-600 uppercase">Trạng thái</th>
                            <th class="px-4 py-2 text-left text-xs font-semibold text-slate-600 uppercase">Chi tiết</th>
                        </tr>
                    </thead>
                    <tbody id="import-csv-results-body" class="bg-white divide-y divide-slate-200"></tbody>
                </table>
            </div>
        </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'); }

    const importProgressUrlTemplate = '{{ route("tenant-assignment.import-csv-progress", ["import_id" => "IMPORT_ID"]) }}';
    const importErrorsDownloadUrlTemplate = '{{ route("tenant-assignment.import-csv-download-errors", ["import_id" => "IMPORT_ID"]) }}';
    let importPollingInterval = null;

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

        function updateImportButtonState() {
            const hasTenant = $('#import-tenant-select').val() !== '';
            const hasFile = $('#import-csv-file')[0].files.length > 0;
            $('#import-csv-btn').prop('disabled', !(hasTenant && hasFile));
        }

        $('#import-tenant-select').on('change', updateImportButtonState);
        $('#import-csv-file').on('change', updateImportButtonState);

        $('#import-csv-btn').on('click', function() {
            const tenantId = $('#import-tenant-select').val();
            const fileInput = $('#import-csv-file')[0];
            if (!tenantId || !fileInput.files.length) {
                showAlert('Vui lòng chọn tenant và file CSV.', 'warning');
                return;
            }

            const formData = new FormData();
            formData.append('tenant_id', tenantId);
            formData.append('csv_file', fileInput.files[0]);
            formData.append('_token', '{{ csrf_token() }}');

            showLoading();
            $.ajax({
                url: '{{ route("tenant-assignment.import-csv") }}',
                method: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                success: function(response) {
                    hideLoading();
                    if (!response.success || !response.import_id) {
                        showAlert(response.message || 'Không thể khởi tạo import.', 'danger');
                        return;
                    }
                    showAlert(response.message || 'Đã đưa vào hàng đợi.', 'success');
                    startImportPolling(response.import_id, response.total_rows || 0);
                },
                error: function(xhr) {
                    hideLoading();
                    const msg = (xhr.responseJSON && xhr.responseJSON.message)
                        || (xhr.responseJSON && xhr.responseJSON.errors && Object.values(xhr.responseJSON.errors).flat().join(' '))
                        || 'Có lỗi xảy ra khi import CSV.';
                    showAlert(msg, 'danger');
                }
            });
        });

        function startImportPolling(importId, totalRows) {
            if (importPollingInterval) {
                clearInterval(importPollingInterval);
            }

            $('#import-csv-progress').removeClass('hidden');
            $('#import-csv-results').addClass('hidden');
            updateImportProgressUi({
                status: 'processing',
                total_rows: totalRows,
                processed_rows: 0,
            });

            pollImportProgress(importId);
            importPollingInterval = setInterval(function() {
                pollImportProgress(importId);
            }, 2000);
        }

        function pollImportProgress(importId) {
            const url = importProgressUrlTemplate.replace('IMPORT_ID', importId);

            $.ajax({
                url: url,
                method: 'GET',
                success: function(res) {
                    if (!res.success || !res.data) {
                        return;
                    }

                    const data = res.data;
                    updateImportProgressUi(data);

                    if (data.status === 'completed') {
                        clearInterval(importPollingInterval);
                        importPollingInterval = null;
                        showAlert(data.message || 'Import hoàn tất.', 'success');
                        displayImportResultsFromProgress(data, importId);
                    } else if (data.status === 'failed') {
                        clearInterval(importPollingInterval);
                        importPollingInterval = null;
                        showAlert(data.message || 'Import thất bại.', 'danger');
                    }
                },
                error: function(xhr) {
                    if (xhr.status === 404 || xhr.status === 403) {
                        clearInterval(importPollingInterval);
                        importPollingInterval = null;
                        const msg = (xhr.responseJSON && xhr.responseJSON.message) || 'Không thể theo dõi tiến trình import.';
                        showAlert(msg, 'danger');
                    }
                }
            });
        }

        function updateImportProgressUi(data) {
            const total = data.total_rows || 0;
            const processed = data.processed_rows || 0;
            const percent = total > 0 ? Math.min(100, Math.round((processed / total) * 100)) : 0;

            $('#import-csv-progress-bar').css('width', percent + '%');
            $('#import-csv-progress-text').text(processed + ' / ' + total + ' dòng');

            if (data.status === 'processing') {
                $('#import-csv-progress-status').text(
                    'Đang xử lý... Thành công: ' + (data.success || 0) + ', Lỗi: ' + (data.error || 0)
                );
            } else if (data.status === 'completed') {
                $('#import-csv-progress-status').text(data.message || 'Hoàn tất.');
            } else if (data.status === 'failed') {
                $('#import-csv-progress-status').text(data.message || 'Import thất bại.');
            }
        }

        function displayImportResultsFromProgress(data, importId) {
            const results = data.results_preview || [];
            const $section = $('#import-csv-results');
            const $tbody = $('#import-csv-results-body');
            $tbody.empty();

            $('#import-csv-summary').text(
                'Thành công: ' + (data.success || 0) + ' / Lỗi: ' + (data.error || 0)
            );

            const $download = $('#import-csv-download-errors');
            if (data.error_log_available) {
                $download.attr('href', importErrorsDownloadUrlTemplate.replace('IMPORT_ID', importId));
                $download.removeClass('hidden');
            } else {
                $download.addClass('hidden');
            }

            if (data.results_truncated) {
                $('#import-csv-truncated-note').removeClass('hidden');
            } else {
                $('#import-csv-truncated-note').addClass('hidden');
            }

            if (results.length === 0 && (data.error || 0) === 0) {
                $tbody.append('<tr><td colspan="4" class="px-4 py-3 text-sm text-slate-500 text-center">Không có lỗi. Tất cả dòng import thành công.</td></tr>');
            } else if (results.length === 0) {
                $tbody.append('<tr><td colspan="4" class="px-4 py-3 text-sm text-slate-500 text-center">Có lỗi — tải file CSV để xem chi tiết.</td></tr>');
            } else {
                results.forEach(function(item) {
                    $tbody.append(`
                        <tr class="hover:bg-slate-50">
                            <td class="px-4 py-2 text-sm text-slate-700">${item.row || ''}</td>
                            <td class="px-4 py-2 text-sm text-slate-700">${item.email || ''}</td>
                            <td class="px-4 py-2 text-sm font-medium text-red-600">Lỗi</td>
                            <td class="px-4 py-2 text-sm text-slate-600">${item.message || ''}</td>
                        </tr>
                    `);
                });
            }

            $section.removeClass('hidden');
            if (typeof lucide !== 'undefined') {
                lucide.createIcons();
            }
        }

        $('#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