"use client"

import { useCallback, useState, useEffect, useMemo, useRef } from "react"
import { useRouter, useSearchParams } from "next/navigation"
import Image from "next/image"
import {
    Gamepad2Icon,
    MessageSquareIcon,
    SettingsIcon,
    TrendingUpIcon,
    ExternalLinkIcon,
    ClockIcon,
    SparklesIcon,
    DatabaseIcon,
    Plus,
    ThumbsUpIcon,
    ThumbsDownIcon,
    GaugeIcon,
    ChevronDownIcon,
    PencilIcon,
} from "lucide-react"
import Link from "next/link"
import { useSession } from "@/lib/auth-client"
import { FaSteam } from "react-icons/fa"
import { motion, AnimatePresence } from "motion/react"

import type { GameSettingCategory } from "@/lib/db/schema/performanceEntries"
import { PresetDetailModal } from "./preset-detail-modal"

import { BookmarkButton } from "@/components/saved-games/bookmark-button"
import { WindowsIcon, MacIcon, LinuxIcon } from "@/app/components/PlatformIcons"

import { AntiCheatBadge } from "@/components/anti-cheat-badge"
import { PlayabilityBadge } from "@/components/playability-badge"
import { SteamReviews } from "@/components/steam-reviews"
import { CommunitySuggestionForm } from "@/components/community-suggestion-form"

// Chart imports
import { HistoricalAreaChart } from "@/components/charts/HistoricalAreaChart"
import { UpscalerBarChart } from "@/components/charts/UpscalerBarChart"
import { FpsBoxplot } from "@/components/charts/FpsBoxplot"
import { FpsRangeChart } from "@/components/charts/FpsRangeChart"
import { DeviceDonut } from "@/components/charts/DeviceDonut"
import { PerformanceTierChart } from "@/components/charts/PerformanceTierChart"
import { StabilityScatterChart } from "@/components/charts/StabilityScatterChart"
import { BatteryLifeChart } from "@/components/charts/BatteryLifeChart"

// Comments
import { CommentSection } from "@/components/comments/comment-section"

// Types
interface Game {
    id: string
    steamAppId: number | null
    title: string
    description: string | null
    developer: string | null
    publisher: string | null
    genres: string[] | null
    headerImage: string | null
    capsuleImage: string | null
    storeUrl: string | null
    source: string
    slug: string | null
    lastSync: string | null
    syncStatus: string | null
    createdAt: string
    metascore?: number | null
    onlineMultiplayerStatus?: string | null
    systemRequirements: {
        minimum: string | null
        recommended: string | null
    } | null
    metacriticScore: number | null
    metacriticUrl: string | null
    recommendationsTotal: number | null
    priceCurrent: number | null
    priceInitial: number | null
    priceCurrency: string | null
    isFree: boolean
    releaseDate: string | null
    categories: string[] | null
    platforms: { windows: boolean; mac: boolean; linux: boolean } | null
    playabilityStatus?:
        | "great"
        | "playable"
        | "needs_tweaks"
        | "unplayable"
        | "unknown"
        | null
    steamReviewScore?: number | null
    steamReviewSentiment?: string | null
    steamReviewCount?: number | null
}

interface Counts {
    benchmarks: number
    presets: number
    comments: number
}

interface PlatformSupport {
    id: string
    gameId: string
    hardwareSlug: string
    isSupported: boolean
    protonStatus: string
    playabilityStatus:
        | "great"
        | "playable"
        | "needs_tweaks"
        | "unplayable"
        | "unknown"
        | null
    antiCheatRelevant: boolean
    antiCheatStatus: "none" | "supported" | "unsupported" | "unknown" | null
    antiCheatName: string | null
}

interface Preset {
    id: string
    gameId?: string
    hardwareSlug: string
    hardwareName: string
    upvotes: number
    downvotes: number
    settingsJson: GameSettingCategory[] | null
    settingsCount: number
    fpsAvg: number | null
    fpsLow: number | null
    fpsHigh: number | null
    fpsOnePercentLow: number | null
    upscalerType: string | null
    upscalerVersion: string | null
    frameGenMethod: string | null
    protonVersion: string | null
    osVersion: string | null
    launchOptions: string | null
    loadTimeSsd: number | null
    loadTimeSd: number | null
    tdpWatts: number | null
    youtubeVideoId: string | null
    screenshots: Array<{
        id: string
        url: string
        width: number
        height: number
        orderIndex: number
    }> | null
    customSystem: boolean
    userNotes: string | null
    userId: string
    userName: string | null
    userImage: string | null
    verifiedAt: string | null
    isPinned: boolean
    pinnedAt: string | null
    createdAt: string
    hardwareWattHours: number | null
    hardwareDeviceType: string | null
    versionString: string | null
    buildId: string | null
    gameAntiCheatName: string | null
    gameAntiCheatStatus: "none" | "supported" | "unsupported" | "unknown" | null
}

interface StatsResponse {
    summary: {
        totalEntries: number
        avgFps: number
        bestDevice: string
        verifiedCount: number
        versionCount: number
        avgStability: number | null
        bestOnePercentLow: number | null
    }
    isRawPerformer: boolean
    isPoorPerformance: boolean
    boxplot: Array<{
        hardwareSlug: string
        hardwareName: string
        min: number
        q1: number
        median: number
        onePercentLow?: number
        q3: number
        max: number
    }>
    historical: Array<{
        period: string
        entries: Array<{
            hardwareSlug: string
            avgFps: number
            count: number
        }>
    }>
    upscalerStats: Array<{
        upscalerType: string
        upscalerVersion?: string
        frameGenMethod: string
        hardwareSlug: string
        avgFps: number
        count: number
    }>
    fpsRange: Array<{
        id: string
        hardwareSlug: string
        fpsLow: number
        fpsAvg: number
        fpsHigh: number
        fpsOnePercentLow: number | null
        isRawPerformer: boolean
    }>
    deviceBreakdown: Array<{
        hardwareSlug: string
        hardwareName: string
        count: number
        wattHours: number | null
        tdpMax: number | null
        deviceType: string | null
    }>
    performanceTiers: Array<{
        hardwareSlug: string
        unplayable: number
        playable: number
        smooth: number
        excellent: number
    }>
    stabilityScatter: Array<{
        id: string
        hardwareSlug: string
        fpsAvg: number
        fpsOnePercentLow: number
        stabilityRatio: number
    }>
    batteryLife: Array<{
        id: string
        hardwareSlug: string
        tdpWatts: number
        estimatedBatteryHours: number
        wattHours: number | null
        tdpMax: number | null
        estimatedAtMaxTdpMin: number | null
    }>
    filterOptions: {
        protonVersions: string[]
        osVersions: string[]
    }
}

interface Props {
    game: Game
    counts: Counts
    platformSupport: PlatformSupport[]
    presets: Preset[]
    gameId: string
}

const UPSCALER_OPTIONS = ["Any", "None", "FSR", "DLSS", "XeSS", "LSFG", "Other"]
const FRAMEGEN_OPTIONS = ["Any", "None", "FSR FG", "DLSS FG", "LSFG", "Other"]

function formatDate(value: string | null): string {
    if (!value) return "—"
    return new Date(value).toLocaleDateString()
}

function isRawPerformerPreset(preset: Preset): boolean {
    return (
        preset.fpsAvg !== null &&
        preset.fpsAvg >= 60 &&
        preset.upscalerType === "none" &&
        preset.frameGenMethod === "none"
    )
}

function isPoorPerformancePreset(preset: Preset): boolean {
    return preset.fpsAvg !== null && preset.fpsAvg < 30
}

function getFpsColor(preset: Preset): string {
    if (preset.fpsAvg === null) return "text-text/60"
    if (isRawPerformerPreset(preset)) return "text-green-400"
    if (preset.frameGenMethod && preset.frameGenMethod !== "none") {
        if (preset.frameGenMethod === "dlss_fg") return "text-blue-400"
        return "text-orange-400"
    }
    if (preset.upscalerType && preset.upscalerType !== "none")
        return "text-orange-400"
    return "text-text/60"
}

function generatePresetName(preset: Preset): string {
    const parts = [preset.hardwareName]
    if (preset.fpsAvg !== null) parts.push(`${Math.round(preset.fpsAvg)}fps`)
    return parts.join(" · ")
}

function HeroInfo({
    game,
    stats,
    session,
    counts,
    platformSupport,
    protonDbUrl,
    steamDbUrl,
    gameId,
    formatDate,
    Badge,
}: {
    game: Game
    stats: StatsResponse | null
    session: { user?: { id?: string } } | null
    counts: Counts
    platformSupport: PlatformSupport[]
    protonDbUrl: string | null
    steamDbUrl: string | null
    gameId: string
    formatDate: (value: string | null) => string
    Badge: React.ComponentType<{
        icon: React.ElementType
        value: number
        label: string
    }>
}) {
    return (
        <>
            {/* Title row */}
            <div className='flex flex-wrap items-center gap-2'>
                <h1 className='text-xl sm:text-2xl md:text-3xl font-bold truncate'>
                    {game.title}
                </h1>
                {stats?.isRawPerformer && (
                    <span className='inline-flex items-center gap-1 px-2 py-0.5 rounded-full bg-green-500/10 border border-green-500/20 text-green-400 text-[10px] font-semibold'>
                        <SparklesIcon className='h-3 w-3' />
                        Raw Performer
                    </span>
                )}
                {stats?.isPoorPerformance && (
                    <span className='inline-flex items-center gap-1 px-2 py-0.5 rounded-full bg-red-500/10 border border-red-500/20 text-red-400 text-[10px] font-semibold'>
                        ⚠ Poor Performance
                    </span>
                )}

                {/* Playability badge */}
                {game.playabilityStatus && (
                    <PlayabilityBadge status={game.playabilityStatus} />
                )}

                {/* Anti-cheat badge */}
                {platformSupport?.some((p) => p.antiCheatRelevant) && (
                    <AntiCheatBadge
                        antiCheatRelevant={true}
                        antiCheatStatus={
                            platformSupport.find((p) => p.antiCheatRelevant)
                                ?.antiCheatStatus ?? "unknown"
                        }
                        antiCheatName={
                            platformSupport.find((p) => p.antiCheatRelevant)
                                ?.antiCheatName
                        }
                    />
                )}

                {/* Steam review score */}
                {game.steamReviewScore != null && (
                    <span className='inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full bg-blue-500/15 text-blue-400 border border-blue-500/30 text-xs font-medium'>
                        <svg
                            className='h-3 w-3'
                            viewBox='0 0 24 24'
                            fill='currentColor'
                        >
                            <path d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z' />
                        </svg>
                        {game.steamReviewScore}% Positive
                        {game.steamReviewSentiment && (
                            <span className='text-blue-300/70'>
                                ({game.steamReviewSentiment.replace(/_/g, " ")})
                            </span>
                        )}
                    </span>
                )}
            </div>

            {/* Subtitle */}
            <div className='flex flex-wrap items-center gap-2 text-sm text-text/70'>
                {game.developer && <span>{game.developer}</span>}
                {game.developer && game.publisher && (
                    <span className='text-text/40'>·</span>
                )}
                {game.publisher && <span>{game.publisher}</span>}
                {game.genres && game.genres.length > 0 && (
                    <>
                        <span className='text-text/40'>·</span>
                        <span className='text-text/60'>
                            {game.genres.slice(0, 3).join(", ")}
                        </span>
                    </>
                )}
            </div>

            {/* Stats badges */}
            <div className='flex flex-wrap items-center gap-2 mt-1'>
                <Badge
                    icon={TrendingUpIcon}
                    value={counts.benchmarks}
                    label='Benchmarks'
                />
                <Badge
                    icon={SettingsIcon}
                    value={counts.presets}
                    label='Entries'
                />
                <Badge
                    icon={MessageSquareIcon}
                    value={counts.comments}
                    label='Comments'
                />
                {game.metascore !== undefined && game.metascore !== null && (
                    <span className='inline-flex items-center gap-1 px-2 py-0.5 rounded-full bg-yellow-500/10 border border-yellow-500/20 text-yellow-400 text-[10px] font-semibold'>
                        ★ {game.metascore}
                    </span>
                )}
            </div>

            {/* Metadata pills */}
            <div className='flex flex-wrap items-center gap-2 mt-2'>
                {game.releaseDate && (
                    <span className='inline-flex items-center px-2 py-0.5 rounded-full bg-text/5 border border-border text-text/60 text-[10px]'>
                        {game.releaseDate}
                    </span>
                )}
                {game.isFree && (
                    <span className='inline-flex items-center px-2 py-0.5 rounded-full bg-green-500/10 border border-green-500/20 text-green-400 text-[10px] font-semibold'>
                        Free to Play
                    </span>
                )}
                {game.priceCurrent != null &&
                    !game.isFree &&
                    game.priceCurrency && (
                        <span className='inline-flex items-center px-2 py-0.5 rounded-full bg-text/5 border border-border text-text/60 text-[10px]'>
                            {new Intl.NumberFormat("en-US", {
                                style: "currency",
                                currency: game.priceCurrency,
                            }).format(game.priceCurrent / 100)}
                        </span>
                    )}
                {game.priceCurrent != null &&
                    !game.isFree &&
                    game.priceInitial != null &&
                    game.priceInitial > game.priceCurrent &&
                    game.priceCurrency && (
                        <span className='inline-flex items-center px-2 py-0.5 rounded-full bg-text/5 border border-border text-text/40 text-[10px] line-through'>
                            {new Intl.NumberFormat("en-US", {
                                style: "currency",
                                currency: game.priceCurrency,
                            }).format(game.priceInitial / 100)}
                        </span>
                    )}
                {game.metacriticScore != null && (
                    <span className='inline-flex items-center px-2 py-0.5 rounded-full bg-yellow-500/10 border border-yellow-500/20 text-yellow-400 text-[10px] font-semibold'>
                        ★ {game.metacriticScore}/100
                    </span>
                )}
                {game.onlineMultiplayerStatus && (
                    <span className='inline-flex items-center px-2 py-0.5 rounded-full bg-text/5 border border-border text-text/60 text-[10px]'>
                        {game.onlineMultiplayerStatus}
                    </span>
                )}
                {game.platforms && (
                    <span className='inline-flex items-center gap-1 px-2 py-0.5 rounded-full bg-text/5 border border-border text-text/60 text-[10px]'>
                        {game.platforms.windows && (
                            <WindowsIcon className='h-3 w-3 text-blue-400' />
                        )}
                        {game.platforms.mac && (
                            <MacIcon className='h-3 w-3 text-text/60' />
                        )}
                        {game.platforms.linux && (
                            <LinuxIcon className='h-3 w-3 text-yellow-500' />
                        )}
                    </span>
                )}
                {game.steamAppId !== null && (
                    <span className='inline-flex items-center px-2 py-0.5 rounded-full bg-text/5 border border-border text-text/40 text-[10px]'>
                        AppID {game.steamAppId}
                    </span>
                )}
            </div>

            {/* External links */}
            <div className='flex flex-wrap items-center gap-3 mt-1'>
                {game.storeUrl && (
                    <a
                        href={game.storeUrl}
                        target='_blank'
                        rel='noopener noreferrer'
                        className='inline-flex items-center gap-1 text-xs text-text/60 hover:text-primary transition-colors cursor-pointer'
                    >
                        <FaSteam className='h-3.5 w-3.5' />
                        Steam
                        <ExternalLinkIcon className='h-3 w-3' />
                    </a>
                )}
                {protonDbUrl && (
                    <a
                        href={protonDbUrl}
                        target='_blank'
                        rel='noopener noreferrer'
                        className='inline-flex items-center gap-1 text-xs text-text/60 hover:text-primary transition-colors cursor-pointer'
                    >
                        ProtonDB
                        <ExternalLinkIcon className='h-3 w-3' />
                    </a>
                )}
                {steamDbUrl && (
                    <a
                        href={steamDbUrl}
                        target='_blank'
                        rel='noopener noreferrer'
                        className='inline-flex items-center gap-1 text-xs text-text/60 hover:text-primary transition-colors cursor-pointer'
                    >
                        SteamDB
                        <ExternalLinkIcon className='h-3 w-3' />
                    </a>
                )}
            </div>

            {/* DB stats row */}
            {stats && (
                <div className='flex flex-wrap items-center gap-3 mt-1 text-xs text-text/50'>
                    <span className='inline-flex items-center gap-1'>
                        <DatabaseIcon className='h-3 w-3' />
                        {stats.summary.versionCount} versions
                    </span>
                    <span>·</span>
                    <span className='inline-flex items-center gap-1'>
                        <SparklesIcon className='h-3 w-3' />
                        {stats.summary.verifiedCount} verified
                    </span>
                    {game.lastSync && (
                        <>
                            <span>·</span>
                            <span className='inline-flex items-center gap-1'>
                                <ClockIcon className='h-3 w-3' />
                                Last sync {formatDate(game.lastSync)}
                            </span>
                        </>
                    )}
                </div>
            )}
            {stats && (
                <div className='flex flex-wrap items-center gap-2 mt-2'>
                    <BookmarkButton
                        gameId={game.id}
                        data-gamepad-focusable
                    />
                    {session?.user && game.source !== "steam" && (
                        <Link
                            href={`/game/${gameId}/edit`}
                            className='inline-flex items-center gap-2 px-3 py-2 rounded-lg border border-border text-sm text-text/70 hover:bg-text/5 transition-colors cursor-pointer'
                            data-gamepad-focusable
                        >
                            <PencilIcon className='h-4 w-4' />
                            Edit Game
                        </Link>
                    )}
                    {session && (
                        <Link
                            href={`/game/${game.id}/submit`}
                            className='inline-flex items-center gap-2 px-3 py-2 rounded-lg bg-primary text-white text-sm font-semibold hover:bg-primary/90 transition-colors cursor-pointer'
                            data-gamepad-focusable
                        >
                            <Plus className='h-4 w-4' />
                            Add Benchmark
                        </Link>
                    )}
                    {game.source !== "steam" && (
                        <CommunitySuggestionForm
                            gameId={game.id}
                            gameTitle={game.title}
                            editableFields={[
                                {
                                    name: "title",
                                    label: "Title",
                                    currentValue: game.title,
                                },
                                {
                                    name: "description",
                                    label: "Description",
                                    currentValue: game.description || "",
                                },
                                {
                                    name: "developer",
                                    label: "Developer",
                                    currentValue: game.developer || "",
                                },
                                {
                                    name: "publisher",
                                    label: "Publisher",
                                    currentValue: game.publisher || "",
                                },
                                {
                                    name: "storeUrl",
                                    label: "Store URL",
                                    currentValue: game.storeUrl || "",
                                },
                            ]}
                        />
                    )}
                </div>
            )}
        </>
    )
}

export function GamePageClient({
    game,
    counts,
    platformSupport,
    presets,
    gameId,
}: Props) {
    const router = useRouter()
    const searchParams = useSearchParams()
    const { data: session } = useSession()
    const [imgError, setImgError] = useState(false)
    const [stats, setStats] = useState<StatsResponse | null>(null)
    const [selectedDevices, setSelectedDevices] = useState<string[]>([])
    const [filters, setFilters] = useState({
        proton: "all",
        os: "all",
        upscaler: "all",
        frameGen: "all",
    })
    const [loading, setLoading] = useState(true)
    const [selectedPresetId, setSelectedPresetId] = useState<string | null>(
        null,
    )
    const [showSystemReq, setShowSystemReq] = useState(true)
    const [reportedPresets, setReportedPresets] = useState<Set<string>>(
        new Set(),
    )
    const presetsRef = useRef<HTMLDivElement>(null)

    // On mount, auto-open preset from URL
    useEffect(() => {
        const presetId = searchParams.get("preset")
        queueMicrotask(() => {
            if (presetId) {
                setSelectedPresetId(presetId)
            } else {
                setSelectedPresetId(null)
            }
        })
    }, [searchParams])

    const handlePresetOpen = (presetId: string) => {
        setSelectedPresetId(presetId)
        const url = new URL(window.location.href)
        url.searchParams.set("preset", presetId)
        router.replace(url.toString(), { scroll: false })
    }

    const handlePresetClose = () => {
        setSelectedPresetId(null)
        const url = new URL(window.location.href)
        url.searchParams.delete("preset")
        router.replace(url.toString(), { scroll: false })
    }

    const handleDeletePreset = async (presetId: string) => {
        try {
            const res = await fetch(
                `/api/performance/${presetId}/user-delete`,
                {
                    method: "DELETE",
                    headers: { "Content-Type": "application/json" },
                },
            )
            if (res.ok) {
                setSelectedPresetId(null)
                router.refresh()
            }
        } catch (err) {
            console.error("Failed to delete preset:", err)
        }
    }

    const handleReportPreset = async (
        presetId: string,
        reason: "inaccurate" | "spam" | "inappropriate" | "other",
        details?: string,
    ) => {
        try {
            const res = await fetch(`/api/performance/${presetId}/report`, {
                method: "POST",
                headers: { "Content-Type": "application/json" },
                body: JSON.stringify({ reason, details }),
            })
            if (res.ok) {
                setReportedPresets((prev) => new Set(prev).add(presetId))
            }
        } catch (err) {
            console.error("Failed to report preset:", err)
        }
    }

    const handleImgError = useCallback(() => setImgError(true), [])

    // Fetch stats on mount
    useEffect(() => {
        let cancelled = false
        async function fetchStats() {
            setLoading(true)
            try {
                const res = await fetch(`/api/games/${gameId}/stats`)
                if (!res.ok) throw new Error(`HTTP ${res.status}`)
                const data = await res.json()
                if (!cancelled) setStats(data)
            } catch (err) {
                console.error("Failed to fetch stats:", err)
            } finally {
                if (!cancelled) setLoading(false)
            }
        }
        fetchStats()
        return () => {
            cancelled = true
        }
    }, [gameId])

    // Initialize selected devices when stats load
    const didInitDevices = useRef(false)
    useEffect(() => {
        if (stats && !didInitDevices.current) {
            didInitDevices.current = true
            const slugs = stats.deviceBreakdown.map((d) => d.hardwareSlug)
            queueMicrotask(() => setSelectedDevices(slugs))
        }
    }, [stats])

    // Filtered stats
    const filteredStats = useMemo(() => {
        if (!stats) return null

        const deviceSet = new Set(selectedDevices)

        const filterByDevice = <T extends { hardwareSlug: string }>(
            arr: T[] | undefined,
        ) => arr?.filter((item) => deviceSet.has(item.hardwareSlug)) ?? []

        const filterUpscaler = (
            arr: StatsResponse["upscalerStats"] | undefined,
        ) =>
            (arr ?? []).filter((item) => {
                if (!deviceSet.has(item.hardwareSlug)) return false
                if (
                    filters.upscaler !== "all" &&
                    item.upscalerType !== filters.upscaler
                )
                    return false
                if (
                    filters.frameGen !== "all" &&
                    item.frameGenMethod !== filters.frameGen
                )
                    return false
                return true
            })

        return {
            ...stats,
            boxplot: filterByDevice(stats.boxplot),
            historical: (stats.historical ?? [])
                .map((h) => ({
                    ...h,
                    entries: h.entries.filter((e) =>
                        deviceSet.has(e.hardwareSlug),
                    ),
                }))
                .filter((h) => h.entries.length > 0),
            upscalerStats: filterUpscaler(stats.upscalerStats),
            fpsRange: filterByDevice(stats.fpsRange),
            deviceBreakdown: filterByDevice(stats.deviceBreakdown),
            performanceTiers: filterByDevice(stats.performanceTiers),
            stabilityScatter: filterByDevice(stats.stabilityScatter),
            batteryLife: filterByDevice(stats.batteryLife),
        }
    }, [stats, selectedDevices, filters])

    // Filtered presets
    const filteredPresets = useMemo(() => {
        return presets.filter((p) => {
            if (
                selectedDevices.length > 0 &&
                !selectedDevices.includes(p.hardwareSlug)
            )
                return false
            if (filters.proton !== "all" && p.protonVersion !== filters.proton)
                return false
            if (filters.os !== "all" && p.osVersion !== filters.os) return false
            if (
                filters.upscaler !== "all" &&
                p.upscalerType !== filters.upscaler
            )
                return false
            if (
                filters.frameGen !== "all" &&
                p.frameGenMethod !== filters.frameGen
            )
                return false
            return true
        })
    }, [presets, selectedDevices, filters])

    const pinnedPresets = useMemo(
        () => filteredPresets.filter((p) => p.isPinned),
        [filteredPresets],
    )
    const regularPresets = useMemo(
        () => filteredPresets.filter((p) => !p.isPinned),
        [filteredPresets],
    )

    const coverImage = game.capsuleImage || game.headerImage

    const protonDbUrl = game.steamAppId
        ? `https://www.protondb.com/app/${game.steamAppId}`
        : null
    const steamDbUrl = game.steamAppId
        ? `https://steamdb.info/app/${game.steamAppId}`
        : null

    const toggleDevice = useCallback((slug: string) => {
        setSelectedDevices((prev) =>
            prev.includes(slug)
                ? prev.filter((s) => s !== slug)
                : [...prev, slug],
        )
    }, [])

    return (
        <>
            <section className='w-full flex flex-col gap-8 pb-16'>
                {/* Section 1: Hero Header */}
                <motion.div
                    initial={{ opacity: 0, y: 12 }}
                    animate={{ opacity: 1, y: 0 }}
                    transition={{ duration: 0.4 }}
                    className='pt-6'
                >
                    {/* Mobile hero — full-bleed background */}
                    <div className='relative md:hidden'>
                        {coverImage && !imgError ? (
                            <div className='absolute inset-0 z-0'>
                                <Image
                                    src={coverImage}
                                    alt=''
                                    fill
                                    className='object-cover object-top'
                                    sizes='(max-width: 767px) 100vw, 0px'
                                    priority
                                    onError={handleImgError}
                                />
                                <div className='absolute inset-0 bg-linear-to-t from-black/80 via-black/50 to-black/40 backdrop-blur-xs' />
                            </div>
                        ) : (
                            <div className='absolute inset-0 z-0 bg-linear-to-b from-primary/20 to-background backdrop-blur-xs' />
                        )}
                        <div className='relative z-10 flex flex-col gap-2 min-w-0 px-4 pt-24 pb-6'>
                            <HeroInfo
                                game={game}
                                stats={stats}
                                session={session}
                                counts={counts}
                                platformSupport={platformSupport}
                                protonDbUrl={protonDbUrl}
                                steamDbUrl={steamDbUrl}
                                gameId={gameId}
                                formatDate={formatDate}
                                Badge={Badge}
                            />
                        </div>
                    </div>

                    {/* Desktop hero — side-by-side layout */}
                    <div className='hidden md:flex gap-4 sm:gap-6 px-[10svw]'>
                        {/* Cover image */}
                        <div className='relative shrink-0 aspect-2/3 w-20 sm:w-32 md:w-52 rounded-lg overflow-hidden border border-border bg-text/5 h-max'>
                            {coverImage && !imgError ? (
                                <Image
                                    src={coverImage}
                                    alt={game.title}
                                    width={600}
                                    height={900}
                                    className='object-cover'
                                    priority
                                    onError={handleImgError}
                                    loading='eager'
                                />
                            ) : (
                                <div className='w-full h-full flex items-center justify-center'>
                                    <Gamepad2Icon className='h-10 w-10 text-text/20' />
                                </div>
                            )}
                        </div>
                        {/* Info */}
                        <div className='flex flex-col gap-2 min-w-0'>
                            <HeroInfo
                                game={game}
                                stats={stats}
                                session={session}
                                counts={counts}
                                platformSupport={platformSupport}
                                protonDbUrl={protonDbUrl}
                                steamDbUrl={steamDbUrl}
                                gameId={gameId}
                                formatDate={formatDate}
                                Badge={Badge}
                            />
                        </div>
                    </div>
                </motion.div>

                {/* Section 2: Overview */}
                <motion.div
                    initial={{ opacity: 0, y: 12 }}
                    animate={{ opacity: 1, y: 0 }}
                    transition={{ duration: 0.4, delay: 0.1 }}
                    className='px-4 md:px-[10svw]'
                >
                    <div className='max-w-7xl mx-auto flex flex-col gap-6'>
                        {/* Description */}
                        <div>
                            <h2 className='text-sm font-medium uppercase tracking-wider text-text/60 mb-3'>
                                About
                            </h2>
                            {game.description ? (
                                <p className='text-sm text-text/80 leading-relaxed whitespace-pre-line'>
                                    {game.description}
                                </p>
                            ) : (
                                <p className='text-sm text-text/40 italic'>
                                    No description available.
                                </p>
                            )}
                            {game.systemRequirements &&
                                (game.systemRequirements.minimum ||
                                    game.systemRequirements.recommended) && (
                                    <div className='mt-6'>
                                        <button
                                            onClick={() =>
                                                setShowSystemReq(!showSystemReq)
                                            }
                                            className='flex items-center gap-2 text-sm font-medium text-text/80 hover:text-primary transition-colors cursor-pointer'
                                            data-gamepad-focusable
                                        >
                                            <ChevronDownIcon
                                                className={`h-4 w-4 transition-transform ${showSystemReq ? "rotate-180" : ""}`}
                                            />
                                            System Requirements
                                        </button>
                                        {showSystemReq && (
                                            <div className='mt-3 grid grid-cols-1 md:grid-cols-2 gap-4'>
                                                {game.systemRequirements
                                                    .minimum && (
                                                    <div className='p-4 rounded-lg border border-border bg-text/3'>
                                                        <h4 className='text-xs font-medium uppercase tracking-wider text-text/50 mb-2'>
                                                            Minimum
                                                        </h4>
                                                        <div
                                                            className='text-xs text-text/70 prose prose-sm prose-invert max-w-none'
                                                            dangerouslySetInnerHTML={{
                                                                __html: game
                                                                    .systemRequirements
                                                                    .minimum,
                                                            }}
                                                        />
                                                    </div>
                                                )}
                                                {game.systemRequirements
                                                    .recommended && (
                                                    <div className='p-4 rounded-lg border border-border bg-text/3'>
                                                        <h4 className='text-xs font-medium uppercase tracking-wider text-text/50 mb-2'>
                                                            Recommended
                                                        </h4>
                                                        <div
                                                            className='text-xs text-text/70 prose prose-sm prose-invert max-w-none'
                                                            dangerouslySetInnerHTML={{
                                                                __html: game
                                                                    .systemRequirements
                                                                    .recommended,
                                                            }}
                                                        />
                                                    </div>
                                                )}
                                            </div>
                                        )}
                                    </div>
                                )}
                        </div>

                        {/* Platforms */}
                        {game.platforms && (
                            <div>
                                <h3 className='text-xs font-medium uppercase tracking-wider text-text/50 mb-2'>
                                    Platforms
                                </h3>
                                <div className='flex items-center gap-1.5'>
                                    <span title='Windows'>
                                        <WindowsIcon
                                            className={`h-3.5 w-3.5 ${game.platforms.windows ? "text-blue-400" : "text-text/20"}`}
                                        />
                                    </span>
                                    <span title='macOS'>
                                        <MacIcon
                                            className={`h-3.5 w-3.5 ${game.platforms.mac ? "text-text/60" : "text-text/20"}`}
                                        />
                                    </span>
                                    <span title='Linux'>
                                        <LinuxIcon
                                            className={`h-3.5 w-3.5 ${game.platforms.linux ? "text-yellow-500" : "text-text/20"}`}
                                        />
                                    </span>
                                </div>
                            </div>
                        )}
                        {platformSupport.length > 0 && (
                            <div>
                                <h3 className='text-xs font-medium uppercase tracking-wider text-text/50 mb-2'>
                                    Platform Support
                                </h3>
                                <div className='flex flex-col gap-2'>
                                    {platformSupport.map((ps) => (
                                        <div
                                            key={ps.id}
                                            className='flex items-center justify-between p-2 rounded-md border border-border bg-text/3'
                                        >
                                            <span className='text-xs font-medium capitalize'>
                                                {ps.hardwareSlug.replace(
                                                    /-/g,
                                                    " ",
                                                )}
                                            </span>
                                            <div className='flex items-center gap-2'>
                                                <span
                                                    className={`text-[10px] px-1.5 py-0.5 rounded-full ${
                                                        ps.isSupported
                                                            ? "bg-green-500/20 text-green-400"
                                                            : "bg-red-500/20 text-red-400"
                                                    }`}
                                                >
                                                    {ps.isSupported
                                                        ? "Supported"
                                                        : "Unsupported"}
                                                </span>
                                                <span className='text-[10px] text-text/50 capitalize'>
                                                    {ps.protonStatus}
                                                </span>

                                                {/* Per-device playability */}
                                                {ps.playabilityStatus && (
                                                    <PlayabilityBadge
                                                        status={
                                                            ps.playabilityStatus
                                                        }
                                                        compact
                                                    />
                                                )}

                                                {/* Per-device anti-cheat */}
                                                {ps.antiCheatRelevant && (
                                                    <AntiCheatBadge
                                                        antiCheatRelevant={true}
                                                        antiCheatStatus={
                                                            ps.antiCheatStatus
                                                        }
                                                        antiCheatName={
                                                            ps.antiCheatName
                                                        }
                                                        compact
                                                    />
                                                )}
                                            </div>
                                        </div>
                                    ))}
                                </div>
                            </div>
                        )}
                    </div>
                </motion.div>

                {/* Section 3: Device Selector + Filters */}
                <motion.div
                    initial={{ opacity: 0, y: 12 }}
                    animate={{ opacity: 1, y: 0 }}
                    transition={{ duration: 0.4, delay: 0.15 }}
                    className='px-4 md:px-[10svw]'
                >
                    <div className='max-w-7xl mx-auto flex flex-col gap-4'>
                        {/* Device ribbon */}
                        {stats && stats.deviceBreakdown.length > 0 && (
                            <div className='flex items-center gap-2 overflow-x-auto pb-1 scrollbar-hide'>
                                {stats.deviceBreakdown.map((device) => {
                                    const active = selectedDevices.includes(
                                        device.hardwareSlug,
                                    )
                                    return (
                                        <button
                                            key={device.hardwareSlug}
                                            onClick={() =>
                                                toggleDevice(
                                                    device.hardwareSlug,
                                                )
                                            }
                                            className={`shrink-0 px-3 py-1.5 rounded-full text-xs font-medium border transition-colors cursor-pointer ${
                                                active
                                                    ? "bg-primary/20 border-primary text-primary"
                                                    : "bg-transparent border-border text-text/60 hover:text-text/80"
                                            }`}
                                            data-gamepad-focusable
                                        >
                                            {device.hardwareName}
                                            <span className='ml-1 text-text/40'>
                                                ({device.count})
                                            </span>
                                        </button>
                                    )
                                })}
                            </div>
                        )}

                        {/* Fine filters */}
                        <div className='flex flex-wrap items-center gap-2'>
                            <FilterSelect
                                label='Proton Version'
                                value={filters.proton}
                                options={[
                                    "all",
                                    ...(stats?.filterOptions.protonVersions ??
                                        []),
                                ]}
                                onChange={(v) =>
                                    setFilters((f) => ({ ...f, proton: v }))
                                }
                            />
                            <FilterSelect
                                label='OS Version'
                                value={filters.os}
                                options={[
                                    "all",
                                    ...(stats?.filterOptions.osVersions ?? []),
                                ]}
                                onChange={(v) =>
                                    setFilters((f) => ({ ...f, os: v }))
                                }
                            />
                            <FilterSelect
                                label='Upscaler'
                                value={filters.upscaler}
                                options={UPSCALER_OPTIONS.map((o) =>
                                    o.toLowerCase(),
                                )}
                                onChange={(v) =>
                                    setFilters((f) => ({ ...f, upscaler: v }))
                                }
                            />
                            <FilterSelect
                                label='Frame Gen Method'
                                value={filters.frameGen}
                                options={FRAMEGEN_OPTIONS.map((o) =>
                                    o.toLowerCase().replace(" ", "_"),
                                )}
                                onChange={(v) =>
                                    setFilters((f) => ({ ...f, frameGen: v }))
                                }
                            />
                        </div>
                    </div>
                </motion.div>

                {/* Section 4a: Pinned Entries */}
                {pinnedPresets.length > 0 && (
                    <motion.div
                        initial={{ opacity: 0, y: 12 }}
                        animate={{ opacity: 1, y: 0 }}
                        transition={{ duration: 0.4, delay: 0.2 }}
                        className='px-4 md:px-[10svw]'
                    >
                        <div className='max-w-7xl mx-auto flex flex-col gap-4'>
                            <div className='flex items-center justify-between'>
                                <h2 className='text-lg font-semibold'>
                                    📌 Pinned Entries
                                </h2>
                                <span className='text-xs text-text/50'>
                                    {pinnedPresets.length} pinned
                                </span>
                            </div>
                            <div className='grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4'>
                                {pinnedPresets.map((preset) => {
                                    const raw = isRawPerformerPreset(preset)
                                    const fpsColor = getFpsColor(preset)
                                    return (
                                        <motion.div
                                            key={preset.id}
                                            onClick={() =>
                                                handlePresetOpen(preset.id)
                                            }
                                            className={`flex flex-col gap-3 p-4 rounded-xl border transition-colors cursor-pointer hover:border-primary/30 ${
                                                raw
                                                    ? "border-green-500/30 bg-green-500/5"
                                                    : "border-yellow-500/30 bg-yellow-500/5"
                                            }`}
                                            data-gamepad-focusable
                                        >
                                            {/* Header */}
                                            <div className='flex items-start justify-between gap-2'>
                                                <div className='min-w-0'>
                                                    <div className='flex items-center gap-2'>
                                                        <h3 className='font-semibold text-sm truncate'>
                                                            {generatePresetName(
                                                                preset,
                                                            )}
                                                        </h3>
                                                        {raw && (
                                                            <span className='inline-flex items-center gap-0.5 px-1.5 py-0.5 rounded-full bg-green-500/10 border border-green-500/20 text-green-400 text-[9px] font-semibold'>
                                                                <SparklesIcon className='h-2.5 w-2.5' />
                                                                Raw
                                                            </span>
                                                        )}
                                                        {isPoorPerformancePreset(
                                                            preset,
                                                        ) &&
                                                            preset.fpsAvg !==
                                                                null && (
                                                                <span className='inline-flex items-center gap-0.5 px-1.5 py-0.5 rounded-full bg-red-500/10 border border-red-500/20 text-red-400 text-[9px] font-semibold'>
                                                                    ⚠ Slow
                                                                </span>
                                                            )}
                                                    </div>
                                                    <p className='text-xs text-text/50 mt-0.5'>
                                                        {preset.hardwareName}
                                                    </p>
                                                </div>
                                                <div className='flex items-center gap-2 text-xs text-text/60 shrink-0'>
                                                    {preset.youtubeVideoId && (
                                                        <svg
                                                            className='h-3 w-3 text-red-400 shrink-0'
                                                            viewBox='0 0 24 24'
                                                            fill='currentColor'
                                                        >
                                                            <path d='M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z' />
                                                        </svg>
                                                    )}
                                                    <span className='flex items-center gap-0.5'>
                                                        <ThumbsUpIcon className='h-3 w-3' />
                                                        {preset.upvotes}
                                                    </span>
                                                    <span className='flex items-center gap-0.5'>
                                                        <ThumbsDownIcon className='h-3 w-3' />
                                                        {preset.downvotes}
                                                    </span>
                                                </div>
                                            </div>

                                            {/* Settings count */}
                                            <div className='text-xs text-text/50'>
                                                {preset.settingsCount} settings
                                            </div>

                                            {/* FPS */}
                                            {preset.fpsAvg !== null && (
                                                <div
                                                    className={`text-sm tabular-nums ${fpsColor}`}
                                                >
                                                    <span className='font-semibold'>
                                                        {preset.fpsAvg}
                                                    </span>
                                                    <span className='text-text/40'>
                                                        {" "}
                                                        avg
                                                    </span>
                                                    {preset.fpsOnePercentLow !==
                                                        null && (
                                                        <span className='text-text/40'>
                                                            {" "}
                                                            ·{" "}
                                                            {
                                                                preset.fpsOnePercentLow
                                                            }{" "}
                                                            1% low
                                                        </span>
                                                    )}
                                                    {preset.fpsLow !== null &&
                                                        preset.fpsHigh !==
                                                            null &&
                                                        !preset.fpsOnePercentLow && (
                                                            <span className='text-text/40'>
                                                                {" "}
                                                                ({preset.fpsLow}
                                                                –
                                                                {preset.fpsHigh}
                                                                )
                                                            </span>
                                                        )}
                                                </div>
                                            )}

                                            {/* Power / Battery quick-look */}
                                            {(() => {
                                                const dev =
                                                    stats?.deviceBreakdown.find(
                                                        (d) =>
                                                            d.hardwareSlug ===
                                                            preset.hardwareSlug,
                                                    )
                                                const isHandheld =
                                                    dev?.deviceType ===
                                                    "handheld"
                                                const wh =
                                                    dev?.wattHours ?? null
                                                const tdp =
                                                    preset.tdpWatts ?? null
                                                const estHours =
                                                    wh && tdp && tdp > 0
                                                        ? wh / tdp
                                                        : null

                                                if (
                                                    !isHandheld ||
                                                    (!tdp && !wh)
                                                )
                                                    return null

                                                return (
                                                    <div className='text-[11px] text-text/50 flex items-center gap-1.5 flex-wrap'>
                                                        {tdp && (
                                                            <span>
                                                                ⚡{" "}
                                                                {Math.round(
                                                                    tdp,
                                                                )}
                                                                W
                                                            </span>
                                                        )}
                                                        {wh && (
                                                            <span>
                                                                🔋{" "}
                                                                {Math.round(wh)}
                                                                Wh
                                                            </span>
                                                        )}
                                                        {estHours !== null && (
                                                            <span>
                                                                ⏱ ~
                                                                {estHours.toFixed(
                                                                    1,
                                                                )}
                                                                h
                                                            </span>
                                                        )}
                                                    </div>
                                                )
                                            })()}

                                            {/* Technology tags */}
                                            <div className='flex flex-wrap items-center gap-1.5'>
                                                {preset.upscalerType &&
                                                    preset.upscalerType !==
                                                        "none" && (
                                                        <span className='px-1.5 py-0.5 rounded text-[10px] font-medium bg-purple-500/10 text-purple-400 border border-purple-500/20'>
                                                            {preset.upscalerType.toUpperCase()}
                                                            {preset.upscalerVersion
                                                                ? ` ${preset.upscalerVersion}`
                                                                : ""}
                                                        </span>
                                                    )}
                                                {preset.frameGenMethod &&
                                                    preset.frameGenMethod !==
                                                        "none" && (
                                                        <span
                                                            className={`px-1.5 py-0.5 rounded text-[10px] font-medium border ${
                                                                preset.frameGenMethod ===
                                                                "dlss_fg"
                                                                    ? "bg-blue-500/10 text-blue-400 border-blue-500/20"
                                                                    : "bg-orange-500/10 text-orange-400 border-orange-500/20"
                                                            }`}
                                                        >
                                                            {preset.frameGenMethod ===
                                                            "fsr_fg"
                                                                ? "FSR FG"
                                                                : preset.frameGenMethod ===
                                                                    "dlss_fg"
                                                                  ? "DLSS FG"
                                                                  : preset.frameGenMethod}
                                                        </span>
                                                    )}
                                            </div>

                                            {/* Proton + OS */}
                                            <div className='flex flex-wrap items-center gap-2 text-[10px] text-text/40'>
                                                {preset.protonVersion && (
                                                    <span>
                                                        Proton{" "}
                                                        {preset.protonVersion}
                                                    </span>
                                                )}
                                                {preset.osVersion && (
                                                    <span>
                                                        {preset.osVersion}
                                                    </span>
                                                )}
                                            </div>
                                        </motion.div>
                                    )
                                })}
                            </div>
                        </div>
                    </motion.div>
                )}

                {/* Section 4b: Performance Entries */}
                <motion.div
                    initial={{ opacity: 0, y: 12 }}
                    animate={{ opacity: 1, y: 0 }}
                    transition={{ duration: 0.4, delay: 0.2 }}
                    className='px-4 md:px-[10svw]'
                >
                    <div className='max-w-7xl mx-auto flex flex-col gap-4'>
                        <div className='flex items-center justify-between'>
                            <h2 className='text-lg font-semibold'>
                                Performance Entries
                            </h2>
                            <span className='text-xs text-text/50'>
                                {regularPresets.length} entr
                                {regularPresets.length !== 1 ? "ies" : "y"}
                            </span>
                        </div>

                        {regularPresets.length === 0 ? (
                            <div className='flex flex-col items-center justify-center py-16 gap-3 rounded-xl border border-border bg-text/2'>
                                <SettingsIcon className='h-10 w-10 text-text/20' />
                                <p className='text-sm text-text/40'>
                                    No entries match the selected filters
                                </p>
                            </div>
                        ) : (
                            <div
                                ref={presetsRef}
                                className='grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4'
                            >
                                {regularPresets.map((preset) => {
                                    const raw = isRawPerformerPreset(preset)
                                    const fpsColor = getFpsColor(preset)
                                    return (
                                        <motion.div
                                            key={preset.id}
                                            onClick={() =>
                                                handlePresetOpen(preset.id)
                                            }
                                            className={`flex flex-col gap-3 p-4 rounded-xl border transition-colors cursor-pointer hover:border-primary/30 ${
                                                raw
                                                    ? "border-green-500/30 bg-green-500/5"
                                                    : "border-border bg-text/3"
                                            }`}
                                            data-gamepad-focusable
                                        >
                                            {/* Header */}
                                            <div className='flex items-start justify-between gap-2'>
                                                <div className='min-w-0'>
                                                    <div className='flex items-center gap-2'>
                                                        <h3 className='font-semibold text-sm truncate'>
                                                            {generatePresetName(
                                                                preset,
                                                            )}
                                                        </h3>
                                                        {raw && (
                                                            <span className='inline-flex items-center gap-0.5 px-1.5 py-0.5 rounded-full bg-green-500/10 border border-green-500/20 text-green-400 text-[9px] font-semibold'>
                                                                <SparklesIcon className='h-2.5 w-2.5' />
                                                                Raw
                                                            </span>
                                                        )}
                                                        {isPoorPerformancePreset(
                                                            preset,
                                                        ) &&
                                                            preset.fpsAvg !==
                                                                null && (
                                                                <span className='inline-flex items-center gap-0.5 px-1.5 py-0.5 rounded-full bg-red-500/10 border border-red-500/20 text-red-400 text-[9px] font-semibold'>
                                                                    ⚠ Slow
                                                                </span>
                                                            )}
                                                    </div>
                                                    <p className='text-xs text-text/50 mt-0.5'>
                                                        {preset.hardwareName}
                                                    </p>
                                                </div>
                                                <div className='flex items-center gap-2 text-xs text-text/60 shrink-0'>
                                                    {preset.youtubeVideoId && (
                                                        <svg
                                                            className='h-3 w-3 text-red-400 shrink-0'
                                                            viewBox='0 0 24 24'
                                                            fill='currentColor'
                                                        >
                                                            <path d='M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z' />
                                                        </svg>
                                                    )}
                                                    <span className='flex items-center gap-0.5'>
                                                        <ThumbsUpIcon className='h-3 w-3' />
                                                        {preset.upvotes}
                                                    </span>
                                                    <span className='flex items-center gap-0.5'>
                                                        <ThumbsDownIcon className='h-3 w-3' />
                                                        {preset.downvotes}
                                                    </span>
                                                </div>
                                            </div>

                                            {/* Settings count */}
                                            <div className='text-xs text-text/50'>
                                                {preset.settingsCount} settings
                                            </div>

                                            {/* FPS */}
                                            {preset.fpsAvg !== null && (
                                                <div
                                                    className={`text-sm tabular-nums ${fpsColor}`}
                                                >
                                                    <span className='font-semibold'>
                                                        {preset.fpsAvg}
                                                    </span>
                                                    <span className='text-text/40'>
                                                        {" "}
                                                        avg
                                                    </span>
                                                    {preset.fpsOnePercentLow !==
                                                        null && (
                                                        <span className='text-text/40'>
                                                            {" "}
                                                            ·{" "}
                                                            {
                                                                preset.fpsOnePercentLow
                                                            }{" "}
                                                            1% low
                                                        </span>
                                                    )}
                                                    {preset.fpsLow !== null &&
                                                        preset.fpsHigh !==
                                                            null &&
                                                        !preset.fpsOnePercentLow && (
                                                            <span className='text-text/40'>
                                                                {" "}
                                                                ({preset.fpsLow}
                                                                –
                                                                {preset.fpsHigh}
                                                                )
                                                            </span>
                                                        )}
                                                </div>
                                            )}

                                            {/* Power / Battery quick-look */}
                                            {(() => {
                                                const dev =
                                                    stats?.deviceBreakdown.find(
                                                        (d) =>
                                                            d.hardwareSlug ===
                                                            preset.hardwareSlug,
                                                    )
                                                const isHandheld =
                                                    dev?.deviceType ===
                                                    "handheld"
                                                const wh =
                                                    dev?.wattHours ?? null
                                                const tdp =
                                                    preset.tdpWatts ?? null
                                                const estHours =
                                                    wh && tdp && tdp > 0
                                                        ? wh / tdp
                                                        : null

                                                if (
                                                    !isHandheld ||
                                                    (!tdp && !wh)
                                                )
                                                    return null

                                                return (
                                                    <div className='text-[11px] text-text/50 flex items-center gap-1.5 flex-wrap'>
                                                        {tdp && (
                                                            <span>
                                                                ⚡{" "}
                                                                {Math.round(
                                                                    tdp,
                                                                )}
                                                                W
                                                            </span>
                                                        )}
                                                        {wh && (
                                                            <span>
                                                                🔋{" "}
                                                                {Math.round(wh)}
                                                                Wh
                                                            </span>
                                                        )}
                                                        {estHours !== null && (
                                                            <span>
                                                                ⏱ ~
                                                                {estHours.toFixed(
                                                                    1,
                                                                )}
                                                                h
                                                            </span>
                                                        )}
                                                    </div>
                                                )
                                            })()}

                                            {/* Technology tags */}
                                            <div className='flex flex-wrap items-center gap-1.5'>
                                                {preset.upscalerType &&
                                                    preset.upscalerType !==
                                                        "none" && (
                                                        <span className='px-1.5 py-0.5 rounded text-[10px] font-medium bg-purple-500/10 text-purple-400 border border-purple-500/20'>
                                                            {preset.upscalerType.toUpperCase()}
                                                            {preset.upscalerVersion
                                                                ? ` ${preset.upscalerVersion}`
                                                                : ""}
                                                        </span>
                                                    )}
                                                {preset.frameGenMethod &&
                                                    preset.frameGenMethod !==
                                                        "none" && (
                                                        <span
                                                            className={`px-1.5 py-0.5 rounded text-[10px] font-medium border ${
                                                                preset.frameGenMethod ===
                                                                "dlss_fg"
                                                                    ? "bg-blue-500/10 text-blue-400 border-blue-500/20"
                                                                    : "bg-orange-500/10 text-orange-400 border-orange-500/20"
                                                            }`}
                                                        >
                                                            {preset.frameGenMethod ===
                                                            "fsr_fg"
                                                                ? "FSR FG"
                                                                : preset.frameGenMethod ===
                                                                    "dlss_fg"
                                                                  ? "DLSS FG"
                                                                  : preset.frameGenMethod}
                                                        </span>
                                                    )}
                                            </div>

                                            {/* Proton + OS */}
                                            <div className='flex flex-wrap items-center gap-2 text-[10px] text-text/40'>
                                                {preset.protonVersion && (
                                                    <span>
                                                        Proton{" "}
                                                        {preset.protonVersion}
                                                    </span>
                                                )}
                                                {preset.osVersion && (
                                                    <span>
                                                        {preset.osVersion}
                                                    </span>
                                                )}
                                            </div>
                                        </motion.div>
                                    )
                                })}
                            </div>
                        )}
                    </div>
                </motion.div>

                {/* Section 5: Statistics Dashboard */}
                <motion.div
                    initial={{ opacity: 0, y: 12 }}
                    animate={{ opacity: 1, y: 0 }}
                    transition={{ duration: 0.4, delay: 0.25 }}
                    className='px-4 md:px-[10svw]'
                >
                    <div className='max-w-7xl mx-auto flex flex-col gap-6'>
                        {/* Row 1 — Featured */}
                        {filteredStats && (
                            <div className='flex flex-col lg:flex-row gap-4'>
                                <div className='flex-3 rounded-xl border border-border bg-text/3 p-4'>
                                    <h3 className='text-sm font-medium text-text/80 mb-2'>
                                        Historical Performance
                                    </h3>
                                    {filteredStats.historical.length > 0 ? (
                                        <HistoricalAreaChart
                                            data={filteredStats.historical}
                                        />
                                    ) : (
                                        <div className='h-70 flex items-center justify-center text-sm text-text/40'>
                                            No historical data
                                        </div>
                                    )}
                                </div>
                                <div className='flex-1 flex flex-col gap-3'>
                                    <StatCard
                                        label='Overall Avg FPS'
                                        value={
                                            filteredStats.summary.avgFps?.toFixed(
                                                1,
                                            ) ?? "—"
                                        }
                                        icon={TrendingUpIcon}
                                    />
                                    <StatCard
                                        label='Best Device'
                                        value={
                                            filteredStats.summary.bestDevice ??
                                            "—"
                                        }
                                        icon={Gamepad2Icon}
                                    />
                                    <StatCard
                                        label='Total Entries'
                                        value={String(
                                            filteredStats.summary.totalEntries,
                                        )}
                                        icon={DatabaseIcon}
                                    />
                                    {filteredStats.summary.avgStability !==
                                        null && (
                                        <StatCard
                                            label='Avg Stability'
                                            value={`${Math.round(filteredStats.summary.avgStability * 100)}%`}
                                            icon={GaugeIcon}
                                        />
                                    )}
                                </div>
                            </div>
                        )}

                        {/* Loading state */}
                        {loading && (
                            <div className='flex items-center justify-center py-12 text-sm text-text/40'>
                                <ClockIcon className='h-4 w-4 animate-spin mr-2' />
                                Loading statistics...
                            </div>
                        )}

                        {/* Row 2 — Upscaler Bar */}
                        {filteredStats &&
                            filteredStats.upscalerStats.length > 0 && (
                                <div className='rounded-xl border border-border bg-text/3 p-4'>
                                    <h3 className='text-sm font-medium text-text/80 mb-2'>
                                        Upscaler Performance
                                    </h3>
                                    <UpscalerBarChart
                                        data={filteredStats.upscalerStats}
                                    />
                                </div>
                            )}

                        {/* Row 3 — 3-column grid */}
                        {filteredStats && (
                            <div className='grid grid-cols-1 md:grid-cols-3 gap-4'>
                                {filteredStats.boxplot.length > 0 && (
                                    <div className='rounded-xl border border-border bg-text/3 p-4'>
                                        <h3 className='text-sm font-medium text-text/80 mb-2'>
                                            FPS Distribution
                                        </h3>
                                        <FpsBoxplot
                                            data={filteredStats.boxplot}
                                        />
                                    </div>
                                )}
                                {filteredStats.fpsRange.length > 0 && (
                                    <div className='rounded-xl border border-border bg-text/3 p-4'>
                                        <h3 className='text-sm font-medium text-text/80 mb-2'>
                                            FPS Range
                                        </h3>
                                        <FpsRangeChart
                                            data={filteredStats.fpsRange}
                                        />
                                    </div>
                                )}
                                {filteredStats.deviceBreakdown.length > 0 && (
                                    <div className='rounded-xl border border-border bg-text/3 p-4'>
                                        <h3 className='text-sm font-medium text-text/80 mb-2'>
                                            Device Breakdown
                                        </h3>
                                        <DeviceDonut
                                            data={filteredStats.deviceBreakdown}
                                        />
                                    </div>
                                )}
                            </div>
                        )}

                        {/* Row 4 — Performance Tiers + Stability Scatter */}
                        {filteredStats && (
                            <div className='grid grid-cols-1 lg:grid-cols-2 gap-4'>
                                {filteredStats.performanceTiers.length > 0 && (
                                    <div className='rounded-xl border border-border bg-text/3 p-4'>
                                        <h3 className='text-sm font-medium text-text/80 mb-2'>
                                            Performance Tiers
                                        </h3>
                                        <PerformanceTierChart
                                            data={
                                                filteredStats.performanceTiers
                                            }
                                        />
                                    </div>
                                )}
                                {filteredStats.stabilityScatter.length > 0 && (
                                    <div className='rounded-xl border border-border bg-text/3 p-4'>
                                        <h3 className='text-sm font-medium text-text/80 mb-2'>
                                            Avg FPS vs 1% Low (Stability)
                                        </h3>
                                        <StabilityScatterChart
                                            data={
                                                filteredStats.stabilityScatter
                                            }
                                            deviceNames={Object.fromEntries(
                                                filteredStats.deviceBreakdown.map(
                                                    (d) => [
                                                        d.hardwareSlug,
                                                        d.hardwareName,
                                                    ],
                                                ),
                                            )}
                                        />
                                    </div>
                                )}
                            </div>
                        )}

                        {/* Battery Life Estimates */}
                        {filteredStats &&
                            filteredStats.batteryLife &&
                            filteredStats.batteryLife.length > 0 && (
                                <div className='rounded-xl border border-border bg-text/3 p-4'>
                                    <h3 className='text-sm font-medium text-text/80 mb-2'>
                                        Battery Life Estimates
                                    </h3>
                                    <BatteryLifeChart
                                        data={filteredStats.batteryLife}
                                        deviceNames={Object.fromEntries(
                                            filteredStats.deviceBreakdown.map(
                                                (d) => [
                                                    d.hardwareSlug,
                                                    d.hardwareName,
                                                ],
                                            ),
                                        )}
                                    />
                                </div>
                            )}
                    </div>
                </motion.div>

                {/* Steam Reviews */}
                {game.steamAppId && (
                    <section className='space-y-4 px-4 md:px-[10svw]'>
                        <div className='max-w-7xl mx-auto'>
                            <SteamReviews
                                gameId={game.id}
                                steamAppId={game.steamAppId}
                            />
                        </div>
                    </section>
                )}

                {/* Section 6: Comments */}
                <motion.div
                    initial={{ opacity: 0, y: 12 }}
                    animate={{ opacity: 1, y: 0 }}
                    transition={{ duration: 0.4, delay: 0.3 }}
                    className='px-4 md:px-[10svw]'
                >
                    <div
                        className='max-w-7xl mx-auto'
                        data-gamepad-focusable
                    >
                        <CommentSection
                            gameId={gameId}
                            initialCount={counts.comments}
                        />
                    </div>
                </motion.div>

                {/* Mobile FAB for Add Benchmark */}
                {session && (
                    <Link
                        href={`/game/${game.id}/submit`}
                        className='fixed right-4 bottom-4 z-50 inline-flex items-center justify-center w-14 h-14 rounded-full bg-primary text-white shadow-lg hover:bg-primary/90 transition-colors cursor-pointer sm:hidden'
                        data-gamepad-focusable
                    >
                        <Plus className='h-6 w-6' />
                    </Link>
                )}
            </section>
            <AnimatePresence>
                {selectedPresetId &&
                    (() => {
                        const preset = filteredPresets.find(
                            (p) => p.id === selectedPresetId,
                        )
                        if (!preset) return null
                        return (
                            <PresetDetailModal
                                preset={preset}
                                gameId={gameId}
                                gameSource={game.source}
                                gameSteamAppId={game.steamAppId}
                                gameSlug={game.slug ?? null}
                                onClose={handlePresetClose}
                                onDelete={handleDeletePreset}
                                onReport={handleReportPreset}
                                hasReported={reportedPresets.has(preset.id)}
                            />
                        )
                    })()}
            </AnimatePresence>
        </>
    )
}

function Badge({
    icon: Icon,
    value,
    label,
}: {
    icon: React.ElementType
    value: number
    label: string
}) {
    return (
        <span className='inline-flex items-center gap-1 px-2 py-0.5 rounded-full bg-green-500/10 border border-green-500/20 text-green-400 text-[10px] font-semibold'>
            <Icon className='h-3 w-3' />
            {value} {label}
        </span>
    )
}

function StatCard({
    label,
    value,
    icon: Icon,
}: {
    label: string
    value: string
    icon: React.ElementType
}) {
    return (
        <div className='flex items-center gap-3 p-4 rounded-xl border border-border bg-text/3'>
            <div className='flex items-center justify-center h-9 w-9 rounded-lg bg-primary/10 text-primary'>
                <Icon className='h-4 w-4' />
            </div>
            <div className='flex flex-col'>
                <span className='text-xs text-text/50'>{label}</span>
                <span className='text-lg font-semibold tabular-nums'>
                    {value}
                </span>
            </div>
        </div>
    )
}

function FilterSelect({
    label,
    value,
    options,
    onChange,
}: {
    label: string
    value: string
    options: string[]
    onChange: (value: string) => void
}) {
    return (
        <div className='flex items-center gap-1.5'>
            <label className='text-xs text-text/50 shrink-0'>{label}</label>
            <select
                value={value}
                onChange={(e) => onChange(e.target.value)}
                className='text-xs bg-background border border-border rounded-md px-2 py-1 text-text/80 focus:outline-none focus:border-primary min-w-25'
                data-gamepad-focusable
            >
                {options.map((opt) => (
                    <option
                        key={opt}
                        value={opt}
                    >
                        {opt === "all" ? "Any" : opt}
                    </option>
                ))}
            </select>
        </div>
    )
}