@page "/"
@using BlazorMonaco
@using BlazorMonaco.Editor
@using BlazorMonaco.Languages
@using Inspectron.PrintServer.TemplateEditor.Services
@inject IJSRuntime JSRuntime

<div class="editor-container">
    <div class="toolbar">
        <button class="toolbar-btn" title="New">New</button>
        <button class="toolbar-btn" title="Open">Open</button>
        <button class="toolbar-btn" title="Save">Save</button>
        <div class="toolbar-separator"></div>
        <button class="toolbar-btn" title="Load JSON data file for expression completions" @onclick="LoadJsonAsync">Load JSON</button>
        @if (!string.IsNullOrEmpty(_loadedJsonFile))
        {
            <span class="json-indicator" title="@_loadedJsonFile">@_loadedJsonFile</span>
        }
    </div>

    <div class="split-pane">
        <div class="pane pane-editor">
            <div class="pane-header">Editor</div>
            <StandaloneCodeEditor @ref="_editor" Id="my-editor-id"
                                  ConstructionOptions="EditorConstructionOptions"
                                  OnDidInit="OnEditorInitAsync"
                                  OnDidChangeModelContent="OnContentChanged" />
        </div>

        <div class="pane pane-preview">
            <div class="pane-header">Preview</div>
            <div class="preview-content">
            </div>
        </div>
    </div>
</div>

@code {
    private StandaloneCodeEditor _editor = null!;
    private string _editorContent = "";
    private string? _loadedJsonFile;
    private readonly TemplateCompletionProvider _completionProvider = new();

    private StandaloneEditorConstructionOptions EditorConstructionOptions(StandaloneCodeEditor editor)
    {
        return new StandaloneEditorConstructionOptions
        {
            AutomaticLayout = true,
            Language = "receipt-xml",
            Theme = "receipt-dark"
        };
    }

    private async Task OnEditorInitAsync()
    {
        // Register custom language and theme
        await JSRuntime.InvokeVoidAsync("receiptLanguage.register");
        await JSRuntime.InvokeVoidAsync("receiptLanguage.defineTheme");

        // Apply the theme now that it's defined
        await BlazorMonaco.Editor.Global.SetTheme(JSRuntime, "receipt-dark");

        // Wire up content accessor for the completion provider
        _completionProvider.SetEditorContentAccessor(() => _editorContent);

        // Register completion provider
        await BlazorMonaco.Languages.Global.RegisterCompletionItemProvider(
            JSRuntime,
            "receipt-xml",
            _completionProvider.ProvideCompletionItems,
            _completionProvider.ResolveCompletionItem);
    }

    private async Task OnContentChanged(ModelContentChangedEvent e)
    {
        _editorContent = await _editor.GetValue();
    }

    private async Task LoadJsonAsync()
    {
        try
        {
            var result = await FilePicker.Default.PickAsync(new PickOptions
            {
                PickerTitle = "Select a JSON data file",
                FileTypes = new FilePickerFileType(new Dictionary<DevicePlatform, IEnumerable<string>>
                {
                    { DevicePlatform.WinUI, new[] { ".json" } },
                    { DevicePlatform.macOS, new[] { "json" } },
                    { DevicePlatform.iOS, new[] { "public.json" } },
                    { DevicePlatform.Android, new[] { "application/json" } },
                })
            });

            if (result is null)
                return;

            using var stream = await result.OpenReadAsync();
            using var reader = new StreamReader(stream);
            var json = await reader.ReadToEndAsync();

            var paths = JsonPathExtractor.Extract(json);
            _completionProvider.SetJsonPaths(paths);
            _loadedJsonFile = result.FileName;

            StateHasChanged();
        }
        catch (Exception)
        {
            // User cancelled or file read failed
        }
    }
}