@inject IStorageService StorageService
@inject IPermissionService PermissionService
@inject IGlossaryDialogService GlossaryDialogService
@inject IJSRuntime JsRuntime

<Router AppAssembly="@typeof(App).Assembly"
        AdditionalAssemblies="@(new[] { typeof(HomePage).Assembly })">
    <Found Context="routeData">
        @if (isLoaded)
        {
            <RouteView RouteData="@routeData" DefaultLayout="@typeof(PageLayout)"/>
            <FocusOnNavigate RouteData="@routeData" Selector="h1"/>
        }
    </Found>
    <NotFound>
        <PageTitle>Not found</PageTitle>
        <LayoutView Layout="@typeof(MainLayout)">
            <p role="alert">Sorry, there's nothing at this address.</p>
        </LayoutView>
    </NotFound>
</Router>

<EntityDialogPortal/>
<GlossaryDialogPortal/>
<ToastPortal/>
<SearchPortal/>
<ConfirmationDialogPortal/>




<style>
    a {
        color: white;
        font-weight: 700;
    }

    a:hover {
        color: white;
        text-decoration: underline;
        text-decoration-color: #8fc5ff;
        text-decoration-thickness: 3px;
    }


    :root {
        --faction-aru: #da4e4e;
        --immortal-mala: #dc7a29;
        --immortal-xol: #87aa87;
        --immortal-atzlan: #8B7355;

        --faction-qrath: #8EACCD;
        --immortal-orzum: #4A6B8A;
        --immortal-ajari: #b4e2e3;

        --severity-warning-color: #2a2000;
        --severity-warning-border-color: #755c13;
        --severity-error-color: #290102;
        --severity-error-border-color: #4C2C33;
        --severity-information-color: #030129;
        --severity-information-border-color: #2c3a4c;
        --severity-success-color: #042901;
        --severity-success-border-color: #2E4C2C;

        --accent: #432462;
        --primary: #4308a3;
        --primary-border: #2c0b62;
        --primary-hover: #5e00f7;
        --primary-border-hover: #a168ff;
        --background: #161618;
        --secondary: #23133e;
        --secondary-hover: #2a0070;
        --secondary-border-hover: #a168ff;
        --paper: #252526;
        --paper-border: #151516;

        --paper-hover: #52366f;
        --paper-border-hover: #653497;

        --info: #451376;
        --info-border: #210b36;

        --dialog-radius: 12px;

        --info-secondary: #1e1e2e;
        --info-secondary-border: #3a3a5c;
    }

    .glossary-link {
        text-decoration: underline;
        text-decoration-style: dotted;
        text-underline-offset: 2px;
        cursor: pointer;
        color: #8fc5ff;
        font-weight: 600;
    }

    .glossary-link:hover {
        background-color: var(--primary-hover);
    }

</style>

@code {
    private bool isLoaded;

    protected override async Task OnInitializedAsync()
    {
        await StorageService.Load();
        isLoaded = true;
        StateHasChanged();
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await JsRuntime.InvokeVoidAsync("eval", @"
window.glossaryInterop = {
    dotNetRef: null,
    init: function(dotNetRef) {
        this.dotNetRef = dotNetRef;
        document.addEventListener('click', function(e) {
            var target = e.target;
            while (target) {
                if (target.classList && target.classList.contains('glossary-link')) {
                    var id = target.getAttribute('data-glossary-id');
                    if (id && window.glossaryInterop.dotNetRef) {
                        window.glossaryInterop.dotNetRef.invokeMethodAsync('OpenGlossaryTerm', id);
                        e.preventDefault();
                        return;
                    }
                }
                target = target.parentElement;
            }
        });
    }
};
");
            await JsRuntime.InvokeVoidAsync("glossaryInterop.init", DotNetObjectReference.Create(this));
        }
    }

    [JSInvokable]
    public void OpenGlossaryTerm(string termId)
    {
        GlossaryDialogService.AddDialog(termId);
        StateHasChanged();
    }

}