"use client";

import React, { useState, useEffect } 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";
import { DateTypeConfig } from "@/types/screen";

interface DateTypeConfigPanelProps {
  config: DateTypeConfig;
  onConfigChange: (config: DateTypeConfig) => void;
}

export const DateTypeConfigPanel: React.FC<DateTypeConfigPanelProps> = ({ config, onConfigChange }) => {
  // 기본값이 설정된 config 사용
  const safeConfig = {
    format: "YYYY-MM-DD" as const,
    showTime: false,
    placeholder: "",
    minDate: "",
    maxDate: "",
    defaultValue: "",
    ...config,
  };

  // 로컬 상태로 실시간 입력 관리
  const [localValues, setLocalValues] = useState(() => {
    // console.log("📅 DateTypeConfigPanel 초기 상태 설정:", {
    // config,
    // safeConfig,
    // });

    return {
      format: safeConfig.format,
      showTime: safeConfig.showTime,
      placeholder: safeConfig.placeholder,
      minDate: safeConfig.minDate,
      maxDate: safeConfig.maxDate,
      defaultValue: safeConfig.defaultValue,
    };
  });

  // config가 변경될 때 로컬 상태 동기화
  useEffect(() => {
    // config가 실제로 존재하고 의미있는 데이터가 있을 때만 업데이트
    const hasValidConfig = config && Object.keys(config).length > 0;

    // console.log("📅 DateTypeConfigPanel config 변경 감지:", {
    // config,
    // configExists: !!config,
    // configKeys: config ? Object.keys(config) : [],
    // hasValidConfig,
    // safeConfig,
    // safeConfigKeys: Object.keys(safeConfig),
    // currentLocalValues: localValues,
    // configStringified: JSON.stringify(config),
    // safeConfigStringified: JSON.stringify(safeConfig),
    // willUpdateLocalValues: hasValidConfig,
    // timestamp: new Date().toISOString(),
    // });

    // config가 없거나 비어있으면 로컬 상태를 유지
    if (!hasValidConfig) {
      // console.log("⚠️ config가 없거나 비어있음 - 로컬 상태 유지");
      return;
    }

    const newLocalValues = {
      format: safeConfig.format,
      showTime: safeConfig.showTime,
      placeholder: safeConfig.placeholder,
      minDate: safeConfig.minDate,
      maxDate: safeConfig.maxDate,
      defaultValue: safeConfig.defaultValue,
    };

    // 실제로 변경된 값이 있을 때만 업데이트
    const hasChanges =
      localValues.format !== newLocalValues.format ||
      localValues.showTime !== newLocalValues.showTime ||
      localValues.defaultValue !== newLocalValues.defaultValue ||
      localValues.placeholder !== newLocalValues.placeholder ||
      localValues.minDate !== newLocalValues.minDate ||
      localValues.maxDate !== newLocalValues.maxDate;

    // console.log("🔄 로컬 상태 업데이트 검사:", {
    // oldLocalValues: localValues,
    // newLocalValues,
    // hasChanges,
    // changes: {
    // format: localValues.format !== newLocalValues.format,
    // showTime: localValues.showTime !== newLocalValues.showTime,
    // defaultValue: localValues.defaultValue !== newLocalValues.defaultValue,
    // placeholder: localValues.placeholder !== newLocalValues.placeholder,
    // minDate: localValues.minDate !== newLocalValues.minDate,
    // maxDate: localValues.maxDate !== newLocalValues.maxDate,
    // },
    // });

    if (hasChanges) {
      // console.log("✅ 로컬 상태 업데이트 실행");
      setLocalValues(newLocalValues);
    } else {
      // console.log("⏭️ 변경사항 없음 - 로컬 상태 유지");
    }
  }, [JSON.stringify(config)]);

  const updateConfig = (key: keyof DateTypeConfig, value: any) => {
    // 로컬 상태 즉시 업데이트
    setLocalValues((prev) => ({ ...prev, [key]: value }));

    // 실제 config 업데이트 - 현재 로컬 상태를 기반으로 새 객체 생성 (safeConfig 기본값 덮어쓰기 방지)
    const newConfig = JSON.parse(JSON.stringify({ ...localValues, [key]: value }));
    // console.log("📅 DateTypeConfig 업데이트:", {
    // key,
    // value,
    // oldConfig: safeConfig,
    // newConfig,
    // localValues,
    // timestamp: new Date().toISOString(),
    // changes: {
    // format: newConfig.format !== safeConfig.format,
    // showTime: newConfig.showTime !== safeConfig.showTime,
    // placeholder: newConfig.placeholder !== safeConfig.placeholder,
    // minDate: newConfig.minDate !== safeConfig.minDate,
    // maxDate: newConfig.maxDate !== safeConfig.maxDate,
    // defaultValue: newConfig.defaultValue !== safeConfig.defaultValue,
    // },
    // willCallOnConfigChange: true,
    // });

    // console.log("🔄 onConfigChange 호출 직전:", {
    // newConfig,
    // configStringified: JSON.stringify(newConfig),
    // });

    // 약간의 지연을 두고 업데이트 (배치 업데이트 방지)
    setTimeout(() => {
      // console.log("✅ onConfigChange 호출 완료:", {
      // key,
      // newConfig,
      // timestamp: new Date().toISOString(),
      // });
      onConfigChange(newConfig);
    }, 0);
  };

  return (
    <div className="space-y-4">
      {/* 날짜 형식 */}
      <div>
        <Label htmlFor="dateFormat" className="text-sm font-medium">
          날짜 형식
        </Label>
        <Select
          value={localValues.format}
          onValueChange={(value) => {
            // console.log("📅 날짜 형식 변경:", {
            // oldFormat: localValues.format,
            // newFormat: value,
            // oldShowTime: localValues.showTime,
            // });

            // format 변경 시 showTime도 자동 동기화
            const hasTime = value.includes("HH:mm");

            // 한 번에 두 값을 모두 업데이트 - 현재 로컬 상태 기반으로 생성
            const newConfig = JSON.parse(
              JSON.stringify({
                ...localValues,
                format: value,
                showTime: hasTime,
              }),
            );

            // console.log("🔄 format+showTime 동시 업데이트:", {
            // newFormat: value,
            // newShowTime: hasTime,
            // newConfig,
            // });

            // 로컬 상태도 동시 업데이트
            setLocalValues((prev) => ({
              ...prev,
              format: value,
              showTime: hasTime,
            }));

            // 한 번에 업데이트
            setTimeout(() => {
              onConfigChange(newConfig);
            }, 0);
          }}
        >
          <SelectTrigger className="mt-1 h-6 w-full px-2 py-0 text-xs">
            <SelectValue placeholder="날짜 형식 선택" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="YYYY-MM-DD">YYYY-MM-DD</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 className="flex items-center justify-between">
        <Label htmlFor="showTime" className="text-sm font-medium">
          시간 표시
        </Label>
        <Checkbox
          id="showTime"
          checked={localValues.showTime}
          onCheckedChange={(checked) => {
            const newShowTime = !!checked;
            // console.log("⏰ 시간 표시 체크박스 변경:", {
            // oldShowTime: localValues.showTime,
            // newShowTime,
            // currentFormat: localValues.format,
            // });

            // showTime 변경 시 format도 적절히 조정
            let newFormat = localValues.format;
            if (newShowTime && !localValues.format.includes("HH:mm")) {
              // 시간 표시를 켰는데 format에 시간이 없으면 기본 시간 format으로 변경
              newFormat = "YYYY-MM-DD HH:mm";
            } else if (!newShowTime && localValues.format.includes("HH:mm")) {
              // 시간 표시를 껐는데 format에 시간이 있으면 날짜만 format으로 변경
              newFormat = "YYYY-MM-DD";
            }

            // console.log("🔄 showTime+format 동시 업데이트:", {
            // newShowTime,
            // oldFormat: localValues.format,
            // newFormat,
            // });

            // 한 번에 두 값을 모두 업데이트 - 현재 로컬 상태 기반으로 생성
            const newConfig = JSON.parse(
              JSON.stringify({
                ...localValues,
                showTime: newShowTime,
                format: newFormat,
              }),
            );

            // 로컬 상태도 동시 업데이트
            setLocalValues((prev) => ({
              ...prev,
              showTime: newShowTime,
              format: newFormat,
            }));

            // 한 번에 업데이트
            setTimeout(() => {
              onConfigChange(newConfig);
            }, 0);
          }}
        />
      </div>

      {/* 플레이스홀더 */}
      <div>
        <Label htmlFor="placeholder" className="text-sm font-medium">
          플레이스홀더
        </Label>
        <Input
          id="placeholder"
          value={localValues.placeholder}
          onChange={(e) => updateConfig("placeholder", e.target.value)}
          placeholder="날짜를 선택하세요"
          className="mt-1"
        />
      </div>

      {/* 최소 날짜 */}
      <div>
        <Label htmlFor="minDate" className="text-sm font-medium">
          최소 날짜
        </Label>
        <Input
          id="minDate"
          type={localValues.showTime || localValues.format.includes("HH:mm") ? "datetime-local" : "date"}
          value={localValues.minDate}
          onChange={(e) => updateConfig("minDate", e.target.value)}
          className="mt-1"
        />
      </div>

      {/* 최대 날짜 */}
      <div>
        <Label htmlFor="maxDate" className="text-sm font-medium">
          최대 날짜
        </Label>
        <Input
          id="maxDate"
          type={localValues.showTime || localValues.format.includes("HH:mm") ? "datetime-local" : "date"}
          value={localValues.maxDate}
          onChange={(e) => updateConfig("maxDate", e.target.value)}
          className="mt-1"
        />
      </div>

      {/* 기본값 */}
      <div>
        <Label htmlFor="defaultValue" className="text-sm font-medium">
          기본값
        </Label>
        <Input
          id="defaultValue"
          type={localValues.showTime || localValues.format.includes("HH:mm") ? "datetime-local" : "date"}
          value={localValues.defaultValue}
          onChange={(e) => updateConfig("defaultValue", e.target.value)}
          className="mt-1"
        />
      </div>
    </div>
  );
};
