"use client";

/**
 * Input 컴포넌트의 날짜/시간 picker 묶음.
 *
 * 4 picker:
 *   - SingleDatePicker  → InputFieldType "date"
 *   - DateTimePicker    → InputFieldType "datetime"
 *   - TimePicker        → InputFieldType "time"
 *   - RangeDatePicker   → InputFieldType "daterange"
 *
 * 모든 picker 는 InvField canonical (camelCase) props 를 받는다:
 *   value, onChange, dateFormat, minDate, maxDate, showToday, disabled, readonly, placeholder
 */

import React, { forwardRef, useCallback, useMemo, useState, useEffect } from "react";
import {
  format,
  parse,
  isValid,
  addMonths,
  subMonths,
  startOfMonth,
  endOfMonth,
  eachDayOfInterval,
  isSameMonth,
  isSameDay,
  isToday as isTodayFn,
} from "date-fns";
import { ko } from "date-fns/locale";
import { Calendar as CalendarIcon, Clock, ChevronLeft, ChevronRight } from "lucide-react";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
import { cn } from "@/lib/utils";

// 날짜 형식 매핑
const DATE_FORMATS: Record<string, string> = {
  "YYYY-MM-DD": "yyyy-MM-dd",
  "YYYY/MM/DD": "yyyy/MM/dd",
  "DD-MM-YYYY": "dd-MM-yyyy",
  "DD/MM/YYYY": "dd/MM/yyyy",
  "MM-DD-YYYY": "MM-dd-yyyy",
  "MM/DD/YYYY": "MM/dd/yyyy",
  "YYYY-MM-DD HH:mm": "yyyy-MM-dd HH:mm",
  "YYYY-MM-DD HH:mm:ss": "yyyy-MM-dd HH:mm:ss",
};

// 날짜 문자열 → Date 객체
function parseDate(value: string | undefined, formatStr: string): Date | undefined {
  if (!value) return undefined;
  const dateFnsFormat = DATE_FORMATS[formatStr] || formatStr;
  try {
    const isoDate = new Date(value);
    if (isValid(isoDate)) return isoDate;
    const parsed = parse(value, dateFnsFormat, new Date());
    return isValid(parsed) ? parsed : undefined;
  } catch {
    return undefined;
  }
}

// Date 객체 → 날짜 문자열
function formatDate(date: Date | undefined, formatStr: string): string {
  if (!date || !isValid(date)) return "";
  const dateFnsFormat = DATE_FORMATS[formatStr] || formatStr;
  return format(date, dateFnsFormat);
}

// YYYYMMDD 또는 YYYY-MM-DD 문자열 → 유효한 Date 객체 반환 (유효하지 않으면 null)
function parseManualDateInput(raw: string): Date | null {
  const digits = raw.replace(/\D/g, "");
  if (digits.length !== 8) return null;
  const y = parseInt(digits.slice(0, 4), 10);
  const m = parseInt(digits.slice(4, 6), 10) - 1;
  const d = parseInt(digits.slice(6, 8), 10);
  const date = new Date(y, m, d);
  if (date.getFullYear() !== y || date.getMonth() !== m || date.getDate() !== d) return null;
  if (y < 1900 || y > 2100) return null;
  return date;
}

/**
 * 단일 날짜 선택 컴포넌트
 */
export const SingleDatePicker = forwardRef<
  HTMLDivElement,
  {
    value?: string;
    onChange?: (value: string) => void;
    dateFormat: string;
    showToday?: boolean;
    minDate?: string;
    maxDate?: string;
    disabled?: boolean;
    readonly?: boolean;
    className?: string;
    placeholder?: string;
  }
>(
  (
    {
      value,
      onChange,
      dateFormat = "YYYY-MM-DD",
      showToday = true,
      minDate,
      maxDate,
      disabled,
      readonly,
      className,
      placeholder = "날짜 선택",
    },
    ref,
  ) => {
    const [open, setOpen] = useState(false);
    const [currentMonth, setCurrentMonth] = useState(new Date());
    const [viewMode, setViewMode] = useState<"calendar" | "year" | "month">("calendar");
    const [yearRangeStart, setYearRangeStart] = useState(() => Math.floor(new Date().getFullYear() / 12) * 12);
    const [isTyping, setIsTyping] = useState(false);
    const [typingValue, setTypingValue] = useState("");
    const inputRef = React.useRef<HTMLInputElement>(null);

    const date = useMemo(() => parseDate(value, dateFormat), [value, dateFormat]);

    const displayText = useMemo(() => {
      if (!value) return "";
      if (date && isValid(date)) return formatDate(date, dateFormat);
      return value;
    }, [value, date, dateFormat]);

    useEffect(() => {
      if (open) {
        setViewMode("calendar");
        if (date && isValid(date)) {
          setCurrentMonth(new Date(date.getFullYear(), date.getMonth(), 1));
          setYearRangeStart(Math.floor(date.getFullYear() / 12) * 12);
        } else {
          setCurrentMonth(new Date());
          setYearRangeStart(Math.floor(new Date().getFullYear() / 12) * 12);
        }
      } else {
        setIsTyping(false);
        setTypingValue("");
      }
    }, [open]);

    const handleDateClick = useCallback(
      (clickedDate: Date) => {
        onChange?.(formatDate(clickedDate, dateFormat));
        setIsTyping(false);
        setOpen(false);
      },
      [dateFormat, onChange],
    );

    const handleToday = useCallback(() => {
      onChange?.(formatDate(new Date(), dateFormat));
      setIsTyping(false);
      setOpen(false);
    }, [dateFormat, onChange]);

    const handleClear = useCallback(() => {
      onChange?.("");
      setIsTyping(false);
      setOpen(false);
    }, [onChange]);

    const handleTriggerInput = useCallback(
      (raw: string) => {
        setIsTyping(true);
        setTypingValue(raw);
        if (!open) setOpen(true);
        const digitsOnly = raw.replace(/\D/g, "");
        if (digitsOnly.length === 8) {
          const parsed = parseManualDateInput(digitsOnly);
          if (parsed) {
            onChange?.(formatDate(parsed, dateFormat));
            setCurrentMonth(new Date(parsed.getFullYear(), parsed.getMonth(), 1));
            setTimeout(() => {
              setIsTyping(false);
              setOpen(false);
            }, 400);
          }
        }
      },
      [dateFormat, onChange, open],
    );

    const mStart = startOfMonth(currentMonth);
    const mEnd = endOfMonth(currentMonth);
    const days = eachDayOfInterval({ start: mStart, end: mEnd });
    const dow = mStart.getDay();
    const padding = dow === 0 ? 6 : dow - 1;
    const allDays = [...Array(padding).fill(null), ...days];

    return (
      <Popover
        open={open}
        onOpenChange={(v) => {
          if (!v) {
            setOpen(false);
            setIsTyping(false);
          }
        }}
      >
        <PopoverTrigger asChild>
          <div
            ref={ref}
            className={cn(
              "border-input bg-background flex h-full w-full cursor-pointer items-center rounded-md border px-3",
              (disabled || readonly) && "cursor-not-allowed opacity-50",
              className,
            )}
            onClick={() => {
              if (!disabled && !readonly) setOpen(true);
            }}
          >
            <CalendarIcon className="text-muted-foreground mr-2 h-4 w-4 shrink-0" />
            <input
              ref={inputRef}
              type="text"
              inputMode="numeric"
              value={isTyping ? typingValue : displayText || ""}
              placeholder={placeholder}
              disabled={disabled || readonly}
              onChange={(e) => handleTriggerInput(e.target.value)}
              onClick={(e) => e.stopPropagation()}
              onFocus={() => {
                if (!disabled && !readonly && !open) setOpen(true);
              }}
              onBlur={() => {
                if (!open) setIsTyping(false);
              }}
              className={cn(
                "h-full w-full bg-transparent text-sm outline-none",
                "placeholder:text-muted-foreground disabled:cursor-not-allowed",
                !displayText && !isTyping && "text-muted-foreground",
              )}
            />
          </div>
        </PopoverTrigger>
        <PopoverContent className="w-auto p-0" align="start" onOpenAutoFocus={(e) => e.preventDefault()}>
          <div className="p-4">
            <div className="mb-3 flex items-center gap-2">
              {showToday && (
                <Button variant="outline" size="sm" className="h-7 text-xs" onClick={handleToday}>
                  오늘
                </Button>
              )}
              <Button variant="outline" size="sm" className="h-7 text-xs" onClick={handleClear}>
                초기화
              </Button>
            </div>

            {viewMode === "year" ? (
              <>
                <div className="mb-4 flex items-center justify-between">
                  <Button
                    variant="ghost"
                    size="sm"
                    className="h-8 w-8 p-0"
                    onClick={() => setYearRangeStart(yearRangeStart - 12)}
                  >
                    <ChevronLeft className="h-4 w-4" />
                  </Button>
                  <div className="text-sm font-medium">
                    {yearRangeStart} - {yearRangeStart + 11}
                  </div>
                  <Button
                    variant="ghost"
                    size="sm"
                    className="h-8 w-8 p-0"
                    onClick={() => setYearRangeStart(yearRangeStart + 12)}
                  >
                    <ChevronRight className="h-4 w-4" />
                  </Button>
                </div>
                <div className="grid grid-cols-4 gap-2">
                  {Array.from({ length: 12 }, (_, i) => yearRangeStart + i).map((year) => (
                    <Button
                      key={year}
                      variant="ghost"
                      size="sm"
                      className={cn(
                        "h-9 text-xs",
                        year === currentMonth.getFullYear() && "bg-primary text-primary-foreground hover:bg-primary",
                        year === new Date().getFullYear() &&
                          year !== currentMonth.getFullYear() &&
                          "border-primary border",
                      )}
                      onClick={() => {
                        setCurrentMonth(new Date(year, currentMonth.getMonth(), 1));
                        setViewMode("month");
                      }}
                    >
                      {year}
                    </Button>
                  ))}
                </div>
              </>
            ) : viewMode === "month" ? (
              <>
                <div className="mb-4 flex items-center justify-between">
                  <Button
                    variant="ghost"
                    size="sm"
                    className="h-8 w-8 p-0"
                    onClick={() =>
                      setCurrentMonth(new Date(currentMonth.getFullYear() - 1, currentMonth.getMonth(), 1))
                    }
                  >
                    <ChevronLeft className="h-4 w-4" />
                  </Button>
                  <button
                    type="button"
                    className="hover:bg-accent rounded-md px-2 py-1 text-sm font-medium transition-colors"
                    onClick={() => {
                      setYearRangeStart(Math.floor(currentMonth.getFullYear() / 12) * 12);
                      setViewMode("year");
                    }}
                  >
                    {currentMonth.getFullYear()}년
                  </button>
                  <Button
                    variant="ghost"
                    size="sm"
                    className="h-8 w-8 p-0"
                    onClick={() =>
                      setCurrentMonth(new Date(currentMonth.getFullYear() + 1, currentMonth.getMonth(), 1))
                    }
                  >
                    <ChevronRight className="h-4 w-4" />
                  </Button>
                </div>
                <div className="grid grid-cols-4 gap-2">
                  {Array.from({ length: 12 }, (_, i) => i).map((month) => (
                    <Button
                      key={month}
                      variant="ghost"
                      size="sm"
                      className={cn(
                        "h-9 text-xs",
                        month === currentMonth.getMonth() && "bg-primary text-primary-foreground hover:bg-primary",
                        month === new Date().getMonth() &&
                          currentMonth.getFullYear() === new Date().getFullYear() &&
                          month !== currentMonth.getMonth() &&
                          "border-primary border",
                      )}
                      onClick={() => {
                        setCurrentMonth(new Date(currentMonth.getFullYear(), month, 1));
                        setViewMode("calendar");
                      }}
                    >
                      {month + 1}월
                    </Button>
                  ))}
                </div>
              </>
            ) : (
              <>
                <div className="mb-4 flex items-center justify-between">
                  <Button
                    variant="ghost"
                    size="sm"
                    className="h-8 w-8 p-0"
                    onClick={() => setCurrentMonth(subMonths(currentMonth, 1))}
                  >
                    <ChevronLeft className="h-4 w-4" />
                  </Button>
                  <button
                    type="button"
                    className="hover:bg-accent rounded-md px-2 py-1 text-sm font-medium transition-colors"
                    onClick={() => {
                      setYearRangeStart(Math.floor(currentMonth.getFullYear() / 12) * 12);
                      setViewMode("year");
                    }}
                  >
                    {format(currentMonth, "yyyy년 MM월", { locale: ko })}
                  </button>
                  <Button
                    variant="ghost"
                    size="sm"
                    className="h-8 w-8 p-0"
                    onClick={() => setCurrentMonth(addMonths(currentMonth, 1))}
                  >
                    <ChevronRight className="h-4 w-4" />
                  </Button>
                </div>
                <div className="mb-2 grid grid-cols-7 gap-1">
                  {["월", "화", "수", "목", "금", "토", "일"].map((d) => (
                    <div key={d} className="text-muted-foreground p-2 text-center text-xs font-medium">
                      {d}
                    </div>
                  ))}
                </div>
                <div className="grid grid-cols-7 gap-1">
                  {allDays.map((d, idx) => {
                    if (!d) return <div key={idx} className="p-2" />;
                    const isCur = isSameMonth(d, currentMonth);
                    const isSel = date ? isSameDay(d, date) : false;
                    const isT = isTodayFn(d);
                    return (
                      <Button
                        key={d.toISOString()}
                        variant="ghost"
                        size="sm"
                        className={cn(
                          "h-8 w-8 p-0 text-xs",
                          !isCur && "text-muted-foreground opacity-50",
                          isSel && "bg-primary text-primary-foreground hover:bg-primary",
                          isT && !isSel && "border-primary border",
                        )}
                        onClick={() => handleDateClick(d)}
                        disabled={!isCur}
                      >
                        {format(d, "d")}
                      </Button>
                    );
                  })}
                </div>
              </>
            )}
          </div>
        </PopoverContent>
      </Popover>
    );
  },
);
SingleDatePicker.displayName = "SingleDatePicker";

/**
 * 범위 날짜 팝오버 내부 캘린더 (drill-down 지원)
 */
const RangeCalendarPopover: React.FC<{
  open: boolean;
  onOpenChange: (open: boolean) => void;
  selectedDate?: Date;
  onSelect: (date: Date) => void;
  label: string;
  disabled?: boolean;
  readonly?: boolean;
  displayValue?: string;
  className?: string;
}> = ({ open, onOpenChange, selectedDate, onSelect, label, disabled, readonly, displayValue, className }) => {
  const [currentMonth, setCurrentMonth] = useState(new Date());
  const [viewMode, setViewMode] = useState<"calendar" | "year" | "month">("calendar");
  const [yearRangeStart, setYearRangeStart] = useState(() => Math.floor(new Date().getFullYear() / 12) * 12);
  const [isTyping, setIsTyping] = useState(false);
  const [typingValue, setTypingValue] = useState("");

  useEffect(() => {
    if (open) {
      setViewMode("calendar");
      if (selectedDate && isValid(selectedDate)) {
        setCurrentMonth(new Date(selectedDate.getFullYear(), selectedDate.getMonth(), 1));
        setYearRangeStart(Math.floor(selectedDate.getFullYear() / 12) * 12);
      } else {
        setCurrentMonth(new Date());
        setYearRangeStart(Math.floor(new Date().getFullYear() / 12) * 12);
      }
    } else {
      setIsTyping(false);
      setTypingValue("");
    }
  }, [open]);

  const handleTriggerInput = (raw: string) => {
    setIsTyping(true);
    setTypingValue(raw);
    const digitsOnly = raw.replace(/\D/g, "");
    if (digitsOnly.length === 8) {
      const parsed = parseManualDateInput(digitsOnly);
      if (parsed) {
        setIsTyping(false);
        onSelect(parsed);
      }
    }
  };

  const mStart = startOfMonth(currentMonth);
  const mEnd = endOfMonth(currentMonth);
  const days = eachDayOfInterval({ start: mStart, end: mEnd });
  const dow = mStart.getDay();
  const padding = dow === 0 ? 6 : dow - 1;
  const allDays = [...Array(padding).fill(null), ...days];

  return (
    <Popover
      open={open}
      onOpenChange={(v) => {
        if (!v) {
          setIsTyping(false);
        }
        onOpenChange(v);
      }}
    >
      <PopoverTrigger asChild>
        <div
          className={cn(
            "border-input bg-background flex h-full flex-1 cursor-pointer items-center rounded-md border px-3",
            (disabled || readonly) && "cursor-not-allowed opacity-50",
            !displayValue && !isTyping && "text-muted-foreground",
            className,
          )}
          onClick={() => {
            if (!disabled && !readonly) onOpenChange(true);
          }}
        >
          <CalendarIcon className="text-muted-foreground mr-2 h-4 w-4 shrink-0" />
          <input
            type="text"
            inputMode="numeric"
            value={isTyping ? typingValue : displayValue || ""}
            placeholder={label}
            disabled={disabled || readonly}
            onChange={(e) => handleTriggerInput(e.target.value)}
            onClick={(e) => e.stopPropagation()}
            onFocus={() => {
              if (!disabled && !readonly && !open) onOpenChange(true);
            }}
            onBlur={() => {
              if (!open) setIsTyping(false);
            }}
            className="placeholder:text-muted-foreground h-full w-full bg-transparent text-sm font-normal outline-none disabled:cursor-not-allowed"
          />
        </div>
      </PopoverTrigger>
      <PopoverContent className="w-auto p-0" align="start" onOpenAutoFocus={(e) => e.preventDefault()}>
        <div className="p-4">
          {viewMode === "year" ? (
            <>
              <div className="mb-4 flex items-center justify-between">
                <Button
                  variant="ghost"
                  size="sm"
                  className="h-8 w-8 p-0"
                  onClick={() => setYearRangeStart(yearRangeStart - 12)}
                >
                  <ChevronLeft className="h-4 w-4" />
                </Button>
                <div className="text-sm font-medium">
                  {yearRangeStart} - {yearRangeStart + 11}
                </div>
                <Button
                  variant="ghost"
                  size="sm"
                  className="h-8 w-8 p-0"
                  onClick={() => setYearRangeStart(yearRangeStart + 12)}
                >
                  <ChevronRight className="h-4 w-4" />
                </Button>
              </div>
              <div className="grid grid-cols-4 gap-2">
                {Array.from({ length: 12 }, (_, i) => yearRangeStart + i).map((year) => (
                  <Button
                    key={year}
                    variant="ghost"
                    size="sm"
                    className={cn(
                      "h-9 text-xs",
                      year === currentMonth.getFullYear() && "bg-primary text-primary-foreground hover:bg-primary",
                      year === new Date().getFullYear() &&
                        year !== currentMonth.getFullYear() &&
                        "border-primary border",
                    )}
                    onClick={() => {
                      setCurrentMonth(new Date(year, currentMonth.getMonth(), 1));
                      setViewMode("month");
                    }}
                  >
                    {year}
                  </Button>
                ))}
              </div>
            </>
          ) : viewMode === "month" ? (
            <>
              <div className="mb-4 flex items-center justify-between">
                <Button
                  variant="ghost"
                  size="sm"
                  className="h-8 w-8 p-0"
                  onClick={() => setCurrentMonth(new Date(currentMonth.getFullYear() - 1, currentMonth.getMonth(), 1))}
                >
                  <ChevronLeft className="h-4 w-4" />
                </Button>
                <button
                  type="button"
                  className="hover:bg-accent rounded-md px-2 py-1 text-sm font-medium transition-colors"
                  onClick={() => {
                    setYearRangeStart(Math.floor(currentMonth.getFullYear() / 12) * 12);
                    setViewMode("year");
                  }}
                >
                  {currentMonth.getFullYear()}년
                </button>
                <Button
                  variant="ghost"
                  size="sm"
                  className="h-8 w-8 p-0"
                  onClick={() => setCurrentMonth(new Date(currentMonth.getFullYear() + 1, currentMonth.getMonth(), 1))}
                >
                  <ChevronRight className="h-4 w-4" />
                </Button>
              </div>
              <div className="grid grid-cols-4 gap-2">
                {Array.from({ length: 12 }, (_, i) => i).map((month) => (
                  <Button
                    key={month}
                    variant="ghost"
                    size="sm"
                    className={cn(
                      "h-9 text-xs",
                      month === currentMonth.getMonth() && "bg-primary text-primary-foreground hover:bg-primary",
                      month === new Date().getMonth() &&
                        currentMonth.getFullYear() === new Date().getFullYear() &&
                        month !== currentMonth.getMonth() &&
                        "border-primary border",
                    )}
                    onClick={() => {
                      setCurrentMonth(new Date(currentMonth.getFullYear(), month, 1));
                      setViewMode("calendar");
                    }}
                  >
                    {month + 1}월
                  </Button>
                ))}
              </div>
            </>
          ) : (
            <>
              <div className="mb-4 flex items-center justify-between">
                <Button
                  variant="ghost"
                  size="sm"
                  className="h-8 w-8 p-0"
                  onClick={() => setCurrentMonth(subMonths(currentMonth, 1))}
                >
                  <ChevronLeft className="h-4 w-4" />
                </Button>
                <button
                  type="button"
                  className="hover:bg-accent rounded-md px-2 py-1 text-sm font-medium transition-colors"
                  onClick={() => {
                    setYearRangeStart(Math.floor(currentMonth.getFullYear() / 12) * 12);
                    setViewMode("year");
                  }}
                >
                  {format(currentMonth, "yyyy년 MM월", { locale: ko })}
                </button>
                <Button
                  variant="ghost"
                  size="sm"
                  className="h-8 w-8 p-0"
                  onClick={() => setCurrentMonth(addMonths(currentMonth, 1))}
                >
                  <ChevronRight className="h-4 w-4" />
                </Button>
              </div>
              <div className="mb-2 grid grid-cols-7 gap-1">
                {["월", "화", "수", "목", "금", "토", "일"].map((d) => (
                  <div key={d} className="text-muted-foreground p-2 text-center text-xs font-medium">
                    {d}
                  </div>
                ))}
              </div>
              <div className="grid grid-cols-7 gap-1">
                {allDays.map((d, idx) => {
                  if (!d) return <div key={idx} className="p-2" />;
                  const isCur = isSameMonth(d, currentMonth);
                  const isSel = selectedDate ? isSameDay(d, selectedDate) : false;
                  const isT = isTodayFn(d);
                  return (
                    <Button
                      key={d.toISOString()}
                      variant="ghost"
                      size="sm"
                      className={cn(
                        "h-8 w-8 p-0 text-xs",
                        !isCur && "text-muted-foreground opacity-50",
                        isSel && "bg-primary text-primary-foreground hover:bg-primary",
                        isT && !isSel && "border-primary border",
                      )}
                      onClick={() => onSelect(d)}
                      disabled={!isCur}
                    >
                      {format(d, "d")}
                    </Button>
                  );
                })}
              </div>
            </>
          )}
        </div>
      </PopoverContent>
    </Popover>
  );
};

export const RangeDatePicker = forwardRef<
  HTMLDivElement,
  {
    value?: [string, string];
    onChange?: (value: [string, string]) => void;
    dateFormat: string;
    minDate?: string;
    maxDate?: string;
    disabled?: boolean;
    readonly?: boolean;
    className?: string;
  }
>(({ value = ["", ""], onChange, dateFormat = "YYYY-MM-DD", minDate, maxDate, disabled, readonly, className }, ref) => {
  const [openStart, setOpenStart] = useState(false);
  const [openEnd, setOpenEnd] = useState(false);

  const startDate = useMemo(() => parseDate(value[0], dateFormat), [value, dateFormat]);
  const endDate = useMemo(() => parseDate(value[1], dateFormat), [value, dateFormat]);

  const handleStartSelect = useCallback(
    (date: Date) => {
      const newStart = formatDate(date, dateFormat);
      if (endDate && date > endDate) {
        onChange?.([newStart, newStart]);
      } else {
        onChange?.([newStart, value[1]]);
      }
      setOpenStart(false);
    },
    [value, dateFormat, endDate, onChange],
  );

  const handleEndSelect = useCallback(
    (date: Date) => {
      const newEnd = formatDate(date, dateFormat);
      if (startDate && date < startDate) {
        onChange?.([newEnd, newEnd]);
      } else {
        onChange?.([value[0], newEnd]);
      }
      setOpenEnd(false);
    },
    [value, dateFormat, startDate, onChange],
  );

  return (
    <div ref={ref} className={cn("flex h-full items-center", className)}>
      <RangeCalendarPopover
        open={openStart}
        onOpenChange={setOpenStart}
        selectedDate={startDate}
        onSelect={handleStartSelect}
        label="시작일"
        disabled={disabled}
        readonly={readonly}
        displayValue={value[0]}
        className={className}
      />
      <span className="text-muted-foreground">~</span>
      <RangeCalendarPopover
        open={openEnd}
        onOpenChange={setOpenEnd}
        selectedDate={endDate}
        onSelect={handleEndSelect}
        label="종료일"
        disabled={disabled}
        readonly={readonly}
        displayValue={value[1]}
        className={className}
      />
    </div>
  );
});
RangeDatePicker.displayName = "RangeDatePicker";

/**
 * 시간 선택 컴포넌트
 */
export const TimePicker = forwardRef<
  HTMLInputElement,
  {
    value?: string;
    onChange?: (value: string) => void;
    disabled?: boolean;
    readonly?: boolean;
    className?: string;
  }
>(({ value, onChange, disabled, readonly, className }, ref) => {
  return (
    <div className="relative h-full w-full">
      <Clock className="text-muted-foreground pointer-events-none absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2" />
      <input
        ref={ref}
        type="time"
        value={value || ""}
        onChange={(e) => onChange?.(e.target.value)}
        disabled={disabled}
        readOnly={readonly}
        className={cn(
          "h-full w-full bg-transparent pl-10 pr-2 text-sm outline-none border-0",
          (disabled || readonly) && "cursor-not-allowed opacity-50",
          className,
        )}
      />
    </div>
  );
});
TimePicker.displayName = "TimePicker";

/**
 * 날짜+시간 선택 컴포넌트
 */
export const DateTimePicker = forwardRef<
  HTMLDivElement,
  {
    value?: string;
    onChange?: (value: string) => void;
    dateFormat: string;
    minDate?: string;
    maxDate?: string;
    disabled?: boolean;
    readonly?: boolean;
    className?: string;
  }
>(({ value, onChange, dateFormat = "YYYY-MM-DD HH:mm", minDate, maxDate, disabled, readonly, className }, ref) => {
  const [datePart, timePart] = useMemo(() => {
    if (!value) return ["", ""];
    const parts = value.split(" ");
    return [parts[0] || "", parts[1] || ""];
  }, [value]);

  const handleDateChange = useCallback(
    (newDate: string) => {
      const newValue = `${newDate} ${timePart || "00:00"}`;
      onChange?.(newValue.trim());
    },
    [timePart, onChange],
  );

  const handleTimeChange = useCallback(
    (newTime: string) => {
      const newValue = `${datePart || format(new Date(), "yyyy-MM-dd")} ${newTime}`;
      onChange?.(newValue.trim());
    },
    [datePart, onChange],
  );

  return (
    <div ref={ref} className={cn("flex h-full", className)}>
      <div className="h-full flex-1">
        <SingleDatePicker
          value={datePart}
          onChange={handleDateChange}
          dateFormat="YYYY-MM-DD"
          minDate={minDate}
          maxDate={maxDate}
          disabled={disabled}
          readonly={readonly}
          className={className}
        />
      </div>
      <div className="bg-border h-full w-px shrink-0 self-stretch" aria-hidden />
      <div className="h-full w-1/3 min-w-[100px]">
        <TimePicker value={timePart} onChange={handleTimeChange} disabled={disabled} readonly={readonly} className={className} />
      </div>
    </div>
  );
});
DateTimePicker.displayName = "DateTimePicker";
