<% currentPage = 'change-password' %>

<div class="row justify-content-center">
    <div class="col-md-6 col-lg-5">
        <!-- Page Header -->
        <div class="d-flex align-items-center gap-3 mb-4">
            <a href="/dashboard" class="btn btn-light btn-sm">
                <i class="fas fa-arrow-left"></i>
            </a>
            <div>
                <h4 class="mb-0 fw-bold"><%= title %></h4>
                <small class="text-muted"><%= typeof isGoogleUserWithoutPassword !== 'undefined' && isGoogleUserWithoutPassword ? 'Set a password to enable email/password login' : 'Update your account password' %></small>
            </div>
        </div>

        <% if (typeof isGoogleUserWithoutPassword !== 'undefined' && isGoogleUserWithoutPassword) { %>
        <div class="alert alert-info mb-3">
            <i class="fab fa-google me-2"></i>
            <strong>Google Account:</strong> You signed in with Google. Set a password to also login with email/password.
        </div>
        <% } %>

        <div class="card shadow-sm">
            <div class="card-body p-3 p-md-4">
                <form id="changePasswordForm" data-is-google-user="<%= typeof isGoogleUserWithoutPassword !== 'undefined' && isGoogleUserWithoutPassword ? 'true' : 'false' %>">
                    <% if (typeof isGoogleUserWithoutPassword === 'undefined' || !isGoogleUserWithoutPassword) { %>
                    <div class="mb-3">
                        <label class="form-label-compact">
                            <i class="fas fa-lock"></i> Current Password
                        </label>
                        <input type="password" class="form-control-compact" id="currentPassword" name="currentPassword" required placeholder="Enter current password">
                    </div>
                    <% } %>

                    <div class="mb-3">
                        <label class="form-label-compact">
                            <i class="fas fa-key"></i> New Password
                        </label>
                        <input type="password" class="form-control-compact" id="newPassword" name="newPassword" required minlength="6" placeholder="Enter new password">
                    </div>

                    <div class="mb-3">
                        <label class="form-label-compact">
                            <i class="fas fa-check-circle"></i> Confirm Password
                        </label>
                        <input type="password" class="form-control-compact" id="confirmPassword" name="confirmPassword" required minlength="6" placeholder="Confirm new password">
                    </div>

                    <div class="password-hints mb-4">
                        <small class="text-muted">
                            <i class="fas fa-info-circle me-1"></i>
                            Password must be at least 6 characters
                        </small>
                    </div>

                    <div class="d-flex gap-2">
                        <a href="/dashboard" class="btn btn-light flex-grow-1">
                            <i class="fas fa-times me-1"></i>Cancel
                        </a>
                        <button type="submit" class="btn btn-success flex-grow-1">
                            <i class="fas fa-save me-1"></i><%= typeof isGoogleUserWithoutPassword !== 'undefined' && isGoogleUserWithoutPassword ? 'Set Password' : 'Update Password' %>
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
const form = document.getElementById('changePasswordForm');
const isGoogleUser = form.dataset.isGoogleUser === 'true';

form.addEventListener('submit', async function(e) {
    e.preventDefault();
    
    const currentPassword = isGoogleUser ? '' : document.getElementById('currentPassword')?.value || '';
    const newPassword = document.getElementById('newPassword').value;
    const confirmPassword = document.getElementById('confirmPassword').value;
    
    if (newPassword !== confirmPassword) {
        window.showToast('Passwords do not match', 'danger');
        return;
    }
    
    const submitBtn = this.querySelector('button[type="submit"]');
    const originalText = submitBtn.innerHTML;
    submitBtn.disabled = true;
    submitBtn.innerHTML = '<span class="spinner-border spinner-border-sm me-1"></span>Saving...';
    
    try {
        const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
        const headers = { 'Content-Type': 'application/json' };
        if (csrfToken) headers['x-csrf-token'] = csrfToken;
        
        const body = { newPassword, confirmPassword };
        if (!isGoogleUser) body.currentPassword = currentPassword;
        
        const response = await fetch('/change-password', {
            method: 'POST',
            headers: headers,
            body: JSON.stringify(body)
        });
        
        const data = await response.json();
        
        if (data.success) {
            window.showToast(data.message || 'Password updated!', 'success');
            setTimeout(() => window.location.href = '/dashboard', 2000);
        } else {
            window.showToast(data.message || 'Failed to change password', 'danger');
        }
    } catch (error) {
        window.showToast('An error occurred', 'danger');
    } finally {
        submitBtn.disabled = false;
        submitBtn.innerHTML = originalText;
    }
});
</script>
