ToBePlayed-Frontend/src/pages/SettingsPage.jsx

import {useEffect, useState} from 'react';
import {useNavigate} from 'react-router-dom';
import {useTranslation} from 'react-i18next';
import {useForm} from 'react-hook-form';
import {zodResolver} from '@hookform/resolvers/zod';

import {Gamepad2, Loader2, Save, SlidersHorizontal, UserRound} from 'lucide-react';
import {toast} from 'sonner';

import {Button} from '@/components/ui/button';
import {Card, CardContent, CardHeader, CardTitle} from '@/components/ui/card';
import {Input} from '@/components/ui/input';
import {Label} from '@/components/ui/label';
import {Select, SelectContent, SelectItem, SelectTrigger, SelectValue} from '@/components/ui/select';
import {Skeleton} from '@/components/ui/skeleton';
import {Switch} from '@/components/ui/switch';
import FormField from '../components/FormField.jsx';
import {settingsSchema} from '../utils/validation.js';
import {usePreferences} from '../context/PreferencesContext.jsx';

const BACKEND_ERROR_KEY = {
    STEAM_ID_ALREADY_IN_USE: 'REGISTRATION.ERROR_STEAM_ID_IN_USE',
};

const SUPPORTED_LANGUAGES = ['en', 'de'];

const formatDate = (value, locale) => {
    if (!value) return '—';
    try {
        return new Date(value).toLocaleString(locale);
    } catch {
        return value;
    }
};

export default function SettingsPage() {
    const {t, i18n} = useTranslation();
    const navigate = useNavigate();
    const {isDarkMode, setDarkMode, setLanguage} = usePreferences();

    const [profile, setProfile] = useState(null);
    const [isLoading, setIsLoading] = useState(true);
    const [loadError, setLoadError] = useState(null);

    const {
        register,
        handleSubmit,
        reset,
        formState: {errors, isSubmitting},
    } = useForm({
        resolver: zodResolver(settingsSchema),
        defaultValues: {useDarkTheme: true, language: 'en', steamId: ''},
    });

    useEffect(() => {
        const token = localStorage.getItem('tbp_jwt');
        if (!token) {
            navigate('/login');
            return;
        }

        const load = async () => {
            try {
                const response = await fetch(`${import.meta.env.VITE_API_URL}/api/users/me?v=1`, {
                    method: 'GET',
                    headers: {
                        'Authorization': `Bearer ${token}`,
                        'Content-Type': 'application/json',
                    },
                });

                if (response.status === 401) {
                    localStorage.removeItem('tbp_jwt');
                    navigate('/login');
                    return;
                }

                if (!response.ok) {
                    setLoadError(t('INFO.ERROR.LOAD_PROFILE'));
                    return;
                }

                const data = await response.json();
                setProfile(data);
                reset({
                    useDarkTheme: !!data.settings?.useDarkTheme,
                    language: data.settings?.language || 'en',
                    steamId: data.steamId ?? '',
                });
            } catch (err) {
                console.error('Settings load error:', err);
                setLoadError(t('INFO.ERROR.NETWORK_FAILURE'));
            } finally {
                setIsLoading(false);
            }
        };

        load();
    }, [navigate, reset, t]);

    const persistSettings = async (payload) => {
        const token = localStorage.getItem('tbp_jwt');
        if (!token) {
            navigate('/login');
            return {ok: false};
        }

        try {
            const response = await fetch(`${import.meta.env.VITE_API_URL}/api/users/settings`, {
                method: 'PUT',
                headers: {
                    'Authorization': `Bearer ${token}`,
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify(payload),
            });

            if (response.status === 401) {
                localStorage.removeItem('tbp_jwt');
                navigate('/login');
                return {ok: false};
            }

            if (!response.ok) {
                const data = await response.json().catch(() => ({}));
                const mappedKey = BACKEND_ERROR_KEY[data.code];
                toast.error(mappedKey ? t(mappedKey) : data.message || t('SETTINGS.ERROR_SAVE'));
                return {ok: false};
            }

            const data = await response.json();
            localStorage.setItem('tbp_jwt', data.token); // Core reads the steamId from the token
            toast.success(t('SETTINGS.SAVED'));
            return {ok: true};
        } catch (err) {
            console.error('Settings save error:', err);
            toast.error(t('INFO.ERROR.NETWORK_FAILURE'));
            return {ok: false};
        }
    };

    const handleDarkThemeToggle = async () => {
        const next = !isDarkMode;
        setDarkMode(next); // apply on the fly
        await persistSettings({
            useDarkTheme: next,
            language: i18n.language,
            steamId: profile?.steamId ?? null,
        });
    };

    const handleLanguageChange = async (next) => {
        setLanguage(next); // apply on the fly
        await persistSettings({
            useDarkTheme: isDarkMode,
            language: next,
            steamId: profile?.steamId ?? null,
        });
    };

    const onSubmitSteamId = async (values) => {
        const result = await persistSettings({
            useDarkTheme: isDarkMode,
            language: i18n.language,
            steamId: values.steamId,
        });
        if (result.ok) {
            setProfile((p) => (p ? {...p, steamId: values.steamId} : p));
        }
    };

    if (isLoading) {
        return (
            <div className="w-full max-w-2xl mx-auto p-4 md:p-8 space-y-6">
                <Skeleton className="h-9 w-48"/>
                <Skeleton className="h-56 rounded-xl"/>
                <Skeleton className="h-40 rounded-xl"/>
                <Skeleton className="h-44 rounded-xl"/>
            </div>
        );
    }

    if (loadError) {
        return <div className="py-24 text-center text-destructive">{loadError}</div>;
    }

    const accountRows = [
        [t('SETTINGS.EMAIL'), profile?.email],
        [t('SETTINGS.ROLE'), profile?.role],
        [t('SETTINGS.CREATED_DATE'), formatDate(profile?.createdDate, i18n.language)],
        [t('SETTINGS.LAST_LOGIN'), formatDate(profile?.lastLogin, i18n.language)],
    ];

    return (
        <div className="w-full max-w-2xl mx-auto p-4 md:p-8 space-y-6">
            <h1 className="text-3xl font-bold tracking-tight">{t('SETTINGS.TITLE')}</h1>

            <Card>
                <CardHeader>
                    <CardTitle className="flex items-center gap-2"><UserRound className="size-4 text-primary"/>{t('SETTINGS.ACCOUNT')}</CardTitle>
                </CardHeader>
                <CardContent>
                    <dl className="divide-y">
                        {accountRows.map(([label, value]) => (
                            <div key={label} className="flex flex-col gap-1 py-3 first:pt-0 last:pb-0 sm:flex-row sm:items-center sm:justify-between">
                                <dt className="text-sm text-muted-foreground">{label}</dt>
                                <dd className="text-sm font-medium break-all">{value || '—'}</dd>
                            </div>
                        ))}
                    </dl>
                </CardContent>
            </Card>

            <Card>
                <CardHeader>
                    <CardTitle className="flex items-center gap-2"><SlidersHorizontal className="size-4 text-primary"/>{t('SETTINGS.PREFERENCES')}</CardTitle>
                </CardHeader>
                <CardContent className="space-y-6">
                    <div className="flex items-center justify-between gap-4">
                        <Label htmlFor="useDarkTheme">{t('SETTINGS.DARK_THEME')}</Label>
                        <Switch id="useDarkTheme" checked={isDarkMode} onCheckedChange={handleDarkThemeToggle}/>
                    </div>
                    <div className="flex items-center justify-between gap-4">
                        <Label htmlFor="language">{t('SETTINGS.LANGUAGE')}</Label>
                        <Select value={i18n.language} onValueChange={handleLanguageChange}>
                            <SelectTrigger id="language" className="w-40">
                                <SelectValue/>
                            </SelectTrigger>
                            <SelectContent>
                                {SUPPORTED_LANGUAGES.map((lang) => (
                                    <SelectItem key={lang} value={lang}>
                                        {t(`SETTINGS.LANGUAGE_OPTIONS.${lang.toUpperCase()}`)}
                                    </SelectItem>
                                ))}
                            </SelectContent>
                        </Select>
                    </div>
                </CardContent>
            </Card>

            <Card>
                <CardHeader>
                    <CardTitle className="flex items-center gap-2"><Gamepad2 className="size-4 text-primary"/>{t('SETTINGS.STEAM')}</CardTitle>
                </CardHeader>
                <CardContent>
                    <form onSubmit={handleSubmit(onSubmitSteamId)} className="space-y-4" noValidate>
                        <FormField id="steamId" label={t('SETTINGS.STEAM_ID')} error={errors.steamId} t={t}>
                            <Input
                                id="steamId"
                                type="text"
                                inputMode="numeric"
                                className="font-mono"
                                aria-invalid={!!errors.steamId}
                                {...register('steamId')}
                            />
                        </FormField>
                        <Button type="submit" disabled={isSubmitting}>
                            {isSubmitting ? <Loader2 className="animate-spin"/> : <Save/>}
                            {t('SETTINGS.SAVE_STEAM_ID')}
                        </Button>
                    </form>
                </CardContent>
            </Card>
        </div>
    );
}