@page "/perfil"

<PageTitle>Perfil - FinControl</PageTitle>

<div class="container-fluid">
    <div class="row">
        <!-- Sidebar do Perfil -->
        <div class="col-lg-3 mb-4">
            <div class="card shadow-sm text-center">
                <div class="card-body">
                    <div class="avatar-large mb-3">
                        J
                    </div>
                    <h5>João Silva</h5>
                    <p class="text-muted">joao@example.com</p>
                    <span class="badge bg-success mb-3">Admin</span>
                    <hr />
                    <p class="text-muted small">
                        <i class="bi bi-calendar"></i> Membro desde Jan 2024
                    </p>
                </div>
            </div>
        </div>

        <!-- Conteúdo Principal -->
        <div class="col-lg-9">
            <!-- Informações Pessoais -->
            <div class="card shadow-sm mb-4">
                <div class="card-header bg-light border-bottom">
                    <h5 class="mb-0">
                        <i class="bi bi-person"></i> Informações Pessoais
                    </h5>
                </div>
                <div class="card-body">
                    <form @onsubmit="SalvarPerfil">
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Nome Completo</label>
                                <input type="text" class="form-control" @bind="perfil.Nome" />
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Email</label>
                                <input type="email" class="form-control" @bind="perfil.Email" />
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label class="form-label">CPF</label>
                                <input type="text" class="form-control" @bind="perfil.CPF" placeholder="000.000.000-00" />
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Telefone</label>
                                <input type="tel" class="form-control" @bind="perfil.Telefone" placeholder="(00) 00000-0000" />
                            </div>
                        </div>

                        <button type="submit" class="btn btn-primary">
                            <i class="bi bi-check-circle"></i> Salvar Alterações
                        </button>
                    </form>
                </div>
            </div>

            <!-- Segurança -->
            <div class="card shadow-sm mb-4">
                <div class="card-header bg-light border-bottom">
                    <h5 class="mb-0">
                        <i class="bi bi-shield-lock"></i> Segurança
                    </h5>
                </div>
                <div class="card-body">
                    <div class="mb-4">
                        <h6 class="mb-3">Alterar Senha</h6>
                        <form @onsubmit="AlterarSenha">
                            <div class="mb-3">
                                <label class="form-label">Senha Atual</label>
                                <input type="password" class="form-control" @bind="senhaAtual" />
                            </div>

                            <div class="mb-3">
                                <label class="form-label">Nova Senha</label>
                                <input type="password" class="form-control" @bind="novaSenha" />
                            </div>

                            <div class="mb-3">
                                <label class="form-label">Confirmar Senha</label>
                                <input type="password" class="form-control" @bind="confirmarSenha" />
                            </div>

                            <button type="submit" class="btn btn-primary">
                                <i class="bi bi-key"></i> Atualizar Senha
                            </button>
                        </form>
                    </div>

                    <hr />

                    <div class="mb-4">
                        <h6 class="mb-3">Autenticação de Dois Fatores</h6>
                        <div class="form-check form-switch">
                            <input class="form-check-input" type="checkbox" id="twoFactor" @bind="autenticacao2FA" />
                            <label class="form-check-label" for="twoFactor">
                                Ativar autenticação de dois fatores
                            </label>
                        </div>
                    </div>

                    <hr />

                    <div>
                        <h6 class="mb-3">Sessões Ativas</h6>
                        <div class="alert alert-info mb-0">
                            <p class="mb-1"><strong>Chrome no Windows</strong></p>
                            <small class="text-muted">Último acesso: há 2 minutos</small>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Preferências -->
            <div class="card shadow-sm mb-4">
                <div class="card-header bg-light border-bottom">
                    <h5 class="mb-0">
                        <i class="bi bi-sliders"></i> Preferências
                    </h5>
                </div>
                <div class="card-body">
                    <div class="mb-3">
                        <label class="form-label">Tema</label>
                        <select class="form-select" @bind="tema">
                            <option value="light">Claro</option>
                            <option value="dark">Escuro</option>
                            <option value="auto">Automático</option>
                        </select>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Idioma</label>
                        <select class="form-select" @bind="idioma">
                            <option value="pt-BR">Português (Brasil)</option>
                            <option value="en-US">English (US)</option>
                            <option value="es-ES">Español</option>
                        </select>
                    </div>

                    <div class="form-check mb-3">
                        <input class="form-check-input" type="checkbox" id="notificacoes" @bind="receberNotificacoes" />
                        <label class="form-check-label" for="notificacoes">
                            Receber notificações por email
                        </label>
                    </div>

                    <button class="btn btn-primary" @onclick="SalvarPreferencias">
                        <i class="bi bi-check-circle"></i> Salvar Preferências
                    </button>
                </div>
            </div>

            <!-- Área de Perigo -->
            <div class="card shadow-sm border-danger">
                <div class="card-header bg-danger text-white border-bottom">
                    <h5 class="mb-0">
                        <i class="bi bi-exclamation-triangle"></i> Zona de Perigo
                    </h5>
                </div>
                <div class="card-body">
                    <p class="text-muted mb-3">
                        Uma vez deletada, sua conta e todos os seus dados serão permanentemente removidos.
                    </p>
                    <button class="btn btn-outline-danger" @onclick="ConfirmarDelecaoConta">
                        <i class="bi bi-trash"></i> Deletar Minha Conta
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    .avatar-large {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 48px;
        font-weight: bold;
        margin: 0 auto;
    }
</style>

@code {
    private PerfiBil perfil = new();
    private string senhaAtual = "";
    private string novaSenha = "";
    private string confirmarSenha = "";
    private bool autenticacao2FA = false;
    private string tema = "light";
    private string idioma = "pt-BR";
    private bool receberNotificacoes = true;

    protected override void OnInitialized()
    {
        // Carregar dados do perfil
        perfil = new PerfiBil
        {
            Nome = "João Silva",
            Email = "joao@example.com",
            CPF = "000.000.000-00",
            Telefone = "(11) 99999-9999"
        };
    }

    private async Task SalvarPerfil()
    {
        // Implementar salvamento do perfil
        await Task.Delay(500);
    }

    private async Task AlterarSenha()
    {
        if (novaSenha != confirmarSenha)
        {
            return;
        }

        // Implementar alteração de senha
        senhaAtual = "";
        novaSenha = "";
        confirmarSenha = "";
        await Task.Delay(500);
    }

    private async Task SalvarPreferencias()
    {
        // Implementar salvamento de preferências
        await Task.Delay(500);
    }

    private void ConfirmarDelecaoConta()
    {
        // Implementar confirmação de deleção
    }

    public class PerfiBil
    {
        public string? Nome { get; set; }
        public string? Email { get; set; }
        public string? CPF { get; set; }
        public string? Telefone { get; set; }
    }
}