ToBePlayed-Frontend/src/pages/GameLibrary.jsx

import {useCallback, useEffect, useState} from 'react';
import {useNavigate, useSearchParams} from 'react-router-dom';
import {useTranslation} from 'react-i18next';
import useLibrarySync from '../hooks/useLibrarySync.js';
import SyncStatusBadge from '../components/SyncStatusBadge.jsx';

const PAGE_SIZES = [20, 40, 80];
const DEFAULT_SIZE = 20;

const iconUrl = (appid, hash) =>
    hash
        ? `https://cdn.cloudflare.steamstatic.com/steamcommunity/public/images/apps/${appid}/${hash}.jpg`
        : null;

const formatPlaytime = (minutes) => {
    if (!minutes || minutes <= 0) return '0h';
    const hours = minutes / 60;
    return hours >= 10 ? `${Math.round(hours)}h` : `${hours.toFixed(1)}h`;
};

export default function GameLibrary() {
    const {t} = useTranslation();
    const navigate = useNavigate();
    const [searchParams, setSearchParams] = useSearchParams();

    const page = Math.max(0, parseInt(searchParams.get('page') ?? '0', 10) || 0);
    const sizeParam = parseInt(searchParams.get('size') ?? String(DEFAULT_SIZE), 10);
    const size = PAGE_SIZES.includes(sizeParam) ? sizeParam : DEFAULT_SIZE;

    const [data, setData] = useState({content: [], page: 0, size, totalElements: 0, totalPages: 0});
    const [isLoading, setIsLoading] = useState(true);
    const [error, setError] = useState(null);

    const load = useCallback(async () => {
        const token = localStorage.getItem('tbp_jwt');
        if (!token) {
            navigate('/login');
            return;
        }
        setIsLoading(true);
        setError(null);
        try {
            const url = `${import.meta.env.VITE_CORE_API_URL}/api/library/games?page=${page}&size=${size}`;
            const response = await fetch(url, {
                headers: {
                    'Authorization': `Bearer ${token}`,
                    'Content-Type': 'application/json',
                },
            });

            if (response.status === 401) {
                localStorage.removeItem('tbp_jwt');
                navigate('/login');
                return;
            }

            if (!response.ok) {
                setError(t('LIBRARY.ERROR_LOAD'));
                return;
            }

            const json = await response.json();
            setData(json);
        } catch (err) {
            console.error('Library load error:', err);
            setError(t('INFO.ERROR.NETWORK_FAILURE'));
        } finally {
            setIsLoading(false);
        }
    }, [navigate, page, size, t]);

    useEffect(() => {
        load();
    }, [load]);

    const expectInitialSync = !isLoading && !error && data.totalElements === 0;
    const sync = useLibrarySync({
        enabled: true,
        expectInitialSync,
        onComplete: load,
    });

    const updateParams = (next) => {
        const params = new URLSearchParams(searchParams);
        Object.entries(next).forEach(([k, v]) => params.set(k, String(v)));
        setSearchParams(params);
    };

    const onSizeChange = (event) => {
        updateParams({size: event.target.value, page: 0});
    };

    const goToPage = (target) => {
        if (target < 0 || target >= data.totalPages) return;
        updateParams({page: target});
    };

    return (
        <div className="min-h-screen bg-slate-50 dark:bg-slate-900 p-8">
            <div className="max-w-4xl mx-auto space-y-6">
                <div className="flex items-center justify-between flex-wrap gap-4">
                    <div className="flex flex-col gap-1">
                        <h1 className="text-2xl font-bold text-slate-900 dark:text-white">
                            {t('LIBRARY.TITLE')}
                        </h1>
                        <SyncStatusBadge
                            status={sync.status}
                            lastSyncedAt={sync.lastSyncedAt}
                            isRunning={sync.isRunning}
                        />
                    </div>
                    <div className="flex items-center gap-2 text-sm text-slate-600 dark:text-slate-300">
                        <label htmlFor="pageSize">{t('LIBRARY.PER_PAGE')}</label>
                        <select
                            id="pageSize"
                            value={size}
                            onChange={onSizeChange}
                            className="px-3 py-1 border border-slate-300 dark:border-slate-600 rounded-lg bg-white dark:bg-slate-800 text-slate-900 dark:text-white"
                        >
                            {PAGE_SIZES.map((n) => (
                                <option key={n} value={n}>{n}</option>
                            ))}
                        </select>
                    </div>
                </div>

                {isLoading && (
                    <div className="text-center text-slate-600 dark:text-slate-300 py-12">
                        {t('LIBRARY.LOADING')}
                    </div>
                )}

                {error && (
                    <div className="text-center text-red-500 py-12">{error}</div>
                )}

                {!isLoading && !error && data.content.length === 0 && (
                    <div className="text-center text-slate-500 dark:text-slate-400 py-12">
                        {sync.isRunning ? t('LIBRARY.SYNCING_FIRST_TIME') : t('LIBRARY.EMPTY')}
                    </div>
                )}

                {!isLoading && !error && data.content.length > 0 && (
                    <ul className="bg-white dark:bg-slate-800 rounded-xl shadow-sm border border-slate-200 dark:border-slate-700 divide-y divide-slate-200 dark:divide-slate-700">
                        {data.content.map((g) => {
                            const icon = iconUrl(g.appid, g.imgIconUrl);
                            return (
                                <li key={g.appid} className="flex items-center gap-4 px-4 py-3">
                                    {icon ? (
                                        <img
                                            src={icon}
                                            alt=""
                                            className="w-8 h-8 rounded"
                                            loading="lazy"
                                            onError={(e) => { e.currentTarget.style.visibility = 'hidden'; }}
                                        />
                                    ) : (
                                        <div className="w-8 h-8 rounded bg-slate-200 dark:bg-slate-700"/>
                                    )}
                                    <span className="flex-1 text-slate-900 dark:text-white truncate">
                                        {g.name ?? `App ${g.appid}`}
                                    </span>
                                    <span className="text-sm text-slate-500 dark:text-slate-400 tabular-nums">
                                        {formatPlaytime(g.playtimeMinutes)}
                                    </span>
                                </li>
                            );
                        })}
                    </ul>
                )}

                {!isLoading && !error && data.totalPages > 1 && (
                    <div className="flex items-center justify-between text-sm text-slate-600 dark:text-slate-300">
                        <button
                            onClick={() => goToPage(page - 1)}
                            disabled={page <= 0}
                            className="px-4 py-2 rounded-lg bg-white dark:bg-slate-800 border border-slate-300 dark:border-slate-600 disabled:opacity-40 hover:border-blue-500 disabled:hover:border-slate-300 dark:disabled:hover:border-slate-600 transition-colors"
                        >
                            {t('LIBRARY.PREV')}
                        </button>
                        <span>
                            {t('LIBRARY.PAGE_OF', {current: data.page + 1, total: data.totalPages})}
                            {' · '}
                            {data.totalElements} {t('LIBRARY.GAMES')}
                        </span>
                        <button
                            onClick={() => goToPage(page + 1)}
                            disabled={page >= data.totalPages - 1}
                            className="px-4 py-2 rounded-lg bg-white dark:bg-slate-800 border border-slate-300 dark:border-slate-600 disabled:opacity-40 hover:border-blue-500 disabled:hover:border-slate-300 dark:disabled:hover:border-slate-600 transition-colors"
                        >
                            {t('LIBRARY.NEXT')}
                        </button>
                    </div>
                )}
            </div>
        </div>
    );
}