import React from "react";

type HUDVariant = "pace" | "power" | "interval" | "cadence";

interface HUDPreviewSVGProps {
    variant?: HUDVariant;
    className?: string;
}

export default function HUDPreviewSVG({
    variant = "pace",
    className = "",
}: HUDPreviewSVGProps) {
    return (
        <svg
            viewBox="0 0 400 200"
            className={`w-full max-w-md ${className}`}
            role="img"
            aria-label={`HUD preview: ${variant}`}
        >
            {/* Background — translucent dark panel */}
            <rect
                x="10"
                y="10"
                width="380"
                height="180"
                rx="16"
                fill="#0a0a0a"
                opacity="0.85"
            />
            <rect
                x="10"
                y="10"
                width="380"
                height="180"
                rx="16"
                fill="none"
                stroke="#38bdf8"
                strokeWidth="1"
                opacity="0.3"
            />

            {variant === "pace" && (
                <>
                    {/* Pace label */}
                    <text x="40" y="55" fill="#71717a" fontSize="11" fontFamily="monospace">
                        RITMO
                    </text>
                    <text x="40" y="85" fill="#fafafa" fontSize="28" fontWeight="bold" fontFamily="monospace">
                        4:32
                    </text>
                    <text x="130" y="85" fill="#71717a" fontSize="14" fontFamily="monospace">
                        /km
                    </text>

                    {/* Target */}
                    <text x="200" y="55" fill="#71717a" fontSize="11" fontFamily="monospace">
                        ALVO
                    </text>
                    <text x="200" y="85" fill="#38bdf8" fontSize="28" fontWeight="bold" fontFamily="monospace">
                        4:35
                    </text>

                    {/* Delta */}
                    <text x="310" y="55" fill="#71717a" fontSize="11" fontFamily="monospace">
                        DELTA
                    </text>
                    <text x="310" y="85" fill="#22c55e" fontSize="24" fontWeight="bold" fontFamily="monospace">
                        -3s
                    </text>

                    {/* Split bar */}
                    <text x="40" y="130" fill="#71717a" fontSize="11" fontFamily="monospace">
                        SPLIT 5km
                    </text>
                    <rect x="40" y="140" width="320" height="6" rx="3" fill="#27272a" />
                    <rect x="40" y="140" width="200" height="6" rx="3" fill="#38bdf8" />

                    {/* Time */}
                    <text x="40" y="175" fill="#a1a1aa" fontSize="13" fontFamily="monospace">
                        22:41
                    </text>
                    <text x="310" y="175" fill="#a1a1aa" fontSize="13" fontFamily="monospace">
                        km 5/10
                    </text>
                </>
            )}

            {variant === "power" && (
                <>
                    <text x="40" y="55" fill="#71717a" fontSize="11" fontFamily="monospace">
                        POTÊNCIA
                    </text>
                    <text x="40" y="85" fill="#fafafa" fontSize="28" fontWeight="bold" fontFamily="monospace">
                        285
                    </text>
                    <text x="110" y="85" fill="#71717a" fontSize="14" fontFamily="monospace">
                        W
                    </text>

                    <text x="200" y="55" fill="#71717a" fontSize="11" fontFamily="monospace">
                        ZONA
                    </text>
                    <rect x="200" y="65" width="60" height="24" rx="6" fill="#f59e0b" opacity="0.2" />
                    <text x="212" y="83" fill="#f59e0b" fontSize="14" fontWeight="bold" fontFamily="monospace">
                        Z4
                    </text>

                    <text x="310" y="55" fill="#71717a" fontSize="11" fontFamily="monospace">
                        RITMO
                    </text>
                    <text x="310" y="85" fill="#a1a1aa" fontSize="22" fontFamily="monospace">
                        4:28
                    </text>

                    <text x="40" y="130" fill="#71717a" fontSize="11" fontFamily="monospace">
                        POTÊNCIA MÉDIA
                    </text>
                    <text x="40" y="155" fill="#38bdf8" fontSize="20" fontFamily="monospace">
                        278 W
                    </text>

                    <text x="310" y="175" fill="#a1a1aa" fontSize="13" fontFamily="monospace">
                        34:12
                    </text>
                </>
            )}

            {variant === "interval" && (
                <>
                    <text x="40" y="50" fill="#f59e0b" fontSize="12" fontWeight="bold" fontFamily="monospace">
                        ● INTERVALO 4/8
                    </text>

                    <text x="40" y="85" fill="#71717a" fontSize="11" fontFamily="monospace">
                        TEMPO RESTANTE
                    </text>
                    <text x="40" y="115" fill="#fafafa" fontSize="32" fontWeight="bold" fontFamily="monospace">
                        1:23
                    </text>

                    <text x="200" y="85" fill="#71717a" fontSize="11" fontFamily="monospace">
                        RITMO ATUAL
                    </text>
                    <text x="200" y="115" fill="#22c55e" fontSize="28" fontWeight="bold" fontFamily="monospace">
                        3:48
                    </text>

                    <text x="40" y="155" fill="#71717a" fontSize="11" fontFamily="monospace">
                        RECUPERAÇÃO
                    </text>
                    <text x="40" y="175" fill="#a1a1aa" fontSize="14" fontFamily="monospace">
                        próx: 2:00 trote
                    </text>

                    <text x="310" y="175" fill="#a1a1aa" fontSize="13" fontFamily="monospace">
                        HR 172
                    </text>
                </>
            )}

            {variant === "cadence" && (
                <>
                    <text x="40" y="55" fill="#71717a" fontSize="11" fontFamily="monospace">
                        CADÊNCIA
                    </text>
                    <text x="40" y="85" fill="#fafafa" fontSize="28" fontWeight="bold" fontFamily="monospace">
                        182
                    </text>
                    <text x="110" y="85" fill="#71717a" fontSize="14" fontFamily="monospace">
                        spm
                    </text>

                    {/* Zone indicator */}
                    <text x="200" y="55" fill="#71717a" fontSize="11" fontFamily="monospace">
                        ZONA
                    </text>
                    <rect x="200" y="65" width="60" height="24" rx="6" fill="#22c55e" opacity="0.2" />
                    <text x="208" y="83" fill="#22c55e" fontSize="14" fontWeight="bold" fontFamily="monospace">
                        IDEAL
                    </text>

                    <text x="40" y="130" fill="#71717a" fontSize="11" fontFamily="monospace">
                        GCT
                    </text>
                    <text x="40" y="155" fill="#a1a1aa" fontSize="18" fontFamily="monospace">
                        218 ms
                    </text>

                    <text x="200" y="130" fill="#71717a" fontSize="11" fontFamily="monospace">
                        OSCILAÇÃO
                    </text>
                    <text x="200" y="155" fill="#a1a1aa" fontSize="18" fontFamily="monospace">
                        7.2 cm
                    </text>

                    <text x="310" y="175" fill="#a1a1aa" fontSize="13" fontFamily="monospace">
                        4:32/km
                    </text>
                </>
            )}
        </svg>
    );
}