@page "/kids"
@using BLAIzor.Services
@inject IJSRuntime JS
@inject OpenAIApiService openAiApiService

<elevenlabs-convai agent-id="agent_01jw0srrwcet1sbxgajbkrmmxc"
                   dynamic-variables='{"user_name": "Beni", "user_likes": "kocsik, Super Mario, dinoszauruszok"}'>
</elevenlabs-convai>

<style>
    .illustration {
        max-width: 80vw;
        border-radius: 20px;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
        font-size: 0.9rem;
        white-space: nowrap;
        z-index: 1000;
        animation: float 6s ease-in-out infinite;
    }

</style>

<script>
    function initTools() {
        const widget = document.querySelector('elevenlabs-convai');
        console.log("🎙️ Widget element:", widget);
        if (widget) {
            widget.addEventListener('elevenlabs-convai:call', (event) => {
                event.detail.config.clientTools = {
                    displayIllustration: async ({ illustrationPrompt }) => {
                        console.log("🖼️ Calling Blazor with:", illustrationPrompt);
                        await DotNet.invokeMethodAsync('BLAIzor', 'OnNewIllustrationPrompt', illustrationPrompt);
                    }
                };
            });
        }
    }
</script>

<script src="https://elevenlabs.io/convai-widget/index.js" async type="text/javascript"></script>

<div class="page" style="height: 100vh; background-image: url('images/kids_bg.png'); background-attachment: fixed; background-size: cover; background-position: center">
    <NavMenu MenuString="@Menu" OnMenuClicked=@MenuClick></NavMenu>
    <main>
        <article class="content container text-center" style="position: relative; z-index: 4;">
            <PageTitle>Kids</PageTitle>

            @if (ImageUrl is not null)
            {
                <div class="mt-5">
                    <img class="illustration" src="@ImageUrl"/>
                </div>
            }
            @if (IsLoading)
            {
                <p>🎨 Kép készül... kis türelmet kérek!</p>
            }
        </article>
    </main>
</div>

@code {
    private string Menu = "Tanulás, Gyakorlás, Tesztelés, Vizsgázás";

    private string? ImageUrl;
    private bool IsLoading = false;

    protected override void OnInitialized()
    {
        // Hook the static bridge to this instance
        IllustrationBridge.OnPromptReceived = async (prompt) =>
        {
            await GenerateImageFromPrompt(prompt);
        };
    }

    private async Task GenerateImageFromPrompt(string prompt)
    {
        Console.WriteLine($"[Component] Generating image for: {prompt}");
        IsLoading = true;
        ImageUrl = null;
        StateHasChanged();

        ImageUrl = await openAiApiService.GenerateImageAsync(prompt + ",  watercolor, amazing colors");

        IsLoading = false;
        StateHasChanged();
    }

    public void MenuClick(string menuName)
    {
        // Optional: handle menu actions
    }

    protected override void OnAfterRender(bool firstRender)
    {
        if (firstRender)
        {
            JS.InvokeVoidAsync("initTools");
        }
    }
}