import { Button } from '@/components/ui/button';
import { ButtonGroup, ButtonGroupText } from '@/components/ui/button-group';
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from '@/components/ui/form';
import { Input } from '@/components/ui/input';
import { InputGroup, InputGroupInput } from '@/components/ui/input-group';
import { Separator } from '@/components/ui/separator';
import {
  Sheet,
  SheetClose,
  SheetContent,
  SheetFooter,
  SheetHeader,
  SheetTitle,
} from '@/components/ui/sheet';
import { updateRequest } from '@/data/request/update-request';
import { TCronJob } from '@/types/admin/cron-job.types';
import { zodResolver } from '@hookform/resolvers/zod';
import { useEffect, useTransition } from 'react';
import { useForm } from 'react-hook-form';
import { useTranslation } from 'react-i18next';
import { toast } from 'sonner';
import { z } from 'zod';

const schema = z.object({
  name: z.string().min(1, 'Name is required').max(100),
  command: z.string().min(1, 'Command is required').max(255),
  schedule_minutes: z
    .string()
    .min(1, 'Schedule is required')
    .refine((v) => Number(v) >= 1, 'Must be at least 1 minute'),
});

type TFormData = z.infer<typeof schema>;

type Props = {
  item: TCronJob | null;
  onClose: () => void;
  refresh: () => void;
};

export default function EditCronJob({ item, onClose, refresh }: Props) {
  const { t } = useTranslation();
  const [isPending, startTransition] = useTransition();

  const form = useForm<TFormData>({
    resolver: zodResolver(schema),
    defaultValues: { name: '', command: '', schedule_minutes: '5' },
  });

  useEffect(() => {
    if (item) {
      form.reset({
        name: item.name,
        command: item.command ?? '',
        schedule_minutes: String(item.schedule_minutes),
      });
    }
  }, [item, form]);

  const onSubmit = (data: TFormData) => {
    if (!item) return;
    startTransition(async () => {
      const res = await updateRequest({
        url: `/api/admin/cron-jobs/${item.id}`,
        formData: { ...data, schedule_minutes: Number(data.schedule_minutes) },
      });
      if (res?.success) {
        toast.success(res.message);
        refresh();
        onClose();
      }
    });
  };

  return (
    <Sheet open={!!item} onOpenChange={(open) => !open && onClose()}>
      <SheetContent>
        <Form {...form}>
          <form
            onSubmit={form.handleSubmit(onSubmit)}
            className="flex h-full flex-col justify-between"
          >
            <SheetHeader>
              <SheetTitle>{t('Edit Cron Job')}</SheetTitle>
            </SheetHeader>
            <div className="mx-4 space-y-4 rounded-xl border border-black/5 p-4">
              <h4 className="text-lg font-medium">{t('Job Details')}</h4>
              <Separator />
              <FormField
                control={form.control}
                name="name"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>{t('Name')}</FormLabel>
                    <FormControl>
                      <Input {...field} />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />
              <FormField
                control={form.control}
                name="command"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>{t('Artisan Command')}</FormLabel>
                    <FormControl>
                      <Input {...field} />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />
              <FormField
                control={form.control}
                name="schedule_minutes"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>{t('Schedule')}</FormLabel>
                    <FormControl>
                      <ButtonGroup className="w-full">
                        <InputGroup>
                          <InputGroupInput
                            inputMode="numeric"
                            {...field}
                            onChange={(e) =>
                              field.onChange(
                                e.target.value.replace(/[^0-9]/g, ''),
                              )
                            }
                          />
                        </InputGroup>
                        <ButtonGroupText>{t('Minutes')}</ButtonGroupText>
                      </ButtonGroup>
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />
            </div>
            <SheetFooter>
              <Button type="submit" loading={isPending} disabled={isPending}>
                {t('Save Changes')}
              </Button>
              <SheetClose asChild>
                <Button variant="outline" onClick={onClose}>
                  {t('Close')}
                </Button>
              </SheetClose>
            </SheetFooter>
          </form>
        </Form>
      </SheetContent>
    </Sheet>
  );
}