"use client";

import React from "react";
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
import { NumberingRuleDesigner } from "./NumberingRuleDesigner";
import { NumberingRuleConfig } from "@/types/numbering-rule";

/**
 * NumberingRuleCreateDialog — 스튜디오 InvFieldConfigPanel 에서
 * "새 규칙 만들기" CTA 로 호출되는 모달.
 *
 * NumberingRuleDesigner 의 좌측 컬럼 목록을 hide (`lockedColumn`) 하고
 * 우측 디자인/저장 영역만 노출. 저장 완료 시 부모 (InvFieldConfigPanel) 가
 * 새 ruleId 를 받아 rules 목록 refresh + 자동 선택.
 */
export interface NumberingRuleCreateDialogProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  tableName: string;
  columnName?: string;
  /**
   * 저장 완료 시 호출. 부모 측에서 rules refresh + numberingRuleId 자동 선택.
   */
  onCreated?: (rule: NumberingRuleConfig) => void;
}

export const NumberingRuleCreateDialog: React.FC<NumberingRuleCreateDialogProps> = ({
  open,
  onOpenChange,
  tableName,
  columnName,
  onCreated,
}) => {
  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="flex h-[80vh] max-w-4xl flex-col gap-0 overflow-hidden p-0">
        <DialogHeader className="border-b border-border px-4 py-3">
          <DialogTitle className="text-sm">
            새 채번 규칙 만들기 — {tableName}
            {columnName ? `.${columnName}` : ""}
          </DialogTitle>
        </DialogHeader>
        <div className="min-h-0 flex-1">
          <NumberingRuleDesigner
            currentTableName={tableName}
            lockedColumn={columnName ? { tableName, columnName } : undefined}
            onSave={(rule) => {
              onCreated?.(rule);
              onOpenChange(false);
            }}
          />
        </div>
      </DialogContent>
    </Dialog>
  );
};
