slp-modular-cms/frontend/src/pages/SetupPage.tsx

import { useState } from 'react';
import { useForm, Controller } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { useNavigate } from '@tanstack/react-router';
import { useTranslation } from 'react-i18next';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { setupFormSchema, type SetupFormData } from '@/lib/schemas/auth';
import { FormErrorBanner } from '@/components/ui/FormErrorBanner';
import { FieldError } from '@/components/ui/FieldError';
import { useSetup } from '@/api/useSetup';
import { ProblemDetailsError, NetworkError } from '@/lib/api-client';

interface FormError {
    message: string;
}

export function SetupPage() {
    const { t } = useTranslation();
    const navigate = useNavigate();
    const [serverError, setServerError] = useState<FormError | null>(null);
    const [successMessage, setSuccessMessage] = useState(false);
    
    const setupMutation = useSetup();

    const {
        register,
        handleSubmit,
        formState: { errors, isSubmitting },
        control
    } = useForm<SetupFormData>({
        resolver: zodResolver(setupFormSchema),
        mode: 'onBlur',
        defaultValues: {
            name: '',
            email: '',
            password: '',
            confirmPassword: '',
            language: 'nl'
        }
    });

    const onSubmit = handleSubmit(async (values) => {
        setServerError(null);
        try {
            await setupMutation.mutateAsync(values);
            setSuccessMessage(true);
            setTimeout(() => {
                navigate({ to: '/login' });
            }, 2000);
        } catch (err) {
            if (err instanceof ProblemDetailsError) {
                setServerError({ message: err.problem.detail || err.message || t('errors.generic') });
            } else if (err instanceof NetworkError) {
                setServerError({ message: t('errors.network') });
            } else {
                setServerError({ message: t('errors.generic') });
            }
        }
    });

    if (successMessage) {
        return (
            <div className="flex min-h-svh items-center justify-center bg-secondary/40 p-4">
                <Card className="w-full max-w-sm">
                    <CardContent className="pt-6">
                        <div className="text-center space-y-4">
                            <div className="text-green-600 text-lg font-medium">
                                ✓ {t('setup.successMessage')}
                            </div>
                            <p className="text-sm text-muted-foreground">
                                {t('login.subtitle')}
                            </p>
                        </div>
                    </CardContent>
                </Card>
            </div>
        );
    }

    return (
        <div className="flex min-h-svh items-center justify-center bg-secondary/40 p-4">
            <Card className="w-full max-w-sm">
                <CardHeader>
                    <CardTitle>{t('setup.title')}</CardTitle>
                    <CardDescription>{t('login.subtitle')}</CardDescription>
                </CardHeader>
                <CardContent>
                    <form onSubmit={onSubmit} noValidate className="space-y-4" data-testid="setup-form">
                        <FormErrorBanner
                            error={serverError || (setupMutation.error ? { message: setupMutation.error.message } : null)}
                            onDismiss={() => setServerError(null)}
                        />

                        <div className="space-y-2">
                            <Label htmlFor="name">{t('setup.nameLabel')}</Label>
                            <Input
                                id="name"
                                type="text"
                                placeholder="John Doe"
                                data-testid="setup-name-input"
                                aria-invalid={errors.name !== undefined}
                                {...register('name')}
                            />
                            {errors.name && <FieldError message={errors.name.message} testId="setup-name-error" />}
                        </div>

                        <div className="space-y-2">
                            <Label htmlFor="email">{t('setup.emailLabel')}</Label>
                            <Input
                                id="email"
                                type="email"
                                placeholder="owner@example.com"
                                data-testid="setup-email-input"
                                aria-invalid={errors.email !== undefined}
                                {...register('email')}
                            />
                            {errors.email && <FieldError message={errors.email.message} testId="setup-email-error" />}
                        </div>

                        <div className="space-y-2">
                            <Label htmlFor="password">{t('setup.passwordLabel')}</Label>
                            <Input
                                id="password"
                                type="password"
                                placeholder="••••••••"
                                data-testid="setup-password-input"
                                aria-invalid={errors.password !== undefined}
                                {...register('password')}
                            />
                            {errors.password && <FieldError message={errors.password.message} testId="setup-password-error" />}
                        </div>

                        <div className="space-y-2">
                            <Label htmlFor="confirmPassword">{t('setup.confirmPasswordLabel')}</Label>
                            <Input
                                id="confirmPassword"
                                type="password"
                                placeholder="••••••••"
                                data-testid="setup-confirmPassword-input"
                                aria-invalid={errors.confirmPassword !== undefined}
                                {...register('confirmPassword')}
                            />
                            {errors.confirmPassword && <FieldError message={errors.confirmPassword.message} testId="setup-confirm-error" />}
                        </div>

                        <div className="space-y-2">
                            <Label htmlFor="language">{t('setup.languageLabel')}</Label>
                            <Controller
                                name="language"
                                control={control}
                                render={({ field }) => (
                                    <select
                                        {...field}
                                        id="language"
                                        data-testid="setup-locale-select"
                                        className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
                                    >
                                        <option value="nl">Nederlands</option>
                                        <option value="en">English</option>
                                    </select>
                                )}
                            />
                        </div>

                        <Button
                            type="submit"
                            disabled={isSubmitting || setupMutation.isPending}
                            className="w-full"
                            data-testid="setup-submit-button"
                        >
                            {isSubmitting || setupMutation.isPending ? '...' : t('setup.submitButton')}
                        </Button>
                    </form>
                </CardContent>
            </Card>
        </div>
    );
}