import React, { useState } 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';

export interface LoginFormData {
  email: string;
  password: string;
}

export interface LoginProps {
  onBackToRegister: () => void;
}

export function Login({ onBackToRegister }: LoginProps): JSX.Element {
  const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
  const [submitError, setSubmitError] = useState<string | string[] | null>(null);

  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm<LoginFormData>({
    defaultValues: {
      email: '',
      password: '',
    },
  });

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

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

  const handleBackToRegister = (): void => {
    onBackToRegister();
  };

  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">{__('Login', 'timetailor-salon-booking')}</h2>
        </div>

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

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

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

          <button
            type="submit"
            className="w-full button button-primary button-large"
            disabled={isSubmitting}
          >
            {isSubmitting ? __('Logging in…', 'timetailor-salon-booking') : __('Log in', 'timetailor-salon-booking')}
          </button>
        </form>
      </div>

      <div className="flex items-center justify-between">
        {__("Don't have an account?", 'timetailor-salon-booking')}&nbsp;
        <a href="#" className="underline" onClick={handleBackToRegister}>
          <span>{__('Sign up', 'timetailor-salon-booking')}</span>
        </a>
      </div>
    </div>
  );
}