"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 { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Checkbox } from "@/components/ui/checkbox";
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
import { Plus, X } from "lucide-react";
import { RadioTypeConfig } from "@/types/screen";

interface RadioTypeConfigPanelProps {
  config: RadioTypeConfig;
  onConfigChange: (config: RadioTypeConfig) => void;
}

export const RadioTypeConfigPanel: React.FC<RadioTypeConfigPanelProps> = ({ config, onConfigChange }) => {
  // 기본값이 설정된 config 사용
  const safeConfig = {
    options: [],
    layout: "vertical" as const,
    defaultValue: "",
    allowNone: false,
    ...config,
  };

  // 로컬 상태로 실시간 입력 관리
  const [localValues, setLocalValues] = useState({
    layout: safeConfig.layout,
    defaultValue: safeConfig.defaultValue,
    allowNone: safeConfig.allowNone,
  });

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

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

  // config가 변경될 때 로컬 상태 동기화
  useEffect(() => {
    setLocalValues({
      layout: safeConfig.layout,
      defaultValue: safeConfig.defaultValue,
      allowNone: safeConfig.allowNone,
    });

    setLocalOptions(
      (safeConfig.options || []).map((option) => ({
        label: option.label || "",
        value: option.value || "",
      })),
    );
  }, [safeConfig.layout, safeConfig.defaultValue, safeConfig.allowNone, JSON.stringify(safeConfig.options)]);

  const updateConfig = (key: keyof RadioTypeConfig, value: any) => {
    // "__none__" 값을 빈 문자열로 변환
    const processedValue = key === "defaultValue" && value === "__none__" ? "" : value;

    // 로컬 상태 즉시 업데이트
    setLocalValues((prev) => ({ ...prev, [key]: processedValue }));

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

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

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

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

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

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

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

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

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

  const updateOption = (index: number, field: "label" | "value", value: string) => {
    // 로컬 상태 즉시 업데이트 (실시간 입력 반영)
    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>
        <Label htmlFor="layout" className="text-sm font-medium">
          레이아웃 방향
        </Label>
        <select
          className="mt-1 w-full rounded-md border border-input px-3 py-2 text-sm focus:border-primary focus:ring-1 focus:ring-ring focus:outline-none"
          value={localValues.layout}
          onChange={(e) => updateConfig("layout", e.target.value)}
        >
          <option value="">레이아웃 선택</option>
          <option value="vertical">세로</option>
          <option value="horizontal">가로</option>
          <option value="grid">격자 (2열)</option>
        </select>
      </div>

      {/* 기본값 */}
      <div>
        <Label htmlFor="defaultValue" className="text-sm font-medium">
          기본 선택값
        </Label>
        <select
          className="mt-1 w-full rounded-md border border-input px-3 py-2 text-sm focus:border-primary focus:ring-1 focus:ring-ring focus:outline-none"
          value={localValues.defaultValue || "__none__"}
          onChange={(e) => updateConfig("defaultValue", e.target.value)}
        >
          <option value="__none__">선택 안함</option>
          {(safeConfig.options || []).map((option) => (
            <option key={option.value} value={option.value}>
              {option.label}
            </option>
          ))}
        </select>
      </div>

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

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

        {/* 기존 옵션 목록 */}
        <div className="max-h-64 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"
              />
              <Button size="sm" variant="outline" onClick={() => removeOption(index)}>
                <X className="h-3 w-3" />
              </Button>
            </div>
          ))}
        </div>

        {/* 새 옵션 추가 */}
        <div className="flex items-center space-x-2 rounded border-2 border-dashed border-input p-2">
          <Input
            value={newOption.label}
            onChange={(e) => setNewOption((prev) => ({ ...prev, label: e.target.value }))}
            placeholder="새 옵션 라벨"
            className="flex-1"
          />
          <Input
            value={newOption.value}
            onChange={(e) => setNewOption((prev) => ({ ...prev, value: e.target.value }))}
            placeholder="새 옵션 값"
            className="flex-1"
          />
          <Button size="sm" onClick={addOption} disabled={!newOption.label.trim() || !newOption.value.trim()}>
            <Plus className="h-3 w-3" />
          </Button>
        </div>

        <div className="text-xs text-muted-foreground">총 {(safeConfig.options || []).length}개 옵션</div>
      </div>

      {/* 미리보기 */}
      {(safeConfig.options || []).length > 0 && (
        <div className="rounded-md border bg-muted p-3">
          <Label className="text-sm font-medium text-foreground">미리보기</Label>
          <div className="mt-2">
            <RadioGroup
              value={localValues.defaultValue}
              className={
                localValues.layout === "horizontal"
                  ? "flex flex-row space-x-4"
                  : localValues.layout === "grid"
                    ? "grid grid-cols-2 gap-2"
                    : "space-y-2"
              }
            >
              {(safeConfig.options || []).map((option) => (
                <div key={option.value} className="flex items-center space-x-2">
                  <RadioGroupItem value={option.value} id={`preview-${option.value}`} />
                  <Label htmlFor={`preview-${option.value}`} className="text-xs">
                    {option.label}
                  </Label>
                </div>
              ))}
            </RadioGroup>
          </div>
          <div className="mt-2 text-xs text-muted-foreground">
            레이아웃:{" "}
            {localValues.layout === "vertical" ? "세로" : localValues.layout === "horizontal" ? "가로" : "격자"},
            기본값: {localValues.defaultValue || "없음"}
            {localValues.allowNone && ", 선택해제 가능"}
          </div>
        </div>
      )}

      {/* 안내 메시지 */}
      {localValues.allowNone && (
        <div className="rounded-md bg-accent p-3">
          <div className="text-sm font-medium text-primary">선택 해제 허용</div>
          <div className="mt-1 text-xs text-primary">
            사용자가 같은 라디오 버튼을 다시 클릭하여 선택을 해제할 수 있습니다.
          </div>
        </div>
      )}
    </div>
  );
};

export default RadioTypeConfigPanel;
