/**
 * 분할 패널 컴포넌트
 * 좌측과 우측에 화면을 임베드합니다.
 *
 * 데이터 전달은 좌측 화면에 배치된 버튼의 transferData 액션으로 처리됩니다.
 * 예: 좌측 화면에 TableListComponent + Button(transferData 액션) 배치
 */

"use client";

import React, { useMemo } from "react";
import { EmbeddedScreen } from "./EmbeddedScreen";
import { Columns2 } from "lucide-react";
import { SplitPanelProvider } from "@/contexts/SplitPanelContext";
import { ResponsiveSplitPanel } from "@/components/common/ResponsiveSplitPanel";

interface ScreenSplitPanelProps {
  screenId?: number;
  config?: any; // 설정 패널에서 오는 config (leftScreenId, rightScreenId, splitRatio, resizable)
  initialFormData?: Record<string, any>; // 🆕 수정 모드에서 전달되는 초기 데이터
  groupedData?: Record<string, any>[]; // 🆕 그룹 데이터 (수정 모드에서 원본 데이터 추적용)
}

/**
 * 분할 패널 컴포넌트
 * 순수하게 화면 분할 기능만 제공합니다.
 */
export function ScreenSplitPanel({ screenId, config, initialFormData, groupedData }: ScreenSplitPanelProps) {
  // config에서 splitRatio 추출 (기본값 50)
  const configSplitRatio = config?.splitRatio ?? 50;

  // 설정 패널에서 오는 간단한 config를 임베딩 설정으로 변환
  const leftEmbedding = config?.leftScreenId
    ? {
        id: 1,
        parentScreenId: screenId || 0,
        childScreenId: config.leftScreenId,
        position: "left" as const,
        mode: "view" as const, // 기본 view 모드 (select는 테이블 자체 설정)
        config: {},
        companyCode: "*",
        createdAt: new Date(),
        updatedAt: new Date(),
      }
    : null;

  const rightEmbedding = config?.rightScreenId
    ? {
        id: 2,
        parentScreenId: screenId || 0,
        childScreenId: config.rightScreenId,
        position: "right" as const,
        mode: "view" as const, // 기본 view 모드
        config: {},
        companyCode: "*",
        createdAt: new Date(),
        updatedAt: new Date(),
      }
    : null;

  // config가 없는 경우 (디자이너 모드 또는 초기 상태)
  if (!config) {
    return (
      <div className="border-muted-foreground/25 flex h-full items-center justify-center rounded-lg border-2 border-dashed">
        <div className="space-y-4 p-6 text-center">
          <div className="flex items-center justify-center gap-3">
            <div className="bg-muted flex h-16 w-16 items-center justify-center rounded-lg">
              <Columns2 className="text-muted-foreground h-8 w-8" />
            </div>
          </div>
          <div>
            <p className="text-muted-foreground mb-2 text-base font-semibold">화면 분할 패널</p>
            <p className="text-muted-foreground/60 mb-1 text-xs">좌우로 화면을 나눕니다</p>
            <p className="text-muted-foreground/60 text-xs">
              우측 속성 패널 → 상세 설정에서 좌측/우측 화면을 선택하세요
            </p>
            <p className="text-muted-foreground/60 mt-2 text-[10px]">
              💡 데이터 전달: 좌측 화면에 버튼 배치 후 transferData 액션 설정
            </p>
          </div>
        </div>
      </div>
    );
  }

  // 좌측 또는 우측 화면이 설정되지 않은 경우 안내 메시지 표시
  const hasLeftScreen = !!leftEmbedding;
  const hasRightScreen = !!rightEmbedding;

  // 분할 패널 고유 ID 생성
  const splitPanelId = useMemo(() => `split-panel-${screenId || "unknown"}-${Date.now()}`, [screenId]);

  return (
    <SplitPanelProvider
      splitPanelId={splitPanelId}
      leftScreenId={config?.leftScreenId || null}
      rightScreenId={config?.rightScreenId || null}
      parentDataMapping={config?.parentDataMapping || []}
      linkedFilters={config?.linkedFilters || []}
      disableAutoDataTransfer={config?.disableAutoDataTransfer ?? false}
    >
      <ResponsiveSplitPanel
        left={
          hasLeftScreen ? (
            <EmbeddedScreen embedding={leftEmbedding!} position="left" initialFormData={initialFormData} groupedData={groupedData} />
          ) : (
            <div className="flex h-full items-center justify-center bg-muted/30">
              <p className="text-muted-foreground text-sm">좌측 화면을 선택하세요</p>
            </div>
          )
        }
        right={
          hasRightScreen ? (
            <EmbeddedScreen embedding={rightEmbedding!} position="right" initialFormData={initialFormData} groupedData={groupedData} />
          ) : (
            <div className="flex h-full items-center justify-center bg-muted/30">
              <p className="text-muted-foreground text-sm">우측 화면을 선택하세요</p>
            </div>
          )
        }
        leftTitle="좌측 패널"
        leftWidth={configSplitRatio}
        minLeftWidth={20}
        maxLeftWidth={80}
        showResizer={config?.resizable !== false}
        collapsedOnMobile={true}
      />
    </SplitPanelProvider>
  );
}