tt-booking/components/auth/register-form.tsx

'use client';

import { useState } from 'react';
import { useRouter } from 'next/navigation';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Label } from '@/components/ui/label';
import { useToast } from '@/components/ui/use-toast';

export function RegisterForm() {
	const [isLoading, setIsLoading] = useState(false);
	const [formData, setFormData] = useState({
		email: '',
		name: '',
		surname: '',
		password: '',
		confirmPassword: '',
	});
	const router = useRouter();
	const { toast } = useToast();

	const handleSubmit = async (e: React.FormEvent) => {
		e.preventDefault();

		if (formData.password !== formData.confirmPassword) {
			toast({
				title: 'Error',
				description: 'Passwords do not match',
				variant: 'destructive',
			});
			return;
		}

		setIsLoading(true);

		try {
			const response = await fetch('/api/auth/register', {
				method: 'POST',
				headers: { 'Content-Type': 'application/json' },
				body: JSON.stringify({
					email: formData.email,
					name: formData.name,
					surname: formData.surname,
					password: formData.password,
				}),
			});

			const data = await response.json();

			if (response.ok) {
				toast({
					title: 'Success',
					description: 'Account created successfully! Please log in.',
				});
				router.push('/');
			} else {
				toast({
					title: 'Error',
					description: data.error || 'Registration failed',
					variant: 'destructive',
				});
			}
		} catch (error) {
			toast({
				title: 'Error',
				description: 'An unexpected error occurred',
				variant: 'destructive',
			});
		} finally {
			setIsLoading(false);
		}
	};

	const handleInputChange = (field: string, value: string) => {
		setFormData((prev) => ({ ...prev, [field]: value }));
	};

	return (
		<Card className='w-full max-w-md mx-auto'>
			<CardHeader>
				<CardTitle>Create Account</CardTitle>
				<CardDescription>Fill in your details to create a new account</CardDescription>
			</CardHeader>
			<CardContent>
				<form onSubmit={handleSubmit} className='space-y-4'>
					<div className='grid grid-cols-2 gap-4'>
						<div className='space-y-2'>
							<Label htmlFor='name'>First Name</Label>
							<Input
								id='name'
								type='text'
								placeholder='John'
								value={formData.name}
								onChange={(e) => handleInputChange('name', e.target.value)}
								required
							/>
						</div>
						<div className='space-y-2'>
							<Label htmlFor='surname'>Last Name</Label>
							<Input
								id='surname'
								type='text'
								placeholder='Doe'
								value={formData.surname}
								onChange={(e) => handleInputChange('surname', e.target.value)}
								required
							/>
						</div>
					</div>
					<div className='space-y-2'>
						<Label htmlFor='email'>Email</Label>
						<Input
							id='email'
							type='email'
							placeholder='john.doe@example.com'
							value={formData.email}
							onChange={(e) => handleInputChange('email', e.target.value)}
							required
						/>
					</div>
					<div className='space-y-2'>
						<Label htmlFor='password'>Password</Label>
						<Input
							id='password'
							type='password'
							placeholder='Enter your password'
							value={formData.password}
							onChange={(e) => handleInputChange('password', e.target.value)}
							required
							minLength={6}
						/>
					</div>
					<div className='space-y-2'>
						<Label htmlFor='confirmPassword'>Confirm Password</Label>
						<Input
							id='confirmPassword'
							type='password'
							placeholder='Confirm your password'
							value={formData.confirmPassword}
							onChange={(e) => handleInputChange('confirmPassword', e.target.value)}
							required
							minLength={6}
						/>
					</div>
					<Button type='submit' className='w-full' disabled={isLoading}>
						{isLoading ? 'Creating account...' : 'Create Account'}
					</Button>
				</form>
				<div className='mt-4 text-center'>
					<Button variant='link' onClick={() => router.push('/')} className='text-sm'>
						Already have an account? Sign in
					</Button>
				</div>
			</CardContent>
		</Card>
	);
}