ToBePlayed-Frontend/src/components/ManualGameCard.jsx

import {useState} from 'react';
import {useNavigate} from 'react-router-dom';
import {useTranslation} from 'react-i18next';
import {toast} from 'sonner';
import {Hand, Loader2, Trash2} from 'lucide-react';

import {Button} from '@/components/ui/button';
import {Card} from '@/components/ui/card';
import {Input} from '@/components/ui/input';
import {Label} from '@/components/ui/label';
import {hoursToMinutes, removeGame, restoreGame, toHours, updateManualGame} from '../utils/manualGames.js';
import {MAX_PLATFORM_LENGTH} from '../utils/limits.js';
import useUnsavedChanges, {discardChanges} from '../hooks/useUnsavedChanges.js';

const UNDO_MS = 8000;

/**
 * Platform and hours of a game added by hand, and removing it. Steam games get both from the sync.
 *
 * @param onSaved gets the saved platform and playtimeMinutes
 */
export default function ManualGameCard({game, onSaved}) {
    const {t} = useTranslation();
    const navigate = useNavigate();
    const [platform, setPlatform] = useState(game.platform ?? '');
    const [hours, setHours] = useState(toHours(game.playtimeMinutes));
    const [busy, setBusy] = useState(false);
    const [confirmRemove, setConfirmRemove] = useState(false);

    // PlayStation owns the playtime of its rows: Core ignores a value sent for one.
    const psn = game.source === 'PSN';
    const playtimeMinutes = psn ? game.playtimeMinutes : hoursToMinutes(hours);
    const dirty = platform.trim() !== (game.platform ?? '') || playtimeMinutes !== game.playtimeMinutes;
    useUnsavedChanges(dirty);

    const run = async (request, onOk) => {
        setBusy(true);
        try {
            const response = await request();
            if (response.status === 401) return;
            if (!response.ok) {
                toast.error(t('BACKLOG.SAVE_FAILED'));
                return;
            }
            onOk();
        } catch (err) {
            console.error('manual game error:', err);
            toast.error(t('INFO.ERROR.NETWORK_FAILURE'));
        } finally {
            setBusy(false);
        }
    };

    const save = () => run(() => updateManualGame(game.appid, {platform: platform.trim(), playtimeMinutes}), () => {
        onSaved({platform: platform.trim(), playtimeMinutes});
        toast.success(t('BACKLOG.SAVED'));
    });

    const undoRemove = () => run(() => restoreGame(game.appid), () => {
        toast.success(t('REMOVED_GAMES.RESTORED'));
        navigate(`/library/${game.appid}`);
    });

    const remove = () => run(() => removeGame(game.appid), () => {
        toast.success(t('MANUAL_GAME.REMOVED'), {
            duration: UNDO_MS,
            action: {label: t('MANUAL_GAME.UNDO'), onClick: undoRemove},
        });
        // The game is gone, so are its unsaved edits on this page.
        discardChanges();
        navigate('/library', {replace: true});
    });

    return (
        <Card className="p-6 gap-5">
            <h2 className="flex items-center gap-2 text-lg font-semibold">
                <Hand className="size-4 text-primary"/>
                {t('MANUAL_GAME.TITLE')}
            </h2>
            {!psn && <p className="text-sm text-muted-foreground">{t('MANUAL_GAME.HINT')}</p>}

            <div className="grid gap-5 sm:grid-cols-2">
                <div className="space-y-2">
                    <Label htmlFor="manual-platform">{t('MANUAL_GAME.PLATFORM')}</Label>
                    <Input id="manual-platform" value={platform} maxLength={MAX_PLATFORM_LENGTH}
                           onChange={(e) => setPlatform(e.target.value)}/>
                </div>
                {!psn && (
                    <div className="space-y-2">
                        <Label htmlFor="manual-hours">{t('MANUAL_GAME.HOURS')}</Label>
                        <Input id="manual-hours" type="number" min="0" step="0.5" inputMode="decimal" value={hours}
                               onChange={(e) => setHours(e.target.value)}/>
                    </div>
                )}
            </div>

            <div className="flex flex-wrap items-center justify-between gap-3">
                {confirmRemove ? (
                    <div className="flex flex-wrap items-center gap-2">
                        <span className="text-sm">{t('MANUAL_GAME.REMOVE_CONFIRM')}</span>
                        <Button variant="destructive" size="sm" onClick={remove} disabled={busy}>
                            <Trash2/>{t('MANUAL_GAME.REMOVE_YES')}
                        </Button>
                        <Button variant="ghost" size="sm" onClick={() => setConfirmRemove(false)} disabled={busy}>
                            {t('MANUAL_GAME.REMOVE_NO')}
                        </Button>
                    </div>
                ) : (
                    <Button variant="outline" size="sm" onClick={() => setConfirmRemove(true)} disabled={busy}>
                        <Trash2/>{t('MANUAL_GAME.REMOVE')}
                    </Button>
                )}
                <Button onClick={save} disabled={busy || !dirty || !platform.trim()}>
                    {busy && <Loader2 className="animate-spin"/>}
                    {t('BACKLOG.SAVE')}
                </Button>
            </div>
        </Card>
    );
}