@extends('layouts.installer')

@section('title', 'Ready to Install')
@section('subtitle', 'Your configuration is complete. Clicking execute will build your application.')

@section('content')

<div class="flex flex-col items-center justify-center py-12" id="ready-state">
    <div class="w-24 h-24 rounded-full bg-blue-500/10 border-4 border-blue-500/20 flex items-center justify-center mb-6">
        <i data-lucide="rocket" class="w-10 h-10 text-blue-500"></i>
    </div>
    <h3 class="text-2xl font-display font-700 text-white mb-2">Everything is Set!</h3>
    <p class="text-text-dim text-center max-w-sm mb-8">
        We will now configure your `.env` file, run database migrations, seed default data, and create your super admin account.
    </p>

    <div class="flex gap-4">
        <a href="{{ route('install.admin') }}" class="btn-secondary">
            &larr; Go Back
        </a>
        <button type="button" onclick="startInstallation()" class="btn-primary" id="start-btn">
            Execute Installation
            <i data-lucide="play" class="w-4 h-4"></i>
        </button>
    </div>
</div>

<div class="hidden flex-col justify-center py-8" id="loading-state">
    
    <div class="mb-8 text-center">
        <div class="inline-block relative w-20 h-20 mb-4">
            <svg class="animate-spin text-blue-500 w-full h-full" xmlns="http://www.w3.org/2000/svg" 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>
        </div>
        <h3 class="text-2xl font-display font-700 text-white" id="progress-text">Installing...</h3>
        <p class="text-text-dim text-sm mt-1">Please do not refresh or close this page.</p>
    </div>

        <div class="max-w-md w-full mx-auto space-y-4">
        <div class="flex items-center gap-3 text-text-dim" id="step-env">
            <i data-lucide="circle-dashed" class="w-4 h-4 text-text-dim step-icon"></i>
            <span class="text-sm font-500">Configuring Environment (.env)</span>
        </div>
        <div class="flex items-center gap-3 text-text-dim" id="step-db">
            <i data-lucide="circle-dashed" class="w-4 h-4 text-text-dim step-icon"></i>
            <span class="text-sm font-500">Migrating Database Schema</span>
        </div>
        <div class="flex items-center gap-3 text-text-dim" id="step-admin">
            <i data-lucide="circle-dashed" class="w-4 h-4 text-text-dim step-icon"></i>
            <span class="text-sm font-500">Creating Admin Account</span>
        </div>
        <div class="flex items-center gap-3 text-text-dim" id="step-finalize">
            <i data-lucide="circle-dashed" class="w-4 h-4 text-text-dim step-icon"></i>
            <span class="text-sm font-500">Finalizing Setup & Clearing Caches</span>
        </div>
    </div>
</div>

<div class="hidden mt-8 p-4 rounded-xl bg-red-500/10 border border-red-500/20 text-red-400" id="error-alert">
    <div class="flex gap-3">
        <i data-lucide="alert-triangle" class="w-5 h-5 flex-shrink-0"></i>
        <div>
            <h4 class="font-600 mb-1">Installation Failed</h4>
            <p class="text-sm" id="error-message"></p>
        </div>
    </div>
    <div class="mt-4 flex justify-end">
        <button onclick="window.location.reload()" class="px-4 py-2 bg-red-500/20 hover:bg-red-500/30 rounded-lg text-sm font-500 transition-colors">Try Again</button>
    </div>
</div>

@endsection

@push('scripts')
<script>
    function startInstallation() {
        document.getElementById('ready-state').classList.add('hidden');
        document.getElementById('loading-state').classList.remove('hidden');
        document.getElementById('loading-state').classList.add('flex');
        document.getElementById('error-alert').classList.add('hidden');

        // Visual simulation of steps (actual backend does it all at once)
        updateStep('step-env', 'loading');
        
        setTimeout(() => updateStep('step-env', 'done'), 800);
        setTimeout(() => updateStep('step-db', 'loading'), 900);
        
        // Execute the backend request
        fetch("{{ route('install.execute') }}", {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Accept': 'application/json',
                'Content-Type': 'application/json'
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                updateStep('step-db', 'done');
                updateStep('step-admin', 'done');
                updateStep('step-finalize', 'done');
                document.getElementById('progress-text').innerText = 'Installation Complete!';
                
                setTimeout(() => {
                    window.location.href = data.redirect;
                }, 1000);
            } else {
                showError(data.message || 'An unknown error occurred during installation.');
            }
        })
        .catch(error => {
            showError('Server error: ' + error.message);
        });
    }

    function updateStep(id, status) {
        const el = document.getElementById(id);
        const icon = el.querySelector('.step-icon');
        
        if (status === 'loading') {
            icon.outerHTML = `<svg class="animate-spin w-4 h-4 text-blue-400 step-icon" xmlns="http://www.w3.org/2000/svg" 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>`;
            el.classList.add('text-white');
        } else if (status === 'done') {
            icon.outerHTML = `<i data-lucide="check-circle-2" class="w-4 h-4 text-emerald-400 step-icon"></i>`;
            el.classList.remove('text-white');
            el.classList.add('text-emerald-400');
            lucide.createIcons();
        }
    }

    function showError(message) {
        document.getElementById('loading-state').classList.add('hidden');
        document.getElementById('loading-state').classList.remove('flex');
        
        const errorAlert = document.getElementById('error-alert');
        errorAlert.classList.remove('hidden');
        document.getElementById('error-message').innerText = message;
    }
</script>
@endpush