import FormRenderer from '@/components/common/form-renderer';
import PageHeading from '@/components/common/page-heading';
import { Button } from '@/components/ui/button';
import { Form } from '@/components/ui/form';
import { Separator } from '@/components/ui/separator';
import { createRequest } from '@/data/request/create-request';
import { FormFieldType } from '@/types/form-field-type';
import { zodResolver } from '@hookform/resolvers/zod';
import { PaperPlaneTiltIcon } from '@phosphor-icons/react';
import { useTransition } from 'react';
import { useForm } from 'react-hook-form';
import { useTranslation } from 'react-i18next';
import { toast } from 'sonner';
import z from 'zod';

export const NotifySchema = z.object({
  title: z.string().min(1, 'Notification title is required'),
  message: z.string().min(1, 'Notification message is required'),
  type: z.string().min(1, 'Notification type is required'),
  link: z.string().optional(),
});

export type TNotifyData = z.infer<typeof NotifySchema>;

const SendNotification = () => {
  const [isPending, startTransition] = useTransition();
  const { t } = useTranslation();

  const form = useForm<TNotifyData>({
    resolver: zodResolver(NotifySchema),
    defaultValues: {
      title: '',
      message: '',
      type: 'info',
      link: '',
    },
  });

  const types = [
    { label: t('Info'), value: 'info' },
    { label: t('Warning'), value: 'warning' },
    { label: t('Success'), value: 'success' },
    { label: t('Error'), value: 'error' },
  ];

  const formFields: FormFieldType[] = [
    {
      id: 1,
      key: 'title',
      name: 'title',
      label: t('Title'),
      placeholder: t('Enter notification title'),
      type: 'text',
    },
    {
      id: 2,
      key: 'message',
      name: 'message',
      label: t('Message'),
      placeholder: t('Enter notification message'),
      type: 'textarea',
    },
    {
      id: 3,
      key: 'type',
      name: 'type',
      label: t('Type'),
      placeholder: t('Select notification type'),
      type: 'select',
      options: types,
    },
    {
      id: 4,
      key: 'link',
      name: 'link',
      label: t('Link (optional)'),
      placeholder: t('Enter link'),
      type: 'text',
    },
  ];

  const onSubmit = (data: TNotifyData) => {
    startTransition(async () => {
      const res = await createRequest({
        url: '/api/admin/users/send-notification-all',
        formData: data,
      });

      if (res?.success) {
        toast.success(res?.message);
        form.reset();
      }
    });
  };

  return (
    <Form {...form}>
      <form onSubmit={form.handleSubmit(onSubmit)}>
        <PageHeading
          title={t('Send Notification')}
          description={t('Send a notification to all users on the platform.')}
          actionButton={
            <Button
              type="submit"
              variant="default"
              className="capitalize"
              loading={isPending}
            >
              <PaperPlaneTiltIcon weight="bold" />
              {t('Send Notification')}
            </Button>
          }
        />
        <Separator />

        <div className="space-y-4 rounded-xl bg-white p-6 shadow-box">
          {formFields.map((item) => (
            <FormRenderer form={form} key={item.id} item={item} />
          ))}
        </div>
      </form>
    </Form>
  );
};

SendNotification.title = 'Send Notification';

export default SendNotification;