ToBePlayed-Frontend/src/pages/LandingPage.jsx

import {useState} from 'react';
import {useTranslation} from 'react-i18next';
import {Link} from 'react-router-dom';
import {
    Archive, ArrowRight, Blocks, Clock, Gamepad2, Library, Link2, Sparkles, Trophy, Users,
} from 'lucide-react';

import {Badge} from '@/components/ui/badge';
import {Button} from '@/components/ui/button';
import {Card} from '@/components/ui/card';
import {Skeleton} from '@/components/ui/skeleton';
import GameCover from '../components/GameCover.jsx';
import FitText from '../components/FitText.jsx';
import Logo from '../components/Logo.jsx';
import StatCard from '../components/StatCard.jsx';
import PeopleDialog from '../components/people/PeopleDialog.jsx';
import {YearBars} from '../components/stats/FinishedStats.jsx';
import {TagBars} from '../components/stats/TasteStats.jsx';
import {StatDrillProvider, useStatDrill, useTagDrill} from '../components/stats/StatDrill.jsx';
import useSession from '../hooks/useSession.js';
import {fetchUsers} from '../utils/people.js';
import {genreKey} from '../utils/stats.js';

import usePublicStats from '../hooks/usePublicStats.js';

function RankedGames({title, games, formatValue, drillKey}) {
    const {t} = useTranslation();
    const drill = useStatDrill();
    return (
        <Card className="gap-0 py-0">
            <h3 className="flex items-center gap-2 border-b px-5 py-4 font-semibold">
                <Trophy className="size-4 text-amber-500"/>
                {title}
            </h3>
            <ol className="divide-y">
                {games.map((g, idx) => (
                    <li key={g.appid} className="flex items-center gap-3 px-5 py-3">
                        <span className="w-4 text-right text-sm font-semibold text-muted-foreground tabular-nums">{idx + 1}</span>
                        <GameCover appid={g.appid} imageUrl={g.imageUrl} className="w-16 shrink-0"/>
                        <GameName game={g}/>
                        <span className="text-sm text-muted-foreground tabular-nums">{formatValue(g.value ?? 0)}</span>
                    </li>
                ))}
            </ol>
            {drill && (
                <Button variant="ghost" className="m-2 self-start max-sm:min-h-11"
                        onClick={() => drill.open(title, {key: drillKey})}>
                    {t('STATS.DRILL.SHOW_ALL')}
                </Button>
            )}
        </Card>
    );
}

function GameName({game}) {
    return (
        <span className="@container min-w-0 flex-1 font-medium">
            <FitText text={game.name ?? `App ${game.appid}`}/>
        </span>
    );
}

function CommunityBars({core}) {
    const {t} = useTranslation();
    const drill = useStatDrill();
    const select = useTagDrill();
    const genreLabel = (name) => t(`STATS.GENRE.${genreKey(name)}`, {defaultValue: name});
    return (
        <div className="grid grid-cols-1 gap-6 md:grid-cols-3">
            {core?.gamesPerPlatform?.length > 0 && (
                <BarsCard title={t('LANDING.PLATFORMS')}>
                    <TagBars tags={core.gamesPerPlatform} onSelect={select('PLATFORM')}/>
                </BarsCard>
            )}
            {core?.topGenres?.length > 0 && (
                <BarsCard title={t('LANDING.TOP_GENRES')}>
                    <TagBars tags={core.topGenres} label={genreLabel} onSelect={select('GENRE')}/>
                </BarsCard>
            )}
            {core?.finishedPerYear?.length > 0 && (
                <BarsCard title={t('LANDING.FINISHED_PER_YEAR')}>
                    <YearBars perYear={core.finishedPerYear}
                              onSelect={drill && ((year) => drill.open(`${t('LANDING.FINISHED_PER_YEAR')}: ${year}`, {key: 'FINISHED_YEAR', arg: year}))}/>
                </BarsCard>
            )}
        </div>
    );
}

function BarsCard({title, children}) {
    return (
        <Card className="gap-0 py-0">
            <h3 className="flex items-center gap-2 border-b px-5 py-4 font-semibold">{title}</h3>
            <div className="px-5 py-4">{children}</div>
        </Card>
    );
}

export default function LandingPage() {
    const {t, i18n} = useTranslation();
    const {data, isLoading} = usePublicStats();
    const {active} = useSession();
    const [people, setPeople] = useState(null);

    const auth = data.auth;
    const core = data.core;

    const stats = [
        [t('LANDING.TOTAL_USERS'), auth?.totalUsers, Users, undefined, undefined, 'TOTAL_USERS'],
        [t('LANDING.STEAM_LINKED'), auth?.usersWithSteamLinked, Link2, undefined, undefined, 'STEAM_LINKED'],
        [t('LANDING.TOTAL_GAMES'), core?.totalLibraryEntries, Gamepad2, undefined, 'ENTRIES'],
        [t('LANDING.GAMES_PLAYED'), core?.totalGamesPlayed, Sparkles, undefined, 'PLAYED'],
        [t('LANDING.DISTINCT_GAMES'), core?.totalDistinctGames, Blocks, undefined, 'OWNED'],
        [t('LANDING.TOTAL_PLAYTIME_DAYS'), core?.totalPlaytimeDays, Clock, ` ${t('LANDING.DAYS_SUFFIX')}`],
        [t('LANDING.BIGGEST_LIBRARY'), core?.biggestLibrary, Library],
        [t('LANDING.BIGGEST_BACKLOG'), core?.biggestBacklog, Archive],
    ];

    return (
        <StatDrillProvider source="community">
            <div className="grow">
                <section className="relative overflow-hidden border-b">
                    <div className="pointer-events-none absolute inset-0 bg-gradient-to-b from-primary/15 via-primary/5 to-transparent"/>
                    <div className="relative mx-auto max-w-3xl px-4 py-20 text-center md:py-28">
                        <Badge variant="outline" className="mb-6 gap-1.5 bg-background/60">
                            <span className="flex"><Logo className="h-4 w-auto"/></span> ToBePlayed
                        </Badge>
                        <h1 className="text-4xl font-bold tracking-tight md:text-6xl">{t('MAIN.WELCOME')}</h1>
                        <p className="mx-auto mt-6 max-w-2xl text-lg text-muted-foreground">{t('MAIN.DESCRIPTION')}</p>
                        <Button asChild size="lg" className="mt-10">
                            {active ? (
                                <Link to="/dashboard">{t('NAV.TO_DASHBOARD')}<ArrowRight/></Link>
                            ) : (
                                <Link to="/login">{t('MAIN.GET_STARTED')}<ArrowRight/></Link>
                            )}
                        </Button>
                    </div>
                </section>

                <section className="mx-auto w-full max-w-5xl space-y-8 px-4 py-12 md:px-8 md:py-16">
                    <h2 className="text-center text-2xl font-bold tracking-tight">{t('LANDING.STATS_TITLE')}</h2>

                    <div className="grid grid-cols-2 gap-4 md:grid-cols-4">
                        {isLoading
                            ? stats.map(([label]) => <Skeleton key={label} className="h-36 rounded-xl"/>)
                            : stats.map(([label, value, icon, suffix, key, usersKey]) => (
                                <StatCard key={label} label={label} value={value ?? 0} icon={icon} suffix={suffix}
                                          drill={key && {params: {key}}}
                                          onClick={active && usersKey && value > 0
                                              ? () => setPeople({title: label, key: usersKey}) : undefined}/>
                            ))}
                    </div>

                    <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
                        {core?.topPlayedGames?.length > 0 && (
                            <RankedGames
                                title={t('LANDING.TOP_PLAYED')}
                                games={core.topPlayedGames}
                                formatValue={(minutes) => `${Math.round(minutes / 60).toLocaleString(i18n.language)}h`}
                                drillKey="MOST_PLAYED"
                            />
                        )}
                        {core?.topOwnedGames?.length > 0 && (
                            <RankedGames
                                title={t('LANDING.TOP_OWNED')}
                                games={core.topOwnedGames}
                                formatValue={(count) => count.toLocaleString(i18n.language)}
                                drillKey="OWNED"
                            />
                        )}
                    </div>

                    <CommunityBars core={core}/>
                </section>
            </div>
            {people && (
                <PeopleDialog title={people.title} onClose={() => setPeople(null)}
                              load={(page) => fetchUsers({key: people.key, page})}/>
            )}
        </StatDrillProvider>
    );
}