ERP-node/frontend/components/pop/designer/panels/ComponentEditorPanel.tsx

"use client";

import React from "react";
import { cn } from "@/lib/utils";
import {
  PopComponentDefinitionV5,
  PopGridPosition,
  GridMode,
  GRID_BREAKPOINTS,
  PopComponentType,
} from "../types/pop-layout";
import {
  Settings,
  Database,
  Eye,
  Grid3x3,
  MoveHorizontal,
  MoveVertical,
} from "lucide-react";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Label } from "@/components/ui/label";
import { Input } from "@/components/ui/input";
import { Checkbox } from "@/components/ui/checkbox";
import { PopComponentRegistry } from "@/lib/registry/PopComponentRegistry";

// ========================================
// Props
// ========================================

interface ComponentEditorPanelProps {
  /** 선택된 컴포넌트 */
  component: PopComponentDefinitionV5 | null;
  /** 현재 모드 */
  currentMode: GridMode;
  /** 컴포넌트 업데이트 */
  onUpdateComponent?: (updates: Partial<PopComponentDefinitionV5>) => void;
  /** 추가 className */
  className?: string;
}

// ========================================
// 컴포넌트 타입별 라벨
// ========================================
const COMPONENT_TYPE_LABELS: Record<PopComponentType, string> = {
  "pop-field": "필드",
  "pop-button": "버튼",
  "pop-list": "리스트",
  "pop-indicator": "인디케이터",
  "pop-scanner": "스캐너",
  "pop-numpad": "숫자패드",
  "pop-spacer": "스페이서",
  "pop-break": "줄바꿈",
};

// ========================================
// 컴포넌트 편집 패널 (v5 그리드 시스템)
// ========================================

export default function ComponentEditorPanel({
  component,
  currentMode,
  onUpdateComponent,
  className,
}: ComponentEditorPanelProps) {
  const breakpoint = GRID_BREAKPOINTS[currentMode];
  
  // 선택된 컴포넌트 없음
  if (!component) {
    return (
      <div className={cn("flex h-full flex-col bg-white", className)}>
        <div className="border-b px-4 py-3">
          <h3 className="text-sm font-medium">속성</h3>
        </div>
        <div className="flex flex-1 items-center justify-center p-4 text-sm text-muted-foreground">
          컴포넌트를 선택하세요
        </div>
      </div>
    );
  }

  // 기본 모드 여부
  const isDefaultMode = currentMode === "tablet_landscape";

  return (
    <div className={cn("flex h-full flex-col bg-white", className)}>
      {/* 헤더 */}
      <div className="border-b px-4 py-3">
        <h3 className="text-sm font-medium">
          {component.label || COMPONENT_TYPE_LABELS[component.type]}
        </h3>
        <p className="text-xs text-muted-foreground">{component.type}</p>
        {!isDefaultMode && (
          <p className="text-xs text-amber-600 mt-1">
            기본 모드(태블릿 가로)에서만 위치 편집 가능
          </p>
        )}
      </div>

      {/* 탭 */}
      <Tabs defaultValue="position" className="flex flex-1 flex-col">
        <TabsList className="w-full justify-start rounded-none border-b bg-transparent px-2">
          <TabsTrigger value="position" className="gap-1 text-xs">
            <Grid3x3 className="h-3 w-3" />
            위치
          </TabsTrigger>
          <TabsTrigger value="settings" className="gap-1 text-xs">
            <Settings className="h-3 w-3" />
            설정
          </TabsTrigger>
          <TabsTrigger value="visibility" className="gap-1 text-xs">
            <Eye className="h-3 w-3" />
            표시
          </TabsTrigger>
          <TabsTrigger value="data" className="gap-1 text-xs">
            <Database className="h-3 w-3" />
            데이터
          </TabsTrigger>
        </TabsList>

        {/* 위치 탭 */}
        <TabsContent value="position" className="flex-1 overflow-auto p-4">
          <PositionForm
            component={component}
            currentMode={currentMode}
            isDefaultMode={isDefaultMode}
            columns={breakpoint.columns}
            onUpdate={onUpdateComponent}
          />
        </TabsContent>

        {/* 설정 탭 */}
        <TabsContent value="settings" className="flex-1 overflow-auto p-4">
          <ComponentSettingsForm
            component={component}
            onUpdate={onUpdateComponent}
          />
        </TabsContent>

        {/* 표시 탭 */}
        <TabsContent value="visibility" className="flex-1 overflow-auto p-4">
          <VisibilityForm
            component={component}
            onUpdate={onUpdateComponent}
          />
        </TabsContent>

        {/* 데이터 탭 */}
        <TabsContent value="data" className="flex-1 overflow-auto p-4">
          <DataBindingPlaceholder />
        </TabsContent>
      </Tabs>
    </div>
  );
}

// ========================================
// 위치 편집 폼
// ========================================

interface PositionFormProps {
  component: PopComponentDefinitionV5;
  currentMode: GridMode;
  isDefaultMode: boolean;
  columns: number;
  onUpdate?: (updates: Partial<PopComponentDefinitionV5>) => void;
}

function PositionForm({ component, currentMode, isDefaultMode, columns, onUpdate }: PositionFormProps) {
  const { position } = component;
  
  const handlePositionChange = (field: keyof PopGridPosition, value: number) => {
    // 범위 체크
    let clampedValue = Math.max(1, value);
    
    if (field === "col" || field === "colSpan") {
      clampedValue = Math.min(columns, clampedValue);
    }
    if (field === "colSpan" && position.col + clampedValue - 1 > columns) {
      clampedValue = columns - position.col + 1;
    }
    
    onUpdate?.({
      position: {
        ...position,
        [field]: clampedValue,
      },
    });
  };

  return (
    <div className="space-y-6">
      {/* 그리드 정보 */}
      <div className="rounded-lg bg-gray-50 p-3">
        <p className="text-xs font-medium text-gray-700 mb-1">
          현재 그리드: {GRID_BREAKPOINTS[currentMode].label}
        </p>
        <p className="text-xs text-muted-foreground">
          최대 {columns}칸 × 무제한 행
        </p>
      </div>

      {/* 열 위치 */}
      <div className="space-y-2">
        <Label className="text-xs font-medium flex items-center gap-1">
          <MoveHorizontal className="h-3 w-3" />
          열 위치 (Col)
        </Label>
        <div className="flex items-center gap-2">
          <Input
            type="number"
            min={1}
            max={columns}
            value={position.col}
            onChange={(e) => handlePositionChange("col", parseInt(e.target.value) || 1)}
            disabled={!isDefaultMode}
            className="h-8 w-20 text-xs"
          />
          <span className="text-xs text-muted-foreground">
            (1~{columns})
          </span>
        </div>
      </div>

      {/* 행 위치 */}
      <div className="space-y-2">
        <Label className="text-xs font-medium flex items-center gap-1">
          <MoveVertical className="h-3 w-3" />
          행 위치 (Row)
        </Label>
        <div className="flex items-center gap-2">
          <Input
            type="number"
            min={1}
            value={position.row}
            onChange={(e) => handlePositionChange("row", parseInt(e.target.value) || 1)}
            disabled={!isDefaultMode}
            className="h-8 w-20 text-xs"
          />
          <span className="text-xs text-muted-foreground">
            (1~)
          </span>
        </div>
      </div>

      <div className="h-px bg-gray-200" />

      {/* 열 크기 */}
      <div className="space-y-2">
        <Label className="text-xs font-medium flex items-center gap-1">
          <MoveHorizontal className="h-3 w-3" />
          열 크기 (ColSpan)
        </Label>
        <div className="flex items-center gap-2">
          <Input
            type="number"
            min={1}
            max={columns}
            value={position.colSpan}
            onChange={(e) => handlePositionChange("colSpan", parseInt(e.target.value) || 1)}
            disabled={!isDefaultMode}
            className="h-8 w-20 text-xs"
          />
          <span className="text-xs text-muted-foreground">
            칸 (1~{columns})
          </span>
        </div>
        <p className="text-xs text-muted-foreground">
          {Math.round((position.colSpan / columns) * 100)}% 너비
        </p>
      </div>

      {/* 행 크기 */}
      <div className="space-y-2">
        <Label className="text-xs font-medium flex items-center gap-1">
          <MoveVertical className="h-3 w-3" />
          행 크기 (RowSpan)
        </Label>
        <div className="flex items-center gap-2">
          <Input
            type="number"
            min={1}
            value={position.rowSpan}
            onChange={(e) => handlePositionChange("rowSpan", parseInt(e.target.value) || 1)}
            disabled={!isDefaultMode}
            className="h-8 w-20 text-xs"
          />
          <span className="text-xs text-muted-foreground">
            행
          </span>
        </div>
        <p className="text-xs text-muted-foreground">
          높이: {position.rowSpan * GRID_BREAKPOINTS[currentMode].rowHeight}px
        </p>
      </div>

      {/* 비활성화 안내 */}
      {!isDefaultMode && (
        <div className="rounded-lg bg-amber-50 border border-amber-200 p-3">
          <p className="text-xs text-amber-800">
            위치 편집은 기본 모드(태블릿 가로)에서만 가능합니다.
            다른 모드에서는 자동으로 변환됩니다.
          </p>
        </div>
      )}
    </div>
  );
}

// ========================================
// 설정 폼
// ========================================

interface ComponentSettingsFormProps {
  component: PopComponentDefinitionV5;
  onUpdate?: (updates: Partial<PopComponentDefinitionV5>) => void;
}

function ComponentSettingsForm({ component, onUpdate }: ComponentSettingsFormProps) {
  // PopComponentRegistry에서 configPanel 가져오기
  const registeredComp = PopComponentRegistry.getComponent(component.type);
  const ConfigPanel = registeredComp?.configPanel;

  // config 업데이트 핸들러
  const handleConfigUpdate = (newConfig: any) => {
    onUpdate?.({ config: newConfig });
  };

  return (
    <div className="space-y-4">
      {/* 라벨 */}
      <div className="space-y-2">
        <Label className="text-xs font-medium">라벨</Label>
        <Input
          type="text"
          value={component.label || ""}
          onChange={(e) => onUpdate?.({ label: e.target.value })}
          placeholder="컴포넌트 이름"
          className="h-8 text-xs"
        />
      </div>

      {/* 컴포넌트 타입별 설정 패널 */}
      {ConfigPanel ? (
        <ConfigPanel
          config={component.config || {}}
          onUpdate={handleConfigUpdate}
        />
      ) : (
        <div className="rounded-lg bg-gray-50 p-3">
          <p className="text-xs text-muted-foreground">
            {component.type} 전용 설정이 없습니다
          </p>
        </div>
      )}
    </div>
  );
}

// ========================================
// 표시/숨김 폼
// ========================================

interface VisibilityFormProps {
  component: PopComponentDefinitionV5;
  onUpdate?: (updates: Partial<PopComponentDefinitionV5>) => void;
}

function VisibilityForm({ component, onUpdate }: VisibilityFormProps) {
  const modes: Array<{ key: GridMode; label: string }> = [
    { key: "tablet_landscape", label: "태블릿 가로 (12칸)" },
    { key: "tablet_portrait", label: "태블릿 세로 (8칸)" },
    { key: "mobile_landscape", label: "모바일 가로 (6칸)" },
    { key: "mobile_portrait", label: "모바일 세로 (4칸)" },
  ];

  const handleVisibilityChange = (mode: GridMode, visible: boolean) => {
    onUpdate?.({
      visibility: {
        ...component.visibility,
        [mode]: visible,
      },
    });
  };

  return (
    <div className="space-y-4">
      <div className="space-y-3">
        <Label className="text-xs font-medium">모드별 표시 설정</Label>
        
        {modes.map((mode) => {
          const isVisible = component.visibility?.[mode.key] !== false;
          
          return (
            <div key={mode.key} className="flex items-center gap-2">
              <Checkbox
                id={`visibility-${mode.key}`}
                checked={isVisible}
                onCheckedChange={(checked) => 
                  handleVisibilityChange(mode.key, checked === true)
                }
              />
              <label
                htmlFor={`visibility-${mode.key}`}
                className="text-xs cursor-pointer"
              >
                {mode.label}
              </label>
            </div>
          );
        })}
      </div>

      <div className="rounded-lg bg-blue-50 border border-blue-200 p-3">
        <p className="text-xs text-blue-800">
          체크 해제하면 해당 모드에서 컴포넌트가 숨겨집니다
        </p>
      </div>
    </div>
  );
}

// ========================================
// 데이터 바인딩 플레이스홀더
// ========================================

function DataBindingPlaceholder() {
  return (
    <div className="space-y-4">
      <div className="rounded-lg bg-gray-50 p-4 text-center">
        <Database className="mx-auto mb-2 h-8 w-8 text-muted-foreground" />
        <p className="text-sm font-medium text-gray-700">데이터 바인딩</p>
        <p className="text-xs text-muted-foreground mt-1">
          Phase 4에서 구현 예정
        </p>
      </div>
    </div>
  );
}