import { createFileRoute } from "@tanstack/react-router"
import { useEffect, useRef } from "react"
import "./index.css"
import screen1 from "./screen1.png"
import song from "./We Are Charlie Kirk.mp3"


export const Route = createFileRoute("/pazismemod/")({
    component: RouteComponent,
})

const SONG_START_TIME = 46

function RouteComponent() {
    const audioRef = useRef<HTMLAudioElement>(null)

    useEffect(() => {
        const audio = audioRef.current

        if (!audio) {
            return
        }

        const syncStartTime = () => {
            if (Number.isFinite(audio.duration) && audio.duration > SONG_START_TIME) {
                audio.currentTime = SONG_START_TIME
            }
        }

        const loopFromOffset = async () => {
            syncStartTime()

            try {
                await audio.play()
            }
            catch {
                // Ignore autoplay failures. Some embedded browsers require user interaction.
            }
        }

        const tryAutoplay = async () => {
            syncStartTime()

            try {
                await audio.play()
            }
            catch {
                // Ignore autoplay failures. Some embedded browsers require user interaction.
            }
        }

        const gameDetails = (
            _servername: string,
            _serverurl: string,
            _mapname: string,
            _maxplayers: string,
            _steamid: string,
            _gamemode: string,
            volume: number | string,
        ) => {
            const parsedVolume = Number(volume)

            if (Number.isFinite(parsedVolume)) {
                audio.volume = Math.min(1, Math.max(0, parsedVolume))
            }
        }

        audio.addEventListener("loadedmetadata", syncStartTime)
        audio.addEventListener("ended", loopFromOffset)
        void tryAutoplay()
        ;(window as Window & { GameDetails?: typeof gameDetails }).GameDetails = gameDetails

        return () => {
            audio.removeEventListener("loadedmetadata", syncStartTime)
            audio.removeEventListener("ended", loopFromOffset)

            if ((window as Window & { GameDetails?: typeof gameDetails }).GameDetails === gameDetails) {
                delete (window as Window & { GameDetails?: typeof gameDetails }).GameDetails
            }
        }
    }, [])

    return (
        <div className="relative h-screen w-screen overflow-hidden bg-black">
            <audio ref={audioRef} src={song} preload="auto" hidden />

            <img
                src={screen1}
                alt="Pazismemod screenshot"
                className="h-full w-full object-contain"
            />

            <h1
                className="absolute bottom-12 left-6 leading-none text-white"
                style={{
                    fontFamily: "\"Coolvetica\", sans-serif",
                    fontSize: "92px",
                }}
            >
                pazisme mod
            </h1>
        </div>
    )
}