"use client";

/**
 * ColumnPicker — 테이블의 컬럼 dropdown (cp 톤, CPSelect 기반).
 *
 * tableName 이 있으면 useDbColumns 로 컬럼 목록 자동 로드. 현재 값이 목록에 없으면
 * "사용자 정의" option 으로 보존. tableName 미설정 시 free-text input 으로 폴백.
 *
 * 사용처: stats / chart / cardList / groupedTable 의 컬럼 선택 (집계 컬럼,
 * 그룹 컬럼, 정렬 컬럼, 필드 매핑, 필터 컬럼 등).
 */

import React from "react";
import { CPSelect, CPText } from "@/components/v2/config-panels/_shared/cp";
import {
  useDbColumns,
  type DbColumnOption,
} from "@/lib/registry/components/common/useDbColumns";

export interface ColumnPickerProps {
  tableName?: string;
  value?: string;
  onChange: (v: string | undefined) => void;
  placeholder?: string;
  /** 외부에서 미리 받은 컬럼 (tableName 없을 때 fallback 옵션) */
  columnOptions?: DbColumnOption[];
  /** 필터 옵션 — 특정 data_type 만 허용 (예: numeric 만) */
  filter?: (col: DbColumnOption) => boolean;
}

export const ColumnPicker: React.FC<ColumnPickerProps> = ({
  tableName,
  value,
  onChange,
  placeholder = "컬럼 선택…",
  columnOptions,
  filter,
}) => {
  const fromHook = useDbColumns(tableName);
  const cols: DbColumnOption[] = React.useMemo(() => {
    const base =
      columnOptions && columnOptions.length > 0
        ? columnOptions
        : fromHook.columns;
    return filter ? base.filter(filter) : base;
  }, [columnOptions, fromHook.columns, filter]);
  const loading = fromHook.loading && cols.length === 0;
  const hasCols = cols.length > 0;
  const currentValid = !value || cols.some((c) => c.value === value);

  if (!hasCols) {
    // 테이블 미설정 / 컬럼 없음 — free-text 폴백
    return (
      <CPText
        value={value ?? ""}
        onChange={(v) => onChange(v || undefined)}
        placeholder={loading ? "컬럼 로딩 중…" : tableName ? "컬럼 없음" : placeholder}
      />
    );
  }

  return (
    <CPSelect
      value={currentValid ? value ?? "" : (value as string)}
      onChange={(v) => onChange(v || undefined)}
      placeholder={loading ? "로딩…" : placeholder}
    >
      <option value="">{placeholder}</option>
      {!currentValid && value && (
        <option value={value}>{value} (사용자 정의)</option>
      )}
      {cols.map((c) => (
        <option key={c.value} value={c.value}>
          {c.label && c.label !== c.value
            ? `${c.label} (${c.value})`
            : c.value}
        </option>
      ))}
    </CPSelect>
  );
};
