@extends('layouts.admin')

@section('header', 'Import Progress')

@section('content')
    <div class="max-w-2xl mx-auto bg-white rounded-lg shadow p-6" x-data="importProgress({{ $import->id }})">
        <div class="text-center mb-6">
            <h2 class="text-lg font-medium text-gray-900" x-text="statusMessage">Initializing...</h2>
            <p class="text-sm text-gray-500 mt-1">Import ID: {{ $import->id }}</p>
        </div>

        <!-- Progress Bar -->
        <div class="relative pt-1">
            <div class="flex mb-2 items-center justify-between">
                <div>
                    <span
                        class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-blue-600 bg-blue-200">
                        Progress
                    </span>
                </div>
                <div class="text-right">
                    <span class="text-xs font-semibold inline-block text-blue-600" x-text="percent + '%'">
                        0%
                    </span>
                </div>
            </div>
            <div class="overflow-hidden h-2 mb-4 text-xs flex rounded bg-blue-200">
                <div :style="'width: ' + percent + '%'"
                    class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-blue-500 transition-all duration-500">
                </div>
            </div>
        </div>

        <div class="mt-4 text-center">
            <p class="text-sm text-gray-600">Processed: <span x-text="processed">0</span> / <span x-text="total">0</span>
            </p>
        </div>

        <div class="mt-8 text-center" x-show="finished">
            <a href="{{ route('admin.dashboard') }}"
                class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-blue-700 bg-blue-100 hover:bg-blue-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
                Return to Dashboard
            </a>
        </div>
    </div>

    <script src="//unpkg.com/alpinejs" defer></script>
    <script>
        function importProgress(id) {
            return {
                percent: 0,
                processed: 0,
                total: 0,
                status: 'pending',
                finished: false,

                get statusMessage() {
                    if (this.status === 'pending') return 'Queued...';
                    if (this.status === 'processing') return 'Processing...';
                    if (this.status === 'completed') return 'Import Completed!';
                    if (this.status === 'failed') return 'Import Failed';
                    return 'Unknown Status';
                },

                init() {
                    this.poll();
                },

                poll() {
                    fetch(`/admin/import/${id}/poll`)
                        .then(response => response.json())
                        .then(data => {
                            this.status = data.status;
                            this.processed = data.processed_rows;
                            this.total = data.total_rows;

                            if (this.total > 0) {
                                this.percent = Math.round((this.processed / this.total) * 100);
                            }

                            if (this.status === 'completed' || this.status === 'failed') {
                                this.finished = true;
                                if (this.status === 'completed') this.percent = 100;
                            } else {
                                setTimeout(() => this.poll(), 1000);
                            }
                        });
                }
            }
        }
    </script>
@endsection