"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 { CheckboxTypeConfig } from "@/types/screen";

interface CheckboxTypeConfigPanelProps {
  config: CheckboxTypeConfig;
  onConfigChange: (config: CheckboxTypeConfig) => void;
}

export const CheckboxTypeConfigPanel: React.FC<CheckboxTypeConfigPanelProps> = ({ config, onConfigChange }) => {
  // 기본값이 설정된 config 사용
  const safeConfig = {
    defaultChecked: false,
    labelPosition: "right" as const,
    checkboxText: "",
    trueValue: true,
    falseValue: false,
    indeterminate: false,
    ...config,
  };

  // 로컬 상태로 실시간 입력 관리
  const [localValues, setLocalValues] = useState({
    defaultChecked: safeConfig.defaultChecked,
    labelPosition: safeConfig.labelPosition,
    checkboxText: safeConfig.checkboxText,
    trueValue: safeConfig.trueValue?.toString() || "true",
    falseValue: safeConfig.falseValue?.toString() || "false",
    indeterminate: safeConfig.indeterminate,
  });

  // config가 변경될 때 로컬 상태 동기화
  useEffect(() => {
    setLocalValues({
      defaultChecked: safeConfig.defaultChecked,
      labelPosition: safeConfig.labelPosition,
      checkboxText: safeConfig.checkboxText,
      trueValue: safeConfig.trueValue?.toString() || "true",
      falseValue: safeConfig.falseValue?.toString() || "false",
      indeterminate: safeConfig.indeterminate,
    });
  }, [
    safeConfig.defaultChecked,
    safeConfig.labelPosition,
    safeConfig.checkboxText,
    safeConfig.trueValue,
    safeConfig.falseValue,
    safeConfig.indeterminate,
  ]);

  const updateConfig = (key: keyof CheckboxTypeConfig, value: any) => {
    // 로컬 상태 즉시 업데이트
    if (key === "trueValue" || key === "falseValue") {
      setLocalValues((prev) => ({ ...prev, [key]: value?.toString() || (key === "trueValue" ? "true" : "false") }));
      // 값을 적절한 타입으로 변환
      const convertedValue = value === "true" ? true : value === "false" ? false : value;
      value = convertedValue;
    } else {
      setLocalValues((prev) => ({ ...prev, [key]: value }));
    }

    // 실제 config 업데이트 - 현재 로컬 상태를 기반으로 새 객체 생성 (safeConfig 기본값 덮어쓰기 방지)
    const currentValues = {
      defaultChecked: key === "defaultChecked" ? value : localValues.defaultChecked,
      labelPosition: key === "labelPosition" ? value : localValues.labelPosition,
      checkboxText: key === "checkboxText" ? value : localValues.checkboxText,
      trueValue:
        key === "trueValue"
          ? value
          : localValues.trueValue === "true"
            ? true
            : localValues.trueValue === "false"
              ? false
              : localValues.trueValue,
      falseValue:
        key === "falseValue"
          ? value
          : localValues.falseValue === "true"
            ? true
            : localValues.falseValue === "false"
              ? false
              : localValues.falseValue,
      indeterminate: key === "indeterminate" ? value : localValues.indeterminate,
    };

    const newConfig = JSON.parse(JSON.stringify(currentValues));
    // console.log("☑️ CheckboxTypeConfig 업데이트:", {
    // key,
    // value,
    // oldConfig: safeConfig,
    // newConfig,
    // localValues,
    // });

    setTimeout(() => {
      onConfigChange(newConfig);
    }, 0);
  };

  return (
    <div className="space-y-4">
      {/* 기본 체크 상태 */}
      <div className="flex items-center justify-between">
        <Label htmlFor="defaultChecked" className="text-sm font-medium">
          기본적으로 체크됨
        </Label>
        <Checkbox
          id="defaultChecked"
          checked={localValues.defaultChecked}
          onCheckedChange={(checked) => updateConfig("defaultChecked", !!checked)}
        />
      </div>

      {/* 라벨 위치 */}
      <div>
        <Label htmlFor="labelPosition" className="text-sm font-medium">
          라벨 위치
        </Label>
        <Select value={localValues.labelPosition} onValueChange={(value) => updateConfig("labelPosition", value)}>
          <SelectTrigger className="mt-1 h-6 w-full px-2 py-0 text-xs">
            <SelectValue placeholder="라벨 위치 선택" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="left">왼쪽</SelectItem>
            <SelectItem value="right">오른쪽</SelectItem>
            <SelectItem value="top">위쪽</SelectItem>
            <SelectItem value="bottom">아래쪽</SelectItem>
          </SelectContent>
        </Select>
      </div>

      {/* 체크박스 옆 텍스트 */}
      <div>
        <Label htmlFor="checkboxText" className="text-sm font-medium">
          체크박스 옆 텍스트
        </Label>
        <Input
          id="checkboxText"
          value={localValues.checkboxText}
          onChange={(e) => updateConfig("checkboxText", e.target.value)}
          placeholder="체크박스와 함께 표시될 텍스트"
          className="mt-1"
        />
      </div>

      {/* 값 설정 */}
      <div className="grid grid-cols-2 gap-3">
        <div>
          <Label htmlFor="trueValue" className="text-sm font-medium">
            체크됨 값
          </Label>
          <Input
            id="trueValue"
            value={localValues.trueValue}
            onChange={(e) => updateConfig("trueValue", e.target.value)}
            className="mt-1"
            placeholder="true"
          />
        </div>

        <div>
          <Label htmlFor="falseValue" className="text-sm font-medium">
            체크 해제 값
          </Label>
          <Input
            id="falseValue"
            value={localValues.falseValue}
            onChange={(e) => updateConfig("falseValue", e.target.value)}
            className="mt-1"
            placeholder="false"
          />
        </div>
      </div>

      {/* 불확정 상태 지원 */}
      <div className="flex items-center justify-between">
        <Label htmlFor="indeterminate" className="text-sm font-medium">
          불확정 상태 지원
        </Label>
        <Checkbox
          id="indeterminate"
          checked={localValues.indeterminate}
          onCheckedChange={(checked) => updateConfig("indeterminate", !!checked)}
        />
      </div>

      {/* 미리보기 */}
      <div className="rounded-md border bg-muted p-3">
        <Label className="text-sm font-medium text-foreground">미리보기</Label>
        <div className="mt-2 flex items-center space-x-2">
          {localValues.labelPosition === "left" && localValues.checkboxText && (
            <span className="text-xs">{localValues.checkboxText}</span>
          )}
          {localValues.labelPosition === "top" && localValues.checkboxText && (
            <div className="w-full">
              <div className="text-xs">{localValues.checkboxText}</div>
              <Checkbox checked={localValues.defaultChecked} className="mt-1" />
            </div>
          )}
          {(localValues.labelPosition === "right" || localValues.labelPosition === "bottom") && (
            <>
              <Checkbox checked={localValues.defaultChecked} />
              {localValues.checkboxText && <span className="text-xs">{localValues.checkboxText}</span>}
            </>
          )}
          {localValues.labelPosition === "left" && <Checkbox checked={localValues.defaultChecked} />}
        </div>
        <div className="mt-2 text-xs text-muted-foreground">
          체크됨: {localValues.trueValue}, 해제됨: {localValues.falseValue}
          {localValues.indeterminate && ", 불확정 상태 지원"}
        </div>
      </div>

      {/* 안내 메시지 */}
      {localValues.indeterminate && (
        <div className="bg-accent rounded-md p-3">
          <div className="text-sm font-medium text-primary">불확정 상태</div>
          <div className="mt-1 text-xs text-primary">
            체크박스가 부분적으로 선택된 상태를 나타낼 수 있습니다. 주로 트리 구조에서 일부 하위 항목만 선택된 경우에
            사용됩니다.
          </div>
        </div>
      )}
    </div>
  );
};

export default CheckboxTypeConfigPanel;
