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

import { useState } from 'react';
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { useNavigate, useSearch } 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 { invitationCompleteFormSchema, type InvitationCompleteFormData } from '@/lib/schemas/auth';
import { FormErrorBanner } from '@/components/ui/FormErrorBanner';
import { FieldError } from '@/components/ui/FieldError';
import { useValidateInvitation, useCompleteInvitation } from '@/api/useInvitation';
import { ProblemDetailsError, NetworkError } from '@/lib/api-client';

interface FormError {
    message: string;
}

type LoadingState = 'loading' | 'ready' | 'error' | 'submitting' | 'success';

export function InviteCompletePage() {
    const { t } = useTranslation();
    const navigate = useNavigate();
    const search = useSearch({ strict: false }) as { token?: string };
    const [serverError, setServerError] = useState<FormError | null>(null);
    const [loadingState, setLoadingState] = useState<LoadingState>('loading');
    
    const token = search.token || null;
    const validationQuery = useValidateInvitation(token);
    const completeMutation = useCompleteInvitation();

    // Handle validation query state changes
    if (!token) {
        if (loadingState === 'loading') {
            setLoadingState('error');
        }
    } else if (validationQuery.isPending && loadingState !== 'submitting') {
        // Still loading
    } else if (validationQuery.error || (validationQuery.data && !validationQuery.data.valid)) {
        if (loadingState === 'loading') {
            setLoadingState('error');
        }
    } else if (validationQuery.data?.valid && loadingState === 'loading') {
        setLoadingState('ready');
    }

    const {
        register,
        handleSubmit,
        formState: { errors, isSubmitting }
    } = useForm<InvitationCompleteFormData>({
        resolver: zodResolver(invitationCompleteFormSchema),
        mode: 'onBlur',
        defaultValues: {
            name: '',
            password: '',
            confirmPassword: ''
        }
    });

    const onSubmit = handleSubmit(async (values) => {
        setServerError(null);
        setLoadingState('submitting');
        try {
            if (!token) {
                setServerError({ message: t('errors.invalidInvitationToken') });
                setLoadingState('error');
                return;
            }
            await completeMutation.mutateAsync({
                token,
                ...values
            });
            setLoadingState('success');
            setTimeout(() => {
                navigate({ to: '/login' });
            }, 2000);
        } catch (err) {
            setLoadingState('ready');
            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 (loadingState === 'loading') {
        return (
            <div className="flex min-h-svh items-center justify-center bg-secondary/40 p-4" data-testid="invite-loading">
                <Card className="w-full max-w-sm">
                    <CardContent className="pt-6">
                        <div className="text-center space-y-4">
                            <div
                                className="inline-block h-8 w-8 animate-spin rounded-full border-4 border-muted border-t-primary"
                            />
                            <p className="text-sm text-muted-foreground">
                                {t('inviteComplete.loadingMessage')}
                            </p>
                        </div>
                    </CardContent>
                </Card>
            </div>
        );
    }

    if (loadingState === 'error') {
        return (
            <div className="flex min-h-svh items-center justify-center bg-secondary/40 p-4" data-testid="invite-error">
                <Card className="w-full max-w-sm">
                    <CardHeader>
                        <CardTitle className="text-destructive">{t('errors.setupRequired')}</CardTitle>
                    </CardHeader>
                    <CardContent className="space-y-4">
                        <p className="text-sm text-muted-foreground">
                            {t('inviteComplete.invalidTokenMessage')}
                        </p>
                        <Button
                            variant="outline"
                            className="w-full"
                            onClick={() => navigate({ to: '/' })}
                        >
                            {t('inviteComplete.requestNewInvitationLink')}
                        </Button>
                    </CardContent>
                </Card>
            </div>
        );
    }

    if (loadingState === 'success') {
        return (
            <div className="flex min-h-svh items-center justify-center bg-secondary/40 p-4" data-testid="invite-success">
                <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('inviteComplete.successMessage')}
                            </div>
                            <p className="text-sm text-muted-foreground">
                                {t('login.subtitle')}
                            </p>
                        </div>
                    </CardContent>
                </Card>
            </div>
        );
    }

    const email = validationQuery.data?.email || '';

    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('inviteComplete.title')}</CardTitle>
                    <CardDescription>{t('login.subtitle')}</CardDescription>
                </CardHeader>
                <CardContent>
                    <form onSubmit={onSubmit} noValidate className="space-y-4" data-testid="invite-complete-form">
                        <FormErrorBanner
                            error={serverError || (completeMutation.error ? { message: completeMutation.error.message } : null)}
                            onDismiss={() => setServerError(null)}
                        />

                        <div className="space-y-2">
                            <Label htmlFor="email">{t('inviteComplete.emailLabel')}</Label>
                            <Input
                                id="email"
                                type="email"
                                value={email}
                                readOnly
                                data-testid="invite-email-input"
                                className="bg-muted"
                            />
                        </div>

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

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

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

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