@include('components.header')

<!-- Font Awesome for icons -->
{{-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> --}}

<style>
    .custom-blue {
        background-color: var(--primary-theme-color);
    }

    .custom-blue:hover {
        background-color: #0d2f57;
    }

    /* Card hover effect */
    .registration-card {
        transition: all 0.3s ease;
        border-left: 4px solid transparent;
    }

    .registration-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
        border-left-color: var(--primary-theme-color);
    }

    /* Accordion Animation */
    .reg-accordion-content {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.5s ease-out, opacity 0.3s ease-out;
        opacity: 0;
    }

    .reg-accordion-content.accordion-open {
        max-height: 10000px; /* Very large value to accommodate all content */
        opacity: 1;
        overflow-y: visible;
    }

    .accordion-icon {
        transition: transform 0.3s ease;
    }

    .accordion-icon.rotated {
        transform: rotate(180deg);
    }

    /* Details section styling */
    .details-section {
        background: linear-gradient(135deg, #f8f9fc 0%, #f0f4f8 100%);
        border-radius: 12px;
        padding: 16px;
        margin-bottom: 12px;
    }

    .details-section-title {
        display: flex;
        align-items: center;
        gap: 8px;
        font-weight: 600;
        color: #1e293b;
        margin-bottom: 12px;
        font-size: 0.95rem;
    }

    .details-section-title i {
        color: var(--primary-theme-color);
    }

    .details-row {
        display: flex;
        margin-bottom: 6px;
        font-size: 0.875rem;
    }

    .details-label {
        color: #64748b;
        width: 140px;
        flex-shrink: 0;
    }

    .details-value {
        color: #1e293b;
        font-weight: 500;
    }

    /* Custom select styling */
    .custom-select {
        appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236b7280'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 12px center;
        background-size: 16px;
        padding-right: 40px;
    }

    /* Search input styling */
    .search-input {
        transition: all 0.2s ease;
    }

    .search-input:focus {
        box-shadow: 0 0 0 3px rgba(0, 0, 128, 0.1);
    }

    /* Page section styling */
    .page-section {
        margin-bottom: 24px;
    }

    .page-section:last-child {
        margin-bottom: 0;
    }

    .page-header {
        background: linear-gradient(90deg, rgba(0, 0, 128, 0.05) 0%, transparent 100%);
        padding: 8px 12px;
        border-radius: 8px 8px 0 0;
    }

    /* Group section styling */
    .group-section {
        background: white;
        border-radius: 10px;
        padding: 16px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
        border: 1px solid #e5e7eb;
    }

    .group-header h5 {
        margin: 0;
        color: #374151;
    }

    /* Field item styling */
    .field-item {
        padding: 8px 0;
    }

    .field-item span {
        display: block;
    }

    /* Status badge */
    .status-badge {
        font-size: 0.75rem;
        padding: 4px 12px;
        border-radius: 20px;
        font-weight: 600;
        text-transform: capitalize;
    }

    .status-complete {
        background-color: #dcfce7;
        color: #166534;
    }

    .status-in-progress {
        background-color: #fef3c7;
        color: #92400e;
    }

    .status-pending {
        background-color: #fee2e2;
        color: #991b1b;
    }

    /* Player tag */
    .player-tag {
        background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%);
        padding: 4px 10px;
        border-radius: 6px;
        font-size: 0.8rem;
        color: #3730a3;
        font-weight: 500;
    }

    /* Filter container */
    .filter-container {
        background: #fff;
        border-radius: 12px;
        padding: 20px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
        margin-bottom: 16px;
    }
</style>
</head>

<body class="bg-gray-100 h-dvh flex flex-col overflow-hidden">

    @include('components.navbar')

    <div class="flex pt-14 h-full overflow-hidden">
        @include('components.sidebar', ['page' => 'complete-registration'])

        <main id="content" class="flex-1 overflow-y-auto bg-gray-100 p-6 transition-all duration-300">
            <div class="max-w-4xl mx-auto font-sans">
                
                <!-- Main Card Container -->
                <div class="rounded-xl shadow-2xl overflow-hidden">
                    
                    <!-- Main Header -->
                    <div class="bg-[var(--primary-theme-color)] text-white p-8 text-center">
                        <h1 id="page-title" class="text-2xl font-bold tracking-wide">
                            Complete Registrations
                        </h1>
                        <p class="text-sm text-gray-300 mt-2">View and manage your current ongoing registrations</p>
                    </div>

                    <!-- Content Area -->
                    <div class="bg-white p-6">
                        
                        <!-- Filter Container -->
                        <div class="filter-container">
                            <!-- Search Input -->
                            <div class="relative">
                                <span class="absolute inset-y-0 left-0 flex items-center pl-4">
                                    <i class="fa-solid fa-magnifying-glass text-gray-400"></i>
                                </span>
                                <input type="text" 
                                       id="search-input" 
                                       placeholder="Search by name or registration ID" 
                                       class="search-input w-full pl-12 pr-4 py-3 border border-gray-200 rounded-xl text-sm focus:outline-none focus:border-[var(--primary-theme-color)]">
                            </div>

                            <!-- Results Count -->
                            <div id="results-count" class="text-sm text-gray-500 mt-4 hidden">
                                Showing <span id="showing-count">0</span> of <span id="total-count">0</span> registrations
                            </div>
                        </div>
                        
                        <!-- Loading State -->
                        <div id="loading-state" class="text-center py-10">
                            <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-[var(--primary-theme-color)] mx-auto"></div>
                            <p class="mt-4 text-gray-600">Loading current registrations...</p>
                        </div>

                        <!-- Registrations List -->
                        <div id="registrations-container" class="hidden space-y-4">
                            <!-- Registrations will be loaded here dynamically -->
                        </div>

                        <!-- Empty State -->
                        <div id="empty-state" class="hidden text-center py-16">
                            <div class="bg-gray-50 rounded-full w-24 h-24 mx-auto flex items-center justify-center mb-6">
                                <i class="fa-solid fa-clipboard-check text-gray-300 text-4xl"></i>
                            </div>
                            <h3 class="text-lg font-semibold text-gray-600">No Current Registrations</h3>
                            <p class="text-gray-400 mt-2 max-w-sm mx-auto">You don't have any ongoing registrations at the moment.</p>
                            <a href="/user-dashboard/registrations" class="mt-4 inline-block px-6 py-2 bg-[var(--primary-theme-color)] text-white rounded-lg text-sm font-medium hover:bg-[#000060] transition-colors">
                                <i class="fa-solid fa-plus mr-2"></i>Start New Registration
                            </a>
                        </div>

                        <!-- Error State -->
                        <div id="error-state" class="hidden text-center py-16">
                            <div class="bg-red-50 rounded-full w-24 h-24 mx-auto flex items-center justify-center mb-6">
                                <i class="fa-solid fa-exclamation-triangle text-red-400 text-4xl"></i>
                            </div>
                            <h3 class="text-lg font-semibold text-gray-600">Error Loading Data</h3>
                            <p class="text-gray-400 mt-2 max-w-sm mx-auto" id="error-message">Something went wrong. Please try again.</p>
                            <button onclick="loadRegistrations()" class="mt-4 px-6 py-2 bg-[var(--primary-theme-color)] text-white rounded-lg text-sm font-medium hover:bg-[#000060] transition-colors">
                                <i class="fa-solid fa-refresh mr-2"></i>Retry
                            </button>
                        </div>
                        
                    </div>

                </div>

            </div>

            <script>
                // Global variables
                let authOrganisation = '';
                let authToken = '';
                let allRegistrations = [];

                // Initialize on page load
                function initPage() {
                    console.log('🚀 Complete Registrations Page Initializing...');
                    
                    // Get auth tokens from localStorage
                    authToken = localStorage.getItem('authToken') || '';
                    authOrganisation = localStorage.getItem('organisation') || '';

                    console.log('Auth Token:', authToken ? 'Present' : 'Missing');
                    console.log('Organisation:', authOrganisation || 'Missing');

                    // Load registrations
                    loadRegistrations();

                    // Setup event listeners
                    setupEventListeners();
                }

                // Check if DOM is already loaded
                if (document.readyState === 'loading') {
                    document.addEventListener('DOMContentLoaded', initPage);
                } else {
                    initPage();
                }

                // Setup event listeners for search
                function setupEventListeners() {
                    const searchInput = document.getElementById('search-input');

                    // Debounce search input
                    let searchTimeout;
                    searchInput.addEventListener('input', function() {
                        clearTimeout(searchTimeout);
                        searchTimeout = setTimeout(() => {
                            filterRegistrations();
                        }, 300);
                    });
                }

                // Load registrations from API
                async function loadRegistrations() {
                    showState('loading');

                    try {
                        const response = await fetch('https://api.manageyourleague.com/graphql/registration', {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json',
                                'X-Organisation': authOrganisation,
                                'X-Token': authToken,
                            },
                            body: JSON.stringify({
                                query: `query FetchMyCurrentRegistrationsNew {
                                    fetchMyCurrentRegistrationsNew
                                }`
                            })
                        });

                        const result = await response.json();
                        console.log('✅ API Response:', result);

                        if (result.errors) {
                            console.error('❌ GraphQL Errors:', result.errors);
                            showState('error', result.errors[0]?.message || 'API Error');
                            return;
                        }

                        // Parse registrations - handle the nested structure
                        if (result.data && result.data.fetchMyCurrentRegistrationsNew) {
                            const regData = result.data.fetchMyCurrentRegistrationsNew;
                            
                            // Check if it's the new structure with success/registrations
                            if (regData.registrations && Array.isArray(regData.registrations)) {
                                console.log('📝 Found registrations:', regData.registrations.length);
                                allRegistrations = regData.registrations;
                                renderRegistrations(allRegistrations);
                            } else if (Array.isArray(regData)) {
                                allRegistrations = regData;
                                renderRegistrations(allRegistrations);
                            } else {
                                showState('empty');
                            }
                        } else {
                            showState('empty');
                        }

                    } catch (error) {
                        console.error('💥 Error:', error);
                        showState('error', error.message);
                    }
                }

                // Filter registrations by search
                function filterRegistrations() {
                    const searchTerm = document.getElementById('search-input').value.toLowerCase().trim();
                    
                    if (!searchTerm) {
                        renderRegistrations(allRegistrations);
                        return;
                    }

                    const filtered = allRegistrations.filter(reg => {
                        const regId = (reg.registration_id || '').toString();
                        const formName = (reg.form_name || '').toLowerCase();
                        const playerName = getPlayerName(reg).toLowerCase();
                        const parentName = getParentName(reg).toLowerCase();
                        
                        return regId.includes(searchTerm) || 
                               formName.includes(searchTerm) ||
                               playerName.includes(searchTerm) ||
                               parentName.includes(searchTerm);
                    });

                    renderRegistrations(filtered);
                }

                // Get a field value from pages
                function getFieldValue(pages, pageName, fieldLabel) {
                    const page = pages?.find(p => p.page_name?.toLowerCase() === pageName.toLowerCase());
                    if (!page || !page.groups) return null;

                    for (const group of page.groups) {
                        if (group.fields) {
                            const field = group.fields.find(f => f.label?.toLowerCase() === fieldLabel.toLowerCase());
                            if (field && field.value) return field.value;
                        }
                    }
                    return null;
                }

                // Get player name
                function getPlayerName(reg) {
                    // Use top-level player_name if available
                    if (reg.player_name) return reg.player_name;

                    // Fallback: search through pages
                    const firstName = getFieldValue(reg.pages, 'Children', 'First Name') || 
                                      getFieldValue(reg.pages, 'Players', 'First Name') || 
                                      getFieldValue(reg.pages, 'Player', 'First Name') || '';
                    const lastName = getFieldValue(reg.pages, 'Children', 'Last Name') || 
                                     getFieldValue(reg.pages, 'Players', 'Last Name') || 
                                     getFieldValue(reg.pages, 'Player', 'Last Name') || '';
                    return `${firstName} ${lastName}`.trim() || 'N/A';
                }

                // Get parent name
                function getParentName(reg) {
                    const firstName = getFieldValue(reg.pages, 'Parents', 'First Name') || '';
                    const lastName = getFieldValue(reg.pages, 'Parents', 'Last Name') || '';
                    return `${firstName} ${lastName}`.trim() || 'N/A';
                }

                // Render registrations
                function renderRegistrations(registrations) {
                    const container = document.getElementById('registrations-container');
                    
                    if (!registrations || registrations.length === 0) {
                        showState('empty');
                        return;
                    }

                    document.getElementById('showing-count').textContent = registrations.length;
                    document.getElementById('total-count').textContent = allRegistrations.length;
                    document.getElementById('results-count').classList.remove('hidden');

                    let html = '';
                    registrations.forEach((reg, index) => {
                        html += renderRegistrationCard(reg, index);
                    });

                    container.innerHTML = html;
                    showState('registrations');
                }

                // Render a registration card
                function renderRegistrationCard(reg, index) {
                    const regId = `REG-${reg.registration_id}`;
                    const regDate = formatDate(reg.updated_at || reg.created_at);
                    const formName = reg.form_name || 'N/A';
                    const playerName = getPlayerName(reg);
                    const status = reg.status || 'done';
                    const statusClass = getStatusClass(status);
                    const statusLabel = getStatusLabel(status);

                    return `
                        <div class="registration-card bg-white border border-gray-100 rounded-xl overflow-hidden shadow-sm mb-4">
                            <!-- Card Header -->
                            <div class="p-5 cursor-pointer" onclick="toggleRegistration('reg-${index}', this)">
                                <div class="flex justify-between items-start">
                                    <div class="flex-1">
                                        <div class="flex items-center gap-3">
                                            <h3 class="font-bold text-gray-800 text-lg">${regId}</h3>
                                            <i class="fa-solid fa-chevron-down accordion-icon text-gray-400 text-sm"></i>
                                        </div>
                                        <p class="text-sm text-gray-400 mt-1">${regDate}</p>
                                    </div>
                                    <span class="status-badge ${statusClass}">${statusLabel}</span>
                                </div>
                                
                                <div class="mt-4 space-y-2 text-sm">
                                    <div class="flex justify-between">
                                        <span class="text-gray-400">Season:</span>
                                        <span class="text-gray-700 font-medium">${formName}</span>
                                    </div>
                                    <div class="flex justify-between">
                                        <span class="text-gray-400">Player(s):</span>
                                        <span class="text-gray-700 font-medium">${playerName}</span>
                                    </div>
                                </div>
                            </div>

                            <!-- Expandable Details -->
                            <div id="reg-${index}" class="reg-accordion-content bg-gray-50 border-t border-gray-100">
                                <div class="p-5 space-y-6">
                                    ${renderAllPages(reg.pages)}
                                </div>
                            </div>
                        </div>
                    `;
                }

                // Get status class
                function getStatusClass(status) {
                    const statusLower = (status || '').toLowerCase();
                    if (statusLower === 'pending') return 'status-pending';
                    if (statusLower === 'in-progress' || statusLower === 'in progress') return 'status-in-progress';
                    // Default to complete/done status
                    return 'status-complete';
                }

                // Get status label
                function getStatusLabel(status) {
                    const statusLower = (status || '').toLowerCase();
                    if (statusLower === 'pending') return 'Pending';
                    if (statusLower === 'in-progress' || statusLower === 'in progress') return 'In Progress';
                    // Default to Done
                    return 'Done';
                }

                // Render all pages with their groups and fields
                function renderAllPages(pages) {
                    if (!pages || pages.length === 0) return '<p class="text-gray-500">No details available</p>';

                    // Sort pages by sort_order
                    const sortedPages = [...pages].sort((a, b) => (a.page_sort_order || 0) - (b.page_sort_order || 0));

                    let html = '';
                    sortedPages.forEach(page => {
                        html += renderPage(page);
                    });

                    return html;
                }

                // Render a single page with its groups
                function renderPage(page) {
                    if (!page.groups || page.groups.length === 0) return '';

                    // Get icon based on page name
                    const icon = getPageIcon(page.page_name);

                    // Sort groups by sort_order
                    const sortedGroups = [...page.groups].sort((a, b) => (a.group_sort_order || 0) - (b.group_sort_order || 0));

                    let groupsHtml = '';
                    sortedGroups.forEach(group => {
                        groupsHtml += renderGroup(group);
                    });

                    if (!groupsHtml) return '';

                    return `
                        <div class="page-section mb-6">
                            <!-- Page Header -->
                            <div class="page-header flex items-center gap-2 mb-4 pb-2 border-b-2 border-[var(--primary-theme-color)]">
                                <i class="${icon} text-[var(--primary-theme-color)] text-lg"></i>
                                <h4 class="text-lg font-bold text-[var(--primary-theme-color)] uppercase tracking-wide">${page.page_name}</h4>
                            </div>

                            <!-- Page Groups -->
                            <div class="page-groups space-y-4">
                                ${groupsHtml}
                            </div>
                        </div>
                    `;
                }

                // Render a group with its fields
                function renderGroup(group) {
                    if (!group.fields || group.fields.length === 0) return '';

                    // Filter out fields without values and sensitive fields
                    const validFields = group.fields.filter(f => {
                        const label = (f.label || '').toLowerCase();
                        // Skip password and internal fields
                        if (label.includes('password') || label === 'id') return false;
                        // Skip empty values
                        if (!f.value && f.value !== 0) return false;
                        return true;
                    });

                    if (validFields.length === 0) return '';

                    // Sort fields by sort_order
                    const sortedFields = [...validFields].sort((a, b) => (a.sort_order || 0) - (b.sort_order || 0));

                    let fieldsHtml = '';
                    sortedFields.forEach(field => {
                        fieldsHtml += renderField(field);
                    });

                    const groupName = group.group_name || 'General';

                    return `
                        <div class="group-section bg-white rounded-lg p-4 shadow-sm">
                            <!-- Group Header -->
                            <div class="group-header mb-3">
                                <h5 class="text-sm font-semibold text-gray-600 uppercase tracking-wider border-b border-gray-200 pb-2">${groupName}</h5>
                            </div>

                            <!-- Group Fields -->
                            <div class="group-fields grid grid-cols-1 md:grid-cols-2 gap-3">
                                ${fieldsHtml}
                            </div>
                        </div>
                    `;
                }

                // Render a single field
                function renderField(field) {
                    const label = field.label || 'Field';
                    let value = field.value;

                    // Format value based on type
                    value = formatFieldValue(value, field.field_type, label);

                    return `
                        <div class="field-item">
                            <span class="text-xs text-gray-400 uppercase tracking-wide">${label}</span>
                            <p class="text-sm text-gray-800 font-medium mt-0.5">${value}</p>
                        </div>
                    `;
                }

                // Format field value based on type
                function formatFieldValue(value, fieldType, label) {
                    if (value === null || value === undefined || value === '') return 'N/A';

                    // Handle checkbox values
                    if (fieldType === 'checkbox') {
                        return parseFloat(value) === 1 || value === '1.00' || value === '1' ? '✓ Yes' : '✗ No';
                    }

                    // Handle gender
                    if (label.toLowerCase() === 'gender') {
                        if (value === '1.00' || value === '1') return 'Male';
                        if (value === '2.00' || value === '2') return 'Female';
                        return value;
                    }

                    // Handle dates
                    if (fieldType === 'date' && value) {
                        return formatDate(value);
                    }

                    // Handle numeric values that look like IDs (clean up .00)
                    if (typeof value === 'string' && value.endsWith('.00')) {
                        return parseInt(value).toString();
                    }

                    return value;
                }

                // Get icon for page based on name
                function getPageIcon(pageName) {
                    const name = (pageName || '').toLowerCase();
                    
                    if (name.includes('parent')) return 'fa-solid fa-users';
                    if (name.includes('child') || name.includes('player')) return 'fa-solid fa-user';
                    if (name.includes('emergency')) return 'fa-solid fa-phone-volume';
                    if (name.includes('medical') || name.includes('health')) return 'fa-solid fa-heart-pulse';
                    if (name.includes('waiver') || name.includes('release') || name.includes('consent')) return 'fa-solid fa-file-signature';
                    if (name.includes('code') || name.includes('conduct')) return 'fa-solid fa-scale-balanced';
                    if (name.includes('covid')) return 'fa-solid fa-virus-covid';
                    if (name.includes('concussion')) return 'fa-solid fa-head-side-medical';
                    if (name.includes('commercial') || name.includes('mail')) return 'fa-solid fa-envelope';
                    if (name.includes('zero') || name.includes('tolerance')) return 'fa-solid fa-ban';
                    
                    return 'fa-solid fa-file-lines';
                }

                // Toggle registration accordion
                function toggleRegistration(id, header) {
                    const section = document.getElementById(id);
                    const icon = header.querySelector('.accordion-icon');
                    
                    if (section.classList.contains('accordion-open')) {
                        section.classList.remove('accordion-open');
                        icon.classList.remove('rotated');
                    } else {
                        // Close all other accordions
                        document.querySelectorAll('.reg-accordion-content.accordion-open').forEach(el => {
                            el.classList.remove('accordion-open');
                            const otherIcon = el.closest('.registration-card')?.querySelector('.accordion-icon');
                            if (otherIcon) otherIcon.classList.remove('rotated');
                        });
                        
                        section.classList.add('accordion-open');
                        icon.classList.add('rotated');
                    }
                }

                // Format date
                function formatDate(dateStr) {
                    if (!dateStr) return 'N/A';
                    try {
                        const date = new Date(dateStr);
                        if (isNaN(date.getTime())) return dateStr;
                        return date.toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' });
                    } catch (e) {
                        return dateStr;
                    }
                }

                // Show state
                function showState(state, errorMessage = '') {
                    const loadingState = document.getElementById('loading-state');
                    const registrationsContainer = document.getElementById('registrations-container');
                    const emptyState = document.getElementById('empty-state');
                    const errorState = document.getElementById('error-state');
                    const resultsCount = document.getElementById('results-count');

                    loadingState.classList.add('hidden');
                    registrationsContainer.classList.add('hidden');
                    emptyState.classList.add('hidden');
                    errorState.classList.add('hidden');
                    resultsCount.classList.add('hidden');

                    switch(state) {
                        case 'loading':
                            loadingState.classList.remove('hidden');
                            break;
                        case 'registrations':
                            registrationsContainer.classList.remove('hidden');
                            resultsCount.classList.remove('hidden');
                            break;
                        case 'empty':
                            emptyState.classList.remove('hidden');
                            break;
                        case 'error':
                            errorState.classList.remove('hidden');
                            if (errorMessage) {
                                document.getElementById('error-message').textContent = errorMessage;
                            }
                            break;
                    }
                }
            </script>
             <!-- Font Awesome -->
            <script src="https://kit.fontawesome.com/ff110e9818.js" crossorigin="anonymous"></script>
        </main>

    </div>

    @include('components.footer')