<?php
require_once 'auth.php';

$auth = getAuth();
if ($auth->isLoggedIn()) {
    header('Location: ./');
    exit;
}
    
$message = null; // ['type' => 'error'|'success', 'text' => '...']

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $identifier = trim($_POST['identifier'] ?? '');
    $res = $auth->requestPasswordReset($identifier);
    $message = [
        'type' => (!empty($res['success']) && $res['success']) ? 'success' : 'error',
        'text' => $res['message'] ?? 'No se pudo procesar la solicitud'
    ];
}
?>
<!DOCTYPE html>
<html lang="es">
<head>  
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" href="graphics/signatureicon.ico" type="image/x-icon">
    <link rel="shortcut icon" href="graphics/signatureicon.ico" type="image/x-icon">
    <title>Recuperar contrasena</title>
    <style>
        * { box-sizing: border-box; }
        body {
            margin: 0; padding: 0; min-height: 100vh;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #29648D 0%, #29648D 100%);
            display: grid; place-items: center;
        }
        .card {
            width: 100%; max-width: 420px; background: #fff; border-radius: 16px;
            box-shadow: 0 20px 60px rgba(0,0,0,0.3); overflow: hidden;
        }
        .card-header { padding: 24px; text-align: center; color: #fff;
            background: linear-gradient(135deg, #29648D 0%, #29648D 100%);
        }
        .brand { font-size: 1.3rem; font-weight: 700; margin-top: 6px; }
        .subtitle { opacity: .9; font-size: .95rem; }
        .content { padding: 22px; }
        label { display: block; color: #374151; font-size: .9rem; margin-top: 14px; }
        .input { width: 100%; padding: 12px 14px; border: 1px solid #e3e8ef; border-radius: 10px; margin-top: 8px; }
        .btn-primary {
            width: 100%; margin-top: 18px; padding: 12px 16px; border-radius: 22px; border: none;
            background: linear-gradient(135deg, #1f6aa5, #29648D); color: #fff; font-weight: 700;
            cursor: pointer; box-shadow: 0 6px 18px rgba(41,100,141,.25);
        }
        .alert { padding: 12px 14px; border-radius: 10px; margin-bottom: 12px; font-size: .9rem; }
        .alert.error { background: #fdecea; color: #b42318; border: 1px solid #f1a7a1; }
        .alert.success { background: #ecfdf5; color: #027a48; border: 1px solid #9ae6b4; }
        .links { margin-top: 10px; text-align: center; }
        .links a { color:#29648D; text-decoration:none; font-weight:600; display:block; margin-top:6px; }
    </style>
</head>
<body>
    <div class="card">
        <div class="card-header">
            <div style="font-size:38px;">🔒</div>
            <div class="brand">Recuperar contrasena</div>
            <div class="subtitle">Recibe un enlace para restablecerla</div>
        </div>
        <div class="content">
            <?php if ($message): ?>
                <div class="alert <?php echo htmlspecialchars($message['type']); ?>">
                    <?php echo htmlspecialchars($message['text']); ?>
                </div>
            <?php endif; ?>
            <form method="post">
                <label>Email o usuario
                    <input class="input" type="text" name="identifier" required>
                </label>
                <button class="btn-primary" type="submit">Enviar enlace</button>
            </form>
            <div class="links">
                <a href="login">Volver al inicio de sesion</a>
                <a href="verify_account">Ingresar codigo de verificacion</a>
            </div>
        </div>
    </div>
</body>
</html>
