ERP-node/frontend/components/admin/CodeFormModal.tsx

"use client";

import { useState, useEffect } from "react";
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import { Label } from "@/components/ui/label";
import { Switch } from "@/components/ui/switch";
import { useCommonCode } from "@/hooks/useCommonCode";
// import { useMultiLang } from "@/hooks/useMultiLang"; // 무한 루프 방지를 위해 임시 제거
import { LoadingSpinner } from "@/components/common/LoadingSpinner";

interface CodeFormModalProps {
  isOpen: boolean;
  onClose: () => void;
  categoryCode: string;
  editingCodeValue?: string;
}

export function CodeFormModal({ isOpen, onClose, categoryCode, editingCodeValue }: CodeFormModalProps) {
  // const { getText } = useMultiLang(); // 무한 루프 방지를 위해 임시 제거
  const { codes, createCode, updateCode } = useCommonCode();

  // 폼 상태
  const [formData, setFormData] = useState({
    codeValue: "",
    codeName: "",
    codeNameEng: "",
    description: "",
    sortOrder: 0,
    isActive: true,
  });

  const [loading, setLoading] = useState(false);
  const [errors, setErrors] = useState<Record<string, string>>({});

  // 수정 모드일 때 기존 데이터 로드
  useEffect(() => {
    if (editingCodeValue && codes.length > 0) {
      const code = codes.find((c) => c.code_value === editingCodeValue);
      if (code) {
        setFormData({
          codeValue: code.code_value,
          codeName: code.code_name,
          codeNameEng: code.code_name_eng || "",
          description: code.description || "",
          sortOrder: code.sort_order,
          isActive: code.is_active === "Y",
        });
      }
    } else {
      // 새 코드일 때 초기값
      setFormData({
        codeValue: "",
        codeName: "",
        codeNameEng: "",
        description: "",
        sortOrder: 0,
        isActive: true,
      });
    }
    setErrors({});
  }, [editingCodeValue, codes, isOpen]);

  // 실시간 필드 검증
  const validateField = (fieldName: string, value: string) => {
    const newErrors = { ...errors };

    switch (fieldName) {
      case "codeValue":
        if (!value.trim()) {
          newErrors.codeValue = "필수 입력 항목입니다.";
        } else if (value.length > 50) {
          newErrors.codeValue = "코드값은 50자 이하로 입력해주세요.";
        } else if (!/^[A-Z0-9_]+$/.test(value)) {
          newErrors.codeValue = "대문자, 숫자, 언더스코어(_)만 사용 가능합니다.";
        } else {
          delete newErrors.codeValue;
        }
        break;

      case "codeName":
        if (!value.trim()) {
          newErrors.codeName = "필수 입력 항목입니다.";
        } else if (value.length > 100) {
          newErrors.codeName = "코드명은 100자 이하로 입력해주세요.";
        } else {
          delete newErrors.codeName;
        }
        break;

      case "codeNameEng":
        if (value && value.length > 100) {
          newErrors.codeNameEng = "영문명은 100자 이하로 입력해주세요.";
        } else {
          delete newErrors.codeNameEng;
        }
        break;

      case "description":
        if (value && value.length > 500) {
          newErrors.description = "설명은 500자 이하로 입력해주세요.";
        } else {
          delete newErrors.description;
        }
        break;
    }

    setErrors(newErrors);
  };

  // 전체 폼 검증
  const validateForm = () => {
    const newErrors: Record<string, string> = {};

    // 필수 필드 검증
    if (!formData.codeValue.trim()) {
      newErrors.codeValue = "필수 입력 항목입니다.";
    } else if (!/^[A-Z0-9_]+$/.test(formData.codeValue)) {
      newErrors.codeValue = "대문자, 숫자, 언더스코어(_)만 사용 가능합니다.";
    }

    if (!formData.codeName.trim()) {
      newErrors.codeName = "필수 입력 항목입니다.";
    }

    // 중복 검사 (신규 생성 시)
    if (!editingCodeValue) {
      const existingCode = codes.find((c) => c.code_value === formData.codeValue);
      if (existingCode) {
        newErrors.codeValue = "이미 존재하는 코드값입니다.";
      }
    }

    setErrors(newErrors);
    return Object.keys(newErrors).length === 0;
  };

  // 폼 제출 핸들러
  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();

    if (!validateForm()) return;

    setLoading(true);

    try {
      if (editingCodeValue) {
        // 수정
        await updateCode(categoryCode, editingCodeValue, {
          codeName: formData.codeName,
          codeNameEng: formData.codeNameEng,
          description: formData.description,
          sortOrder: formData.sortOrder,
          isActive: formData.isActive,
        });
      } else {
        // 생성
        await createCode(categoryCode, {
          codeValue: formData.codeValue,
          codeName: formData.codeName,
          codeNameEng: formData.codeNameEng,
          description: formData.description,
          sortOrder: formData.sortOrder,
        });
      }

      onClose();
    } catch (error) {
      console.error("코드 저장 오류:", error);
      // 에러 처리는 useCommonCode 훅에서 처리됨
    } finally {
      setLoading(false);
    }
  };

  // 입력값 변경 핸들러 (실시간 검증 포함)
  const handleChange = (field: string, value: any) => {
    setFormData((prev) => ({ ...prev, [field]: value }));

    // 실시간 검증 (문자열 필드만)
    if (typeof value === "string") {
      validateField(field, value);
    } else {
      // 에러 제거 (숫자, 불린 필드)
      if (errors[field]) {
        setErrors((prev) => ({ ...prev, [field]: "" }));
      }
    }
  };

  return (
    <Dialog open={isOpen} onOpenChange={onClose}>
      <DialogContent className="sm:max-w-[500px]">
        <DialogHeader>
          <DialogTitle>{editingCodeValue ? "코드 수정" : "새 코드"}</DialogTitle>
        </DialogHeader>

        <form onSubmit={handleSubmit} className="space-y-4">
          {/* 코드값 */}
          <div className="space-y-2">
            <Label htmlFor="codeValue">{"코드값"} *</Label>
            <Input
              id="codeValue"
              value={formData.codeValue}
              onChange={(e) => handleChange("codeValue", e.target.value.toUpperCase())}
              disabled={!!editingCodeValue || loading}
              placeholder={"코드값을 입력하세요 (예: USER_ACTIVE)"}
              className={errors.codeValue ? "border-red-500" : ""}
            />
            {errors.codeValue && <p className="text-sm text-red-600">{errors.codeValue}</p>}
          </div>

          {/* 코드명 */}
          <div className="space-y-2">
            <Label htmlFor="codeName">{"코드명"} *</Label>
            <Input
              id="codeName"
              value={formData.codeName}
              onChange={(e) => handleChange("codeName", e.target.value)}
              disabled={loading}
              placeholder={"코드명을 입력하세요"}
              className={errors.codeName ? "border-red-500" : ""}
            />
            {errors.codeName && <p className="text-sm text-red-600">{errors.codeName}</p>}
          </div>

          {/* 영문명 */}
          <div className="space-y-2">
            <Label htmlFor="codeNameEng">{"코드 영문명"}</Label>
            <Input
              id="codeNameEng"
              value={formData.codeNameEng}
              onChange={(e) => handleChange("codeNameEng", e.target.value)}
              disabled={loading}
              placeholder={"코드 영문명을 입력하세요"}
              className={errors.codeNameEng ? "border-red-500" : ""}
            />
            {errors.codeNameEng && <p className="text-sm text-red-600">{errors.codeNameEng}</p>}
          </div>

          {/* 설명 */}
          <div className="space-y-2">
            <Label htmlFor="description">{"설명"}</Label>
            <Textarea
              id="description"
              value={formData.description}
              onChange={(e) => handleChange("description", e.target.value)}
              disabled={loading}
              placeholder={"설명을 입력하세요"}
              rows={3}
              className={errors.description ? "border-red-500" : ""}
            />
            {errors.description && <p className="text-sm text-red-600">{errors.description}</p>}
          </div>

          {/* 정렬 순서 */}
          <div className="space-y-2">
            <Label htmlFor="sortOrder">{"정렬 순서"}</Label>
            <Input
              id="sortOrder"
              type="number"
              value={formData.sortOrder}
              onChange={(e) => handleChange("sortOrder", parseInt(e.target.value) || 0)}
              disabled={loading}
              min={0}
            />
          </div>

          {/* 활성 상태 (수정 시에만) */}
          {editingCodeValue && (
            <div className="flex items-center space-x-2">
              <Switch
                id="isActive"
                checked={formData.isActive}
                onCheckedChange={(checked) => handleChange("isActive", checked)}
                disabled={loading}
              />
              <Label htmlFor="isActive">{"활성"}</Label>
            </div>
          )}

          {/* 버튼 */}
          <div className="flex justify-end space-x-2 pt-4">
            <Button type="button" variant="outline" onClick={onClose} disabled={loading}>
              {"취소"}
            </Button>
            <Button type="submit" disabled={loading || Object.keys(errors).length > 0}>
              {loading ? (
                <>
                  <LoadingSpinner size="sm" className="mr-2" />
                  {editingCodeValue ? "수정 중..." : "등록 중..."}
                </>
              ) : editingCodeValue ? (
                "코드 수정"
              ) : (
                "코드 등록"
              )}
            </Button>
          </div>
        </form>
      </DialogContent>
    </Dialog>
  );
}