deckhearth/pages/signup.js

/* eslint-disable @next/next/no-img-element -- External or generated image URLs; next/image migration is out of scope. */
import { useState, useEffect } from 'react';
import { useRouter } from 'next/router';
import Link from 'next/link';
import AuthLayout from '../components/AuthLayout';
import AnimatedFireLogo from '../components/AnimatedFireLogo';
import { VOCAB } from '../lib/collection-vocabulary.js';

export default function Signup() {
  const router = useRouter();
  const [formData, setFormData] = useState({
    email: '',
    password: '',
    confirmPassword: '',
    firstName: '',
    lastName: '',
    username: ''
  });
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState('');
  const [validationErrors, setValidationErrors] = useState({});
  const [profileImage, setProfileImage] = useState('');
  const [uploadedImage, setUploadedImage] = useState(null);
  const [imageLoading, setImageLoading] = useState(false);

  // Generate initial random avatar
  const generateRandomAvatar = async () => {
    setImageLoading(true);
    try {
      const seed = Math.random().toString(36).substring(7);
      const avatarUrl = `https://api.dicebear.com/9.x/adventurer-neutral/svg?seed=${seed}&size=200&backgroundColor=f3f4f6`;
      setProfileImage(avatarUrl);
      setUploadedImage(null); // Clear any uploaded image
    } catch (error) {
      console.error('Error generating avatar:', error);
    } finally {
      setImageLoading(false);
    }
  };

  useEffect(() => {
    // eslint-disable-next-line react-hooks/set-state-in-effect -- seed signup avatar preview on mount
    generateRandomAvatar();
  }, []);

  const handleInputChange = (field, value) => {
    setFormData(prev => ({
      ...prev,
      [field]: value
    }));
    // Clear errors when user starts typing
    if (error) setError('');
    if (validationErrors[field]) {
      setValidationErrors(prev => ({
        ...prev,
        [field]: ''
      }));
    }
  };

  const handleImageUpload = async (event) => {
    const file = event.target.files[0];
    if (!file) return;

    // Validate file type
    if (!file.type.startsWith('image/')) {
      setValidationErrors(prev => ({
        ...prev,
        image: 'Please select a valid image file'
      }));
      return;
    }

    // Validate file size (max 5MB)
    if (file.size > 5 * 1024 * 1024) {
      setValidationErrors(prev => ({
        ...prev,
        image: 'Image must be less than 5MB'
      }));
      return;
    }

    setImageLoading(true);
    try {
      // Create FormData for file upload
      const formData = new FormData();
      formData.append('file', file);

      const response = await fetch('/api/user/avatar', {
        method: 'POST',
        body: formData
      });

      if (response.ok) {
        const data = await response.json();
        setUploadedImage(data.url);
        setProfileImage(data.url);
        setValidationErrors(prev => {
          const newErrors = { ...prev };
          delete newErrors.image;
          return newErrors;
        });
      } else {
        throw new Error('Failed to upload image');
      }
    } catch (error) {
      console.error('Error uploading image:', error);
      setValidationErrors(prev => ({
        ...prev,
        image: 'Failed to upload image. Please try again.'
      }));
    } finally {
      setImageLoading(false);
    }
  };

  const validateForm = () => {
    const errors = {};

    // Email validation
    if (!formData.email) {
      errors.email = 'Email is required';
    } else if (!/\S+@\S+\.\S+/.test(formData.email)) {
      errors.email = 'Please enter a valid email address';
    }

    // Username validation
    if (!formData.username) {
      errors.username = 'Username is required';
    } else if (formData.username.length < 3) {
      errors.username = 'Username must be at least 3 characters';
    } else if (!/^[a-zA-Z0-9_]+$/.test(formData.username)) {
      errors.username = 'Username can only contain letters, numbers, and underscores';
    }

    // Password validation
    if (!formData.password) {
      errors.password = 'Password is required';
    } else if (formData.password.length < 6) {
      errors.password = 'Password must be at least 6 characters';
    }

    // Confirm password validation
    if (!formData.confirmPassword) {
      errors.confirmPassword = 'Please confirm your password';
    } else if (formData.password !== formData.confirmPassword) {
      errors.confirmPassword = 'Passwords do not match';
    }

    // Name validation
    if (!formData.firstName.trim()) {
      errors.firstName = 'First name is required';
    }

    if (!formData.lastName.trim()) {
      errors.lastName = 'Last name is required';
    }

    setValidationErrors(errors);
    return Object.keys(errors).length === 0;
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    
    if (!validateForm()) {
      return;
    }

    setLoading(true);
    setError('');

    try {
      const response = await fetch('/api/auth/register', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          email: formData.email,
          password: formData.password,
          firstName: formData.firstName,
          lastName: formData.lastName,
          username: formData.username,
          profileImage: profileImage // Send the current profile image (either uploaded or generated)
        })
      });

      const data = await response.json();

      if (response.ok) {
        // Store the JWT token in localStorage
        localStorage.setItem('auth_token', data.token);
        
        // Redirect to dashboard
        router.push('/dashboard');
      } else {
        setError(data.error || 'Registration failed');
      }
    } catch (error) {
      console.error('Registration error:', error);
      setError('Network error. Please try again.');
    } finally {
      setLoading(false);
    }
  };

  return (
    <AuthLayout>
      <div className="min-h-screen flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
        <div className="max-w-md w-full space-y-8">
          <div>
            <div className="text-center">
              <div className="mb-6 flex justify-center">
                <AnimatedFireLogo size={100} />
              </div>
              <h2 className="text-3xl font-bold gradient-text-flame mb-2">
                Join Deck Hearth
              </h2>
              <p className="mt-2 text-sm" style={{ color: 'var(--text-secondary)' }}>
                Create your account to start building {VOCAB.MY_COLLECTION}
              </p>
            </div>
          </div>

          <div 
            className="p-8 rounded-2xl shadow-2xl backdrop-blur-sm border border-opacity-20" 
            style={{ 
              backgroundColor: 'rgba(var(--bg-secondary-rgb), 0.85)',
              borderColor: 'var(--border)'
            }}
          >
            <form onSubmit={handleSubmit} className="space-y-6">
              {error && (
                <div className="p-4 rounded-lg bg-red-500 bg-opacity-10 border border-red-500 border-opacity-20 backdrop-blur-sm">
                  <p className="text-red-400 text-sm">{error}</p>
                </div>
              )}

              {/* Profile Image Section */}
              <div className="text-center">
                <label className="block text-sm font-medium mb-3" style={{ color: 'var(--text-primary)' }}>
                  Profile Image
                </label>
                <div className="flex flex-col items-center space-y-4">
                  <div className="relative">
                    {imageLoading ? (
                      <div 
                        className="w-24 h-24 rounded-full border-2 flex items-center justify-center backdrop-blur-sm"
                        style={{ 
                          borderColor: 'var(--border)',
                          backgroundColor: 'rgba(var(--bg-primary-rgb), 0.7)'
                        }}
                      >
                        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-orange-500"></div>
                      </div>
                    ) : (
                      <div 
                        className="w-24 h-24 rounded-full border-2 overflow-hidden"
                        style={{ borderColor: 'var(--border)' }}
                      >
                        {profileImage && (
                          <img
                            src={profileImage}
                            alt="Profile"
                            className="w-full h-full object-cover"
                          />
                        )}
                      </div>
                    )}
                  </div>
                  
                  <div className="flex flex-col space-y-2">
                    <label 
                      htmlFor="imageUpload"
                      className="px-4 py-2 rounded-lg text-sm font-medium cursor-pointer transition-all duration-200 hover:shadow-md backdrop-blur-sm border border-opacity-20"
                      style={{
                        backgroundColor: 'rgba(var(--bg-primary-rgb), 0.7)',
                        borderColor: 'var(--border)',
                        color: 'var(--text-primary)'
                      }}
                    >
                      Upload Image
                    </label>
                    <input
                      id="imageUpload"
                      type="file"
                      accept="image/*"
                      onChange={handleImageUpload}
                      className="hidden"
                    />
                    
                    <button
                      type="button"
                      onClick={generateRandomAvatar}
                      disabled={imageLoading}
                      className="px-4 py-2 rounded-lg text-sm font-medium transition-all duration-200 hover:shadow-md backdrop-blur-sm border border-opacity-20"
                      style={{
                        backgroundColor: 'rgba(var(--bg-primary-rgb), 0.7)',
                        borderColor: 'var(--border)',
                        color: 'var(--text-primary)'
                      }}
                    >
                      {imageLoading ? 'Generating...' : '🎲 Random Avatar'}
                    </button>
                  </div>
                  
                  {validationErrors.image && (
                    <p className="text-xs text-red-400">{validationErrors.image}</p>
                  )}
                </div>
              </div>

              <div className="grid grid-cols-2 gap-4">
                <div>
                  <label htmlFor="firstName" className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
                    First Name
                  </label>
                  <input
                    id="firstName"
                    name="firstName"
                    type="text"
                    required
                    value={formData.firstName}
                    onChange={(e) => handleInputChange('firstName', e.target.value)}
                    className="w-full px-4 py-3 rounded-lg border transition-all duration-200 focus:ring-2 focus:ring-orange-500 focus:border-transparent backdrop-blur-sm"
                    style={{
                      backgroundColor: 'rgba(var(--bg-primary-rgb), 0.7)',
                      borderColor: validationErrors.firstName ? '#ef4444' : 'var(--border)',
                      color: 'var(--text-primary)'
                    }}
                    placeholder="John"
                  />
                  {validationErrors.firstName && (
                    <p className="mt-1 text-xs text-red-400">{validationErrors.firstName}</p>
                  )}
                </div>

                <div>
                  <label htmlFor="lastName" className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
                    Last Name
                  </label>
                  <input
                    id="lastName"
                    name="lastName"
                    type="text"
                    required
                    value={formData.lastName}
                    onChange={(e) => handleInputChange('lastName', e.target.value)}
                    className="w-full px-4 py-3 rounded-lg border transition-all duration-200 focus:ring-2 focus:ring-orange-500 focus:border-transparent backdrop-blur-sm"
                    style={{
                      backgroundColor: 'rgba(var(--bg-primary-rgb), 0.7)',
                      borderColor: validationErrors.lastName ? '#ef4444' : 'var(--border)',
                      color: 'var(--text-primary)'
                    }}
                    placeholder="Doe"
                  />
                  {validationErrors.lastName && (
                    <p className="mt-1 text-xs text-red-400">{validationErrors.lastName}</p>
                  )}
                </div>
              </div>

              <div>
                <label htmlFor="username" className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
                  Username
                </label>
                <input
                  id="username"
                  name="username"
                  type="text"
                  required
                  value={formData.username}
                  onChange={(e) => handleInputChange('username', e.target.value)}
                  className="w-full px-4 py-3 rounded-lg border transition-all duration-200 focus:ring-2 focus:ring-orange-500 focus:border-transparent backdrop-blur-sm"
                  style={{
                    backgroundColor: 'rgba(var(--bg-primary-rgb), 0.7)',
                    borderColor: validationErrors.username ? '#ef4444' : 'var(--border)',
                    color: 'var(--text-primary)'
                  }}
                  placeholder="johndoe123"
                />
                {validationErrors.username && (
                  <p className="mt-1 text-xs text-red-400">{validationErrors.username}</p>
                )}
              </div>

              <div>
                <label htmlFor="email" className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
                  Email Address
                </label>
                <input
                  id="email"
                  name="email"
                  type="email"
                  autoComplete="email"
                  required
                  value={formData.email}
                  onChange={(e) => handleInputChange('email', e.target.value)}
                  className="w-full px-4 py-3 rounded-lg border transition-all duration-200 focus:ring-2 focus:ring-orange-500 focus:border-transparent backdrop-blur-sm"
                  style={{
                    backgroundColor: 'rgba(var(--bg-primary-rgb), 0.7)',
                    borderColor: validationErrors.email ? '#ef4444' : 'var(--border)',
                    color: 'var(--text-primary)'
                  }}
                  placeholder="john@example.com"
                />
                {validationErrors.email && (
                  <p className="mt-1 text-xs text-red-400">{validationErrors.email}</p>
                )}
              </div>

              <div>
                <label htmlFor="password" className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
                  Password
                </label>
                <input
                  id="password"
                  name="password"
                  type="password"
                  autoComplete="new-password"
                  required
                  value={formData.password}
                  onChange={(e) => handleInputChange('password', e.target.value)}
                  className="w-full px-4 py-3 rounded-lg border transition-all duration-200 focus:ring-2 focus:ring-orange-500 focus:border-transparent backdrop-blur-sm"
                  style={{
                    backgroundColor: 'rgba(var(--bg-primary-rgb), 0.7)',
                    borderColor: validationErrors.password ? '#ef4444' : 'var(--border)',
                    color: 'var(--text-primary)'
                  }}
                  placeholder="At least 6 characters"
                />
                {validationErrors.password && (
                  <p className="mt-1 text-xs text-red-400">{validationErrors.password}</p>
                )}
              </div>

              <div>
                <label htmlFor="confirmPassword" className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
                  Confirm Password
                </label>
                <input
                  id="confirmPassword"
                  name="confirmPassword"
                  type="password"
                  autoComplete="new-password"
                  required
                  value={formData.confirmPassword}
                  onChange={(e) => handleInputChange('confirmPassword', e.target.value)}
                  className="w-full px-4 py-3 rounded-lg border transition-all duration-200 focus:ring-2 focus:ring-orange-500 focus:border-transparent backdrop-blur-sm"
                  style={{
                    backgroundColor: 'rgba(var(--bg-primary-rgb), 0.7)',
                    borderColor: validationErrors.confirmPassword ? '#ef4444' : 'var(--border)',
                    color: 'var(--text-primary)'
                  }}
                  placeholder="Confirm your password"
                />
                {validationErrors.confirmPassword && (
                  <p className="mt-1 text-xs text-red-400">{validationErrors.confirmPassword}</p>
                )}
              </div>

              <div>
                <button
                  type="submit"
                  disabled={loading}
                  className={`w-full px-4 py-3 rounded-lg font-medium transition-all duration-200 ${
                    loading 
                      ? 'opacity-50 cursor-not-allowed' 
                      : 'gradient-bg-ember text-white hover:shadow-xl transform hover:scale-105 hover:shadow-orange-500/20'
                  }`}
                >
                  {loading ? (
                    <div className="flex items-center justify-center">
                      <div className="animate-spin rounded-full h-5 w-5 border-b-2 border-white mr-2"></div>
                      Creating Account...
                    </div>
                  ) : (
                    'Create Account'
                  )}
                </button>
              </div>

              <div className="text-center">
                <p className="text-sm" style={{ color: 'var(--text-secondary)' }}>
                  Already have an account?{' '}
                  <Link href="/login" className="font-medium gradient-text-flame hover:underline">
                    Sign in here
                  </Link>
                </p>
              </div>
            </form>
          </div>
        </div>
      </div>
    </AuthLayout>
  );
}