@layout PageLayout
@inject IGlossaryService glossaryService
@inject IGlossaryDialogService glossaryDialogService
@inject NavigationManager NavigationManager

@page "/glossary/{TermId}"

<LayoutMediumContentComponent>
    @if (term != null)
    {
        <WebsiteTitleComponent>@term.Term</WebsiteTitleComponent>

        <PaperComponent>
            <div class="detailCategory">@term.Category</div>
            <div class="detailDefinition">@((MarkupString)RenderMarkdown(term.LongDefinition))</div>
        </PaperComponent>

        @if (term.RelatedEntityIds.Count > 0)
        {
            <PaperComponent>
                <div class="detailSectionTitle">Related Entities</div>
                <div class="detailRelatedList">
                    @foreach (var entityId in term.RelatedEntityIds)
                    {
                        <EntityLabelComponent EntityId="@entityId"/>
                    }
                </div>
            </PaperComponent>
        }

        @if (term.RelatedTermIds.Count > 0)
        {
            <PaperComponent>
                <div class="detailSectionTitle">Related Terms</div>
                <div class="detailRelatedList">
                    @foreach (var relatedId in term.RelatedTermIds)
                    {
                        <GlossaryLabelComponent TermId="@relatedId"/>
                    }
                </div>
            </PaperComponent>
        }
    }
    else
    {
        <WebsiteTitleComponent>Term not found</WebsiteTitleComponent>
        <PaperComponent>
            <p>The glossary term you're looking for doesn't exist.</p>
        </PaperComponent>
    }
</LayoutMediumContentComponent>

<style>
    .detailCategory {
        font-size: 0.85rem;
        opacity: 0.7;
        margin-bottom: 12px;
    }

    .detailDefinition {
        line-height: 1.6;
        font-size: 1rem;
    }

    .detailDefinition p {
        margin-bottom: 12px;
    }

    .detailSectionTitle {
        font-weight: 800;
        font-size: 1.1rem;
        margin-bottom: 12px;
    }

    .detailRelatedList {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }
</style>

@code {

    [Parameter] public string TermId { get; set; } = "";

    private GlossaryTermModel? term;

    protected override void OnParametersSet()
    {
        term = glossaryService.GetTerm(TermId);
    }

    string RenderMarkdown(string text)
    {
        return Markdown.ToHtml(text);
    }

}