@php
    $step = $step ?? 1;
    $title = $title ?? 'Setup';
    $stepLabels = ['Requirements', 'Install mode', 'Database', 'Admin user', 'Done'];
@endphp
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="robots" content="noindex,nofollow">
    <title>{{ $title }} — AppShot AI Installer</title>
    <style>
        *, *::before, *::after { box-sizing: border-box; }
        html, body { margin: 0; padding: 0; }
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            background: #F3F4F6;
            color: #111827;
            font-size: 15px;
            line-height: 1.5;
            min-height: 100vh;
            -webkit-font-smoothing: antialiased;
        }
        a { color: #0052FF; text-decoration: none; }
        a:hover { text-decoration: underline; }
        .header {
            background: #FFFFFF;
            border-bottom: 1px solid #E5E7EB;
            padding: 16px 24px;
            font-size: 13px;
            font-weight: 600;
            color: #374151;
            letter-spacing: 0.01em;
        }
        .container {
            max-width: 560px;
            margin: 40px auto 64px;
            padding: 0 16px;
        }
        .card {
            background: #FFFFFF;
            border: 1px solid #E5E7EB;
            border-radius: 12px;
            padding: 32px;
            box-shadow: 0 1px 2px rgba(17, 24, 39, 0.04);
        }
        .progress {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 32px;
            gap: 8px;
        }
        .progress-step {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
            position: relative;
        }
        .progress-step::after {
            content: "";
            position: absolute;
            top: 13px;
            left: 50%;
            width: 100%;
            height: 2px;
            background: #E5E7EB;
            z-index: 0;
        }
        .progress-step:last-child::after { display: none; }
        .progress-step.done::after { background: #4D7CFF; }
        .progress-pip {
            width: 28px;
            height: 28px;
            border-radius: 50%;
            background: #FFFFFF;
            border: 2px solid #E5E7EB;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            font-weight: 600;
            color: #9CA3AF;
            position: relative;
            z-index: 1;
        }
        .progress-step.current .progress-pip {
            background: #0052FF;
            border-color: #0052FF;
            color: #FFFFFF;
        }
        .progress-step.done .progress-pip {
            background: #4D7CFF;
            border-color: #4D7CFF;
            color: #FFFFFF;
        }
        .progress-label {
            font-size: 11px;
            font-weight: 500;
            color: #6B7280;
            text-align: center;
        }
        .progress-step.current .progress-label { color: #0052FF; font-weight: 600; }
        .progress-step.done .progress-label { color: #374151; }
        h1 {
            font-size: 22px;
            font-weight: 600;
            margin: 0 0 8px;
            color: #111827;
            letter-spacing: -0.01em;
        }
        h2 {
            font-size: 14px;
            font-weight: 600;
            margin: 24px 0 12px;
            color: #111827;
        }
        p { margin: 0 0 16px; color: #374151; }
        p.muted { color: #6B7280; font-size: 13px; }
        .lead { color: #4B5563; margin-bottom: 24px; }
        .field { margin-bottom: 16px; }
        .field label {
            display: block;
            font-size: 13px;
            font-weight: 500;
            color: #374151;
            margin-bottom: 6px;
        }
        .field input[type="text"],
        .field input[type="email"],
        .field input[type="password"],
        .field input[type="number"] {
            width: 100%;
            padding: 9px 12px;
            border: 1px solid #D1D5DB;
            border-radius: 8px;
            font-family: inherit;
            font-size: 14px;
            color: #111827;
            background: #FFFFFF;
            transition: border-color 0.12s ease, box-shadow 0.12s ease;
        }
        .field input:focus {
            outline: none;
            border-color: #0052FF;
            box-shadow: 0 0 0 3px rgba(0, 82, 255, 0.12);
        }
        .field .hint { font-size: 12px; color: #6B7280; margin-top: 4px; line-height: 1.45; }
        .field .hint code {
            background: #F3F4F6;
            padding: 1px 5px;
            border-radius: 3px;
            font-size: 11px;
            font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
        }
        .password-wrap { position: relative; }
        .password-wrap input { padding-right: 64px !important; }
        .password-toggle {
            position: absolute;
            right: 6px;
            top: 50%;
            transform: translateY(-50%);
            background: #F3F4F6;
            border: 1px solid #E5E7EB;
            border-radius: 5px;
            padding: 4px 10px;
            font-size: 11px;
            font-weight: 500;
            color: #4B5563;
            cursor: pointer;
        }
        .password-toggle:hover { background: #E5E7EB; }
        .field-error {
            font-size: 12px;
            color: #DC2626;
            margin-top: 4px;
        }
        .field input.has-error { border-color: #DC2626; }
        .banner-error {
            background: #FEF2F2;
            border: 1px solid #FECACA;
            color: #B91C1C;
            padding: 12px 14px;
            border-radius: 8px;
            font-size: 13px;
            margin-bottom: 20px;
        }
        .banner-error ul { margin: 6px 0 0; padding-left: 20px; }
        .banner-error li { margin-bottom: 2px; }
        .actions {
            margin-top: 24px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 12px;
        }
        .btn {
            display: inline-block;
            padding: 10px 18px;
            font-family: inherit;
            font-size: 14px;
            font-weight: 500;
            border-radius: 8px;
            border: none;
            cursor: pointer;
            transition: background 0.12s ease, color 0.12s ease;
            text-decoration: none;
        }
        .btn:focus-visible {
            outline: 2px solid #0052FF;
            outline-offset: 2px;
        }
        .btn-primary {
            background: #0052FF;
            color: #FFFFFF;
        }
        .btn-primary:hover { background: #003ECC; text-decoration: none; }
        .btn-primary:disabled,
        .btn-disabled {
            background: #9CA3AF;
            color: #FFFFFF;
            cursor: not-allowed;
        }
        .btn.is-loading {
            color: transparent !important;
            pointer-events: none;
            position: relative;
        }
        .btn.is-loading::after {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            width: 16px;
            height: 16px;
            margin: -8px 0 0 -8px;
            border: 2px solid rgba(255, 255, 255, 0.45);
            border-top-color: #FFFFFF;
            border-radius: 50%;
            animation: btn-spin 0.6s linear infinite;
        }
        @keyframes btn-spin { to { transform: rotate(360deg); } }
        .btn-secondary {
            background: #FFFFFF;
            color: #374151;
            border: 1px solid #D1D5DB;
        }
        .btn-secondary:hover { background: #F9FAFB; text-decoration: none; }
        .check-list {
            list-style: none;
            margin: 0 0 24px;
            padding: 0;
        }
        .check-list li {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            padding: 10px 0;
            border-bottom: 1px solid #F3F4F6;
        }
        .check-list li:last-child { border-bottom: none; }
        .check-icon {
            flex-shrink: 0;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            font-weight: 700;
            margin-top: 1px;
        }
        .check-icon.ok { background: #DCFCE7; color: #15803D; }
        .check-icon.fail { background: #FEE2E2; color: #DC2626; }
        .check-body { flex: 1; }
        .check-body .label {
            font-size: 14px;
            color: #111827;
            font-weight: 500;
        }
        .check-body .hint {
            font-size: 12px;
            color: #6B7280;
            margin-top: 4px;
        }
        pre {
            background: #0F172A;
            color: #E2E8F0;
            padding: 14px 16px;
            border-radius: 8px;
            font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
            font-size: 13px;
            line-height: 1.5;
            overflow-x: auto;
            margin: 0 0 8px;
        }
        .copy-input {
            width: 100%;
            padding: 8px 10px;
            border: 1px solid #D1D5DB;
            border-radius: 6px;
            font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
            font-size: 12px;
            background: #F9FAFB;
            color: #111827;
        }
        .success-icon {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            background: #DCFCE7;
            color: #15803D;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            font-weight: 700;
            margin-bottom: 12px;
        }
        ul.bullets {
            margin: 0 0 16px;
            padding-left: 20px;
            color: #374151;
            font-size: 14px;
        }
        ul.bullets li { margin-bottom: 6px; }
        .helper-text {
            font-size: 12px;
            color: #6B7280;
            margin-top: 8px;
            text-align: right;
        }
    </style>
</head>
<body>
    <div class="header">AppShot AI &middot; Setup</div>
    <div class="container">
        <div class="card">
            <div class="progress" aria-label="Installation progress">
                @foreach ($stepLabels as $i => $label)
                    @php
                        $n = $i + 1;
                        $cls = $n < $step ? 'done' : ($n === $step ? 'current' : 'pending');
                    @endphp
                    <div class="progress-step {{ $cls }}">
                        <div class="progress-pip">{{ $n < $step ? '✓' : $n }}</div>
                        <div class="progress-label">{{ $label }}</div>
                    </div>
                @endforeach
            </div>

            @if (session('error'))
                <div class="banner-error">{{ session('error') }}</div>
            @endif

            @yield('content')
        </div>
    </div>

    <script nonce="{{ Vite::cspNonce() }}">
        // Disable + spinner on submit. The slow steps (DB connection test,
        // finalize → migrate + seed) take seconds; without this the buttons
        // stay clickable and give no feedback, so impatient double-clicks
        // fire the POST twice.
        document.querySelectorAll('form').forEach(function (form) {
            form.addEventListener('submit', function (e) {
                if (form.dataset.submitting === '1') { e.preventDefault(); return; }
                var btn = form.querySelector('button[type="submit"]');
                if (! btn) return;
                form.dataset.submitting = '1';
                btn.classList.add('is-loading');
                btn.setAttribute('aria-busy', 'true');
                // Defer the disabled flag: disabled controls aren't submitted,
                // and navigation begins synchronously when the handler returns,
                // so the button still participates in THIS POST and disables
                // immediately after (blocking re-submits).
                setTimeout(function () { btn.disabled = true; }, 0);
            });
        });
    </script>
</body>
</html>
