@page "/usuarios"

<PageTitle>Usuários - FinControl</PageTitle>

<div class="container-fluid">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h2><i class="bi bi-people"></i> Gerenciador de Usuários</h2>
        <button class="btn btn-primary" @onclick="AbrirModalNovoUsuario">
            <i class="bi bi-person-plus"></i> Novo Usuário
        </button>
    </div>

    <div class="card shadow-sm">
        <div class="card-header bg-light border-bottom">
            <h5 class="mb-0">Usuários Cadastrados</h5>
        </div>
        <div class="card-body p-0">
            @if (usuarios != null && usuarios.Count > 0)
            {
                <div class="table-responsive">
                    <table class="table table-hover mb-0">
                        <thead class="bg-light">
                            <tr>
                                <th>Nome</th>
                                <th>Email</th>
                                <th>Permissão</th>
                                <th>Status</th>
                                <th class="text-center">Ações</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach (var usuario in usuarios)
                            {
                                <tr>
                                    <td>
                                        <div class="d-flex align-items-center gap-2">
                                            <div class="avatar">
                                                @(usuario.Nome != null && usuario.Nome.Length > 0 ? usuario.Nome[0] : "?")
                                            </div>
                                            <strong>@usuario.Nome</strong>
                                        </div>
                                    </td>
                                    <td><small>@usuario.Email</small></td>
                                    <td><span class="badge @(usuario.Permissao == "Admin" ? "bg-danger" : "bg-info")">@usuario.Permissao</span></td>
                                    <td><span class="badge @(usuario.Ativo ? "bg-success" : "bg-secondary")">@(usuario.Ativo ? "Ativo" : "Inativo")</span></td>
                                    <td class="text-center">
                                        <button class="btn btn-sm btn-outline-primary" @onclick="() => EditarUsuario(usuario.Id)">
                                            <i class="bi bi-pencil"></i>
                                        </button>
                                        <button class="btn btn-sm btn-outline-danger" @onclick="() => DeletarUsuario(usuario.Id)">
                                            <i class="bi bi-trash"></i>
                                        </button>
                                    </td>
                                </tr>
                            }
                        </tbody>
                    </table>
                </div>
            }
            else
            {
                <div class="text-center py-5">
                    <p class="text-muted">Nenhum usuário cadastrado</p>
                </div>
            }
        </div>
    </div>
</div>

@if (mostrarModal)
{
    <div class="modal-overlay">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">@(editandoId == 0 ? "Novo Usuário" : "Editar Usuário")</h5>
                    <button type="button" class="btn-close" @onclick="FecharModal"></button>
                </div>
                <div class="modal-body">
                    <form @onsubmit="SalvarUsuario">
                        <div class="mb-3">
                            <label class="form-label">Nome Completo</label>
                            <input type="text" class="form-control" @bind="novoUsuario.Nome" placeholder="João Silva" />
                        </div>

                        <div class="mb-3">
                            <label class="form-label">Email</label>
                            <input type="email" class="form-control" @bind="novoUsuario.Email" placeholder="joao@example.com" />
                        </div>

                        <div class="mb-3">
                            <label class="form-label">Senha</label>
                            <input type="password" class="form-control" @bind="novoUsuario.Senha" placeholder="Deixe em branco para não alterar" />
                        </div>

                        <div class="mb-3">
                            <label class="form-label">Permissão</label>
                            <select class="form-select" @bind="novoUsuario.Permissao">
                                <option value="User">Usuário</option>
                                <option value="Admin">Administrador</option>
                            </select>
                        </div>

                        <div class="form-check mb-3">
                            <input type="checkbox" class="form-check-input" id="ativo" @bind="novoUsuario.Ativo" />
                            <label class="form-check-label" for="ativo">Usuário Ativo</label>
                        </div>

                        <button type="submit" class="btn btn-primary w-100">
                            <i class="bi bi-check-circle"></i> Salvar
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>
}

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

    .table-hover tbody tr:hover {
        background-color: #f8f9fa;
    }

    .modal-overlay {
        display: block;
        position: fixed;
        z-index: 1000;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        padding-top: 100px;
    }

    .modal-dialog {
        margin: 0 auto;
        max-width: 500px;
        background: white;
        border-radius: 8px;
    }

    .modal-header {
        padding: 20px;
        border-bottom: 1px solid #e0e0e0;
    }

    .modal-body {
        padding: 20px;
    }
</style>

@code {
    private List<Usuario> usuarios = new();
    private bool mostrarModal = false;
    private int editandoId = 0;
    private Usuario novoUsuario = new();

    protected override void OnInitialized()
    {
        CarregarUsuarios();
    }

    private void CarregarUsuarios()
    {
        usuarios = new List<Usuario>
        {
            new Usuario { Id = 1, Nome = "João Silva", Email = "joao@example.com", Permissao = "Admin", Ativo = true },
            new Usuario { Id = 2, Nome = "Maria Santos", Email = "maria@example.com", Permissao = "User", Ativo = true },
            new Usuario { Id = 3, Nome = "Pedro Oliveira", Email = "pedro@example.com", Permissao = "User", Ativo = false }
        };
    }

    private void AbrirModalNovoUsuario()
    {
        editandoId = 0;
        novoUsuario = new() { Permissao = "User", Ativo = true };
        mostrarModal = true;
    }

    private void EditarUsuario(int id)
    {
        editandoId = id;
        var usuario = usuarios.FirstOrDefault(u => u.Id == id);
        if (usuario != null)
        {
            novoUsuario = new Usuario
            {
                Id = usuario.Id,
                Nome = usuario.Nome,
                Email = usuario.Email,
                Permissao = usuario.Permissao,
                Ativo = usuario.Ativo
            };
        }
        mostrarModal = true;
    }

    private void FecharModal()
    {
        mostrarModal = false;
    }

    private async Task SalvarUsuario()
    {
        if (editandoId == 0)
        {
            novoUsuario.Id = usuarios.Count + 1;
            usuarios.Add(novoUsuario);
        }
        else
        {
            var usuario = usuarios.FirstOrDefault(u => u.Id == editandoId);
            if (usuario != null)
            {
                usuario.Nome = novoUsuario.Nome;
                usuario.Email = novoUsuario.Email;
                usuario.Permissao = novoUsuario.Permissao;
                usuario.Ativo = novoUsuario.Ativo;
            }
        }

        FecharModal();
        await Task.CompletedTask;
    }

    private void DeletarUsuario(int id)
    {
        usuarios.RemoveAll(u => u.Id == id);
    }

    public class Usuario
    {
        public int Id { get; set; }
        public string? Nome { get; set; }
        public string? Email { get; set; }
        public string? Senha { get; set; }
        public string? Permissao { get; set; }
        public bool Ativo { get; set; }
    }
}