ToBePlayed-Frontend/src/components/DeleteAccountCard.jsx

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

import {Button} from '@/components/ui/button';
import {Card, CardContent, CardHeader, CardTitle} from '@/components/ui/card';
import {
    Dialog,
    DialogClose,
    DialogContent,
    DialogDescription,
    DialogFooter,
    DialogHeader,
    DialogTitle,
    DialogTrigger,
} from '@/components/ui/dialog';
import {Input} from '@/components/ui/input';
import {Label} from '@/components/ui/label';
import {deleteAccount} from '../utils/account.js';
import {clearSession} from '../utils/auth.js';

const sameEmail = (typed, email) => !!email && typed.trim().toLowerCase() === email.toLowerCase();

/**
 * "Delete my account": Auth blocks the account at once and removes it after 30 days. The user types the own
 * email against a misclick and the password against a borrowed session.
 */
export default function DeleteAccountCard({email}) {
    const {t} = useTranslation();
    const navigate = useNavigate();
    const [typedEmail, setTypedEmail] = useState('');
    const [password, setPassword] = useState('');
    const [busy, setBusy] = useState(false);

    const confirm = async () => {
        setBusy(true);
        try {
            const response = await deleteAccount(password);
            if (response.status === 204) {
                toast.success(t('SETTINGS.DELETE_ACCOUNT.DONE'));
                // First away from the settings, which would open the login page without a session. flushSync: the
                // router shows the new page before the session change renders, not later in a transition.
                await navigate('/', {replace: true, flushSync: true});
                clearSession();
                return;
            }
            if (response.status === 403) {
                toast.error(t('SETTINGS.DELETE_ACCOUNT.WRONG_PASSWORD'));
            } else if (response.status === 409) {
                toast.error(t('SETTINGS.DELETE_ACCOUNT.LAST_ADMIN'));
            } else if (response.status === 429) {
                const minutes = Math.ceil(Number(response.headers.get('Retry-After') ?? 900) / 60);
                toast.error(t('SETTINGS.DELETE_ACCOUNT.TOO_MANY', {minutes}));
            } else if (response.status !== 401) {
                toast.error(t('SETTINGS.DELETE_ACCOUNT.ERROR'));
            }
        } catch (err) {
            console.error('Delete account error:', err);
            toast.error(t('INFO.ERROR.NETWORK_FAILURE'));
        }
        setBusy(false);
    };

    return (
        <Card>
            <CardHeader>
                <CardTitle className="flex items-center gap-2"><Trash2 className="size-4 text-destructive"/>{t('SETTINGS.DELETE_ACCOUNT.TITLE')}</CardTitle>
            </CardHeader>
            <CardContent className="space-y-3">
                <p className="text-sm text-muted-foreground">{t('SETTINGS.DELETE_ACCOUNT.EXPLAIN')}</p>
                <Dialog onOpenChange={(open) => { if (!open) { setTypedEmail(''); setPassword(''); } }}>
                    <DialogTrigger asChild>
                        <Button type="button" variant="outline" className="border-destructive text-destructive">
                            <Trash2/>{t('SETTINGS.DELETE_ACCOUNT.BUTTON')}
                        </Button>
                    </DialogTrigger>
                    <DialogContent>
                        <DialogHeader>
                            <DialogTitle>{t('SETTINGS.DELETE_ACCOUNT.DIALOG_TITLE')}</DialogTitle>
                            <DialogDescription>{t('SETTINGS.DELETE_ACCOUNT.EXPLAIN')}</DialogDescription>
                        </DialogHeader>
                        <div className="space-y-2">
                            <Label htmlFor="deleteEmail">{t('SETTINGS.DELETE_ACCOUNT.TYPE_EMAIL')}</Label>
                            <Input id="deleteEmail" type="email" autoComplete="off" value={typedEmail}
                                   onChange={(event) => setTypedEmail(event.target.value)}/>
                        </div>
                        <div className="space-y-2">
                            <Label htmlFor="deletePassword">{t('SETTINGS.DELETE_ACCOUNT.PASSWORD')}</Label>
                            <Input id="deletePassword" type="password" autoComplete="current-password" value={password}
                                   onChange={(event) => setPassword(event.target.value)}/>
                        </div>
                        <DialogFooter>
                            <DialogClose asChild>
                                <Button type="button" variant="outline">{t('SETTINGS.DELETE_ACCOUNT.CANCEL')}</Button>
                            </DialogClose>
                            <Button type="button" variant="destructive" onClick={confirm}
                                    disabled={busy || !password || !sameEmail(typedEmail, email)}>
                                {busy ? <Loader2 className="animate-spin"/> : <Trash2/>}
                                {t('SETTINGS.DELETE_ACCOUNT.CONFIRM')}
                            </Button>
                        </DialogFooter>
                    </DialogContent>
                </Dialog>
            </CardContent>
        </Card>
    );
}