"use client";

import React, { useState, useEffect } from "react";
import { Label } from "@/components/ui/label";
import { Input } from "@/components/ui/input";
import { Checkbox } from "@/components/ui/checkbox";
import { Slider } from "@/components/ui/slider";
import { TextareaTypeConfig } from "@/types/screen";

interface TextareaTypeConfigPanelProps {
  config: TextareaTypeConfig;
  onConfigChange: (config: TextareaTypeConfig) => void;
}

export const TextareaTypeConfigPanel: React.FC<TextareaTypeConfigPanelProps> = ({ config, onConfigChange }) => {
  // 기본값이 설정된 config 사용
  const safeConfig = {
    rows: 3,
    maxLength: undefined,
    minLength: undefined,
    placeholder: "",
    resizable: true,
    autoResize: false,
    wordWrap: true,
    ...config,
  };

  // 로컬 상태로 실시간 입력 관리
  const [localValues, setLocalValues] = useState({
    rows: safeConfig.rows,
    maxLength: safeConfig.maxLength?.toString() || "",
    minLength: safeConfig.minLength?.toString() || "",
    placeholder: safeConfig.placeholder,
    resizable: safeConfig.resizable,
    autoResize: safeConfig.autoResize,
    wordWrap: safeConfig.wordWrap,
  });

  // config가 변경될 때 로컬 상태 동기화
  useEffect(() => {
    setLocalValues({
      rows: safeConfig.rows,
      maxLength: safeConfig.maxLength?.toString() || "",
      minLength: safeConfig.minLength?.toString() || "",
      placeholder: safeConfig.placeholder,
      resizable: safeConfig.resizable,
      autoResize: safeConfig.autoResize,
      wordWrap: safeConfig.wordWrap,
    });
  }, [
    safeConfig.rows,
    safeConfig.maxLength,
    safeConfig.minLength,
    safeConfig.placeholder,
    safeConfig.resizable,
    safeConfig.autoResize,
    safeConfig.wordWrap,
  ]);

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

    // 실제 config 업데이트 - 현재 로컬 상태를 기반으로 새 객체 생성 (safeConfig 기본값 덮어쓰기 방지)
    const currentValues = {
      rows: key === "rows" ? value : localValues.rows ? Number(localValues.rows) : undefined,
      maxLength: key === "maxLength" ? value : localValues.maxLength ? Number(localValues.maxLength) : undefined,
      minLength: key === "minLength" ? value : localValues.minLength ? Number(localValues.minLength) : undefined,
      placeholder: key === "placeholder" ? value : localValues.placeholder,
      defaultValue: key === "defaultValue" ? value : localValues.defaultValue,
      resizable: key === "resizable" ? value : localValues.resizable,
      autoResize: key === "autoResize" ? value : localValues.autoResize,
      wordWrap: key === "wordWrap" ? value : localValues.wordWrap,
    };

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

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

  return (
    <div className="space-y-4">
      {/* 기본 행 수 */}
      <div>
        <Label htmlFor="rows" className="text-sm font-medium">
          기본 행 수: {localValues.rows}
        </Label>
        <div className="mt-2">
          <Slider
            value={[localValues.rows]}
            onValueChange={(value) => updateConfig("rows", value[0])}
            min={1}
            max={20}
            step={1}
            className="w-full"
          />
          <div className="mt-1 flex justify-between text-xs text-muted-foreground">
            <span>1</span>
            <span>20</span>
          </div>
        </div>
      </div>

      {/* 길이 제한 */}
      <div className="grid grid-cols-2 gap-3">
        <div>
          <Label htmlFor="minLength" className="text-sm font-medium">
            최소 글자 수
          </Label>
          <Input
            id="minLength"
            type="number"
            min="0"
            value={localValues.minLength}
            onChange={(e) => updateConfig("minLength", e.target.value ? Number(e.target.value) : undefined)}
            className="mt-1"
            placeholder="제한 없음"
          />
        </div>

        <div>
          <Label htmlFor="maxLength" className="text-sm font-medium">
            최대 글자 수
          </Label>
          <Input
            id="maxLength"
            type="number"
            min="0"
            value={localValues.maxLength}
            onChange={(e) => updateConfig("maxLength", e.target.value ? Number(e.target.value) : undefined)}
            className="mt-1"
            placeholder="제한 없음"
          />
        </div>
      </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 className="flex items-center justify-between">
        <Label htmlFor="resizable" className="text-sm font-medium">
          사용자가 크기 조정 가능
        </Label>
        <Checkbox
          id="resizable"
          checked={localValues.resizable}
          onCheckedChange={(checked) => updateConfig("resizable", !!checked)}
        />
      </div>

      {/* 자동 크기 조정 */}
      <div className="flex items-center justify-between">
        <Label htmlFor="autoResize" className="text-sm font-medium">
          내용에 따라 자동 크기 조정
        </Label>
        <Checkbox
          id="autoResize"
          checked={localValues.autoResize}
          onCheckedChange={(checked) => updateConfig("autoResize", !!checked)}
        />
      </div>

      {/* 단어 자동 줄바꿈 */}
      <div className="flex items-center justify-between">
        <Label htmlFor="wordWrap" className="text-sm font-medium">
          단어 자동 줄바꿈
        </Label>
        <Checkbox
          id="wordWrap"
          checked={localValues.wordWrap}
          onCheckedChange={(checked) => updateConfig("wordWrap", !!checked)}
        />
      </div>

      {/* 설정 미리보기 */}
      <div className="rounded-md border bg-muted p-3">
        <Label className="text-sm font-medium text-foreground">미리보기</Label>
        <div className="mt-2">
          <textarea
            className="w-full rounded border border-input p-2 text-xs"
            rows={localValues.rows}
            placeholder={localValues.placeholder || "텍스트를 입력하세요..."}
            style={{
              resize: localValues.resizable ? "both" : "none",
              whiteSpace: localValues.wordWrap ? "pre-wrap" : "nowrap",
            }}
            readOnly
          />
        </div>
        <div className="mt-1 text-xs text-muted-foreground">
          행 수: {localValues.rows},{localValues.minLength && ` 최소: ${localValues.minLength}자,`}
          {localValues.maxLength && ` 최대: ${localValues.maxLength}자,`}
          {localValues.resizable ? " 크기조정 가능" : " 크기고정"}
        </div>
      </div>
    </div>
  );
};

export default TextareaTypeConfigPanel;
