ToBePlayed-Frontend/src/pages/AuditLogPage.jsx

import {useCallback, useEffect, useState} from 'react';
import {Link} from 'react-router-dom';
import {useTranslation} from 'react-i18next';
import {ChevronLeft, ChevronRight, Loader2, Undo2} from 'lucide-react';

import {Button} from '@/components/ui/button';
import {Card, CardContent, CardHeader, CardTitle} from '@/components/ui/card';
import {Select, SelectContent, SelectItem, SelectTrigger, SelectValue} from '@/components/ui/select';
import PageContainer from '../components/PageContainer.jsx';
import {toast} from 'sonner';
import {fetchAuditLog, undoMerge} from '../utils/links.js';
import {formatDateTime} from '../utils/format.js';

const PAGE_SIZE = 20;
const ACTIONS = ['GAME_MERGE', 'GAME_MERGE_UNDO', 'GAME_LINK', 'GAME_UNLINK', 'GAME_LINK_DISMISS', 'GAME_CORRECT',
    'GAME_CORRECTION_RESET'];
const ALL = 'ALL';

function GameRef({appid, name, fallback}) {
    if (appid == null) return null;
    return <Link to={`/audit/games?appid=${appid}`} className="font-medium hover:text-primary hover:underline">{name ?? fallback}</Link>;
}

/**
 * AUDITOR or higher: the newest rows of Core's audit log (merge, link, unlink, dismiss). Core checks the role.
 */
export default function AuditLogPage() {
    const {t, i18n} = useTranslation();
    const [action, setAction] = useState(ALL);
    const [page, setPage] = useState(0);
    const [result, setResult] = useState({content: [], totalPages: 0});
    const [status, setStatus] = useState('loading');
    const [undoing, setUndoing] = useState(false);

    const load = useCallback(async () => {
        try {
            const response = await fetchAuditLog({action: action === ALL ? '' : action, page, size: PAGE_SIZE});
            if (response.status === 401) return;
            if (response.status === 403) {
                setStatus('forbidden');
                return;
            }
            if (!response.ok) {
                setStatus('error');
                return;
            }
            setResult(await response.json());
            setStatus('ready');
        } catch (err) {
            console.error('Audit log error:', err);
            setStatus('error');
        }
    }, [action, page]);

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

    const onUndo = async (entry) => {
        // The merged key has no catalog row any more; its name is the first one in the detail.
        const name = entry.gameName ?? /^"(.*?)" into "/.exec(entry.detail ?? '')?.[1] ?? entry.appid;
        const other = entry.targetGameName ?? entry.targetAppid;
        if (!window.confirm(t('AUDIT.UNDO.CONFIRM', {name, other}))) return;
        setUndoing(true);
        try {
            const response = await undoMerge(entry.id);
            if (response.status === 401) return;
            if (response.ok) {
                toast.success(t('AUDIT.UNDO.DONE'));
            } else {
                const data = await response.json().catch(() => ({}));
                toast.error(t(`AUDIT.UNDO.ERROR_CODES.${data.code}`, {defaultValue: t('AUDIT.UNDO.ERROR')}));
            }
            await load();
        } catch (err) {
            console.error('Undo merge error:', err);
            toast.error(t('INFO.ERROR.NETWORK_FAILURE'));
        } finally {
            setUndoing(false);
        }
    };

    const onActionChange = (value) => {
        setAction(value);
        setPage(0);
    };

    if (status === 'forbidden') {
        return (
            <PageContainer className="px-4 py-6 md:px-8">
                <p className="text-sm text-muted-foreground">{t('AUDIT.NO_ACCESS')}</p>
            </PageContainer>
        );
    }

    return (
        <PageContainer className="space-y-4 px-4 py-6 md:px-8">
            <Card>
                <CardHeader className="flex flex-wrap items-center justify-between gap-3">
                    <CardTitle>{t('AUDIT.TITLE')}</CardTitle>
                    <Select value={action} onValueChange={onActionChange}>
                        <SelectTrigger className="w-52" aria-label={t('AUDIT.ACTION.LABEL')}>
                            <SelectValue/>
                        </SelectTrigger>
                        <SelectContent>
                            <SelectItem value={ALL}>{t('AUDIT.ACTION.ALL')}</SelectItem>
                            {ACTIONS.map((key) => <SelectItem key={key} value={key}>{t(`AUDIT.ACTION.${key}`)}</SelectItem>)}
                        </SelectContent>
                    </Select>
                </CardHeader>
                <CardContent className="space-y-3">
                    {status === 'loading' && <Loader2 className="size-5 animate-spin text-muted-foreground"/>}
                    {status === 'error' && <p className="text-sm text-destructive">{t('AUDIT.LOAD_ERROR')}</p>}
                    {status === 'ready' && result.content.length === 0 && (
                        <p className="text-sm text-muted-foreground">{t('AUDIT.EMPTY')}</p>
                    )}
                    {status === 'ready' && result.content.length > 0 && (
                        <ul className="divide-y">
                            {result.content.map((entry) => (
                                <li key={entry.id} className="space-y-1 py-3 text-sm">
                                    <p className="flex flex-wrap items-center gap-x-2">
                                        <span className="text-xs text-muted-foreground">{formatDateTime(entry.createdAt, i18n.language)}</span>
                                        <span>{entry.actorName ?? t('AUDIT.USER_ID', {id: entry.actorUserId})}</span>
                                        <span className="font-medium">{t(`AUDIT.ACTION.${entry.action}`)}</span>
                                        <GameRef appid={entry.appid} name={entry.gameName} fallback={entry.detail}/>
                                        <GameRef appid={entry.targetAppid} name={entry.targetGameName} fallback={entry.targetAppid}/>
                                    </p>
                                    {entry.detail && <p className="break-words text-xs text-muted-foreground">{entry.detail}</p>}
                                    {entry.action === 'GAME_MERGE' && entry.undoable && (
                                        <Button type="button" variant="outline" size="sm" disabled={undoing}
                                                onClick={() => onUndo(entry)}>
                                            <Undo2/>{t('AUDIT.UNDO.BUTTON')}
                                        </Button>
                                    )}
                                </li>
                            ))}
                        </ul>
                    )}
                    {status === 'ready' && result.totalPages > 1 && (
                        <div className="flex items-center justify-between gap-2 text-sm">
                            <Button type="button" variant="outline" size="sm" disabled={page === 0}
                                    onClick={() => setPage(page - 1)}>
                                <ChevronLeft/>{t('ADMIN.PREVIOUS')}
                            </Button>
                            <span>{t('AUDIT.PAGE_OF', {current: page + 1, total: result.totalPages})}</span>
                            <Button type="button" variant="outline" size="sm" disabled={page + 1 >= result.totalPages}
                                    onClick={() => setPage(page + 1)}>
                                {t('ADMIN.NEXT')}<ChevronRight/>
                            </Button>
                        </div>
                    )}
                </CardContent>
            </Card>
        </PageContainer>
    );
}