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 {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from "@/components/ui/collapsible";
import {
  Plus,
  Settings,
  LayoutGrid,
  Type,
  MousePointer,
  List,
  Activity,
  ScanLine,
  Calculator,
  Trash2,
  ChevronDown,
  GripVertical,
} from "lucide-react";
import { cn } from "@/lib/utils";
import {
  PopLayoutData,
  PopSectionData,
  PopComponentType,
} from "../types/pop-layout";

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

// 드래그 아이템 데이터
export interface DragItemSection {
  type: typeof DND_ITEM_TYPES.SECTION;
}

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

interface PopPanelProps {
  layout: PopLayoutData;
  selectedSectionId: string | null;
  selectedSection: PopSectionData | null;
  onUpdateSection: (id: string, updates: Partial<PopSectionData>) => void;
  onDeleteSection: (id: string) => void;
  activeDevice: "mobile" | "tablet";
}

// 컴포넌트 팔레트 정의
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: "숫자 입력 전용",
  },
];

export function PopPanel({
  layout,
  selectedSectionId,
  selectedSection,
  onUpdateSection,
  onDeleteSection,
  activeDevice,
}: PopPanelProps) {
  const [activeTab, setActiveTab] = useState<string>("components");

  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>
              <h4 className="mb-2 text-xs font-medium text-muted-foreground">
                레이아웃
              </h4>
              <DraggableSectionItem />
              <p className="mt-1 text-xs text-muted-foreground">
                캔버스에 드래그하여 섹션 추가
              </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">
          {selectedSection ? (
            <SectionEditor
              section={selectedSection}
              onUpdate={(updates) => onUpdateSection(selectedSection.id, updates)}
              onDelete={() => onDeleteSection(selectedSection.id)}
              activeDevice={activeDevice}
            />
          ) : (
            <div className="flex h-40 items-center justify-center text-sm text-muted-foreground">
              섹션을 선택하세요
            </div>
          )}
        </TabsContent>
      </Tabs>
    </div>
  );
}

// 드래그 가능한 섹션 아이템
function DraggableSectionItem() {
  const [{ isDragging }, drag] = useDrag(() => ({
    type: DND_ITEM_TYPES.SECTION,
    item: { type: DND_ITEM_TYPES.SECTION } as DragItemSection,
    collect: (monitor) => ({
      isDragging: monitor.isDragging(),
    }),
  }));

  return (
    <div
      ref={drag}
      className={cn(
        "flex cursor-grab items-center 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="h-4 w-4 text-gray-400" />
      <LayoutGrid className="h-4 w-4" />
      <div className="flex-1">
        <p className="text-sm font-medium">섹션</p>
        <p className="text-xs text-muted-foreground">컴포넌트를 그룹화하는 컨테이너</p>
      </div>
    </div>
  );
}

// 드래그 가능한 컴포넌트 아이템
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>
  );
}

// 섹션 편집기
interface SectionEditorProps {
  section: PopSectionData;
  onUpdate: (updates: Partial<PopSectionData>) => void;
  onDelete: () => void;
  activeDevice: "mobile" | "tablet";
}

function SectionEditor({
  section,
  onUpdate,
  onDelete,
  activeDevice,
}: SectionEditorProps) {
  const [isGridOpen, setIsGridOpen] = useState(true);
  const [isMobileOpen, setIsMobileOpen] = useState(false);

  return (
    <div className="space-y-4">
      {/* 섹션 기본 정보 */}
      <div className="flex items-center justify-between">
        <span className="text-sm font-medium">섹션</span>
        <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={section.label || ""}
          onChange={(e) => onUpdate({ label: e.target.value })}
          placeholder="섹션 이름"
          className="h-8 text-xs"
        />
      </div>

      {/* 그리드 위치/크기 */}
      <Collapsible open={isGridOpen} onOpenChange={setIsGridOpen}>
        <CollapsibleTrigger className="flex w-full items-center justify-between py-2 text-sm font-medium">
          그리드 위치
          <ChevronDown
            className={cn(
              "h-4 w-4 transition-transform",
              isGridOpen && "rotate-180"
            )}
          />
        </CollapsibleTrigger>
        <CollapsibleContent className="space-y-3 pt-2">
          <div className="grid grid-cols-2 gap-2">
            <div className="space-y-1">
              <Label className="text-xs">시작 열</Label>
              <Input
                type="number"
                min={1}
                max={24}
                value={section.grid.col}
                onChange={(e) =>
                  onUpdate({
                    grid: { ...section.grid, col: parseInt(e.target.value) || 1 },
                  })
                }
                className="h-8 text-xs"
              />
            </div>
            <div className="space-y-1">
              <Label className="text-xs">시작 행</Label>
              <Input
                type="number"
                min={1}
                value={section.grid.row}
                onChange={(e) =>
                  onUpdate({
                    grid: { ...section.grid, row: parseInt(e.target.value) || 1 },
                  })
                }
                className="h-8 text-xs"
              />
            </div>
            <div className="space-y-1">
              <Label className="text-xs">열 크기</Label>
              <Input
                type="number"
                min={1}
                max={24}
                value={section.grid.colSpan}
                onChange={(e) =>
                  onUpdate({
                    grid: {
                      ...section.grid,
                      colSpan: parseInt(e.target.value) || 1,
                    },
                  })
                }
                className="h-8 text-xs"
              />
            </div>
            <div className="space-y-1">
              <Label className="text-xs">행 크기</Label>
              <Input
                type="number"
                min={1}
                value={section.grid.rowSpan}
                onChange={(e) =>
                  onUpdate({
                    grid: {
                      ...section.grid,
                      rowSpan: parseInt(e.target.value) || 1,
                    },
                  })
                }
                className="h-8 text-xs"
              />
            </div>
          </div>
          <p className="text-xs text-muted-foreground">
            캔버스는 24열 그리드입니다
          </p>
        </CollapsibleContent>
      </Collapsible>

      {/* 내부 그리드 설정 */}
      <div className="space-y-3">
        <div className="grid grid-cols-2 gap-2">
          <div className="space-y-1">
            <Label className="text-xs">내부 열 수</Label>
            <Select
              value={String(section.innerGrid.columns)}
              onValueChange={(v) =>
                onUpdate({
                  innerGrid: { ...section.innerGrid, columns: parseInt(v) },
                })
              }
            >
              <SelectTrigger className="h-8 text-xs">
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="1">1열</SelectItem>
                <SelectItem value="2">2열</SelectItem>
                <SelectItem value="3">3열</SelectItem>
                <SelectItem value="4">4열</SelectItem>
                <SelectItem value="6">6열</SelectItem>
              </SelectContent>
            </Select>
          </div>
          <div className="space-y-1">
            <Label className="text-xs">내부 행 수</Label>
            <Select
              value={String(section.innerGrid.rows)}
              onValueChange={(v) =>
                onUpdate({
                  innerGrid: { ...section.innerGrid, rows: parseInt(v) },
                })
              }
            >
              <SelectTrigger className="h-8 text-xs">
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="1">1행</SelectItem>
                <SelectItem value="2">2행</SelectItem>
                <SelectItem value="3">3행</SelectItem>
                <SelectItem value="4">4행</SelectItem>
                <SelectItem value="5">5행</SelectItem>
                <SelectItem value="6">6행</SelectItem>
              </SelectContent>
            </Select>
          </div>
        </div>
        <p className="text-xs text-muted-foreground">
          섹션 내부에서 컴포넌트를 배치할 그리드 (점으로 표시)
        </p>
      </div>

      {/* 모바일 전용 설정 */}
      <Collapsible open={isMobileOpen} onOpenChange={setIsMobileOpen}>
        <CollapsibleTrigger className="flex w-full items-center justify-between py-2 text-sm font-medium">
          모바일 전용 설정
          <ChevronDown
            className={cn(
              "h-4 w-4 transition-transform",
              isMobileOpen && "rotate-180"
            )}
          />
        </CollapsibleTrigger>
        <CollapsibleContent className="space-y-3 pt-2">
          <div className="grid grid-cols-2 gap-2">
            <div className="space-y-1">
              <Label className="text-xs">모바일 열 크기</Label>
              <Input
                type="number"
                min={1}
                max={4}
                value={section.mobileGrid?.colSpan || section.grid.colSpan}
                onChange={(e) =>
                  onUpdate({
                    mobileGrid: {
                      col: section.mobileGrid?.col || 1,
                      row: section.mobileGrid?.row || section.grid.row,
                      colSpan: parseInt(e.target.value) || 4,
                      rowSpan:
                        section.mobileGrid?.rowSpan || section.grid.rowSpan,
                    },
                  })
                }
                className="h-8 text-xs"
              />
            </div>
            <div className="space-y-1">
              <Label className="text-xs">모바일 행 크기</Label>
              <Input
                type="number"
                min={1}
                value={section.mobileGrid?.rowSpan || section.grid.rowSpan}
                onChange={(e) =>
                  onUpdate({
                    mobileGrid: {
                      col: section.mobileGrid?.col || 1,
                      row: section.mobileGrid?.row || section.grid.row,
                      colSpan: section.mobileGrid?.colSpan || 4,
                      rowSpan: parseInt(e.target.value) || 1,
                    },
                  })
                }
                className="h-8 text-xs"
              />
            </div>
          </div>
          <p className="text-xs text-muted-foreground">
            모바일에서는 4열 그리드로 자동 변환됩니다
          </p>
        </CollapsibleContent>
      </Collapsible>
    </div>
  );
}