"use client"

import * as React from "react"
import { type TemplateListView} from "@/db/schema"
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 { useSession } from "next-auth/react"

import { Button } from "@/components/ui/button"
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "@/components/ui/form"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"
import {
  Sheet,
  SheetClose,
  SheetContent,
  SheetDescription,
  SheetFooter,
  SheetHeader,
  SheetTitle,
} from "@/components/ui/sheet"

import { updateTemplateAction } from "../service"
import { TEMPLATE_CATEGORY_OPTIONS } from "../validations"

// Validation Schema
const updateTemplateSchema = z.object({
  name: z.string().min(1, "템플릿 이름은 필수입니다").max(100, "템플릿 이름은 100자 이하여야 합니다"),
  description: z.string().max(500, "설명은 500자 이하여야 합니다").optional(),
  category: z.string().optional(),
})

type UpdateTemplateSchema = z.infer<typeof updateTemplateSchema>

interface UpdateTemplateSheetProps
  extends React.ComponentPropsWithRef<typeof Sheet> {
  template: TemplateListView | null
}

export function UpdateTemplateSheet({ template, ...props }: UpdateTemplateSheetProps) {
  const [isUpdatePending, startUpdateTransition] = React.useTransition()
  const { data: session } = useSession();

  // 또는 더 안전하게
  if (!session?.user?.id) {
      toast.error("로그인이 필요합니다")
      return
  }

  const form = useForm<UpdateTemplateSchema>({
    resolver: zodResolver(updateTemplateSchema),
    defaultValues: {
      name: template?.name ?? "",
      description: template?.description ?? "",
      category: template?.category ?? "",
    },
  })

  React.useEffect(() => {
    if (template) {
      form.reset({
        name: template.name ?? "",
        description: template.description ?? "",
        category: template.category ?? "",
      })
    }
  }, [template, form])

  function onSubmit(input: UpdateTemplateSchema) {
    startUpdateTransition(async () => {
      if (!template) return

      // 현재 사용자 ID (실제로는 인증에서 가져와야 함)
      const currentUserId = "current-user-id" // TODO: 실제 사용자 ID로 교체

      const { error } = await updateTemplateAction(template.slug, {
        name: input.name,
        description: input.description || undefined,
        category: input.category === "none" ? undefined : input.category, // 여기서 변환

        // category는 일반적으로 수정하지 않는 것이 좋지만, 필요시 포함
        updatedBy: Number(session.user.id),
      })

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

      form.reset()
      props.onOpenChange?.(false)
      toast.success("템플릿이 업데이트되었습니다")
      
      // 페이지 새로고침으로 데이터 갱신
      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>
        <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="description"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>설명</FormLabel>
                  <FormControl>
                    <Textarea
                      placeholder="템플릿에 대한 설명을 입력하세요"
                      className="min-h-[80px]"
                      {...field}
                    />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />

            <FormField
              control={form.control}
              name="category"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>카테고리</FormLabel>
                  <Select onValueChange={field.onChange} value={field.value}>
                    <FormControl>
                      <SelectTrigger>
                        <SelectValue placeholder="카테고리를 선택하세요" />
                      </SelectTrigger>
                    </FormControl>
                    <SelectContent>
  <SelectItem value="none">카테고리 없음</SelectItem>
  {TEMPLATE_CATEGORY_OPTIONS.map((option) => (
    <SelectItem key={option.value} value={option.value}>
      {option.label}
    </SelectItem>
  ))}
</SelectContent>
                  </Select>
                  <FormMessage />
                </FormItem>
              )}
            />

            {/* 현재 정보 표시 */}
            {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>Slug: <code className="bg-background px-1 rounded">{template.slug}</code></div>
                  <div>버전: v{template.version}</div>
                  <div>변수: {template.variableCount}개 (필수: {template.requiredVariableCount}개)</div>
                  <div>수정일: {new Date(template.updatedAt).toLocaleString('ko-KR')}</div>
                </div>
              </div>
            )}

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