'use client';

import useGlobalStore from '@/config/use-global';
import { updateUserNotify } from '@/services/user/user';
import { zodResolver } from '@hookform/resolvers/zod';
import { Button } from '@workspace/airo-ui/components/button';
import { Card } from '@workspace/airo-ui/components/card';
import { useEffect } from 'react';

import { AiroButton } from '@workspace/airo-ui/components/AiroButton';
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
} from '@workspace/airo-ui/components/form';
import { Switch } from '@workspace/airo-ui/components/switch';
import { useTranslations } from 'next-intl';
import { useForm } from 'react-hook-form';
import { toast } from 'sonner';
import { z } from 'zod';

const FormSchema = z.object({
  enable_balance_notify: z.boolean().default(false),
  enable_login_notify: z.boolean().default(false),
  enable_subscribe_notify: z.boolean().default(false),
  enable_trade_notify: z.boolean().default(false),
});

export default function NotifySettings() {
  const t = useTranslations('profile');
  const { user, getUserInfo } = useGlobalStore();
  const form = useForm<z.infer<typeof FormSchema>>({
    resolver: zodResolver(FormSchema),
    defaultValues: {
      enable_balance_notify: user?.enable_balance_notify ?? false,
      enable_login_notify: user?.enable_login_notify ?? false,
      enable_subscribe_notify: user?.enable_subscribe_notify ?? false,
      enable_trade_notify: user?.enable_trade_notify ?? false,
    },
  });
  // 监听 user 变化，更新表单
  useEffect(() => {
    if (user) {
      form.reset({
        enable_balance_notify: user.enable_balance_notify ?? false,
        enable_login_notify: user.enable_login_notify ?? false,
        enable_subscribe_notify: user.enable_subscribe_notify ?? false,
        enable_trade_notify: user.enable_trade_notify ?? false,
      });
    }
  }, [user, form]);

  async function onSubmit(data: z.infer<typeof FormSchema>) {
    await updateUserNotify(data);
    toast.success(t('notify.updateSuccess'));
    await getUserInfo();
  }

  return (
    <Card className='flex h-full flex-col justify-between 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-0'}>
        <div className={'ml-1 flex items-center justify-between font-bold sm:mb-2 sm:text-xl'}>
          {t('notify.notificationSettings')}
          <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('notify.save')}
          </Button>
        </div>
        <div className={'ml-1 text-xs font-light sm:mt-1 sm:text-sm'}>
          {' '}
          {t('notify.description')}
        </div>
      </div>
      <div className={'flex flex-1 flex-col justify-end'}>
        <Form {...form}>
          <form
            id='notify-form'
            onSubmit={form.handleSubmit(onSubmit)}
            className='space-y-2 sm:space-y-2.5'
          >
            <div className='grid grid-cols-2 gap-2.5 sm:grid-cols-1'>
              {[
                { name: 'enable_balance_notify', label: 'balanceChange' },
                { name: 'enable_login_notify', label: 'login' },
                { name: 'enable_subscribe_notify', label: 'subscribe' },
                { name: 'enable_trade_notify', label: 'finance' },
              ].map(({ name, label }) => (
                <FormField
                  key={name}
                  control={form.control}
                  name={name as any}
                  render={({ field }) => (
                    <FormItem className='flex flex-col items-center justify-center rounded-[20px] bg-[#EAEAEA] py-2.5'>
                      <FormLabel className='text-muted-foreground text-sm text-[#848484]'>
                        {t(`notify.${label}`)}
                      </FormLabel>
                      <FormControl>
                        <Switch
                          className={
                            'data-[state=checked]:border-[#87ACC8] data-[state=unchecked]:border-[#B1B2BC] data-[state-unchecked]:bg-[#D9D9D9] data-[state=checked]:bg-[#A8D4ED]'
                          }
                          thumbClassName={'border-[#D9D9D9] border'}
                          checked={field.value}
                          onCheckedChange={field.onChange}
                        />
                      </FormControl>
                    </FormItem>
                  )}
                />
              ))}
            </div>
          </form>
        </Form>
      </div>
      <div className={'mt-8 hidden justify-center sm:flex'}>
        <AiroButton type='submit' form='notify-form'>
          {t('notify.save')}
        </AiroButton>
      </div>
    </Card>
  );
}