import styles from './sign-up-form.module.scss';
import { useState, FormEvent } from 'react';
import { useForm } from '@inertiajs/react';
import PersonalInfo from './Personalnfo';
import AccountInfo from './AccountInfo';
import SecurityInfo from './SecurityInfo';

interface SignUpData {
  name: string
  country: string;
  username: string;
  phone: string;
  gender: string;
  preferredAsset: string;
  experience: string;
  password: string; 
  password_confirmation: string
}

const SignUpForm: React.FC = () => {
  const [step, setStep] = useState<number>(1);

  const { data, setData, put, processing } = useForm<SignUpData>({
    name: "",
    country: '',
    username: '',
    phone: '',
    gender: '',
    preferredAsset: '',
    experience: '',
    password: '', 
    password_confirmation: ''
  });

  const handleNextClick = () => setStep((prev) => Math.min(prev + 1, 3));
  const handlePrevClick = () => setStep((prev) => Math.max(prev - 1, 1));

  const handleSubmit = (e: FormEvent) => {
    e.preventDefault();
    put('/register/complete', {
      preserveScroll: true,
      onSuccess: () => console.log('Profile completed successfully!'),
      onError: (err) => console.error('Error:', err),
    });
  };

  return (
    <div className={styles.signup__form}>
      {/* Step Indicators */}
      <div className={styles.signup__form__steps}>
        {[1, 2, 3].map((num, index) => (
          <>
            <div
              key={num}
              className={
                step >= num
                  ? styles["signup__form__steps--active"]
                  : styles["signup__form__steps--step"]
              }
            >
              {num}
            </div>

            {index < 2 && (
              <div
                className={
                  step > num
                    ? styles["signup__form__steps__line--active"]
                    : styles["signup__form__steps__line"]
                }
              />
            )}
          </>
        ))}
      </div>

      {/* Form */}
      <form onSubmit={handleSubmit}>
        {step === 1 && (
          <div className="step-content">
            <PersonalInfo handleNextClick={handleNextClick} value={data} setData={setData} />
          </div>
        )}
        {step === 2 && (
          <div className="step-content">
            <AccountInfo
              handleNextClick={handleNextClick}
              handlePrevClick={handlePrevClick}
              value={data}
              setData={setData}
            />
          </div>
        )}
        {step === 3 && (
          <div className="step-content">
            <SecurityInfo
              handlePrevClick={handlePrevClick}
              handleSubmit={handleSubmit}
              value={data}
              setData={setData}
              processing={processing}
            />
          </div>
        )}
      </form>
    </div>
  );
};

export default SignUpForm;