import {
  Alert,
  Button,
  Card,
  Checkbox,
  Paper,
  PasswordInput,
  Text,
  TextInput,
  Title,
} from '@pikku/mantine/core';
import { useForm } from 'react-hook-form';
import { useI18n } from '@/context/i18n-provider';
import classes from './LoginComponent.module.css';

export type LoginFormData = {
  email: string;
  password: string;
  rememberMe: boolean;
};

export interface LoginComponentProps {
  namespace: 'backoffice' | 'company';
  mutation: {
    mutateAsync: (data: { email: string; password: string }) => Promise<any>;
    isPending: boolean;
    error: Error | null;
  };
}

export function LoginComponent({ namespace, mutation }: LoginComponentProps) {
  const t = useI18n();
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm<LoginFormData>({
    defaultValues: {
      email: '',
      password: '',
      rememberMe: false,
    },
  });

  const onSubmit = async (data: LoginFormData) => {
    await mutation.mutateAsync({
      email: data.email,
      password: data.password,
    })
  };

  return (
    <div className={classes.wrapper}>
      <Paper w='100%' maw={450} p='xl' withBorder>
        <Title order={1} mb='lg'>
          {t(`login.${namespace}.title` as any)}
        </Title>

        <form onSubmit={handleSubmit(onSubmit)}>
          {mutation.error && (
            <Alert color="red" title={t('login.error.title')} mb="md">
              <Text size="sm">
                {t('login.error.message')}
              </Text>
            </Alert>
          )}

          <TextInput
            type="email"
            label={t('login.emaillabel')}
            placeholder={t('login.emailplaceholder')}
            size="md"
            radius="md"
            {...register('email', {
              required: t('login.validation.emailrequired'),
              pattern: {
                value: /^\S+@\S+$/,
                message: t('login.validation.emailinvalid'),
              },
            })}
            error={errors.email?.message}
          />
          <PasswordInput
            type="password"
            label={t('login.passwordlabel')}
            placeholder={t('login.passwordplaceholder')}
            mt="md"
            size="md"
            radius="md"
            {...register('password', {
              required: t('login.validation.passwordrequired'),
              minLength: {
                value: 6,
                message: t('login.validation.passwordminlength'),
              },
            })}
            error={errors.password?.message}
          />
          <Checkbox
            label={t('login.rememberme')}
            mt="xl"
            size="md"
            {...register('rememberMe')}
          />
          <Button
            fullWidth
            mt="xl"
            size="md"
            radius="md"
            type="submit"
            loading={mutation.isPending}
          >
            {t('login.loginbutton')}
          </Button>
        </form>
      </Paper>
    </div>
  );
}