"use client";

import React, { useState, useEffect } from "react";
import { Label } from "@/components/ui/label";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { Checkbox } from "@/components/ui/checkbox";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Plus, X } from "lucide-react";
import { SelectTypeConfig } from "@/types/screen";

interface SelectTypeConfigPanelProps {
  config: SelectTypeConfig;
  onConfigChange: (config: SelectTypeConfig) => void;
}

export const SelectTypeConfigPanel: React.FC<SelectTypeConfigPanelProps> = ({ config, onConfigChange }) => {
  // 기본값이 설정된 config 사용
  const safeConfig = {
    options: [],
    multiple: false,
    searchable: false,
    placeholder: "",
    allowClear: false,
    maxSelections: undefined,
    defaultValue: "",
    ...config,
  };

  // 로컬 상태로 실시간 입력 관리
  const [localValues, setLocalValues] = useState({
    multiple: safeConfig.multiple,
    searchable: safeConfig.searchable,
    placeholder: safeConfig.placeholder,
    allowClear: safeConfig.allowClear,
    maxSelections: safeConfig.maxSelections?.toString() || "",
    defaultValue: safeConfig.defaultValue || "",
  });

  const [newOption, setNewOption] = useState({ label: "", value: "" });

  // 옵션들의 로컬 편집 상태
  const [localOptions, setLocalOptions] = useState(
    (safeConfig.options || []).map((option) => ({
      label: option.label || "",
      value: option.value || "",
      disabled: option.disabled || false,
    })),
  );

  // config가 변경될 때 로컬 상태 동기화
  useEffect(() => {
    setLocalValues({
      multiple: safeConfig.multiple,
      searchable: safeConfig.searchable,
      placeholder: safeConfig.placeholder,
      allowClear: safeConfig.allowClear,
      maxSelections: safeConfig.maxSelections?.toString() || "",
      defaultValue: safeConfig.defaultValue || "",
    });

    setLocalOptions(
      (safeConfig.options || []).map((option) => ({
        label: option.label || "",
        value: option.value || "",
        disabled: option.disabled || false,
      })),
    );
  }, [
    safeConfig.multiple,
    safeConfig.searchable,
    safeConfig.placeholder,
    safeConfig.allowClear,
    safeConfig.maxSelections,
    safeConfig.defaultValue,
    JSON.stringify(safeConfig.options), // 옵션 배열의 전체 내용 변화 감지
  ]);

  const updateConfig = (key: keyof SelectTypeConfig, value: any) => {
    // 로컬 상태 즉시 업데이트
    if (key === "maxSelections") {
      setLocalValues((prev) => ({ ...prev, [key]: value?.toString() || "" }));
    } else {
      setLocalValues((prev) => ({ ...prev, [key]: value }));
    }

    // 실제 config 업데이트 - 깊은 복사로 새 객체 보장
    const newConfig = JSON.parse(JSON.stringify({ ...safeConfig, [key]: value }));
    // console.log("📋 SelectTypeConfig 업데이트:", {
    // key,
    // value,
    // oldConfig: safeConfig,
    // newConfig,
    // timestamp: new Date().toISOString(),
    // });

    // 약간의 지연을 두고 업데이트 (배치 업데이트 방지)
    setTimeout(() => {
      onConfigChange(newConfig);
    }, 0);
  };

  const addOption = () => {
    if (newOption.label.trim() && newOption.value.trim()) {
      const newOptionData = { ...newOption, disabled: false };
      const updatedOptions = [...(safeConfig.options || []), newOptionData];

      // console.log("➕ SelectType 옵션 추가:", {
      // newOption: newOptionData,
      // updatedOptions,
      // currentLocalOptions: localOptions,
      // timestamp: new Date().toISOString(),
      // });

      // 로컬 상태 즉시 업데이트
      setLocalOptions((prev) => {
        const newLocalOptions = [
          ...prev,
          {
            label: newOption.label,
            value: newOption.value,
            disabled: false,
          },
        ];
        // console.log("📋 SelectType 로컬 옵션 업데이트:", newLocalOptions);
        return newLocalOptions;
      });

      updateConfig("options", updatedOptions);
      setNewOption({ label: "", value: "" });
    }
  };

  const removeOption = (index: number) => {
    // console.log("➖ SelectType 옵션 삭제:", {
    // removeIndex: index,
    // currentOptions: safeConfig.options,
    // currentLocalOptions: localOptions,
    // });

    // 로컬 상태 즉시 업데이트
    setLocalOptions((prev) => {
      const newLocalOptions = prev.filter((_, i) => i !== index);
      // console.log("📋 SelectType 로컬 옵션 삭제 후:", newLocalOptions);
      return newLocalOptions;
    });

    const updatedOptions = (safeConfig.options || []).filter((_, i) => i !== index);
    updateConfig("options", updatedOptions);
  };

  const updateOption = (index: number, field: "label" | "value" | "disabled", value: any) => {
    // 로컬 상태 즉시 업데이트 (실시간 입력 반영)
    const updatedLocalOptions = [...localOptions];
    updatedLocalOptions[index] = { ...updatedLocalOptions[index], [field]: value };
    setLocalOptions(updatedLocalOptions);

    // 실제 config 업데이트
    const updatedOptions = [...(safeConfig.options || [])];
    updatedOptions[index] = { ...updatedOptions[index], [field]: value };
    updateConfig("options", updatedOptions);
  };

  return (
    <div className="space-y-4">
      {/* 기본 설정 */}
      <div className="space-y-3">
        {/* 플레이스홀더 */}
        <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 h-6 w-full px-2 py-0 text-xs"
          />
        </div>

        {/* 기본값 설정 */}
        <div>
          <Label htmlFor="defaultValue" className="text-sm font-medium">
            기본값
          </Label>
          <Select
            value={localValues.defaultValue || "_none_"}
            onValueChange={(value) => updateConfig("defaultValue", value === "_none_" ? "" : value)}
          >
            <SelectTrigger className="mt-1 h-8 w-full text-xs">
              <SelectValue placeholder="기본값 선택" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="_none_">선택 안함</SelectItem>
              {localOptions.map((option, index) => (
                <SelectItem key={`default-${option.value}-${index}`} value={option.value}>
                  {option.label} ({option.value})
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
          <p className="text-muted-foreground mt-1 text-xs">화면 로드 시 자동으로 선택될 값</p>
        </div>

        {/* 다중 선택 */}
        <div className="flex items-center justify-between">
          <Label htmlFor="multiple" className="text-sm font-medium">
            다중 선택 허용
          </Label>
          <Checkbox
            id="multiple"
            checked={localValues.multiple}
            onCheckedChange={(checked) => updateConfig("multiple", !!checked)}
          />
        </div>

        {/* 검색 가능 */}
        <div className="flex items-center justify-between">
          <Label htmlFor="searchable" className="text-sm font-medium">
            검색 가능
          </Label>
          <Checkbox
            id="searchable"
            checked={localValues.searchable}
            onCheckedChange={(checked) => updateConfig("searchable", !!checked)}
          />
        </div>

        {/* 클리어 허용 */}
        <div className="flex items-center justify-between">
          <Label htmlFor="allowClear" className="text-sm font-medium">
            선택 해제 허용
          </Label>
          <Checkbox
            id="allowClear"
            checked={localValues.allowClear}
            onCheckedChange={(checked) => updateConfig("allowClear", !!checked)}
          />
        </div>

        {/* 최대 선택 개수 (다중 선택인 경우) */}
        {localValues.multiple && (
          <div>
            <Label htmlFor="maxSelections" className="text-sm font-medium">
              최대 선택 개수
            </Label>
            <Input
              id="maxSelections"
              type="number"
              min="1"
              value={localValues.maxSelections}
              onChange={(e) => updateConfig("maxSelections", e.target.value ? Number(e.target.value) : undefined)}
              className="mt-1"
              placeholder="제한 없음"
            />
          </div>
        )}
      </div>

      {/* 옵션 관리 */}
      <div className="space-y-3">
        <Label className="text-sm font-medium">옵션 관리</Label>

        {/* 기존 옵션 목록 */}
        <div className="max-h-40 space-y-2 overflow-y-auto">
          {localOptions.map((option, index) => (
            <div key={`${option.value}-${index}`} className="flex items-center space-x-2 rounded border p-2">
              <Input
                value={option.label}
                onChange={(e) => updateOption(index, "label", e.target.value)}
                placeholder="표시 텍스트"
                className="flex-1"
              />
              <Input
                value={option.value}
                onChange={(e) => updateOption(index, "value", e.target.value)}
                placeholder="값"
                className="flex-1"
              />
              <Checkbox
                checked={option.disabled}
                onCheckedChange={(checked) => updateOption(index, "disabled", !!checked)}
                title="비활성화"
              />
              <Button size="sm" variant="ghost" onClick={() => removeOption(index)} className="h-6 w-8 p-1">
                <X className="h-4 w-4" />
              </Button>
            </div>
          ))}
        </div>

        {/* 새 옵션 추가 */}
        <div className="flex items-center space-x-2">
          <Input
            value={newOption.label}
            onChange={(e) => setNewOption({ ...newOption, label: e.target.value })}
            placeholder="표시 텍스트"
            className="flex-1"
          />
          <Input
            value={newOption.value}
            onChange={(e) => setNewOption({ ...newOption, value: e.target.value })}
            placeholder="값"
            className="flex-1"
          />
          <Button
            size="sm"
            onClick={addOption}
            disabled={!newOption.label.trim() || !newOption.value.trim()}
            className="h-6 w-8 p-1"
          >
            <Plus className="h-4 w-4" />
          </Button>
        </div>
      </div>
    </div>
  );
};
