@model IEnumerable<Rs_system.Models.ConfiguracionSistema>
@{
    ViewData["Title"] = "Configuración del Sistema";
    var categorias = (List<string>)ViewBag.Categorias;
    var selectedCategoria = (string)ViewBag.SelectedCategoria;
}

<div class="d-flex justify-content-between align-items-center mb-4">
    <div>
        <h2 class="mb-1">Configuración</h2>
        <p class="text-muted small mb-0">Gestione los parámetros dinámicos y ajustes globales del sistema.</p>
    </div>
</div>

<div class="row mb-4">
    <div class="col-md-12">
        <div class="card-custom py-2 px-3">
            <div class="d-flex gap-2 overflow-auto">
                <a asp-action="Index" class="btn btn-sm @(string.IsNullOrEmpty(selectedCategoria) ? "btn-primary-custom" : "btn-outline-secondary")">
                    Todas
                </a>
                @foreach (var cat in categorias)
                {
                    <a asp-action="Index" asp-route-categoria="@cat" 
                       class="btn btn-sm @(selectedCategoria == cat ? "btn-primary-custom" : "btn-outline-secondary")">
                        @cat
                    </a>
                }
            </div>
        </div>
    </div>
</div>

<div class="card-custom">
    <div class="table-responsive">
        <table class="table-custom">
            <thead>
                <tr>
                    <th>Clave</th>
                    <th>Valor</th>
                    <th>Categoría / Grupo</th>
                    <th>Descripción</th>
                    <th>Acciones</th>
                </tr>
            </thead>
            <tbody>
                @if (!Model.Any())
                {
                    <tr>
                        <td colspan="5" class="text-center py-4 text-muted">No hay configuraciones registradas.</td>
                    </tr>
                }
                @foreach (var item in Model)
                {
                    <tr>
                        <td class="fw-bold">
                            <code>@item.Clave</code>
                        </td>
                        <td>
                            @if (item.TipoDato == "BOOLEANO")
                            {
                                <span class="badge @(item.Valor?.ToLower() == "true" ? "bg-success" : "bg-danger")">
                                    @(item.Valor?.ToLower() == "true" ? "Activado" : "Desactivado")
                                </span>
                            }
                            else
                            {
                                <span class="text-truncate d-inline-block" style="max-width: 200px;">@item.Valor</span>
                            }
                        </td>
                        <td>
                            <span class="badge bg-light text-dark border">@item.Categoria</span>
                            <span class="badge bg-light text-muted border">@item.Grupo</span>
                        </td>
                        <td class="small text-muted">@item.Descripcion</td>
                        <td>
                            @if (item.EsEditable)
                            {
                                <a asp-action="Edit" asp-route-id="@item.Id" class="btn btn-sm btn-outline-secondary" title="Editar">
                                    <i class="bi bi-pencil"></i>
                                </a>
                            }
                            else
                            {
                                <i class="bi bi-lock-fill text-muted" title="Solo lectura"></i>
                            }
                        </td>
                    </tr>
                }
            </tbody>
        </table>
    </div>
</div>