{% extends "base.html" %}

{% block title %}Reset Password - AuthKit{% endblock %}

{% block extra_css %}
.reset-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: calc(100vh - 200px);
}

.reset-card {
    max-width: 420px;
    width: 100%;
    border-radius: 16px;
    position: relative;
    overflow: hidden;
}

.reset-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: var(--primary-glow);
}

.reset-header {
    text-align: center;
    margin-bottom: 2rem;
}

.reset-header h1 {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    letter-spacing: -0.025em;
}

.reset-header p {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.btn-reset {
    background: var(--primary-glow);
    border: none;
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.25s ease;
    width: 100%;
    margin-top: 1rem;
}

.btn-reset:hover {
    box-shadow: 0 4px 20px rgba(168, 85, 247, 0.4);
    transform: translateY(-1px);
}
{% endblock %}

{% block content %}
<div class="reset-wrapper">
    <div class="card reset-card">
        <div class="reset-header">
            <h1>Set New Password</h1>
            <p>Please enter your new password below</p>
        </div>

        <form id="reset-form" onsubmit="handleReset(event)">
            <input type="hidden" id="token" name="token" value="{{ token }}">
            
            <div class="form-group">
                <label for="new_password">New Password</label>
                <input type="password" id="new_password" name="new_password" required placeholder="Min 8 characters">
            </div>
            
            <div class="form-group">
                <label for="confirm_password">Confirm New Password</label>
                <input type="password" id="confirm_password" name="confirm_password" required placeholder="Repeat new password">
            </div>

            <button type="submit" class="btn-reset">Update Password</button>
        </form>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    async function handleReset(event) {
        event.preventDefault();
        
        const token = document.getElementById('token').value;
        const newPassword = document.getElementById('new_password').value;
        const confirmPassword = document.getElementById('confirm_password').value;
        
        if (newPassword.length < 8) {
            showToast('Password must be at least 8 characters long.', 'error');
            return;
        }
        
        if (newPassword !== confirmPassword) {
            showToast('Passwords do not match.', 'error');
            return;
        }
        
        try {
            const response = await fetch('/auth/reset-password', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({
                    token: token,
                    new_password: newPassword
                })
            });
            
            const data = await response.json();
            
            if (response.ok) {
                showToast('Password updated successfully! Redirecting...', 'success');
                setTimeout(() => {
                    window.location.href = '{{ admin_path }}/login';
                }, 1500);
            } else {
                showToast(data.detail || 'Failed to reset password.', 'error');
            }
        } catch (error) {
            showToast('Connection error occurred.', 'error');
        }
    }
</script>
{% endblock %}