@page "/Services"
@using Manager.App.Services.System
@implements IDisposable

@inject BackgroundServiceManager ServiceManager

<title>Services</title>

<MudDataGrid T="ExtendedBackgroundService" Items="@_backgroundServices" Filterable QuickFilter="@QuickFilter">
    <ToolBarContent>
        <MudText Typo="Typo.h6">Services</MudText>
        <MudSpacer/>
        <MudTextField T="string" @bind-Value="@_searchText" Immediate
                      Placeholder="Search" Adornment="Adornment.Start"
                      AdornmentIcon="@Icons.Material.Filled.Search" IconSize="Size.Medium"/>
    </ToolBarContent>
    <Columns>
        <PropertyColumn Property="x => x.Name" Title="Service"/>
        <PropertyColumn Property="x => x.Description" Title="Description"/>
        <PropertyColumn Property="x => x.State" Title="Status"/>
        <PropertyColumn Property="x => x.ExecuteInterval" Title="Execute interval"/>
        <TemplateColumn>
            <CellTemplate>
                <MudStack Row Spacing="2">
                    <MudButton Disabled="@(context.Item?.State == ServiceState.Paused)"
                               OnClick="@(() => { context.Item?.Pause(); })" Variant="Variant.Outlined">Pause
                    </MudButton>
                    <MudButton Disabled="@(context.Item?.State == ServiceState.Running)"
                               OnClick="@(() => { context.Item?.Resume(); })" Variant="Variant.Outlined">Resume
                    </MudButton>
                </MudStack>
            </CellTemplate>
        </TemplateColumn>
    </Columns>
    <PagerContent>
        <MudDataGridPager T="ExtendedBackgroundService"/>
    </PagerContent>
</MudDataGrid>

<MudPaper Elevation="0" Class="mt-3" Style="flex: 1; display: flex; flex-direction: column; min-height: 0;">
    <MudStack Class="ml-2 mb-2" Spacing="1">
        <MudText Typo="Typo.h5">Service events</MudText>
        <MudText Typo="Typo.caption">@($"{_serviceEvents.Count}/{VisibleEventCapacity} events")</MudText>
    </MudStack>
    <div class="console-container">
        <Virtualize Items="_serviceEvents" Context="serviceEvent">
            <div class="log-line">
                @($"{serviceEvent.Date:HH:mm:ss} | {serviceEvent.Severity} | {serviceEvent.Source} - {serviceEvent.Message}")
            </div>
        </Virtualize>
    </div>
</MudPaper>

<style>
    .console-container {
        background-color: #1e1e1e;
        color: #9c9898;
        padding: 10px;
        border-radius: 8px;
        flex: 1;
        overflow-y: auto;
        font-family: monospace;
    }

    .log-line {
        display: flex;
        justify-content: start;
        align-items: center;
        gap: 0.25rem;
    }

    .log-info {
        color: #9cdcfe;
    }

    .log-warning {
        color: #dcdcaa;
    }

    .log-error {
        color: #f44747;
    }
</style>