<?php
declare(strict_types=1);

define('ROOT_DIR', dirname(__DIR__));
define('DATA_DIR', ROOT_DIR . '/data');

require_once ROOT_DIR . '/config/app.php';
require_once ROOT_DIR . '/api/Honeypot.php';

$honeypot = new Honeypot(DATA_DIR);
if ($honeypot->isBlocked($honeypot->getClientIp())) {
    http_response_code(403);
    ?>
    <!DOCTYPE html>
    <html lang="de">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Zugang gesperrt</title>
        <link rel="stylesheet" href="<?= ASSETS_URL ?>/css/core-framework.css">
    </head>
    <body style="display:flex;align-items:center;justify-content:center;min-height:100vh;padding:2rem">
        <div class="card" style="max-width:480px;text-align:center">
            <h1 class="h4 text-title">Zugang vorübergehend gesperrt</h1>
            <p>Deine IP-Adresse wurde automatisch blockiert, da eine eingeschränkte URL aufgerufen wurde.</p>
            <p>Zur Entsperrung bitte über das <a href="https://hochzeitswebseite.de/kontakt" target="_blank">Kontaktformular</a> melden – mit Angabe der URL deiner Webseite.</p>
        </div>
    </body>
    </html>
    <?php
    exit;
}

session_name('hw_session');
session_set_cookie_params([
    'lifetime' => 0, 'path' => '/',
    'secure'   => isset($_SERVER['HTTPS']),
    'httponly' => true, 'samesite' => 'Lax',
]);
session_start();

$isAuth = !empty($_SESSION['hw_auth']);
?>
<!DOCTYPE html>
<html lang="de" class="cf-theme-light">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Backstage – Hochzeitswebseite</title>
    <link rel="stylesheet" href="https://use.hugeicons.com/font/icons.css">
    <link rel="stylesheet" href="<?= ASSETS_URL ?>/css/core-framework.css">
    <link rel="stylesheet" href="<?= ASSETS_URL ?>/css/editor.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vue3-emoji-picker@1.1.8/dist/style.css">
    <link rel="icon" href="<?= ASSETS_URL ?>/img/favicon.png">
</head>
<body>

<?php if (!$isAuth): ?>
<!-- ── LOGIN SCREEN ─────────────────────────────────────────────────────── -->
<div id="hw-login" class="hw-login">
    <div class="hw-login__card card">
        <div class="hw-login__logo">
            <img src="/assets/img/howe-logo.svg" alt="Hochzeitswebseite.de">
        </div>
        <h1 class="h4 text-title text-center">Backstage</h1>
        <p class="text-s text-center" style="color:var(--dark-60);margin-top:-.5rem">Hochzeitswebseite Editor</p>
        <div id="hw-login-error" class="hw-login__error" style="display:none"></div>
        <div class="hw-field">
            <label class="hw-field__label" for="pw-input">Passwort</label>
            <input type="password" id="pw-input" class="select hw-field__input" placeholder="••••••••" autocomplete="current-password">
        </div>
        <button id="login-btn" class="width-100" style="margin-top:var(--space-xs)">
            <span id="login-btn-text">Einloggen</span>
        </button>
    </div>
</div>

<script>
(function() {
    const btn   = document.getElementById('login-btn');
    const input = document.getElementById('pw-input');
    const err   = document.getElementById('hw-login-error');

    async function doLogin() {
        btn.disabled = true;
        document.getElementById('login-btn-text').textContent = '…';
        err.style.display = 'none';
        try {
            const res  = await fetch(window.location.origin + '/api/index.php/auth/login', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ password: input.value })
            });
            const json = await res.json();
            if (json.success) {
                window.location.reload();
            } else {
                err.textContent = 'Falsches Passwort';
                err.style.display = 'block';
                btn.disabled = false;
                document.getElementById('login-btn-text').textContent = 'Einloggen';
            }
        } catch(e) {
            err.textContent = 'Verbindungsfehler';
            err.style.display = 'block';
            btn.disabled = false;
            document.getElementById('login-btn-text').textContent = 'Einloggen';
        }
    }

    btn.addEventListener('click', doLogin);
    input.addEventListener('keydown', e => e.key === 'Enter' && doLogin());
})();
</script>

<?php else: ?>
<!-- ── EDITOR APP ───────────────────────────────────────────────────────── -->
<div id="app">
    <hw-app></hw-app>
</div>

<script>window.HW_APP_BASE = '<?= APP_URL ?>'; window.HW_ROLE = '<?= htmlspecialchars($_SESSION['hw_role'] ?? 'couple', ENT_QUOTES) ?>';</script>
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue3-emoji-picker@1.1.8/dist/emoji-picker.umd.js"></script>
<script src="<?= ASSETS_URL ?>/lang/de.js"></script>
<script src="<?= ASSETS_URL ?>/lang/en.js"></script>
<script src="<?= ASSETS_URL ?>/js/editor-app.js"></script>
<?php endif; ?>

</body>
</html>