using Microsoft.AspNetCore.Components;
using Microsoft.JSInterop;

namespace DeepDrftShared.Client.Components;

/// <summary>
/// Scroll-driven parallax image window. As the component scrolls up through the viewport,
/// the image pans through the window faster than the page scrolls. An optional second image
/// crossfades in on hover (pure CSS). A <see cref="FullWidth"/> flag breaks the container out
/// of parent padding to span the viewport.
/// </summary>
/// <remarks>
/// Progressive enhancement: renders a static framed image at SSR; the parallax attaches after
/// interactive boot via <c>OnAfterRenderAsync(firstRender)</c>. When <see cref="WindowHeight"/>
/// is left null, the window renders at 300px and recomputes to naturalHeight/2 once the image
/// decodes — this can cause a one-time layout shift on first paint. Pass an explicit
/// <see cref="WindowHeight"/> for above-the-fold hero usage to avoid the shift.
/// </remarks>
public abstract class ParallaxImageBase : ComponentBase, IAsyncDisposable
{
    [Inject] private IJSRuntime JS { get; set; } = default!;

    /// <summary>Primary image URL, shown at rest.</summary>
    [Parameter, EditorRequired] public string Image1 { get; set; } = default!;

    /// <summary>Optional hover image (assumed same dimensions as <see cref="Image1"/>).</summary>
    [Parameter] public string? Image2 { get; set; }

    /// <summary>Accessible name for <see cref="Image1"/>. When null, the window is decorative.</summary>
    [Parameter] public string? Alt1 { get; set; }

    /// <summary>Accessible name for <see cref="Image2"/> (only relevant if it adds semantic meaning).</summary>
    [Parameter] public string? Alt2 { get; set; }

    /// <summary>CSS height of the parallax window. When null, renders at 300px and recomputes to naturalHeight/2.</summary>
    [Parameter] public string? WindowHeight { get; set; }

    /// <summary><c>background-size</c> width.</summary>
    [Parameter] public string ImageWidth { get; set; } = "auto";

    /// <summary><c>background-size</c> height.</summary>
    [Parameter] public string ImageHeight { get; set; } = "auto";

    /// <summary>When true, stretches the container to 100vw via a negative-margin breakout.</summary>
    [Parameter] public bool FullWidth { get; set; }

    /// <summary>Speed multiplier, clamped to [0,1] in the JS module.</summary>
    [Parameter] public double ParallaxSpeed { get; set; } = 0.5;

    /// <summary>When false: top-on-entry to bottom-at-top. When true: inverted.</summary>
    [Parameter] public bool InvertDirection { get; set; }

    /// <summary>Extra CSS classes on the outer element.</summary>
    [Parameter] public string? Class { get; set; }

    protected ElementReference WindowRef;
    protected string WindowHeightValue { get; private set; } = "300px";

    private IJSObjectReference? _module;
    private DotNetObjectReference<ParallaxImageBase>? _dotNetRef;
    private string? _handle;

    protected override void OnParametersSet()
    {
        WindowHeightValue = WindowHeight ?? "300px";
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (!firstRender)
        {
            return;
        }

        _module = await JS.InvokeAsync<IJSObjectReference>(
            "import", "./_content/DeepDrftShared.Client/js/parallax/parallax.js");

        var reportNaturalHeight = WindowHeight == null;
        if (reportNaturalHeight)
        {
            _dotNetRef = DotNetObjectReference.Create(this);
        }

        _handle = await _module.InvokeAsync<string>(
            "register",
            WindowRef,
            new { speed = ParallaxSpeed, invertDirection = InvertDirection, onNaturalHeight = reportNaturalHeight, image1 = Image1 },
            _dotNetRef);
    }

    /// <summary>
    /// Invoked by the JS module once the background image decodes, when the consumer left
    /// <see cref="WindowHeight"/> null. Sets the window height to half the image's natural height.
    /// </summary>
    [JSInvokable]
    public void SetNaturalHeight(double naturalHeightPx)
    {
        WindowHeightValue = $"{(int)(naturalHeightPx / 2)}px";
        StateHasChanged();
    }

    public async ValueTask DisposeAsync()
    {
        if (_module != null)
        {
            try
            {
                if (_handle != null)
                {
                    await _module.InvokeVoidAsync("unregister", _handle);
                }

                await _module.DisposeAsync();
            }
            catch (JSDisconnectedException)
            {
                // Circuit already torn down (e.g. browser navigated away) — nothing to clean up.
            }
        }

        _dotNetRef?.Dispose();
        GC.SuppressFinalize(this);
    }
}