@extends('layouts.admin')

@section('title', 'User Migration Audit')

@section('content')
<div class="container-fluid d-flex flex-column" style="height: calc(100vh - 140px); overflow: hidden; padding-bottom: 20px;">
    <!-- Page Header with Filter Button -->
    <div class="d-flex justify-content-between align-items-center mb-2 flex-shrink-0" style="min-height: 40px;">
        <h4 class="mb-0"><i class="uil uil-exchange-alt me-2"></i>User Migration Audit</h4>
        <button class="btn btn-primary btn-sm" type="button" data-bs-toggle="offcanvas" data-bs-target="#filtersOffcanvas" aria-controls="filtersOffcanvas">
            <i class="uil uil-filter me-1"></i>Filters & Options
            <span class="badge bg-light text-primary ms-2">3</span>
        </button>
    </div>

    <!-- Migration Statistics Cards -->
    <div class="row g-2 mb-2 flex-shrink-0" style="max-height: 110px;">
        <div class="col-xl-3 col-md-6">
            <div class="card border-0 shadow-sm h-100" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
                <div class="card-body text-white p-3">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h6 class="mb-1 text-white-50 small">Users Migrated</h6>
                            <h3 class="mb-0 fw-bold" id="stat-migrated">
                                <div class="spinner-border spinner-border-sm" role="status">
                                    <span class="visually-hidden">Loading...</span>
                                </div>
                            </h3>
                        </div>
                        <div class="fs-1 opacity-50">
                            <i class="uil uil-check-circle"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-md-6">
            <div class="card border-0 shadow-sm h-100" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);">
                <div class="card-body text-white p-3">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h6 class="mb-1 text-white-50 small">Pending Migration</h6>
                            <h3 class="mb-0 fw-bold" id="stat-pending">
                                <div class="spinner-border spinner-border-sm" role="status">
                                    <span class="visually-hidden">Loading...</span>
                                </div>
                            </h3>
                        </div>
                        <div class="fs-1 opacity-50">
                            <i class="uil uil-clock"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-md-6">
            <div class="card border-0 shadow-sm h-100" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);">
                <div class="card-body text-white p-3">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h6 class="mb-1 text-white-50 small">Old Profile Table</h6>
                            <h3 class="mb-0 fw-bold" id="stat-profile">
                                <div class="spinner-border spinner-border-sm" role="status">
                                    <span class="visually-hidden">Loading...</span>
                                </div>
                            </h3>
                        </div>
                        <div class="fs-1 opacity-50">
                            <i class="uil uil-database"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-md-6">
            <div class="card border-0 shadow-sm h-100" style="background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);">
                <div class="card-body text-white p-3">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h6 class="mb-1 text-white-50 small">Total Registered</h6>
                            <h3 class="mb-0 fw-bold" id="stat-registered">
                                <div class="spinner-border spinner-border-sm" role="status">
                                    <span class="visually-hidden">Loading...</span>
                                </div>
                            </h3>
                        </div>
                        <div class="fs-1 opacity-50">
                            <i class="uil uil-users-alt"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Common Results Section - Always Visible -->
    <div class="card flex-fill d-flex flex-column mt-6" id="results-card" style="min-height: 0; max-height: 100%; overflow: hidden;">
        <div class="card-header bg-body-tertiary d-flex justify-content-between align-items-center flex-shrink-0" style="min-height: 50px;">
            <h6 class="mb-0">
                <i class="uil uil-list-ul me-2"></i>Results 
                <span class="badge bg-primary ms-2" id="results-count">0</span>
            </h6>
            <button type="button" class="btn btn-sm btn-success disabled" id="export-csv-btn" disabled>
                <i class="uil uil-file-download me-1"></i>Export Results
            </button>
        </div>
        <div class="card-body p-0 flex-fill" style="overflow-y: auto; overflow-x: hidden;">
            <!-- Empty State Message (shown by default) -->
            <div class="d-flex align-items-center justify-content-center h-100" id="empty-state" style="min-height: 300px;">
                <div class="text-center p-4">
                    <i class="uil uil-filter text-muted" style="font-size: 4rem; opacity: 0.3;"></i>
                    <h5 class="text-muted mt-3">No Results Yet</h5>
                    <p class="text-muted mb-3">Use the <strong>"Filters & Options"</strong> button above to:</p>
                    <div class="d-flex flex-column align-items-center gap-2 text-muted small">
                        <div><i class="uil uil-check-circle text-primary me-2"></i>Check UIDs in bulk</div>
                        <div><i class="uil uil-calendar-alt text-success me-2"></i>Filter by migration date range</div>
                        <div><i class="uil uil-import text-info me-2"></i>Import UIDs from CSV/Excel</div>
                    </div>
                    <button class="btn btn-primary btn-sm mt-3" type="button" data-bs-toggle="offcanvas" data-bs-target="#filtersOffcanvas">
                        <i class="uil uil-filter me-1"></i>Open Filters & Options
                    </button>
                </div>
            </div>
            
            <!-- Results Table (hidden by default) -->
            <div class="d-none" id="results-table-container" style="width: 100%;">
                <table class="table table-hover table-sm mb-0" id="results-table">
                    <thead class="table-light" style="position: sticky; top: 0; z-index: 10; background: var(--bs-light);">
                        <tr>
                            <th style="width: 50px;">#</th>
                            <th>UID</th>
                            <th>Migration Status</th>
                            <th>Name</th>
                            <th>Email</th>
                            <th style="width: 80px;">Actions</th>
                        </tr>
                    </thead>
                    <tbody id="results-body">
                        <!-- Results will be populated here -->
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- Filters Offcanvas (Slides from right) -->
    <div class="offcanvas offcanvas-end" tabindex="-1" id="filtersOffcanvas" aria-labelledby="filtersOffcanvasLabel">
        <div class="offcanvas-header bg-primary text-white">
            <h5 class="offcanvas-title" id="filtersOffcanvasLabel">
                <i class="uil uil-filter me-2"></i>Migration Audit Filters
            </h5>
            <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close"></button>
        </div>
        <div class="offcanvas-body p-0">
            <!-- Accordion for each filter section -->
            <div class="accordion accordion-flush" id="filtersAccordion">
                <!-- Bulk UID Check -->
                <div class="accordion-item">
                    <h2 class="accordion-header" id="headingBulkUID">
                        <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseBulkUID" aria-expanded="true" aria-controls="collapseBulkUID">
                            <i class="uil uil-users-alt me-2 text-primary"></i><strong>Bulk UID Check</strong>
                        </button>
                    </h2>
                    <div id="collapseBulkUID" class="accordion-collapse collapse show" aria-labelledby="headingBulkUID" data-bs-parent="#filtersAccordion">
                        <div class="accordion-body">
                            <form id="bulk-uid-form" autocomplete="off">
                                <div class="mb-3">
                                    <label for="bulk-uid-input" class="form-label small fw-semibold">Enter UIDs</label>
                                    <span class="badge bg-info float-end" id="uid-counter">0 UIDs entered</span>
                                    <textarea class="form-control" id="bulk-uid-input" name="uid" rows="10" 
                                        placeholder="Enter UIDs (comma separated or one per line)&#10;Example:&#10;TKD001,TKD002&#10;or&#10;TKD001&#10;TKD002" required></textarea>
                                    <span class="badge bg-warning mt-2 d-none" id="uid-limit-warning">Max: {{ $maxBulkUids }}</span>
                                </div>
                                <div class="d-grid gap-2">
                                    <button type="submit" class="btn btn-primary">
                                        <i class="uil uil-search me-1"></i>Check UIDs
                                    </button>
                                    <button type="button" class="btn btn-outline-secondary" id="clear-bulk-btn">
                                        <i class="uil uil-times me-1"></i>Clear
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>

                <!-- Migration Date Range -->
                <div class="accordion-item">
                    <h2 class="accordion-header" id="headingDateRange">
                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseDateRange" aria-expanded="false" aria-controls="collapseDateRange">
                            <i class="uil uil-calendar-alt me-2 text-success"></i><strong>Migration Date Range</strong>
                        </button>
                    </h2>
                    <div id="collapseDateRange" class="accordion-collapse collapse" aria-labelledby="headingDateRange" data-bs-parent="#filtersAccordion">
                        <div class="accordion-body">
                            <form id="date-range-form" autocomplete="off">
                                <div class="mb-3">
                                    <label for="migration-date-range" class="form-label small fw-semibold">Select Date Range</label>
                                    <input type="text" class="form-control" id="migration-date-range" placeholder="Select date range..." readonly>
                                    <input type="hidden" id="migration-date-from">
                                    <input type="hidden" id="migration-date-to">
                                    <div class="form-text">Filter users who migrated within this date range</div>
                                </div>
                                <div class="alert alert-info py-2 small mb-3">
                                    <i class="uil uil-info-circle me-1"></i>
                                    Select date range and click the button below to view users who migrated during that period.
                                </div>
                                <div class="d-grid">
                                    <button type="submit" class="btn btn-success">
                                        <i class="uil uil-filter me-1"></i>Filter & Show
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>

                <!-- Import CSV/Excel -->
                <div class="accordion-item">
                    <h2 class="accordion-header" id="headingImport">
                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseImport" aria-expanded="false" aria-controls="collapseImport">
                            <i class="uil uil-import me-2 text-info"></i><strong>Import UIDs (CSV/Excel)</strong>
                        </button>
                    </h2>
                    <div id="collapseImport" class="accordion-collapse collapse" aria-labelledby="headingImport" data-bs-parent="#filtersAccordion">
                        <div class="accordion-body">
                            <form id="import-form" autocomplete="off">
                                <div class="mb-3">
                                    <label for="bulk-import-file" class="form-label small fw-semibold">Upload File</label>
                                    <input type="file" class="form-control" id="bulk-import-file" accept=".csv,.xlsx,.xls" required>
                                    <div class="form-text">Max 10MB, CSV/XLSX format</div>
                                </div>
                                <div class="alert alert-warning py-2 small mb-3">
                                    <i class="uil uil-exclamation-triangle me-1"></i>
                                    <strong>File should contain UIDs</strong> in the first column. System will check each UID and return marked file.
                                </div>
                                <div class="d-grid">
                                    <button type="submit" class="btn btn-info">
                                        <i class="uil uil-file-search-alt me-1"></i>Import & Check
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Export Progress Modal -->
    <div class="modal fade" id="exportProgressModal" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h6 class="modal-title"><i class="uil uil-export me-2"></i>Exporting Migration Report</h6>
                </div>
                <div class="modal-body">
                    <p class="mb-3">Please wait while we generate your CSV report...</p>
                    <div class="progress" style="height: 25px;">
                        <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" id="export-progress-bar" style="width: 0%">
                            <span id="export-progress-text">0%</span>
                        </div>
                    </div>
                    <p class="text-muted small mt-2 mb-0" id="export-progress-info">Initializing...</p>
                </div>
                <div class="modal-footer d-none" id="export-complete-footer">
                    <button type="button" class="btn btn-success" id="download-csv-btn">
                        <i class="uil uil-download-alt me-2"></i>Download CSV
                    </button>
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Details Modal -->
    <div class="modal fade" id="detailsModal" tabindex="-1" aria-labelledby="detailsModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="detailsModalLabel">
                        <i class="uil uil-info-circle me-2"></i>Migration Details
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body" id="detailsModalBody">
                    <!-- Details will be loaded here -->
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Include custom styles -->
<style>
.timeline {
    position: relative;
    padding-left: 30px;
}

.timeline::before {
    content: '';
    position: absolute;
    left: 15px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #dee2e6;
}

.timeline-item {
    position: relative;
    margin-bottom: 25px;
}

.timeline-marker {
    position: absolute;
    left: -23px;
    top: 5px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 3px solid #fff;
    box-shadow: 0 0 0 3px #dee2e6;
}

.timeline-content {
    background: #f8f9fa;
    padding: 12px 15px;
    border-radius: 8px;
    border-left: 3px solid #007bff;
}

.timeline-title {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 5px;
}

.timeline-text {
    font-size: 13px;
    margin-bottom: 3px;
}

.accordion-button:not(.collapsed) {
    background-color: #f8f9fa;
}

.badge-pulse {
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.rotating {
    animation: rotate 1s linear infinite;
}

@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Offcanvas width */
.offcanvas-end {
    width: 450px !important;
}

@media (max-width: 768px) {
    .offcanvas-end {
        width: 90% !important;
    }
}
</style>

@endsection

@section('scripts')
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">

<script>
const MAX_BULK_UIDS = {{ $maxBulkUids }};
let currentResults = [];
let exportProgressInterval = null;
let currentProgressKey = null;

// Load Statistics via AJAX
function loadStatistics() {
    $.ajax({
        url: '{{ route("admin.migration-checker.statistics") }}',
        type: 'GET',
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },
        success: function(response) {
            if (response.success && response.stats) {
                // Update statistics cards with animation
                animateNumber('#stat-migrated', response.stats.migrated_count);
                animateNumber('#stat-pending', response.stats.pending_migration);
                animateNumber('#stat-profile', response.stats.profile_table_count);
                animateNumber('#stat-registered', response.stats.total_registered);
            }
        },
        error: function(xhr) {
            // Show error state in cards
            $('#stat-migrated, #stat-pending, #stat-profile, #stat-registered').html(
                '<small class="text-white-50">Error</small>'
            );
            console.error('Failed to load statistics:', xhr);
        }
    });
}

// Animate number from 0 to target with counter effect
function animateNumber(selector, target) {
    const $element = $(selector);
    const duration = 1000; // 1 second
    const steps = 30;
    const increment = target / steps;
    let current = 0;
    
    const timer = setInterval(function() {
        current += increment;
        if (current >= target) {
            current = target;
            clearInterval(timer);
        }
        $element.text(Math.floor(current).toLocaleString());
    }, duration / steps);
}

$(document).ready(function() {
    // Load statistics via AJAX in background
    loadStatistics();

    // Initialize Flatpickr for migration date range
    const migrationDateRangePicker = flatpickr("#migration-date-range", {
        mode: "range",
        dateFormat: "d/m/Y",
        onChange: function(selectedDates, dateStr, instance) {
            if (selectedDates.length === 2) {
                $('#migration-date-from').val(flatpickr.formatDate(selectedDates[0], 'Y-m-d'));
                $('#migration-date-to').val(flatpickr.formatDate(selectedDates[1], 'Y-m-d'));
            }
        }
    });

    // UID Counter for bulk input
    $('#bulk-uid-input').on('input', function() {
        const input = $(this).val().trim();
        if (input.length === 0) {
            $('#uid-counter').text('0 UIDs entered').removeClass('bg-danger').addClass('bg-info');
            $('#uid-limit-warning').addClass('d-none');
            return;
        }

        const uids = input.split(/[\s,]+/).filter(uid => uid.trim().length > 0);
        const count = uids.length;
        
        $('#uid-counter').text(count + ' UIDs entered');
        
        if (count > MAX_BULK_UIDS) {
            $('#uid-counter').removeClass('bg-info').addClass('bg-danger');
            $('#uid-limit-warning').removeClass('d-none');
        } else {
            $('#uid-counter').removeClass('bg-danger').addClass('bg-info');
            $('#uid-limit-warning').addClass('d-none');
        }
    });

    // Clear bulk input
    $('#clear-bulk-btn').click(function() {
        $('#bulk-uid-input').val('');
        $('#uid-counter').text('0 UIDs entered').removeClass('bg-danger').addClass('bg-info');
        $('#uid-limit-warning').addClass('d-none');
    });

    // Bulk UID Form Submit (Card 1)
    $('#bulk-uid-form').submit(function(e) {
        e.preventDefault();
        const uids = $('#bulk-uid-input').val().trim();
        if (!uids) {
            showToast('error', 'Please enter at least one UID');
            return;
        }

        // Validate count
        const uidArray = uids.split(/[\s,]+/).filter(uid => uid.trim().length > 0);
        if (uidArray.length > MAX_BULK_UIDS) {
            showToast('error', `You entered ${uidArray.length} UIDs. Maximum allowed is ${MAX_BULK_UIDS} UIDs per check.`);
            return;
        }

        // Close offcanvas
        const offcanvas = bootstrap.Offcanvas.getInstance(document.getElementById('filtersOffcanvas'));
        if (offcanvas) offcanvas.hide();

        checkUIDs(uids);
    });

    // Date Range Form Submit (Card 2)
    $('#date-range-form').submit(function(e) {
        e.preventDefault();
        const dateFrom = $('#migration-date-from').val();
        const dateTo = $('#migration-date-to').val();
        
        if (!dateFrom || !dateTo) {
            showToast('error', 'Please select a date range');
            return;
        }

        // Close offcanvas
        const offcanvas = bootstrap.Offcanvas.getInstance(document.getElementById('filtersOffcanvas'));
        if (offcanvas) offcanvas.hide();

        // Fetch and display results
        $.ajax({
            url: '{{ route("admin.migration-checker.export-by-date") }}',
            type: 'GET',
            data: {
                date_from: dateFrom,
                date_to: dateTo,
                show_results: true
            },
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            beforeSend: function() {
                showLoadingOverlay();
            },
            success: function(response) {
                hideLoadingOverlay();
                
                if (response.success && response.results) {
                    currentResults = response.results;
                    displayResults(response.results);
                    $('#results-card').removeClass('d-none');
                    showToast('success', `Found ${response.results.length} users migrated in selected date range`);
                }
            },
            error: function(xhr) {
                hideLoadingOverlay();
                const error = xhr.responseJSON?.error || 'Failed to fetch date range data';
                showToast('error', error);
            }
        });
    });

    // Import Form Submit (Card 3)
    $('#import-form').submit(function(e) {
        e.preventDefault();
        
        const fileInput = $('#bulk-import-file')[0];
        if (!fileInput.files.length) {
            showToast('error', 'Please select a CSV or Excel file');
            return;
        }
        
        const file = fileInput.files[0];
        const fileExt = file.name.split('.').pop().toLowerCase();
        
        // Validate file extension
        if (!['csv', 'xlsx', 'xls'].includes(fileExt)) {
            showToast('error', 'Invalid file format. Please upload CSV or Excel file (.csv, .xlsx, .xls)');
            return;
        }
        
        // Validate file size (10MB)
        if (file.size > 10 * 1024 * 1024) {
            showToast('error', 'File size exceeds 10MB limit');
            return;
        }

        // Close offcanvas
        const offcanvas = bootstrap.Offcanvas.getInstance(document.getElementById('filtersOffcanvas'));
        if (offcanvas) offcanvas.hide();
        
        const formData = new FormData();
        formData.append('file', file);
        
        $.ajax({
            url: '{{ route("admin.migration-checker.import") }}',
            type: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            beforeSend: function() {
                showLoadingOverlay();
                $('#import-form button[type="submit"]').prop('disabled', true).html('<i class="uil uil-spinner-alt me-1 rotating"></i>Processing...');
            },
            success: function(response) {
                hideLoadingOverlay();
                $('#import-form button[type="submit"]').prop('disabled', false).html('<i class="uil uil-file-search-alt me-1"></i>Import & Check');
                
                if (response.success) {
                    currentResults = response.results;
                    displayResults(response.results);
                    $('#results-card').removeClass('d-none');
                    
                    showToast('success', `✓ Processed ${response.total_checked} UIDs successfully. View results below.`);
                    
                    // Reset file input
                    $('#bulk-import-file').val('');
                }
            },
            error: function(xhr) {
                hideLoadingOverlay();
                $('#import-form button[type="submit"]').prop('disabled', false).html('<i class="uil uil-file-search-alt me-1"></i>Import & Check');
                
                let errorMsg = 'Failed to import file';
                
                if (xhr.status === 422) {
                    // Validation error
                    const errors = xhr.responseJSON?.errors;
                    if (errors && errors.file) {
                        errorMsg = errors.file[0];
                    }
                } else if (xhr.responseJSON?.error) {
                    errorMsg = xhr.responseJSON.error;
                }
                
                showToast('error', '✗ ' + errorMsg);
                console.error('Import error:', xhr);
            }
        });
    });

    // Export CSV
    $('#export-csv-btn').click(function() {
        if (currentResults.length === 0) {
            showToast('warning', 'No results to export');
            return;
        }
        exportCSV();
    });

    // View Details Button Handler
    $(document).on('click', '.view-details-btn', function() {
        const resultData = $(this).data('result');
        const detailsHtml = createDetailedView(resultData);
        $('#detailsModalBody').html(detailsHtml);
        $('#detailsModal').modal('show');
    });
});

// Check UIDs via AJAX
function checkUIDs(uidInput) {
    const data = {
        uid: uidInput
    };

    $.ajax({
        url: '{{ route("admin.migration-checker.check") }}',
        type: 'POST',
        data: data,
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },
        beforeSend: function() {
            showLoadingOverlay();
        },
        success: function(response) {
            hideLoadingOverlay();
            
            if (response.success) {
                currentResults = response.results;
                displayResults(response.results);
                $('#results-card').removeClass('d-none');
                showToast('success', `Checked ${response.total_checked} UIDs and found ${response.total_results} results`);
            }
        },
        error: function(xhr) {
            hideLoadingOverlay();
            const error = xhr.responseJSON?.error || 'Failed to check UIDs';
            showToast('error', error);
        }
    });
}

// Display Results in Table
function displayResults(results) {
    const tbody = $('#results-body');
    tbody.empty();
    
    if (results.length === 0) {
        // Show empty state, hide table
        $('#empty-state').removeClass('d-none');
        $('#results-table-container').addClass('d-none');
        $('#results-count').text('0');
        $('#export-csv-btn').addClass('disabled').prop('disabled', true);
        return;
    }
    
    // Hide empty state, show table
    $('#empty-state').addClass('d-none');
    $('#results-table-container').removeClass('d-none');
    $('#results-count').text(results.length);
    $('#export-csv-btn').removeClass('disabled').prop('disabled', false);
    
    results.forEach((result, index) => {
        const row = createResultRow(result, index + 1);
        tbody.append(row);
    });
}

// Create Result Row
function createResultRow(result, srNo) {
    const portalUser = result.portal_user;
    const oldProfile = result.old_profile;
    const alert = result.alert;
    
    const name = portalUser?.name || oldProfile?.name || 'N/A';
    const email = portalUser?.email || oldProfile?.email || 'N/A';
    const expiryDate = portalUser?.expiry_date ? new Date(portalUser.expiry_date).toLocaleDateString('en-GB') : 'N/A';
    const paymentStatus = portalUser?.paid ? '<span class="badge bg-success">Paid</span>' : '<span class="badge bg-danger">Unpaid</span>';
    
    const foundInBadges = result.found_in.map(location => {
        const badgeClass = location === 'portal_users' ? 'bg-primary' : location === 'profile' ? 'bg-secondary' : 'bg-info';
        const displayName = location === 'portal_users' ? 'Portal' : location === 'profile' ? 'Old System' : location;
        return `<span class="badge ${badgeClass} me-1">${displayName}</span>`;
    }).join('');
    
    const rowId = 'result-' + srNo;
    
    // Badge color logic for migration status
    let migrationBadge = 'bg-secondary';
    if (result.migration_status === 'Migrated') migrationBadge = 'bg-success';
    else if (result.migration_status === 'Pending Migration') migrationBadge = 'bg-warning';
    else if (result.migration_status === 'Not Found') migrationBadge = 'bg-dark';
    else if (result.migration_status === 'New User') migrationBadge = 'bg-info';
    else if (result.migration_status.includes('Old Profile Not Found')) migrationBadge = 'bg-danger';
//  <td>${foundInBadges || '<span class="badge bg-dark">Not Found</span>'}</td>
//  <td>
//                 <span class="badge ${alert.badge_class}">
//                     <i class="${alert.icon} me-1"></i>${alert.level.toUpperCase()}
//                 </span>
//             </td>
//  <td>${portalUser ? paymentStatus : 'N/A'}</td>
//             <td><small>${expiryDate}</small></td>
    return `
        <tr>
            <td>${srNo}</td>
            <td><strong>${result.uid}</strong></td>
           
            <td><span class="badge ${migrationBadge}">${result.migration_status}</span></td>
           
            <td>${name}</td>
            <td><small>${email}</small></td>
           
            <td>
                <button class="btn btn-sm btn-primary view-details-btn" type="button" data-result='${JSON.stringify(result).replace(/'/g, "&#39;")}'>
                    <i class="uil uil-eye"></i> 
                </button>
            </td>
        </tr>
    `;
}

// Create Detailed View
function createDetailedView(result) {
    const portalUser = result.portal_user;
    const oldProfile = result.old_profile;
    const payments = result.payments;
    const timeline = result.timeline;
    
    let html = '<div class="p-3">';
    html += '<div class="row g-3">';
    
    // Alert Message
    html += `
        <div class="col-12">
            <div class="alert alert-${result.alert.level === 'critical' ? 'danger' : result.alert.level === 'warning' ? 'warning' : result.alert.level === 'success' ? 'success' : 'info'} mb-0">
                <i class="${result.alert.icon} me-2"></i>${result.alert.message}
            </div>
        </div>
    `;
    
    // User Details Cards
    html += '<div class="col-md-6">';
    
    // Portal User Card
    if (portalUser) {
        html += `
            <div class="card mb-3">
                <div class="card-header bg-primary text-white">
                    <h6 class="mb-0"><i class="uil uil-user me-2"></i>Portal User Details</h6>
                </div>
                <div class="card-body">
                    <table class="table table-sm mb-0">
                        <tr><th width="40%">UID:</th><td>${portalUser.reg_uid || 'N/A'}</td></tr>
                        <tr><th>Old UID:</th><td>${portalUser.old_uid || 'N/A'}</td></tr>
                        <tr><th>Name:</th><td>${portalUser.name}</td></tr>
                        <tr><th>Email:</th><td>${portalUser.email}</td></tr>
                        <tr><th>Mobile:</th><td>${portalUser.mobile || 'N/A'}</td></tr>
                        <tr><th>Is Old User:</th><td>${portalUser.is_old_user ? '<span class="badge bg-success">Yes</span>' : '<span class="badge bg-secondary">No</span>'}</td></tr>
                        <tr><th>Expired:</th><td>${portalUser.expired ? '<span class="badge bg-danger">Yes</span>' : '<span class="badge bg-success">No</span>'}</td></tr>
                        <tr><th>Paid:</th><td>${portalUser.paid ? '<span class="badge bg-success">Yes</span>' : '<span class="badge bg-danger">No</span>'}</td></tr>
                        <tr><th>Valid From:</th><td>${portalUser.valid_from ? new Date(portalUser.valid_from).toLocaleDateString('en-GB') : 'N/A'}</td></tr>
                        <tr><th>Valid Up To:</th><td>${portalUser.valid_up_to ? new Date(portalUser.valid_up_to).toLocaleDateString('en-GB') : 'N/A'}</td></tr>
                        <tr><th>State:</th><td>${portalUser.state}</td></tr>
                        <tr><th>District:</th><td>${portalUser.district}</td></tr>
                    </table>
                    <a href="${portalUser.profile_link}" target="_blank" class="btn btn-sm btn-phoenix-primary mt-2">
                        <i class="uil uil-external-link-alt me-1"></i>View Full Profile
                    </a>
                </div>
            </div>
        `;
    }
    
    // Old Profile Card
    if (oldProfile) {
        html += `
            <div class="card mb-3">
                <div class="card-header bg-secondary text-white">
                    <h6 class="mb-0"><i class="uil uil-database me-2"></i>Old System Profile</h6>
                </div>
                <div class="card-body">
                    <table class="table table-sm mb-0">
                        <tr><th width="40%">Reg ID:</th><td>${oldProfile.reg_id}</td></tr>
                        <tr><th>Name:</th><td>${oldProfile.name}</td></tr>
                        <tr><th>Email:</th><td>${oldProfile.email || 'N/A'}</td></tr>
                        <tr><th>Mobile:</th><td>${oldProfile.mobile || 'N/A'}</td></tr>
                        <tr><th>Profile Type:</th><td>${oldProfile.profile || 'N/A'}</td></tr>
                        <tr><th>Payment ID:</th><td>${oldProfile.payment_id || 'N/A'}</td></tr>
                        <tr><th>Order ID:</th><td>${oldProfile.order_id || 'N/A'}</td></tr>
                    </table>
                </div>
            </div>
        `;
    }
    
    html += '</div>';
    
    // Timeline and Payment History
    html += '<div class="col-md-6">';
    
    // Timeline
    if (timeline && timeline.length > 0) {
        html += `
            <div class="card mb-3">
                <div class="card-header bg-info text-white">
                    <h6 class="mb-0"><i class="uil uil-clock me-2"></i>Migration Timeline</h6>
                </div>
                <div class="card-body">
                    <div class="timeline">
        `;
        
        timeline.forEach(event => {
            html += `
                <div class="timeline-item">
                    <div class="timeline-marker bg-${event.color}"></div>
                    <div class="timeline-content">
                        <h6 class="timeline-title">${event.title}</h6>
                        <p class="timeline-text mb-1">${event.description}</p>
                        <small class="text-muted">
                            <i class="uil uil-calendar-alt me-1"></i>${event.formatted_date}
                            <span class="ms-2">(${event.relative_date})</span>
                        </small>
                    </div>
                </div>
            `;
        });
        
        html += `
                    </div>
                </div>
            </div>
        `;
    }
    
    // Payment History
    if (payments && payments.length > 0) {
        html += `
            <div class="card mb-3">
                <div class="card-header bg-success text-white">
                    <h6 class="mb-0"><i class="uil uil-bill me-2"></i>Payment History</h6>
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table table-sm mb-0">
                            <thead>
                                <tr>
                                    <th>Purpose</th>
                                    <th>Amount</th>
                                    <th>Status</th>
                                    <th>Date</th>
                                </tr>
                            </thead>
                            <tbody>
        `;
        
        payments.forEach(payment => {
            const statusBadge = payment.status === 'captured' ? 'bg-success' : 'bg-warning';
            html += `
                <tr>
                    <td><small>${payment.purpose}</small></td>
                    <td><small><strong>${payment.formatted_amount}</strong></small></td>
                    <td><span class="badge ${statusBadge}">${payment.status}</span></td>
                    <td><small>${payment.formatted_date}</small></td>
                </tr>
            `;
        });
        
        html += `
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        `;
    }
    
    // Months Since Migration
    if (result.months_since_migration !== null) {
        html += `
            <div class="alert alert-info">
                <i class="uil uil-calendar-alt me-2"></i>
                <strong>Time Since Migration:</strong> ${result.months_since_migration} months
                <small class="d-block text-muted mt-1">(Migration system launched: June 2024)</small>
            </div>
        `;
    }
    
    html += '</div>';
    html += '</div>';
    html += '</div>';
    
    return html;
}

// Export CSV
function exportCSV() {
    if (!currentResults || currentResults.length === 0) {
        showToast('warning', 'No results to export');
        return;
    }
    
    // Generate CSV from current results directly
    const csvContent = generateCSVFromResults(currentResults);
    const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
    const link = document.createElement('a');
    const url = URL.createObjectURL(blob);
    
    link.setAttribute('href', url);
    link.setAttribute('download', 'migration_results_' + Date.now() + '.csv');
    link.style.visibility = 'hidden';
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    
    showToast('success', '✓ Exported ' + currentResults.length + ' results to CSV');
}

// Generate CSV content from results
function generateCSVFromResults(results) {
    // Simplified to 5 essential columns as requested
    const headers = ['UID', 'Migration Status', 'Name', 'Email', 'Remarks'];
    
    let csv = headers.join(',') + '\n';
    
    results.forEach((result) => {
        const portalUser = result.portal_user;
        const oldProfile = result.old_profile;
        
        const name = portalUser?.name || oldProfile?.name || 'N/A';
        const email = portalUser?.email || oldProfile?.email || 'N/A';
        const remarks = result.alert?.message || '';
        
        // Escape fields that might contain commas or quotes
        const row = [
            escapeCSV(result.uid),
            escapeCSV(result.migration_status),
            escapeCSV(name),
            escapeCSV(email),
            escapeCSV(remarks)
        ];
        
        csv += row.join(',') + '\n';
    });
    
    return csv;
}

// Escape CSV fields
function escapeCSV(field) {
    if (field === null || field === undefined) {
        return '';
    }
    
    const str = String(field);
    
    // If field contains comma, quote, or newline, wrap in quotes and escape quotes
    if (str.includes(',') || str.includes('"') || str.includes('\n')) {
        return '"' + str.replace(/"/g, '""') + '"';
    }
    
    return str;
}

// Utility Functions
function showLoadingOverlay() {
    $('body').append(`
        <div id="loading-overlay" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 9999; display: flex; align-items: center; justify-content: center;">
            <div class="spinner-border text-light" role="status" style="width: 3rem; height: 3rem;">
                <span class="visually-hidden">Loading...</span>
            </div>
        </div>
    `);
}

function hideLoadingOverlay() {
    $('#loading-overlay').remove();
}

function showToast(type, message) {
    const bgClass = type === 'success' ? 'bg-success' : type === 'error' ? 'bg-danger' : type === 'warning' ? 'bg-warning' : 'bg-info';
    const icon = type === 'success' ? 'uil-check-circle' : type === 'error' ? 'uil-times-circle' : type === 'warning' ? 'uil-exclamation-triangle' : 'uil-info-circle';
    
    const toast = $(`
        <div class="toast align-items-center text-white ${bgClass} border-0" role="alert" style="position: fixed; top: 20px; right: 20px; z-index: 10000;">
            <div class="d-flex">
                <div class="toast-body">
                    <i class="uil ${icon} me-2"></i>${message}
                </div>
                <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button>
            </div>
        </div>
    `);
    
    $('body').append(toast);
    const bsToast = new bootstrap.Toast(toast[0]);
    bsToast.show();
    
    setTimeout(() => toast.remove(), 5000);
}
</script>
@endsection