"use client";

import React, { useState, useEffect, useRef, useMemo } from "react";
import { Label } from "@/components/ui/label";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Separator } from "@/components/ui/separator";
// import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"; // 임시 비활성화
// import { Checkbox } from "@/components/ui/checkbox";
import { Settings, Move, Type, Trash2, Copy, Group, Ungroup } from "lucide-react";
import {
  ComponentData,
  WebType,
  WidgetComponent,
  GroupComponent,
  DataTableComponent,
  AreaComponent,
  AreaLayoutType,
  TableInfo,
} from "@/types/screen";
import DataTableConfigPanel from "./DataTableConfigPanel";
import { DynamicConfigPanel } from "@/lib/registry";
import { useWebTypes } from "@/hooks/admin/useWebTypes";

// DataTableConfigPanel을 위한 안정화된 래퍼 컴포넌트
const DataTableConfigPanelWrapper: React.FC<{
  selectedComponent: DataTableComponent;
  tables: TableInfo[];
  activeTab: string;
  onTabChange: (tab: string) => void;
  onUpdateProperty: (property: string, value: any) => void;
}> = React.memo(
  ({ selectedComponent, tables, activeTab, onTabChange, onUpdateProperty }) => {
    // 안정화된 업데이트 핸들러
    const handleUpdateComponent = React.useCallback(
      (updates: Partial<DataTableComponent>) => {
        console.log("🔄 DataTable 래퍼 컴포넌트 업데이트:", updates);

        // 변경사항이 있는지 확인 (간단한 비교로 성능 향상)
        const hasChanges = Object.entries(updates).some(([key, value]) => {
          const currentValue = (selectedComponent as any)[key];
          // 배열의 경우 길이만 비교
          if (Array.isArray(currentValue) && Array.isArray(value)) {
            return currentValue.length !== value.length;
          }
          // 기본값 비교
          return currentValue !== value;
        });

        if (!hasChanges) {
          console.log("⏭️ 래퍼: 변경사항 없음, 업데이트 스킵");
          return;
        }

        // 각 속성을 개별적으로 업데이트
        Object.entries(updates).forEach(([key, value]) => {
          onUpdateProperty(key, value);
        });
      },
      [selectedComponent.id, onUpdateProperty],
    ); // ID만 의존성으로 사용

    return (
      <DataTableConfigPanel
        component={selectedComponent}
        tables={tables}
        activeTab={activeTab}
        onTabChange={onTabChange}
        onUpdateComponent={handleUpdateComponent}
      />
    );
  },
  (prevProps, nextProps) => {
    // 컴포넌트 ID가 다르면 리렌더링
    if (prevProps.selectedComponent.id !== nextProps.selectedComponent.id) {
      return false;
    }

    // 테이블 목록이 변경되면 리렌더링
    if (prevProps.tables.length !== nextProps.tables.length) {
      return false;
    }

    // 활성 탭이 변경되면 리렌더링
    if (prevProps.activeTab !== nextProps.activeTab) {
      return false;
    }

    // 그 외의 경우는 리렌더링하지 않음
    return true;
  },
);

interface PropertiesPanelProps {
  selectedComponent?: ComponentData;
  tables?: TableInfo[];
  onUpdateProperty: (path: string, value: unknown) => void;
  onDeleteComponent: () => void;
  onCopyComponent: () => void;
  onGroupComponents?: () => void;
  onUngroupComponents?: () => void;
  canGroup?: boolean;
  canUngroup?: boolean;
}

// 동적 웹타입 옵션은 컴포넌트 내부에서 useWebTypes 훅으로 가져옵니다

const PropertiesPanelComponent: React.FC<PropertiesPanelProps> = ({
  selectedComponent,
  tables = [],
  onUpdateProperty,
  onDeleteComponent,
  onCopyComponent,
  onGroupComponents,
  onUngroupComponents,
  canGroup = false,
  canUngroup = false,
}) => {
  // 동적 웹타입 목록 가져오기 - API에서 직접 조회
  const { webTypes, isLoading: isWebTypesLoading } = useWebTypes({ active: "Y" });

  // 웹타입 옵션 생성 - 데이터베이스 기반
  const webTypeOptions = webTypes.map((webType) => ({
    value: webType.web_type as WebType,
    label: webType.type_name,
  }));

  // 데이터테이블 설정 탭 상태를 여기서 관리
  const [dataTableActiveTab, setDataTableActiveTab] = useState("basic");
  // 최신 값들의 참조를 유지
  const selectedComponentRef = useRef(selectedComponent);
  const onUpdatePropertyRef = useRef(onUpdateProperty);

  // 입력 필드들의 로컬 상태 (실시간 타이핑 반영용)
  const [localInputs, setLocalInputs] = useState({
    placeholder: (selectedComponent?.type === "widget" ? (selectedComponent as WidgetComponent).placeholder : "") || "",
    title:
      (selectedComponent?.type === "group"
        ? (selectedComponent as GroupComponent).title
        : selectedComponent?.type === "area"
          ? (selectedComponent as AreaComponent).title
          : "") || "",
    description: (selectedComponent?.type === "area" ? (selectedComponent as AreaComponent).description : "") || "",
    positionX: selectedComponent?.position.x?.toString() || "0",
    positionY: selectedComponent?.position.y?.toString() || "0",
    positionZ: selectedComponent?.position.z?.toString() || "1",
    width: selectedComponent?.size.width?.toString() || "0",
    height: selectedComponent?.size.height?.toString() || "0",
    gridColumns: selectedComponent?.gridColumns?.toString() || "1",
    labelText: selectedComponent?.style?.labelText || selectedComponent?.label || "",
    labelFontSize: selectedComponent?.style?.labelFontSize || "12px",
    labelColor: selectedComponent?.style?.labelColor || "#374151",
    labelMarginBottom: selectedComponent?.style?.labelMarginBottom || "4px",
    required: (selectedComponent?.type === "widget" ? (selectedComponent as WidgetComponent).required : false) || false,
    readonly: (selectedComponent?.type === "widget" ? (selectedComponent as WidgetComponent).readonly : false) || false,
    labelDisplay: selectedComponent?.style?.labelDisplay !== false,
    // widgetType도 로컬 상태로 관리
    widgetType:
      (selectedComponent?.type === "widget" ? (selectedComponent as WidgetComponent).widgetType : "text") || "text",
  });

  useEffect(() => {
    selectedComponentRef.current = selectedComponent;
    onUpdatePropertyRef.current = onUpdateProperty;
  });

  // 선택된 컴포넌트가 변경될 때 로컬 입력 상태 업데이트
  useEffect(() => {
    if (selectedComponent) {
      const widget = selectedComponent.type === "widget" ? (selectedComponent as WidgetComponent) : null;
      const group = selectedComponent.type === "group" ? (selectedComponent as GroupComponent) : null;
      const area = selectedComponent.type === "area" ? (selectedComponent as AreaComponent) : null;

      console.log("🔄 PropertiesPanel: 컴포넌트 변경 감지", {
        componentId: selectedComponent.id,
        componentType: selectedComponent.type,
        currentValues: {
          placeholder: widget?.placeholder,
          title: group?.title || area?.title,
          description: area?.description,
          positionX: selectedComponent.position.x,
          labelText: selectedComponent.style?.labelText || selectedComponent.label,
        },
      });

      setLocalInputs({
        placeholder: widget?.placeholder || "",
        title: group?.title || area?.title || "",
        description: area?.description || "",
        positionX: selectedComponent.position.x?.toString() || "0",
        positionY: selectedComponent.position.y?.toString() || "0",
        positionZ: selectedComponent.position.z?.toString() || "1",
        width: selectedComponent.size.width?.toString() || "0",
        height: selectedComponent.size.height?.toString() || "0",
        gridColumns: selectedComponent.gridColumns?.toString() || "1",
        labelText: selectedComponent.style?.labelText || selectedComponent.label || "",
        labelFontSize: selectedComponent.style?.labelFontSize || "12px",
        labelColor: selectedComponent.style?.labelColor || "#374151",
        labelMarginBottom: selectedComponent.style?.labelMarginBottom || "4px",
        required: widget?.required || false,
        readonly: widget?.readonly || false,
        labelDisplay: selectedComponent.style?.labelDisplay !== false,
        // widgetType 동기화
        widgetType: widget?.widgetType || "text",
      });
    }
  }, [
    selectedComponent?.id, // ID만 감지하여 컴포넌트 변경 시에만 업데이트
  ]);

  if (!selectedComponent) {
    return (
      <div className="flex h-full flex-col items-center justify-center p-6 text-center">
        <Settings className="mb-4 h-12 w-12 text-gray-400" />
        <h3 className="mb-2 text-lg font-medium text-gray-900">컴포넌트를 선택하세요</h3>
        <p className="text-sm text-gray-500">캔버스에서 컴포넌트를 클릭하면 속성을 편집할 수 있습니다.</p>
      </div>
    );
  }

  // 데이터 테이블 컴포넌트인 경우 전용 패널 사용
  if (selectedComponent.type === "datatable") {
    return (
      <div className="flex h-full flex-col">
        {/* 헤더 */}
        <div className="border-b border-gray-200 p-4">
          <div className="mb-3 flex items-center justify-between">
            <div className="flex items-center space-x-2">
              <Settings className="h-5 w-5 text-gray-600" />
              <span className="text-lg font-semibold">데이터 테이블 설정</span>
            </div>
            <Badge variant="secondary" className="text-xs">
              {selectedComponent.type}
            </Badge>
          </div>

          {/* 액션 버튼들 */}
          <div className="flex flex-wrap gap-2">
            <Button variant="outline" size="sm" onClick={onCopyComponent}>
              <Copy className="mr-1 h-4 w-4" />
              복사
            </Button>
            <Button variant="destructive" size="sm" onClick={onDeleteComponent}>
              <Trash2 className="mr-1 h-4 w-4" />
              삭제
            </Button>
          </div>
        </div>

        {/* 데이터 테이블 설정 패널 */}
        <div className="flex-1 overflow-y-auto">
          <DataTableConfigPanelWrapper
            selectedComponent={selectedComponent as DataTableComponent}
            tables={tables}
            activeTab={dataTableActiveTab}
            onTabChange={setDataTableActiveTab}
            onUpdateProperty={onUpdateProperty}
          />
        </div>
      </div>
    );
  }

  return (
    <div className="flex h-full flex-col">
      {/* 헤더 */}
      <div className="border-b border-gray-200 p-4">
        <div className="mb-3 flex items-center justify-between">
          <div className="flex items-center space-x-2">
            <Settings className="h-4 w-4 text-gray-600" />
            <h3 className="font-medium text-gray-900">속성 편집</h3>
          </div>
          <Badge variant="secondary" className="text-xs">
            {selectedComponent.type}
          </Badge>
        </div>

        {/* 액션 버튼들 */}
        <div className="flex flex-wrap gap-2">
          <Button size="sm" variant="outline" onClick={onCopyComponent} className="flex items-center space-x-1">
            <Copy className="h-3 w-3" />
            <span>복사</span>
          </Button>

          {canGroup && (
            <Button size="sm" variant="outline" onClick={onGroupComponents} className="flex items-center space-x-1">
              <Group className="h-3 w-3" />
              <span>그룹</span>
            </Button>
          )}

          {canUngroup && (
            <Button size="sm" variant="outline" onClick={onUngroupComponents} className="flex items-center space-x-1">
              <Ungroup className="h-3 w-3" />
              <span>해제</span>
            </Button>
          )}

          <Button size="sm" variant="destructive" onClick={onDeleteComponent} className="flex items-center space-x-1">
            <Trash2 className="h-3 w-3" />
            <span>삭제</span>
          </Button>
        </div>
      </div>

      {/* 속성 편집 영역 */}
      <div className="flex-1 space-y-6 overflow-y-auto p-4">
        {/* 기본 정보 */}
        <div className="space-y-3">
          <div className="flex items-center space-x-2">
            <Type className="h-4 w-4 text-gray-600" />
            <h4 className="font-medium text-gray-900">기본 정보</h4>
          </div>

          <div className="space-y-3">
            {selectedComponent.type === "widget" && (
              <>
                <div>
                  <Label htmlFor="columnName" className="text-sm font-medium">
                    컬럼명 (읽기 전용)
                  </Label>
                  <Input
                    id="columnName"
                    value={selectedComponent.columnName || ""}
                    readOnly
                    placeholder="데이터베이스 컬럼명"
                    className="mt-1 bg-gray-50 text-gray-600"
                    title="컬럼명은 변경할 수 없습니다"
                  />
                </div>

                <div>
                  <Label htmlFor="widgetType" className="text-sm font-medium">
                    위젯 타입
                  </Label>
                  <select
                    className="mt-1 w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 focus:outline-none"
                    value={localInputs.widgetType}
                    onChange={(e) => {
                      const value = e.target.value as WebType;
                      setLocalInputs((prev) => ({ ...prev, widgetType: value }));
                      onUpdateProperty("widgetType", value);
                    }}
                  >
                    {webTypeOptions.map((option) => (
                      <option key={option.value} value={option.value}>
                        {option.label}
                      </option>
                    ))}
                  </select>
                </div>

                {/* 동적 웹타입 설정 패널 */}
                {selectedComponent.widgetType && (
                  <div className="space-y-3">
                    <Separator />
                    <div>
                      <Label className="text-sm font-medium">웹타입 세부 설정</Label>
                      <div className="mt-2">
                        <DynamicConfigPanel
                          webType={selectedComponent.widgetType}
                          component={selectedComponent}
                          onUpdateComponent={(updatedComponent) => {
                            // 컴포넌트 전체 업데이트
                            Object.keys(updatedComponent).forEach((key) => {
                              if (key !== "id") {
                                onUpdateProperty(key, updatedComponent[key]);
                              }
                            });
                          }}
                          onUpdateProperty={(property, value) => {
                            // 웹타입 설정 업데이트
                            if (property === "webTypeConfig") {
                              onUpdateProperty("webTypeConfig", value);
                            } else {
                              onUpdateProperty(property, value);
                            }
                          }}
                        />
                      </div>
                    </div>
                    <Separator />
                  </div>
                )}

                <div>
                  <Label htmlFor="placeholder" className="text-sm font-medium">
                    플레이스홀더
                  </Label>
                  <Input
                    id="placeholder"
                    value={localInputs.placeholder}
                    onChange={(e) => {
                      const newValue = e.target.value;
                      console.log("🔄 placeholder 변경:", newValue);
                      setLocalInputs((prev) => ({ ...prev, placeholder: newValue }));
                      onUpdateProperty("placeholder", newValue);
                    }}
                    placeholder="입력 힌트 텍스트"
                    className="mt-1"
                  />
                </div>

                <div className="flex items-center space-x-4">
                  <div className="flex items-center space-x-2">
                    <input
                      type="checkbox"
                      id="required"
                      checked={localInputs.required}
                      onChange={(e) => {
                        setLocalInputs((prev) => ({ ...prev, required: e.target.checked }));
                        onUpdateProperty("required", e.target.checked);
                      }}
                      className="border-input bg-background text-primary focus:ring-ring h-4 w-4 rounded border focus:ring-2 focus:ring-offset-2"
                    />
                    <Label htmlFor="required" className="text-sm">
                      필수 입력
                    </Label>
                  </div>

                  <div className="flex items-center space-x-2">
                    <input
                      type="checkbox"
                      id="readonly"
                      checked={localInputs.readonly}
                      onChange={(e) => {
                        setLocalInputs((prev) => ({ ...prev, readonly: e.target.checked }));
                        onUpdateProperty("readonly", e.target.checked);
                      }}
                      className="border-input bg-background text-primary focus:ring-ring h-4 w-4 rounded border focus:ring-2 focus:ring-offset-2"
                    />
                    <Label htmlFor="readonly" className="text-sm">
                      읽기 전용
                    </Label>
                  </div>
                </div>
              </>
            )}
          </div>
        </div>

        <Separator />

        {/* 위치 및 크기 */}
        <div className="space-y-3">
          <div className="flex items-center space-x-2">
            <Move className="h-4 w-4 text-gray-600" />
            <h4 className="font-medium text-gray-900">위치 및 크기</h4>
          </div>

          <div className="grid grid-cols-2 gap-3">
            <div>
              <Label htmlFor="positionX" className="text-sm font-medium">
                X 위치
              </Label>
              <Input
                id="positionX"
                type="number"
                value={localInputs.positionX}
                onChange={(e) => {
                  const newValue = e.target.value;
                  setLocalInputs((prev) => ({ ...prev, positionX: newValue }));
                  onUpdateProperty("position", { ...selectedComponent.position, x: Number(newValue) });
                }}
                className="mt-1"
              />
            </div>

            <div>
              <Label htmlFor="positionY" className="text-sm font-medium">
                Y 위치
              </Label>
              <Input
                id="positionY"
                type="number"
                value={localInputs.positionY}
                onChange={(e) => {
                  const newValue = e.target.value;
                  setLocalInputs((prev) => ({ ...prev, positionY: newValue }));
                  onUpdateProperty("position", { ...selectedComponent.position, y: Number(newValue) });
                }}
                className="mt-1"
              />
            </div>

            <div>
              <Label htmlFor="width" className="text-sm font-medium">
                너비
              </Label>
              <Input
                id="width"
                type="number"
                value={localInputs.width}
                onChange={(e) => {
                  const newValue = e.target.value;
                  setLocalInputs((prev) => ({ ...prev, width: newValue }));
                  onUpdateProperty("size", { ...selectedComponent.size, width: Number(newValue) });
                }}
                className="mt-1"
              />
            </div>

            <div>
              <Label htmlFor="height" className="text-sm font-medium">
                높이
              </Label>
              <Input
                id="height"
                type="number"
                value={localInputs.height}
                onChange={(e) => {
                  const newValue = e.target.value;
                  setLocalInputs((prev) => ({ ...prev, height: newValue }));
                  onUpdateProperty("size", { ...selectedComponent.size, height: Number(newValue) });
                }}
                className="mt-1"
              />
            </div>

            <div>
              <Label htmlFor="zIndex" className="text-sm font-medium">
                Z-Index (레이어 순서)
              </Label>
              <Input
                id="zIndex"
                type="number"
                min="0"
                max="9999"
                value={localInputs.positionZ}
                onChange={(e) => {
                  const newValue = e.target.value;
                  setLocalInputs((prev) => ({ ...prev, positionZ: newValue }));
                  onUpdateProperty("position", { ...selectedComponent.position, z: Number(newValue) });
                }}
                className="mt-1"
                placeholder="1"
              />
            </div>

            <div>
              <Label htmlFor="gridColumns" className="text-sm font-medium">
                그리드 컬럼 수 (1-12)
              </Label>
              <Input
                id="gridColumns"
                type="number"
                min="1"
                max="12"
                value={localInputs.gridColumns}
                onChange={(e) => {
                  const newValue = e.target.value;
                  const numValue = Number(newValue);
                  if (numValue >= 1 && numValue <= 12) {
                    setLocalInputs((prev) => ({ ...prev, gridColumns: newValue }));
                    onUpdateProperty("gridColumns", numValue);
                  }
                }}
                placeholder="1"
                className="mt-1"
              />
              <div className="mt-1 text-xs text-gray-500">
                이 컴포넌트가 차지할 그리드 컬럼 수를 설정합니다 (기본: 1)
              </div>
            </div>
          </div>
        </div>

        <Separator />

        {/* 라벨 스타일 */}
        <div className="space-y-3">
          <div className="flex items-center space-x-2">
            <Type className="h-4 w-4 text-gray-600" />
            <h4 className="font-medium text-gray-900">라벨 설정</h4>
          </div>

          {/* 라벨 표시 토글 */}
          <div className="flex items-center justify-between">
            <Label htmlFor="labelDisplay" className="text-sm font-medium">
              라벨 표시
            </Label>
            <input
              type="checkbox"
              id="labelDisplay"
              checked={localInputs.labelDisplay}
              onChange={(e) => {
                console.log("🔄 라벨 표시 변경:", e.target.checked);
                setLocalInputs((prev) => ({ ...prev, labelDisplay: e.target.checked }));
                onUpdateProperty("style.labelDisplay", e.target.checked);
              }}
              className="border-input bg-background text-primary focus:ring-ring h-4 w-4 rounded border focus:ring-2 focus:ring-offset-2"
            />
          </div>

          {/* 라벨 텍스트 */}
          <div>
            <Label htmlFor="labelText" className="text-sm font-medium">
              라벨 텍스트
            </Label>
            <Input
              id="labelText"
              value={localInputs.labelText}
              onChange={(e) => {
                const newValue = e.target.value;
                console.log("🔄 라벨 텍스트 변경:", newValue);
                setLocalInputs((prev) => ({ ...prev, labelText: newValue }));
                // 기본 라벨과 스타일 라벨을 모두 업데이트
                onUpdateProperty("label", newValue);
                onUpdateProperty("style.labelText", newValue);
              }}
              placeholder="라벨 텍스트"
              className="mt-1"
            />
          </div>

          {/* 라벨 스타일 */}
          <div className="grid grid-cols-2 gap-3">
            <div>
              <Label htmlFor="labelFontSize" className="text-sm font-medium">
                폰트 크기
              </Label>
              <Input
                id="labelFontSize"
                value={localInputs.labelFontSize}
                onChange={(e) => {
                  const newValue = e.target.value;
                  setLocalInputs((prev) => ({ ...prev, labelFontSize: newValue }));
                  onUpdateProperty("style.labelFontSize", newValue);
                }}
                placeholder="12px"
                className="mt-1"
              />
            </div>

            <div>
              <Label htmlFor="labelColor" className="text-sm font-medium">
                색상
              </Label>
              <Input
                id="labelColor"
                type="color"
                value={localInputs.labelColor}
                onChange={(e) => {
                  const newValue = e.target.value;
                  setLocalInputs((prev) => ({ ...prev, labelColor: newValue }));
                  onUpdateProperty("style.labelColor", newValue);
                }}
                className="mt-1 h-8"
              />
            </div>

            <div>
              <Label htmlFor="labelFontWeight" className="text-sm font-medium">
                폰트 굵기
              </Label>
              <select
                className="mt-1 w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 focus:outline-none"
                value={selectedComponent.style?.labelFontWeight || "500"}
                onChange={(e) => onUpdateProperty("style.labelFontWeight", e.target.value)}
              >
                <option value="normal">Normal</option>
                <option value="bold">Bold</option>
                <option value="100">100</option>
                <option value="200">200</option>
                <option value="300">300</option>
                <option value="400">400</option>
                <option value="500">500</option>
                <option value="600">600</option>
                <option value="700">700</option>
                <option value="800">800</option>
                <option value="900">900</option>
              </select>
            </div>

            <div>
              <Label htmlFor="labelTextAlign" className="text-sm font-medium">
                텍스트 정렬
              </Label>
              <select
                className="mt-1 w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 focus:outline-none"
                value={selectedComponent.style?.labelTextAlign || "left"}
                onChange={(e) => onUpdateProperty("style.labelTextAlign", e.target.value)}
              >
                <option value="left">왼쪽</option>
                <option value="center">가운데</option>
                <option value="right">오른쪽</option>
              </select>
            </div>
          </div>

          {/* 라벨 여백 */}
          <div>
            <Label htmlFor="labelMarginBottom" className="text-sm font-medium">
              라벨 하단 여백
            </Label>
            <Input
              id="labelMarginBottom"
              value={localInputs.labelMarginBottom}
              onChange={(e) => {
                const newValue = e.target.value;
                setLocalInputs((prev) => ({ ...prev, labelMarginBottom: newValue }));
                onUpdateProperty("style.labelMarginBottom", newValue);
              }}
              placeholder="4px"
              className="mt-1"
            />
          </div>
        </div>

        {selectedComponent.type === "group" && (
          <>
            <Separator />

            {/* 그룹 설정 */}
            <div className="space-y-3">
              <div className="flex items-center space-x-2">
                <Group className="h-4 w-4 text-gray-600" />
                <h4 className="font-medium text-gray-900">그룹 설정</h4>
              </div>

              <div>
                <Label htmlFor="groupTitle" className="text-sm font-medium">
                  그룹 제목
                </Label>
                <Input
                  id="groupTitle"
                  value={localInputs.title}
                  onChange={(e) => {
                    const newValue = e.target.value;
                    setLocalInputs((prev) => ({ ...prev, title: newValue }));
                    onUpdateProperty("title", newValue);
                  }}
                  placeholder="그룹 제목"
                  className="mt-1"
                />
              </div>
            </div>
          </>
        )}

        {selectedComponent.type === "area" && (
          <>
            <Separator />

            {/* 영역 설정 */}
            <div className="space-y-3">
              <div className="flex items-center space-x-2">
                <Settings className="h-4 w-4 text-gray-600" />
                <h4 className="font-medium text-gray-900">영역 설정</h4>
              </div>

              <div>
                <Label htmlFor="areaTitle" className="text-sm font-medium">
                  영역 제목
                </Label>
                <Input
                  id="areaTitle"
                  value={localInputs.title}
                  onChange={(e) => {
                    const newValue = e.target.value;
                    setLocalInputs((prev) => ({ ...prev, title: newValue }));
                    onUpdateProperty("title", newValue);
                  }}
                  placeholder="영역 제목"
                  className="mt-1"
                />
              </div>

              <div>
                <Label htmlFor="areaDescription" className="text-sm font-medium">
                  영역 설명
                </Label>
                <Input
                  id="areaDescription"
                  value={localInputs.description}
                  onChange={(e) => {
                    const newValue = e.target.value;
                    setLocalInputs((prev) => ({ ...prev, description: newValue }));
                    onUpdateProperty("description", newValue);
                  }}
                  placeholder="영역 설명 (선택사항)"
                  className="mt-1"
                />
              </div>

              <div>
                <Label htmlFor="layoutType" className="text-sm font-medium">
                  레이아웃 타입
                </Label>
                <select
                  className="mt-1 w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 focus:outline-none"
                  value={(selectedComponent as AreaComponent).layoutType}
                  onChange={(e) => onUpdateProperty("layoutType", e.target.value as AreaLayoutType)}
                >
                  <option value="box">기본 박스</option>
                  <option value="card">카드</option>
                  <option value="panel">패널 (헤더 포함)</option>
                  <option value="section">섹션</option>
                  <option value="grid">그리드</option>
                  <option value="flex-row">가로 플렉스</option>
                  <option value="flex-column">세로 플렉스</option>
                  <option value="sidebar">사이드바</option>
                  <option value="header-content">헤더-컨텐츠</option>
                  <option value="tabs">탭</option>
                  <option value="accordion">아코디언</option>
                </select>
              </div>

              {/* 레이아웃별 상세 설정 */}
              {(selectedComponent as AreaComponent).layoutType === "grid" && (
                <div className="space-y-2 rounded-md border p-3">
                  <h5 className="text-sm font-medium">그리드 설정</h5>
                  <div className="grid grid-cols-2 gap-2">
                    <div>
                      <Label className="text-xs">컬럼 수</Label>
                      <Input
                        type="number"
                        min="1"
                        max="12"
                        value={(selectedComponent as AreaComponent).layoutConfig?.gridColumns || 3}
                        onChange={(e) => {
                          const value = Number(e.target.value);
                          onUpdateProperty("layoutConfig.gridColumns", value);
                        }}
                        className="mt-1"
                      />
                    </div>
                    <div>
                      <Label className="text-xs">간격 (px)</Label>
                      <Input
                        type="number"
                        min="0"
                        value={(selectedComponent as AreaComponent).layoutConfig?.gridGap || 16}
                        onChange={(e) => {
                          const value = Number(e.target.value);
                          onUpdateProperty("layoutConfig.gridGap", value);
                        }}
                        className="mt-1"
                      />
                    </div>
                  </div>
                </div>
              )}

              {((selectedComponent as AreaComponent).layoutType === "flex-row" ||
                (selectedComponent as AreaComponent).layoutType === "flex-column") && (
                <div className="space-y-2 rounded-md border p-3">
                  <h5 className="text-sm font-medium">플렉스 설정</h5>
                  <div>
                    <Label className="text-xs">정렬 방식</Label>
                    <select
                      className="mt-1 w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 focus:outline-none"
                      value={(selectedComponent as AreaComponent).layoutConfig?.justifyContent || "flex-start"}
                      onChange={(e) => onUpdateProperty("layoutConfig.justifyContent", e.target.value)}
                    >
                      <option value="flex-start">시작</option>
                      <option value="flex-end">끝</option>
                      <option value="center">가운데</option>
                      <option value="space-between">양끝 정렬</option>
                      <option value="space-around">균등 분배</option>
                      <option value="space-evenly">균등 간격</option>
                    </select>
                  </div>
                  <div>
                    <Label className="text-xs">간격 (px)</Label>
                    <Input
                      type="number"
                      min="0"
                      value={(selectedComponent as AreaComponent).layoutConfig?.gap || 16}
                      onChange={(e) => {
                        const value = Number(e.target.value);
                        onUpdateProperty("layoutConfig.gap", value);
                      }}
                      className="mt-1"
                    />
                  </div>
                </div>
              )}

              {(selectedComponent as AreaComponent).layoutType === "sidebar" && (
                <div className="space-y-2 rounded-md border p-3">
                  <h5 className="text-sm font-medium">사이드바 설정</h5>
                  <div>
                    <Label className="text-xs">사이드바 위치</Label>
                    <select
                      className="mt-1 w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 focus:outline-none"
                      value={(selectedComponent as AreaComponent).layoutConfig?.sidebarPosition || "left"}
                      onChange={(e) => onUpdateProperty("layoutConfig.sidebarPosition", e.target.value)}
                    >
                      <option value="left">왼쪽</option>
                      <option value="right">오른쪽</option>
                    </select>
                  </div>
                  <div>
                    <Label className="text-xs">사이드바 너비 (px)</Label>
                    <Input
                      type="number"
                      min="100"
                      value={(selectedComponent as AreaComponent).layoutConfig?.sidebarWidth || 200}
                      onChange={(e) => {
                        const value = Number(e.target.value);
                        onUpdateProperty("layoutConfig.sidebarWidth", value);
                      }}
                      className="mt-1"
                    />
                  </div>
                </div>
              )}
            </div>
          </>
        )}
      </div>
    </div>
  );
};

// React.memo로 감싸서 불필요한 리렌더링 방지
export const PropertiesPanel = React.memo(PropertiesPanelComponent, (prevProps, nextProps) => {
  // 선택된 컴포넌트 ID가 다르면 리렌더링
  if (prevProps.selectedComponent?.id !== nextProps.selectedComponent?.id) {
    return false;
  }

  // 선택된 컴포넌트가 없는 상태에서 있는 상태로 변경되거나 그 반대인 경우
  if (!prevProps.selectedComponent !== !nextProps.selectedComponent) {
    return false;
  }

  // 테이블 목록이 변경되면 리렌더링
  if (prevProps.tables.length !== nextProps.tables.length) {
    return false;
  }

  // 그룹 관련 props가 변경되면 리렌더링
  if (prevProps.canGroup !== nextProps.canGroup || prevProps.canUngroup !== nextProps.canUngroup) {
    return false;
  }

  // 그 외의 경우는 리렌더링하지 않음
  return true;
});

export default PropertiesPanel;