"use client";

/**
 * V2Input 설정 패널
 * 통합 입력 컴포넌트의 세부 설정을 관리합니다.
 */

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 { AutoGenerationType, AutoGenerationConfig } from "@/types/screen";
import { AutoGenerationUtils } from "@/lib/utils/autoGeneration";
import { getAvailableNumberingRules } from "@/lib/api/numberingRule";
import { NumberingRuleConfig } from "@/types/numbering-rule";

interface V2InputConfigPanelProps {
  config: Record<string, any>;
  onChange: (config: Record<string, any>) => void;
  menuObjid?: number;
}

export const V2InputConfigPanel: React.FC<V2InputConfigPanelProps> = ({ config, onChange, menuObjid }) => {
  const [numberingRules, setNumberingRules] = useState<NumberingRuleConfig[]>([]);
  const [loadingRules, setLoadingRules] = useState(false);
  const [parentMenus, setParentMenus] = useState<any[]>([]);
  const [loadingMenus, setLoadingMenus] = useState(false);
  const [selectedMenuObjid, setSelectedMenuObjid] = useState<number | undefined>(() => {
    return config.autoGeneration?.selectedMenuObjid || menuObjid;
  });

  const updateConfig = (field: string, value: any) => {
    onChange({ ...config, [field]: value });
  };

  useEffect(() => {
    const loadMenus = async () => {
      setLoadingMenus(true);
      try {
        const { apiClient } = await import("@/lib/api/client");
        const response = await apiClient.get("/admin/menus");
        if (response.data.success && response.data.data) {
          const allMenus = response.data.data;
          const level2UserMenus = allMenus.filter((menu: any) =>
            menu.menu_type === '1' && menu.lev === 2
          );
          setParentMenus(level2UserMenus);
        }
      } catch (error) {
        console.error("부모 메뉴 로드 실패:", error);
      } finally {
        setLoadingMenus(false);
      }
    };
    loadMenus();
  }, []);

  useEffect(() => {
    const loadRules = async () => {
      if (config.autoGeneration?.type !== "numbering_rule") return;
      if (!selectedMenuObjid) { setNumberingRules([]); return; }
      setLoadingRules(true);
      try {
        const response = await getAvailableNumberingRules(selectedMenuObjid);
        if (response.success && response.data) {
          setNumberingRules(response.data);
        }
      } catch (error) {
        console.error("채번 규칙 목록 로드 실패:", error);
        setNumberingRules([]);
      } finally {
        setLoadingRules(false);
      }
    };
    loadRules();
  }, [selectedMenuObjid, config.autoGeneration?.type]);

  return (
    <div className="space-y-1">
      {/* INPUT TYPE 섹션 */}
      <div className="border-b border-border/50 pb-3 mb-3">
        <h4 className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground py-2">INPUT TYPE</h4>
        <div className="flex items-center justify-between py-1.5">
          <span className="text-xs text-muted-foreground">입력 타입</span>
          <div className="w-[140px]">
            <Select
              value={config.inputType || config.type || "text"}
              onValueChange={(value) => updateConfig("inputType", value)}
            >
              <SelectTrigger className="h-7 text-xs">
                <SelectValue placeholder="입력 타입 선택" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="text">텍스트</SelectItem>
                <SelectItem value="number">숫자</SelectItem>
                <SelectItem value="password">비밀번호</SelectItem>
                <SelectItem value="textarea">여러 줄 텍스트</SelectItem>
                <SelectItem value="slider">슬라이더</SelectItem>
                <SelectItem value="color">색상 선택</SelectItem>
                <SelectItem value="numbering">채번 (자동생성)</SelectItem>
              </SelectContent>
            </Select>
          </div>
        </div>
      </div>

      {/* NUMBERING 섹션 - 채번 타입 전용 */}
      {config.inputType === "numbering" && (
        <div className="border-b border-border/50 pb-3 mb-3">
          <h4 className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground py-2">NUMBERING</h4>
          <div className="rounded-md border border-primary/20 bg-primary/5 p-2 mb-2">
            <p className="text-[10px] text-primary">
              채번 규칙은 <strong>테이블 관리</strong>에서 컬럼별로 설정됩니다.
              화면에 배치된 컬럼의 채번 규칙이 자동으로 적용됩니다.
            </p>
          </div>
          <div className="flex items-center justify-between py-1.5">
            <span className="text-xs text-muted-foreground">읽기전용 (권장)</span>
            <Checkbox
              checked={config.readonly !== false}
              onCheckedChange={(checked) => updateConfig("readonly", checked)}
            />
          </div>
          <p className="text-muted-foreground text-[10px] mt-0.5">
            채번 필드는 자동으로 생성되므로 읽기전용을 권장합니다
          </p>
        </div>
      )}

      {/* 채번 타입이 아닌 경우에만 추가 설정 표시 */}
      {config.inputType !== "numbering" && (
        <>
          {/* FORMAT 섹션 */}
          {(config.inputType === "text" || !config.inputType) && (
            <div className="border-b border-border/50 pb-3 mb-3">
              <h4 className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground py-2">FORMAT</h4>
              <div className="flex items-center justify-between py-1.5">
                <span className="text-xs text-muted-foreground">입력 형식</span>
                <div className="w-[140px]">
                  <Select value={config.format || "none"} onValueChange={(value) => updateConfig("format", value)}>
                    <SelectTrigger className="h-7 text-xs">
                      <SelectValue placeholder="형식 선택" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="none">제한 없음</SelectItem>
                      <SelectItem value="email">이메일</SelectItem>
                      <SelectItem value="tel">전화번호</SelectItem>
                      <SelectItem value="url">URL</SelectItem>
                      <SelectItem value="currency">통화</SelectItem>
                      <SelectItem value="biz_no">사업자번호</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
              </div>
            </div>
          )}

          {/* PLACEHOLDER 섹션 */}
          <div className="border-b border-border/50 pb-3 mb-3">
            <h4 className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground py-2">PLACEHOLDER</h4>
            <div className="flex items-center justify-between py-1.5">
              <span className="text-xs text-muted-foreground">안내 텍스트</span>
              <div className="w-[140px]">
                <Input
                  value={config.placeholder || ""}
                  onChange={(e) => updateConfig("placeholder", e.target.value)}
                  placeholder="입력 안내"
                  className="h-7 text-xs"
                />
              </div>
            </div>
          </div>

          {/* RANGE 섹션 - 숫자/슬라이더 전용 */}
          {(config.inputType === "number" || config.inputType === "slider") && (
            <div className="border-b border-border/50 pb-3 mb-3">
              <h4 className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground py-2">RANGE</h4>
              <div className="flex gap-2">
                <div className="flex-1">
                  <Label className="text-[10px] text-muted-foreground">최소값</Label>
                  <Input
                    type="number"
                    value={config.min ?? ""}
                    onChange={(e) => updateConfig("min", e.target.value ? Number(e.target.value) : undefined)}
                    placeholder="0"
                    className="h-7 text-xs"
                  />
                </div>
                <div className="flex-1">
                  <Label className="text-[10px] text-muted-foreground">최대값</Label>
                  <Input
                    type="number"
                    value={config.max ?? ""}
                    onChange={(e) => updateConfig("max", e.target.value ? Number(e.target.value) : undefined)}
                    placeholder="100"
                    className="h-7 text-xs"
                  />
                </div>
                <div className="flex-1">
                  <Label className="text-[10px] text-muted-foreground">단계</Label>
                  <Input
                    type="number"
                    value={config.step ?? ""}
                    onChange={(e) => updateConfig("step", e.target.value ? Number(e.target.value) : undefined)}
                    placeholder="1"
                    className="h-7 text-xs"
                  />
                </div>
              </div>
            </div>
          )}

          {/* TEXTAREA 섹션 */}
          {config.inputType === "textarea" && (
            <div className="border-b border-border/50 pb-3 mb-3">
              <h4 className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground py-2">TEXTAREA</h4>
              <div className="flex items-center justify-between py-1.5">
                <span className="text-xs text-muted-foreground">줄 수</span>
                <div className="w-[140px]">
                  <Input
                    type="number"
                    value={config.rows || 3}
                    onChange={(e) => updateConfig("rows", parseInt(e.target.value) || 3)}
                    min={2}
                    max={20}
                    className="h-7 text-xs"
                  />
                </div>
              </div>
            </div>
          )}

          {/* INPUT MASK 섹션 */}
          <div className="border-b border-border/50 pb-3 mb-3">
            <h4 className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground py-2">INPUT MASK</h4>
            <div className="flex items-center justify-between py-1.5">
              <span className="text-xs text-muted-foreground">마스크</span>
              <div className="w-[140px]">
                <Input
                  value={config.mask || ""}
                  onChange={(e) => updateConfig("mask", e.target.value)}
                  placeholder="###-####-####"
                  className="h-7 text-xs"
                />
              </div>
            </div>
            <p className="text-muted-foreground text-[10px] mt-0.5"># = 숫자, A = 문자, * = 모든 문자</p>
          </div>

          {/* AUTO GENERATION 섹션 */}
          <div className="border-b border-border/50 pb-3 mb-3">
            <h4 className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground py-2">AUTO GENERATION</h4>
            <div className="flex items-center justify-between py-1.5">
              <span className="text-xs text-muted-foreground">자동생성 활성화</span>
              <Checkbox
                checked={config.autoGeneration?.enabled || false}
                onCheckedChange={(checked) => {
                  const currentConfig = config.autoGeneration || { type: "none", enabled: false };
                  updateConfig("autoGeneration", {
                    ...currentConfig,
                    enabled: checked as boolean,
                  });
                }}
              />
            </div>

            {config.autoGeneration?.enabled && (
              <div className="mt-1 space-y-1">
                {/* 자동생성 타입 */}
                <div className="flex items-center justify-between py-1.5">
                  <span className="text-xs text-muted-foreground">타입</span>
                  <div className="w-[140px]">
                    <Select
                      value={config.autoGeneration?.type || "none"}
                      onValueChange={(value: AutoGenerationType) => {
                        const currentConfig = config.autoGeneration || { type: "none", enabled: false };
                        updateConfig("autoGeneration", {
                          ...currentConfig,
                          type: value,
                        });
                      }}
                    >
                      <SelectTrigger className="h-7 text-xs">
                        <SelectValue placeholder="자동생성 타입 선택" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="none">자동생성 없음</SelectItem>
                        <SelectItem value="uuid">UUID 생성</SelectItem>
                        <SelectItem value="current_user">현재 사용자 ID</SelectItem>
                        <SelectItem value="current_time">현재 시간</SelectItem>
                        <SelectItem value="sequence">순차 번호</SelectItem>
                        <SelectItem value="numbering_rule">채번 규칙</SelectItem>
                        <SelectItem value="random_string">랜덤 문자열</SelectItem>
                        <SelectItem value="random_number">랜덤 숫자</SelectItem>
                        <SelectItem value="company_code">회사 코드</SelectItem>
                        <SelectItem value="department">부서 코드</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>
                </div>

                {config.autoGeneration?.type && config.autoGeneration.type !== "none" && (
                  <p className="text-muted-foreground text-[10px] mt-0.5">
                    {AutoGenerationUtils.getTypeDescription(config.autoGeneration.type)}
                  </p>
                )}

                {/* 채번 규칙 선택 */}
                {config.autoGeneration?.type === "numbering_rule" && (
                  <div className="mt-1 space-y-1">
                    <div className="flex items-center justify-between py-1.5">
                      <span className="text-xs text-muted-foreground">
                        대상 메뉴 <span className="text-destructive">*</span>
                      </span>
                      <div className="w-[140px]">
                        <Select
                          value={selectedMenuObjid?.toString() || ""}
                          onValueChange={(value) => {
                            const menuId = parseInt(value);
                            setSelectedMenuObjid(menuId);
                            updateConfig("autoGeneration", {
                              ...config.autoGeneration,
                              selectedMenuObjid: menuId,
                            });
                          }}
                          disabled={loadingMenus}
                        >
                          <SelectTrigger className="h-7 text-xs">
                            <SelectValue placeholder={loadingMenus ? "로딩 중..." : "메뉴 선택"} />
                          </SelectTrigger>
                          <SelectContent>
                            {parentMenus.length === 0 ? (
                              <SelectItem value="no-menus" disabled>
                                사용 가능한 메뉴가 없습니다
                              </SelectItem>
                            ) : (
                              parentMenus.map((menu) => (
                                <SelectItem key={menu.objid} value={menu.objid.toString()}>
                                  {menu.menu_name_kor}
                                </SelectItem>
                              ))
                            )}
                          </SelectContent>
                        </Select>
                      </div>
                    </div>

                    {selectedMenuObjid ? (
                      <div className="flex items-center justify-between py-1.5">
                        <span className="text-xs text-muted-foreground">
                          채번 규칙 <span className="text-destructive">*</span>
                        </span>
                        <div className="w-[140px]">
                          <Select
                            value={config.autoGeneration?.options?.numberingRuleId || ""}
                            onValueChange={(value) => {
                              updateConfig("autoGeneration", {
                                ...config.autoGeneration,
                                options: {
                                  ...config.autoGeneration?.options,
                                  numberingRuleId: value,
                                },
                              });
                            }}
                            disabled={loadingRules}
                          >
                            <SelectTrigger className="h-7 text-xs">
                              <SelectValue placeholder={loadingRules ? "로딩 중..." : "규칙 선택"} />
                            </SelectTrigger>
                            <SelectContent>
                              {numberingRules.length === 0 ? (
                                <SelectItem value="no-rules" disabled>
                                  사용 가능한 규칙이 없습니다
                                </SelectItem>
                              ) : (
                                numberingRules.map((rule) => (
                                  <SelectItem key={rule.ruleId} value={rule.ruleId}>
                                    {rule.ruleName}
                                  </SelectItem>
                                ))
                              )}
                            </SelectContent>
                          </Select>
                        </div>
                      </div>
                    ) : (
                      <div className="rounded-md border border-amber-200 bg-amber-50 p-2 text-[10px] text-amber-800">
                        먼저 대상 메뉴를 선택하세요
                      </div>
                    )}
                  </div>
                )}

                {/* 자동생성 옵션 (랜덤/순차용) */}
                {config.autoGeneration?.type &&
                  ["random_string", "random_number", "sequence"].includes(config.autoGeneration.type) && (
                    <div className="mt-1 space-y-1">
                      {["random_string", "random_number"].includes(config.autoGeneration.type) && (
                        <div className="flex items-center justify-between py-1.5">
                          <span className="text-xs text-muted-foreground">길이</span>
                          <div className="w-[140px]">
                            <Input
                              type="number"
                              min="1"
                              max="50"
                              value={config.autoGeneration?.options?.length || 8}
                              onChange={(e) => {
                                updateConfig("autoGeneration", {
                                  ...config.autoGeneration,
                                  options: {
                                    ...config.autoGeneration?.options,
                                    length: parseInt(e.target.value) || 8,
                                  },
                                });
                              }}
                              className="h-7 text-xs"
                            />
                          </div>
                        </div>
                      )}

                      <div className="flex items-center justify-between py-1.5">
                        <span className="text-xs text-muted-foreground">접두사</span>
                        <div className="w-[140px]">
                          <Input
                            value={config.autoGeneration?.options?.prefix || ""}
                            onChange={(e) => {
                              updateConfig("autoGeneration", {
                                ...config.autoGeneration,
                                options: {
                                  ...config.autoGeneration?.options,
                                  prefix: e.target.value,
                                },
                              });
                            }}
                            placeholder="예: INV-"
                            className="h-7 text-xs"
                          />
                        </div>
                      </div>

                      <div className="flex items-center justify-between py-1.5">
                        <span className="text-xs text-muted-foreground">접미사</span>
                        <div className="w-[140px]">
                          <Input
                            value={config.autoGeneration?.options?.suffix || ""}
                            onChange={(e) => {
                              updateConfig("autoGeneration", {
                                ...config.autoGeneration,
                                options: {
                                  ...config.autoGeneration?.options,
                                  suffix: e.target.value,
                                },
                              });
                            }}
                            className="h-7 text-xs"
                          />
                        </div>
                      </div>

                      <div className="py-1.5">
                        <span className="text-[10px] text-muted-foreground">미리보기</span>
                        <div className="mt-1 rounded border bg-muted p-1.5 text-xs font-mono">
                          {AutoGenerationUtils.generatePreviewValue(config.autoGeneration)}
                        </div>
                      </div>
                    </div>
                  )}
              </div>
            )}
          </div>
        </>
      )}
    </div>
  );
};

V2InputConfigPanel.displayName = "V2InputConfigPanel";

export default V2InputConfigPanel;