"use client";

import React, { useState, useEffect } from "react";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Checkbox } from "@/components/ui/checkbox";
import { Switch } from "@/components/ui/switch";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Button } from "@/components/ui/button";
import { Link2, ExternalLink } from "lucide-react";
import Link from "next/link";
import { SelectBasicConfig } from "./types";
import { cascadingRelationApi, CascadingRelation } from "@/lib/api/cascadingRelation";
import { categoryValueCascadingApi, CategoryValueCascadingGroup } from "@/lib/api/categoryValueCascading";

export interface SelectBasicConfigPanelProps {
  config: SelectBasicConfig;
  onChange: (config: Partial<SelectBasicConfig>) => void;
  /** 현재 화면의 모든 컴포넌트 목록 (부모 필드 자동 감지용) */
  allComponents?: any[];
  /** 현재 컴포넌트 정보 */
  currentComponent?: any;
}

/**
 * SelectBasic 설정 패널
 * 컴포넌트의 설정값들을 편집할 수 있는 UI 제공
 */
export const SelectBasicConfigPanel: React.FC<SelectBasicConfigPanelProps> = ({
  config,
  onChange,
  allComponents = [],
  currentComponent,
}) => {
  // 연쇄 드롭다운 관련 상태
  const [cascadingEnabled, setCascadingEnabled] = useState(!!config.cascadingRelationCode);
  const [relationList, setRelationList] = useState<CascadingRelation[]>([]);
  const [loadingRelations, setLoadingRelations] = useState(false);
  
  // 🆕 카테고리 값 연쇄관계 상태
  const [categoryRelationEnabled, setCategoryRelationEnabled] = useState(!!(config as any).categoryRelationCode);
  const [categoryRelationList, setCategoryRelationList] = useState<CategoryValueCascadingGroup[]>([]);
  const [loadingCategoryRelations, setLoadingCategoryRelations] = useState(false);

  // 연쇄 관계 목록 로드
  useEffect(() => {
    if (cascadingEnabled && relationList.length === 0) {
      loadRelationList();
    }
  }, [cascadingEnabled]);

  // 🆕 카테고리 값 연쇄관계 목록 로드
  useEffect(() => {
    if (categoryRelationEnabled && categoryRelationList.length === 0) {
      loadCategoryRelationList();
    }
  }, [categoryRelationEnabled]);

  // config 변경 시 상태 동기화
  useEffect(() => {
    setCascadingEnabled(!!config.cascadingRelationCode);
    setCategoryRelationEnabled(!!(config as any).categoryRelationCode);
  }, [config.cascadingRelationCode, (config as any).categoryRelationCode]);

  const loadRelationList = async () => {
    setLoadingRelations(true);
    try {
      const response = await cascadingRelationApi.getList("Y");
      if (response.success && response.data) {
        setRelationList(response.data);
      }
    } catch (error) {
      console.error("연쇄 관계 목록 로드 실패:", error);
    } finally {
      setLoadingRelations(false);
    }
  };

  // 🆕 카테고리 값 연쇄관계 목록 로드
  const loadCategoryRelationList = async () => {
    setLoadingCategoryRelations(true);
    try {
      const response = await categoryValueCascadingApi.getGroups("Y");
      if (response.success && response.data) {
        setCategoryRelationList(response.data);
      }
    } catch (error) {
      console.error("카테고리 값 연쇄관계 목록 로드 실패:", error);
    } finally {
      setLoadingCategoryRelations(false);
    }
  };

  const handleChange = (key: keyof SelectBasicConfig, value: any) => {
    // 기존 config와 병합하여 전체 객체 전달 (다른 속성 보호)
    const newConfig = { ...config, [key]: value };
    onChange(newConfig);
  };

  // 연쇄 드롭다운 토글
  const handleCascadingToggle = (enabled: boolean) => {
    setCascadingEnabled(enabled);
    if (!enabled) {
      // 비활성화 시 관계 설정 제거
      const newConfig = { 
        ...config, 
        cascadingRelationCode: undefined,
        cascadingRole: undefined,
        cascadingParentField: undefined,
      };
      onChange(newConfig);
    } else {
      loadRelationList();
      // 카테고리 값 연쇄관계 비활성화 (둘 중 하나만 사용)
      if (categoryRelationEnabled) {
        setCategoryRelationEnabled(false);
        onChange({ ...config, categoryRelationCode: undefined } as any);
      }
    }
  };

  // 🆕 카테고리 값 연쇄관계 토글
  const handleCategoryRelationToggle = (enabled: boolean) => {
    setCategoryRelationEnabled(enabled);
    if (!enabled) {
      // 비활성화 시 관계 설정 제거
      const newConfig = { 
        ...config, 
        categoryRelationCode: undefined,
        cascadingRole: undefined,
        cascadingParentField: undefined,
      } as any;
      onChange(newConfig);
    } else {
      loadCategoryRelationList();
      // 일반 연쇄관계 비활성화 (둘 중 하나만 사용)
      if (cascadingEnabled) {
        setCascadingEnabled(false);
        onChange({ ...config, cascadingRelationCode: undefined });
      }
    }
  };
  
  // 🆕 같은 연쇄 관계의 부모 역할 컴포넌트 찾기
  const findParentComponent = (relationCode: string) => {
    console.log("🔍 findParentComponent 호출:", {
      relationCode,
      allComponentsLength: allComponents?.length,
      currentComponentId: currentComponent?.id,
    });
    
    if (!allComponents || allComponents.length === 0) {
      console.log("❌ allComponents가 비어있음");
      return null;
    }
    
    // 모든 컴포넌트의 cascading 설정 확인
    allComponents.forEach((comp: any) => {
      const compConfig = comp.componentConfig || {};
      if (compConfig.cascadingRelationCode) {
        console.log("📦 컴포넌트 cascading 설정:", {
          id: comp.id,
          columnName: comp.columnName,
          cascadingRelationCode: compConfig.cascadingRelationCode,
          cascadingRole: compConfig.cascadingRole,
        });
      }
    });
    
    const found = allComponents.find((comp: any) => {
      const compConfig = comp.componentConfig || {};
      return (
        comp.id !== currentComponent?.id && // 자기 자신 제외
        compConfig.cascadingRelationCode === relationCode &&
        compConfig.cascadingRole === "parent"
      );
    });
    
    console.log("🔍 찾은 부모 컴포넌트:", found);
    return found;
  };

  // 역할 변경 시 부모 필드 자동 감지
  const handleRoleChange = (role: "parent" | "child") => {
    let parentField = config.cascadingParentField;
    
    // 자식 역할 선택 시 부모 필드 자동 감지
    if (role === "child" && config.cascadingRelationCode) {
      const parentComp = findParentComponent(config.cascadingRelationCode);
      if (parentComp) {
        parentField = parentComp.columnName;
        console.log("🔗 부모 필드 자동 감지:", parentField);
      }
    }
    
    const newConfig = { 
      ...config, 
      cascadingRole: role,
      // 부모 역할일 때는 부모 필드 불필요, 자식일 때는 자동 감지된 값 또는 기존 값
      cascadingParentField: role === "parent" ? undefined : parentField,
    };
    onChange(newConfig);
  };

  // 선택된 관계 정보
  const selectedRelation = relationList.find(r => r.relation_code === config.cascadingRelationCode);

  return (
    <div className="space-y-4">
      <div className="text-sm font-medium">
        select-basic 설정
      </div>

      {/* select 관련 설정 */}
      <div className="space-y-2">
        <Label htmlFor="placeholder">플레이스홀더</Label>
        <Input
          id="placeholder"
          value={config.placeholder || ""}
          onChange={(e) => handleChange("placeholder", e.target.value)}
        />
      </div>

      {/* 공통 설정 */}
      <div className="space-y-2">
        <Label htmlFor="disabled">비활성화</Label>
        <Checkbox
          id="disabled"
          checked={config.disabled || false}
          onCheckedChange={(checked) => handleChange("disabled", checked)}
        />
      </div>

      <div className="space-y-2">
        <Label htmlFor="required">필수 입력</Label>
        <Checkbox
          id="required"
          checked={config.required || false}
          onCheckedChange={(checked) => handleChange("required", checked)}
        />
      </div>

      <div className="space-y-2">
        <Label htmlFor="readonly">읽기 전용</Label>
        <Checkbox
          id="readonly"
          checked={config.readonly || false}
          onCheckedChange={(checked) => handleChange("readonly", checked)}
        />
      </div>

      <div className="space-y-2">
        <Label htmlFor="multiple">다중 선택</Label>
        <Checkbox
          id="multiple"
          checked={config.multiple || false}
          onCheckedChange={(checked) => handleChange("multiple", checked)}
        />
      </div>

      {/* 연쇄 드롭다운 설정 */}
      <div className="border-t pt-4 mt-4 space-y-3">
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-2">
            <Link2 className="h-4 w-4" />
            <Label className="text-sm font-medium">연쇄 드롭다운</Label>
          </div>
          <Switch
            checked={cascadingEnabled}
            onCheckedChange={handleCascadingToggle}
          />
        </div>
        <p className="text-muted-foreground text-xs">
          다른 필드의 값에 따라 옵션이 동적으로 변경됩니다.
        </p>

        {cascadingEnabled && (
          <div className="space-y-3 rounded-md border p-3 bg-muted/30">
            {/* 관계 선택 */}
            <div className="space-y-2">
              <Label className="text-xs">연쇄 관계 선택</Label>
              <Select
                value={config.cascadingRelationCode || ""}
                onValueChange={(value) => handleChange("cascadingRelationCode", value || undefined)}
              >
                <SelectTrigger className="text-xs">
                  <SelectValue placeholder={loadingRelations ? "로딩 중..." : "관계 선택"} />
                </SelectTrigger>
                <SelectContent>
                  {relationList.map((relation) => (
                    <SelectItem key={relation.relation_code} value={relation.relation_code}>
                      <div className="flex flex-col">
                        <span>{relation.relation_name}</span>
                        <span className="text-muted-foreground text-xs">
                          {relation.parent_table} → {relation.child_table}
                        </span>
                      </div>
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>

            {/* 역할 선택 */}
            {config.cascadingRelationCode && (
              <div className="space-y-2">
                <Label className="text-xs">역할 선택</Label>
                <div className="flex gap-2">
                  <Button
                    type="button"
                    size="sm"
                    variant={config.cascadingRole === "parent" ? "default" : "outline"}
                    className="flex-1 text-xs"
                    onClick={() => handleRoleChange("parent")}
                  >
                    부모 (상위 선택)
                  </Button>
                  <Button
                    type="button"
                    size="sm"
                    variant={config.cascadingRole === "child" ? "default" : "outline"}
                    className="flex-1 text-xs"
                    onClick={() => handleRoleChange("child")}
                  >
                    자식 (하위 선택)
                  </Button>
                </div>
                <p className="text-muted-foreground text-xs">
                  {config.cascadingRole === "parent" 
                    ? "이 필드가 상위 선택 역할을 합니다. (예: 창고 선택)"
                    : config.cascadingRole === "child"
                    ? "이 필드는 상위 필드 값에 따라 옵션이 변경됩니다. (예: 위치 선택)"
                    : "이 필드의 역할을 선택하세요."}
                </p>
              </div>
            )}

            {/* 부모 필드 설정 (자식 역할일 때만) */}
            {config.cascadingRelationCode && config.cascadingRole === "child" && (() => {
              // 선택된 관계에서 부모 값 컬럼 가져오기
              const expectedParentColumn = selectedRelation?.parent_value_column;
              
              // 부모 역할에 맞는 컴포넌트만 필터링
              const parentFieldCandidates = allComponents.filter((comp) => {
                // 현재 컴포넌트 제외
                if (currentComponent && comp.id === currentComponent.id) return false;
                // 관계에서 지정한 부모 컬럼명과 일치하는 컴포넌트만
                if (expectedParentColumn && comp.columnName !== expectedParentColumn) return false;
                // columnName이 있어야 함
                return !!comp.columnName;
              });
              
              return (
                <div className="space-y-2">
                  <Label className="text-xs">부모 필드 선택</Label>
                  {expectedParentColumn && (
                    <p className="text-muted-foreground text-xs">
                      관계에서 지정된 부모 컬럼: <strong>{expectedParentColumn}</strong>
                    </p>
                  )}
                  <Select
                    value={config.cascadingParentField || ""}
                    onValueChange={(value) => handleChange("cascadingParentField", value || undefined)}
                  >
                    <SelectTrigger className="text-xs">
                      <SelectValue placeholder="부모 필드 선택" />
                    </SelectTrigger>
                    <SelectContent>
                      {parentFieldCandidates.map((comp) => (
                        <SelectItem key={comp.id} value={comp.columnName}>
                          {comp.label || comp.columnName} ({comp.columnName})
                        </SelectItem>
                      ))}
                      {parentFieldCandidates.length === 0 && (
                        <div className="px-2 py-1.5 text-xs text-muted-foreground">
                          {expectedParentColumn 
                            ? `'${expectedParentColumn}' 컬럼을 가진 컴포넌트가 화면에 없습니다`
                            : "선택 가능한 부모 필드가 없습니다"}
                        </div>
                      )}
                    </SelectContent>
                  </Select>
                  <p className="text-muted-foreground text-xs">
                    상위 값을 제공할 필드를 선택하세요.
                  </p>
                </div>
              );
            })()}

            {/* 선택된 관계 정보 표시 */}
            {selectedRelation && config.cascadingRole && (
              <div className="bg-background space-y-1 rounded-md p-2 text-xs">
                {config.cascadingRole === "parent" ? (
                  <>
                    <div className="font-medium text-blue-600">부모 역할 (상위 선택)</div>
                    <div>
                      <span className="text-muted-foreground">데이터 소스:</span>{" "}
                      <span className="font-medium">{selectedRelation.parent_table}</span>
                    </div>
                    <div>
                      <span className="text-muted-foreground">저장 값:</span>{" "}
                      <span className="font-medium">{selectedRelation.parent_value_column}</span>
                    </div>
                  </>
                ) : (
                  <>
                    <div className="font-medium text-green-600">자식 역할 (하위 선택)</div>
                    <div>
                      <span className="text-muted-foreground">데이터 소스:</span>{" "}
                      <span className="font-medium">{selectedRelation.child_table}</span>
                    </div>
                    <div>
                      <span className="text-muted-foreground">필터 기준:</span>{" "}
                      <span className="font-medium">{selectedRelation.child_filter_column}</span>
                    </div>
                    <div>
                      <span className="text-muted-foreground">저장 값:</span>{" "}
                      <span className="font-medium">{selectedRelation.child_value_column}</span>
                    </div>
                  </>
                )}
              </div>
            )}

            {/* 관계 관리 페이지 링크 */}
            <div className="flex justify-end">
              <Link href="/admin/cascading-relations" target="_blank">
                <Button variant="link" size="sm" className="h-auto p-0 text-xs">
                  <ExternalLink className="mr-1 h-3 w-3" />
                  관계 관리
                </Button>
              </Link>
            </div>
          </div>
        )}
      </div>

      {/* 🆕 카테고리 값 연쇄관계 설정 */}
      <div className="border-t pt-4 mt-4 space-y-3">
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-2">
            <Link2 className="h-4 w-4" />
            <Label className="text-sm font-medium">카테고리 값 연쇄</Label>
          </div>
          <Switch
            checked={categoryRelationEnabled}
            onCheckedChange={handleCategoryRelationToggle}
          />
        </div>
        <p className="text-muted-foreground text-xs">
          부모 카테고리 값 선택에 따라 자식 카테고리 옵션이 변경됩니다.
          <br />예: 검사유형 선택 시 해당 유형에 맞는 적용대상만 표시
        </p>

        {categoryRelationEnabled && (
          <div className="space-y-3 rounded-md border p-3 bg-muted/30">
            {/* 관계 선택 */}
            <div className="space-y-2">
              <Label className="text-xs">카테고리 값 연쇄 관계 선택</Label>
              <Select
                value={(config as any).categoryRelationCode || ""}
                onValueChange={(value) => handleChange("categoryRelationCode" as any, value || undefined)}
              >
                <SelectTrigger className="text-xs">
                  <SelectValue placeholder={loadingCategoryRelations ? "로딩 중..." : "관계 선택"} />
                </SelectTrigger>
                <SelectContent>
                  {categoryRelationList.map((relation) => (
                    <SelectItem key={relation.relation_code} value={relation.relation_code}>
                      <div className="flex flex-col">
                        <span>{relation.relation_name}</span>
                        <span className="text-muted-foreground text-xs">
                          {relation.parent_table_name}.{relation.parent_column_name} → {relation.child_table_name}.{relation.child_column_name}
                        </span>
                      </div>
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>

            {/* 역할 선택 */}
            {(config as any).categoryRelationCode && (
              <div className="space-y-2">
                <Label className="text-xs">역할 선택</Label>
                <div className="flex gap-2">
                  <Button
                    type="button"
                    size="sm"
                    variant={config.cascadingRole === "parent" ? "default" : "outline"}
                    className="flex-1 text-xs"
                    onClick={() => handleRoleChange("parent")}
                  >
                    부모 (상위 선택)
                  </Button>
                  <Button
                    type="button"
                    size="sm"
                    variant={config.cascadingRole === "child" ? "default" : "outline"}
                    className="flex-1 text-xs"
                    onClick={() => handleRoleChange("child")}
                  >
                    자식 (하위 선택)
                  </Button>
                </div>
                <p className="text-muted-foreground text-xs">
                  {config.cascadingRole === "parent" 
                    ? "이 필드가 상위 카테고리 선택 역할을 합니다. (예: 검사유형)"
                    : config.cascadingRole === "child"
                    ? "이 필드는 상위 카테고리 값에 따라 옵션이 변경됩니다. (예: 적용대상)"
                    : "이 필드의 역할을 선택하세요."}
                </p>
              </div>
            )}

            {/* 부모 필드 설정 (자식 역할일 때만) */}
            {(config as any).categoryRelationCode && config.cascadingRole === "child" && (() => {
              // 선택된 관계 정보 가져오기
              const selectedRelation = categoryRelationList.find(
                (r) => r.relation_code === (config as any).categoryRelationCode
              );
              const expectedParentColumn = selectedRelation?.parent_column_name;
              
              // 부모 역할에 맞는 컴포넌트만 필터링
              const parentFieldCandidates = allComponents.filter((comp) => {
                // 현재 컴포넌트 제외
                if (currentComponent && comp.id === currentComponent.id) return false;
                // 관계에서 지정한 부모 컬럼명과 일치하는 컴포넌트만
                if (expectedParentColumn && comp.columnName !== expectedParentColumn) return false;
                // columnName이 있어야 함
                return !!comp.columnName;
              });
              
              return (
                <div className="space-y-2">
                  <Label className="text-xs">부모 필드 선택</Label>
                  {expectedParentColumn && (
                    <p className="text-muted-foreground text-xs">
                      관계에서 지정된 부모 컬럼: <strong>{expectedParentColumn}</strong>
                    </p>
                  )}
                  <Select
                    value={config.cascadingParentField || ""}
                    onValueChange={(value) => handleChange("cascadingParentField", value || undefined)}
                  >
                    <SelectTrigger className="text-xs">
                      <SelectValue placeholder="부모 필드 선택" />
                    </SelectTrigger>
                    <SelectContent>
                      {parentFieldCandidates.map((comp) => (
                        <SelectItem key={comp.id} value={comp.columnName}>
                          {comp.label || comp.columnName} ({comp.columnName})
                        </SelectItem>
                      ))}
                      {parentFieldCandidates.length === 0 && (
                        <div className="px-2 py-1.5 text-xs text-muted-foreground">
                          {expectedParentColumn 
                            ? `'${expectedParentColumn}' 컬럼을 가진 컴포넌트가 화면에 없습니다`
                            : "선택 가능한 부모 필드가 없습니다"}
                        </div>
                      )}
                    </SelectContent>
                  </Select>
                  <p className="text-muted-foreground text-xs">
                    상위 카테고리 값을 제공할 필드를 선택하세요.
                  </p>
                </div>
              );
            })()}

            {/* 관계 관리 페이지 링크 */}
            <div className="flex justify-end">
              <Link href="/admin/cascading-management?tab=category-value" target="_blank">
                <Button variant="link" size="sm" className="h-auto p-0 text-xs">
                  <ExternalLink className="mr-1 h-3 w-3" />
                  카테고리 값 연쇄 관리
                </Button>
              </Link>
            </div>
          </div>
        )}
      </div>
    </div>
  );
};