@page "/superadmin/system/flags"
@using global::System.Net.Http
@layout WebClientTpos.Client.Layout.SuperAdminLayout
@inherits SuperAdminBase
@inject SuperAdminApiService Api
@using WebClientTpos.Client.Services

<PageTitle>Feature Flags — aPOS Super Admin</PageTitle>

<div class="sa-topbar">
    <div class="sa-topbar__left">
        <h1 class="sa-topbar__title">Feature Flags</h1>
        <p class="sa-topbar__subtitle">Bật/tắt tính năng trên toàn nền tảng</p>
    </div>
</div>

<div class="sa-content">
    <div class="sa-panel">
        @if (_flags.Any())
        {
            <table class="sa-table">
                <thead>
                    <tr>
                        <th>Tính năng</th>
                        <th>Mô tả</th>
                        <th>Rollout</th>
                        <th>Trạng thái</th>
                        <th>Cập nhật</th>
                        <th>Hành động</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach (var flag in _flags)
                    {
                        <tr>
                            <td style="font-family:monospace;font-size:12px;">@flag.Key</td>
                            <td>@(flag.Description ?? "—")</td>
                            <td>
                                <div style="display:flex;align-items:center;gap:6px;">
                                    <div style="width:60px;height:6px;background:var(--sa-bg-interactive);border-radius:3px;overflow:hidden;">
                                        <div style="width:@(flag.RolloutPercentage)%;height:100%;background:var(--sa-blue-light);border-radius:3px;"></div>
                                    </div>
                                    <span style="font-size:12px;color:var(--sa-text-tertiary);">@(flag.RolloutPercentage)%</span>
                                </div>
                            </td>
                            <td>
                                <span class="sa-badge @(flag.IsEnabled ? "sa-badge--success" : "sa-badge--neutral")">
                                    @(flag.IsEnabled ? "Bật" : "Tắt")
                                </span>
                            </td>
                            <td style="font-size:12px;color:var(--sa-text-tertiary);">
                                @flag.UpdatedAt.ToLocalTime().ToString("dd/MM HH:mm")
                            </td>
                            <td>
                                <button class="@(flag.IsEnabled ? "sa-btn-outline" : "sa-btn-primary")"
                                        style="font-size:11px;padding:4px 12px;"
                                        @onclick="() => ToggleAsync(flag.Key, !flag.IsEnabled)">
                                    @(flag.IsEnabled ? "Tắt" : "Bật")
                                </button>
                            </td>
                        </tr>
                    }
                </tbody>
            </table>
        }
        else
        {
            <div class="sa-empty"><p>Đang tải feature flags...</p></div>
        }
    </div>
</div>

@code {
    private List<SuperAdminApiService.FeatureFlagDto> _flags = new();

    protected override async Task OnInitializedAsync()
    {
        await base.OnInitializedAsync();
        _flags = await Api.GetFeatureFlagsAsync();
    }

    private async Task ToggleAsync(string key, bool enabled)
    {
        await Api.UpdateFeatureFlagAsync(key, enabled);
        _flags = await Api.GetFeatureFlagsAsync();
    }
}
