{{-- resources/views/admin/bulk-imports/create.blade.php --}}
@extends('layouts.app')

@section('title', 'New Bulk Import')

@section('content')
<div class="container mx-auto px-4 py-8">
    <div class="max-w-4xl mx-auto">
        <div class="mb-8">
            <h1 class="text-3xl font-bold text-gray-900">New Bulk Import</h1>
            <p class="text-gray-600 mt-2">Upload a CSV file to import users in bulk</p>
        </div>

        @if($errors->any())
            <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-6">
                <ul class="list-disc list-inside">
                    @foreach($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <div class="bg-white rounded-lg shadow-sm border">
            <form id="importForm" action="{{ route('admin.bulk-imports.store') }}" method="POST" enctype="multipart/form-data">
                @csrf
                
                <div class="p-6 border-b border-gray-200">
                    <h2 class="text-lg font-semibold text-gray-900">Import Configuration</h2>
                </div>

                <div class="p-6 space-y-6">
                    <!-- Import Type -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Import Type</label>
                        <select name="import_type" id="import_type" class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                            <option value="users">User Import</option>
                            <option value="event_registrations">Event Registration Import</option>
                        </select>
                    </div>

                    <!-- Event Selection (shown when event_registrations is selected) -->
                    <div id="event_selection" class="hidden">
                        <label class="block text-sm font-medium text-gray-700 mb-2">Target Event</label>
                        <select name="event_id" class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                            <option value="">Select an event...</option>
                            @foreach($events as $event)
                                <option value="{{ $event->id }}">{{ $event->name }}</option>
                            @endforeach
                        </select>
                    </div>

                    <!-- File Upload -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">CSV File</label>
                        <div id="dropzone" class="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center hover:border-blue-400 transition-colors cursor-pointer">
                            <input type="file" name="file" id="file" accept=".csv,.txt" class="hidden" required>
                            <div id="upload-placeholder">
                                <div class="text-gray-400 text-4xl mb-4">📄</div>
                                <p class="text-lg font-medium text-gray-700 mb-2">Drop your CSV file here or click to browse</p>
                                <p class="text-sm text-gray-500">Maximum file size: 10MB</p>
                            </div>
                            <div id="file-info" class="hidden">
                                <div class="text-green-400 text-4xl mb-4">✓</div>
                                <p id="file-name" class="text-lg font-medium text-gray-700"></p>
                                <p id="file-size" class="text-sm text-gray-500"></p>
                                <button type="button" id="remove-file" class="text-red-600 hover:text-red-800 text-sm mt-2">Remove file</button>
                            </div>
                        </div>
                    </div>

                    <!-- Preview Section -->
                    <div id="preview-section" class="hidden">
                        <h3 class="text-lg font-medium text-gray-900 mb-4">File Preview</h3>
                        <div class="bg-gray-50 rounded-lg p-4">
                            <div id="preview-loading" class="text-center py-8">
                                <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600 mx-auto"></div>
                                <p class="text-gray-600 mt-2">Analyzing file...</p>
                            </div>
                            <div id="preview-content" class="hidden">
                                <div class="mb-4">
                                    <span class="text-sm font-medium text-gray-700">Total rows: </span>
                                    <span id="total-rows" class="text-sm text-gray-900"></span>
                                </div>
                                <div class="overflow-x-auto">
                                    <table id="preview-table" class="min-w-full divide-y divide-gray-200">
                                        <thead class="bg-gray-100">
                                            <tr id="preview-headers"></tr>
                                        </thead>
                                        <tbody id="preview-rows" class="bg-white divide-y divide-gray-200"></tbody>
                                    </table>
                                </div>
                            </div>
                            <div id="preview-error" class="hidden text-red-600"></div>
                        </div>
                    </div>

                    <!-- Template Download -->
                    <div class="bg-blue-50 rounded-lg p-4">
                        <h3 class="text-sm font-medium text-blue-900 mb-2">Need a template?</h3>
                        <p class="text-sm text-blue-700 mb-3">Download our CSV template with sample data and required column headers.</p>
                        <a href="{{ route('admin.bulk-imports.template') }}" 
                           class="inline-flex items-center text-sm font-medium text-blue-600 hover:text-blue-800">
                            📥 Download CSV Template
                        </a>
                    </div>
                </div>

                <div class="px-6 py-4 bg-gray-50 border-t border-gray-200 flex justify-between">
                    <a href="{{ route('admin.bulk-imports.index') }}" 
                       class="px-4 py-2 text-gray-700 hover:text-gray-900">Cancel</a>
                    <button type="submit" id="submit-btn" 
                            class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-lg font-medium transition-colors disabled:opacity-50 disabled:cursor-not-allowed">
                        Start Import
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const dropzone = document.getElementById('dropzone');
    const fileInput = document.getElementById('file');
    const uploadPlaceholder = document.getElementById('upload-placeholder');
    const fileInfo = document.getElementById('file-info');
    const fileName = document.getElementById('file-name');
    const fileSize = document.getElementById('file-size');
    const removeFileBtn = document.getElementById('remove-file');
    const previewSection = document.getElementById('preview-section');
    const importType = document.getElementById('import_type');
    const eventSelection = document.getElementById('event_selection');
    const submitBtn = document.getElementById('submit-btn');

    // Import type change handler
    importType.addEventListener('change', function() {
        if (this.value === 'event_registrations') {
            eventSelection.classList.remove('hidden');
        } else {
            eventSelection.classList.add('hidden');
        }
    });

    // Dropzone click handler
    dropzone.addEventListener('click', function() {
        fileInput.click();
    });

    // Drag and drop handlers
    dropzone.addEventListener('dragover', function(e) {
        e.preventDefault();
        this.classList.add('border-blue-400', 'bg-blue-50');
    });

    dropzone.addEventListener('dragleave', function(e) {
        e.preventDefault();
        this.classList.remove('border-blue-400', 'bg-blue-50');
    });

    dropzone.addEventListener('drop', function(e) {
        e.preventDefault();
        this.classList.remove('border-blue-400', 'bg-blue-50');
        
        const files = e.dataTransfer.files;
        if (files.length > 0) {
            fileInput.files = files;
            handleFileSelect(files[0]);
        }
    });

    // File input change handler
    fileInput.addEventListener('change', function() {
        if (this.files.length > 0) {
            handleFileSelect(this.files[0]);
        }
    });

    // Remove file handler
    removeFileBtn.addEventListener('click', function() {
        fileInput.value = '';
        uploadPlaceholder.classList.remove('hidden');
        fileInfo.classList.add('hidden');
        previewSection.classList.add('hidden');
        submitBtn.disabled = true;
    });

    function handleFileSelect(file) {
        // Validate file type
        if (!file.name.toLowerCase().endsWith('.csv') && !file.name.toLowerCase().endsWith('.txt')) {
            alert('Please select a CSV file.');
            return;
        }

        // Validate file size (10MB)
        if (file.size > 10 * 1024 * 1024) {
            alert('File size must be less than 10MB.');
            return;
        }

        // Show file info
        fileName.textContent = file.name;
        fileSize.textContent = formatFileSize(file.size);
        uploadPlaceholder.classList.add('hidden');
        fileInfo.classList.remove('hidden');
        submitBtn.disabled = false;

        // Show preview
        showPreview(file);
    }

    function showPreview(file) {
        previewSection.classList.remove('hidden');
        document.getElementById('preview-loading').classList.remove('hidden');
        document.getElementById('preview-content').classList.add('hidden');
        document.getElementById('preview-error').classList.add('hidden');

        const formData = new FormData();
        formData.append('file', file);

        fetch('{{ route("admin.bulk-imports.preview") }}', {
            method: 'POST',
            body: formData,
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            }
        })
        .then(response => response.json())
        .then(data => {
            document.getElementById('preview-loading').classList.add('hidden');
            
            if (data.error) {
                document.getElementById('preview-error').textContent = data.error;
                document.getElementById('preview-error').classList.remove('hidden');
                return;
            }

            // Show preview data
            document.getElementById('total-rows').textContent = data.total_rows;
            
            const headersRow = document.getElementById('preview-headers');
            headersRow.innerHTML = '';
            data.headers.forEach(header => {
                const th = document.createElement('th');
                th.className = 'px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider';
                th.textContent = header;
                headersRow.appendChild(th);
            });

            const rowsContainer = document.getElementById('preview-rows');
            rowsContainer.innerHTML = '';
            data.preview.forEach(row => {
                const tr = document.createElement('tr');
                data.headers.forEach(header => {
                    const td = document.createElement('td');
                    td.className = 'px-6 py-4 whitespace-nowrap text-sm text-gray-900';
                    td.textContent = row[header] || '';
                    tr.appendChild(td);
                });
                rowsContainer.appendChild(tr);
            });

            document.getElementById('preview-content').classList.remove('hidden');
        })
        .catch(error => {
            document.getElementById('preview-loading').classList.add('hidden');
            document.getElementById('preview-error').textContent = 'Error reading file: ' + error.message;
            document.getElementById('preview-error').classList.remove('hidden');
        });
    }

    function formatFileSize(bytes) {
        if (bytes === 0) return '0 Bytes';
        const k = 1024;
        const sizes = ['Bytes', 'KB', 'MB', 'GB'];
        const i = Math.floor(Math.log(bytes) / Math.log(k));
        return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
    }
});
</script>
@endsection