"use client";

import React, { useState, useEffect } from "react";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Switch } from "@/components/ui/switch";
import { Textarea } from "@/components/ui/textarea";
import { Slider } from "@/components/ui/slider";
import { AlignLeft } from "lucide-react";
import { WebTypeConfigPanelProps } from "@/lib/registry/types";
import { WidgetComponent, TextareaTypeConfig } from "@/types/screen";

export const TextareaConfigPanel: React.FC<WebTypeConfigPanelProps> = ({
  component,
  onUpdateComponent,
  onUpdateProperty,
}) => {
  const widget = component as WidgetComponent;
  const config = (widget.webTypeConfig as TextareaTypeConfig) || {};

  // 로컬 상태
  const [localConfig, setLocalConfig] = useState<TextareaTypeConfig>({
    rows: config.rows || 4,
    cols: config.cols || undefined,
    minLength: config.minLength || undefined,
    maxLength: config.maxLength || undefined,
    placeholder: config.placeholder || "",
    defaultValue: config.defaultValue || "",
    required: config.required || false,
    readonly: config.readonly || false,
    resizable: config.resizable !== false, // 기본값 true
    autoHeight: config.autoHeight || false,
    showCharCount: config.showCharCount || false,
    wrap: config.wrap || "soft",
  });

  // 컴포넌트 변경 시 로컬 상태 동기화
  useEffect(() => {
    const currentConfig = (widget.webTypeConfig as TextareaTypeConfig) || {};
    setLocalConfig({
      rows: currentConfig.rows || 4,
      cols: currentConfig.cols || undefined,
      minLength: currentConfig.minLength || undefined,
      maxLength: currentConfig.maxLength || undefined,
      placeholder: currentConfig.placeholder || "",
      defaultValue: currentConfig.defaultValue || "",
      required: currentConfig.required || false,
      readonly: currentConfig.readonly || false,
      resizable: currentConfig.resizable !== false,
      autoHeight: currentConfig.autoHeight || false,
      showCharCount: currentConfig.showCharCount || false,
      wrap: currentConfig.wrap || "soft",
    });
  }, [widget.webTypeConfig]);

  // 설정 업데이트 핸들러
  const updateConfig = (field: keyof TextareaTypeConfig, value: any) => {
    const newConfig = { ...localConfig, [field]: value };
    setLocalConfig(newConfig);
    onUpdateProperty("webTypeConfig", newConfig);
  };

  // 현재 문자 수 계산
  const currentCharCount = (localConfig.defaultValue || "").length;
  const isOverLimit = localConfig.maxLength ? currentCharCount > localConfig.maxLength : false;

  return (
    <Card>
      <CardHeader>
        <CardTitle className="flex items-center gap-2 text-sm">
          <AlignLeft className="h-4 w-4" />
          텍스트영역 설정
        </CardTitle>
        <CardDescription className="text-xs">여러 줄 텍스트 입력 영역의 세부 설정을 관리합니다.</CardDescription>
      </CardHeader>
      <CardContent className="space-y-4">
        {/* 기본 설정 */}
        <div className="space-y-3">
          <h4 className="text-sm font-medium">기본 설정</h4>

          <div className="space-y-2">
            <Label htmlFor="placeholder" className="text-xs">
              플레이스홀더
            </Label>
            <Input
              id="placeholder"
              value={localConfig.placeholder || ""}
              onChange={(e) => updateConfig("placeholder", e.target.value)}
              placeholder="내용을 입력하세요"
              className="text-xs"
            />
          </div>

          <div className="space-y-2">
            <Label htmlFor="defaultValue" className="text-xs">
              기본값
            </Label>
            <Textarea
              id="defaultValue"
              value={localConfig.defaultValue || ""}
              onChange={(e) => updateConfig("defaultValue", e.target.value)}
              placeholder="기본 텍스트 내용"
              className="text-xs"
              rows={3}
            />
            {localConfig.showCharCount && (
              <div className={`text-xs ${isOverLimit ? "text-red-500" : "text-muted-foreground"}`}>
                {currentCharCount}
                {localConfig.maxLength && ` / ${localConfig.maxLength}`} 글자
              </div>
            )}
          </div>
        </div>

        {/* 크기 설정 */}
        <div className="space-y-3">
          <h4 className="text-sm font-medium">크기 설정</h4>

          <div className="space-y-2">
            <Label htmlFor="rows" className="text-xs">
              행 수: {localConfig.rows}
            </Label>
            <Slider
              id="rows"
              min={1}
              max={20}
              step={1}
              value={[localConfig.rows || 4]}
              onValueChange={([value]) => updateConfig("rows", value)}
              className="w-full"
            />
            <div className="text-muted-foreground flex justify-between text-xs">
              <span>1줄</span>
              <span>20줄</span>
            </div>
          </div>

          <div className="space-y-2">
            <Label htmlFor="cols" className="text-xs">
              열 수 (선택사항)
            </Label>
            <Input
              id="cols"
              type="number"
              value={localConfig.cols || ""}
              onChange={(e) => {
                const value = e.target.value ? parseInt(e.target.value) : undefined;
                updateConfig("cols", value);
              }}
              placeholder="자동 (CSS로 제어)"
              min={10}
              max={200}
              className="text-xs"
            />
            <p className="text-muted-foreground text-xs">비워두면 CSS width로 제어됩니다.</p>
          </div>

          <div className="flex items-center justify-between">
            <div className="space-y-1">
              <Label htmlFor="resizable" className="text-xs">
                크기 조절 가능
              </Label>
              <p className="text-muted-foreground text-xs">사용자가 텍스트영역 크기를 조절할 수 있습니다.</p>
            </div>
            <Switch
              id="resizable"
              checked={localConfig.resizable || false}
              onCheckedChange={(checked) => updateConfig("resizable", checked)}
            />
          </div>

          <div className="flex items-center justify-between">
            <div className="space-y-1">
              <Label htmlFor="autoHeight" className="text-xs">
                자동 높이
              </Label>
              <p className="text-muted-foreground text-xs">내용에 따라 높이가 자동으로 조절됩니다.</p>
            </div>
            <Switch
              id="autoHeight"
              checked={localConfig.autoHeight || false}
              onCheckedChange={(checked) => updateConfig("autoHeight", checked)}
            />
          </div>
        </div>

        {/* 텍스트 제한 */}
        <div className="space-y-3">
          <h4 className="text-sm font-medium">텍스트 제한</h4>

          <div className="space-y-2">
            <Label htmlFor="minLength" className="text-xs">
              최소 글자 수
            </Label>
            <Input
              id="minLength"
              type="number"
              value={localConfig.minLength || ""}
              onChange={(e) => {
                const value = e.target.value ? parseInt(e.target.value) : undefined;
                updateConfig("minLength", value);
              }}
              placeholder="제한 없음"
              min={0}
              className="text-xs"
            />
          </div>

          <div className="space-y-2">
            <Label htmlFor="maxLength" className="text-xs">
              최대 글자 수
            </Label>
            <Input
              id="maxLength"
              type="number"
              value={localConfig.maxLength || ""}
              onChange={(e) => {
                const value = e.target.value ? parseInt(e.target.value) : undefined;
                updateConfig("maxLength", value);
              }}
              placeholder="제한 없음"
              min={1}
              className="text-xs"
            />
          </div>

          <div className="flex items-center justify-between">
            <div className="space-y-1">
              <Label htmlFor="showCharCount" className="text-xs">
                글자 수 표시
              </Label>
              <p className="text-muted-foreground text-xs">현재 입력된 글자 수를 표시합니다.</p>
            </div>
            <Switch
              id="showCharCount"
              checked={localConfig.showCharCount || false}
              onCheckedChange={(checked) => updateConfig("showCharCount", checked)}
            />
          </div>
        </div>

        {/* 텍스트 줄바꿈 설정 */}
        <div className="space-y-3">
          <h4 className="text-sm font-medium">줄바꿈 설정</h4>

          <div className="space-y-2">
            <Label className="text-xs">줄바꿈 방식</Label>
            <div className="grid grid-cols-3 gap-2">
              <button
                type="button"
                onClick={() => updateConfig("wrap", "soft")}
                className={`rounded border p-2 text-xs ${
                  localConfig.wrap === "soft" ? "bg-primary text-primary-foreground" : "bg-background"
                }`}
              >
                Soft
              </button>
              <button
                type="button"
                onClick={() => updateConfig("wrap", "hard")}
                className={`rounded border p-2 text-xs ${
                  localConfig.wrap === "hard" ? "bg-primary text-primary-foreground" : "bg-background"
                }`}
              >
                Hard
              </button>
              <button
                type="button"
                onClick={() => updateConfig("wrap", "off")}
                className={`rounded border p-2 text-xs ${
                  localConfig.wrap === "off" ? "bg-primary text-primary-foreground" : "bg-background"
                }`}
              >
                Off
              </button>
            </div>
            <div className="text-muted-foreground text-xs">
              {localConfig.wrap === "soft" && "화면에서만 줄바꿈 (기본값)"}
              {localConfig.wrap === "hard" && "실제 텍스트에 줄바꿈 포함"}
              {localConfig.wrap === "off" && "줄바꿈 없음 (스크롤)"}
            </div>
          </div>
        </div>

        {/* 상태 설정 */}
        <div className="space-y-3">
          <h4 className="text-sm font-medium">상태 설정</h4>

          <div className="flex items-center justify-between">
            <div className="space-y-1">
              <Label htmlFor="required" className="text-xs">
                필수 입력
              </Label>
              <p className="text-muted-foreground text-xs">텍스트가 입력되어야 합니다.</p>
            </div>
            <Switch
              id="required"
              checked={localConfig.required || false}
              onCheckedChange={(checked) => updateConfig("required", checked)}
            />
          </div>

          <div className="flex items-center justify-between">
            <div className="space-y-1">
              <Label htmlFor="readonly" className="text-xs">
                읽기 전용
              </Label>
              <p className="text-muted-foreground text-xs">텍스트를 수정할 수 없습니다.</p>
            </div>
            <Switch
              id="readonly"
              checked={localConfig.readonly || false}
              onCheckedChange={(checked) => updateConfig("readonly", checked)}
            />
          </div>
        </div>

        {/* 미리보기 */}
        <div className="space-y-3">
          <h4 className="text-sm font-medium">미리보기</h4>
          <div className="bg-muted/50 rounded-md border p-3">
            <Textarea
              placeholder={localConfig.placeholder || "텍스트 입력 미리보기"}
              rows={localConfig.rows}
              cols={localConfig.cols}
              disabled={localConfig.readonly}
              required={localConfig.required}
              minLength={localConfig.minLength}
              maxLength={localConfig.maxLength}
              defaultValue={localConfig.defaultValue}
              style={{
                resize: localConfig.resizable ? "both" : "none",
                minHeight: localConfig.autoHeight ? "auto" : undefined,
              }}
              className="text-xs"
              wrap={localConfig.wrap}
            />
            {localConfig.showCharCount && (
              <div className="text-muted-foreground mt-1 text-right text-xs">
                0{localConfig.maxLength && ` / ${localConfig.maxLength}`} 글자
              </div>
            )}
            <div className="text-muted-foreground mt-2 text-xs">
              {localConfig.rows}행{localConfig.cols && ` × ${localConfig.cols}열`}
              {localConfig.resizable && " • 크기조절가능"}
              {localConfig.autoHeight && " • 자동높이"}
            </div>
          </div>
        </div>
      </CardContent>
    </Card>
  );
};

TextareaConfigPanel.displayName = "TextareaConfigPanel";