"use client";

import React, { useState, useCallback, useEffect } from "react";
import { ComponentRendererProps } from "../../types";
import { SplitPanelLayoutConfig } from "./types";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Plus, Search, GripVertical, Loader2 } from "lucide-react";
import { dataApi } from "@/lib/api/data";
import { useToast } from "@/hooks/use-toast";

export interface SplitPanelLayoutComponentProps extends ComponentRendererProps {
  // 추가 props
}

/**
 * SplitPanelLayout 컴포넌트
 * 마스터-디테일 패턴의 좌우 분할 레이아웃
 */
export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps> = ({
  component,
  isDesignMode = false,
  isSelected = false,
  onClick,
  ...props
}) => {
  const componentConfig = (component.componentConfig || {}) as SplitPanelLayoutConfig;

  // 기본 설정값
  const splitRatio = componentConfig.splitRatio || 30;
  const resizable = componentConfig.resizable ?? true;
  const minLeftWidth = componentConfig.minLeftWidth || 200;
  const minRightWidth = componentConfig.minRightWidth || 300;

  // 데이터 상태
  const [leftData, setLeftData] = useState<any[]>([]);
  const [rightData, setRightData] = useState<any>(null);
  const [selectedLeftItem, setSelectedLeftItem] = useState<any>(null);
  const [leftSearchQuery, setLeftSearchQuery] = useState("");
  const [rightSearchQuery, setRightSearchQuery] = useState("");
  const [isLoadingLeft, setIsLoadingLeft] = useState(false);
  const [isLoadingRight, setIsLoadingRight] = useState(false);
  const { toast } = useToast();

  // 리사이저 드래그 상태
  const [isDragging, setIsDragging] = useState(false);
  const [leftWidth, setLeftWidth] = useState(splitRatio);

  // 컴포넌트 스타일
  const componentStyle: React.CSSProperties = {
    position: "absolute",
    left: `${component.style?.positionX || 0}px`,
    top: `${component.style?.positionY || 0}px`,
    width: `${component.style?.width || 1000}px`,
    height: `${component.style?.height || 600}px`,
    zIndex: component.style?.positionZ || 1,
    cursor: isDesignMode ? "pointer" : "default",
    border: isSelected ? "2px solid #3b82f6" : "1px solid #e5e7eb",
  };

  // 좌측 데이터 로드
  const loadLeftData = useCallback(async () => {
    const leftTableName = componentConfig.leftPanel?.tableName;
    if (!leftTableName || isDesignMode) return;

    setIsLoadingLeft(true);
    try {
      const result = await dataApi.getTableData(leftTableName, {
        page: 1,
        size: 100,
        searchTerm: leftSearchQuery || undefined,
      });
      setLeftData(result.data);
    } catch (error) {
      console.error("좌측 데이터 로드 실패:", error);
      toast({
        title: "데이터 로드 실패",
        description: "좌측 패널 데이터를 불러올 수 없습니다.",
        variant: "destructive",
      });
    } finally {
      setIsLoadingLeft(false);
    }
  }, [componentConfig.leftPanel?.tableName, leftSearchQuery, isDesignMode, toast]);

  // 우측 데이터 로드
  const loadRightData = useCallback(
    async (leftItem: any) => {
      const relationshipType = componentConfig.rightPanel?.relation?.type || "detail";
      const rightTableName = componentConfig.rightPanel?.tableName;

      if (!rightTableName || isDesignMode) return;

      setIsLoadingRight(true);
      try {
        if (relationshipType === "detail") {
          // 상세 모드: 동일 테이블의 상세 정보
          const primaryKey = leftItem.id || leftItem.ID || Object.values(leftItem)[0];
          const detail = await dataApi.getRecordDetail(rightTableName, primaryKey);
          setRightData(detail);
        } else if (relationshipType === "join") {
          // 조인 모드: 다른 테이블의 관련 데이터
          const leftColumn = componentConfig.rightPanel?.relation?.leftColumn;
          const rightColumn = componentConfig.rightPanel?.relation?.foreignKey;
          const leftTable = componentConfig.leftPanel?.tableName;

          if (leftColumn && rightColumn && leftTable) {
            const leftValue = leftItem[leftColumn];
            const joinedData = await dataApi.getJoinedData(
              leftTable,
              rightTableName,
              leftColumn,
              rightColumn,
              leftValue,
            );
            setRightData(joinedData[0] || null); // 첫 번째 관련 레코드
          }
        } else {
          // 커스텀 모드: 상세 정보로 폴백
          const primaryKey = leftItem.id || leftItem.ID || Object.values(leftItem)[0];
          const detail = await dataApi.getRecordDetail(rightTableName, primaryKey);
          setRightData(detail);
        }
      } catch (error) {
        console.error("우측 데이터 로드 실패:", error);
        toast({
          title: "데이터 로드 실패",
          description: "우측 패널 데이터를 불러올 수 없습니다.",
          variant: "destructive",
        });
      } finally {
        setIsLoadingRight(false);
      }
    },
    [
      componentConfig.rightPanel?.tableName,
      componentConfig.rightPanel?.relation,
      componentConfig.leftPanel?.tableName,
      isDesignMode,
      toast,
    ],
  );

  // 좌측 항목 선택 핸들러
  const handleLeftItemSelect = useCallback(
    (item: any) => {
      setSelectedLeftItem(item);
      loadRightData(item);
    },
    [loadRightData],
  );

  // 초기 데이터 로드
  useEffect(() => {
    if (!isDesignMode && componentConfig.autoLoad !== false) {
      loadLeftData();
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [isDesignMode, componentConfig.autoLoad]);

  // 검색어 변경 시 재로드
  useEffect(() => {
    if (!isDesignMode && leftSearchQuery) {
      const timer = setTimeout(() => {
        loadLeftData();
      }, 300); // 디바운스
      return () => clearTimeout(timer);
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [leftSearchQuery, isDesignMode]);

  // 리사이저 드래그 핸들러
  const handleMouseDown = (e: React.MouseEvent) => {
    if (!resizable) return;
    setIsDragging(true);
    e.preventDefault();
  };

  const handleMouseMove = useCallback(
    (e: MouseEvent) => {
      if (!isDragging) return;
      const containerWidth = (e.currentTarget as HTMLElement)?.offsetWidth || 1000;
      const newLeftWidth = (e.clientX / containerWidth) * 100;

      if (newLeftWidth > 20 && newLeftWidth < 80) {
        setLeftWidth(newLeftWidth);
      }
    },
    [isDragging],
  );

  const handleMouseUp = useCallback(() => {
    setIsDragging(false);
  }, []);

  React.useEffect(() => {
    if (isDragging) {
      document.addEventListener("mousemove", handleMouseMove as any);
      document.addEventListener("mouseup", handleMouseUp);
      return () => {
        document.removeEventListener("mousemove", handleMouseMove as any);
        document.removeEventListener("mouseup", handleMouseUp);
      };
    }
  }, [isDragging, handleMouseMove, handleMouseUp]);

  return (
    <div
      style={componentStyle}
      onClick={(e) => {
        if (isDesignMode) {
          e.stopPropagation();
          onClick?.(e);
        }
      }}
      className="flex overflow-hidden rounded-lg bg-white shadow-sm"
    >
      {/* 좌측 패널 */}
      <div
        style={{ width: `${leftWidth}%`, minWidth: `${minLeftWidth}px` }}
        className="flex flex-col border-r border-gray-200"
      >
        <Card className="flex h-full flex-col border-0 shadow-none">
          <CardHeader className="border-b border-gray-100 pb-3">
            <div className="flex items-center justify-between">
              <CardTitle className="text-base font-semibold">
                {componentConfig.leftPanel?.title || "좌측 패널"}
              </CardTitle>
              {componentConfig.leftPanel?.showAdd && (
                <Button size="sm" variant="outline">
                  <Plus className="mr-1 h-4 w-4" />
                  추가
                </Button>
              )}
            </div>
            {componentConfig.leftPanel?.showSearch && (
              <div className="relative mt-2">
                <Search className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-gray-400" />
                <Input
                  placeholder="검색..."
                  value={leftSearchQuery}
                  onChange={(e) => setLeftSearchQuery(e.target.value)}
                  className="pl-9"
                />
              </div>
            )}
          </CardHeader>
          <CardContent className="flex-1 overflow-auto p-2">
            {/* 좌측 데이터 목록 */}
            <div className="space-y-1">
              {isDesignMode ? (
                // 디자인 모드: 샘플 데이터
                <>
                  <div
                    onClick={() => handleLeftItemSelect({ id: 1, name: "항목 1" })}
                    className={`cursor-pointer rounded-md p-3 transition-colors hover:bg-gray-50 ${
                      selectedLeftItem?.id === 1 ? "bg-blue-50 text-blue-700" : "text-gray-700"
                    }`}
                  >
                    <div className="font-medium">항목 1</div>
                    <div className="text-xs text-gray-500">설명 텍스트</div>
                  </div>
                  <div
                    onClick={() => handleLeftItemSelect({ id: 2, name: "항목 2" })}
                    className={`cursor-pointer rounded-md p-3 transition-colors hover:bg-gray-50 ${
                      selectedLeftItem?.id === 2 ? "bg-blue-50 text-blue-700" : "text-gray-700"
                    }`}
                  >
                    <div className="font-medium">항목 2</div>
                    <div className="text-xs text-gray-500">설명 텍스트</div>
                  </div>
                  <div
                    onClick={() => handleLeftItemSelect({ id: 3, name: "항목 3" })}
                    className={`cursor-pointer rounded-md p-3 transition-colors hover:bg-gray-50 ${
                      selectedLeftItem?.id === 3 ? "bg-blue-50 text-blue-700" : "text-gray-700"
                    }`}
                  >
                    <div className="font-medium">항목 3</div>
                    <div className="text-xs text-gray-500">설명 텍스트</div>
                  </div>
                </>
              ) : isLoadingLeft ? (
                // 로딩 중
                <div className="flex items-center justify-center py-8">
                  <Loader2 className="h-6 w-6 animate-spin text-blue-500" />
                  <span className="ml-2 text-sm text-gray-500">데이터를 불러오는 중...</span>
                </div>
              ) : leftData.length > 0 ? (
                // 실제 데이터 표시
                leftData.map((item, index) => {
                  const itemId = item.id || item.ID || item[Object.keys(item)[0]] || index;
                  const isSelected = selectedLeftItem && (selectedLeftItem.id === itemId || selectedLeftItem === item);
                  // 첫 번째 2-3개 필드를 표시
                  const keys = Object.keys(item).filter((k) => k !== "id" && k !== "ID");
                  const displayTitle = item[keys[0]] || item.name || item.title || `항목 ${index + 1}`;
                  const displaySubtitle = keys[1] ? item[keys[1]] : null;

                  return (
                    <div
                      key={itemId}
                      onClick={() => handleLeftItemSelect(item)}
                      className={`cursor-pointer rounded-md p-3 transition-colors hover:bg-gray-50 ${
                        isSelected ? "bg-blue-50 text-blue-700" : "text-gray-700"
                      }`}
                    >
                      <div className="truncate font-medium">{displayTitle}</div>
                      {displaySubtitle && <div className="truncate text-xs text-gray-500">{displaySubtitle}</div>}
                    </div>
                  );
                })
              ) : (
                // 데이터 없음
                <div className="py-8 text-center text-sm text-gray-500">데이터가 없습니다.</div>
              )}
            </div>
          </CardContent>
        </Card>
      </div>

      {/* 리사이저 */}
      {resizable && (
        <div
          onMouseDown={handleMouseDown}
          className="group flex w-1 cursor-col-resize items-center justify-center bg-gray-200 transition-colors hover:bg-blue-400"
        >
          <GripVertical className="h-4 w-4 text-gray-400 group-hover:text-white" />
        </div>
      )}

      {/* 우측 패널 */}
      <div style={{ width: `${100 - leftWidth}%`, minWidth: `${minRightWidth}px` }} className="flex flex-col">
        <Card className="flex h-full flex-col border-0 shadow-none">
          <CardHeader className="border-b border-gray-100 pb-3">
            <div className="flex items-center justify-between">
              <CardTitle className="text-base font-semibold">
                {componentConfig.rightPanel?.title || "우측 패널"}
              </CardTitle>
              {componentConfig.rightPanel?.showAdd && (
                <Button size="sm" variant="outline">
                  <Plus className="mr-1 h-4 w-4" />
                  추가
                </Button>
              )}
            </div>
            {componentConfig.rightPanel?.showSearch && (
              <div className="relative mt-2">
                <Search className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-gray-400" />
                <Input
                  placeholder="검색..."
                  value={rightSearchQuery}
                  onChange={(e) => setRightSearchQuery(e.target.value)}
                  className="pl-9"
                />
              </div>
            )}
          </CardHeader>
          <CardContent className="flex-1 overflow-auto p-4">
            {/* 우측 상세 데이터 */}
            {isLoadingRight ? (
              // 로딩 중
              <div className="flex h-full items-center justify-center">
                <div className="text-center">
                  <Loader2 className="mx-auto h-8 w-8 animate-spin text-blue-500" />
                  <p className="mt-2 text-sm text-gray-500">상세 정보를 불러오는 중...</p>
                </div>
              </div>
            ) : rightData ? (
              // 실제 데이터 표시
              <div className="space-y-2">
                {Object.entries(rightData).map(([key, value]) => {
                  // null, undefined, 빈 문자열 제외
                  if (value === null || value === undefined || value === "") return null;

                  return (
                    <div key={key} className="rounded-lg border border-gray-200 bg-white p-4 shadow-sm">
                      <div className="mb-1 text-xs font-semibold tracking-wide text-gray-500 uppercase">{key}</div>
                      <div className="text-sm text-gray-900">{String(value)}</div>
                    </div>
                  );
                })}
              </div>
            ) : selectedLeftItem && isDesignMode ? (
              // 디자인 모드: 샘플 데이터
              <div className="space-y-4">
                <div className="rounded-lg border border-gray-200 p-4">
                  <h3 className="mb-2 font-medium text-gray-900">{selectedLeftItem.name} 상세 정보</h3>
                  <div className="space-y-2 text-sm">
                    <div className="flex justify-between">
                      <span className="text-gray-600">항목 1:</span>
                      <span className="font-medium">값 1</span>
                    </div>
                    <div className="flex justify-between">
                      <span className="text-gray-600">항목 2:</span>
                      <span className="font-medium">값 2</span>
                    </div>
                    <div className="flex justify-between">
                      <span className="text-gray-600">항목 3:</span>
                      <span className="font-medium">값 3</span>
                    </div>
                  </div>
                </div>
              </div>
            ) : (
              // 선택 없음
              <div className="flex h-full items-center justify-center">
                <div className="text-center text-sm text-gray-500">
                  <p className="mb-2">좌측에서 항목을 선택하세요</p>
                  <p className="text-xs">선택한 항목의 상세 정보가 여기에 표시됩니다</p>
                </div>
              </div>
            )}
          </CardContent>
        </Card>
      </div>
    </div>
  );
};

/**
 * SplitPanelLayout 래퍼 컴포넌트
 */
export const SplitPanelLayoutWrapper: React.FC<SplitPanelLayoutComponentProps> = (props) => {
  return <SplitPanelLayoutComponent {...props} />;
};