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

"use client";

import { useState } from "react";
import { useDrag } from "react-dnd";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from "@/components/ui/collapsible";
import {
  Plus,
  Settings,
  Type,
  MousePointer,
  List,
  Activity,
  ScanLine,
  Calculator,
  Trash2,
  ChevronDown,
  GripVertical,
} from "lucide-react";
import { cn } from "@/lib/utils";
import {
  PopLayoutDataV3,
  PopLayoutModeKey,
  PopComponentDefinition,
  PopComponentType,
  MODE_RESOLUTIONS,
} from "../types/pop-layout";

// ========================================
// 드래그 아이템 타입
// ========================================
export const DND_ITEM_TYPES = {
  COMPONENT: "component",
} as const;

export interface DragItemComponent {
  type: typeof DND_ITEM_TYPES.COMPONENT;
  componentType: PopComponentType;
}

// ========================================
// 컴포넌트 팔레트 정의
// ========================================
const COMPONENT_PALETTE: {
  type: PopComponentType;
  label: string;
  icon: React.ElementType;
  description: string;
}[] = [
  {
    type: "pop-field",
    label: "필드",
    icon: Type,
    description: "텍스트, 숫자 등 데이터 입력",
  },
  {
    type: "pop-button",
    label: "버튼",
    icon: MousePointer,
    description: "저장, 삭제 등 액션 실행",
  },
  {
    type: "pop-list",
    label: "리스트",
    icon: List,
    description: "데이터 목록 (카드 템플릿 지원)",
  },
  {
    type: "pop-indicator",
    label: "인디케이터",
    icon: Activity,
    description: "KPI, 상태 표시",
  },
  {
    type: "pop-scanner",
    label: "스캐너",
    icon: ScanLine,
    description: "바코드/QR 스캔",
  },
  {
    type: "pop-numpad",
    label: "숫자패드",
    icon: Calculator,
    description: "숫자 입력 전용",
  },
];

// ========================================
// Props (v3: 섹션 없음)
// ========================================
interface PopPanelProps {
  layout: PopLayoutDataV3;
  activeModeKey: PopLayoutModeKey;
  selectedComponentId: string | null;
  selectedComponent: PopComponentDefinition | null;
  onUpdateComponentDefinition: (id: string, updates: Partial<PopComponentDefinition>) => void;
  onDeleteComponent: (id: string) => void;
  activeDevice: "mobile" | "tablet";
}

// ========================================
// 메인 컴포넌트
// ========================================
export function PopPanel({
  layout,
  activeModeKey,
  selectedComponentId,
  selectedComponent,
  onUpdateComponentDefinition,
  onDeleteComponent,
  activeDevice,
}: PopPanelProps) {
  const [activeTab, setActiveTab] = useState<string>("components");

  // 현재 모드의 컴포넌트 위치
  const currentModeLayout = layout.layouts[activeModeKey];
  const selectedComponentPosition = selectedComponentId 
    ? currentModeLayout.componentPositions[selectedComponentId] 
    : null;

  return (
    <div className="flex h-full flex-col">
      <Tabs
        value={activeTab}
        onValueChange={setActiveTab}
        className="flex h-full flex-col"
      >
        <TabsList className="mx-2 mt-2 grid w-auto grid-cols-2">
          <TabsTrigger value="components" className="text-xs">
            <Plus className="mr-1 h-3.5 w-3.5" />
            컴포넌트
          </TabsTrigger>
          <TabsTrigger value="edit" className="text-xs">
            <Settings className="mr-1 h-3.5 w-3.5" />
            편집
          </TabsTrigger>
        </TabsList>

        {/* 컴포넌트 탭 */}
        <TabsContent value="components" className="flex-1 overflow-auto p-2">
          <div className="space-y-4">
            {/* 현재 모드 표시 */}
            <div className="rounded-lg bg-muted p-2">
              <p className="text-xs font-medium text-muted-foreground">
                편집 중: {getModeLabel(activeModeKey)}
              </p>
              <p className="text-[10px] text-muted-foreground">
                {MODE_RESOLUTIONS[activeModeKey].width} x {MODE_RESOLUTIONS[activeModeKey].height}
              </p>
            </div>

            {/* 컴포넌트 팔레트 */}
            <div>
              <h4 className="mb-2 text-xs font-medium text-muted-foreground">
                컴포넌트
              </h4>
              <div className="space-y-1">
                {COMPONENT_PALETTE.map((item) => (
                  <DraggableComponentItem
                    key={item.type}
                    type={item.type}
                    label={item.label}
                    icon={item.icon}
                    description={item.description}
                  />
                ))}
              </div>
              <p className="mt-2 text-xs text-muted-foreground">
                캔버스로 드래그하여 배치
              </p>
            </div>
          </div>
        </TabsContent>

        {/* 편집 탭 */}
        <TabsContent value="edit" className="flex-1 overflow-auto p-2">
          {selectedComponent && selectedComponentPosition ? (
            <ComponentEditorV3
              component={selectedComponent}
              position={selectedComponentPosition}
              activeModeKey={activeModeKey}
              onUpdateDefinition={(updates) => 
                onUpdateComponentDefinition(selectedComponent.id, updates)
              }
              onDelete={() => onDeleteComponent(selectedComponent.id)}
            />
          ) : (
            <div className="flex h-40 items-center justify-center text-sm text-muted-foreground">
              컴포넌트를 선택하세요
            </div>
          )}
        </TabsContent>
      </Tabs>
    </div>
  );
}

// ========================================
// 모드 라벨 헬퍼
// ========================================
function getModeLabel(modeKey: PopLayoutModeKey): string {
  const labels: Record<PopLayoutModeKey, string> = {
    tablet_landscape: "태블릿 가로",
    tablet_portrait: "태블릿 세로",
    mobile_landscape: "모바일 가로",
    mobile_portrait: "모바일 세로",
  };
  return labels[modeKey];
}

// ========================================
// 드래그 가능한 컴포넌트 아이템
// ========================================
interface DraggableComponentItemProps {
  type: PopComponentType;
  label: string;
  icon: React.ElementType;
  description: string;
}

function DraggableComponentItem({
  type,
  label,
  icon: Icon,
  description,
}: DraggableComponentItemProps) {
  const [{ isDragging }, drag] = useDrag(() => ({
    type: DND_ITEM_TYPES.COMPONENT,
    item: { type: DND_ITEM_TYPES.COMPONENT, componentType: type } as DragItemComponent,
    collect: (monitor) => ({
      isDragging: monitor.isDragging(),
    }),
  }));

  return (
    <div
      ref={drag}
      className={cn(
        "flex cursor-grab items-start gap-3 rounded-lg border p-3 transition-all",
        "hover:bg-accent hover:text-accent-foreground",
        isDragging && "opacity-50 ring-2 ring-primary"
      )}
    >
      <GripVertical className="mt-0.5 h-4 w-4 text-gray-400" />
      <Icon className="mt-0.5 h-4 w-4 shrink-0" />
      <div className="flex-1 space-y-1">
        <p className="text-sm font-medium leading-none">{label}</p>
        <p className="text-xs text-muted-foreground">{description}</p>
      </div>
    </div>
  );
}

// ========================================
// v3 컴포넌트 편집기
// ========================================
interface ComponentEditorV3Props {
  component: PopComponentDefinition;
  position: { col: number; row: number; colSpan: number; rowSpan: number };
  activeModeKey: PopLayoutModeKey;
  onUpdateDefinition: (updates: Partial<PopComponentDefinition>) => void;
  onDelete: () => void;
}

function ComponentEditorV3({
  component,
  position,
  activeModeKey,
  onUpdateDefinition,
  onDelete,
}: ComponentEditorV3Props) {
  const [isPositionOpen, setIsPositionOpen] = useState(true);

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

  return (
    <div className="space-y-4">
      {/* 컴포넌트 기본 정보 */}
      <div className="flex items-center justify-between">
        <div>
          <span className="text-sm font-medium">{typeLabels[component.type]}</span>
          <p className="text-[10px] text-muted-foreground">{component.id}</p>
        </div>
        <Button
          variant="ghost"
          size="icon"
          className="h-7 w-7 text-destructive hover:bg-destructive/10"
          onClick={onDelete}
        >
          <Trash2 className="h-4 w-4" />
        </Button>
      </div>

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

      {/* 현재 모드 위치 (읽기 전용) */}
      <Collapsible open={isPositionOpen} onOpenChange={setIsPositionOpen}>
        <CollapsibleTrigger className="flex w-full items-center justify-between py-2 text-sm font-medium">
          현재 모드 위치
          <ChevronDown
            className={cn(
              "h-4 w-4 transition-transform",
              isPositionOpen && "rotate-180"
            )}
          />
        </CollapsibleTrigger>
        <CollapsibleContent className="space-y-3 pt-2">
          <div className="rounded-lg bg-muted p-3">
            <p className="mb-2 text-xs font-medium">{getModeLabel(activeModeKey)}</p>
            <div className="grid grid-cols-2 gap-2 text-xs">
              <div className="flex justify-between">
                <span className="text-muted-foreground">시작 열:</span>
                <span className="font-medium">{position.col}</span>
              </div>
              <div className="flex justify-between">
                <span className="text-muted-foreground">시작 행:</span>
                <span className="font-medium">{position.row}</span>
              </div>
              <div className="flex justify-between">
                <span className="text-muted-foreground">열 크기:</span>
                <span className="font-medium">{position.colSpan}</span>
              </div>
              <div className="flex justify-between">
                <span className="text-muted-foreground">행 크기:</span>
                <span className="font-medium">{position.rowSpan}</span>
              </div>
            </div>
          </div>
          <p className="text-[10px] text-muted-foreground">
            위치/크기는 캔버스에서 드래그하여 조정하세요.
            각 모드(가로/세로)별로 별도 저장됩니다.
          </p>
        </CollapsibleContent>
      </Collapsible>

      {/* TODO: 컴포넌트별 설정 (config) */}
      <div className="rounded-lg border border-dashed p-3">
        <p className="text-xs text-muted-foreground text-center">
          컴포넌트별 상세 설정은 추후 추가 예정
        </p>
      </div>
    </div>
  );
}