"use client";

/**
 * V2Date 설정 패널
 * 통합 날짜 컴포넌트의 세부 설정을 관리합니다.
 */

import React from "react";
import { Label } from "@/components/ui/label";
import { Input } from "@/components/ui/input";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Separator } from "@/components/ui/separator";
import { Checkbox } from "@/components/ui/checkbox";

interface V2DateConfigPanelProps {
  config: Record<string, any>;
  onChange: (config: Record<string, any>) => void;
}

export const V2DateConfigPanel: React.FC<V2DateConfigPanelProps> = ({
  config,
  onChange,
}) => {
  // 설정 업데이트 핸들러
  const updateConfig = (field: string, value: any) => {
    onChange({ ...config, [field]: value });
  };

  return (
    <div className="space-y-4">
      {/* 날짜 타입 */}
      <div className="space-y-2">
        <Label className="text-xs font-medium">날짜 타입</Label>
        <Select
          value={config.dateType || config.type || "date"}
          onValueChange={(value) => updateConfig("dateType", value)}
        >
          <SelectTrigger className="h-8 text-xs">
            <SelectValue placeholder="타입 선택" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="date">날짜</SelectItem>
            <SelectItem value="time">시간</SelectItem>
            <SelectItem value="datetime">날짜+시간</SelectItem>
          </SelectContent>
        </Select>
      </div>

      <Separator />

      {/* 플레이스홀더 */}
      <div className="space-y-2">
        <Label className="text-xs font-medium">플레이스홀더</Label>
        <Input
          value={config.placeholder || ""}
          onChange={(e) => updateConfig("placeholder", e.target.value)}
          placeholder="날짜 선택"
          className="h-8 text-xs"
        />
        <p className="text-muted-foreground text-[10px]">날짜가 선택되지 않았을 때 표시할 텍스트</p>
      </div>

      <Separator />

      {/* 표시 형식 */}
      <div className="space-y-2">
        <Label className="text-xs font-medium">표시 형식</Label>
        <Select
          value={config.format || "YYYY-MM-DD"}
          onValueChange={(value) => updateConfig("format", value)}
        >
          <SelectTrigger className="h-8 text-xs">
            <SelectValue placeholder="형식 선택" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="YYYY-MM-DD">YYYY-MM-DD</SelectItem>
            <SelectItem value="YYYY/MM/DD">YYYY/MM/DD</SelectItem>
            <SelectItem value="DD/MM/YYYY">DD/MM/YYYY</SelectItem>
            <SelectItem value="MM/DD/YYYY">MM/DD/YYYY</SelectItem>
            <SelectItem value="YYYY년 MM월 DD일">YYYY년 MM월 DD일</SelectItem>
            {(config.dateType === "time" || config.dateType === "datetime") && (
              <>
                <SelectItem value="HH:mm">HH:mm</SelectItem>
                <SelectItem value="HH:mm:ss">HH:mm:ss</SelectItem>
                <SelectItem value="YYYY-MM-DD HH:mm">YYYY-MM-DD HH:mm</SelectItem>
                <SelectItem value="YYYY-MM-DD HH:mm:ss">YYYY-MM-DD HH:mm:ss</SelectItem>
              </>
            )}
          </SelectContent>
        </Select>
      </div>

      <Separator />

      {/* 날짜 범위 제한 */}
      <div className="space-y-3">
        <Label className="text-xs font-medium">날짜 범위 제한</Label>
        <div className="grid grid-cols-2 gap-2">
          <div className="space-y-2">
            <Label className="text-[10px] text-muted-foreground">최소 날짜</Label>
            <Input
              type="date"
              value={config.minDate || ""}
              onChange={(e) => updateConfig("minDate", e.target.value)}
              className="h-8 text-xs"
            />
          </div>
          <div className="space-y-2">
            <Label className="text-[10px] text-muted-foreground">최대 날짜</Label>
            <Input
              type="date"
              value={config.maxDate || ""}
              onChange={(e) => updateConfig("maxDate", e.target.value)}
              className="h-8 text-xs"
            />
          </div>
        </div>
      </div>

      <Separator />

      {/* 추가 옵션 */}
      <div className="space-y-3">
        <Label className="text-xs font-medium">추가 옵션</Label>
        
        <div className="flex items-center space-x-2">
          <Checkbox
            id="range"
            checked={config.range || false}
            onCheckedChange={(checked) => updateConfig("range", checked)}
          />
          <label htmlFor="range" className="text-xs">기간 선택 (시작~종료)</label>
        </div>

        <div className="flex items-center space-x-2">
          <Checkbox
            id="showToday"
            checked={config.showToday !== false}
            onCheckedChange={(checked) => updateConfig("showToday", checked)}
          />
          <label htmlFor="showToday" className="text-xs">오늘 버튼 표시</label>
        </div>

        {(config.dateType === "datetime" || config.dateType === "time") && (
          <div className="flex items-center space-x-2">
            <Checkbox
              id="showSeconds"
              checked={config.showSeconds || false}
              onCheckedChange={(checked) => updateConfig("showSeconds", checked)}
            />
            <label htmlFor="showSeconds" className="text-xs">초 단위 표시</label>
          </div>
        )}
      </div>
    </div>
  );
};

V2DateConfigPanel.displayName = "V2DateConfigPanel";

export default V2DateConfigPanel;