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 useSessionExpired from '../hooks/useSessionExpired.js';
import {hoursToMinutes, removeGame, updateManualGame} from '../utils/manualGames.js';

// Two decimals: then hoursToMinutes gives back the same minute, so an unchanged form is not dirty.
const toHours = (minutes) => (minutes > 0 ? String(Math.round((minutes / 60) * 100) / 100) : '');

/**
 * 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 expireSession = useSessionExpired();
    const [platform, setPlatform] = useState(game.platform ?? '');
    const [hours, setHours] = useState(toHours(game.playtimeMinutes));
    const [busy, setBusy] = useState(false);
    const [confirmRemove, setConfirmRemove] = useState(false);

    const playtimeMinutes = hoursToMinutes(hours);
    const dirty = platform.trim() !== (game.platform ?? '') || playtimeMinutes !== game.playtimeMinutes;

    const run = async (request, onOk) => {
        setBusy(true);
        try {
            const response = await request();
            if (response.status === 401) {
                expireSession();
                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 remove = () => run(() => removeGame(game.appid), () => {
        toast.success(t('MANUAL_GAME.REMOVED'));
        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>
            <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={32}
                           onChange={(e) => setPlatform(e.target.value)}/>
                </div>
                <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>
    );
}