dyolink/frontend/src/app/(public)/register/page.tsx

// src/app/register/page.tsx\
'use client';
import { useState } from 'react';
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import * as z from 'zod';
import Link from 'next/link';
import { Building2, Mail, Lock, User, ChevronRight } from 'lucide-react';
import { useAuth } from '@/lib/hooks/useAuth';
import { Button } from '@/components/ui/common/Button';
import { Input } from '@/components/ui/common/Input';
const registerSchema = z.object({
    name: z.string().min(2, 'Name must be at least 2 characters'),
    email: z.string().email('Please enter a valid email address'),
    password: z.string()
        .min(8, 'Password must be at least 8 characters')
        .regex(/[A-Z]/, 'Password must contain at least one uppercase letter')
        .regex(/[0-9]/, 'Password must contain at least one number'),
    confirmPassword: z.string(),
    organizationName: z.string().min(2, 'Organization name must be at least 2 characters'),
    organizationEmail: z.string().email('Please enter a valid organization email'),
    organizationType: z.enum(['CLINIC', 'LAB'], {
        message: 'Please select organization type',
    }),
}).refine((data) => data.password === data.confirmPassword, {
    message: "Passwords don't match",
    path: ['confirmPassword'],
});
type RegisterForm = z.infer<typeof registerSchema>;

export default function RegisterPage() {
    const { registerTrial, isLoading } = useAuth();
    const [step, setStep] = useState(1);
    const [error, setError] = useState<string | null>(null);
    
    const {
        register,
        handleSubmit,
        watch,
        formState: { errors },
        trigger,
        setValue,
    } = useForm<RegisterForm>({
        resolver: zodResolver(registerSchema),
        mode: 'onChange',
    });
    const organizationType = watch('organizationType');
    const handleNext = async () => {
        const fieldsToValidate = step === 1
            ? ['name', 'email', 'password', 'confirmPassword']
            : ['organizationName', 'organizationEmail', 'organizationType'];

        const isValid = await trigger(fieldsToValidate as any);
        if (isValid) {
            setStep(step + 1);
        }
    };
    const onSubmit = async (data: RegisterForm) => {
        try {
            setError(null);
            await registerTrial(
                data.email,
                data.password,
                data.name,
                data.organizationName,
                data.organizationEmail,
                data.organizationType
            );
            // No need to redirect - auth context will handle it
        } catch (err: any) {
            setError(err.message || 'Registration failed. Please try again.');
        }
    };
    return (
        <div className="min-h-screen app-web-bg flex flex-col justify-center py-12 sm:px-6 lg:px-8">
            <div className="sm:mx-auto sm:w-full sm:max-w-md">
                <Link href="/" className="flex justify-center">
                    <span className="text-3xl font-semibold text-text-primary">DyoLink</span>
                </Link>
                <h2 className="mt-6 text-center text-3xl font-semibold text-text-primary">
                    Start your 30-day free trial
                </h2>
                <p className="mt-2 text-center text-sm text-text-secondary">
                    Already have an account?{' '}
                    <Link href="/login" className="font-medium text-primary hover:opacity-90">
                        Sign in
                    </Link>
                </p>
            </div>
            <div className="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
                <div className="surface-card py-8 px-4 sm:px-10">
                    {/* Progress Steps */}
                    <div className="mb-8">
                        <div className="flex items-center justify-between">
                            <div className="flex items-center">
                                <div className={`w-8 h-8 rounded-full flex items-center justify-center ${step >= 1 ? 'bg-primary text-primary-contrast' : 'bg-background-secondary text-text-secondary border border-border'}`}>
                                    1
                                </div>
                                <div className={`ml-2 text-sm font-medium ${step >= 1 ? 'text-primary' : 'text-text-muted'
                                    }`}>
                                    Account
                                </div>
                            </div>
                            <ChevronRight className="h-5 w-5 text-text-muted icon-flat" />
                            <div className="flex items-center">
                                <div className={`w-8 h-8 rounded-full flex items-center justify-center ${step >= 2 ? 'bg-primary text-primary-contrast' : 'bg-background-secondary text-text-secondary border border-border'}`}>

                                    2
                                </div>
                                <div className={`ml-2 text-sm font-medium ${step >= 2 ? 'text-primary' : 'text-text-muted'
                                    }`}>
                                    Organization
                                </div>
                            </div>
                        </div>
                    </div>
                    {/* Trial Info Banner */}
                    <div className="mb-6 p-4 bg-primary-soft rounded-[var(--radius-md)] border border-primary/35">
                        <h3 className="text-sm font-medium text-text-primary mb-2">Your trial
                            includes:</h3>
                        <ul className="text-sm text-text-secondary space-y-1">
                            <li className="flex items-center">
                                <span className="mr-2">✓</span> Up to 5 team members
                            </li>
                            <li className="flex items-center">
                                <span className="mr-2">✓</span> Full access to all features
                            </li>
                            <li className="flex items-center">
                                <span className="mr-2">✓</span> 30 days free, no credit card
                                required
                            </li>
                        </ul>
                    </div>
                    <form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
                        {step === 1 && (
                            <>
                                <Input
                                    label="Full name"
                                    {...register('name')}
                                    placeholder="John Doe"
                                    error={errors.name?.message}
                                    icon={<User className="h-5 w-5 icon-flat" />}
                                />
                                <Input
                                    label="Email address"
                                    {...register('email')}
                                    type="email"
                                    placeholder="you@example.com"
                                    error={errors.email?.message}
                                    icon={<Mail className="h-5 w-5 icon-flat" />}
                                />
                                <Input
                                    label="Password"
                                    {...register('password')}
                                    type="password"
                                    placeholder="••••••••"
                                    error={errors.password?.message}
                                    icon={<Lock className="h-5 w-5 icon-flat" />}
                                />
                                <Input
                                    label="Confirm password"
                                    {...register('confirmPassword')}
                                    type="password"
                                    placeholder="••••••••"
                                    error={errors.confirmPassword?.message}
                                    icon={<Lock className="h-5 w-5 icon-flat" />}
                                />
                                <Button
                                    type="button"
                                    variant="primary"
                                    onClick={handleNext}
                                    fullWidth
                                >
                                    Continue
                                </Button>
                            </>
                        )}
                        {step === 2 && (
                            <>
                                <Input
                                    label="Organization name"
                                    {...register('organizationName')}
                                    placeholder="Sunshine Dental Clinic"
                                    error={errors.organizationName?.message}
                                    icon={<Building2 className="h-5 w-5 icon-flat" />}
                                />
                                <Input
                                    label="Organization email"
                                    {...register('organizationEmail')}
                                    type="email"
                                    placeholder="contact@sunshineclinic.com"
                                    error={errors.organizationEmail?.message}
                                    icon={<Mail className="h-5 w-5 icon-flat" />}
                                />
                                <div>
                                    <label className="block text-sm font-medium text-text-secondary mb-2">
                                        Organization type
                                    </label>
                                    <input type="hidden" {...register('organizationType')} />
                                    <div className="grid grid-cols-2 gap-4">
                                        <button
                                            type="button"
                                            onClick={() => {
                                                setValue('organizationType', 'CLINIC', { shouldValidate: true });
                                            }}
                                            className={`p-4 border rounded-[var(--radius-md)] text-center transition-colors ${organizationType === 'CLINIC' ? 'border-primary/60 bg-primary-soft text-text-primary'
                                                : 'border-border text-text-secondary hover:border-border-strong'
                                                }`}
                                        >
                                            <Building2 className="h-8 w-8 mx-auto mb-2 icon-flat" />
                                            <span className="text-sm font-medium">Dental Clinic</span>
                                        </button>
                                        <button
                                            type="button"
                                            onClick={() => {
                                                setValue('organizationType', 'LAB', { shouldValidate: true });
                                            }}
                                            className={`p-4 border rounded-[var(--radius-md)] text-center transition-colors ${organizationType === 'LAB'
                                                ? 'border-primary/60 bg-primary-soft text-text-primary'
                                                : 'border-border text-text-secondary hover:border-border-strong'
                                                }`}
                                        >
                                            <Building2 className="h-8 w-8 mx-auto mb-2 icon-flat" />
                                            <span className="text-sm font-medium">Dental Lab</span>
                                        </button>
                                    </div>
                                    {errors.organizationType && (
                                        <p className="mt-2 text-sm text-red-600">{errors.organizationType.message}</p>
                                    )}
                                </div>
                                {error && (
                                    <div className="p-3 bg-red-950/30 border border-red-600/40 rounded-[var(--radius-md)]">
                                        <p className="text-sm text-red-600">{error}</p>
                                    </div>
                                )}
                                <div className="flex gap-3">
                                    <Button
                                        type="button"
                                        variant="outline"
                                        onClick={() => setStep(1)}
                                    >
                                        Back
                                    </Button>
                                    <Button
                                        type="submit"
                                        variant="primary"
                                        isLoading={isLoading}
                                        fullWidth
                                    >
                                        Start my free trial
                                    </Button>
                                </div>
                            </>
                        )}
                    </form>
                    <p className="mt-6 text-xs text-center text-text-muted">
                        By signing up, you agree to our{' '}
                        <Link href="/terms" className="text-primary hover:opacity-90">
                            Terms of Service
                        </Link>{' '}
                        and{' '}
                        <Link href="/privacy" className="text-primary hover:opacity-90">
                            Privacy Policy
                        </Link>
                    </p>
                </div>
            </div>

        </div>
    );
}