"use client";

import React, { useState, useRef, useCallback } from "react";
import { CategoryColumnList } from "@/components/table-category/CategoryColumnList";
import { CategoryValueManager } from "@/components/table-category/CategoryValueManager";
import { GripVertical } from "lucide-react";

interface CategoryWidgetProps {
  widgetId?: string;
  tableName?: string; // 현재 화면의 테이블 (옵션 - 형제 메뉴 전체 표시)
  menuObjid?: number; // 현재 메뉴 OBJID (메뉴 스코프) - 필수
  component?: any; // DynamicComponentRenderer에서 전달되는 컴포넌트 정보
  [key: string]: any; // 추가 props 허용
}

/**
 * 카테고리 관리 위젯 (좌우 분할)
 * - 좌측: 형제 메뉴들의 모든 카테고리 타입 컬럼 목록 (메뉴 스코프)
 * - 우측: 선택된 컬럼의 카테고리 값 관리 (메뉴 스코프)
 */
export function CategoryWidget({ widgetId, tableName, menuObjid, component, ...props }: CategoryWidgetProps) {
  // menuObjid가 없으면 경고 로그
  React.useEffect(() => {
    console.log("🔍 CategoryWidget 받은 props:", {
      widgetId,
      tableName,
      menuObjid,
      hasComponent: !!component,
      propsKeys: Object.keys(props),
      propsMenuObjid: props.menuObjid,
      allProps: { widgetId, tableName, menuObjid, ...props },
    });
    
    if (!menuObjid && !props.menuObjid) {
      console.warn("⚠️ CategoryWidget: menuObjid가 전달되지 않았습니다", { 
        component, 
        props,
        allAvailableProps: { widgetId, tableName, menuObjid, ...props }
      });
    } else {
      console.log("✅ CategoryWidget 렌더링", { 
        widgetId, 
        tableName, 
        menuObjid: menuObjid || props.menuObjid 
      });
    }
  }, [menuObjid, widgetId, tableName, component, props]);
  // menuObjid 우선순위: 직접 전달된 값 > props에서 추출한 값
  const effectiveMenuObjid = menuObjid || props.menuObjid;
  
  const [selectedColumn, setSelectedColumn] = useState<{
    uniqueKey: string; // 테이블명.컬럼명 형식
    columnName: string;
    columnLabel: string;
    tableName: string;
  } | null>(null);
  
  const [leftWidth, setLeftWidth] = useState(15); // 초기값 15%
  const containerRef = useRef<HTMLDivElement>(null);
  const isDraggingRef = useRef(false);

  const handleMouseDown = useCallback(() => {
    isDraggingRef.current = true;
    document.body.style.cursor = "col-resize";
    document.body.style.userSelect = "none";
  }, []);

  const handleMouseMove = useCallback((e: MouseEvent) => {
    if (!isDraggingRef.current || !containerRef.current) return;

    const containerRect = containerRef.current.getBoundingClientRect();
    const newLeftWidth = ((e.clientX - containerRect.left) / containerRect.width) * 100;

    // 최소 10%, 최대 40%로 제한
    if (newLeftWidth >= 10 && newLeftWidth <= 40) {
      setLeftWidth(newLeftWidth);
    }
  }, []);

  const handleMouseUp = useCallback(() => {
    isDraggingRef.current = false;
    document.body.style.cursor = "";
    document.body.style.userSelect = "";
  }, []);

  React.useEffect(() => {
    document.addEventListener("mousemove", handleMouseMove);
    document.addEventListener("mouseup", handleMouseUp);

    return () => {
      document.removeEventListener("mousemove", handleMouseMove);
      document.removeEventListener("mouseup", handleMouseUp);
    };
  }, [handleMouseMove, handleMouseUp]);

  return (
    <div ref={containerRef} className="flex h-full min-h-[10px] gap-0">
      {/* 좌측: 카테고리 컬럼 리스트 */}
      <div style={{ width: `${leftWidth}%` }} className="pr-3">
        <CategoryColumnList
          tableName={tableName}
          selectedColumn={selectedColumn?.uniqueKey || null}
          onColumnSelect={(uniqueKey, columnLabel, tableName) => {
            // uniqueKey는 "테이블명.컬럼명" 형식
            const columnName = uniqueKey.split('.')[1];
            setSelectedColumn({ uniqueKey, columnName, columnLabel, tableName });
          }}
          menuObjid={effectiveMenuObjid}
        />
      </div>

      {/* 리사이저 */}
      <div
        onMouseDown={handleMouseDown}
        className="group relative flex w-3 cursor-col-resize items-center justify-center border-r hover:bg-accent/50 transition-colors"
      >
        <GripVertical className="h-4 w-4 text-muted-foreground group-hover:text-foreground transition-colors" />
      </div>

      {/* 우측: 카테고리 값 관리 */}
      <div style={{ width: `${100 - leftWidth - 1}%` }} className="pl-3">
        {selectedColumn ? (
          <CategoryValueManager
            key={selectedColumn.uniqueKey} // 테이블명.컬럼명으로 컴포넌트 재생성
            tableName={selectedColumn.tableName}
            columnName={selectedColumn.columnName}
            columnLabel={selectedColumn.columnLabel}
            menuObjid={effectiveMenuObjid}
          />
        ) : (
          <div className="flex h-64 flex-col items-center justify-center rounded-lg border bg-card shadow-sm">
            <div className="flex flex-col items-center gap-2 text-center">
              <p className="text-sm text-muted-foreground">
                좌측에서 관리할 카테고리 컬럼을 선택하세요
              </p>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}