ToBePlayed-Frontend/src/pages/AdminUsersPage.jsx

import {useCallback, useEffect, useState} from 'react';
import {useTranslation} from 'react-i18next';
import {Ban, Check, ChevronLeft, ChevronRight, KeyRound, Loader2, Search, ShieldCheck, Trash2, UserCog, X} from 'lucide-react';
import {toast} from 'sonner';

import {Badge} from '@/components/ui/badge';
import {Button} from '@/components/ui/button';
import {Card, CardContent, CardHeader, CardTitle} from '@/components/ui/card';
import {
    Dialog,
    DialogClose,
    DialogContent,
    DialogDescription,
    DialogFooter,
    DialogHeader,
    DialogTitle,
} from '@/components/ui/dialog';
import {Input} from '@/components/ui/input';
import {Label} from '@/components/ui/label';
import PageContainer from '../components/PageContainer.jsx';
import UserRoleDialog from '../components/UserRoleDialog.jsx';
import {useCurrentUserContext} from '../context/CurrentUserContext.jsx';
import {decideUser, deleteUnconfirmedUser, deleteUser, fetchUsers, REFUSAL_KEY, sendPasswordReset, setUserBlocked} from '../utils/admin.js';
import {formatDate} from '../utils/format.js';
import useAbortPrevious from '../hooks/useAbortPrevious.js';

const PAGE_SIZE = 20;

const formatDateOrNull = (value, locale) => (value ? formatDate(value, locale) : null);

/**
 * PLATFORM_ADMIN only: list, block and delete users, accept or deny registrations that wait, delete the ones whose address is not confirmed. Auth checks the role; a
 * 403 shows "no access".
 */
export default function AdminUsersPage() {
    const {t, i18n} = useTranslation();
    const [query, setQuery] = useState('');
    const [search, setSearch] = useState('');
    const [page, setPage] = useState(0);
    const [pendingOnly, setPendingOnly] = useState(false);
    const [result, setResult] = useState(null);
    const [status, setStatus] = useState('loading');
    // {kind: 'block' | 'delete' | 'deleteUnconfirmed' | 'accept' | 'deny' | 'passwordReset', user}
    const [pending, setPending] = useState(null);
    const [typedEmail, setTypedEmail] = useState('');
    const [busy, setBusy] = useState(false);
    // Only the newest load may show its answer: a slow answer to an older search must not replace the list.
    const nextSignal = useAbortPrevious();
    const ownId = useCurrentUserContext().user?.id;
    const [roleUser, setRoleUser] = useState(null);

    const load = useCallback(async () => {
        const signal = nextSignal();
        try {
            const response = await fetchUsers(search, pendingOnly ? 'PENDING' : '', page, PAGE_SIZE, {signal});
            if (signal.aborted) return;
            if (response.status === 401) return;
            if (response.status === 403) {
                setStatus('forbidden');
                return;
            }
            if (!response.ok) {
                setStatus('error');
                return;
            }
            const data = await response.json();
            if (signal.aborted) return;
            setResult(data);
            setStatus('ready');
        } catch (err) {
            if (signal.aborted) return;
            console.error('Admin users error:', err);
            setStatus('error');
        }
    }, [nextSignal, search, pendingOnly, page]);

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

    const closeDialog = () => {
        setPending(null);
        setTypedEmail('');
    };

    const email = pending?.user.email;
    const dialog = pending && {
        delete: {
            title: t('ADMIN.DELETE_TITLE', {email}), text: t('ADMIN.DELETE_TEXT'), action: 'ADMIN.DELETE',
            done: 'ADMIN.DONE_DELETE', destructive: true, run: () => deleteUser(pending.user.id),
        },
        deleteUnconfirmed: {
            title: t('ADMIN.DELETE_UNCONFIRMED_TITLE', {email}), text: t('ADMIN.DELETE_UNCONFIRMED_TEXT'),
            action: 'ADMIN.DELETE', done: 'ADMIN.DONE_DELETE', destructive: true,
            run: () => deleteUnconfirmedUser(pending.user.id),
        },
        block: {
            ...(pending.user.blocked
                ? {title: t('ADMIN.UNBLOCK'), text: email, action: 'ADMIN.UNBLOCK', done: 'ADMIN.DONE_UNBLOCK'}
                : {title: t('ADMIN.BLOCK_TITLE', {email}), text: t('ADMIN.BLOCK_TEXT'), action: 'ADMIN.BLOCK', done: 'ADMIN.DONE_BLOCK'}),
            run: () => setUserBlocked(pending.user.id, !pending.user.blocked),
        },
        passwordReset: {
            title: t('ADMIN.PASSWORD_RESET_TITLE', {email}), text: t('ADMIN.PASSWORD_RESET_TEXT'),
            action: 'ADMIN.SEND_PASSWORD_RESET', done: 'ADMIN.DONE_PASSWORD_RESET',
            run: () => sendPasswordReset(pending.user.id),
        },
        accept: {
            title: t('ADMIN.ACCEPT_TITLE', {email}), text: t('ADMIN.ACCEPT_TEXT'), action: 'ADMIN.ACCEPT',
            done: 'ADMIN.DONE_ACCEPT', run: () => decideUser(pending.user.id, true),
        },
        deny: {
            title: t('ADMIN.DENY_TITLE', {email}), text: t('ADMIN.DENY_TEXT'), action: 'ADMIN.DENY',
            done: 'ADMIN.DONE_DENY', destructive: true, run: () => decideUser(pending.user.id, false),
        },
    }[pending.kind];

    const confirm = async () => {
        setBusy(true);
        try {
            const response = await dialog.run();
            if (response.status === 401) return;
            if (response.ok) {
                toast.success(t(dialog.done));
                closeDialog();
                await load();
            } else {
                const data = await response.json().catch(() => ({}));
                toast.error(t(REFUSAL_KEY[data.code] ?? 'ADMIN.ERROR'));
            }
        } catch (err) {
            console.error('Admin action error:', err);
            toast.error(t('INFO.ERROR.NETWORK_FAILURE'));
        } finally {
            setBusy(false);
        }
    };

    const submitSearch = (event) => {
        event.preventDefault();
        setPage(0);
        setSearch(query.trim());
    };

    const confirmDisabled = busy || (pending?.kind === 'delete'
        && typedEmail.trim().toLowerCase() !== pending.user.email.toLowerCase());

    const metaLine = (user) => [user.displayName,
        t('ADMIN.REGISTERED', {date: formatDateOrNull(user.registrationDate, i18n.language)}),
        t('ADMIN.LAST_LOGIN', {date: formatDateOrNull(user.lastLoginDate, i18n.language) ?? t('ADMIN.NEVER')}),
    ].filter(Boolean).join(' · ');

    return (
        <PageContainer className="space-y-4 px-4 py-6 md:px-8">
            <Card>
                <CardHeader>
                    <CardTitle>{t('ADMIN.TITLE')}</CardTitle>
                </CardHeader>
                <CardContent className="space-y-4">
                    {status === 'forbidden' && <p className="text-sm text-muted-foreground">{t('ADMIN.NO_ACCESS')}</p>}
                    {status === 'error' && <p className="text-sm text-destructive">{t('ADMIN.LOAD_ERROR')}</p>}
                    {status !== 'forbidden' && (
                        <form onSubmit={submitSearch} className="flex gap-2">
                            <Input aria-label={t('ADMIN.SEARCH')} placeholder={t('ADMIN.SEARCH')} value={query}
                                   onChange={(event) => setQuery(event.target.value)}/>
                            <Button type="submit" variant="outline" size="icon" aria-label={t('ADMIN.SEARCH')}><Search/></Button>
                            <Button type="button" variant={pendingOnly ? 'default' : 'outline'} aria-pressed={pendingOnly}
                                    onClick={() => {
                                        setPage(0);
                                        setPendingOnly(!pendingOnly);
                                    }}>
                                {t('ADMIN.PENDING_ONLY')}
                            </Button>
                        </form>
                    )}
                    {status === 'loading' && <Loader2 className="size-5 animate-spin text-muted-foreground"/>}
                    {status === 'ready' && result.content.length === 0 && (
                        <p className="text-sm text-muted-foreground">{t('ADMIN.EMPTY')}</p>
                    )}
                    {status === 'ready' && result.content.length > 0 && (
                        <ul className="divide-y">
                            {result.content.map((user) => (
                                <li key={user.id} className="flex flex-wrap items-center gap-3 py-3">
                                    <div className="min-w-0 flex-1">
                                        <p className="truncate font-medium">{user.email}</p>
                                        <p className="truncate text-xs text-muted-foreground" title={metaLine(user)}>
                                            {metaLine(user)}
                                        </p>
                                    </div>
                                    <div className="flex flex-wrap items-center gap-1">
                                        {user.role !== 'USER' && <Badge variant="outline">{t(`ROLES.${user.role}`)}</Badge>}
                                        {user.steamLinked && <Badge variant="secondary">{t('ADMIN.STEAM')}</Badge>}
                                        {user.status === 'UNCONFIRMED' && <Badge variant="outline">{t('ADMIN.UNCONFIRMED')}</Badge>}
                                        {user.status === 'PENDING' && <Badge>{t('ADMIN.PENDING')}</Badge>}
                                        {user.blocked && <Badge variant="destructive">{t('ADMIN.BLOCKED')}</Badge>}
                                        {user.deletedAt && (
                                            <Badge variant="destructive">
                                                {t(user.status === 'DENIED' ? 'ADMIN.DENIED' : 'ADMIN.DELETED')}
                                            </Badge>
                                        )}
                                    </div>
                                    {user.status === 'UNCONFIRMED' && (
                                        <Button type="button" variant="outline" size="sm" className="border-destructive text-destructive"
                                                onClick={() => setPending({kind: 'deleteUnconfirmed', user})}>
                                            <Trash2/>{t('ADMIN.DELETE')}
                                        </Button>
                                    )}
                                    {user.status === 'PENDING' && (
                                        <div className="flex gap-2">
                                            <Button type="button" variant="outline" size="sm"
                                                    onClick={() => setPending({kind: 'accept', user})}>
                                                <Check/>{t('ADMIN.ACCEPT')}
                                            </Button>
                                            <Button type="button" variant="outline" size="sm" className="border-destructive text-destructive"
                                                    onClick={() => setPending({kind: 'deny', user})}>
                                                <X/>{t('ADMIN.DENY')}
                                            </Button>
                                        </div>
                                    )}
                                    {user.status === 'ACTIVE' && !user.blocked && !user.deletedAt && user.id !== ownId && (
                                        <Button type="button" variant="outline" size="sm" onClick={() => setRoleUser(user)}>
                                            <UserCog/>{t('ADMIN.ROLES')}
                                        </Button>
                                    )}
                                    {user.role !== 'PLATFORM_ADMIN' && !user.deletedAt && user.status !== 'PENDING' && user.status !== 'UNCONFIRMED' && (
                                        <div className="flex gap-2">
                                            {user.status === 'ACTIVE' && !user.blocked && (
                                                <Button type="button" variant="outline" size="sm"
                                                        onClick={() => setPending({kind: 'passwordReset', user})}>
                                                    <KeyRound/>{t('ADMIN.SEND_PASSWORD_RESET')}
                                                </Button>
                                            )}
                                            <Button type="button" variant="outline" size="sm"
                                                    onClick={() => setPending({kind: 'block', user})}>
                                                {user.blocked ? <ShieldCheck/> : <Ban/>}
                                                {t(user.blocked ? 'ADMIN.UNBLOCK' : 'ADMIN.BLOCK')}
                                            </Button>
                                            <Button type="button" variant="outline" size="sm" className="border-destructive text-destructive"
                                                    onClick={() => setPending({kind: 'delete', user})}>
                                                <Trash2/>{t('ADMIN.DELETE')}
                                            </Button>
                                        </div>
                                    )}
                                </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('ADMIN.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>

            <Dialog open={!!pending} onOpenChange={(open) => { if (!open) closeDialog(); }}>
                {pending && (
                    <DialogContent>
                        <DialogHeader>
                            <DialogTitle>{dialog.title}</DialogTitle>
                            <DialogDescription>{dialog.text}</DialogDescription>
                        </DialogHeader>
                        {pending.kind === 'delete' && (
                            <div className="space-y-2">
                                <Label htmlFor="adminDeleteEmail">{t('ADMIN.TYPE_EMAIL')}</Label>
                                <Input id="adminDeleteEmail" autoComplete="off" value={typedEmail}
                                       onChange={(event) => setTypedEmail(event.target.value)}/>
                            </div>
                        )}
                        <DialogFooter>
                            <DialogClose asChild>
                                <Button type="button" variant="outline">{t('ADMIN.CANCEL')}</Button>
                            </DialogClose>
                            <Button type="button" variant={dialog.destructive ? 'destructive' : 'default'}
                                    disabled={confirmDisabled} onClick={confirm}>
                                {busy && <Loader2 className="animate-spin"/>}
                                {t(dialog.action)}
                            </Button>
                        </DialogFooter>
                    </DialogContent>
                )}
            </Dialog>
            <UserRoleDialog user={roleUser} onClose={() => setRoleUser(null)} onChanged={load}/>
        </PageContainer>
    );
}