type WindDirectionPoint = {
    label: string | null;
    value: number;
};

function normalizeDegrees(degrees: number): number {
    return ((degrees % 360) + 360) % 360;
}

function polarToCartesian(degrees: number, radius: number, center: number) {
    const radians = (normalizeDegrees(degrees) * Math.PI) / 180;

    return {
        x: center + radius * Math.sin(radians),
        y: center - radius * Math.cos(radians),
    };
}

export default function WindDirectionHistory({ points }: { points: WindDirectionPoint[] }) {
    if (points.length === 0) {
        return (
            <div className="rounded-lg border border-dashed p-4 text-sm text-muted-foreground">
                No chart data available.
            </div>
        );
    }

    const size = 260;
    const center = size / 2;
    const radius = 88;
    const path = points
        .map((point, index) => {
            const { x, y } = polarToCartesian(point.value, radius, center);

            return `${index === 0 ? 'M' : 'L'} ${x} ${y}`;
        })
        .join(' ');

    return (
        <div className="space-y-3">
            <div className="flex justify-center">
                <svg viewBox={`0 0 ${size} ${size}`} className="h-72 w-72 max-w-full">
                    <circle
                        cx={center}
                        cy={center}
                        r={radius}
                        className="fill-muted/15 stroke-border"
                        strokeWidth="1.5"
                    />
                    <circle
                        cx={center}
                        cy={center}
                        r={radius * 0.66}
                        className="fill-none stroke-border/70"
                        strokeDasharray="4 6"
                        strokeWidth="1"
                    />
                    <line
                        x1={center}
                        y1={center - radius - 16}
                        x2={center}
                        y2={center + radius + 16}
                        className="stroke-border/70"
                        strokeWidth="1"
                    />
                    <line
                        x1={center - radius - 16}
                        y1={center}
                        x2={center + radius + 16}
                        y2={center}
                        className="stroke-border/70"
                        strokeWidth="1"
                    />
                    <text
                        x={center}
                        y={center - radius - 24}
                        textAnchor="middle"
                        className="fill-muted-foreground text-[12px] font-semibold"
                    >
                        N
                    </text>
                    <text
                        x={center + radius + 24}
                        y={center + 4}
                        textAnchor="middle"
                        className="fill-muted-foreground text-[12px] font-semibold"
                    >
                        E
                    </text>
                    <text
                        x={center}
                        y={center + radius + 34}
                        textAnchor="middle"
                        className="fill-muted-foreground text-[12px] font-semibold"
                    >
                        S
                    </text>
                    <text
                        x={center - radius - 24}
                        y={center + 4}
                        textAnchor="middle"
                        className="fill-muted-foreground text-[12px] font-semibold"
                    >
                        W
                    </text>

                    {points.length > 1 ? (
                        <path
                            d={path}
                            fill="none"
                            stroke="currentColor"
                            strokeOpacity="0.35"
                            strokeWidth="2"
                            className="text-primary"
                        />
                    ) : null}

                    {points.map((point, index) => {
                        const { x, y } = polarToCartesian(point.value, radius, center);
                        const isLatest = index === points.length - 1;

                        return (
                            <g key={`${point.label}-${point.value}-${index}`}>
                                <line
                                    x1={center}
                                    y1={center}
                                    x2={x}
                                    y2={y}
                                    className="stroke-primary/20"
                                    strokeWidth="1"
                                />
                                <circle
                                    cx={x}
                                    cy={y}
                                    r={isLatest ? 6 : 4}
                                    className="fill-primary stroke-background"
                                    strokeWidth="2"
                                />
                                <circle
                                    cx={x}
                                    cy={y}
                                    r="12"
                                    fill="transparent"
                                    className="cursor-pointer"
                                />
                            </g>
                        );
                    })}

                    <circle
                        cx={center}
                        cy={center}
                        r="4"
                        className="fill-background stroke-primary"
                        strokeWidth="2"
                    />
                </svg>
            </div>

            <div className="flex items-center justify-between text-xs text-muted-foreground">
                <span>{points[0]?.label ?? 'Start'}</span>
                <span>{points.at(-1)?.label ?? 'Latest'}</span>
            </div>

        </div>
    );
}