"use client"

import { AnimatePresence, motion } from "motion/react"
import { useState, useEffect } from "react"
import Link from "next/link"
import Image from "next/image"
import {
    Gamepad2Icon,
    SearchIcon,
    TrendingUpIcon,
    GaugeIcon,
    ClockIcon,
} from "lucide-react"
import { useRouter } from "next/navigation"
import { PlayabilityBadge } from "@/components/playability-badge"
import { cn } from "@/lib/utils"

interface GameCard {
    id: string
    title: string
    capsule_image: string | null
    header_image: string | null
    playability_status?: string | null
    activity_score?: number
    benchmark_count?: number
    comment_count?: number
    upvote_count?: number
    avg_fps?: number
    report_count?: number
    release_date?: string | null
    created_at?: string | null
}

interface SectionData {
    recentBenchmarks: GameCard[]
    trending: GameCard[]
    mostTested: GameCard[]
}

function SkeletonSections() {
    return (
        <>
            {[1, 2, 3].map((i) => (
                <div
                    key={i}
                    className='space-y-3'
                >
                    <div className='h-5 w-48 bg-text/5 rounded animate-pulse' />
                    <div className='flex gap-3 overflow-x-auto pb-2'>
                        {[1, 2, 3, 4].map((j) => (
                            <div
                                key={j}
                                className='shrink-0 w-36 sm:w-44 rounded-xl bg-text/3 border border-border animate-pulse'
                            >
                                <div className='aspect-[2/3] bg-text/5 rounded-t-xl' />
                                <div className='p-3 space-y-2'>
                                    <div className='h-3 bg-text/5 rounded w-3/4' />
                                    <div className='h-2 bg-text/5 rounded w-1/2' />
                                </div>
                            </div>
                        ))}
                    </div>
                </div>
            ))}
        </>
    )
}

function GameSection({
    title,
    icon: Icon,
    games,
    statKey,
    statLabel,
    statFormatter,
    accentColor = "text-text/50",
    muted = false,
}: {
    title: string
    icon: React.ElementType
    games: GameCard[]
    statKey: string
    statLabel: string
    statFormatter?: (v: unknown) => string
    accentColor?: string
    muted?: boolean
}) {
    const router = useRouter()

    const formatStat = (v: unknown): string => {
        if (statFormatter) return statFormatter(v)
        if (typeof v === "number") return `${Math.round(v)} ${statLabel}`
        return `${v} ${statLabel}`
    }

    return (
        <motion.section
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true, margin: "-50px" }}
            transition={{ duration: 0.4 }}
            className={muted ? "opacity-70" : ""}
        >
            <div className='flex items-center gap-2 mb-4'>
                <div className='border-l-2 border-primary pl-3'>
                    <div className='flex items-center gap-2'>
                        <Icon className={`h-4 w-4 ${accentColor}`} />
                        <h2 className='text-sm font-semibold text-text/80'>
                            {title}
                        </h2>
                    </div>
                </div>
            </div>

            <div className='flex gap-3 overflow-x-auto pb-2 -mx-1 px-1 scrollbar-thin'>
                {games.map((game, idx) => (
                    <motion.div
                        key={game.id}
                        initial={{ opacity: 0, y: 10 }}
                        whileInView={{ opacity: 1, y: 0 }}
                        viewport={{ once: true }}
                        transition={{ duration: 0.3, delay: idx * 0.05 }}
                        whileHover={{ scale: 1.03 }}
                        whileTap={{ scale: 0.98 }}
                        className='group shrink-0 w-36 sm:w-44 rounded-xl bg-text/3 border border-border hover:border-text/30 hover:bg-text/6 transition-colors cursor-pointer overflow-hidden'
                        onClick={() => router.push(`/game/${game.id}?sync=1`)}
                    >
                        <div className='relative aspect-2/3 bg-text/10 overflow-hidden'>
                            {game.capsule_image ? (
                                <Image
                                    src={game.capsule_image}
                                    alt={game.title}
                                    fill
                                    className='object-cover group-hover:scale-105 transition-transform duration-300'
                                    sizes='(max-width: 640px) 144px, 176px'
                                />
                            ) : (
                                <div className='w-full h-full flex items-center justify-center'>
                                    <Gamepad2Icon className='h-8 w-8 text-text/15' />
                                </div>
                            )}
                            {/* Playability badge pinned at bottom of image */}
                            {game.playability_status &&
                                game.playability_status !== "unknown" && (
                                    <div className='absolute bottom-1.5 left-1.5 right-1.5'>
                                        <PlayabilityBadge
                                            status={game.playability_status as "great" | "playable" | "needs_tweaks" | "unplayable" | "unknown" | null}
                                            compact
                                            showLabel
                                            className='text-[10px] px-1.5 py-0.5 w-full justify-center'
                                        />
                                    </div>
                                )}
                        </div>

                        <div className='p-2.5 space-y-1.5'>
                            <h3 className='text-xs font-semibold text-text line-clamp-2 leading-tight group-hover:text-primary transition-colors'>
                                {game.title}
                            </h3>

                            {/* Performance badges */}
                            {game.avg_fps !== undefined && game.avg_fps !== null && (
                                <div className='flex flex-wrap gap-1'>
                                    {game.avg_fps >= 60 ? (
                                        <span className='inline-flex items-center gap-1 px-1.5 py-0.5 rounded-full bg-green-500/10 border border-green-500/20 text-green-400 text-[9px] font-semibold leading-tight'>
                                            ⚡ RAW PERFORMER
                                        </span>
                                    ) : game.avg_fps < 30 ? (
                                        <span className='inline-flex items-center gap-1 px-1.5 py-0.5 rounded-full bg-red-500/10 border border-red-500/20 text-red-400 text-[9px] font-semibold leading-tight'>
                                            ⚠ POOR PERFORMANCE
                                        </span>
                                    ) : null}
                                    <span className='inline-flex items-center gap-0.5 text-[9px] text-text/50 font-medium'>
                                        {Math.round(game.avg_fps)}fps
                                    </span>
                                </div>
                            )}

                            <p
                                className={`text-[10px] ${accentColor} font-medium`}
                            >
                                {formatStat(
                                    (
                                        game as unknown as Record<
                                            string,
                                            unknown
                                        >
                                    )[statKey],
                                )}
                            </p>
                        </div>
                    </motion.div>
                ))}
            </div>
        </motion.section>
    )
}

export default function Landing() {
    const router = useRouter()
    const words = ["benchmarks", "settings", "reviews"]

    const [currentWord, setCurrentWord] = useState(0)
    const [searchQuery, setSearchQuery] = useState("")

    // Landing section state
    const [sections, setSections] = useState<SectionData>({
        recentBenchmarks: [],
        trending: [],
        mostTested: [],
    })
    const [sectionsLoading, setSectionsLoading] = useState(true)

    // Animated words cycle — use useEffect with proper cleanup
    useEffect(() => {
        const interval = setInterval(() => {
            setCurrentWord((prev) => (prev + 1) % words.length)
        }, 2000)
        return () => clearInterval(interval)
    }, [words.length])

    // Fetch all 4 sections in parallel on mount
    useEffect(() => {
        let cancelled = false
        async function fetchSections() {
            try {
                const [recentBenchmarks, trending, mostTested] =
                    await Promise.all([
                        fetch("/api/dashboard/recent-benchmarks").then((r) =>
                            r.ok ? r.json() : [],
                        ),
                        fetch("/api/dashboard/trending").then((r) =>
                            r.ok ? r.json() : [],
                        ),
                        fetch("/api/dashboard/most-tested").then((r) =>
                            r.ok ? r.json() : [],
                        ),
                    ])
                if (!cancelled) {
                    setSections({
                        recentBenchmarks: Array.isArray(recentBenchmarks) ? recentBenchmarks : [],
                        trending: Array.isArray(trending) ? trending : [],
                        mostTested: Array.isArray(mostTested) ? mostTested : [],
                    })
                }
            } catch {
                // Silently fail — sections are best-effort
            } finally {
                if (!cancelled) setSectionsLoading(false)
            }
        }
        fetchSections()
        return () => {
            cancelled = true
        }
    }, [])

    const handleSearchSubmit = () => {
        if (searchQuery.trim()) {
            sessionStorage.setItem("focusSearch", "true")
            router.push(`/search?q=${encodeURIComponent(searchQuery.trim())}`)
        }
    }

    const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
        if (e.key === "Enter") {
            handleSearchSubmit()
        }
    }

    return (
        <>
            {/* ── Hero Section ── */}
            <section
                id='hero'
                className='w-full min-h-[70svh] mt-[10svh] flex flex-col items-center justify-center relative p-4'
            >
                <motion.h1
                    initial={{ opacity: 0 }}
                    animate={{ opacity: 1 }}
                    className='font-bold text-3xl md:text-5xl text-center flex flex-row gap-2 items-center justify-center'
                >
                    DeckyVault
                    <span className='border border-border text-xs md:text-base px-2 py-1 rounded-md bg-primary/10 font-medium'>
                        beta
                    </span>
                </motion.h1>
                <motion.h2
                    layout
                    initial={{
                        opacity: 0,
                    }}
                    animate={{ opacity: 0.8, transition: { delay: 0.5 } }}
                    className='mt-4 flex flex-row flex-wrap items-center justify-center gap-x-1 md:gap-x-2 text-base md:text-xl'
                >
                    {"Find your game".split(" ").map((word, index) => (
                        <motion.span
                            key={index}
                            className='text-center'
                        >
                            {word}
                        </motion.span>
                    ))}
                    <AnimatePresence
                        mode='wait'
                        initial={false}
                    >
                        <motion.span
                            key={currentWord}
                            initial={{ opacity: 0 }}
                            animate={{ opacity: 1 }}
                            exit={{ opacity: 0 }}
                            className='text-primary font-bold'
                        >
                            {words[currentWord]}
                        </motion.span>
                    </AnimatePresence>
                </motion.h2>
                <AnimatePresence>
                    <motion.label
                        key='search-bar'
                        layoutId='search-bar'
                        initial={{ opacity: 0 }}
                        animate={{ opacity: 1 }}
                        className='mt-8 flex flex-row items-center gap-4 bg-text/5 px-2 py-2 rounded-md border border-border placeholder:text-text/60 group hover:border-border-active transition-colors focus-within:border-primary/80! focus-within:ring-2 focus-within:ring-primary/50! focus-within:ring-offset-2 focus-within:ring-offset-background cursor-text w-full max-w-md'
                    >
                        <Gamepad2Icon className='h-6 w-6 group-focus-within:stroke-accent transition-colors shrink-0' />
                        <input
                            type='text'
                            placeholder='search by game or appid...'
                            value={searchQuery}
                            onChange={(e) => setSearchQuery(e.target.value)}
                            onKeyDown={handleKeyDown}
                            className='flex-1 outline-none bg-transparent text-xl min-w-0'
                        />
                        <motion.button
                            onClick={handleSearchSubmit}
                            whileTap={{ scale: 0.95 }}
                            className='text-sm flex flex-row gap-1 items-center bg-text text-background px-2 py-1 rounded-sm cursor-pointer hover:opacity-60 transition-opacity shrink-0'
                        >
                            <SearchIcon className='h-3 w-3' />
                            search
                        </motion.button>
                    </motion.label>
                </AnimatePresence>
                <motion.small
                    initial={{ opacity: 0 }}
                    animate={{ opacity: 1, transition: { delay: 1.5 } }}
                    className='mt-8 text-center text-xs flex flex-row gap-1'
                >
                    <Link
                        title='Visit our Github Repository'
                        href='/updates'
                        className='text-accent opacity-60 hover:opacity-100 transition-opacity cursor-pointer'
                    >
                        See what{"'"}s new.
                    </Link>
                </motion.small>
                <motion.small
                    initial={{ opacity: 0 }}
                    animate={{ opacity: 1, transition: { delay: 1.5 } }}
                    className='mt-2 text-center text-xs flex flex-row gap-1'
                >
                    <span className='opacity-60'>2026 DeckyVault.</span>
                    <Link
                        title='Visit our Github Repository'
                        href='https://github.com/AdrianBonpin/deckyvault'
                        className='text-accent opacity-60 hover:opacity-100 transition-opacity cursor-pointer'
                    >
                        Github.
                    </Link>
                    <span className='opacity-60'>
                        v{process.env.NEXT_PUBLIC_APP_VERSION}
                    </span>
                </motion.small>
            </section>

            {/* ── Landing Sections ── */}
            <div className='w-full max-w-7xl mx-auto px-4 pb-12 space-y-10'>
                {sectionsLoading ? (
                    <SkeletonSections />
                ) : (
                    <>
                        {sections.recentBenchmarks.length > 0 && (
                            <GameSection
                                title='Recently Added Benchmarks'
                                icon={ClockIcon}
                                games={sections.recentBenchmarks}
                                statKey='benchmark_count'
                                statLabel='benchmarks'
                                accentColor='text-violet-400'
                            />
                        )}
                        {sections.trending.length > 0 && (
                            <GameSection
                                title='Trending This Week'
                                icon={TrendingUpIcon}
                                games={sections.trending}
                                statKey='benchmark_count'
                                statLabel='benchmarks this week'
                                accentColor='text-orange-400'
                            />
                        )}
                        {sections.mostTested.length > 0 && (
                            <GameSection
                                title='Most Tested Games'
                                icon={GaugeIcon}
                                games={sections.mostTested}
                                statKey='benchmark_count'
                                statLabel='benchmarks'
                                accentColor='text-blue-400'
                            />
                        )}
                    </>
                )}
            </div>

            <script
                type='application/ld+json'
                dangerouslySetInnerHTML={{
                    __html: JSON.stringify({
                        "@context": "https://schema.org",
                        "@type": "WebSite",
                        name: "DeckyVault",
                        url: "https://deckyvault.xyz",
                        description:
                            "Steam Deck benchmarks, settings, and performance guides",
                        potentialAction: {
                            "@type": "SearchAction",
                            target: "https://deckyvault.xyz/search?q={search_term_string}",
                            "query-input": "required name=search_term_string",
                        },
                    }),
                }}
            />
        </>
    )
}