{{-- React Enhanced Content for Livewire Component --}}
{{-- This view is used when the React UI is rendered inside a Livewire component --}}
{{-- The parent page already provides the app layout structure --}}

<div class="w-full">
    {{-- React Application Container --}}
    <div
        id="enhanced-import-root"
        data-integration-id="{{ $reactProps['integrationId'] }}"
        data-record-id="{{ $reactProps['recordId'] ?? '' }}"
        data-record-type-id="{{ $reactProps['recordTypeId'] ?? '' }}"
        data-group-import="{{ $reactProps['groupImport'] ? 'true' : 'false' }}"
        data-group="{{ json_encode($reactProps['group'] ?? []) }}"
        data-use-chunked-import="{{ $reactProps['useChunkedImport'] ? 'true' : 'false' }}"
        data-api-endpoints="{{ json_encode($reactProps['apiEndpoints']) }}"
        data-fallback-url="{{ $fallbackUrl }}"
    >
        {{-- Loading State --}}
        <div class="text-center py-16">
            <div class="inline-block animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600"></div>
            <p class="mt-4 text-gray-600">Loading Enhanced Import UI...</p>
            <p class="mt-2 text-sm text-gray-500">
                If this takes too long, <a href="{{ $fallbackUrl }}" class="text-blue-600 hover:text-blue-800">click here for legacy import</a>
            </p>
        </div>
    </div>

    {{-- Fallback Information --}}
    <div class="mt-8 p-4 bg-blue-50 border border-blue-200 rounded-lg">
        <h3 class="text-sm font-medium text-blue-900">Enhanced Import Features</h3>
        <ul class="mt-2 text-sm text-blue-800 list-disc list-inside space-y-1">
            <li>Real-time wave processing visualization</li>
            <li>Complete dependency flow charts</li>
            <li>Advanced error analysis and recovery</li>
            <li>Performance metrics and optimization insights</li>
            <li>Comprehensive progress tracking across all record types</li>
        </ul>
    </div>

    @push('scripts')
    {{-- Load React Application --}}
    @vite(['resources/js/enhanced-import.jsx'])
    @endpush

    @push('styles')
    {{-- Additional styles for React components --}}
    <style>
        /* Ensure React components have proper styling context */
        #enhanced-import-root {
            min-height: 400px;
        }

        /* Loading animation improvements */
        .animate-spin {
            animation: spin 1s linear infinite;
        }

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

        /* React component base styles */
        .enhanced-import-dashboard {
            /* Base dashboard styles will be handled by Tailwind in components */
        }
    </style>
    @endpush
</div>