"use client";

import React, { useState, useEffect } from "react";
import { Label } from "@/components/ui/label";
import { Input } from "@/components/ui/input";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Checkbox } from "@/components/ui/checkbox";
import { Textarea } from "@/components/ui/textarea";
import { TextTypeConfig } from "@/types/screen";
import { getAvailableNumberingRules, getAvailableNumberingRulesForScreen } from "@/lib/api/numberingRule";
import { NumberingRuleConfig } from "@/types/numbering-rule";

interface TextTypeConfigPanelProps {
  config: TextTypeConfig;
  onConfigChange: (config: TextTypeConfig) => void;
  tableName?: string; // 화면의 테이블명 (선택)
  menuObjid?: number; // 메뉴 objid (선택) - 사용자가 선택한 부모 메뉴
}

export const TextTypeConfigPanel: React.FC<TextTypeConfigPanelProps> = ({
  config,
  onConfigChange,
  tableName,
  menuObjid,
}) => {
  console.log("🔍 TextTypeConfigPanel 마운트:", { tableName, menuObjid, config });
  
  // 기본값이 설정된 config 사용
  const safeConfig = {
    minLength: undefined,
    maxLength: undefined,
    pattern: "",
    format: "none" as const,
    placeholder: "",
    defaultValue: "",
    multiline: false,
    autoInput: false,
    autoValueType: "current_datetime" as const,
    customValue: "",
    numberingRuleId: "",
    ...config,
  };

  // 채번 규칙 목록 상태
  const [numberingRules, setNumberingRules] = useState<NumberingRuleConfig[]>([]);
  const [loadingRules, setLoadingRules] = useState(false);
  
  // 부모 메뉴 목록 상태 (채번규칙 사용을 위한 선택)
  const [parentMenus, setParentMenus] = useState<any[]>([]);
  const [selectedMenuObjid, setSelectedMenuObjid] = useState<number | undefined>(menuObjid);

  // 로컬 상태로 실시간 입력 관리
  const [localValues, setLocalValues] = useState({
    minLength: safeConfig.minLength?.toString() || "",
    maxLength: safeConfig.maxLength?.toString() || "",
    pattern: safeConfig.pattern,
    format: safeConfig.format,
    placeholder: safeConfig.placeholder,
    defaultValue: safeConfig.defaultValue,
    multiline: safeConfig.multiline,
    autoInput: safeConfig.autoInput,
    autoValueType: safeConfig.autoValueType,
    customValue: safeConfig.customValue,
    numberingRuleId: safeConfig.numberingRuleId,
  });

  // 부모 메뉴 목록 로드 (최상위 메뉴 또는 레벨 2 메뉴)
  useEffect(() => {
    const loadParentMenus = async () => {
      try {
        const { apiClient } = await import("@/lib/api/client");
        
        // 관리자 메뉴와 사용자 메뉴 모두 가져오기
        const [adminResponse, userResponse] = await Promise.all([
          apiClient.get("/admin/menus", { params: { menuType: "0" } }),
          apiClient.get("/admin/menus", { params: { menuType: "1" } })
        ]);
        
        const allMenus = [
          ...(adminResponse.data?.data || []),
          ...(userResponse.data?.data || [])
        ];
        
        // 레벨 2 이하 메뉴만 선택 가능 (부모가 있는 메뉴)
        const parentMenuList = allMenus.filter((menu: any) => {
          const level = menu.lev || menu.LEV || 0;
          return level >= 2; // 레벨 2 이상만 표시 (형제 메뉴가 있을 가능성)
        });
        
        setParentMenus(parentMenuList);
        console.log("✅ 부모 메뉴 목록 로드:", parentMenuList.length);
      } catch (error) {
        console.error("❌ 부모 메뉴 목록 로드 실패:", error);
      }
    };
    
    loadParentMenus();
  }, []);
  
  // 채번 규칙 목록 로드 (선택된 메뉴 기준)
  useEffect(() => {
    const loadRules = async () => {
      console.log("🔄 채번 규칙 로드 시작:", {
        autoValueType: localValues.autoValueType,
        selectedMenuObjid,
        tableName,
      });
      
      // 메뉴를 선택하지 않으면 로드하지 않음
      if (!selectedMenuObjid) {
        console.warn("⚠️ 메뉴를 선택해야 채번 규칙을 조회할 수 있습니다");
        setNumberingRules([]);
        return;
      }
      
      setLoadingRules(true);
      try {
        // 선택된 메뉴의 채번 규칙 조회 (메뉴 스코프)
        console.log("📋 메뉴 기반 채번 규칙 조회 API 호출:", { menuObjid: selectedMenuObjid });
        const response = await getAvailableNumberingRules(selectedMenuObjid);
        console.log("📋 API 응답:", response);

        if (response.success && response.data) {
          setNumberingRules(response.data);
          console.log("✅ 채번 규칙 로드 성공:", {
            count: response.data.length,
            rules: response.data.map((r: any) => ({
              ruleId: r.ruleId,
              ruleName: r.ruleName,
              menuObjid: selectedMenuObjid,
            })),
          });
        } else {
          console.warn("⚠️ 채번 규칙 조회 실패:", response.error);
          setNumberingRules([]);
        }
      } catch (error) {
        console.error("❌ 채번 규칙 목록 로드 실패:", error);
        setNumberingRules([]);
      } finally {
        setLoadingRules(false);
      }
    };

    // autoValueType이 numbering_rule일 때만 로드
    if (localValues.autoValueType === "numbering_rule") {
      console.log("✅ autoValueType === 'numbering_rule', 규칙 로드 시작");
      loadRules();
    } else {
      console.log("⏭️ autoValueType !== 'numbering_rule', 규칙 로드 스킵:", localValues.autoValueType);
    }
  }, [localValues.autoValueType, selectedMenuObjid]);

  // config가 변경될 때 로컬 상태 동기화
  useEffect(() => {
    setLocalValues({
      minLength: safeConfig.minLength?.toString() || "",
      maxLength: safeConfig.maxLength?.toString() || "",
      pattern: safeConfig.pattern,
      format: safeConfig.format,
      placeholder: safeConfig.placeholder,
      defaultValue: safeConfig.defaultValue,
      multiline: safeConfig.multiline,
      autoInput: safeConfig.autoInput,
      autoValueType: safeConfig.autoValueType,
      customValue: safeConfig.customValue,
      numberingRuleId: safeConfig.numberingRuleId,
    });
  }, [
    safeConfig.minLength,
    safeConfig.maxLength,
    safeConfig.pattern,
    safeConfig.format,
    safeConfig.placeholder,
    safeConfig.defaultValue,
    safeConfig.multiline,
    safeConfig.autoInput,
    safeConfig.autoValueType,
    safeConfig.customValue,
    safeConfig.numberingRuleId,
  ]);

  const updateConfig = (key: keyof TextTypeConfig, value: any) => {
    // 로컬 상태 즉시 업데이트
    if (key === "minLength" || key === "maxLength") {
      setLocalValues((prev) => ({ ...prev, [key]: value?.toString() || "" }));
    } else {
      setLocalValues((prev) => ({ ...prev, [key]: value }));
    }

    // 실제 config 업데이트 - 현재 로컬 상태를 기반으로 새 객체 생성 (safeConfig 기본값 덮어쓰기 방지)
    const currentValues = {
      minLength: key === "minLength" ? value : localValues.minLength ? Number(localValues.minLength) : undefined,
      maxLength: key === "maxLength" ? value : localValues.maxLength ? Number(localValues.maxLength) : undefined,
      pattern: key === "pattern" ? value : localValues.pattern,
      format: key === "format" ? value : localValues.format,
      placeholder: key === "placeholder" ? value : localValues.placeholder,
      defaultValue: key === "defaultValue" ? value : localValues.defaultValue,
      multiline: key === "multiline" ? value : localValues.multiline,
      autoInput: key === "autoInput" ? value : localValues.autoInput,
      autoValueType: key === "autoValueType" ? value : localValues.autoValueType,
      customValue: key === "customValue" ? value : localValues.customValue,
      numberingRuleId: key === "numberingRuleId" ? value : localValues.numberingRuleId,
    };

    const newConfig = JSON.parse(JSON.stringify(currentValues));

    setTimeout(() => {
      onConfigChange(newConfig);
    }, 0);
  };

  return (
    <div className="space-y-4">
      {/* 입력 형식 */}
      <div>
        <Label htmlFor="format" className="text-sm font-medium">
          입력 형식
        </Label>
        <Select value={localValues.format} onValueChange={(value) => updateConfig("format", value)}>
          <SelectTrigger className="mt-1 h-6 w-full px-2 py-0 text-xs">
            <SelectValue placeholder="입력 형식 선택" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="none">제한 없음</SelectItem>
            <SelectItem value="email">이메일</SelectItem>
            <SelectItem value="phone">전화번호</SelectItem>
            <SelectItem value="url">URL</SelectItem>
            <SelectItem value="korean">한글만</SelectItem>
            <SelectItem value="english">영어만</SelectItem>
            <SelectItem value="alphanumeric">영숫자만</SelectItem>
            <SelectItem value="numeric">숫자만</SelectItem>
          </SelectContent>
        </Select>
      </div>

      {/* 길이 제한 */}
      <div className="grid grid-cols-2 gap-3">
        <div>
          <Label htmlFor="minLength" className="text-sm font-medium">
            최소 길이
          </Label>
          <Input
            id="minLength"
            type="number"
            min="0"
            step="1"
            value={localValues.minLength}
            onChange={(e) => updateConfig("minLength", e.target.value ? Number(e.target.value) : undefined)}
            className="mt-1"
            placeholder="제한 없음"
          />
        </div>

        <div>
          <Label htmlFor="maxLength" className="text-sm font-medium">
            최대 길이
          </Label>
          <Input
            id="maxLength"
            type="number"
            min="0"
            step="1"
            value={localValues.maxLength}
            onChange={(e) => updateConfig("maxLength", e.target.value ? Number(e.target.value) : undefined)}
            className="mt-1"
            placeholder="제한 없음"
          />
        </div>
      </div>

      {/* 정규식 패턴 */}
      <div>
        <Label htmlFor="pattern" className="text-sm font-medium">
          정규식 패턴
        </Label>
        <Input
          id="pattern"
          value={localValues.pattern}
          onChange={(e) => updateConfig("pattern", e.target.value)}
          className="mt-1"
          placeholder="예: ^[0-9]{3}-[0-9]{4}-[0-9]{4}$"
        />
        <div className="mt-1 text-xs text-muted-foreground">JavaScript 정규식 패턴을 입력하세요 (선택사항)</div>
      </div>

      {/* 플레이스홀더 */}
      <div>
        <Label htmlFor="placeholder" className="text-sm font-medium">
          플레이스홀더
        </Label>
        <Input
          id="placeholder"
          value={localValues.placeholder}
          onChange={(e) => updateConfig("placeholder", e.target.value)}
          placeholder="입력 힌트 텍스트"
          className="mt-1"
        />
      </div>

      {/* 기본값 */}
      <div>
        <Label htmlFor="defaultValue" className="text-sm font-medium">
          기본값
        </Label>
        <Input
          id="defaultValue"
          value={localValues.defaultValue}
          onChange={(e) => updateConfig("defaultValue", e.target.value)}
          placeholder="기본 입력값"
          className="mt-1"
        />
      </div>

      {/* 자동입력 설정 */}
      <div className="space-y-3">
        <div className="flex items-center justify-between">
          <Label htmlFor="autoInput" className="text-sm font-medium">
            자동입력 활성화
          </Label>
          <Checkbox
            id="autoInput"
            checked={localValues.autoInput}
            onCheckedChange={(checked) => updateConfig("autoInput", !!checked)}
          />
        </div>

        {localValues.autoInput && (
          <div className="border-primary/20 space-y-3 border-l-2 pl-4">
            <div>
              <Label htmlFor="autoValueType" className="text-sm font-medium">
                자동값 타입
              </Label>
              <Select value={localValues.autoValueType} onValueChange={(value) => updateConfig("autoValueType", value)}>
                <SelectTrigger className="mt-1 h-6 w-full px-2 py-0 text-xs">
                  <SelectValue placeholder="자동값 타입 선택" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="current_datetime">현재 날짜시간</SelectItem>
                  <SelectItem value="current_date">현재 날짜</SelectItem>
                  <SelectItem value="current_time">현재 시간</SelectItem>
                  <SelectItem value="current_user">현재 사용자</SelectItem>
                  <SelectItem value="uuid">고유 ID (UUID)</SelectItem>
                  <SelectItem value="sequence">순번</SelectItem>
                  <SelectItem value="numbering_rule">채번 규칙</SelectItem>
                  <SelectItem value="custom">사용자 정의</SelectItem>
                </SelectContent>
              </Select>
            </div>

            {(() => {
              console.log("🔍 메뉴 선택 UI 렌더링 체크:", {
                autoValueType: localValues.autoValueType,
                isNumberingRule: localValues.autoValueType === "numbering_rule",
                parentMenusCount: parentMenus.length,
                selectedMenuObjid,
              });
              return null;
            })()}
            
            {localValues.autoValueType === "numbering_rule" && (
              <>
                {/* 부모 메뉴 선택 */}
                <div>
                  <Label htmlFor="parentMenu" className="text-sm font-medium">
                    대상 메뉴 선택 <span className="text-destructive">*</span>
                  </Label>
                  <Select
                    value={selectedMenuObjid?.toString() || ""}
                    onValueChange={(value) => setSelectedMenuObjid(parseInt(value))}
                  >
                    <SelectTrigger className="mt-1 h-8 w-full px-2 py-0 text-xs">
                      <SelectValue placeholder="채번 규칙을 사용할 메뉴 선택" />
                    </SelectTrigger>
                    <SelectContent>
                      {parentMenus.length === 0 ? (
                        <SelectItem value="no-menus" disabled>
                          사용 가능한 메뉴가 없습니다
                        </SelectItem>
                      ) : (
                        parentMenus.map((menu) => {
                          const objid = menu.objid || menu.OBJID;
                          const menuName = menu.menu_name_kor || menu.MENU_NAME_KOR;
                          return (
                            <SelectItem key={objid} value={objid.toString()}>
                              {menuName}
                            </SelectItem>
                          );
                        })
                      )}
                    </SelectContent>
                  </Select>
                  <p className="text-muted-foreground mt-1 text-[10px]">
                    이 필드가 어느 메뉴에서 사용될 것인지 선택하세요
                  </p>
                </div>

                {/* 채번 규칙 선택 */}
                <div>
                  <Label htmlFor="numberingRuleId" className="text-sm font-medium">
                    채번 규칙 선택 <span className="text-destructive">*</span>
                  </Label>
                  <Select
                    value={localValues.numberingRuleId}
                    onValueChange={(value) => updateConfig("numberingRuleId", value)}
                    disabled={loadingRules || !selectedMenuObjid}
                  >
                    <SelectTrigger className="mt-1 h-8 w-full px-2 py-0 text-xs">
                      <SelectValue 
                        placeholder={
                          !selectedMenuObjid 
                            ? "먼저 메뉴를 선택하세요" 
                            : loadingRules 
                            ? "규칙 로딩 중..." 
                            : "채번 규칙 선택"
                        } 
                      />
                    </SelectTrigger>
                    <SelectContent>
                      {numberingRules.length === 0 ? (
                        <SelectItem value="no-rules" disabled>
                          {!selectedMenuObjid 
                            ? "메뉴를 먼저 선택하세요" 
                            : "사용 가능한 규칙이 없습니다"}
                        </SelectItem>
                      ) : (
                        numberingRules.map((rule) => (
                          <SelectItem key={rule.ruleId} value={rule.ruleId}>
                            {rule.ruleName} ({rule.ruleId})
                          </SelectItem>
                        ))
                      )}
                    </SelectContent>
                  </Select>
                  <p className="text-muted-foreground mt-1 text-[10px]">
                    선택한 메뉴와 형제 메뉴에서 사용 가능한 채번 규칙만 표시됩니다
                  </p>
                </div>
              </>
            )}

            {localValues.autoValueType === "custom" && (
              <div>
                <Label htmlFor="customValue" className="text-sm font-medium">
                  사용자 정의 값
                </Label>
                <Input
                  id="customValue"
                  value={localValues.customValue}
                  onChange={(e) => updateConfig("customValue", e.target.value)}
                  placeholder="사용자 정의 값을 입력하세요"
                  className="mt-1"
                />
              </div>
            )}

            <div className="bg-accent rounded-md p-3">
              <div className="text-sm font-medium text-primary">자동입력 안내</div>
              <div className="mt-1 text-xs text-primary">
                자동입력이 활성화되면 해당 필드는 읽기 전용이 되며, 설정된 타입에 따라 자동으로 값이 입력됩니다.
              </div>
            </div>
          </div>
        )}
      </div>

      {/* 여러 줄 입력 */}
      <div className="flex items-center justify-between">
        <Label htmlFor="multiline" className="text-sm font-medium">
          여러 줄 입력 (textarea)
        </Label>
        <Checkbox
          id="multiline"
          checked={localValues.multiline}
          onCheckedChange={(checked) => updateConfig("multiline", !!checked)}
        />
      </div>

      {/* 형식별 안내 메시지 */}
      {localValues.format !== "none" && (
        <div className="bg-accent rounded-md p-3">
          <div className="text-sm font-medium text-primary">형식 안내</div>
          <div className="mt-1 text-xs text-primary">
            {localValues.format === "email" && "유효한 이메일 주소를 입력해야 합니다 (예: user@example.com)"}
            {localValues.format === "phone" && "전화번호 형식으로 입력해야 합니다 (예: 010-1234-5678)"}
            {localValues.format === "url" && "유효한 URL을 입력해야 합니다 (예: https://example.com)"}
            {localValues.format === "korean" && "한글만 입력할 수 있습니다"}
            {localValues.format === "english" && "영어만 입력할 수 있습니다"}
            {localValues.format === "alphanumeric" && "영문자와 숫자만 입력할 수 있습니다"}
            {localValues.format === "numeric" && "숫자만 입력할 수 있습니다"}
          </div>
        </div>
      )}
    </div>
  );
};

export default TextTypeConfigPanel;
