<?php
/**
 * Standalone verification page.
 *
 * Full-screen, self-contained (own <html>) so it can be embedded as a gateway.
 * It boots verify.js with the issued token + challenge config, runs the client
 * security probes, presents the slider puzzle, and POSTs the collected signals
 * to /api/verify.
 *
 * @var \BotGuard\Core\View $this
 * @var string $token
 * @var array  $challenge
 * @var string $provider
 * @var int    $issuedAtMs
 * @var \BotGuard\Core\Csrf $csrf
 */
$appName = e(config('app.name', 'BotGuard'));
$bootConfig = [
    'token'      => $token,
    'provider'   => $provider,
    'challenge'  => $challenge,
    'issuedAtMs' => $issuedAtMs,
    'csrf'       => $csrf->token(),
    'endpoints'  => ['verify' => '/api/verify', 'challenge' => '/api/challenge'],
    'thresholds' => [
        'human'      => (int) config('detection.thresholds.human', 80),
        'suspicious' => (int) config('detection.thresholds.suspicious', 60),
    ],
];
?>
<!DOCTYPE html>
<html lang="en" data-bs-theme="dark">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="<?= e($csrf->token()) ?>">
    <meta name="robots" content="noindex,nofollow">
    <title><?= $appName ?> · Verifying…</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" rel="stylesheet">
    <link href="/assets/css/app.css" rel="stylesheet">
    <style>
        body { min-height:100vh; display:grid; place-items:center;
               background: radial-gradient(1200px 700px at 50% -15%, var(--bs-primary-bg-subtle), var(--bs-body-bg)); }
        .verify-card { max-width: 480px; width: 100%; }
        .puzzle-wrap { position:relative; height:56px; border-radius:.6rem;
                       background: var(--bs-tertiary-bg); border:1px solid var(--bs-border-color); overflow:hidden; }
        .puzzle-track-label { position:absolute; inset:0; display:grid; place-items:center;
                              color: var(--bs-secondary-color); font-size:.9rem; user-select:none; pointer-events:none; }
        .puzzle-target { position:absolute; top:8px; height:40px; width:42px; border-radius:.5rem;
                         border:2px dashed var(--bs-border-color); }
        .puzzle-piece { position:absolute; top:8px; left:0; height:40px; width:42px; border-radius:.5rem;
                        background: var(--bs-primary); cursor:grab; display:grid; place-items:center; color:#fff;
                        touch-action:none; box-shadow:0 2px 8px rgba(0,0,0,.2); }
        .puzzle-piece:active { cursor:grabbing; }
        .puzzle-piece.ok { background: var(--bs-success); }
    </style>
</head>
<body>
    <div class="verify-card">
        <div class="card border-0 shadow-lg">
            <div class="card-body p-4 p-md-5">
                <div class="d-flex justify-content-between align-items-center mb-4">
                    <div class="d-flex align-items-center gap-2">
                        <i class="bi bi-shield-lock-fill text-primary fs-4"></i>
                        <span class="fw-bold"><?= $appName ?></span>
                    </div>
                    <button id="themeToggle" class="btn btn-outline-secondary btn-sm" type="button" title="Toggle theme">
                        <i class="bi bi-moon-stars"></i>
                    </button>
                </div>

                <!-- Score ring -->
                <div class="text-center mb-4">
                    <div class="score-ring mx-auto" id="scoreRing" style="--value:0">
                        <div>
                            <div class="score-num" id="scoreNum">…</div>
                            <div class="small text-secondary" id="scoreLabel">Analyzing</div>
                        </div>
                    </div>
                </div>

                <h1 class="h5 text-center mb-1">Verifying you're human</h1>
                <p class="text-secondary text-center small mb-4" id="statusLine">Running security checks…</p>

                <!-- Live checklist -->
                <div id="checklist" class="mb-4"></div>

                <!-- Puzzle (hidden until checks complete) -->
                <div id="puzzleSection" class="d-none">
                    <label class="form-label small text-secondary">Slide the block into the dashed slot to continue</label>
                    <div class="puzzle-wrap" id="puzzleWrap">
                        <span class="puzzle-track-label">Drag →</span>
                        <div class="puzzle-target" id="puzzleTarget"></div>
                        <div class="puzzle-piece" id="puzzlePiece"><i class="bi bi-arrow-right"></i></div>
                    </div>
                    <div id="remoteCaptcha" class="mt-3"></div>
                </div>

                <!-- Result / block message -->
                <div id="resultBox" class="alert d-none mt-3 mb-0" role="alert"></div>

                <!-- Honeypot decoys: invisible to humans, tempting to bots -->
                <div aria-hidden="true">
                    <input class="hp-field" type="text" name="contact_email" id="hp_contact_email" tabindex="-1" autocomplete="off">
                    <input class="hp-field" type="url" name="website" id="hp_website" tabindex="-1" autocomplete="off">
                </div>

                <noscript>
                    <div class="alert alert-warning mt-3 mb-0">
                        JavaScript is required to complete verification. Please enable it and reload.
                    </div>
                </noscript>
            </div>
        </div>
        <p class="text-center text-secondary small mt-3 mb-0">
            Protected by <?= $appName ?> · <a href="/" class="link-secondary">Learn more</a>
        </p>
    </div>

    <script>window.__BG = <?= json_encode($bootConfig, JSON_UNESCAPED_SLASHES) ?>;</script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="/assets/js/theme.js"></script>
    <script src="/assets/js/verify.js"></script>
</body>
</html>
