<?php
declare(strict_types=1);
require_once '/srv/aether/core/_bootstrap.php';

$token = trim((string)($_GET['token'] ?? ''));
$mode = $token !== '' ? 'confirm' : 'request';
?>
<!doctype html>
<html lang="pt-BR">
<head>
    <meta charset="utf-8">
    <title>Aether – Redefinir senha</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        body {
            font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
            background: #f3f4f6;
            margin: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
        }
        .card {
            background: #fff;
            padding: 2rem 2.5rem;
            border-radius: 12px;
            box-shadow: 0 10px 30px rgba(0,0,0,.08);
            width: 100%;
            max-width: 420px;
        }
        .card h1 {
            margin: 0 0 0.5rem;
            font-size: 1.5rem;
        }
        .card p {
            margin: 0 0 1.5rem;
            color: #6b7280;
            font-size: 0.9rem;
        }
        .field { margin-bottom: 1rem; }
        .field label {
            display: block;
            margin-bottom: 0.25rem;
            font-size: 0.9rem;
        }
        .field input {
            width: 100%;
            padding: 0.6rem 0.75rem;
            border-radius: 8px;
            border: 1px solid #d1d5db;
            font-size: 0.95rem;
            box-sizing: border-box;
        }
        .btn {
            width: 100%;
            padding: 0.7rem;
            border-radius: 999px;
            border: none;
            font-weight: 600;
            font-size: 0.95rem;
            cursor: pointer;
        }
        .btn-primary { background: #2563eb; color: #fff; }
        .btn-primary:disabled { opacity: .7; cursor: default; }
        .error { margin-top: 0.75rem; font-size: 0.85rem; color: #b91c1c; }
        .success { margin-top: 0.75rem; font-size: 0.85rem; color: #15803d; }
        .link {
            display: block;
            margin-top: 1rem;
            text-align: center;
            font-size: 0.85rem;
            color: #2563eb;
            text-decoration: none;
        }
        .link:hover { text-decoration: underline; }
    </style>
</head>
<body>
<div class="card">
<?php if ($mode === 'request'): ?>
    <h1>Esqueci minha senha</h1>
    <p>Informe seu e-mail. Se houver uma conta vinculada, enviaremos um link para criar uma nova senha.</p>

    <form id="form-request">
        <div class="field">
            <label for="email">E-mail</label>
            <input type="email" id="email" autocomplete="email" required>
        </div>
        <button type="submit" class="btn btn-primary" id="btn">Enviar link de redefinição</button>
        <div id="msg"></div>
    </form>
    <a href="/login" class="link">Voltar ao login</a>

<script>
const form = document.getElementById('form-request');
const btn  = document.getElementById('btn');
const msg  = document.getElementById('msg');

form.addEventListener('submit', async (e) => {
    e.preventDefault();
    msg.textContent = '';
    msg.className = '';
    btn.disabled = true;
    const email = document.getElementById('email').value.trim();
    try {
        const res = await fetch('/api/auth/password_reset_request.php', {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({ email })
        });
        const data = await res.json();
        if (data.ok) {
            msg.textContent = 'Se este e-mail estiver cadastrado, você receberá um link em instantes. Verifique também a caixa de spam.';
            msg.className = 'success';
            form.querySelector('button').style.display = 'none';
        } else {
            msg.textContent = data.error || 'Erro ao enviar solicitação.';
            msg.className = 'error';
            btn.disabled = false;
        }
    } catch (err) {
        msg.textContent = 'Erro de comunicação com o servidor.';
        msg.className = 'error';
        btn.disabled = false;
    }
});
</script>

<?php else: ?>
    <h1>Criar nova senha</h1>
    <p>Defina a senha que você usará para acessar o Aether. Mínimo 8 caracteres.</p>

    <form id="form-confirm">
        <input type="hidden" id="token" value="<?= htmlspecialchars($token, ENT_QUOTES, 'UTF-8') ?>">
        <div class="field">
            <label for="password">Nova senha</label>
            <input type="password" id="password" autocomplete="new-password" minlength="8" required>
        </div>
        <div class="field">
            <label for="password2">Confirme a nova senha</label>
            <input type="password" id="password2" autocomplete="new-password" minlength="8" required>
        </div>
        <button type="submit" class="btn btn-primary" id="btn">Salvar nova senha</button>
        <div id="msg"></div>
    </form>
    <a href="/login" class="link">Voltar ao login</a>

<script>
const form = document.getElementById('form-confirm');
const btn  = document.getElementById('btn');
const msg  = document.getElementById('msg');

form.addEventListener('submit', async (e) => {
    e.preventDefault();
    msg.textContent = '';
    msg.className = '';

    const token = document.getElementById('token').value;
    const p1 = document.getElementById('password').value;
    const p2 = document.getElementById('password2').value;

    if (p1 !== p2) {
        msg.textContent = 'As senhas não conferem.';
        msg.className = 'error';
        return;
    }
    if (p1.length < 8) {
        msg.textContent = 'A senha deve ter no mínimo 8 caracteres.';
        msg.className = 'error';
        return;
    }

    btn.disabled = true;
    try {
        const res = await fetch('/api/auth/password_reset_confirm.php', {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({ token, password: p1 })
        });
        const data = await res.json();
        if (data.ok) {
            msg.textContent = 'Senha redefinida com sucesso. Redirecionando para o login…';
            msg.className = 'success';
            form.querySelector('button').style.display = 'none';
            setTimeout(() => { window.location.href = '/login'; }, 1500);
        } else {
            if (data.error === 'invalid_or_expired') {
                msg.textContent = 'O link expirou ou já foi usado. Solicite um novo em "Esqueci minha senha".';
            } else if (data.error === 'weak_password') {
                msg.textContent = data.message || 'Senha muito curta.';
            } else {
                msg.textContent = data.error || 'Erro ao redefinir a senha.';
            }
            msg.className = 'error';
            btn.disabled = false;
        }
    } catch (err) {
        msg.textContent = 'Erro de comunicação com o servidor.';
        msg.className = 'error';
        btn.disabled = false;
    }
});
</script>
<?php endif; ?>
</div>
</body>
</html>
