path: root/components/notice/notice-create-dialog.tsx

"use client"

import * as React from "react"
import { useState } from "react"
import { zodResolver } from "@hookform/resolvers/zod"
import { useForm } from "react-hook-form"
import { useParams } from "next/navigation"
import { useTranslation } from "@/i18n/client"
import { toast } from "sonner"
import { Loader, Check, ChevronsUpDown } from "lucide-react"
import { Button } from "@/components/ui/button"
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog"
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "@/components/ui/form"
import { Input } from "@/components/ui/input"
import { Switch } from "@/components/ui/switch"
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
import { Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem } from "@/components/ui/command"
import { cn } from "@/lib/utils"
import TiptapEditor from "@/components/qna/tiptap-editor"
import { createNotice } from "@/lib/notice/service"
import { createNoticeSchema, type CreateNoticeSchema } from "@/lib/notice/validations"
import { Calendar } from "@/components/ui/calendar"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { CalendarIcon } from "lucide-react"
import { format } from "date-fns"
import { ko } from "date-fns/locale"

interface NoticeCreateDialogProps {
  open: boolean
  onOpenChange: (open: boolean) => void
  pagePathOptions: Array<{ value: string; label: string }>
  currentUserId?: number
  onSuccess?: () => void
}

export function NoticeCreateDialog({
  open,
  onOpenChange,
  pagePathOptions,
  currentUserId,
  onSuccess,
}: NoticeCreateDialogProps) {
  const params = useParams()
  const lng = (params?.lng as string) || 'ko'
  const { t } = useTranslation(lng, 'menu')
  
  // 안전한 번역 함수 (키가 없을 때 원본 키 반환)
  const safeTranslate = (key: string): string => {
    try {
      const translated = t(key)
      // 번역 키가 그대로 반환되는 경우 원본 키 사용
      if (translated === key) {
        return key
      }
      return translated || key
    } catch (error) {
      console.warn(`Translation failed for key: ${key}`, error)
      return key
    }
  }
  const [isLoading, setIsLoading] = useState(false)

  const form = useForm<CreateNoticeSchema>({
    resolver: zodResolver(createNoticeSchema),
    defaultValues: {
      pagePath: "",
      title: "",
      content: "",
      authorId: currentUserId,
      isActive: true,
      isPopup: false,
      startAt: undefined,
      endAt: undefined,
      dontShowDuration: "never", // 기본값을 영구로 설정
    },
  })

  React.useEffect(() => {
    if (open) {
      // 다이얼로그가 열릴 때마다 폼 초기화
      form.reset({
        pagePath: "",
        title: "",
        content: "",
        authorId: currentUserId,
        isActive: true,
        isPopup: false,
        startAt: undefined,
        endAt: undefined,
        dontShowDuration: "never", // 기본값을 영구로 설정
      })
    }
  }, [open, currentUserId, form])

  const onSubmit = async (values: CreateNoticeSchema) => {
    setIsLoading(true)
    console.log("Form values:", values) // 디버깅용
    try {
      const result = await createNotice(values)
      console.log("Create result:", result) // 디버깅용

      if (result.success) {
        toast.success(result.message || "공지사항이 성공적으로 생성되었습니다.")
        if (onSuccess) onSuccess()
        onOpenChange(false)
      } else {
        toast.error(result.message || "공지사항 생성에 실패했습니다.")
        console.error("Create failed:", result.message)
      }
    } catch (error) {
      toast.error("공지사항 생성에 실패했습니다.")
      console.error("Create error:", error)
    } finally {
      setIsLoading(false)
    }
  }



  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-5xl max-h-[90vh] overflow-y-auto">
        <DialogHeader>
          <DialogTitle className="text-xl font-bold">
            새 공지사항 작성
          </DialogTitle>
        </DialogHeader>

        <Form {...form}>
          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <FormField
                control={form.control}
                name="pagePath"
                render={({ field }) => {
                  const [open, setOpen] = useState(false)
                  const [searchTerm, setSearchTerm] = useState("")

                  const filteredOptions = React.useMemo(() => {
                    if (!searchTerm.trim()) return pagePathOptions

                    const lowerSearch = searchTerm.toLowerCase()
                    return pagePathOptions.filter(
                      (option) =>
                        safeTranslate(option.label).toLowerCase().includes(lowerSearch) ||
                        option.value.toLowerCase().includes(lowerSearch)
                    )
                  }, [pagePathOptions, searchTerm])

                  const selectedOption = pagePathOptions.find(option => option.value === field.value)

                  return (
                    <FormItem>
                      <FormLabel>페이지 경로 *</FormLabel>
                      <Popover open={open} onOpenChange={setOpen}>
                        <PopoverTrigger asChild>
                          <FormControl>
                            <Button
                              variant="outline"
                              role="combobox"
                              aria-expanded={open}
                              className="w-full justify-between"
                            >
                              {selectedOption
                                ? `${safeTranslate(selectedOption.label)} - ${selectedOption.value}`
                                : "페이지를 선택하세요"}
                              <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
                            </Button>
                          </FormControl>
                        </PopoverTrigger>
                        <PopoverContent className="w-full p-0" align="start">
                          <Command>
                            <CommandInput
                              placeholder="페이지명 또는 경로 검색..."
                              onValueChange={setSearchTerm}
                            />
                            <CommandList className="max-h-[300px]">
                              <CommandEmpty>검색 결과가 없습니다</CommandEmpty>
                              <CommandGroup>
                                {filteredOptions.map((option) => (
                                  <CommandItem
                                    key={option.value}
                                    value={`${safeTranslate(option.label)} ${option.value}`}
                                    onSelect={() => {
                                      field.onChange(option.value)
                                      setOpen(false)
                                    }}
                                  >
                                    <Check
                                      className={cn(
                                        "mr-2 h-4 w-4",
                                        field.value === option.value
                                          ? "opacity-100"
                                          : "opacity-0"
                                      )}
                                    />
                                    <span className="font-medium">{safeTranslate(option.label)}</span>
                                    <span className="ml-2 text-gray-500 truncate">- {option.value}</span>
                                  </CommandItem>
                                ))}
                              </CommandGroup>
                            </CommandList>
                          </Command>
                        </PopoverContent>
                      </Popover>
                      <FormMessage />
                    </FormItem>
                  )
                }}
              />

              <FormField
                control={form.control}
                name="isActive"
                render={({ field }) => (
                  <FormItem className="flex flex-row items-center justify-between rounded-lg border p-3">
                    <div className="space-y-0.5">
                      <FormLabel className="text-base">활성 상태</FormLabel>
                      <div className="text-sm text-muted-foreground">
                        활성화하면 해당 페이지에서 공지사항이 표시됩니다.
                      </div>
                    </div>
                    <FormControl>
                      <Switch
                        checked={field.value}
                        onCheckedChange={field.onChange}
                      />
                    </FormControl>
                  </FormItem>
                )}
              />
            </div>

            {/* 팝업 여부 */}
            <FormField
              control={form.control}
              name="isPopup"
              render={({ field }) => (
                <FormItem className="flex flex-row items-center justify-between rounded-lg border p-3">
                  <div className="space-y-0.5">
                    <FormLabel className="text-base">팝업 공지사항</FormLabel>
                    <div className="text-sm text-muted-foreground">
                      팝업으로 표시할 공지사항인 경우 체크하세요.
                    </div>
                  </div>
                  <FormControl>
                    <Switch
                      checked={field.value}
                      onCheckedChange={field.onChange}
                    />
                  </FormControl>
                </FormItem>
              )}
            />

            <FormField
              control={form.control}
              name="title"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>제목 *</FormLabel>
                  <FormControl>
                    <Input placeholder="공지사항 제목을 입력하세요" {...field} />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />

            {/* 유효기간 설정 (팝업인 경우에만 표시) */}
            {form.watch('isPopup') && (
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <FormField
                control={form.control}
                name="startAt"
                render={({ field }) => (
                  <FormItem className="flex flex-col">
                    <FormLabel>게시 시작 일시 *</FormLabel>
                    <Popover>
                      <PopoverTrigger asChild>
                        <FormControl>
                          <Button
                            variant="outline"
                            className={cn(
                              "w-full pl-3 text-left font-normal",
                              !field.value && "text-muted-foreground"
                            )}
                          >
                            {field.value ? (
                              format(field.value, "PPP HH:mm", { locale: ko })
                            ) : (
                              <span>시작 일시 선택</span>
                            )}
                            <CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
                          </Button>
                        </FormControl>
                      </PopoverTrigger>
                      <PopoverContent className="w-auto p-0" align="start">
                        <Calendar
                          mode="single"
                          selected={field.value}
                          onSelect={(date) => {
                            if (date) {
                              // 시간을 보존하거나 설정
                              const dateTime = new Date(date)
                              if (field.value) {
                                dateTime.setHours(field.value.getHours())
                                dateTime.setMinutes(field.value.getMinutes())
                              } else {
                                dateTime.setHours(0, 0, 0, 0)
                              }
                              field.onChange(dateTime)
                            }
                          }}
                          disabled={(date) =>
                            date < new Date("1900-01-01")
                          }
                          initialFocus
                        />
                        <div className="p-3 border-t">
                          <Input
                            type="time"
                            value={field.value ? format(field.value, "HH:mm") : ""}
                            onChange={(e) => {
                              if (field.value && e.target.value) {
                                const [hours, minutes] = e.target.value.split(':')
                                const newDate = new Date(field.value)
                                newDate.setHours(parseInt(hours), parseInt(minutes))
                                field.onChange(newDate)
                              }
                            }}
                          />
                        </div>
                      </PopoverContent>
                    </Popover>
                    <FormMessage />
                  </FormItem>
                )}
              />

              <FormField
                control={form.control}
                name="endAt"
                render={({ field }) => (
                  <FormItem className="flex flex-col">
                    <FormLabel>게시 종료 일시 *</FormLabel>
                    <Popover>
                      <PopoverTrigger asChild>
                        <FormControl>
                          <Button
                            variant="outline"
                            className={cn(
                              "w-full pl-3 text-left font-normal",
                              !field.value && "text-muted-foreground"
                            )}
                          >
                            {field.value ? (
                              format(field.value, "PPP HH:mm", { locale: ko })
                            ) : (
                              <span>종료 일시 선택</span>
                            )}
                            <CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
                          </Button>
                        </FormControl>
                      </PopoverTrigger>
                      <PopoverContent className="w-auto p-0" align="start">
                        <Calendar
                          mode="single"
                          selected={field.value}
                          onSelect={(date) => {
                            if (date) {
                              const dateTime = new Date(date)
                              if (field.value) {
                                dateTime.setHours(field.value.getHours())
                                dateTime.setMinutes(field.value.getMinutes())
                              } else {
                                dateTime.setHours(23, 59, 59, 999)
                              }
                              field.onChange(dateTime)
                            }
                          }}
                          disabled={(date) =>
                            date < new Date("1900-01-01")
                          }
                          initialFocus
                        />
                        <div className="p-3 border-t">
                          <Input
                            type="time"
                            value={field.value ? format(field.value, "HH:mm") : ""}
                            onChange={(e) => {
                              if (field.value && e.target.value) {
                                const [hours, minutes] = e.target.value.split(':')
                                const newDate = new Date(field.value)
                                newDate.setHours(parseInt(hours), parseInt(minutes))
                                field.onChange(newDate)
                              }
                            }}
                          />
                        </div>
                      </PopoverContent>
                    </Popover>
                    <FormMessage />
                  </FormItem>
                )}
              />
            </div>
            )}

            {/* 다시 보지 않기 설정 (팝업인 경우에만 표시) - 임시 주석처리 */}
            {/* {form.watch('isPopup') && (
              <FormField
                control={form.control}
                name="dontShowDuration"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>'다시 보지 않기' 기간 설정 *</FormLabel>
                    <Select onValueChange={field.onChange} defaultValue={field.value}>
                      <FormControl>
                        <SelectTrigger>
                          <SelectValue placeholder="기간을 선택하세요" />
                        </SelectTrigger>
                      </FormControl>
                      <SelectContent>
                        <SelectItem value="day">하루 동안 표시하지 않음</SelectItem>
                        <SelectItem value="never">영구적으로 표시하지 않음</SelectItem>
                      </SelectContent>
                    </Select>
                    <div className="text-sm text-muted-foreground">
                      사용자가 '다시 보지 않기'를 체크하면 설정한 기간 동안 해당 공지사항이 표시되지 않습니다.
                    </div>
                    <FormMessage />
                  </FormItem>
                )}
              />
            )} */}

            <FormField
              control={form.control}
              name="content"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>내용 *</FormLabel>
                  <FormControl>
                    <div className="min-h-[400px]">
                      <TiptapEditor
                        content={field.value}
                        setContent={field.onChange}
                        disabled={isLoading}
                        height="300px"
                      />
                    </div>
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />

            <div className="flex justify-end gap-2 pt-4">
              <Button
                type="button"
                variant="outline"
                onClick={() => onOpenChange(false)}
                disabled={isLoading}
              >
                취소
              </Button>
              <Button type="submit" disabled={isLoading}>
                {isLoading && <Loader className="mr-2 h-4 w-4 animate-spin" />}
                생성
              </Button>
            </div>
          </form>
        </Form>
      </DialogContent>
    </Dialog>
  )
}