@* Reusable component for displaying examples with source code and optional documentation *@
@using Microsoft.Extensions.Localization
@using SufiChain.SufiAbp.UI.Blazor
@using SufiChain.SufiBlazor.Localization
@inherits SufiAbpComponentBase

<div class="demo-section">
    @if (!string.IsNullOrEmpty(Title))
    {
        <SbHeading Level="2" Size="4">@Title</SbHeading>
    }
    
    @if (!string.IsNullOrEmpty(Description))
    {
        <SbText Color="SbColor.Muted" Class="demo-section__description">@Description</SbText>
    }

    <div class="demo-section__container">
        <div class="demo-section__tabs">
            <button 
                class="demo-section__tab @(activeTab == "example" ? "demo-section__tab--active" : "")"
                @onclick="ShowExample">
                @L["Demo:TabExample"]
            </button>
            <button 
                class="demo-section__tab @(activeTab == "source" ? "demo-section__tab--active" : "")"
                @onclick="ShowSource">
                @L["Demo:TabViewSource"]
            </button>
            @if (ShowDocsTab)
            {
                <button 
                    class="demo-section__tab @(activeTab == "docs" ? "demo-section__tab--active" : "")"
                    @onclick="ShowDocs">
                    @L["Demo:TabDocs"]
                </button>
            }
        </div>

        <div class="demo-section__content">
            @if (activeTab == "example")
            {
                <div class="demo-section__example">
                    @ExampleContent
                </div>
            }
            else if (activeTab == "source")
            {
                <div class="demo-section__source">
                    @if (!string.IsNullOrEmpty(RelatedCode))
                    {
                        <div class="demo-section__source-block">
                            <span class="demo-section__source-label">@L["Demo:SourceLabelCodeBlock"]</span>
                            <pre><code>@RelatedCode</code></pre>
                        </div>
                    }
                    <div class="demo-section__source-block">
                        @if (!string.IsNullOrEmpty(RelatedCode))
                        {
                            <span class="demo-section__source-label">@L["Demo:SourceLabelMarkup"]</span>
                        }
                        <pre><code>@SourceCode</code></pre>
                    </div>
                </div>
            }
            else if (activeTab == "docs" && ShowDocsTab)
            {
                <div class="demo-section__docs">
                    <SbMarkdownViewer Content="@DocContent" Class="demo-section__docs-content" />
                </div>
            }
        </div>
    </div>
</div>

@code {

    private string activeTab = "example";

    /// <summary>
    /// Optional title for the demo section.
    /// </summary>
    [Parameter]
    public string? Title { get; set; }

    /// <summary>
    /// Optional description text.
    /// </summary>
    [Parameter]
    public string? Description { get; set; }

    /// <summary>
    /// The example content to display (the actual component demo).
    /// </summary>
    [Parameter]
    public RenderFragment? ExampleContent { get; set; }

    /// <summary>
    /// The source code to display in the VIEW SOURCE tab.
    /// </summary>
    [Parameter]
    public string? SourceCode { get; set; }

    /// <summary>
    /// Optional related code (e.g. @code block fields/properties) to show in VIEW SOURCE
    /// so users see the full picture for demos that use code-behind.
    /// </summary>
    [Parameter]
    public string? RelatedCode { get; set; }

    /// <summary>
    /// Optional markdown documentation content. When set, a DOCS tab is shown.
    /// </summary>
    [Parameter]
    public string? DocContent { get; set; }

    private bool ShowDocsTab => !string.IsNullOrWhiteSpace(DocContent);

    private void ShowExample()
    {
        activeTab = "example";
    }

    private void ShowSource()
    {
        activeTab = "source";
    }

    private void ShowDocs()
    {
        activeTab = "docs";
    }
}
