@extends('install.layout')

@section('content')
<h2>Ready to Install</h2>
<p class="subtitle">Review your settings and click <strong>Install MedAid</strong> to begin. This may take 30–60 seconds.</p>

@php
    $db    = session('install.db', []);
    $app   = session('install.app', []);
    $admin = session('install.admin', []);
    $demo  = session('install.seed_demo', false);
@endphp

<div class="cred-box">
    <div style="font-size:.72rem;font-weight:700;color:#9ca3af;text-transform:uppercase;letter-spacing:.07em;margin-bottom:10px">Summary</div>
    <div class="cred-row"><span class="cred-key">Database Host</span><span class="cred-val">{{ $db['db_host'] ?? '—' }}:{{ $db['db_port'] ?? '3306' }}</span></div>
    <div class="cred-row"><span class="cred-key">Database Name</span><span class="cred-val">{{ $db['db_database'] ?? '—' }}</span></div>
    <div class="cred-row"><span class="cred-key">Application Name</span><span class="cred-val">{{ $app['app_name'] ?? '—' }}</span></div>
    <div class="cred-row"><span class="cred-key">Application URL</span><span class="cred-val">{{ $app['app_url'] ?? '—' }}</span></div>
    <div class="cred-row"><span class="cred-key">Timezone</span><span class="cred-val">{{ $app['timezone'] ?? '—' }}</span></div>
    <div class="cred-row"><span class="cred-key">Admin Email</span><span class="cred-val">{{ $admin['email'] ?? '—' }}</span></div>
    <div class="cred-row"><span class="cred-key">Sample Data</span><span class="cred-val">{{ $demo ? 'Yes — will be installed' : 'No' }}</span></div>
</div>

<div id="progress-section" style="display:none">
    <div class="section-title">Installation Progress</div>
    <div id="progress-items">
        <div class="progress-item" id="prog-migrate">
            <div class="progress-icon prog-waiting" id="prog-migrate-icon">
                <svg width="14" height="14" fill="none" viewBox="0 0 24 24" stroke="#9ca3af" stroke-width="2.5"><circle cx="12" cy="12" r="10"/></svg>
            </div>
            <div><div class="progress-text">Running database migrations</div><div class="progress-sub">Creating all tables and indexes</div></div>
        </div>
        <div class="progress-item" id="prog-rbac">
            <div class="progress-icon prog-waiting" id="prog-rbac-icon">
                <svg width="14" height="14" fill="none" viewBox="0 0 24 24" stroke="#9ca3af" stroke-width="2.5"><circle cx="12" cy="12" r="10"/></svg>
            </div>
            <div><div class="progress-text">Setting up roles &amp; permissions</div><div class="progress-sub">Configuring RBAC access control</div></div>
        </div>
        <div class="progress-item" id="prog-admin">
            <div class="progress-icon prog-waiting" id="prog-admin-icon">
                <svg width="14" height="14" fill="none" viewBox="0 0 24 24" stroke="#9ca3af" stroke-width="2.5"><circle cx="12" cy="12" r="10"/></svg>
            </div>
            <div><div class="progress-text">Creating administrator account</div><div class="progress-sub">Your login credentials</div></div>
        </div>
        <div class="progress-item" id="prog-env">
            <div class="progress-icon prog-waiting" id="prog-env-icon">
                <svg width="14" height="14" fill="none" viewBox="0 0 24 24" stroke="#9ca3af" stroke-width="2.5"><circle cx="12" cy="12" r="10"/></svg>
            </div>
            <div><div class="progress-text">Writing configuration file</div><div class="progress-sub">Saving your settings to .env</div></div>
        </div>
    </div>
    <div id="error-output" class="error-box" style="display:none;margin-top:16px"></div>
</div>

<div class="actions" id="action-bar">
    <a href="{{ route('install.step', 4) }}" class="btn btn-secondary" id="btn-back">← Back</a>
    <button class="btn btn-primary btn-lg" id="btn-install" onclick="runInstall()">
        <svg width="18" height="18" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
        Install MedAid
    </button>
</div>
@endsection

@section('scripts')
<script>
function setIcon(id, state) {
    const icons = {
        running: `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#3b82f6" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83"/></svg>`,
        done: `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#059669" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>`,
        error: `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#dc2626" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>`,
    };
    const el = document.getElementById(id + '-icon');
    el.className = 'progress-icon prog-' + state;
    el.innerHTML = icons[state] || '';
}

async function runInstall() {
    document.getElementById('btn-install').disabled = true;
    document.getElementById('btn-back').style.display = 'none';
    document.getElementById('btn-install').innerHTML = '<span>Installing…</span>';
    document.getElementById('progress-section').style.display = 'block';

    ['migrate','rbac','admin','env'].forEach(id => setIcon('prog-' + id, 'running'));

    try {
        const resp = await fetch('{{ route('install.run') }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name=csrf-token]').content,
                'Accept': 'application/json',
            },
            body: JSON.stringify({}),
        });

        const data = await resp.json();

        if (data.success) {
            ['migrate','rbac','admin','env'].forEach(id => setIcon('prog-' + id, 'done'));
            document.getElementById('action-bar').innerHTML =
                '<div></div><a href="{{ route('install.complete') }}" class="btn btn-primary btn-lg">View Login Page →</a>';
        } else {
            ['migrate','rbac','admin','env'].forEach(id => setIcon('prog-' + id, 'error'));
            const errBox = document.getElementById('error-output');
            errBox.style.display = 'block';
            errBox.innerHTML = '<strong>Installation failed:</strong><br>' + (data.error || 'Unknown error');
            document.getElementById('btn-back').style.display = 'inline-flex';
            document.getElementById('btn-install').disabled = false;
            document.getElementById('btn-install').innerHTML = 'Retry';
        }
    } catch (e) {
        document.getElementById('error-output').style.display = 'block';
        document.getElementById('error-output').textContent = 'Network error: ' + e.message;
        document.getElementById('btn-back').style.display = 'inline-flex';
        document.getElementById('btn-install').disabled = false;
    }
}
</script>
@endsection