@inherits RadzenComponent
@using Radzen.Blazor.Rendering

@if (Visible)
{
<CascadingValue Value="@this">
@ChildContent
</CascadingValue>

<CascadingValue Value="@this" IsFixed="true">
    <div @ref="@Element" class="@GetCssClass()" style="@Style" @attributes="Attributes">
        @{
            var wrapperClass = ClassList.Create("rz-spider-chart-wrapper")
                .Add($"rz-spider-legend-{Legend?.Position}".ToLowerInvariant(), Legend?.Visible == true)
                .ToString();
        }

        <div class="@wrapperClass" @onmouseleave="OnChartMouseLeave">
            @if (Width != null && Height != null && Series.Count > 0)
            {
                <svg viewBox="@($"0 0 {Width.Value.ToInvariantString()} {Height.Value.ToInvariantString()}")">
                        <g class="rz-spider-chart-grid">
                        @* Diagonal lines first (bottom layer) *@
                        @foreach (var category in GetAllCategories())
                        {
                            var index = GetCategoryIndex(category);
                            var (x1, y1) = GetPoint(index, MinValue);
                            var (x2, y2) = GetPoint(index, MaxValue);
                            <line x1="@x1.ToInvariantString()" y1="@y1.ToInvariantString()" x2="@x2.ToInvariantString()" y2="@y2.ToInvariantString()" class="rz-spider-chart-grid-line" />
                        }

                        @* Grid shapes second (top layer) *@
                        @for (int i = 1; i <= 5; i++)
                        {
                            @if (GridShape == SpiderChartGridShape.Circular)
                            {
                                var centerX = Width.Value / 2;
                                var centerY = Height.Value / 2;
                                var radius = Math.Min(centerX, centerY) * 0.8 * (i / 5.0);
                                <circle cx="@centerX.ToInvariantString()" cy="@centerY.ToInvariantString()" r="@radius.ToInvariantString()" class="rz-spider-chart-grid-circle" />
                            }
                            else
                            {
                                <path d="@GetGridPath(i / 5.0)" class="rz-spider-chart-grid-polygon" />
                            }
                        }
                    </g>

                    <g class="rz-spider-chart-areas">
                        @foreach (var series in VisibleSeries)
                        {
                            var path = GetSeriesPath(series);
                            var isHovered = HoveredSeries == series;
                            var shouldShow = !IsLegendHover || HoveredSeries == null || HoveredSeries == series;
                            var localSeries = series;
                            
                            <path d="@path" 
                                  class="rz-spider-chart-area rz-series-@(series.Index) @(isHovered && IsLegendHover ? "rz-state-hover" : "") @(!shouldShow ? "rz-state-hidden" : "")"
                                  data-stroke-width="@series.StrokeWidth.ToInvariantString()"
                                  @onclick="@(args => InvokeSeriesClick(localSeries))"
                                  @onmouseenter="@(args => { OnAreaMouseEnter((MouseEventArgs)args, localSeries); })"
                                  @onmouseleave="OnAreaMouseLeave" />
                        }
                    </g>

                    @if (ShowMarkers)
                    {
                        @* First layer: Render all visible markers *@
                        <g class="rz-spider-chart-markers">
                            @foreach (var series in VisibleSeries)
                            {
                                @if (series.MarkersVisible)
                                {
                                    var isHovered = series == HoveredSeries;
                                    var shouldShow = !IsLegendHover || HoveredSeries == null || HoveredSeries == series;
                                    @foreach (var category in GetAllCategories())
                                    {
                                        var value = GetSeriesValue(series, category);
                                        var index = GetCategoryIndex(category);
                                        var (x, y) = GetPoint(index, value);
                                        
                                        <circle cx="@x.ToInvariantString()" cy="@y.ToInvariantString()" r="@series.MarkerSize.ToInvariantString()" 
                                                class="rz-spider-chart-marker rz-series-@(series.Index) @(isHovered && IsLegendHover ? "rz-state-hover" : "") @(!shouldShow ? "rz-state-hidden" : "")"
                                                pointer-events="none" />
                                    }
                                }
                            }
                        </g>
                        
                        @* Second layer: Interactive hit areas rendered AFTER visual markers so they're on top *@
                        <g class="rz-spider-chart-hit-areas">
                            @foreach (var series in VisibleSeries)
                            {
                                @if (series.MarkersVisible)
                                {
                                    @foreach (var category in GetAllCategories())
                                    {
                                        var value = GetSeriesValue(series, category);
                                        var index = GetCategoryIndex(category);
                                        var (x, y) = GetPoint(index, value);
                                        var localSeries = series;
                                        var localCategory = category;
                                        var localValue = value;
                                        
                                        <circle cx="@x.ToInvariantString()" cy="@y.ToInvariantString()" r="10" 
                                                fill="transparent"
                                                stroke="transparent"
                                                class="rz-spider-chart-hit-area"
                                                @onclick="@(args => InvokeSeriesClick(localSeries, localCategory, localValue, localSeries.GetData(localCategory)))"
                                                @onmouseenter="@(args => OnMarkerMouseEnter((MouseEventArgs)args, localSeries, localCategory, localValue))"
                                                @onmouseleave="OnMarkerMouseLeave" />
                                    }
                                }
                            }
                        </g>
                    }

                    <g class="rz-spider-chart-labels">
                        @RenderLabels()
                    </g>
                </svg>
            @if (Legend?.Visible == true)
            {
             <SpiderLegend />
            }
           }

        </div>
    </div>
</CascadingValue>
}