ERP-node/frontend/components/screen/panels/UnifiedPropertiesPanel.tsx

"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 { 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 { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
import { ChevronDown, Settings, Info, Database, Trash2, Copy, Palette, Monitor } from "lucide-react";
import {
  ComponentData,
  WebType,
  WidgetComponent,
  GroupComponent,
  DataTableComponent,
  TableInfo,
  LayoutComponent,
  FileComponent,
  AreaComponent,
} from "@/types/screen";
import { ColumnSpanPreset, COLUMN_SPAN_PRESETS } from "@/lib/constants/columnSpans";

// 컬럼 스팬 숫자 배열 (1~12)
const COLUMN_NUMBERS = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
import { cn } from "@/lib/utils";
import DataTableConfigPanel from "./DataTableConfigPanel";
import { WebTypeConfigPanel } from "./WebTypeConfigPanel";
import { FileComponentConfigPanel } from "./FileComponentConfigPanel";
import { useWebTypes } from "@/hooks/admin/useWebTypes";
import { isFileComponent } from "@/lib/utils/componentTypeUtils";
import {
  BaseInputType,
  BASE_INPUT_TYPE_OPTIONS,
  getBaseInputType,
  getDefaultDetailType,
  getDetailTypes,
  DetailTypeOption,
} from "@/types/input-type-mapping";

// 새로운 컴포넌트 설정 패널들
import { ButtonConfigPanel } from "../config-panels/ButtonConfigPanel";
import { CardConfigPanel } from "../config-panels/CardConfigPanel";
import { DashboardConfigPanel } from "../config-panels/DashboardConfigPanel";
import { StatsCardConfigPanel } from "../config-panels/StatsCardConfigPanel";
import { ProgressBarConfigPanel } from "../config-panels/ProgressBarConfigPanel";
import { ChartConfigPanel } from "../config-panels/ChartConfigPanel";
import { AlertConfigPanel } from "../config-panels/AlertConfigPanel";
import { BadgeConfigPanel } from "../config-panels/BadgeConfigPanel";
import { DynamicComponentConfigPanel } from "@/lib/utils/getComponentConfigPanel";
import StyleEditor from "../StyleEditor";
import ResolutionPanel from "./ResolutionPanel";

interface UnifiedPropertiesPanelProps {
  selectedComponent?: ComponentData;
  tables: TableInfo[];
  onUpdateProperty: (componentId: string, path: string, value: any) => void;
  onDeleteComponent?: (componentId: string) => void;
  onCopyComponent?: (componentId: string) => void;
  currentTable?: TableInfo;
  currentTableName?: string;
  dragState?: any;
  // 스타일 관련
  onStyleChange?: (style: any) => void;
  // 해상도 관련
  currentResolution?: { name: string; width: number; height: number };
  onResolutionChange?: (resolution: { name: string; width: number; height: number }) => void;
  // 🆕 플로우 위젯 감지용
  allComponents?: ComponentData[];
}

export const UnifiedPropertiesPanel: React.FC<UnifiedPropertiesPanelProps> = ({
  selectedComponent,
  tables,
  onUpdateProperty,
  onDeleteComponent,
  onCopyComponent,
  currentTable,
  currentTableName,
  dragState,
  onStyleChange,
  currentResolution,
  onResolutionChange,
  allComponents = [], // 🆕 기본값 빈 배열
}) => {
  const { webTypes } = useWebTypes({ active: "Y" });
  const [localComponentDetailType, setLocalComponentDetailType] = useState<string>("");

  // 새로운 컴포넌트 시스템의 webType 동기화
  useEffect(() => {
    if (selectedComponent?.type === "component") {
      const webType = selectedComponent.componentConfig?.webType;
      if (webType) {
        setLocalComponentDetailType(webType);
      }
    }
  }, [selectedComponent?.type, selectedComponent?.componentConfig?.webType, selectedComponent?.id]);

  // 컴포넌트가 선택되지 않았을 때도 해상도 설정은 표시
  if (!selectedComponent) {
    return (
      <div className="flex h-full flex-col bg-white">
        {/* 해상도 설정만 표시 */}
        <div className="flex-1 overflow-y-auto p-2">
          <div className="space-y-4 text-xs">
            {currentResolution && onResolutionChange && (
              <div className="space-y-2">
                <div className="flex items-center gap-1.5">
                  <Monitor className="text-primary h-3 w-3" />
                  <h4 className="text-xs font-semibold">해상도 설정</h4>
                </div>
                <ResolutionPanel currentResolution={currentResolution} onResolutionChange={onResolutionChange} />
              </div>
            )}

            {/* 안내 메시지 */}
            <Separator className="my-4" />
            <div className="flex flex-col items-center justify-center py-8 text-center">
              <Settings className="text-muted-foreground/30 mb-2 h-8 w-8" />
              <p className="text-muted-foreground text-[10px]">컴포넌트를 선택하여</p>
              <p className="text-muted-foreground text-[10px]">속성을 편집하세요</p>
            </div>
          </div>
        </div>
      </div>
    );
  }

  const handleUpdate = (path: string, value: any) => {
    onUpdateProperty(selectedComponent.id, path, value);
  };

  // 드래그 중일 때 실시간 위치 표시
  const currentPosition =
    dragState?.isDragging && dragState?.draggedComponent?.id === selectedComponent.id
      ? dragState.currentPosition
      : selectedComponent.position;

  // 컴포넌트별 설정 패널 렌더링 함수 (DetailSettingsPanel의 로직)
  const renderComponentConfigPanel = () => {
    if (!selectedComponent) return null;

    const componentType = selectedComponent.componentConfig?.type || selectedComponent.type;

    const handleUpdateProperty = (path: string, value: any) => {
      onUpdateProperty(selectedComponent.id, path, value);
    };

    switch (componentType) {
      case "button":
      case "button-primary":
      case "button-secondary":
        // 🔧 component.id만 key로 사용 (unmount 방지)
        return (
          <ButtonConfigPanel
            key={selectedComponent.id}
            component={selectedComponent}
            onUpdateProperty={handleUpdateProperty}
            allComponents={allComponents}
            currentTableName={currentTableName}
          />
        );

      case "card":
        return <CardConfigPanel component={selectedComponent} onUpdateProperty={handleUpdateProperty} />;

      case "dashboard":
        return <DashboardConfigPanel component={selectedComponent} onUpdateProperty={handleUpdateProperty} />;

      case "stats":
      case "stats-card":
        return <StatsCardConfigPanel component={selectedComponent} onUpdateProperty={handleUpdateProperty} />;

      case "progress":
      case "progress-bar":
        return <ProgressBarConfigPanel component={selectedComponent} onUpdateProperty={handleUpdateProperty} />;

      case "chart":
      case "chart-basic":
        return <ChartConfigPanel component={selectedComponent} onUpdateProperty={handleUpdateProperty} />;

      case "alert":
      case "alert-info":
        return <AlertConfigPanel component={selectedComponent} onUpdateProperty={handleUpdateProperty} />;

      case "badge":
      case "badge-status":
        return <BadgeConfigPanel component={selectedComponent} onUpdateProperty={handleUpdateProperty} />;

      default:
        return null;
    }
  };

  // 기본 정보 탭
  const renderBasicTab = () => {
    const widget = selectedComponent as WidgetComponent;
    const group = selectedComponent as GroupComponent;
    const area = selectedComponent as AreaComponent;

    return (
      <div className="space-y-2">
        {/* 라벨 + 최소 높이 (같은 행) */}
        <div className="grid grid-cols-2 gap-2">
          <div className="space-y-1">
            <Label className="text-xs">라벨</Label>
            <Input
              value={widget.label || ""}
              onChange={(e) => handleUpdate("label", e.target.value)}
              placeholder="라벨"
              className="h-6 w-full px-2 py-0 text-xs"
              style={{ fontSize: "12px" }}
              style={{ fontSize: "12px" }}
            />
          </div>
          <div className="space-y-1">
            <Label className="text-xs">높이</Label>
            <Input
              type="number"
              value={selectedComponent.size?.height || 0}
              onChange={(e) => {
                const value = parseInt(e.target.value) || 0;
                const roundedValue = Math.max(40, Math.round(value / 40) * 40);
                handleUpdate("size.height", roundedValue);
              }}
              step={40}
              placeholder="40"
              className="h-6 w-full px-2 py-0 text-xs"
              style={{ fontSize: "12px" }}
              style={{ fontSize: "12px" }}
            />
          </div>
        </div>

        {/* Placeholder (widget만) */}
        {selectedComponent.type === "widget" && (
          <div className="space-y-1">
            <Label className="text-xs">Placeholder</Label>
            <Input
              value={widget.placeholder || ""}
              onChange={(e) => handleUpdate("placeholder", e.target.value)}
              placeholder="입력 안내 텍스트"
              className="h-6 w-full px-2 py-0 text-xs"
              style={{ fontSize: "12px" }}
              style={{ fontSize: "12px" }}
            />
          </div>
        )}

        {/* Title (group/area) */}
        {(selectedComponent.type === "group" || selectedComponent.type === "area") && (
          <div className="space-y-1">
            <Label className="text-xs">제목</Label>
            <Input
              value={group.title || area.title || ""}
              onChange={(e) => handleUpdate("title", e.target.value)}
              placeholder="제목"
              className="h-6 w-full px-2 py-0 text-xs"
              style={{ fontSize: "12px" }}
              style={{ fontSize: "12px" }}
            />
          </div>
        )}

        {/* Description (area만) */}
        {selectedComponent.type === "area" && (
          <div className="space-y-1">
            <Label className="text-xs">설명</Label>
            <Input
              value={area.description || ""}
              onChange={(e) => handleUpdate("description", e.target.value)}
              placeholder="설명"
              className="h-6 w-full px-2 py-0 text-xs"
              style={{ fontSize: "12px" }}
              style={{ fontSize: "12px" }}
            />
          </div>
        )}

        {/* Grid Columns + Z-Index (같은 행) */}
        <div className="grid grid-cols-2 gap-2">
          {(selectedComponent as any).gridColumns !== undefined && (
            <div className="space-y-1">
              <Label className="text-xs">Grid</Label>
              <Select
                value={((selectedComponent as any).gridColumns || 12).toString()}
                onValueChange={(value) => handleUpdate("gridColumns", parseInt(value))}
              >
                <SelectTrigger className="h-6 w-full px-2 py-0" style={{ fontSize: "12px" }}>
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  {COLUMN_NUMBERS.map((span) => (
                    <SelectItem key={span} value={span.toString()} style={{ fontSize: "12px" }}>
                      {span}열
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>
          )}
          <div className="space-y-1">
            <Label className="text-xs">Z-Index</Label>
            <Input
              type="number"
              value={currentPosition.z || 1}
              onChange={(e) => handleUpdate("position.z", parseInt(e.target.value) || 1)}
              className="h-6 w-full px-2 py-0 text-xs"
              style={{ fontSize: "12px" }}
              style={{ fontSize: "12px" }}
            />
          </div>
        </div>

        {/* 라벨 스타일 */}
        <Collapsible>
          <CollapsibleTrigger className="flex w-full items-center justify-between rounded-lg bg-slate-50 p-2 text-xs font-medium hover:bg-slate-100">
            라벨 스타일
            <ChevronDown className="h-3.5 w-3.5" />
          </CollapsibleTrigger>
          <CollapsibleContent className="mt-2 space-y-2">
            <div className="space-y-1">
              <Label className="text-xs">라벨 텍스트</Label>
              <Input
                value={selectedComponent.style?.labelText || selectedComponent.label || ""}
                onChange={(e) => handleUpdate("style.labelText", e.target.value)}
                className="h-6 w-full px-2 py-0 text-xs"
                style={{ fontSize: "12px" }}
                style={{ fontSize: "12px" }}
              />
            </div>
            <div className="grid grid-cols-2 gap-2">
              <div className="space-y-1">
                <Label className="text-xs">크기</Label>
                <Input
                  value={selectedComponent.style?.labelFontSize || "12px"}
                  onChange={(e) => handleUpdate("style.labelFontSize", e.target.value)}
                  className="h-6 w-full px-2 py-0 text-xs"
                  style={{ fontSize: "12px" }}
                  style={{ fontSize: "12px" }}
                />
              </div>
              <div className="space-y-1">
                <Label className="text-xs">색상</Label>
                <Input
                  type="color"
                  value={selectedComponent.style?.labelColor || "#212121"}
                  onChange={(e) => handleUpdate("style.labelColor", e.target.value)}
                  className="h-6 w-full px-2 py-0 text-xs"
                  style={{ fontSize: "12px" }}
                  style={{ fontSize: "12px" }}
                />
              </div>
            </div>
            <div className="grid grid-cols-2 gap-2">
              <div className="space-y-1">
                <Label className="text-xs">여백</Label>
                <Input
                  value={selectedComponent.style?.labelMarginBottom || "4px"}
                  onChange={(e) => handleUpdate("style.labelMarginBottom", e.target.value)}
                  className="h-6 w-full px-2 py-0 text-xs"
                  style={{ fontSize: "12px" }}
                  style={{ fontSize: "12px" }}
                />
              </div>
              <div className="flex items-center space-x-2 pt-5">
                <Checkbox
                  checked={selectedComponent.style?.labelDisplay !== false}
                  onCheckedChange={(checked) => handleUpdate("style.labelDisplay", checked)}
                  className="h-4 w-4"
                />
                <Label className="text-xs">표시</Label>
              </div>
            </div>
          </CollapsibleContent>
        </Collapsible>

        {/* 옵션 */}
        <div className="grid grid-cols-2 gap-2">
          {widget.required !== undefined && (
            <div className="flex items-center space-x-2">
              <Checkbox
                checked={widget.required === true || selectedComponent.componentConfig?.required === true}
                onCheckedChange={(checked) => {
                  handleUpdate("required", checked);
                  handleUpdate("componentConfig.required", checked);
                }}
                className="h-4 w-4"
              />
              <Label className="text-xs">필수</Label>
            </div>
          )}
          {widget.readonly !== undefined && (
            <div className="flex items-center space-x-2">
              <Checkbox
                checked={widget.readonly === true || selectedComponent.componentConfig?.readonly === true}
                onCheckedChange={(checked) => {
                  handleUpdate("readonly", checked);
                  handleUpdate("componentConfig.readonly", checked);
                }}
                className="h-4 w-4"
              />
              <Label className="text-xs">읽기전용</Label>
            </div>
          )}
        </div>
      </div>
    );
  };

  // 상세 설정 탭 (DetailSettingsPanel의 전체 로직 통합)
  const renderDetailTab = () => {
    console.log("🔍 [renderDetailTab] selectedComponent.type:", selectedComponent.type);

    // 1. DataTable 컴포넌트
    if (selectedComponent.type === "datatable") {
      console.log("✅ [renderDetailTab] DataTable 컴포넌트");
      return (
        <DataTableConfigPanel
          component={selectedComponent as DataTableComponent}
          tables={tables}
          onUpdateComponent={(updates) => {
            Object.entries(updates).forEach(([key, value]) => {
              handleUpdate(key, value);
            });
          }}
        />
      );
    }

    // 3. 파일 컴포넌트
    if (isFileComponent(selectedComponent)) {
      return (
        <FileComponentConfigPanel
          component={selectedComponent as FileComponent}
          onUpdateProperty={onUpdateProperty}
          currentTable={currentTable}
          currentTableName={currentTableName}
        />
      );
    }

    // 4. 새로운 컴포넌트 시스템 (button, card 등)
    const componentType = selectedComponent.componentConfig?.type || selectedComponent.type;
    const hasNewConfigPanel =
      componentType &&
      [
        "button",
        "button-primary",
        "button-secondary",
        "card",
        "dashboard",
        "stats",
        "stats-card",
        "progress",
        "progress-bar",
        "chart",
        "chart-basic",
        "alert",
        "alert-info",
        "badge",
        "badge-status",
      ].includes(componentType);

    if (hasNewConfigPanel) {
      const configPanel = renderComponentConfigPanel();
      if (configPanel) {
        return <div className="space-y-4">{configPanel}</div>;
      }
    }

    // 5. 새로운 컴포넌트 시스템 (type: "component")
    if (selectedComponent.type === "component") {
      console.log("✅ [renderDetailTab] Component 타입");
      const componentId = (selectedComponent as any).componentType || selectedComponent.componentConfig?.type;
      const webType = selectedComponent.componentConfig?.webType;

      // 테이블 패널에서 드래그한 컴포넌트인지 확인
      const isFromTablePanel = !!(selectedComponent.tableName && selectedComponent.columnName);

      if (!componentId) {
        return (
          <div className="flex h-full items-center justify-center p-8 text-center">
            <p className="text-muted-foreground text-sm">컴포넌트 ID가 설정되지 않았습니다</p>
          </div>
        );
      }

      // 현재 웹타입의 기본 입력 타입 추출
      const currentBaseInputType = webType ? getBaseInputType(webType as any) : null;

      // 선택 가능한 세부 타입 목록
      const availableDetailTypes = currentBaseInputType ? getDetailTypes(currentBaseInputType) : [];

      // 세부 타입 변경 핸들러
      const handleDetailTypeChange = (newDetailType: string) => {
        setLocalComponentDetailType(newDetailType);
        handleUpdate("componentConfig.webType", newDetailType);
      };

      return (
        <div className="space-y-4">
          {/* 세부 타입 선택 - 테이블 패널에서 드래그한 컴포넌트만 표시 */}
          {isFromTablePanel && webType && availableDetailTypes.length > 1 && (
            <div>
              <Label>세부 타입</Label>
              <Select value={localComponentDetailType || webType} onValueChange={handleDetailTypeChange}>
                <SelectTrigger className="h-6 w-full px-2 py-0 text-xs" style={{ fontSize: "12px" }}>
                  <SelectValue placeholder="세부 타입 선택" />
                </SelectTrigger>
                <SelectContent>
                  {availableDetailTypes.map((option) => (
                    <SelectItem key={option.value} value={option.value}>
                      <div>
                        <div className="font-medium">{option.label}</div>
                        <div className="text-muted-foreground text-xs">{option.description}</div>
                      </div>
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>
          )}

          {/* DynamicComponentConfigPanel */}
          <DynamicComponentConfigPanel
            componentId={componentId}
            config={selectedComponent.componentConfig || {}}
            screenTableName={selectedComponent.tableName || currentTable?.tableName || currentTableName}
            tableColumns={currentTable?.columns || []}
            tables={tables}
            onChange={(newConfig) => {
              console.log("🔄 DynamicComponentConfigPanel onChange:", newConfig);
              // 개별 속성별로 업데이트하여 다른 속성과의 충돌 방지
              Object.entries(newConfig).forEach(([key, value]) => {
                handleUpdate(`componentConfig.${key}`, value);
              });
            }}
          />

          {/* 🆕 테이블 데이터 자동 입력 (component 타입용) */}
          <Separator />
          <div className="space-y-3">
            <div className="flex items-center gap-2">
              <Database className="text-primary h-4 w-4" />
              <h4 className="text-xs font-semibold">테이블 데이터 자동 입력</h4>
            </div>

            {/* 활성화 체크박스 */}
            <div className="flex items-center space-x-2">
              <Checkbox
                id="autoFill-enabled-component"
                checked={selectedComponent.autoFill?.enabled || false}
                onCheckedChange={(checked) => {
                  handleUpdate("autoFill", {
                    ...selectedComponent.autoFill,
                    enabled: Boolean(checked),
                  });
                }}
              />
              <Label htmlFor="autoFill-enabled-component" className="cursor-pointer text-xs">
                현재 사용자 정보로 테이블 조회하여 자동 입력
              </Label>
            </div>

            {selectedComponent.autoFill?.enabled && (
              <>
                {/* 조회할 테이블 */}
                <div className="space-y-1">
                  <Label htmlFor="autoFill-sourceTable-component" className="text-xs">
                    조회할 테이블 <span className="text-destructive">*</span>
                  </Label>
                  <Select
                    value={selectedComponent.autoFill?.sourceTable || ""}
                    onValueChange={(value) => {
                      handleUpdate("autoFill", {
                        ...selectedComponent.autoFill,
                        enabled: selectedComponent.autoFill?.enabled || false,
                        sourceTable: value,
                      });
                    }}
                  >
                    <SelectTrigger className="h-6 w-full px-2 py-0 text-xs">
                      <SelectValue placeholder="테이블 선택" />
                    </SelectTrigger>
                    <SelectContent>
                      {tables.map((table) => (
                        <SelectItem key={table.tableName} value={table.tableName} className="text-xs">
                          {table.tableName}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                </div>

                {/* 필터링할 컬럼 */}
                <div className="space-y-1">
                  <Label htmlFor="autoFill-filterColumn-component" className="text-xs">
                    필터링할 컬럼 <span className="text-destructive">*</span>
                  </Label>
                  <Input
                    id="autoFill-filterColumn-component"
                    value={selectedComponent.autoFill?.filterColumn || ""}
                    onChange={(e) => {
                      handleUpdate("autoFill", {
                        ...selectedComponent.autoFill,
                        enabled: selectedComponent.autoFill?.enabled || false,
                        filterColumn: e.target.value,
                      });
                    }}
                    placeholder="예: company_code"
                    className="h-6 w-full px-2 py-0 text-xs"
                  />
                </div>

                {/* 사용자 정보 필드 */}
                <div className="space-y-1">
                  <Label htmlFor="autoFill-userField-component" className="text-xs">
                    사용자 정보 필드 <span className="text-destructive">*</span>
                  </Label>
                  <Select
                    value={selectedComponent.autoFill?.userField || ""}
                    onValueChange={(value: "companyCode" | "userId" | "deptCode") => {
                      handleUpdate("autoFill", {
                        ...selectedComponent.autoFill,
                        enabled: selectedComponent.autoFill?.enabled || false,
                        userField: value,
                      });
                    }}
                  >
                    <SelectTrigger className="h-6 w-full px-2 py-0 text-xs">
                      <SelectValue placeholder="사용자 정보 선택" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="companyCode" className="text-xs">
                        현재 로그인한 사용자 회사 코드
                      </SelectItem>
                      <SelectItem value="userId" className="text-xs">
                        현재 로그인한 사용자 ID
                      </SelectItem>
                      <SelectItem value="deptCode" className="text-xs">
                        현재 로그인한 사용자 부서 코드
                      </SelectItem>
                    </SelectContent>
                  </Select>
                </div>

                {/* 표시할 컬럼 */}
                <div className="space-y-1">
                  <Label htmlFor="autoFill-displayColumn-component" className="text-xs">
                    표시할 컬럼 <span className="text-destructive">*</span>
                  </Label>
                  <Input
                    id="autoFill-displayColumn-component"
                    value={selectedComponent.autoFill?.displayColumn || ""}
                    onChange={(e) => {
                      handleUpdate("autoFill", {
                        ...selectedComponent.autoFill,
                        enabled: selectedComponent.autoFill?.enabled || false,
                        displayColumn: e.target.value,
                      });
                    }}
                    placeholder="예: company_name"
                    className="h-6 w-full px-2 py-0 text-xs"
                  />
                </div>
              </>
            )}
          </div>
        </div>
      );
    }

    // 6. Widget 컴포넌트
    if (selectedComponent.type === "widget") {
      console.log("✅ [renderDetailTab] Widget 타입");
      const widget = selectedComponent as WidgetComponent;
      console.log("🔍 [renderDetailTab] widget.widgetType:", widget.widgetType);

      // 새로운 컴포넌트 시스템 (widgetType이 button, card 등) - 먼저 체크
      if (
        widget.widgetType &&
        ["button", "card", "dashboard", "stats-card", "progress-bar", "chart", "alert", "badge"].includes(
          widget.widgetType,
        )
      ) {
        console.log("✅ [renderDetailTab] DynamicComponent 반환 (widgetType)");
        return (
          <DynamicComponentConfigPanel
            componentId={widget.widgetType}
            config={widget.componentConfig || {}}
            screenTableName={widget.tableName || currentTable?.tableName || currentTableName}
            tableColumns={currentTable?.columns || []}
            tables={tables}
            onChange={(newConfig) => {
              console.log("🔄 DynamicComponentConfigPanel onChange (widget):", newConfig);
              // 전체 componentConfig를 업데이트
              handleUpdate("componentConfig", newConfig);
            }}
          />
        );
      }

      // 일반 위젯 (webType 기반)
      console.log("✅ [renderDetailTab] 일반 위젯 렌더링 시작");
      return (
        <div className="space-y-4">
          {console.log("🔍 [UnifiedPropertiesPanel] widget.webType:", widget.webType, "widget:", widget)}
          {/* WebType 선택 (있는 경우만) */}
          {widget.webType && (
            <div>
              <Label>입력 타입</Label>
              <Select value={widget.webType} onValueChange={(value) => handleUpdate("webType", value)}>
                <SelectTrigger className="h-6 w-full px-2 py-0 text-xs" style={{ fontSize: "12px" }}>
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  {webTypes.map((wt) => (
                    <SelectItem key={wt.web_type} value={wt.web_type}>
                      {wt.web_type_name_kor || wt.web_type}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>
          )}

          {/* 🆕 테이블 데이터 자동 입력 (모든 widget 컴포넌트) */}
          <Separator />
          <div className="space-y-3 border-4 border-red-500 bg-yellow-100 p-4">
            <div className="flex items-center gap-2">
              <Database className="text-primary h-4 w-4" />
              <h4 className="text-xs font-semibold">테이블 데이터 자동 입력</h4>
            </div>

            {/* 활성화 체크박스 */}
            <div className="flex items-center space-x-2">
              <Checkbox
                id="autoFill-enabled"
                checked={widget.autoFill?.enabled || false}
                onCheckedChange={(checked) => {
                  handleUpdate("autoFill", {
                    ...widget.autoFill,
                    enabled: Boolean(checked),
                  });
                }}
              />
              <Label htmlFor="autoFill-enabled" className="cursor-pointer text-xs">
                현재 사용자 정보로 테이블 조회하여 자동 입력
              </Label>
            </div>

            {widget.autoFill?.enabled && (
              <>
                {/* 조회할 테이블 */}
                <div className="space-y-1">
                  <Label htmlFor="autoFill-sourceTable" className="text-xs">
                    조회할 테이블 <span className="text-destructive">*</span>
                  </Label>
                  <Select
                    value={widget.autoFill?.sourceTable || ""}
                    onValueChange={(value) => {
                      handleUpdate("autoFill", {
                        ...widget.autoFill,
                        enabled: widget.autoFill?.enabled || false,
                        sourceTable: value,
                      });
                    }}
                  >
                    <SelectTrigger className="h-6 w-full px-2 py-0 text-xs">
                      <SelectValue placeholder="테이블 선택" />
                    </SelectTrigger>
                    <SelectContent>
                      {tables.map((table) => (
                        <SelectItem key={table.tableName} value={table.tableName} className="text-xs">
                          {table.tableName}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                </div>

                {/* 필터링할 컬럼 */}
                <div className="space-y-1">
                  <Label htmlFor="autoFill-filterColumn" className="text-xs">
                    필터링할 컬럼 <span className="text-destructive">*</span>
                  </Label>
                  <Input
                    id="autoFill-filterColumn"
                    value={widget.autoFill?.filterColumn || ""}
                    onChange={(e) => {
                      handleUpdate("autoFill", {
                        ...widget.autoFill,
                        enabled: widget.autoFill?.enabled || false,
                        filterColumn: e.target.value,
                      });
                    }}
                    placeholder="예: company_code"
                    className="h-6 w-full px-2 py-0 text-xs"
                  />
                </div>

                {/* 사용자 정보 필드 */}
                <div className="space-y-1">
                  <Label htmlFor="autoFill-userField" className="text-xs">
                    사용자 정보 필드 <span className="text-destructive">*</span>
                  </Label>
                  <Select
                    value={widget.autoFill?.userField || ""}
                    onValueChange={(value: "companyCode" | "userId" | "deptCode") => {
                      handleUpdate("autoFill", {
                        ...widget.autoFill,
                        enabled: widget.autoFill?.enabled || false,
                        userField: value,
                      });
                    }}
                  >
                    <SelectTrigger className="h-6 w-full px-2 py-0 text-xs">
                      <SelectValue placeholder="사용자 정보 선택" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="companyCode" className="text-xs">
                        현재 로그인한 사용자 회사 코드
                      </SelectItem>
                      <SelectItem value="userId" className="text-xs">
                        현재 로그인한 사용자 ID
                      </SelectItem>
                      <SelectItem value="deptCode" className="text-xs">
                        현재 로그인한 사용자 부서 코드
                      </SelectItem>
                    </SelectContent>
                  </Select>
                </div>

                {/* 표시할 컬럼 */}
                <div className="space-y-1">
                  <Label htmlFor="autoFill-displayColumn" className="text-xs">
                    표시할 컬럼 <span className="text-destructive">*</span>
                  </Label>
                  <Input
                    id="autoFill-displayColumn"
                    value={widget.autoFill?.displayColumn || ""}
                    onChange={(e) => {
                      handleUpdate("autoFill", {
                        ...widget.autoFill,
                        enabled: widget.autoFill?.enabled || false,
                        displayColumn: e.target.value,
                      });
                    }}
                    placeholder="예: company_name"
                    className="h-6 w-full px-2 py-0 text-xs"
                  />
                </div>
              </>
            )}
          </div>
        </div>
      );
    }

    // 기본 메시지
    return (
      <div className="flex h-full items-center justify-center p-8 text-center">
        <p className="text-muted-foreground text-sm">이 컴포넌트는 추가 설정이 없습니다</p>
      </div>
    );
  };

  return (
    <div className="flex h-full flex-col bg-white">
      {/* 헤더 - 간소화 */}
      <div className="border-border border-b px-3 py-2">
        {selectedComponent.type === "widget" && (
          <div className="text-muted-foreground truncate text-[10px]">
            {(selectedComponent as WidgetComponent).label || selectedComponent.id}
          </div>
        )}
      </div>

      {/* 통합 컨텐츠 (탭 제거) */}
      <div className="flex-1 overflow-y-auto p-2">
        <div className="space-y-4 text-xs">
          {/* 해상도 설정 - 항상 맨 위에 표시 */}
          {currentResolution && onResolutionChange && (
            <>
              <div className="space-y-2">
                <div className="flex items-center gap-1.5">
                  <Monitor className="text-primary h-3 w-3" />
                  <h4 className="text-xs font-semibold">해상도 설정</h4>
                </div>
                <ResolutionPanel currentResolution={currentResolution} onResolutionChange={onResolutionChange} />
              </div>
              <Separator className="my-2" />
            </>
          )}

          {/* 기본 설정 */}
          {renderBasicTab()}

          {/* 상세 설정 */}
          <Separator className="my-2" />
          {renderDetailTab()}

          {/* 스타일 설정 */}
          {selectedComponent && (
            <>
              <Separator className="my-2" />
              <div className="space-y-2">
                <div className="flex items-center gap-1.5">
                  <Palette className="text-primary h-3 w-3" />
                  <h4 className="text-xs font-semibold">컴포넌트 스타일</h4>
                </div>
                <StyleEditor
                  style={selectedComponent.style || {}}
                  onStyleChange={(style) => {
                    if (onStyleChange) {
                      onStyleChange(style);
                    } else {
                      handleUpdate("style", style);
                    }
                  }}
                />
              </div>
            </>
          )}
        </div>
      </div>
    </div>
  );
};

export default UnifiedPropertiesPanel;