"use client";

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

interface CategoryWidgetProps {
  widgetId: string;
  menuId?: number; // 현재 화면의 menuId (선택사항)
  tableName: string; // 현재 화면의 테이블
  selectedScreen?: any; // 화면 정보 전체 (menuId 추출용)
}

/**
 * 카테고리 관리 위젯 (좌우 분할)
 * - 좌측: 현재 테이블의 카테고리 타입 컬럼 목록
 * - 우측: 선택된 컬럼의 카테고리 값 관리
 */
export function CategoryWidget({
  widgetId,
  menuId: propMenuId,
  tableName,
  selectedScreen,
}: CategoryWidgetProps) {
  const [selectedColumn, setSelectedColumn] = useState<{
    columnName: string;
    columnLabel: string;
  } | null>(null);

  // menuId 추출: props > selectedScreen > 기본값(1)
  const menuId =
    propMenuId ||
    selectedScreen?.menuId ||
    selectedScreen?.menu_id ||
    1; // 기본값

  // menuId가 없으면 경고 메시지 표시
  if (!menuId || menuId === 1) {
    console.warn("⚠️ CategoryWidget: menuId가 제공되지 않아 기본값(1)을 사용합니다", {
      propMenuId,
      selectedScreen,
    });
  }

  return (
    <div className="flex h-full min-h-[10px] gap-6">
      {/* 좌측: 카테고리 컬럼 리스트 (30%) */}
      <div className="w-[30%] border-r pr-6">
        <CategoryColumnList
          tableName={tableName}
          menuId={menuId}
          selectedColumn={selectedColumn?.columnName || null}
          onColumnSelect={(columnName, columnLabel) =>
            setSelectedColumn({ columnName, columnLabel })
          }
        />
      </div>

      {/* 우측: 카테고리 값 관리 (70%) */}
      <div className="w-[70%]">
        {selectedColumn ? (
          <CategoryValueManager
            tableName={tableName}
            columnName={selectedColumn.columnName}
            columnLabel={selectedColumn.columnLabel}
            menuId={menuId}
          />
        ) : (
          <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>
  );
}