"use client"

import * as React from "react"
import { zodResolver } from "@hookform/resolvers/zod"
import { Loader } from "lucide-react"
import { useForm } from "react-hook-form"
import { toast } from "sonner"
import { z } from "zod"
import { useRouter } from "next/navigation"

import { Button } from "@/components/ui/button"
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "@/components/ui/form"
import { Input } from "@/components/ui/input"
import {
  Sheet,
  SheetClose,
  SheetContent,
  SheetDescription,
  SheetFooter,
  SheetHeader,
  SheetTitle,
} from "@/components/ui/sheet"

import { type ApprovalTemplate } from "@/lib/approval-template/service"
import { duplicateApprovalTemplate } from "../service"
import { useSession } from "next-auth/react"

const duplicateSchema = z.object({
  name: z.string().min(1, "템플릿 이름은 필수입니다").max(100, "100자 이내여야 합니다"),
})

type DuplicateSchema = z.infer<typeof duplicateSchema>

interface DuplicateApprovalTemplateSheetProps extends React.ComponentPropsWithRef<typeof Sheet> {
  template: ApprovalTemplate | null
}

export function DuplicateApprovalTemplateSheet({ template, ...props }: DuplicateApprovalTemplateSheetProps) {
  const [isPending, startTransition] = React.useTransition()
  const router = useRouter()
  const { data: session } = useSession()

  const form = useForm<DuplicateSchema>({
    resolver: zodResolver(duplicateSchema),
    defaultValues: { name: "" },
  })

  React.useEffect(() => {
    if (template) {
      form.reset({ name: `${template.name} (복사본)` })
    }
  }, [template, form])

  function onSubmit(values: DuplicateSchema) {
    startTransition(async () => {
      if (!template) return
      if (!session?.user?.id) {
        toast.error("로그인이 필요합니다")
        return
      }

      const { success, error, data } = await duplicateApprovalTemplate(
        template.id,
        values.name,
        Number(session.user.id),
      )

      if (!success || error) {
        toast.error(error ?? "복제에 실패했습니다")
        return
      }

      toast.success("템플릿이 복제되었습니다")
      props.onOpenChange?.(false)

      // 상세 페이지로 이동 (id 기반)
      if (data?.id) {
        router.push(`/evcp/approval/template/${data.id}`)
      } 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>ID: <code className="bg-background px-1 rounded">{template.id}</code></div>
              <div>카테고리: {template.category ?? "-"}</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>
              )}
            />

            <SheetFooter className="gap-2 pt-2 sm:space-x-0">
              <SheetClose asChild>
                <Button type="button" variant="outline">
                  취소
                </Button>
              </SheetClose>
              <Button disabled={isPending}>
                {isPending && <Loader className="mr-2 size-4 animate-spin" aria-hidden="true" />}
                복제하기
              </Button>
            </SheetFooter>
          </form>
        </Form>
      </SheetContent>
    </Sheet>
  )
}