"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 { 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-1">
      {/* DATE TYPE 섹션 */}
      <div className="border-b border-border/50 pb-3 mb-3">
        <h4 className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground py-2">DATE TYPE</h4>
        <div className="flex items-center justify-between py-1.5">
          <span className="text-xs text-muted-foreground">날짜 타입</span>
          <div className="w-[140px]">
            <Select
              value={config.dateType || config.type || "date"}
              onValueChange={(value) => updateConfig("dateType", value)}
            >
              <SelectTrigger className="h-7 text-xs">
                <SelectValue placeholder="타입 선택" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="date">날짜</SelectItem>
                <SelectItem value="time">시간</SelectItem>
                <SelectItem value="datetime">날짜+시간</SelectItem>
              </SelectContent>
            </Select>
          </div>
        </div>
      </div>

      {/* PLACEHOLDER 섹션 */}
      <div className="border-b border-border/50 pb-3 mb-3">
        <h4 className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground py-2">PLACEHOLDER</h4>
        <div className="flex items-center justify-between py-1.5">
          <span className="text-xs text-muted-foreground">안내 텍스트</span>
          <div className="w-[140px]">
            <Input
              value={config.placeholder || ""}
              onChange={(e) => updateConfig("placeholder", e.target.value)}
              placeholder="날짜 선택"
              className="h-7 text-xs"
            />
          </div>
        </div>
      </div>

      {/* FORMAT 섹션 */}
      <div className="border-b border-border/50 pb-3 mb-3">
        <h4 className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground py-2">FORMAT</h4>
        <div className="flex items-center justify-between py-1.5">
          <span className="text-xs text-muted-foreground">표시 형식</span>
          <div className="w-[140px]">
            <Select
              value={config.format || "YYYY-MM-DD"}
              onValueChange={(value) => updateConfig("format", value)}
            >
              <SelectTrigger className="h-7 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>
        </div>
      </div>

      {/* DATE RANGE 섹션 */}
      <div className="border-b border-border/50 pb-3 mb-3">
        <h4 className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground py-2">DATE RANGE</h4>
        <div className="flex gap-2">
          <div className="flex-1">
            <Label className="text-[10px] text-muted-foreground">최소 날짜</Label>
            <Input
              type="date"
              value={config.minDate || ""}
              onChange={(e) => updateConfig("minDate", e.target.value)}
              className="h-7 text-xs"
            />
          </div>
          <div className="flex-1">
            <Label className="text-[10px] text-muted-foreground">최대 날짜</Label>
            <Input
              type="date"
              value={config.maxDate || ""}
              onChange={(e) => updateConfig("maxDate", e.target.value)}
              className="h-7 text-xs"
            />
          </div>
        </div>
      </div>

      {/* OPTIONS 섹션 */}
      <div className="border-b border-border/50 pb-3 mb-3">
        <h4 className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground py-2">OPTIONS</h4>

        <div className="flex items-center justify-between py-1.5">
          <span className="text-xs text-muted-foreground">기간 선택 (시작~종료)</span>
          <Checkbox
            checked={config.range || false}
            onCheckedChange={(checked) => updateConfig("range", checked)}
          />
        </div>

        <div className="flex items-center justify-between py-1.5">
          <span className="text-xs text-muted-foreground">오늘 버튼 표시</span>
          <Checkbox
            checked={config.showToday !== false}
            onCheckedChange={(checked) => updateConfig("showToday", checked)}
          />
        </div>

        {(config.dateType === "datetime" || config.dateType === "time") && (
          <div className="flex items-center justify-between py-1.5">
            <span className="text-xs text-muted-foreground">초 단위 표시</span>
            <Checkbox
              checked={config.showSeconds || false}
              onCheckedChange={(checked) => updateConfig("showSeconds", checked)}
            />
          </div>
        )}
      </div>
    </div>
  );
};

V2DateConfigPanel.displayName = "V2DateConfigPanel";

export default V2DateConfigPanel;