@extends('layouts.app')

@section('content')
<div class="mb-6">
    <h1 class="text-2xl font-bold text-gray-900">Upload Shipping Labels PDF</h1>
    <p class="mt-1 text-sm text-gray-500">Extract data from TikTok Shop shipping labels and packing slips</p>
</div>

@if(isset($processingJobs) && $processingJobs->count() > 0)
<div class="bg-yellow-50 border-l-4 border-yellow-400 p-4 mb-6">
    <div class="flex">
        <div class="flex-shrink-0">
            <svg class="h-5 w-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/>
            </svg>
        </div>
        <div class="ml-3">
            <p class="text-sm text-yellow-700 font-medium">You have uploads in progress</p>
            @foreach($processingJobs as $job)
                <p class="text-sm text-yellow-600">{{ $job->original_filename }} - {{ $job->status }}</p>
            @endforeach
        </div>
    </div>
</div>
@endif

<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
    <!-- Upload Form -->
    <div class="lg:col-span-2">
        <div class="bg-white shadow rounded-lg">
            <form action="{{ route('shipping-labels.upload.process') }}" method="POST" enctype="multipart/form-data" class="p-6" id="upload-form">
                @csrf

                <div class="mb-6">
                    <label for="files" class="block text-sm font-medium text-gray-700 mb-2">PDF Files</label>
                    <div class="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-md hover:border-indigo-400 transition-colors" id="dropzone">
                        <div class="space-y-1 text-center">
                            <svg class="mx-auto h-12 w-12 text-gray-400" stroke="currentColor" fill="none" viewBox="0 0 48 48">
                                <path d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                            </svg>
                            <div class="flex text-sm text-gray-600">
                                <label for="files" class="relative cursor-pointer bg-white rounded-md font-medium text-indigo-600 hover:text-indigo-500">
                                    <span>Upload files</span>
                                    <input id="files" name="files[]" type="file" class="sr-only" accept=".pdf" multiple required>
                                </label>
                                <p class="pl-1">or drag and drop</p>
                            </div>
                            <p class="text-xs text-gray-500">Multiple PDF files supported (up to {{ $limits['max_file_size_human'] ?? '50 MB' }} each)</p>
                        </div>
                    </div>
                    <!-- Files list display -->
                    <div id="files-info" class="hidden mt-3 space-y-2">
                        <div class="flex items-center justify-between px-3 py-2 bg-gray-50 rounded-lg">
                            <div>
                                <p class="text-sm font-medium text-gray-900"><span id="files-count">0</span> files selected</p>
                                <p class="text-xs text-gray-500">Total: <span id="files-total-size">0 KB</span></p>
                            </div>
                            <button type="button" onclick="clearFiles()" class="text-red-600 hover:text-red-800 text-sm font-medium">
                                Clear All
                            </button>
                        </div>
                        <div id="files-list" class="max-h-48 overflow-y-auto space-y-1"></div>
                        <div id="size-warning" class="hidden mt-2 text-sm text-yellow-600">
                            <svg class="inline h-4 w-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/>
                            </svg>
                            <span id="warning-text">Large files detected - processing may take several minutes</span>
                        </div>
                    </div>
                </div>

                <!-- Progress bar (hidden by default) -->
                <div id="progress-container" class="hidden mb-6">
                    <div class="flex justify-between text-sm text-gray-600 mb-1">
                        <span>Uploading...</span>
                        <span id="progress-percent">0%</span>
                    </div>
                    <div class="w-full bg-gray-200 rounded-full h-2">
                        <div id="progress-bar" class="bg-indigo-600 h-2 rounded-full transition-all duration-300" style="width: 0%"></div>
                    </div>
                </div>

                <div class="flex justify-end">
                    <a href="{{ route('shipping-labels.index') }}" 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 mr-3">
                        Cancel
                    </a>
                    <button type="submit" id="submit-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 disabled:bg-gray-400 disabled:cursor-not-allowed">
                        <svg id="submit-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="submit-text">Upload & Extract</span>
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- Info Sidebar -->
    <div class="lg:col-span-1 space-y-6">
        <!-- File Limits -->
        <div class="bg-white shadow rounded-lg p-5">
            <h3 class="text-sm font-semibold text-gray-900 mb-3">File Limits</h3>
            <dl class="space-y-2 text-sm">
                <div class="flex justify-between">
                    <dt class="text-gray-500">Max file size</dt>
                    <dd class="font-medium text-gray-900">{{ $limits['max_file_size_human'] ?? '50 MB' }}</dd>
                </div>
                <div class="flex justify-between">
                    <dt class="text-gray-500">Recommended</dt>
                    <dd class="font-medium text-green-600">{{ $limits['recommended_size_human'] ?? '10 MB' }}</dd>
                </div>
                <div class="flex justify-between">
                    <dt class="text-gray-500">Orders per file</dt>
                    <dd class="font-medium text-gray-900">~1,000 max</dd>
                </div>
            </dl>
        </div>

        <!-- Size Estimation -->
        <div class="bg-blue-50 rounded-lg p-5">
            <h3 class="text-sm font-semibold text-blue-900 mb-3">Size Estimation</h3>
            <dl class="space-y-2 text-sm text-blue-800">
                <div class="flex justify-between">
                    <dt>50 orders</dt>
                    <dd>~500 KB</dd>
                </div>
                <div class="flex justify-between">
                    <dt>500 orders</dt>
                    <dd>~5 MB</dd>
                </div>
                <div class="flex justify-between">
                    <dt>1,000 orders</dt>
                    <dd>~10 MB</dd>
                </div>
            </dl>
            <p class="mt-3 text-xs text-blue-600">
                For 10k+ orders, split into multiple files
            </p>
        </div>

        <!-- Expected Format -->
        <div class="bg-gray-50 rounded-lg p-5">
            <h3 class="text-sm font-semibold text-gray-900 mb-3">Expected Format</h3>
            <p class="text-sm text-gray-600 mb-2">
                TikTok Shop shipping labels + packing slips PDF
            </p>
            <ul class="text-xs text-gray-500 space-y-1">
                <li>• Page 1: Shipping label</li>
                <li>• Page 2: Packing slip</li>
                <li>• Repeats for each order</li>
            </ul>
        </div>
    </div>
</div>

<script>
const fileInput = document.getElementById('files');
const filesInfo = document.getElementById('files-info');
const filesCount = document.getElementById('files-count');
const filesTotalSize = document.getElementById('files-total-size');
const filesList = document.getElementById('files-list');
const sizeWarning = document.getElementById('size-warning');
const warningText = document.getElementById('warning-text');
const uploadForm = document.getElementById('upload-form');
const submitBtn = document.getElementById('submit-btn');
const submitText = document.getElementById('submit-text');
const submitSpinner = document.getElementById('submit-spinner');
const progressContainer = document.getElementById('progress-container');
const progressBar = document.getElementById('progress-bar');
const progressPercent = document.getElementById('progress-percent');

const RECOMMENDED_SIZE = {{ $limits['recommended_size'] ?? 10485760 }};
const MAX_SIZE = {{ $limits['max_file_size'] ?? 52428800 }};

fileInput.addEventListener('change', function(e) {
    const files = Array.from(e.target.files);
    if (files.length > 0) {
        filesCount.textContent = files.length;

        let totalSize = 0;
        let hasOversized = false;
        let hasLarge = false;

        // Build file list HTML
        let listHtml = '';
        files.forEach((file, index) => {
            totalSize += file.size;
            const isOversized = file.size > MAX_SIZE;
            const isLarge = file.size > RECOMMENDED_SIZE;
            if (isOversized) hasOversized = true;
            if (isLarge) hasLarge = true;

            const statusClass = isOversized ? 'text-red-600' : (isLarge ? 'text-yellow-600' : 'text-green-600');
            const statusIcon = isOversized ?
                '<svg class="h-4 w-4" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"/></svg>' :
                '<svg class="h-4 w-4" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/></svg>';

            listHtml += `
                <div class="flex items-center justify-between px-3 py-2 bg-white border rounded text-sm">
                    <div class="flex items-center gap-2 min-w-0">
                        <span class="${statusClass}">${statusIcon}</span>
                        <span class="truncate">${file.name}</span>
                    </div>
                    <span class="text-gray-500 text-xs flex-shrink-0 ml-2">${formatBytes(file.size)}</span>
                </div>
            `;
        });

        filesList.innerHTML = listHtml;
        filesTotalSize.textContent = formatBytes(totalSize);
        filesInfo.classList.remove('hidden');

        // Handle warnings
        if (hasOversized) {
            warningText.textContent = 'Some files exceed 50 MB limit and will be skipped';
            sizeWarning.classList.remove('hidden', 'text-yellow-600');
            sizeWarning.classList.add('text-red-600');
        } else if (hasLarge) {
            warningText.textContent = 'Large files detected - processing may take several minutes';
            sizeWarning.classList.remove('hidden', 'text-red-600');
            sizeWarning.classList.add('text-yellow-600');
        } else {
            sizeWarning.classList.add('hidden');
        }

        submitBtn.disabled = false;
    }
});

function clearFiles() {
    fileInput.value = '';
    filesInfo.classList.add('hidden');
    sizeWarning.classList.add('hidden');
    filesList.innerHTML = '';
    submitBtn.disabled = false;
}

uploadForm.addEventListener('submit', function(e) {
    const files = fileInput.files;
    if (files.length === 0) {
        e.preventDefault();
        return;
    }

    submitBtn.disabled = true;
    submitSpinner.classList.remove('hidden');
    submitText.textContent = `Processing ${files.length} file${files.length > 1 ? 's' : ''}...`;
    progressContainer.classList.remove('hidden');

    // Simulate progress for UX (actual progress would need XHR)
    let progress = 0;
    const interval = setInterval(() => {
        progress += Math.random() * 10;
        if (progress > 90) progress = 90;
        progressBar.style.width = progress + '%';
        progressPercent.textContent = Math.round(progress) + '%';
    }, 500);
});

function formatBytes(bytes) {
    if (bytes >= 1048576) return (bytes / 1048576).toFixed(1) + ' MB';
    if (bytes >= 1024) return (bytes / 1024).toFixed(1) + ' KB';
    return bytes + ' bytes';
}

// Drag and drop
const dropzone = document.getElementById('dropzone');
['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
    dropzone.addEventListener(eventName, preventDefaults, false);
});

function preventDefaults(e) {
    e.preventDefault();
    e.stopPropagation();
}

['dragenter', 'dragover'].forEach(eventName => {
    dropzone.addEventListener(eventName, () => dropzone.classList.add('border-indigo-500', 'bg-indigo-50'), false);
});

['dragleave', 'drop'].forEach(eventName => {
    dropzone.addEventListener(eventName, () => dropzone.classList.remove('border-indigo-500', 'bg-indigo-50'), false);
});

dropzone.addEventListener('drop', function(e) {
    const dt = e.dataTransfer;
    const droppedFiles = dt.files;
    if (droppedFiles.length) {
        // Filter only PDF files
        const pdfFiles = Array.from(droppedFiles).filter(f => f.type === 'application/pdf' || f.name.toLowerCase().endsWith('.pdf'));
        if (pdfFiles.length > 0) {
            // Create a new DataTransfer to set files
            const dataTransfer = new DataTransfer();
            pdfFiles.forEach(f => dataTransfer.items.add(f));
            fileInput.files = dataTransfer.files;
            fileInput.dispatchEvent(new Event('change'));
        }
    }
});
</script>
@endsection