Budgeteer/BudgetApp/Components/Pages/Settings.razor

@page "/settings"
@attribute [Authorize]
@using BudgetApp.Data.Entities
@using Microsoft.AspNetCore.Identity
@inject UserManager<ApplicationUser> UserManager
@inject SignInManager<ApplicationUser> SignInManager
@inject AuthenticationStateProvider AuthStateProvider
@inject ApplicationDbContext DbContext
@inject NavigationManager Navigation
@inject AppState AppState
@rendermode InteractiveServer

<PageTitle>Settings</PageTitle>

<h3 class="mb-2">
    Settings
    <span class="badge bg-warning text-dark ms-2" style="font-size: 0.4em; vertical-align: middle;">beta</span>
</h3>
<p class="text-muted mb-4">Change your password, reset your data or delete your account.</p>

@* ── Change Password ── *@
<div class="card mb-4">
    <div class="card-header">
        <h5 class="mb-0">Change Password</h5>
    </div>
    <div class="card-body">
        @if (_passwordSuccess)
        {
            <div class="alert alert-success">Password changed successfully.</div>
        }

        @if (!string.IsNullOrEmpty(_passwordError))
        {
            <div class="alert alert-danger">@_passwordError</div>
        }

        <EditForm Model="_passwordForm" OnValidSubmit="ChangePassword" FormName="changePassword">
            <ToastValidator />
            <div class="row g-3">
                <div class="col-md-4">
                    <label class="form-label">Current Password</label>
                    <InputText @bind-Value="_passwordForm.CurrentPassword" type="password" class="form-control" />
                </div>
                <div class="col-md-4">
                    <label class="form-label">New Password</label>
                    <InputText @bind-Value="_passwordForm.NewPassword" type="password" class="form-control" />
                </div>
                <div class="col-md-4">
                    <label class="form-label">Confirm New Password</label>
                    <InputText @bind-Value="_passwordForm.ConfirmNewPassword" type="password" class="form-control" />
                </div>
                <div class="col-12">
                    <button type="submit" class="btn btn-primary">Update Password</button>
                </div>
            </div>
        </EditForm>
    </div>
</div>

@* ── Reset Data ── *@
<div class="card mb-4 border-warning">
    <div class="card-header bg-warning">
        <h5 class="mb-0">Reset Data</h5>
    </div>
    <div class="card-body">
        <p class="fw-semibold">
            This will permanently delete all your accounts, transactions and categories, giving you a clean slate. Your user account and password will be kept.
        </p>

        @if (_resetSuccess)
        {
            <div class="alert alert-success">All data has been reset successfully.</div>
        }

        @if (!string.IsNullOrEmpty(_resetError))
        {
            <div class="alert alert-danger">@_resetError</div>
        }

        @if (!_confirmingReset)
        {
            <button class="btn btn-outline-warning" @onclick="() => _confirmingReset = true">
                Reset All Data
            </button>
        }
        else
        {
            <div class="alert alert-warning">
                <strong>Are you sure?</strong> This cannot be undone. Type <code>I UNDERSTAND</code> and enter your password to confirm.
            </div>
            <div class="mb-3" style="max-width: 400px;">
                <input type="text" class="form-control mb-2" placeholder="Type I UNDERSTAND to confirm" @bind="_resetConfirmation" />
                <input type="password" class="form-control mb-2" placeholder="Enter your password" @bind="_resetPassword" />
                <div class="d-flex gap-2">
                    <button class="btn btn-warning" @onclick="ResetData">Confirm Reset</button>
                    <button class="btn btn-secondary" @onclick="CancelReset">Cancel</button>
                </div>
            </div>
        }
    </div>
</div>

@* ── Delete Account ── *@
<div class="card border-danger">
    <div class="card-header bg-danger text-white">
        <h5 class="mb-0">Delete Account</h5>
    </div>
    <div class="card-body">
        <p class="text-danger fw-semibold">
            This will permanently delete your account and all associated data (accounts, transactions, and categories). This action cannot be undone.
        </p>

        @if (!string.IsNullOrEmpty(_deleteError))
        {
            <div class="alert alert-danger">@_deleteError</div>
        }

        @if (!_confirmingDelete)
        {
            <button class="btn btn-outline-danger" @onclick="() => _confirmingDelete = true">
                Delete My Account
            </button>
        }
        else
        {
            <div class="alert alert-warning">
                <strong>Are you sure?</strong> Type your password to confirm.
            </div>
            <div class="input-group mb-3" style="max-width: 400px;">
                <input type="password" class="form-control" placeholder="Enter your password" @bind="_deletePassword" />
                <button class="btn btn-danger" @onclick="DeleteAccount">Confirm Delete</button>
                <button class="btn btn-secondary" @onclick="CancelDelete">Cancel</button>
            </div>
        }
    </div>
</div>