the-tip-top-frontend/app/register/page.tsx

"use client";
import { useState } from "react";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { useAuth } from "@/contexts/AuthContext";
import { registerSchema, RegisterFormData } from "@/lib/validations";
import { Input } from "@/components/ui/Input";
import Button from "@/components/Button";
import { Card } from "@/components/ui/Card";
import Link from "next/link";
import Image from "next/image";
import { ROUTES } from "@/utils/constants";

export default function RegisterPage() {
  const { register: registerUser } = useAuth();
  const [isSubmitting, setIsSubmitting] = useState(false);

  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm<RegisterFormData>({
    resolver: zodResolver(registerSchema),
  });

  const onSubmit = async (data: RegisterFormData) => {
    setIsSubmitting(true);
    try {
      await registerUser(data);
    } catch (error) {
      console.error("Registration error:", error);
    } finally {
      setIsSubmitting(false);
    }
  };

  return (
    <div className="min-h-[calc(100vh-4rem)] flex items-center justify-center py-12">
      <Card className="w-full max-w-md p-8">
        <div className="text-center mb-8">
          <div className="flex justify-center mb-6">
            <Image
              src="/logos/logo.svg"
              alt="Thé Tip Top"
              width={120}
              height={120}
              priority
            />
          </div>
          <h1 className="text-3xl font-bold text-gray-900 mb-2">Inscription</h1>
          <p className="text-gray-600">
            Créez un compte pour participer au jeu-concours
          </p>
        </div>

        <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
          <div className="grid grid-cols-2 gap-4">
            <Input
              id="firstName"
              type="text"
              label="Prénom"
              placeholder="Jean"
              error={errors.firstName?.message}
              {...register("firstName")}
              required
            />

            <Input
              id="lastName"
              type="text"
              label="Nom"
              placeholder="Dupont"
              error={errors.lastName?.message}
              {...register("lastName")}
              required
            />
          </div>

          <Input
            id="email"
            type="email"
            label="Email"
            placeholder="votre.email@example.com"
            error={errors.email?.message}
            {...register("email")}
            required
          />

          <Input
            id="phone"
            type="tel"
            label="Téléphone"
            placeholder="0612345678"
            error={errors.phone?.message}
            helperText="Optionnel - Format: 06 12 34 56 78"
            {...register("phone")}
          />

          <Input
            id="password"
            type="password"
            label="Mot de passe"
            placeholder="••••••••"
            error={errors.password?.message}
            helperText="Min. 8 caractères, 1 majuscule, 1 minuscule, 1 chiffre"
            {...register("password")}
            required
          />

          <Input
            id="confirmPassword"
            type="password"
            label="Confirmer le mot de passe"
            placeholder="••••••••"
            error={errors.confirmPassword?.message}
            {...register("confirmPassword")}
            required
          />

          <div className="flex items-start">
            <div className="flex items-center h-5">
              <input
                id="terms"
                type="checkbox"
                required
                className="w-4 h-4 border border-gray-300 rounded bg-gray-50 focus:ring-3 focus:ring-blue-300"
              />
            </div>
            <label htmlFor="terms" className="ml-2 text-sm text-gray-700">
              J'accepte les{" "}
              <Link
                href="/terms"
                className="text-blue-600 hover:text-blue-700 hover:underline"
              >
                conditions d'utilisation
              </Link>{" "}
              et la{" "}
              <Link
                href="/privacy"
                className="text-blue-600 hover:text-blue-700 hover:underline"
              >
                politique de confidentialité
              </Link>
            </label>
          </div>

          <Button
            type="submit"
            isLoading={isSubmitting}
            disabled={isSubmitting}
            fullWidth
            size="lg"
          >
            S'inscrire
          </Button>
        </form>

        <p className="mt-8 text-center text-sm text-gray-600">
          Vous avez déjà un compte ?{" "}
          <Link
            href={ROUTES.LOGIN}
            className="font-medium text-blue-600 hover:text-blue-700 hover:underline"
          >
            Se connecter
          </Link>
        </p>
      </Card>
    </div>
  );
}