"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;
  tableName: string; // 현재 화면의 테이블
}

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

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

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