@implements IAsyncDisposable

@using MudBlazor
@using RobotNet10.RobotApp.Client.Clients
@using RobotNet10.RobotApp.Client.Shared.SLAM
@using RobotNet10.Shared.Geometry
@using RobotNet10.Shared.Localization
@using Microsoft.JSInterop
@using System.Linq

@inject SLAMClient CartographerClient
@inject ISnackbar Snackbar
@inject IJSRuntime JSRuntime

<div class="map-localization-container" @ref="containerRef" tabindex="1">
    <div @ref="viewMovementRef" class="map-view-movement">
        <!-- Canvas for base occupancy grid (background layer) -->
        <canvas @ref="mapCanvasBaseRef" class="map-canvas">
        </canvas>
        <!-- Canvas for laser scan points (middle layer) -->
        <canvas @ref="laserScanCanvasRef" class="map-canvas">
        </canvas>
        <!-- SVG overlay for robot position, trajectory, etc. (foreground layer) -->
        <svg @ref="mapContainerRef" class="map-editor" viewBox="0 0 0 0">
             <defs>
                <marker id="originvector" markerWidth="2.4" markerHeight="2.4" refX="0.1" refY="0.1">
                    <line x1="0" y1="0.1" x2="0.5" y2="0.1" stroke="red" stroke-width="0.02" />
                    <path d="M 0.5 0.15 L 0.6 0.1 L 0.5 0.05 Z" fill="red" stroke-width="0" />
                    <line x1="0.1" y1="0" x2="0.1" y2="0.5" stroke="blue" stroke-width="0.02" />
                    <path d="M 0.05 0.5 L 0.1 0.6 L 0.15 0.5 Z" fill="blue" stroke-width="0" />
                </marker>
            </defs>
            <!-- Trajectory polyline (ScanMapping) - updated via JsInvoke, no id -->
            <polyline @ref="trajectoryPolylineRef" points="" fill="none" stroke="#00FF00" stroke-width="0.05" opacity="0.6" />
            <GoalPose @ref="GoalPoseRef" />
            <!-- Robot pose component -->
            <RobotPose @ref="RobotPoseRef" />
            <!-- Grid origin marker -->
            <line class="origin" marker-end="url(#originvector)" />
            @Elements
        </svg>
    </div>
    
    <MapMousePosition @ref="MapMousePositionRef" />
    <RobotPoseInfo @ref="RobotPoseInfoRef" />
</div>

@code {
    [Parameter]
    public RenderFragment? Elements { get; set; }

    private ElementReference containerRef;
    private ElementReference viewMovementRef;
    private ElementReference mapContainerRef;
    private ElementReference mapCanvasBaseRef;
    private ElementReference laserScanCanvasRef;
    private ElementReference trajectoryPolylineRef;
    private MapMousePosition MapMousePositionRef = null!;
    private GoalPose GoalPoseRef = null!;
    private RobotPose RobotPoseRef = null!;
    private RobotPoseInfo RobotPoseInfoRef = null!;

    private bool ShowMap => CurrentGrid != null;
}