"use client"

import { useState } from "react"
import { format } from "date-fns"
import { ko } from "date-fns/locale"
import { Calendar as CalendarIcon, Clock, Edit2 } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Calendar } from "@/components/ui/calendar"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover"
import { cn } from "@/lib/utils"
import { useToast } from "@/hooks/use-toast"
import { useRouter } from "next/navigation"
import { updateRfqDueDate } from "./service"

interface DueDateEditButtonProps {
  rfqId: number
  currentDueDate: Date | string | null
  rfqCode: string
  rfqTitle: string
}

export function DueDateEditButton({ 
    rfqId, 
    currentDueDate, 
    rfqCode, 
    rfqTitle 
  }: DueDateEditButtonProps) {
    const [open, setOpen] = useState(false)
    const [date, setDate] = useState<Date | undefined>(
      currentDueDate ? new Date(currentDueDate) : undefined
    )
    const [time, setTime] = useState<string>(
      currentDueDate 
        ? format(new Date(currentDueDate), "HH:mm")
        : "17:00" // 기본값: 오후 5시
    )
    const [isLoading, setIsLoading] = useState(false)
    const { toast } = useToast()
    const router = useRouter()
  
    const handleSave = async () => {
      if (!date) {
        toast({
          title: "오류",
          description: "마감일을 선택해주세요.",
          variant: "destructive",
        })
        return
      }
  
      setIsLoading(true)
      try {
        // 날짜와 시간 결합
        const [hours, minutes] = time.split(':').map(Number)
        const dateTime = new Date(
          date.getFullYear(),
          date.getMonth(),
          date.getDate(),
          hours,
          minutes,
          0,
          0
        )
        
        // ISO 문자열로 전송 (자동으로 로컬 타임존 포함)
        const result = await updateRfqDueDate(
          rfqId, 
          dateTime.toISOString(), 
          rfqCode, 
          rfqTitle
        )
        
        if (result.success) {
          toast({
            title: "성공",
            description: result.message,
          })
          setOpen(false)
          router.refresh()
        } else {
          toast({
            title: "오류",
            description: result.message,
            variant: "destructive",
          })
        }
      } catch (error) {
        toast({
          title: "오류",
          description: "마감일 수정 중 오류가 발생했습니다.",
          variant: "destructive",
        })
      } finally {
        setIsLoading(false)
      }
    }
  
    return (
      <Dialog open={open} onOpenChange={setOpen}>
        <DialogTrigger asChild>
          <Button 
            variant="outline" 
            size="sm"
            className="h-7 px-2"
          >
            <Edit2 className="h-3 w-3 mr-1" />
            수정
          </Button>
        </DialogTrigger>
        <DialogContent className="sm:max-w-[425px]">
          <DialogHeader>
            <DialogTitle>마감일 수정</DialogTitle>
            <DialogDescription>
              {rfqCode} {rfqTitle ? `- ${rfqTitle}` : ''}의 마감일을 수정합니다.
              변경 시 관련 업체에 이메일이 발송됩니다.
            </DialogDescription>
          </DialogHeader>
          <div className="grid gap-4 py-4">
            {/* 날짜 선택 */}
            <div className="grid gap-2">
              <label htmlFor="dueDate" className="text-sm font-medium">
                마감 날짜
              </label>
              <Popover>
                <PopoverTrigger asChild>
                  <Button
                    id="dueDate"
                    variant="outline"
                    className={cn(
                      "w-full justify-start text-left font-normal",
                      !date && "text-muted-foreground"
                    )}
                  >
                    <CalendarIcon className="mr-2 h-4 w-4" />
                    {date ? format(date, "yyyy년 MM월 dd일", { locale: ko }) : "날짜를 선택하세요"}
                  </Button>
                </PopoverTrigger>
                <PopoverContent className="w-auto p-0" align="start">
                  <Calendar
                    mode="single"
                    selected={date}
                    onSelect={setDate}
                    initialFocus
                    locale={ko}
                    disabled={(date) => date < new Date(new Date().setHours(0, 0, 0, 0))}
                  />
                </PopoverContent>
              </Popover>
            </div>
  
            {/* 시간 선택 */}
            <div className="grid gap-2">
              <label htmlFor="time" className="text-sm font-medium">
                마감 시간
              </label>
              <div className="flex items-center gap-2">
                <Clock className="h-4 w-4 text-muted-foreground" />
                <input
                  id="time"
                  type="time"
                  value={time}
                  onChange={(e) => setTime(e.target.value)}
                  className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm"
                />
              </div>
            </div>
  
            {/* 현재 마감일시 표시 */}
            {currentDueDate && (
              <div className="text-sm text-muted-foreground">
                현재 마감일시: {format(new Date(currentDueDate), "yyyy년 MM월 dd일 HH:mm", { locale: ko })}
              </div>
            )}
  
            {/* 선택한 날짜시간 미리보기 */}
            {date && (
              <div className="rounded-md bg-muted p-3">
                <p className="text-sm font-medium">선택한 마감일시:</p>
                <p className="text-sm text-muted-foreground">
                  {format(date, "yyyy년 MM월 dd일", { locale: ko })} {time}
                </p>
              </div>
            )}
          </div>
          <DialogFooter>
            <Button 
              variant="outline" 
              onClick={() => setOpen(false)}
              disabled={isLoading}
            >
              취소
            </Button>
            <Button 
              onClick={handleSave}
              disabled={isLoading}
            >
              {isLoading ? "저장 중..." : "저장"}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    )
  }