@extends('installer.layout')

@section('content')
    <h1 class="text-3xl font-bold text-teal-700 mb-6">Installation Summary</h1>

    <div class="space-y-3 text-sm text-gray-700 mb-8">
        <div>
            <span class="font-semibold text-gray-600">Database:</span>
            <p class="ml-4">{{ $db['db_host'] }}:{{ $db['db_port'] }} — {{ $db['db_name'] }} as {{ $db['db_user'] }}</p>
        </div>
        <div>
            <span class="font-semibold text-gray-600">Admin:</span>
            <p class="ml-4">{{ $admin['name'] }} — {{ $admin['email'] }}</p>
        </div>
        <div>
            <span class="font-semibold text-gray-600">Settings:</span>
            <p class="ml-4">Currency: {{ $settings['currency'] }} | Timezone: {{ $settings['timezone'] }}</p>
        </div>
    </div>

    <button id="installBtn" class="bg-teal-600 hover:bg-teal-700 text-white rounded-lg px-6 py-2">Install Now</button>

    <div id="progressBar" class="hidden mt-6">
        <div class="w-full bg-gray-200 rounded-full h-4 mb-2">
            <div id="progressFill" class="bg-teal-600 h-4 rounded-full transition-all duration-500" style="width: 0%"></div>
        </div>
        <p id="progressText" class="text-sm text-gray-600">Writing .env file...</p>
    </div>

    <div id="errorMessage" class="hidden mt-4 p-4 bg-red-50 border border-red-200 rounded-lg text-sm text-red-600"></div>

    <script>
        const steps = [
            { pct: 0, msg: 'Writing .env file...' },
            { pct: 20, msg: 'Generating app key...' },
            { pct: 40, msg: 'Running migrations...' },
            { pct: 60, msg: 'Seeding categories...' },
            { pct: 80, msg: 'Creating admin user...' },
            { pct: 100, msg: 'Finalizing...' },
        ];

        document.getElementById('installBtn').addEventListener('click', function () {
            const btn = this;
            btn.disabled = true;
            btn.classList.add('opacity-50', 'cursor-not-allowed');

            const progressBar = document.getElementById('progressBar');
            const progressFill = document.getElementById('progressFill');
            const progressText = document.getElementById('progressText');
            const errorDiv = document.getElementById('errorMessage');

            progressBar.classList.remove('hidden');
            errorDiv.classList.add('hidden');

            let currentStep = 0;

            function updateProgress(pct, msg) {
                progressFill.style.width = pct + '%';
                progressText.textContent = msg;
            }

            fetch('/install/process', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                },
                body: JSON.stringify({}),
            })
            .then(res => res.json())
            .then(data => {
                if (data.success) {
                    currentStep = 0;
                    const interval = setInterval(() => {
                        if (currentStep < steps.length) {
                            updateProgress(steps[currentStep].pct, steps[currentStep].msg);
                            currentStep++;
                        }
                        if (currentStep >= steps.length) {
                            clearInterval(interval);
                            setTimeout(() => {
                                window.location.href = '/install/success';
                            }, 500);
                        }
                    }, 800);
                } else {
                    errorDiv.textContent = data.error || data.message || 'Installation failed.';
                    errorDiv.classList.remove('hidden');
                    btn.disabled = false;
                    btn.classList.remove('opacity-50', 'cursor-not-allowed');
                }
            })
            .catch(err => {
                errorDiv.textContent = 'An unexpected error occurred. Please try again.';
                errorDiv.classList.remove('hidden');
                btn.disabled = false;
                btn.classList.remove('opacity-50', 'cursor-not-allowed');
            });
        });
    </script>
@endsection
