import {useState} from 'react';
import {useTranslation} from 'react-i18next';
import {toast} from 'sonner';
import {Gamepad2, Loader2} from 'lucide-react';

import {Button} from '@/components/ui/button';
import {Card} from '@/components/ui/card';
import {saveGameStatus} from '../utils/backlog.js';
import {formatPlaytime} from '../utils/games.js';

/**
 * Shown for a backlog game that Steam reports as played in the last two weeks.
 *
 * @param onChanged gets the saved backlog entry
 */
export default function PlayingHint({game, onChanged}) {
    const {t} = useTranslation();
    const [busy, setBusy] = useState(false);

    if (game.status !== 'BACKLOG' || !(game.playtime2Weeks > 0)) return null;

    const setPlaying = async () => {
        setBusy(true);
        try {
            const response = await saveGameStatus(game.appid, 'PLAYING');
            if (response.status === 401) return;
            if (!response.ok) {
                toast.error(t('BACKLOG.SAVE_FAILED'));
                return;
            }
            onChanged(await response.json());
            toast.success(t('BACKLOG.SAVED'));
        } catch (err) {
            console.error('set playing error:', err);
            toast.error(t('INFO.ERROR.NETWORK_FAILURE'));
        } finally {
            setBusy(false);
        }
    };

    return (
        <Card className="gap-3 border-primary/40 bg-primary/5 p-4 sm:flex-row sm:items-center sm:gap-4">
            <div className="flex flex-1 items-start gap-3 sm:items-center">
                <Gamepad2 className="size-5 shrink-0 text-primary"/>
                <p className="text-sm">
                    {t('GAME_DETAIL.PLAYED_RECENTLY', {time: formatPlaytime(game.playtime2Weeks)})}
                </p>
            </div>
            <Button size="sm" className="self-end sm:self-auto" onClick={setPlaying} disabled={busy}>
                {busy && <Loader2 className="animate-spin"/>}
                {t('GAME_DETAIL.SET_PLAYING')}
            </Button>
        </Card>
    );
}