ERP-node/frontend/lib/meta-components/auto-generate/AutoGenerateModal.tsx

"use client";

import { useState, useMemo, useEffect } from "react";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { Checkbox } from "@/components/ui/checkbox";
import { Label } from "@/components/ui/label";
import { Badge } from "@/components/ui/badge";
import { Separator } from "@/components/ui/separator";
import { cn } from "@/lib/utils";
import {
  Table,
  FormInput,
  Columns,
  LayoutGrid,
  X,
} from "lucide-react";

// 자동생성 설정
export interface AutoGenerateConfig {
  templateType: "list" | "form" | "master-detail" | "card";
  selectedColumns: string[];
  includeSearch: boolean;
  includeCrud: boolean; // CRUD 버튼 포함 여부
  includeModal: boolean; // 등록/수정 모달 포함 여부
}

// 컬럼 정보
export interface AutoGenerateColumn {
  columnName: string;
  label: string;
  webType: string;
  required: boolean;
}

// 모달 props
export interface AutoGenerateModalProps {
  isOpen: boolean;
  onClose: () => void;
  tableName: string;
  tableLabel: string;
  columns: AutoGenerateColumn[];
  onGenerate: (config: AutoGenerateConfig) => void;
}

// 시스템 컬럼 목록
const SYSTEM_COLUMNS = [
  "created_by",
  "updated_by",
  "created_date",
  "updated_date",
  "created_at",
  "updated_at",
  "writer",
  "company_code",
];

// 시스템 컬럼 판별
function isSystemColumn(columnName: string): boolean {
  return SYSTEM_COLUMNS.includes(columnName.toLowerCase());
}

// 템플릿 타입 정의
interface TemplateOption {
  id: AutoGenerateConfig["templateType"];
  label: string;
  description: string;
  icon: React.ReactNode;
}

const TEMPLATES: TemplateOption[] = [
  {
    id: "list",
    label: "목록형",
    description: "검색 + 테이블 + CRUD 버튼",
    icon: (
      <div className="flex flex-col items-center justify-center gap-0.5 text-[10px] text-muted-foreground">
        <div className="flex gap-0.5">
          <div className="h-1 w-6 bg-current" />
        </div>
        <div className="flex gap-0.5">
          <div className="h-1 w-6 bg-current" />
        </div>
        <div className="flex gap-0.5">
          <div className="h-1 w-6 bg-current" />
        </div>
      </div>
    ),
  },
  {
    id: "form",
    label: "폼형",
    description: "입력 필드 + 저장 버튼",
    icon: (
      <div className="flex flex-col items-center justify-center gap-0.5 text-[10px] text-muted-foreground">
        <div className="flex gap-0.5">
          <div className="h-1 w-3 bg-current" />
          <div className="h-1 w-3 bg-current" />
        </div>
        <div className="flex gap-0.5">
          <div className="h-1 w-3 bg-current" />
          <div className="h-1 w-3 bg-current" />
        </div>
      </div>
    ),
  },
  {
    id: "master-detail",
    label: "마스터-디테일",
    description: "좌측 목록 + 우측 상세",
    icon: (
      <div className="flex items-center justify-center gap-0.5 text-[10px] text-muted-foreground">
        <div className="flex flex-col gap-0.5">
          <div className="h-1 w-2 bg-current" />
          <div className="h-1 w-2 bg-current" />
          <div className="h-1 w-2 bg-current" />
        </div>
        <div className="h-4 w-[1px] bg-current" />
        <div className="flex flex-col gap-0.5">
          <div className="h-1 w-2 bg-current" />
          <div className="h-1 w-2 bg-current" />
        </div>
      </div>
    ),
  },
  {
    id: "card",
    label: "카드형",
    description: "카드 그리드 뷰",
    icon: (
      <div className="flex flex-wrap items-center justify-center gap-0.5 text-[10px] text-muted-foreground">
        <div className="h-2 w-2 border border-current" />
        <div className="h-2 w-2 border border-current" />
        <div className="h-2 w-2 border border-current" />
      </div>
    ),
  },
];

export function AutoGenerateModal({
  isOpen,
  onClose,
  tableName,
  tableLabel,
  columns,
  onGenerate,
}: AutoGenerateModalProps) {
  // 템플릿 타입 선택
  const [templateType, setTemplateType] = useState<AutoGenerateConfig["templateType"]>("list");

  // 컬럼 선택 (기본: 시스템 컬럼 제외한 모든 컬럼 선택)
  const [selectedColumns, setSelectedColumns] = useState<Set<string>>(() => {
    const initial = new Set<string>();
    columns.forEach((col) => {
      if (!isSystemColumn(col.columnName)) {
        initial.add(col.columnName);
      }
    });
    return initial;
  });

  // 모달이 열릴 때마다 선택 상태 리셋 (columns가 변경되면)
  useEffect(() => {
    if (isOpen) {
      const initial = new Set<string>();
      columns.forEach((col) => {
        if (!isSystemColumn(col.columnName)) {
          initial.add(col.columnName);
        }
      });
      setSelectedColumns(initial);
      setTemplateType("list");
    }
  }, [isOpen, columns]);

  // 옵션
  const [includeSearch, setIncludeSearch] = useState(true);
  const [includeCrud, setIncludeCrud] = useState(true);
  const [includeModal, setIncludeModal] = useState(true);

  // 컬럼 체크박스 토글
  const toggleColumn = (columnName: string) => {
    setSelectedColumns((prev) => {
      const next = new Set(prev);
      if (next.has(columnName)) {
        next.delete(columnName);
      } else {
        next.add(columnName);
      }
      return next;
    });
  };

  // 전체 선택/해제
  const toggleAll = () => {
    if (selectedColumns.size === columns.length) {
      setSelectedColumns(new Set());
    } else {
      setSelectedColumns(new Set(columns.map((c) => c.columnName)));
    }
  };

  // 생성 핸들러
  const handleGenerate = () => {
    const config: AutoGenerateConfig = {
      templateType,
      selectedColumns: Array.from(selectedColumns),
      includeSearch,
      includeCrud,
      includeModal,
    };
    onGenerate(config);
  };

  // 선택된 컬럼 개수
  const selectedCount = selectedColumns.size;

  return (
    <Dialog open={isOpen} onOpenChange={onClose}>
      <DialogContent className="max-w-[95vw] sm:max-w-[600px]">
        <DialogHeader>
          <DialogTitle className="text-base sm:text-lg">화면 자동 생성</DialogTitle>
          <DialogDescription className="text-xs sm:text-sm">
            테이블: <span className="font-medium text-foreground">{tableLabel || tableName}</span> ({tableName})
          </DialogDescription>
        </DialogHeader>

        <div className="space-y-4 sm:space-y-5">
          {/* 템플릿 선택 */}
          <div>
            <Label className="text-xs font-medium sm:text-sm">어떤 형태로 만들까요?</Label>
            <div className="mt-2 grid grid-cols-2 gap-2 sm:grid-cols-4">
              {TEMPLATES.map((template) => (
                <button
                  key={template.id}
                  type="button"
                  onClick={() => setTemplateType(template.id)}
                  className={cn(
                    "flex flex-col items-center justify-center gap-2 rounded-md border-2 p-3 transition-all hover:bg-accent",
                    templateType === template.id
                      ? "border-primary bg-primary/5"
                      : "border-border",
                  )}
                >
                  <div className="flex h-10 w-10 items-center justify-center rounded border border-border bg-background">
                    {template.icon}
                  </div>
                  <div className="text-center">
                    <div className="text-xs font-medium sm:text-sm">{template.label}</div>
                    <div className="text-[10px] text-muted-foreground sm:text-xs">
                      {template.description}
                    </div>
                  </div>
                </button>
              ))}
            </div>
          </div>

          <Separator />

          {/* 컬럼 선택 */}
          <div>
            <div className="mb-2 flex items-center justify-between">
              <Label className="text-xs font-medium sm:text-sm">
                포함할 컬럼 ({selectedCount}/{columns.length})
              </Label>
              <Button
                type="button"
                variant="ghost"
                size="sm"
                onClick={toggleAll}
                className="h-7 text-xs"
              >
                {selectedColumns.size === columns.length ? "전체 해제" : "전체 선택"}
              </Button>
            </div>

            <div className="max-h-[200px] space-y-2 overflow-y-auto rounded-md border border-border p-3">
              {columns.map((col) => {
                const isSystem = isSystemColumn(col.columnName);
                return (
                  <div key={col.columnName} className="flex items-center gap-2">
                    <Checkbox
                      id={`col-${col.columnName}`}
                      checked={selectedColumns.has(col.columnName)}
                      onCheckedChange={() => toggleColumn(col.columnName)}
                    />
                    <Label
                      htmlFor={`col-${col.columnName}`}
                      className="flex flex-1 cursor-pointer items-center gap-2 text-xs sm:text-sm"
                    >
                      <span className={cn(isSystem && "text-muted-foreground")}>
                        {col.label || col.columnName}
                      </span>
                      <span className="text-[10px] text-muted-foreground">
                        ({col.columnName})
                      </span>
                      {col.required && (
                        <Badge variant="destructive" className="h-4 text-[9px]">
                          필수
                        </Badge>
                      )}
                      {isSystem && (
                        <Badge variant="secondary" className="h-4 text-[9px]">
                          숨김 권장
                        </Badge>
                      )}
                    </Label>
                  </div>
                );
              })}
            </div>
          </div>

          <Separator />

          {/* 옵션 */}
          <div>
            <Label className="text-xs font-medium sm:text-sm">옵션</Label>
            <div className="mt-2 space-y-2">
              {templateType === "list" || templateType === "master-detail" ? (
                <div className="flex items-center gap-2">
                  <Checkbox
                    id="includeSearch"
                    checked={includeSearch}
                    onCheckedChange={(checked) => setIncludeSearch(!!checked)}
                  />
                  <Label htmlFor="includeSearch" className="cursor-pointer text-xs sm:text-sm">
                    검색 바 포함
                  </Label>
                </div>
              ) : null}

              {templateType === "list" || templateType === "form" ? (
                <div className="flex items-center gap-2">
                  <Checkbox
                    id="includeCrud"
                    checked={includeCrud}
                    onCheckedChange={(checked) => setIncludeCrud(!!checked)}
                  />
                  <Label htmlFor="includeCrud" className="cursor-pointer text-xs sm:text-sm">
                    CRUD 버튼 포함 (등록/수정/삭제)
                  </Label>
                </div>
              ) : null}

              {templateType === "list" ? (
                <div className="flex items-center gap-2">
                  <Checkbox
                    id="includeModal"
                    checked={includeModal}
                    onCheckedChange={(checked) => setIncludeModal(!!checked)}
                  />
                  <Label htmlFor="includeModal" className="cursor-pointer text-xs sm:text-sm">
                    등록/수정 모달 포함
                  </Label>
                </div>
              ) : null}
            </div>
          </div>
        </div>

        <DialogFooter className="gap-2 sm:gap-0">
          <Button
            variant="outline"
            onClick={onClose}
            className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
          >
            취소
          </Button>
          <Button
            onClick={handleGenerate}
            disabled={selectedCount === 0}
            className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
          >
            생성하기
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}