@namespace DnsmasqWebUI.Components.Modals
@implements IAsyncDisposable
@inject IJSRuntime JSRuntime
@inject IClientSettingsService ClientSettingsService
@inject ILogger<SettingsModal> Logger

@if (IsVisible)
{
    <dialog @ref="_dialogRef" class="settings-modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">@Title</h5>
                <button type="button" class="btn-close" @onclick="Close" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                @if (_validationErrors.Count > 0)
                {
                    <div class="alert alert-danger mb-3" role="alert">
                        <strong>Please fix the following:</strong>
                        <ul class="mb-0 mt-1">
                            @foreach (var err in _validationErrors)
                            {
                                <li>@err</li>
                            }
                        </ul>
                    </div>
                }
                @if (SettingsContext == SettingsModalContext.All)
                {
                    <div class="mb-3">
                        <div class="d-flex align-items-center gap-2 mb-1">
                            <label class="form-label mb-0">Search settings</label>
                            <div class="d-flex gap-1 ms-auto" role="group" aria-label="Expand or collapse all sections">
                                <button type="button" class="btn btn-sm btn-outline-secondary settings-expand-collapse-btn" title="Expand all sections" aria-label="Expand all sections" @onclick="ExpandAllGroups">
                                    <i class="bi bi-arrows-expand" aria-hidden="true"></i>
                                </button>
                                <button type="button" class="btn btn-sm btn-outline-secondary settings-expand-collapse-btn" title="Collapse all sections" aria-label="Collapse all sections" @onclick="CollapseAllGroups">
                                    <i class="bi bi-arrows-collapse" aria-hidden="true"></i>
                                </button>
                            </div>
                        </div>
                        <input type="search" class="form-control" placeholder="Search..." autocomplete="off"
                               @bind="_searchTerm" @bind:event="oninput" @bind:after="FilterSettings" />
                    </div>
                }
                @foreach (var group in GetVisibleGroups())
                {
                    var isAllSections = SettingsContext == SettingsModalContext.All;
                    var isExpanded = isAllSections ? IsGroupExpanded(group) : true;
                    <div class="settings-group">
                        @if (isAllSections)
                        {
                            <button type="button" class="settings-group-header @(isExpanded ? "expanded" : "")"
                                    @onclick="() => ToggleGroup(group.Id)"
                                    aria-expanded="@isExpanded"
                                    aria-controls="group-@group.Id">
                                <span class="settings-group-title">@group.DisplayName</span>
                                <span class="settings-group-chevron" aria-hidden="true"></span>
                            </button>
                        }
                        else
                        {
                            <h6 class="settings-group-title settings-group-title-static mb-2 mt-3">@group.DisplayName</h6>
                        }
                        <div id="group-@group.Id" class="settings-group-content @(isExpanded ? "expanded" : "")"
                             role="region" aria-label="@group.DisplayName">
                            @foreach (var key in group.SectionKeys)
                            {
                                @if (ShouldShowSection(key))
                                {
                                    <div class="settings-section">
                                        @switch (key)
                                        {
                                            case SettingsModalSections.ServiceStatus:
                                                {
                                                    var meta = SettingsModalSections.All[SettingsModalSections.ServiceStatus];
                                                    var field = ClientSettingsFields.ServiceStatusPollingInterval;
                                                    <label for="status-interval" class="form-label">@meta.FieldLabel</label>
                                                    <input id="status-interval" type="number" class="form-control" min="@field.Min" max="@field.Max" step="1"
                                                           @bind="field.Value" />
                                                    break;
                                                }
                                            case SettingsModalSections.Logs:
                                                {
                                                    var meta = SettingsModalSections.All[SettingsModalSections.Logs];
                                                    var field = ClientSettingsFields.RecentLogsPollingInterval;
                                                    <label for="logs-interval" class="form-label">@meta.FieldLabel</label>
                                                    <input id="logs-interval" type="number" class="form-control" min="@field.Min" max="@field.Max" step="1"
                                                           @bind="field.Value" />
                                                    break;
                                                }
                                            case SettingsModalSections.AppLogs:
                                                {
                                                    var meta = SettingsModalSections.All[SettingsModalSections.AppLogs];
                                                    var field = ClientSettingsFields.AppLogsPollingInterval;
                                                    <label for="app-logs-interval" class="form-label">@meta.FieldLabel</label>
                                                    <input id="app-logs-interval" type="number" class="form-control" min="@field.Min" max="@field.Max" step="1"
                                                           @bind="field.Value" />
                                                    break;
                                                }
                                            case SettingsModalSections.Leases:
                                                {
                                                    var meta = SettingsModalSections.All[SettingsModalSections.Leases];
                                                    var field = ClientSettingsFields.LeasesPollingInterval;
                                                    <label for="leases-interval" class="form-label">@meta.FieldLabel</label>
                                                    <input id="leases-interval" type="number" class="form-control" min="@field.Min" max="@field.Max" step="1"
                                                           @bind="field.Value" />
                                                    break;
                                                }
                                            case SettingsModalSections.RecentLogsDisplay:
                                                {
                                                    var maxLinesField = ClientSettingsFields.RecentLogsMaxLines;
                                                    var autoScrollField = ClientSettingsFields.RecentLogsAutoScroll;
                                                    <div class="mb-2">
                                                        <label for="recent-logs-max-lines" class="form-label">Max lines</label>
                                                        <input id="recent-logs-max-lines" type="number" class="form-control" min="@maxLinesField.Min" max="@maxLinesField.Max" step="1"
                                                               @bind="maxLinesField.Value" />
                                                    </div>
                                                    <div class="form-check">
                                                        <input id="recent-logs-auto-scroll" type="checkbox" class="form-check-input" @bind="autoScrollField.Value" />
                                                        <label for="recent-logs-auto-scroll" class="form-check-label">Auto-scroll when new logs arrive</label>
                                                    </div>
                                                    break;
                                                }
                                            case SettingsModalSections.AppLogsDisplay:
                                                {
                                                    var maxLinesField = ClientSettingsFields.AppLogsMaxLines;
                                                    var autoScrollField = ClientSettingsFields.AppLogsAutoScroll;
                                                    <div class="mb-2">
                                                        <label for="app-logs-max-lines" class="form-label">Max lines</label>
                                                        <input id="app-logs-max-lines" type="number" class="form-control" min="@maxLinesField.Min" max="@maxLinesField.Max" step="1"
                                                               @bind="maxLinesField.Value" />
                                                    </div>
                                                    <div class="form-check">
                                                        <input id="app-logs-auto-scroll" type="checkbox" class="form-check-input" @bind="autoScrollField.Value" />
                                                        <label for="app-logs-auto-scroll" class="form-check-label">Auto-scroll when new logs arrive</label>
                                                    </div>
                                                    break;
                                                }
                                        }
                                    </div>
                                }
                            }
                        </div>
                    </div>
                }
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" @onclick="Close">Cancel</button>
                <button type="button" class="btn btn-primary" @onclick="Save">Save</button>
            </div>
        </div>
    </dialog>
}