@extends('install.layout')

@section('title', __('Install'))

@section('content')
    <h1>{{ __('Install RedFamosa') }}</h1>
    <p class="lead">{{ __('Choose how much data to seed, then start the installation.') }}</p>

    <div id="mode-picker">
        <div class="mode-grid">
            <div class="mode-card sel" data-mode="production">
                <h3>{{ __('Production') }}</h3>
                <p>{{ __('Only the essentials: roles, permissions, currencies and your admin account. Start with an empty catalogue.') }}</p>
            </div>
            <div class="mode-card" data-mode="demo">
                <h3>{{ __('Demo') }}</h3>
                <p>{{ __('Everything above plus sample catalogue data so you can explore a populated panel right away.') }}</p>
            </div>
        </div>
        <div class="actions">
            <a href="{{ route('install.admin') }}" class="btn btn-ghost">&larr; {{ __('Back') }}</a>
            <button type="button" class="btn btn-primary" id="start-btn">{{ __('Install now') }}</button>
        </div>
    </div>

    <div id="run-panel" style="display:none;">
        <div class="card">
            <ul class="prog-list" id="prog-list">
                <li class="prog-item" data-step="1"><span class="dot"></span>{{ __('Verifying database connection') }}</li>
                <li class="prog-item" data-step="2"><span class="dot"></span>{{ __('Running database migrations') }}</li>
                <li class="prog-item" data-step="3"><span class="dot"></span>{{ __('Seeding core data') }}</li>
                <li class="prog-item" data-step="4"><span class="dot"></span>{{ __('Creating admin account') }}</li>
                <li class="prog-item" data-step="5"><span class="dot"></span>{{ __('Linking storage') }}</li>
                <li class="prog-item" data-step="6"><span class="dot"></span>{{ __('Writing configuration & finalizing') }}</li>
            </ul>
        </div>
        <div id="run-alert" class="alert"></div>
    </div>
@endsection

@section('scripts')
<script>
    let selectedMode = 'production';
    document.querySelectorAll('.mode-card').forEach(card => {
        card.addEventListener('click', () => {
            document.querySelectorAll('.mode-card').forEach(c => c.classList.remove('sel'));
            card.classList.add('sel');
            selectedMode = card.dataset.mode;
        });
    });

    const csrf = document.querySelector('meta[name=csrf-token]').content;
    const executeUrl = @json(route('install.execute'));
    const completeUrl = @json(route('install.complete'));

    async function runStep(step) {
        const item = document.querySelector(`.prog-item[data-step="${step}"]`);
        item.classList.add('running');
        try {
            const res = await fetch(executeUrl, {
                method: 'POST',
                headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrf },
                body: JSON.stringify({ step, mode: selectedMode }),
            });
            const data = await res.json();
            item.classList.remove('running');
            if (data.success) {
                item.classList.add('done');
                return true;
            }
            item.classList.add('fail');
            showError(data.message || @json(__('Installation failed.')));
            return false;
        } catch (err) {
            // Step 6 writes .env, which causes artisan serve to briefly restart.
            // The network error is expected in that case — treat it as success since
            // all work was completed before the process restarted.
            if (step === 6) {
                item.classList.remove('running');
                item.classList.add('done');
                return true;
            }
            item.classList.remove('running');
            item.classList.add('fail');
            showError(err.message || @json(__('Installation failed.')));
            return false;
        }
    }

    function showError(msg) {
        const alert = document.getElementById('run-alert');
        alert.className = 'alert err';
        alert.textContent = msg;
    }

    // After step 6 the server may briefly restart (artisan serve). Poll until
    // the complete page responds before navigating to it.
    async function navigateWhenReady(url, attempts = 10) {
        for (let i = 0; i < attempts; i++) {
            try {
                const r = await fetch(url, { method: 'HEAD', cache: 'no-store' });
                if (r.ok || r.redirected) { window.location.href = url; return; }
            } catch (_) {}
            await new Promise(r => setTimeout(r, 800));
        }
        window.location.href = url;
    }

    document.getElementById('start-btn').addEventListener('click', async () => {
        document.getElementById('mode-picker').style.display = 'none';
        document.getElementById('run-panel').style.display = 'block';
        for (let step = 1; step <= 6; step++) {
            const ok = await runStep(step);
            if (!ok) return;
        }
        navigateWhenReady(completeUrl);
    });
</script>
@endsection