<!-- No specific file for setup, assumes standard Blazor project structure -->

<!-- In a Blazor component (.razor file) or service -->
<!-- Example 1: Basic JavaScript Alert from C# -->
@inject IJSRuntime JSRuntime <!-- Inject the JS runtime service -->

<p>Click the button to show an alert from C#.</p>
<button @onclick="ShowCSharpAlert">Show C# Alert</button>

@code {
    private async Task ShowCSharpAlert()
    {
        // InvokeVoidAsync is used when the JavaScript function does not return a value.
        // "alert" is a global JavaScript function available in the browser.
        await JSRuntime.InvokeVoidAsync("alert", "Hello from C# Blazor!");
        // This line executes an alert box in the browser when the button is clicked.
    }
}

<!-- Example 2: More complex JavaScript interaction -->
<!-- Create wwwroot/js/app.js (if it doesn't exist) and link it in wwwroot/index.html (for Blazor WebAssembly) -->
<!-- For Blazor Server, link it in Pages/_Host.cshtml -->
<!-- <script src="js/app.js"></script> -->

<!-- content of wwwroot/js/app.js -->
<script>
    window.blazorJsFunctions = {
        showAlertMessage: function(message) {
            console.log("JS received message:", message);
            alert(message);
        },
        addNumbers: function(num1, num2) {
            console.log(`JS adding ${num1} and ${num2}`);
            return num1 + num2;
        }
    };
</script>

<!-- Back in your Blazor component (.razor file) -->
@inject IJSRuntime JSRuntime

<h3>Custom JavaScript Function Calls</h3>
<button @onclick="CallCustomJsFunction">Call Custom JS Function</button>
<button @onclick="CallJsFunctionWithReturn">Call JS Function with Return</button>
<p>Sum from JS: <strong>@sumResult</strong></p>

@code {
    private string sumResult = "N/A";

    private async Task CallCustomJsFunction()
    {
        // InvokeVoidAsync calls the custom JS function showAlertMessage defined in app.js
        // The first argument is the identifier (name) of the JavaScript function to invoke.
        // Subsequent arguments are passed as parameters to the JavaScript function.
        await JSRuntime.InvokeVoidAsync("blazorJsFunctions.showAlertMessage", "This message originated in C#!");
        // Ensure app.js is loaded in your index.html or _Host.cshtml for Blazor Server.
    }

    private async Task CallJsFunctionWithReturn()
    {
        // InvokeAsync<T> is used when the JavaScript function returns a value of type T.
        // We expect an int back from the addNumbers function.
        int result = await JSRuntime.InvokeAsync<int>("blazorJsFunctions.addNumbers", 10, 20);
        sumResult = result.ToString(); // Update UI with the result
        Console.WriteLine($"C# received sum: {result}");
    }
}

<!-- content of wwwroot/js/app.js (Continued from previous example) -->
<script>
    window.blazorJsFunctions = {
        // ... (previous functions)

        getGreeting: function(name) {
            console.log("JS composing greeting for:", name);
            if (name) {
                return `Hello, ${name}! Welcome to Blazor.`;
            }
            return "Hello, anonymous Blazor user!";
        },

        displayHtmlContent: function(elementId, contentHtml) {
            // WARNING: Directly injecting HTML can be a security risk if contentHtml is user-provided.
            // Always sanitize user-provided content before injecting.
            const element = document.getElementById(elementId);
            if (element) {
                element.innerHTML = contentHtml;
                console.log(`Updated element '${elementId}' with HTML.`);
            } else {
                console.error(`Element with ID '${elementId}' not found.`);
            }
        }
    };
</script>

<!-- In a Blazor component (.razor file) -->
@inject IJSRuntime JSRuntime

<h3>Retrieving Values and Manipulating DOM</h3>
<label for="userNameInput">Enter your name:</label>
<input id="userNameInput" @bind="userName" placeholder="Enter your name" />
<button @onclick="GetAndDisplayGreeting">Get Greeting from JS</button>
<p>JS Greeting: <strong>@jsGreeting</strong></p>

<div id="dynamicContent" style="border: 1px solid blue; padding: 10px; margin-top: 10px;">
    <p>Dynamic content will appear here.</p>
</div>
<button @onclick="UpdateDynamicContent">Update Content with JS</button>

@code {
    private string userName = "";
    private string jsGreeting = "No greeting yet.";

    private async Task GetAndDisplayGreeting()
    {
        try
        {
            // InvokeAsync<string> expects a string return value from JavaScript.
            jsGreeting = await JSRuntime.InvokeAsync<string>(
                "blazorJsFunctions.getGreeting",
                userName // Pass userName as a parameter to the JS function
            );
        }
        catch (JSException ex)
        {
            // Catches errors originating from the JavaScript side during invocation or execution
            Console.WriteLine($"JS Error getting greeting: {ex.Message}");
            jsGreeting = "Error getting greeting.";
        }
        catch (Exception ex)
        {
            // Catches .NET-side errors, such as network issues or deserialization failures
            Console.WriteLine($"C# Error: {ex.Message}");
            jsGreeting = "An unexpected error occurred.";
        }
    }

    private async Task UpdateDynamicContent()
    {
        string htmlContent = "<strong>This content was set by C# calling JavaScript!</strong><br/><em>And it's bold and italic.</em>";
        await JSRuntime.InvokeVoidAsync(
            "blazorJsFunctions.displayHtmlContent",
            "dynamicContent", // ID of the HTML element to target
            htmlContent // HTML content to inject
        );
    }
}

// C# Class for complex data transfer (can be in a .cs file or directly in component's @code block)
public class UserData
{
    public string Name { get; set; } = string.Empty;
    public int Age { get; set; }
    public List<string> Roles { get; set; } = new List<string>();
    public DateTime LastLogin { get; set; }
}

// Helper class to match the return type from JavaScript
public class JsProcessResult
{
    public string ProcessedName { get; set; } = string.Empty;
    public int AgeNextYear { get; set; }
    public bool HasAdminRole { get; set; }
}

// content of wwwroot/js/app.js (Continued from previous example)
<script>
    window.blazorJsFunctions = {
        // ... (previous functions)

        processUserData: function(userData) {
            console.log("JS received user data:", userData);
            // Example: Accessing properties
            console.log(`User Name: ${userData.name}`);
            console.log(`User Age: ${userData.age}`);
            console.log(`User Roles: ${userData.roles.join(', ')}`);
            console.log(`Last Login (JS): ${new Date(userData.lastLogin).toLocaleString()}`); // Convert to Date object
            // Perform some JS-specific processing
            return {
                processedName: userData.name.toUpperCase(),
                ageNextYear: userData.age + 1,
                hasAdminRole: userData.roles.includes("Admin")
            };
        },

        // Example for DotNetObjectReference (JS calling C#)
        // This function takes a .NET object reference and calls a method on it.
        callDotNetMethod: async function(dotNetRef) {
            console.log("JS calling .NET method via DotNetObjectReference...");
            const message = "Message from JavaScript!";
            try {
                // Invoke a C# method on the provided .NET object reference.
                // The string 'ReceiveMessageFromJS' must match a [JSInvokable] C# method name.
                const result = await dotNetRef.invokeMethodAsync('ReceiveMessageFromJS', message);
                console.log("C# method returned:", result);
            } catch (error) {
                console.error("Error invoking .NET method:", error);
            }
            // For short-lived references, dotNetRef.dispose() might be called here.
            // For component instances, C# side typically manages disposal.
        }
    };
</script>

<!-- In a Blazor component (.razor file) -->
@inject IJSRuntime JSRuntime
@implements IDisposable <!-- Implement IDisposable for DotNetObjectReference management -->

<h3>Complex Data Interaction</h3>
<button @onclick="SendComplexDataToJS">Send User Data to JS</button>
<p>Processed Name: <strong>@processedName</strong></p>
<p>Age Next Year: <strong>@ageNextYear</strong></p>
<p>Has Admin Role: <strong>@hasAdminRole</strong></p>

<h3>JS Calling C# (DotNetObjectReference)</h3>
<button @onclick="CallJsToInvokeDotNet">Call JS to Invoke C#</button>
<p>Message from JS: <strong>@messageFromJs</strong></p>

@code {
    private string processedName = "N/A";
    private int ageNextYear = 0;
    private bool hasAdminRole = false;
    private string messageFromJs = "Waiting for JS to call C#...";

    // Create a DotNetObjectReference for this component instance.
    // This allows JavaScript to hold a reference to this specific .NET object.
    private DotNetObjectReference<MyBlazorComponent>? _objRef; // Assuming this is MyBlazorComponent.razor

    protected override void OnInitialized()
    {
        // Initialize the DotNetObjectReference when the component starts.
        // 'this' refers to the current instance of the Blazor component.
        _objRef = DotNetObjectReference.Create(this);
    }

    private async Task SendComplexDataToJS()
    {
        var userData = new UserData
        {
            Name = "Alice Smith",
            Age = 30,
            Roles = new List<string> { "User", "Editor" },
            LastLogin = DateTime.UtcNow
        };

        // Call JS function with the complex C# object.
        // Blazor serializes 'userData' into JSON.
        var result = await JSRuntime.InvokeAsync<JsProcessResult>(
            "blazorJsFunctions.processUserData",
            userData
        );

        processedName = result.ProcessedName;
        ageNextYear = result.AgeNextYear;
        hasAdminRole = result.HasAdminRole;
    }

    private async Task CallJsToInvokeDotNet()
    {
        if (_objRef is not null)
        {
            // Pass the DotNetObjectReference to JS.
            // JavaScript will then use this reference to call a C# method.
            await JSRuntime.InvokeVoidAsync("blazorJsFunctions.callDotNetMethod", _objRef);
        }
    }

    // This method can be called from JavaScript because it's public and has [JSInvokable].
    [JSInvokable]
    public string ReceiveMessageFromJS(string message)
    {
        messageFromJs = $"C# received: '{message}' at {DateTime.Now.ToLongTimeString()}";
        Console.WriteLine($"C# method 'ReceiveMessageFromJS' invoked by JS with message: {message}");
        InvokeAsync(StateHasChanged); // Update UI as this call comes from a non-UI thread potentially.
        return "C# says: Message received and processed!"; // Acknowledgment back to JS
    }

    // Dispose of the DotNetObjectReference when the component is disposed
    public void Dispose()
    {
        // It's crucial to dispose of DotNetObjectReference instances to prevent memory leaks.
        _objRef?.Dispose();
    }
}

<!-- Example: Integrating a hypothetical simple tooltip library -->
<!-- Assume wwwroot/js/tooltip-library.js exists and contains: -->
<script>
    window.TooltipManager = {
        initializeTooltip: function(elementId, message) {
            const element = document.getElementById(elementId);
            if (element) {
                element.title = message; // Using native title attribute for simplicity as a tooltip
                element.style.cursor = 'help'; // Change cursor to indicate hoverable element
                console.log(`Tooltip initialized for '${elementId}' with message: '${message}'`);
            } else {
                console.error(`Element '${elementId}' not found for tooltip initialization.`);
            }
        },
        updateTooltip: function(elementId, newMessage) {
            const element = document.getElementById(elementId);
            if (element) {
                element.title = newMessage;
                console.log(`Tooltip for '${elementId}' updated to: '${newMessage}'`);
            }
        },
        removeTooltip: function(elementId) {
            const element = document.getElementById(elementId);
            if (element) {
                element.removeAttribute('title');
                element.style.cursor = 'default';
                console.log(`Tooltip removed from '${elementId}'.`);
            }
        }
    };
</script>

<!-- Don't forget to link this JS file in wwwroot/index.html (for Blazor WebAssembly) or Pages/_Host.cshtml (for Blazor Server) -->
<!-- Ensure it's loaded AFTER Blazor's own scripts if it depends on them, or before if Blazor will only call it. -->
<!-- <script src="js/tooltip-library.js"></script> -->

<!-- In a Blazor component (.razor file) -->
@inject IJSRuntime JSRuntime
@implements IDisposable <!-- Recommended for components that manage external resources -->

<h3>External JavaScript Library Integration</h3>

<p id="myTooltipTarget" style="border: 1px solid green; padding: 5px; display: inline-block;">
    Hover over me for a tooltip!
</p>
<br/>
<button @onclick="InitializeTooltip">Initialize Tooltip</button>
<button @onclick="UpdateTooltip">Update Tooltip</button>
<button @onclick="RemoveTooltip">Remove Tooltip</button>

@code {
    private const string TooltipTargetId = "myTooltipTarget";

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        // Optionally initialize on first render if the tooltip should always be present
        // if (firstRender)
        // {
        //     await InitializeTooltip();
        // }
    }

    private async Task InitializeTooltip()
    {
        // Call the JS function from the external library through the global object.
        // "TooltipManager.initializeTooltip" references the function within the 'window.TooltipManager' namespace.
        await JSRuntime.InvokeVoidAsync(
            "TooltipManager.initializeTooltip",
            TooltipTargetId,
            "This is a tooltip managed by C# via JSInterop!"
        );
        Console.WriteLine("Tooltip initialized from C#.");
    }

    private async Task UpdateTooltip()
    {
        // Update an existing tooltip with a new message.
        await JSRuntime.InvokeVoidAsync(
            "TooltipManager.updateTooltip",
            TooltipTargetId,
            $"Updated tooltip message at {DateTime.Now.ToLongTimeString()}"
        );
        Console.WriteLine("Tooltip updated from C#.");
    }

    private async Task RemoveTooltip()
    {
        // Remove the tooltip functionality.
        await JSRuntime.InvokeVoidAsync(
            "TooltipManager.removeTooltip",
            TooltipTargetId
        );
        Console.WriteLine("Tooltip removed from C#.");
    }

    public void Dispose()
    {
        // If using IJSObjectReference for the tooltip library, dispose it here.
        // For simple global function calls like these, no explicit disposal is needed in C#.
    }
}

<!-- No specific code for this part as it focuses on conceptual best practices and patterns. -->
<!-- Refer to previous examples for foundational code constructs. -->