"use client";

import React, { useState, useEffect, useCallback, useRef } from "react";
import { Button } from "@/components/ui/button";
import { Plus, Star, Loader2, ExternalLink } from "lucide-react";
import { cn } from "@/lib/utils";
import { useSplitPanelContext } from "@/contexts/SplitPanelContext";
import { dataApi } from "@/lib/api/data";
import type { RelatedDataButtonsConfig, ButtonItem } from "./types";

// 전역 상태: 현재 선택된 버튼 데이터를 외부에서 접근 가능하게
declare global {
  interface Window {
    __relatedButtonsSelectedData?: {
      selectedItem: ButtonItem | null;
      masterData: Record<string, any> | null;
      config: RelatedDataButtonsConfig | null;
    };
    // 🆕 RelatedDataButtons가 대상으로 하는 테이블 목록 (전역 레지스트리)
    __relatedButtonsTargetTables?: Set<string>;
  }
}

// 전역 레지스트리 초기화
if (typeof window !== "undefined" && !window.__relatedButtonsTargetTables) {
  window.__relatedButtonsTargetTables = new Set();
}

interface RelatedDataButtonsComponentProps {
  config: RelatedDataButtonsConfig;
  className?: string;
  style?: React.CSSProperties;
}

export const RelatedDataButtonsComponent: React.FC<RelatedDataButtonsComponentProps> = ({
  config,
  className,
  style,
}) => {
  const [buttons, setButtons] = useState<ButtonItem[]>([]);
  const [selectedId, setSelectedId] = useState<string | null>(null);
  const [selectedItem, setSelectedItem] = useState<ButtonItem | null>(null);
  const [loading, setLoading] = useState(false);
  const [masterData, setMasterData] = useState<Record<string, any> | null>(null);

  // SplitPanel Context 연결
  const splitPanelContext = useSplitPanelContext();

  // 선택된 데이터를 전역 상태에 저장 (외부 버튼에서 접근용)
  useEffect(() => {
    window.__relatedButtonsSelectedData = {
      selectedItem,
      masterData,
      config,
    };
    console.log("🔄 [RelatedDataButtons] 전역 상태 업데이트:", {
      selectedItem,
      hasConfig: !!config,
      modalLink: config?.modalLink,
    });
  }, [selectedItem, masterData, config]);

  // 좌측 패널에서 선택된 데이터 감지
  useEffect(() => {
    if (!splitPanelContext?.selectedLeftData) {
      setMasterData(null);
      setButtons([]);
      setSelectedId(null);
      setSelectedItem(null);
      
      // 🆕 좌측 데이터가 없을 때 대상 테이블에 빈 상태 알림
      if (config.events?.targetTable) {
        window.dispatchEvent(new CustomEvent("related-button-select", {
          detail: {
            targetTable: config.events.targetTable,
            filterColumn: config.events.targetFilterColumn,
            filterValue: null, // null로 설정하여 빈 상태 표시
            selectedData: null,
          },
        }));
      }
      return;
    }

    setMasterData(splitPanelContext.selectedLeftData);
  }, [splitPanelContext?.selectedLeftData, config.events]);

  // 🆕 컴포넌트 마운트 시 대상 테이블에 필터 필요 알림
  useEffect(() => {
    if (config.events?.targetTable) {
      // 전역 레지스트리에 등록
      window.__relatedButtonsTargetTables?.add(config.events.targetTable);
      
      // 이벤트도 발생 (이미 마운트된 테이블 컴포넌트를 위해)
      window.dispatchEvent(new CustomEvent("related-button-register", {
        detail: {
          targetTable: config.events.targetTable,
          filterColumn: config.events.targetFilterColumn,
        },
      }));
      console.log("📝 [RelatedDataButtons] 대상 테이블에 필터 등록:", config.events.targetTable);
    }

    return () => {
      // 컴포넌트 언마운트 시 등록 해제
      if (config.events?.targetTable) {
        window.__relatedButtonsTargetTables?.delete(config.events.targetTable);
        
        window.dispatchEvent(new CustomEvent("related-button-unregister", {
          detail: {
            targetTable: config.events.targetTable,
          },
        }));
      }
    };
  }, [config.events?.targetTable, config.events?.targetFilterColumn]);

  // 버튼 데이터 로드
  const loadButtons = useCallback(async () => {
    if (!masterData || !config.buttonDataSource?.tableName) {
      return;
    }

    const filterValue = masterData[config.sourceMapping.sourceColumn];
    if (!filterValue) {
      setButtons([]);
      return;
    }

    setLoading(true);
    try {
      const { tableName, filterColumn, displayColumn, valueColumn, orderColumn, orderDirection } = config.buttonDataSource;

      const response = await dataApi.getTableData(tableName, {
        filters: { [filterColumn]: filterValue },
        sortBy: orderColumn || "created_date",
        sortOrder: (orderDirection?.toLowerCase() || "asc") as "asc" | "desc",
        size: 50,
      });

      if (response.data && response.data.length > 0) {
        const defaultConfig = config.buttonStyle?.defaultIndicator;
        
        const items: ButtonItem[] = response.data.map((row: Record<string, any>) => {
          let isDefault = false;
          if (defaultConfig?.column) {
            const val = row[defaultConfig.column];
            const checkValue = defaultConfig.value || "Y";
            isDefault = val === checkValue || val === true || val === "true";
          }

          return {
            id: row.id || row[valueColumn || "id"],
            displayText: row[displayColumn] || row.id,
            value: row[valueColumn || "id"],
            isDefault,
            rawData: row,
          };
        });

        setButtons(items);

        // 자동 선택: 기본 항목 또는 첫 번째 항목
        if (config.autoSelectFirst && items.length > 0) {
          const defaultItem = items.find(item => item.isDefault);
          const targetItem = defaultItem || items[0];
          setSelectedId(targetItem.id);
          setSelectedItem(targetItem);
          emitSelection(targetItem);
        }
      }
    } catch (error) {
      console.error("RelatedDataButtons 데이터 로드 실패:", error);
      setButtons([]);
    } finally {
      setLoading(false);
    }
  }, [masterData, config.buttonDataSource, config.sourceMapping, config.buttonStyle, config.autoSelectFirst]);

  // masterData 변경 시 버튼 로드
  useEffect(() => {
    if (masterData) {
      setSelectedId(null); // 마스터 변경 시 선택 초기화
      setSelectedItem(null);
      loadButtons();
    }
  }, [masterData, loadButtons]);

  // 선택 이벤트 발생
  const emitSelection = useCallback((item: ButtonItem) => {
    if (!config.events?.targetTable || !config.events?.targetFilterColumn) {
      return;
    }

    // 커스텀 이벤트 발생 (하위 테이블 필터링용)
    window.dispatchEvent(new CustomEvent("related-button-select", {
      detail: {
        targetTable: config.events.targetTable,
        filterColumn: config.events.targetFilterColumn,
        filterValue: item.value,
        selectedData: item.rawData,
      },
    }));

    console.log("📌 RelatedDataButtons 선택 이벤트:", {
      targetTable: config.events.targetTable,
      filterColumn: config.events.targetFilterColumn,
      filterValue: item.value,
    });
  }, [config.events]);

  // 버튼 클릭 핸들러
  const handleButtonClick = useCallback((item: ButtonItem) => {
    setSelectedId(item.id);
    setSelectedItem(item);
    emitSelection(item);
  }, [emitSelection]);

  // 모달 열기 (선택된 버튼 데이터 전달)
  const openModalWithSelectedData = useCallback((targetScreenId: number) => {
    if (!selectedItem) {
      console.warn("선택된 버튼이 없습니다.");
      return;
    }

    // 데이터 매핑 적용
    const initialData: Record<string, any> = {};
    
    if (config.modalLink?.dataMapping) {
      config.modalLink.dataMapping.forEach(mapping => {
        if (mapping.sourceField === "value") {
          initialData[mapping.targetField] = selectedItem.value;
        } else if (mapping.sourceField === "id") {
          initialData[mapping.targetField] = selectedItem.id;
        } else if (selectedItem.rawData[mapping.sourceField] !== undefined) {
          initialData[mapping.targetField] = selectedItem.rawData[mapping.sourceField];
        }
      });
    } else {
      // 기본 매핑: id를 routing_version_id로 전달
      initialData["routing_version_id"] = selectedItem.value || selectedItem.id;
    }

    console.log("📤 RelatedDataButtons 모달 열기:", {
      targetScreenId,
      selectedItem,
      initialData,
    });

    window.dispatchEvent(new CustomEvent("open-screen-modal", {
      detail: {
        screenId: targetScreenId,
        initialData,
        onSuccess: () => {
          loadButtons(); // 모달 성공 후 새로고침
        },
      },
    }));
  }, [selectedItem, config.modalLink, loadButtons]);

  // 외부 버튼에서 모달 열기 요청 수신
  useEffect(() => {
    const handleExternalModalOpen = (event: CustomEvent) => {
      const { targetScreenId, componentId } = event.detail || {};
      
      // componentId가 지정되어 있고 현재 컴포넌트가 아니면 무시
      if (componentId && componentId !== config.sourceMapping?.sourceTable) {
        return;
      }

      if (targetScreenId && selectedItem) {
        openModalWithSelectedData(targetScreenId);
      }
    };

    window.addEventListener("related-buttons-open-modal" as any, handleExternalModalOpen);
    return () => {
      window.removeEventListener("related-buttons-open-modal" as any, handleExternalModalOpen);
    };
  }, [selectedItem, config.sourceMapping, openModalWithSelectedData]);

  // 내부 모달 링크 버튼 클릭
  const handleModalLinkClick = useCallback(() => {
    if (!config.modalLink?.targetScreenId) {
      console.warn("모달 링크 설정이 없습니다.");
      return;
    }
    openModalWithSelectedData(config.modalLink.targetScreenId);
  }, [config.modalLink, openModalWithSelectedData]);

  // 추가 버튼 클릭
  const handleAddClick = useCallback(() => {
    if (!config.addButton?.modalScreenId) return;

    const filterValue = masterData?.[config.sourceMapping.sourceColumn];
    
    window.dispatchEvent(new CustomEvent("open-screen-modal", {
      detail: {
        screenId: config.addButton.modalScreenId,
        initialData: {
          [config.buttonDataSource.filterColumn]: filterValue,
        },
        onSuccess: () => {
          loadButtons(); // 모달 성공 후 새로고침
        },
      },
    }));
  }, [config.addButton, config.buttonDataSource.filterColumn, config.sourceMapping.sourceColumn, masterData, loadButtons]);

  // 버튼 variant 계산
  const getButtonVariant = useCallback((item: ButtonItem): "default" | "outline" | "secondary" | "ghost" => {
    if (selectedId === item.id) {
      return config.buttonStyle?.activeVariant || "default";
    }
    return config.buttonStyle?.variant || "outline";
  }, [selectedId, config.buttonStyle]);

  // 마스터 데이터 없음
  if (!masterData) {
    return (
      <div className={cn("rounded-lg border bg-card p-4", className)} style={style}>
        <p className="text-sm text-muted-foreground text-center">
          좌측에서 항목을 선택하세요
        </p>
      </div>
    );
  }

  const headerConfig = config.headerDisplay;
  const addButtonConfig = config.addButton;
  const modalLinkConfig = config.modalLink;

  return (
    <div className={cn("rounded-lg border bg-card", className)} style={style}>
      {/* 헤더 영역 */}
      {headerConfig?.show !== false && (
        <div className="flex items-start justify-between p-4 pb-3">
          <div>
            {/* 제목 (품목명 등) */}
            {headerConfig?.titleColumn && masterData[headerConfig.titleColumn] && (
              <h3 className="text-lg font-semibold">
                {masterData[headerConfig.titleColumn]}
              </h3>
            )}
            {/* 부제목 (품목코드 등) */}
            {headerConfig?.subtitleColumn && masterData[headerConfig.subtitleColumn] && (
              <p className="text-sm text-muted-foreground">
                {masterData[headerConfig.subtitleColumn]}
              </p>
            )}
          </div>

          <div className="flex items-center gap-2">
            {/* 모달 링크 버튼 (헤더 위치) */}
            {modalLinkConfig?.enabled && modalLinkConfig?.triggerType === "button" && modalLinkConfig?.buttonPosition === "header" && (
              <Button
                variant="outline"
                size="sm"
                onClick={handleModalLinkClick}
                disabled={!selectedItem}
                title={!selectedItem ? "버튼을 먼저 선택하세요" : ""}
              >
                <ExternalLink className="mr-1 h-4 w-4" />
                {modalLinkConfig.buttonLabel || "상세 추가"}
              </Button>
            )}

            {/* 헤더 위치 추가 버튼 */}
            {addButtonConfig?.show && addButtonConfig?.position === "header" && (
              <Button
                variant="default"
                size="sm"
                onClick={handleAddClick}
                className="bg-blue-600 hover:bg-blue-700"
              >
                <Plus className="mr-1 h-4 w-4" />
                {addButtonConfig.label || "버전 추가"}
              </Button>
            )}
          </div>
        </div>
      )}

      {/* 버튼 영역 */}
      <div className="px-4 pb-4">
        {loading ? (
          <div className="flex items-center justify-center py-4">
            <Loader2 className="h-5 w-5 animate-spin text-muted-foreground" />
          </div>
        ) : buttons.length === 0 ? (
          <div className="flex items-center gap-2">
            <p className="text-sm text-muted-foreground">
              {config.emptyMessage || "데이터가 없습니다"}
            </p>
            {/* 인라인 추가 버튼 (데이터 없을 때) */}
            {addButtonConfig?.show && addButtonConfig?.position !== "header" && (
              <Button
                variant="outline"
                size="sm"
                onClick={handleAddClick}
                className="border-dashed"
              >
                <Plus className="mr-1 h-4 w-4" />
                {addButtonConfig.label || "추가"}
              </Button>
            )}
          </div>
        ) : (
          <div className="flex flex-wrap items-center gap-2">
            {buttons.map((item) => (
              <Button
                key={item.id}
                variant={getButtonVariant(item)}
                size={config.buttonStyle?.size || "default"}
                onClick={() => handleButtonClick(item)}
                className={cn(
                  "relative",
                  selectedId === item.id && "ring-2 ring-primary ring-offset-1"
                )}
              >
                {/* 기본 버전 별표 */}
                {item.isDefault && config.buttonStyle?.defaultIndicator?.showStar && (
                  <Star className="mr-1.5 h-3.5 w-3.5 fill-yellow-400 text-yellow-400" />
                )}
                {item.displayText}
              </Button>
            ))}

            {/* 모달 링크 버튼 (인라인 위치) */}
            {modalLinkConfig?.enabled && modalLinkConfig?.triggerType === "button" && modalLinkConfig?.buttonPosition !== "header" && (
              <Button
                variant="outline"
                size={config.buttonStyle?.size || "default"}
                onClick={handleModalLinkClick}
                disabled={!selectedItem}
                title={!selectedItem ? "버튼을 먼저 선택하세요" : ""}
              >
                <ExternalLink className="mr-1 h-4 w-4" />
                {modalLinkConfig.buttonLabel || "상세 추가"}
              </Button>
            )}

            {/* 인라인 추가 버튼 */}
            {addButtonConfig?.show && addButtonConfig?.position !== "header" && (
              <Button
                variant="outline"
                size={config.buttonStyle?.size || "default"}
                onClick={handleAddClick}
                className="border-dashed"
              >
                <Plus className="mr-1 h-4 w-4" />
                {addButtonConfig.label || "추가"}
              </Button>
            )}
          </div>
        )}
      </div>
    </div>
  );
};

export default RelatedDataButtonsComponent;