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

@section('title', 'Import Details')

@section('content')
<div class="container mx-auto px-4 py-8">
    <div class="max-w-6xl mx-auto">
        <div class="mb-8">
            <div class="flex items-center justify-between">
                <div>
                    <h1 class="text-3xl font-bold text-gray-900">Import Details</h1>
                    <p class="text-gray-600 mt-2">{{ $bulkImport->original_filename }}</p>
                </div>
                <a href="{{ route('admin.bulk-imports.index') }}" 
                   class="text-gray-600 hover:text-gray-900">← Back to Imports</a>
            </div>
        </div>

        <!-- Status Overview -->
        <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
            <div class="bg-white rounded-lg shadow-sm border p-6">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        @php
                            $statusIcons = [
                                'pending' => '⏳',
                                'processing' => '⚙️',
                                'completed' => '✅',
                                'failed' => '❌'
                            ];
                        @endphp
                        <span class="text-2xl">{{ $statusIcons[$bulkImport->status] }}</span>
                    </div>
                    <div class="ml-4">
                        <p class="text-sm font-medium text-gray-500">Status</p>
                        <p class="text-lg font-semibold text-gray-900">{{ ucfirst($bulkImport->status) }}</p>
                    </div>
                </div>
            </div>

            <div class="bg-white rounded-lg shadow-sm border p-6">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <span class="text-2xl">📊</span>
                    </div>
                    <div class="ml-4">
                        <p class="text-sm font-medium text-gray-500">Progress</p>
                        <p class="text-lg font-semibold text-gray-900">{{ $bulkImport->progress_percentage }}%</p>
                        <p class="text-xs text-gray-500">{{ $bulkImport->processed_rows }}/{{ $bulkImport->total_rows }}</p>
                    </div>
                </div>
            </div>

            <div class="bg-white rounded-lg shadow-sm border p-6">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <span class="text-2xl">✅</span>
                    </div>
                    <div class="ml-4">
                        <p class="text-sm font-medium text-gray-500">Successful</p>
                        <p class="text-lg font-semibold text-green-600">{{ $bulkImport->successful_rows }}</p>
                        @if($bulkImport->processed_rows > 0)
                            <p class="text-xs text-gray-500">{{ $bulkImport->success_rate }}% success rate</p>
                        @endif
                    </div>
                </div>
            </div>

            <div class="bg-white rounded-lg shadow-sm border p-6">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <span class="text-2xl">❌</span>
                    </div>
                    <div class="ml-4">
                        <p class="text-sm font-medium text-gray-500">Failed</p>
                        <p class="text-lg font-semibold text-red-600">{{ $bulkImport->failed_rows }}</p>
                        @if($bulkImport->processed_rows > 0)
                            <p class="text-xs text-gray-500">{{ round(($bulkImport->failed_rows / $bulkImport->processed_rows) * 100, 1) }}% failure rate</p>
                        @endif
                    </div>
                </div>
            </div>
        </div>

        <!-- Progress Bar -->
        @if($bulkImport->status === 'processing')
            <div class="bg-white rounded-lg shadow-sm border p-6 mb-8">
                <h2 class="text-lg font-semibold text-gray-900 mb-4">Processing Progress</h2>
                <div class="w-full bg-gray-200 rounded-full h-4">
                    <div class="bg-blue-600 h-4 rounded-full transition-all duration-300" 
                         style="width: {{ $bulkImport->progress_percentage }}%"></div>
                </div>
                <p class="text-sm text-gray-600 mt-2">
                    Processing row {{ $bulkImport->processed_rows }} of {{ $bulkImport->total_rows }}...
                </p>
                <script>
                    // Auto-refresh every 5 seconds if processing
                    setTimeout(() => location.reload(), 5000);
                </script>
            </div>
        @endif

        <!-- Import Details -->
        <div class="bg-white rounded-lg shadow-sm border mb-8">
            <div class="p-6 border-b border-gray-200">
                <h2 class="text-lg font-semibold text-gray-900">Import Information</h2>
            </div>
            <div class="p-6">
                <dl class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <dt class="text-sm font-medium text-gray-500">File Name</dt>
                        <dd class="mt-1 text-sm text-gray-900">{{ $bulkImport->original_filename }}</dd>
                    </div>
                    <div>
                        <dt class="text-sm font-medium text-gray-500">File Size</dt>
                        <dd class="mt-1 text-sm text-gray-900">{{ number_format($bulkImport->file_size / 1024, 1) }} KB</dd>
                    </div>
                    <div>
                        <dt class="text-sm font-medium text-gray-500">Import Type</dt>
                        <dd class="mt-1 text-sm text-gray-900">{{ ucfirst(str_replace('_', ' ', $bulkImport->import_type)) }}</dd>
                    </div>
                    @if($bulkImport->event)
                        <div>
                            <dt class="text-sm font-medium text-gray-500">Target Event</dt>
                            <dd class="mt-1 text-sm text-gray-900">{{ $bulkImport->event->name }}</dd>
                        </div>
                    @endif
                    <div>
                        <dt class="text-sm font-medium text-gray-500">Imported By</dt>
                        <dd class="mt-1 text-sm text-gray-900">{{ $bulkImport->importedBy->name }}</dd>
                    </div>
                    <div>
                        <dt class="text-sm font-medium text-gray-500">Started At</dt>
                        <dd class="mt-1 text-sm text-gray-900">
                            {{ $bulkImport->started_at ? $bulkImport->started_at->format('M j, Y g:i A') : 'Not started' }}
                        </dd>
                    </div>
                    @if($bulkImport->completed_at)
                        <div>
                            <dt class="text-sm font-medium text-gray-500">Completed At</dt>
                            <dd class="mt-1 text-sm text-gray-900">{{ $bulkImport->completed_at->format('M j, Y g:i A') }}</dd>
                        </div>
                        <div>
                            <dt class="text-sm font-medium text-gray-500">Duration</dt>
                            <dd class="mt-1 text-sm text-gray-900">
                                {{ $bulkImport->started_at->diffForHumans($bulkImport->completed_at, true) }}
                            </dd>
                        </div>
                    @endif
                </dl>
            </div>
        </div>

        <!-- Error Details -->
        @if($bulkImport->failed_rows > 0 && $errorRows->count() > 0)
            <div class="bg-white rounded-lg shadow-sm border">
                <div class="p-6 border-b border-gray-200">
                    <h2 class="text-lg font-semibold text-gray-900">Failed Rows</h2>
                    <p class="text-sm text-gray-600 mt-1">Review and fix these errors before re-importing</p>
                </div>
                <div class="overflow-x-auto">
                    <table class="w-full">
                        <thead class="bg-gray-50">
                            <tr>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Row</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Data</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Error</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
                            </tr>
                        </thead>
                        <tbody class="bg-white divide-y divide-gray-200">
                            @foreach($errorRows as $row)
                                <tr>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                                        {{ $row->row_number }}
                                    </td>
                                    <td class="px-6 py-4 text-sm text-gray-900">
                                        <div class="max-w-xs truncate">
                                            @if(isset($row->raw_data['name']))
                                                <strong>{{ $row->raw_data['name'] }}</strong><br>
                                            @endif
                                            @if(isset($row->raw_data['email']))
                                                {{ $row->raw_data['email'] }}
                                            @endif
                                        </div>
                                    </td>
                                    <td class="px-6 py-4 text-sm text-red-600">
                                        {{ $row->error_message }}
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        @php
                                            $statusColors = [
                                                'failed' => 'bg-red-100 text-red-800',
                                                'duplicate' => 'bg-yellow-100 text-yellow-800'
                                            ];
                                        @endphp
                                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium {{ $statusColors[$row->status] }}">
                                            {{ ucfirst($row->status) }}
                                        </span>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
                
                @if($errorRows->hasPages())
                    <div class="px-6 py-4 border-t border-gray-200">
                        {{ $errorRows->links() }}
                    </div>
                @endif
            </div>
        @endif

        <!-- Processing Errors -->
        @if($bulkImport->processing_errors)
            <div class="bg-red-50 border border-red-200 rounded-lg p-6 mt-8">
                <h3 class="text-lg font-medium text-red-800 mb-4">Processing Errors</h3>
                <div class="text-sm text-red-700">
                    @foreach($bulkImport->processing_errors as $error)
                        <p>{{ $error }}</p>
                    @endforeach
                </div>
            </div>
        @endif
    </div>
</div>
@endsection