<?php


$pageTitle = 'Admin Account';
$pageDesc = 'Create the main administrator account for your site';

ob_start();
?>

<?php if (!empty($error)): ?>
    <div class="alert alert-error"><?= htmlspecialchars($error) ?></div>
<?php endif; ?>

<form method="post" action="/install/admin">
    <?= Router::csrfField() ?>

    <div class="form-row">
        <div class="form-group">
            <label class="form-label" for="username">Username <span class="required">*</span></label>
            <input type="text" id="username" name="username" class="form-input"
                   value="<?= htmlspecialchars($_POST['username'] ?? '') ?>"
                   placeholder="your_username" required
                   minlength="3" maxlength="50">
        </div>

        <div class="form-group">
            <label class="form-label" for="email">Email Address <span class="required">*</span></label>
            <input type="email" id="email" name="email" class="form-input"
                   value="<?= htmlspecialchars($_POST['email'] ?? '') ?>"
                   placeholder="admin@example.com" required>
        </div>
    </div>

    <div class="form-row">
        <div class="form-group">
            <label class="form-label" for="password">Password <span class="required">*</span></label>
            <input type="password" id="password" name="password" class="form-input"
                   placeholder="Minimum 8 characters" required
                   minlength="8">
            <div class="form-hint">At least 8 characters</div>
        </div>

        <div class="form-group">
            <label class="form-label" for="password_confirm">Confirm Password <span class="required">*</span></label>
            <input type="password" id="password_confirm" name="password_confirm" class="form-input"
                   placeholder="Confirm your password" required
                   minlength="8">
        </div>
    </div>

    <div style="margin:-4px 0 10px; display:flex; align-items:center; gap:14px; flex-wrap:wrap;">
        <button type="button" id="genPw" class="btn btn-secondary" style="padding:6px 12px; font-size:13px;">Generate strong password</button>
        <label style="font-size:13px; color:#4b5563; cursor:pointer; user-select:none;"><input type="checkbox" id="showPw" style="vertical-align:middle;"> Show password</label>
        <span id="pwNote" style="display:none; font-size:12px; color:#059669;">Strong password set — save it somewhere safe, you'll need it to log in.</span>
    </div>

    <div id="pw-mismatch" style="display:none; color:#dc2626; font-size:13px; margin-top:-4px; margin-bottom:8px;">Passwords do not match.</div>

    <div style="margin-top: 8px; display: flex; justify-content: space-between; align-items: center;">
        <a href="/install/database" class="btn btn-secondary">Back</a>
        <button type="submit" id="submitBtn" class="btn btn-primary">Create Account</button>
    </div>
</form>
<script>
(function() {
    var pw = document.getElementById('password');
    var pw2 = document.getElementById('password_confirm');
    var msg = document.getElementById('pw-mismatch');
    var form = pw.closest('form');
    var btn = document.getElementById('submitBtn');
    function check() {
        if (pw2.value !== '' && pw.value !== pw2.value) { msg.style.display = 'block'; }
        else { msg.style.display = 'none'; }
    }
    pw.addEventListener('input', check);
    pw2.addEventListener('input', check);
    form.addEventListener('submit', function(e) {
        if (pw.value !== pw2.value) { e.preventDefault(); msg.style.display = 'block'; return; }
        btn.disabled = true;
        btn.textContent = 'Creating...';
    });

    var genBtn = document.getElementById('genPw');
    var showBox = document.getElementById('showPw');
    var note = document.getElementById('pwNote');
    if (genBtn) genBtn.addEventListener('click', function() {
        var chars = 'ABCDEFGHJKLMNPQRSTUVWXYZabcdefghijkmnopqrstuvwxyz23456789!@#$%&*?';
        var arr = new Uint32Array(18), out = '';
        (window.crypto || window.msCrypto).getRandomValues(arr);
        for (var i = 0; i < 18; i++) out += chars[arr[i] % chars.length];
        pw.value = out; pw2.value = out;
        if (showBox) showBox.checked = true;
        pw.type = pw2.type = 'text';
        if (note) note.style.display = '';
        check();
    });
    if (showBox) showBox.addEventListener('change', function() {
        pw.type = pw2.type = this.checked ? 'text' : 'password';
    });
})();
</script>

<?php
$content = ob_get_clean();
require APP_ROOT . '/templates/install/layout.php';
