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 the JS module recomputes height from the
/// container width and image aspect ratio (see <see cref="WindowHeightFraction"/>), tracking
/// container resizes — this may cause a layout shift on first paint or on orientation change. 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 then recomputes from container width, image aspect ratio, and <see cref="WindowHeightFraction"/>.</summary>
    [Parameter] public string? WindowHeight { get; set; }

    /// <summary>
    /// Fraction of the aspect-ratio-correct image height to use as the parallax window height.
    /// Only active when <see cref="WindowHeight"/> is null.
    /// E.g. 0.5 (default) = window is half the height the image would be if displayed at full container width.
    /// Recalculates on container resize (orientation change, responsive layout shift).
    /// </summary>
    [Parameter] public double WindowHeightFraction { get; set; } = 0.5;

    /// <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 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");

        _handle = await _module.InvokeAsync<string>(
            "register",
            WindowRef,
            new
            {
                speed = ParallaxSpeed,
                invertDirection = InvertDirection,
                heightFraction = WindowHeight == null ? (double?)WindowHeightFraction : null,
                image1 = Image1
            });
    }

    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.
            }
        }

        GC.SuppressFinalize(this);
    }
}