'use client';

/* IMPORT */
import { Button } from '@/components/ui/button';
import { duplicateTemplate, getCurrentUserId } from '../service';
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
  FormDescription,
} from '@/components/ui/form';
import { getCategoryDisplayName } from '../validations';
import { Input } from '@/components/ui/input';
import { Loader } from 'lucide-react';
import {
  Sheet,
  SheetClose,
  SheetContent,
  SheetDescription,
  SheetFooter,
  SheetHeader,
  SheetTitle,
} from '@/components/ui/sheet';
import { toast } from 'sonner';
import { type ComponentPropsWithRef, useEffect, useTransition } from 'react';
import { type TemplateListView } from '@/db/schema';
import { useForm } from 'react-hook-form';
import { useRouter } from 'next/navigation';
import { z } from 'zod';
import { zodResolver } from '@hookform/resolvers/zod';

// ----------------------------------------------------------------------------------------------------

/* TYPES */
const duplicateTemplateSchema = z.object({
  name: z.string()
    .min(1, '템플릿 이름은 필수입니다.')
    .max(100, '템플릿 이름은 100자 이하여야 합니다.'),
  slug: z.string()
    .min(1, 'Slug는 필수입니다.')
    .max(50, 'Slug는 50자 이하여야 합니다.')
    .regex(/^[a-z0-9-]+$/, 'Slug는 소문자, 숫자, 하이픈만 사용 가능합니다.'),
});
type DuplicateTemplateSchema = z.infer<typeof duplicateTemplateSchema>;
interface DuplicateTemplateSheetProps extends ComponentPropsWithRef<typeof Sheet> {
  template: TemplateListView | null;
}

// ----------------------------------------------------------------------------------------------------

/* DUPLICATE EMAIL TEMPLATE SHEET COMPONENT */
function DuplicateTemplateSheet({ template, ...props }: DuplicateTemplateSheetProps) {
  const [isDuplicatePending, startDuplicateTransition] = useTransition();
  const form = useForm<DuplicateTemplateSchema>({
    resolver: zodResolver(duplicateTemplateSchema),
    defaultValues: {
      name: '',
      slug: '',
    },
  })
  const router = useRouter();
  const watchedName = form.watch('name');

  useEffect(() => {
    if (template) {
      const copyName = `${template.name} (복사본)`;
      const copySlug = `${template.slug}-copy-${Date.now()}`;
      form.reset({
        name: copyName,
        slug: copySlug,
      });
    }
  }, [template, form]);

  useEffect(() => {
    if (watchedName && !form.formState.dirtyFields.slug) {
      const autoSlug = watchedName
        .toLowerCase()
        .replace(/[^a-z0-9\s-]/g, '')
        .replace(/\s+/g, '-')
        .replace(/-+/g, '-')
        .trim()
        .slice(0, 50);
      form.setValue('slug', autoSlug, { shouldValidate: false });
    }
  }, [watchedName, form]);

  function onSubmit(input: DuplicateTemplateSchema) {
    startDuplicateTransition(async () => {
      if (!template) {
        return;
      }

      const currentUserId = await getCurrentUserId();
      const { error, data } = await duplicateTemplate(
        template.id, 
        input.name, 
        input.slug,
        currentUserId,
      );

      if (error) {
        toast.error(error);
        return;
      }

      form.reset();
      props.onOpenChange?.(false);
      toast.success('템플릿이 복제되었습니다.');
      
      if (data?.slug) {
        router.push(`/evcp/email-template/${data.slug}`);
      } else {
        window.location.reload();
      }
    });
  }

  return (
    <Sheet {...props}>
      <SheetContent className="flex flex-col gap-6 sm:max-w-md">
        <SheetHeader className="text-left">
          <SheetTitle>템플릿 복제</SheetTitle>
          <SheetDescription>
            기존 템플릿을 복사하여 새로운 템플릿을 생성합니다. 모든 내용과 변수가 복제됩니다.
          </SheetDescription>
        </SheetHeader>
        {template && (
          <div className="rounded-lg bg-muted p-3">
            <h4 className="text-sm font-medium mb-2">원본 템플릿</h4>
            <div className="space-y-1 text-xs text-muted-foreground">
              <div>이름: {template.name}</div>
              <div>Slug: <code className="bg-background px-1 rounded">{template.slug}</code></div>
              <div>카테고리: {getCategoryDisplayName(template.category)}</div>
              <div>변수: {template.variableCount}개</div>
            </div>
          </div>
        )}
        <Form {...form}>
          <form
            onSubmit={form.handleSubmit(onSubmit)}
            className="flex flex-col gap-4"
          >
            <FormField
              control={form.control}
              name="name"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>새 템플릿 이름</FormLabel>
                  <FormControl>
                    <Input
                      placeholder="복제된 템플릿의 이름을 입력하세요."
                      {...field}
                    />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />
            <FormField
              control={form.control}
              name="slug"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>새 Slug</FormLabel>
                  <FormControl>
                    <Input
                      placeholder="복제된 템플릿의 Slug를 입력하세요."
                      {...field}
                    />
                  </FormControl>
                  <FormDescription>
                    고유한 식별자여야 합니다. 소문자, 숫자, 하이픈만 사용 가능합니다.
                  </FormDescription>
                  <FormMessage />
                </FormItem>
              )}
            />
            <SheetFooter className="gap-2 pt-2 sm:space-x-0">
              <SheetClose asChild>
                <Button type="button" variant="outline">
                  취소
                </Button>
              </SheetClose>
              <Button disabled={isDuplicatePending}>
                {isDuplicatePending && (
                  <Loader
                    className="mr-2 size-4 animate-spin"
                    aria-hidden="true"
                  />
                )}
                복제하기
              </Button>
            </SheetFooter>
          </form>
        </Form>
      </SheetContent>
    </Sheet>
  );
}

// ----------------------------------------------------------------------------------------------------

/* EXPORT */
export default DuplicateTemplateSheet;