@extends('layouts.app')

@section('content')
<div class="max-w-2xl mx-auto">
    <div class="mb-6">
        <h1 class="text-2xl font-bold text-gray-900">Large File Detected</h1>
        <p class="mt-1 text-sm text-gray-500">Review the file details before processing</p>
    </div>

    <div class="bg-white shadow rounded-lg p-6 mb-6">
        <div class="flex items-start">
            <div class="flex-shrink-0">
                <svg class="h-8 w-8 text-yellow-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
                </svg>
            </div>
            <div class="ml-4">
                <h3 class="text-lg font-medium text-gray-900">{{ $uploadJob->original_filename }}</h3>
                <p class="mt-1 text-sm text-gray-500">This file is larger than recommended and will take time to process.</p>
            </div>
        </div>
    </div>

    <!-- File Analysis -->
    <div class="bg-white shadow rounded-lg p-6 mb-6">
        <h3 class="text-sm font-semibold text-gray-900 mb-4">File Analysis</h3>
        <dl class="grid grid-cols-2 gap-4">
            <div class="bg-gray-50 rounded-lg p-4">
                <dt class="text-sm text-gray-500">File Size</dt>
                <dd class="text-xl font-semibold text-gray-900">{{ $analysis['file_size_human'] }}</dd>
            </div>
            <div class="bg-gray-50 rounded-lg p-4">
                <dt class="text-sm text-gray-500">Total Pages</dt>
                <dd class="text-xl font-semibold text-gray-900">{{ number_format($analysis['total_pages']) }}</dd>
            </div>
            <div class="bg-blue-50 rounded-lg p-4">
                <dt class="text-sm text-blue-600">Estimated Orders</dt>
                <dd class="text-xl font-semibold text-blue-700">{{ number_format($analysis['total_orders']) }}</dd>
            </div>
            <div class="bg-yellow-50 rounded-lg p-4">
                <dt class="text-sm text-yellow-600">Est. Processing Time</dt>
                <dd class="text-xl font-semibold text-yellow-700">~{{ $analysis['estimated_time_seconds'] > 60 ? round($analysis['estimated_time_seconds'] / 60) . ' min' : $analysis['estimated_time_seconds'] . ' sec' }}</dd>
            </div>
        </dl>
    </div>

    <!-- Processing Info -->
    <div class="bg-blue-50 border-l-4 border-blue-400 p-4 mb-6">
        <div class="flex">
            <div class="flex-shrink-0">
                <svg class="h-5 w-5 text-blue-400" fill="currentColor" viewBox="0 0 20 20">
                    <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"/>
                </svg>
            </div>
            <div class="ml-3">
                <p class="text-sm text-blue-700">
                    <strong>How it works:</strong> The file will be processed in {{ $analysis['chunks_needed'] }} chunk(s) of {{ $analysis['orders_per_chunk'] }} orders each to prevent server overload.
                </p>
                <p class="text-sm text-blue-600 mt-1">
                    Please keep this page open during processing. You can continue using other browser tabs.
                </p>
            </div>
        </div>
    </div>

    <!-- Progress Section (shown during processing) -->
    <div id="processing-section" class="hidden bg-white shadow rounded-lg p-6 mb-6">
        <h3 class="text-sm font-semibold text-gray-900 mb-4">Processing...</h3>
        <div class="mb-4">
            <div class="flex justify-between text-sm text-gray-600 mb-1">
                <span id="progress-status">Initializing...</span>
                <span id="progress-percent">0%</span>
            </div>
            <div class="w-full bg-gray-200 rounded-full h-3">
                <div id="progress-bar" class="bg-indigo-600 h-3 rounded-full transition-all duration-500" style="width: 0%"></div>
            </div>
        </div>
        <div class="grid grid-cols-3 gap-4 text-center">
            <div>
                <p class="text-2xl font-bold text-green-600" id="imported-count">0</p>
                <p class="text-xs text-gray-500">Imported</p>
            </div>
            <div>
                <p class="text-2xl font-bold text-yellow-600" id="duplicate-count">0</p>
                <p class="text-xs text-gray-500">Duplicates</p>
            </div>
            <div>
                <p class="text-2xl font-bold text-gray-600" id="chunk-count">0/{{ $analysis['chunks_needed'] }}</p>
                <p class="text-xs text-gray-500">Chunks</p>
            </div>
        </div>
    </div>

    <!-- Actions -->
    <div id="action-buttons" class="flex justify-between">
        <form action="{{ route('shipping-labels.cancel-upload') }}" method="POST">
            @csrf
            <button type="submit" class="bg-white py-2 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 hover:bg-gray-50">
                Cancel
            </button>
        </form>
        <form action="{{ route('shipping-labels.process-large') }}" method="POST" id="process-form">
            @csrf
            <button type="submit" id="process-btn" class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700">
                <svg id="process-spinner" class="hidden animate-spin -ml-1 mr-2 h-4 w-4 text-white" fill="none" viewBox="0 0 24 24">
                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                </svg>
                <span id="process-text">Start Processing</span>
            </button>
        </form>
    </div>
</div>

<script>
document.getElementById('process-form').addEventListener('submit', function(e) {
    document.getElementById('process-btn').disabled = true;
    document.getElementById('process-spinner').classList.remove('hidden');
    document.getElementById('process-text').textContent = 'Processing...';
    document.getElementById('processing-section').classList.remove('hidden');
    document.getElementById('action-buttons').classList.add('hidden');

    // Show progress simulation (actual progress requires AJAX polling)
    let progress = 0;
    const totalChunks = {{ $analysis['chunks_needed'] }};
    const interval = setInterval(() => {
        progress += (100 / totalChunks) * 0.5;
        if (progress > 95) {
            progress = 95;
            clearInterval(interval);
        }
        document.getElementById('progress-bar').style.width = progress + '%';
        document.getElementById('progress-percent').textContent = Math.round(progress) + '%';
        document.getElementById('progress-status').textContent = 'Processing orders...';
    }, 1000);
});
</script>
@endsection