import React, { useState, useEffect } from 'react';
import { useForm } from 'react-hook-form';
import { __ } from '@wordpress/i18n';
import { apiService } from '../../../../../services/api.service';
import { AppInput } from '../../../../../shared/form';
import { ErrorMessage } from '../../../../../shared/error-message';
import { SignupRequestDto } from '../../../../../services/api.service.types';

export interface RegisterStep3FormData {
  email: string;
  password: string;
  confirmPassword: string;
}

export interface RegisterStep3Props {
  userType: 'Partner' | 'Location';
  language: string;
  formData: {
    businessName?: string;
    ownerName?: string;
    category?: string;
    partnerFirstName?: string;
    partnerPhone?: string;
  };
  onBack: () => void;
}

export function RegisterStep3({ userType, language, formData, onBack }: RegisterStep3Props): JSX.Element {
  const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
  const [submitError, setSubmitError] = useState<string | string[] | null>(null);

  const isPartner = userType === 'Partner';

  const {
    register,
    handleSubmit,
    watch,
    trigger,
    formState: { errors },
  } = useForm<RegisterStep3FormData>({
    mode: 'onBlur',
    defaultValues: {
      email: '',
      password: '',
      confirmPassword: '',
    },
  });

  const password = watch('password');
  const confirmPassword = watch('confirmPassword');

  // Re-validate confirm password when password changes, but only if confirmPassword has a value
  useEffect(() => {
    if (password && confirmPassword) {
      trigger('confirmPassword');
    }
  }, [password, trigger, confirmPassword]);

  const onSubmitForm = async (data: RegisterStep3FormData): Promise<void> => {
    setIsSubmitting(true);
    setSubmitError(null);

    const payload: SignupRequestDto = {
      user_type: userType,
      business_name: formData.businessName || '',
      owner_name: formData.ownerName || '',
      category: formData.category || '',
      email: data.email,
      password: data.password,
      confirm_password: data.confirmPassword,
      language,
    };

    if (userType === 'Partner') {
      payload.partner_first_name = formData.partnerFirstName || '';
      payload.partner_phone = formData.partnerPhone || '';
    }

    try {
      await apiService.signup(payload);
      // On success, reload the page (same as original JS behavior)
      window.location.reload();
    } catch (err) {
      const errorMsg = apiService.getErrorMessage(err);
      setSubmitError(errorMsg);
      setIsSubmitting(false);
    }
  };

  return (
    <div className="ttsbs-step w-full flex flex-col gap-4 items-center">
      <div className="w-full max-w-md flex flex-col items-center gap-8 bg-white shadow rounded-lg px-6 py-8">
        <div className="flex flex-col items-center gap-2">
          <h2 className="text-xl font-medium">{__('Sign up', 'timetailor-salon-booking')}</h2>
          <p className="text-center max-w-sm subtitle">
            {isPartner
              ? __('Create an account to finish setting up the booking system. You can invite your client later.', 'timetailor-salon-booking')
              : __('This account connects your WordPress site to the booking system.', 'timetailor-salon-booking')}
          </p>
        </div>

        <form className="w-full flex flex-col gap-4" onSubmit={handleSubmit(onSubmitForm)}>
          <AppInput
            label={__('EMAIL', 'timetailor-salon-booking')}
            type="email"
            register={register('email', {
              required: true,
              pattern: {
                value: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
                message: __('Must be a valid email address', 'timetailor-salon-booking'),
              },
            })}
            error={errors.email}
          />

          <AppInput
            type="password"
            label={__('PASSWORD', 'timetailor-salon-booking')}
            autoComplete="off"
            register={register('password', { required: true })}
            error={errors.password}
          />

          <AppInput
            type="password"
            label={__('CONFIRM PASSWORD', 'timetailor-salon-booking')}
            autoComplete="off"
            register={register('confirmPassword', {
              required: true,
              validate: (value: string) => value === password || __('Passwords do not match', 'timetailor-salon-booking'),
            })}
            error={errors.confirmPassword}
          />

          {submitError && (
            <div className="w-full">
              <ErrorMessage error={submitError} />
            </div>
          )}

          <div className="w-full flex items-center justify-between space-x-3">
            <button
              type="button"
              className="button button-large"
              onClick={onBack}
              disabled={isSubmitting}
            >
              {__('Back', 'timetailor-salon-booking')}
            </button>
            <button
              type="submit"
              className="flex-1 button button-primary button-large"
              disabled={isSubmitting}
            >
              {isSubmitting ? __('Signing up…', 'timetailor-salon-booking') : __('Sign up', 'timetailor-salon-booking')}
            </button>
          </div>
        </form>

        <p className="text-sm text-gray text-center max-w-sm">
          {__('By clicking Sign up, you agree to our', 'timetailor-salon-booking')}{' '}
          <a
            href="https://app.timetailor.com/terms"
            target="_blank"
            rel="noopener noreferrer"
            className="text-gray underline hover:text-primary"
          >
            {__('Terms & Conditions', 'timetailor-salon-booking')}
          </a>{' '}
          {__('and', 'timetailor-salon-booking')}{' '}
          <a
            href="https://app.timetailor.com/privacy"
            target="_blank"
            rel="noopener noreferrer"
            className="text-gray underline hover:text-primary"
          >
            {__('Privacy Policy', 'timetailor-salon-booking')}
          </a>
          .
        </p>
      </div>
    </div>
  );
}