'use client';

import { updateUserPassword } from '@/services/user/user';
import { zodResolver } from '@hookform/resolvers/zod';
import { AiroButton } from '@workspace/airo-ui/components/AiroButton';
import { Button } from '@workspace/airo-ui/components/button';
import { Card } from '@workspace/airo-ui/components/card';
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormMessage,
} from '@workspace/airo-ui/components/form';
import { Input } from '@workspace/airo-ui/components/input';
import { useTranslations } from 'next-intl';
import { useForm } from 'react-hook-form';
import { toast } from 'sonner';
import { z } from 'zod';

const FormSchema = z
  .object({
    password: z.string().min(6),
    repeat_password: z.string(),
  })
  .refine((data) => data.password === data.repeat_password, {
    message: 'passwordMismatch',
    path: ['repeat_password'],
  });

export default function ChangePassword() {
  const t = useTranslations('profile.accountSettings');
  const form = useForm<z.infer<typeof FormSchema>>({
    resolver: zodResolver(FormSchema),
  });

  async function onSubmit(data: z.infer<typeof FormSchema>) {
    await updateUserPassword({ password: data.password });
    toast.success(t('updateSuccess'));
    form.reset();
  }

  return (
    <Card className='min-w-80 rounded-[20px] border border-[#D9D9D9] p-4 text-[#666666] shadow-[0px_0px_52.6px_1px_rgba(15,44,83,0.05)] sm:p-6'>
      <div className={'mb-3 sm:mb-5'}>
        <div className={'ml-1 flex items-center justify-between font-bold sm:mb-2 sm:text-xl'}>
          {t('accountSettings')}
          <Button
            type='submit'
            size='sm'
            form='password-form'
            className={
              'h-[32px] w-[110px] rounded-[50px] border-0 border-[#0F2C53] bg-[#0F2C53] text-center text-base font-medium leading-[32px] text-white transition hover:bg-[#225BA9] hover:text-white sm:hidden'
            }
          >
            {t('save')}
          </Button>
        </div>
        <div className={'ml-1 text-xs font-light sm:mt-1 sm:text-sm'}>{t('description')}</div>
      </div>
      <Form {...form}>
        <form
          id='password-form'
          onSubmit={form.handleSubmit(onSubmit)}
          className='space-y-2.5 sm:space-y-5'
        >
          <FormField
            control={form.control}
            name='password'
            render={({ field }) => (
              <FormItem>
                <FormControl>
                  <Input
                    className={
                      'line-clamp-1 h-[46px] flex-1 rounded-full px-5 text-base !leading-[46px] shadow-[inset_0_0_7.6px_0_#00000040]'
                    }
                    type='password'
                    placeholder={t('newPassword')}
                    {...field}
                  />
                </FormControl>
                <FormMessage />
              </FormItem>
            )}
          />
          <FormField
            control={form.control}
            name='repeat_password'
            render={({ field }) => (
              <FormItem>
                <FormControl>
                  <Input
                    className={
                      'line-clamp-1 h-[46px] flex-1 rounded-full px-5 text-base !leading-[46px] shadow-[inset_0_0_7.6px_0_#00000040]'
                    }
                    type='password'
                    placeholder={t('repeatNewPassword')}
                    {...field}
                  />
                </FormControl>
                <FormMessage />
              </FormItem>
            )}
          />
        </form>
      </Form>
      <div className={'mt-5 hidden justify-center sm:flex'}>
        <AiroButton type='submit' variant={'default'} form='password-form'>
          {t('save')}
        </AiroButton>
      </div>
    </Card>
  );
}
