"use client";

import React, { useState, useEffect } from "react";
import { ComponentRendererProps } from "../../types";
import { AccordionBasicConfig, AccordionItem, DataSourceConfig, ContentFieldConfig } from "./types";
import { apiClient } from "@/lib/api/client";
import { getAdaptiveLabelColor } from "@/lib/utils/darkModeColor";

// 커스텀 아코디언 컴포넌트
interface CustomAccordionProps {
  items: AccordionItem[];
  type: "single" | "multiple";
  collapsible?: boolean;
  defaultValue?: string | string[];
  onValueChange?: (value: string | string[]) => void;
  className?: string;
  style?: React.CSSProperties;
  onClick?: (e: React.MouseEvent) => void;
  onDragStart?: (e: React.DragEvent) => void;
  onDragEnd?: (e: React.DragEvent) => void;
}

const CustomAccordion: React.FC<CustomAccordionProps> = ({
  items,
  type,
  collapsible = true,
  defaultValue,
  onValueChange,
  className = "",
  style,
  onClick,
  onDragStart,
  onDragEnd,
}) => {
  const [openItems, setOpenItems] = useState<Set<string>>(() => {
    if (type === "single") {
      return new Set(defaultValue ? [defaultValue as string] : []);
    } else {
      return new Set(defaultValue ? (defaultValue as string[]) : []);
    }
  });

  const toggleItem = (itemId: string) => {
    const newOpenItems = new Set(openItems);

    if (type === "single") {
      if (openItems.has(itemId)) {
        if (collapsible) {
          newOpenItems.clear();
        }
      } else {
        newOpenItems.clear();
        newOpenItems.add(itemId);
      }
    } else {
      if (openItems.has(itemId)) {
        newOpenItems.delete(itemId);
      } else {
        newOpenItems.add(itemId);
      }
    }

    setOpenItems(newOpenItems);

    if (onValueChange) {
      if (type === "single") {
        onValueChange(newOpenItems.size > 0 ? Array.from(newOpenItems)[0] : "");
      } else {
        onValueChange(Array.from(newOpenItems));
      }
    }
  };

  return (
    <div
      className={`custom-accordion ${className}`}
      style={{
        ...style,
        height: "auto",
        minHeight: "0",
      }}
      onClick={onClick}
      onDragStart={onDragStart}
      onDragEnd={onDragEnd}
    >
      {items.map((item, index) => (
        <div key={item.id} className="accordion-item">
          <button
            className="accordion-trigger"
            onClick={() => toggleItem(item.id)}
            style={{
              width: "100%",
              padding: "16px 20px",
              textAlign: "left",
              borderTop: "1px solid #e5e7eb",
              borderLeft: "1px solid #e5e7eb",
              borderRight: "1px solid #e5e7eb",
              borderBottom: openItems.has(item.id) ? "none" : index === items.length - 1 ? "1px solid #e5e7eb" : "none",
              backgroundColor: openItems.has(item.id) ? "#fef8f0" : "#f9fafb",
              cursor: "pointer",
              display: "flex",
              justifyContent: "space-between",
              alignItems: "center",
              fontSize: "14px",
              fontWeight: "600",
              transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
              borderRadius: openItems.has(item.id) ? "8px 8px 0 0" : "0",
              boxShadow: openItems.has(item.id) ? "0 2px 4px rgba(0, 0, 0, 0.1)" : "none",
            }}
            onMouseEnter={(e) => {
              e.currentTarget.style.backgroundColor = openItems.has(item.id) ? "#fef5e7" : "#f3f4f6";
              e.currentTarget.style.transform = "translateY(-1px)";
              e.currentTarget.style.boxShadow = "0 4px 8px rgba(0, 0, 0, 0.15)";
            }}
            onMouseLeave={(e) => {
              e.currentTarget.style.backgroundColor = openItems.has(item.id) ? "#fef8f0" : "#f9fafb";
              e.currentTarget.style.transform = "translateY(0)";
              e.currentTarget.style.boxShadow = openItems.has(item.id) ? "0 2px 4px rgba(0, 0, 0, 0.1)" : "none";
            }}
          >
            <span>{item.title}</span>
            <span
              style={{
                transform: openItems.has(item.id) ? "rotate(180deg)" : "rotate(0deg)",
                transition: "transform 0.2s ease",
              }}
            >
              ▼
            </span>
          </button>

          <div
            className="accordion-content"
            style={{
              maxHeight: openItems.has(item.id) ? "500px" : "0px",
              overflow: "hidden",
              transition: "max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
              borderLeft: openItems.has(item.id) ? "1px solid #e5e7eb" : "none",
              borderRight: openItems.has(item.id) ? "1px solid #e5e7eb" : "none",
              borderTop: "none",
              borderBottom: index === items.length - 1 ? "1px solid #e5e7eb" : "none",
              backgroundColor: "#ffffff",
              borderRadius: openItems.has(item.id) ? "0 0 8px 8px" : "0",
              boxShadow: openItems.has(item.id) ? "0 2px 4px rgba(0, 0, 0, 0.1)" : "none",
            }}
          >
            <div
              style={{
                padding: openItems.has(item.id) ? "12px 16px" : "0 16px",
                fontSize: "14px",
                color: "#6b7280",
                transition: "padding 0.3s ease",
                whiteSpace: "pre-line", // 줄바꿈 적용
                lineHeight: "1.5", // 줄 간격 설정
              }}
            >
              {/* 내용 필드가 배열이거나 복잡한 객체인 경우 처리 */}
              {
                typeof item.content === "string"
                  ? item.content
                  : Array.isArray(item.content)
                    ? item.content.join("\n") // 배열인 경우 줄바꿈으로 연결
                    : typeof item.content === "object"
                      ? Object.entries(item.content)
                          .map(([key, value]) => `${key}: ${value}`)
                          .join("\n") // 객체인 경우 키:값 형태로 줄바꿈
                      : String(item.content) // 기타 타입은 문자열로 변환
              }
            </div>
          </div>
        </div>
      ))}
    </div>
  );
};

export interface AccordionBasicComponentProps extends ComponentRendererProps {
  // 추가 props가 필요한 경우 여기에 정의
}

/**
 * AccordionBasic 컴포넌트
 * accordion-basic 컴포넌트입니다
 */
/**
 * 더미 테이블 데이터 생성
 */
const generateDummyTableData = (dataSource: DataSourceConfig, tableColumns?: any[]): AccordionItem[] => {
  const limit = dataSource.limit || 5;
  const items: AccordionItem[] = [];

  for (let i = 0; i < limit; i++) {
    // 더미 데이터 행 생성
    const dummyRow: any = {};

    // 테이블 컬럼을 기반으로 더미 데이터 생성
    if (tableColumns && tableColumns.length > 0) {
      tableColumns.forEach((column) => {
        const fieldName = column.columnName;

        // 필드 타입에 따른 더미 데이터 생성
        if (fieldName.includes("name") || fieldName.includes("title")) {
          dummyRow[fieldName] = `샘플 ${column.columnLabel || fieldName} ${i + 1}`;
        } else if (fieldName.includes("price") || fieldName.includes("amount")) {
          dummyRow[fieldName] = (Math.random() * 100000).toFixed(0);
        } else if (fieldName.includes("date")) {
          dummyRow[fieldName] = new Date(Date.now() - Math.random() * 30 * 24 * 60 * 60 * 1000)
            .toISOString()
            .split("T")[0];
        } else if (fieldName.includes("description") || fieldName.includes("content")) {
          dummyRow[fieldName] =
            `이것은 ${column.columnLabel || fieldName}에 대한 샘플 설명입니다. 항목 ${i + 1}의 상세 정보가 여기에 표시됩니다.`;
        } else if (fieldName.includes("id")) {
          dummyRow[fieldName] = `sample_${i + 1}`;
        } else if (fieldName.includes("status")) {
          dummyRow[fieldName] = ["활성", "비활성", "대기", "완료"][Math.floor(Math.random() * 4)];
        } else {
          dummyRow[fieldName] = `샘플 데이터 ${i + 1}`;
        }
      });
    } else {
      // 기본 더미 데이터
      dummyRow.id = `sample_${i + 1}`;
      dummyRow.title = `샘플 항목 ${i + 1}`;
      dummyRow.description = `이것은 샘플 항목 ${i + 1}에 대한 설명입니다.`;
      dummyRow.price = (Math.random() * 50000).toFixed(0);
      dummyRow.category = ["전자제품", "의류", "도서", "식품"][Math.floor(Math.random() * 4)];
      dummyRow.status = ["판매중", "품절", "대기"][Math.floor(Math.random() * 3)];
      dummyRow.created_at = new Date(Date.now() - Math.random() * 30 * 24 * 60 * 60 * 1000).toISOString().split("T")[0];
    }

    // 제목 생성
    const titleFieldName = dataSource.titleField || "title";
    const title = getFieldLabel(dummyRow, titleFieldName, tableColumns) || `샘플 항목 ${i + 1}`;

    // 내용 생성
    const content = buildContentFromFields(dummyRow, dataSource.contentFields);

    // ID 생성
    const idFieldName = dataSource.idField || "id";
    const id = dummyRow[idFieldName] || `sample_${i + 1}`;

    items.push({
      id: String(id),
      title,
      content: content || `샘플 항목 ${i + 1}의 내용입니다.`,
      defaultOpen: i === 0,
    });
  }

  return items;
};

/**
 * 여러 필드를 조합하여 내용 생성
 */
const buildContentFromFields = (row: any, contentFields?: ContentFieldConfig[]): string => {
  if (!contentFields || contentFields.length === 0) {
    return row.content || row.description || "내용이 없습니다.";
  }

  return contentFields
    .map((field) => {
      const value = row[field.fieldName];
      if (!value) return "";

      // 라벨이 있으면 "라벨: 값" 형식으로, 없으면 값만
      return field.label ? `${field.label}: ${value}` : value;
    })
    .filter(Boolean) // 빈 값 제거
    .join(contentFields[0]?.separator || "\n"); // 구분자로 연결 (기본값: 줄바꿈)
};

/**
 * 필드명에서 라벨 추출 (라벨이 있으면 라벨, 없으면 필드명)
 */
const getFieldLabel = (row: any, fieldName: string, tableColumns?: any[]): string => {
  // 테이블 컬럼 정보에서 라벨 찾기
  if (tableColumns) {
    const column = tableColumns.find((col) => col.columnName === fieldName);
    if (column && column.columnLabel) {
      return column.columnLabel;
    }
  }

  // 데이터에서 라벨 찾기 (예: title_label, name_label 등)
  const labelField = `${fieldName}_label`;
  if (row[labelField]) {
    return row[labelField];
  }

  // 기본값: 필드명 그대로 또는 데이터 값
  return row[fieldName] || fieldName;
};

/**
 * 데이터 소스에서 아코디언 아이템 가져오기
 */
const useAccordionData = (
  dataSource?: DataSourceConfig,
  isDesignMode: boolean = false,
  screenTableName?: string,
  tableColumns?: any[],
) => {
  const [items, setItems] = useState<AccordionItem[]>([]);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    if (!dataSource || dataSource.sourceType === "static") {
      // 정적 데이터 소스인 경우 items 사용
      return;
    }

    const fetchData = async () => {
      setLoading(true);
      setError(null);

      try {
        if (dataSource.sourceType === "table") {
          // 테이블 이름 결정: 화면 테이블 또는 직접 입력한 테이블
          const targetTableName = dataSource.useScreenTable ? screenTableName : dataSource.tableName;

          console.log("🔍 아코디언 테이블 디버깅:", {
            sourceType: dataSource.sourceType,
            useScreenTable: dataSource.useScreenTable,
            screenTableName,
            manualTableName: dataSource.tableName,
            targetTableName,
            isDesignMode,
            tableColumns: tableColumns?.length || 0,
          });

          if (!targetTableName) {
            console.warn("⚠️ 테이블이 지정되지 않음");
            console.log("- screenTableName:", screenTableName);
            console.log("- dataSource.tableName:", dataSource.tableName);
            console.log("- useScreenTable:", dataSource.useScreenTable);

            // 실제 화면에서는 에러 메시지 표시, 개발 모드에서만 더미 데이터
            if (isDesignMode || process.env.NODE_ENV === "development") {
              console.log("🔧 개발 환경: 더미 데이터로 대체");
              const dummyData = generateDummyTableData(dataSource, tableColumns);
              setItems(dummyData);
            } else {
              setError("테이블이 설정되지 않았습니다. 설정 패널에서 테이블을 지정해주세요.");
            }
            return;
          }

          // 개발 모드이거나 API가 없을 때 더미 데이터 사용
          if (isDesignMode) {
            console.log("🎨 디자인 모드: 더미 데이터 사용");
            const dummyData = generateDummyTableData(dataSource, tableColumns);
            setItems(dummyData);
            return;
          }

          console.log(`🌐 실제 API 호출 시도: /api/data/${targetTableName}`);

          try {
            // 테이블에서 전체 데이터 가져오기 (limit 제거하여 모든 데이터 표시)
            const params = new URLSearchParams({
              limit: "1000", // 충분히 큰 값으로 설정하여 모든 데이터 가져오기
              ...(dataSource.orderBy && { orderBy: dataSource.orderBy }),
              ...(dataSource.filters &&
                Object.entries(dataSource.filters).reduce(
                  (acc, [key, value]) => {
                    acc[key] = String(value);
                    return acc;
                  },
                  {} as Record<string, string>,
                )),
            });

            const response = await apiClient.get(`/data/${targetTableName}?${params}`);
            const data = response.data;

            if (data && Array.isArray(data)) {
              const accordionItems: AccordionItem[] = data.map((row: any, index: number) => {
                // 제목: 라벨이 있으면 라벨 우선, 없으면 필드값
                const titleFieldName = dataSource.titleField || "title";
                const title = getFieldLabel(row, titleFieldName, tableColumns) || `아이템 ${index + 1}`;

                // 내용: 여러 필드 조합 가능
                const content = buildContentFromFields(row, dataSource.contentFields);

                // ID: 지정된 필드 또는 기본값
                const idFieldName = dataSource.idField || "id";
                const id = row[idFieldName] || `item-${index}`;

                return {
                  id: String(id),
                  title,
                  content,
                  defaultOpen: index === 0, // 첫 번째 아이템만 기본으로 열림
                };
              });
              setItems(accordionItems);
            }
          } catch (apiError) {
            console.warn("⚠️ 테이블 API 호출 실패, 실제 화면에서도 더미 데이터로 대체:", apiError);
            console.log("📊 테이블 API 오류 상세:", {
              targetTableName,
              error: apiError.message,
              dataSource,
              timestamp: new Date().toISOString(),
            });

            // 실제 화면에서도 API 오류 시 더미 데이터로 대체
            const dummyData = generateDummyTableData(dataSource, tableColumns);
            setItems(dummyData);

            // 사용자에게 알림 (에러는 콘솔에만 표시)
            console.info("💡 임시로 샘플 데이터를 표시합니다. 백엔드 API 연결을 확인해주세요.");
          }
        } else if (dataSource.sourceType === "api" && dataSource.apiEndpoint) {
          // 개발 모드이거나 API가 없을 때 더미 데이터 사용
          if (isDesignMode) {
            console.log("🎨 디자인 모드: API 더미 데이터 사용");
            const dummyData = generateDummyTableData(dataSource, tableColumns);
            setItems(dummyData);
            return;
          }

          try {
            // API에서 데이터 가져오기
            const response = await fetch(dataSource.apiEndpoint, {
              method: "GET",
              headers: {
                "Content-Type": "application/json",
              },
            });

            if (!response.ok) {
              throw new Error(`HTTP error! status: ${response.status}`);
            }

            const data = await response.json();

            if (data && Array.isArray(data)) {
              const accordionItems: AccordionItem[] = data.map((row: any, index: number) => {
                // 제목: 라벨이 있으면 라벨 우선, 없으면 필드값
                const titleFieldName = dataSource.titleField || "title";
                const title = getFieldLabel(row, titleFieldName, tableColumns) || `아이템 ${index + 1}`;

                // 내용: 여러 필드 조합 가능
                const content = buildContentFromFields(row, dataSource.contentFields);

                // ID: 지정된 필드 또는 기본값
                const idFieldName = dataSource.idField || "id";
                const id = row[idFieldName] || `item-${index}`;

                return {
                  id: String(id),
                  title,
                  content,
                  defaultOpen: index === 0,
                };
              });
              setItems(accordionItems);
            }
          } catch (apiError) {
            console.warn("⚠️ 엔드포인트 API 호출 실패, 실제 화면에서도 더미 데이터로 대체:", apiError);
            console.log("📊 엔드포인트 API 오류 상세:", {
              apiEndpoint: dataSource.apiEndpoint,
              error: apiError.message,
              dataSource,
              timestamp: new Date().toISOString(),
            });

            // 실제 화면에서도 API 오류 시 더미 데이터로 대체
            const dummyData = generateDummyTableData(dataSource, tableColumns);
            setItems(dummyData);

            // 사용자에게 알림 (에러는 콘솔에만 표시)
            console.info("💡 임시로 샘플 데이터를 표시합니다. 백엔드 API 연결을 확인해주세요.");
          }
        }
      } catch (err) {
        console.error("아코디언 데이터 로드 실패:", err);

        // 디자인 모드이거나 개발 환경에서는 더미 데이터로 대체
        if (isDesignMode || process.env.NODE_ENV === "development") {
          console.log("🔧 개발 환경: 더미 데이터로 대체");
          const dummyData = dataSource
            ? generateDummyTableData(dataSource, tableColumns)
            : [
                {
                  id: "demo-1",
                  title: "데모 아이템 1",
                  content: "이것은 데모용 내용입니다.",
                  defaultOpen: true,
                },
                {
                  id: "demo-2",
                  title: "데모 아이템 2",
                  content: "두 번째 데모 아이템의 내용입니다.",
                  defaultOpen: false,
                },
              ];
          setItems(dummyData);
        } else {
          setError("데이터를 불러오는데 실패했습니다.");
        }
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, [dataSource, isDesignMode, screenTableName, tableColumns]);

  return { items, loading, error };
};

export const AccordionBasicComponent: React.FC<AccordionBasicComponentProps> = ({
  component,
  isDesignMode = false,
  isSelected = false,
  onClick,
  onDragStart,
  onDragEnd,
  ...props
}) => {
  const componentConfig = (component.componentConfig || {}) as AccordionBasicConfig;

  // 화면 테이블 정보 추출
  const screenTableName = (component as any).tableName || props.tableName;
  const tableColumns = (component as any).tableColumns || props.tableColumns;

  console.log("🔍 아코디언 컴포넌트 테이블 정보:", {
    componentTableName: (component as any).tableName,
    propsTableName: props.tableName,
    finalScreenTableName: screenTableName,
    tableColumnsCount: tableColumns?.length || 0,
    componentConfig,
    dataSource: componentConfig.dataSource,
    isDesignMode,
  });

  // 데이터 소스에서 데이터 가져오기
  const {
    items: dataItems,
    loading,
    error,
  } = useAccordionData(componentConfig.dataSource, isDesignMode, screenTableName, tableColumns);

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

  // 디버깅용 로그
  if (isDesignMode) {
    console.log("🎯 Accordion 높이 디버깅:", {
      componentSizeHeight: component.size?.height,
      componentStyleHeight: component.style?.height,
      finalHeight: componentStyle.height,
    });
  }

  // 클릭 핸들러
  const handleClick = (e: React.MouseEvent) => {
    if (isDesignMode) {
      e.stopPropagation();
      onClick?.(e);
    }
  };

  // className 생성
  const className = [
    "accordion-basic-component",
    isSelected ? "selected" : "",
    componentConfig.disabled ? "disabled" : "",
  ]
    .filter(Boolean)
    .join(" ");

  // DOM props 필터링 (React 관련 props 제거)
  const {
    component: _component,
    isDesignMode: _isDesignMode,
    isSelected: _isSelected,
    isInteractive: _isInteractive,
    screenId: _screenId,
    tableName: _tableName,
    onRefresh: _onRefresh,
    onClose: _onClose,
    formData: _formData,
    onFormDataChange: _onFormDataChange,
    componentConfig: _componentConfig,
    autoGeneration: _autoGeneration,
    hidden: _hidden,
    isInModal: _isInModal,
    isPreview: _isPreview,
    originalData: _originalData,
    _originalData: __originalData,
    _initialData: __initialData,
    _groupedData: __groupedData,
    allComponents: _allComponents,
    selectedRows: _selectedRows,
    selectedRowsData: _selectedRowsData,
    refreshKey: _refreshKey,
    onUpdateLayout: _onUpdateLayout,
    onSelectedRowsChange: _onSelectedRowsChange,
    onConfigChange: _onConfigChange,
    onZoneClick: _onZoneClick,
    selectedScreen: _selectedScreen,
    onZoneComponentDrop: _onZoneComponentDrop,
    ...restProps
  } = props;
  
  // filterDOMProps import 추가 필요
  const { filterDOMProps } = require("@/lib/utils/domPropsFilter");
  const domProps = filterDOMProps(restProps);

  // 사용할 아이템들 결정 (우선순위: 데이터소스 > 정적아이템 > 기본아이템)
  const finalItems = (() => {
    // 데이터 소스가 설정되어 있고 데이터가 있으면 데이터 소스 아이템 사용
    if (componentConfig.dataSource && componentConfig.dataSource.sourceType !== "static" && dataItems.length > 0) {
      return dataItems;
    }

    // 정적 아이템이 설정되어 있으면 사용
    if (componentConfig.items && componentConfig.items.length > 0) {
      return componentConfig.items;
    }

    // 기본 아이템들 (데모용)
    return [
      {
        id: "item-1",
        title: "제품 정보",
        content:
          "우리의 주력 제품은 최첨단 기술과 세련된 디자인을 결합합니다. 프리미엄 소재로 제작되어 탁월한 성능과 신뢰성을 제공합니다.",
        defaultOpen: true,
      },
      {
        id: "item-2",
        title: "배송 정보",
        content:
          "신뢰할 수 있는 택배 파트너를 통해 전 세계 배송을 제공합니다. 일반 배송은 3-5 영업일, 특급 배송은 1-2 영업일 내 배송됩니다.",
      },
      {
        id: "item-3",
        title: "반품 정책",
        content:
          "포괄적인 30일 반품 정책으로 제품을 보장합니다. 완전히 만족하지 않으시면 원래 상태로 제품을 반품하시면 됩니다.",
      },
    ];
  })();

  const items = finalItems;
  const accordionType = componentConfig.type || "single";
  const collapsible = componentConfig.collapsible !== false;
  const defaultValue = componentConfig.defaultValue || items.find((item) => item.defaultOpen)?.id;

  // 값 변경 핸들러
  const handleValueChange = (value: string | string[]) => {
    if (!isDesignMode && componentConfig.onValueChange) {
      componentConfig.onValueChange(value);
    }
  };

  return (
    <div
      style={{
        ...componentStyle,
        position: "relative",
        height: componentStyle.height, // 명시적 높이 설정
        maxHeight: componentStyle.height, // 최대 높이 제한
        overflow: "visible", // 자식 요소에서 스크롤 처리
        flex: "none", // flex 비활성화
        display: "block",
      }}
      className={className}
      {...domProps}
    >
      {/* 라벨 렌더링 */}
      {component.label && component.style?.labelDisplay !== false && (
        <label
          style={{
            position: "absolute",
            top: "-25px",
            left: "0px",
            fontSize: component.style?.labelFontSize || "14px",
            color: getAdaptiveLabelColor(component.style?.labelColor),
            fontWeight: "500",
          }}
        >
          {component.label}
          {component.required && <span style={{ color: "#ef4444" }}>*</span>}
        </label>
      )}

      {loading ? (
        <div className="flex h-full w-full items-center justify-center">
          <div className="text-sm text-muted-foreground">데이터를 불러오는 중...</div>
        </div>
      ) : error && !isDesignMode ? (
        <div className="flex h-full w-full items-center justify-center">
          <div className="text-sm text-destructive">{error}</div>
        </div>
      ) : (
        <div
          style={{
            height: "100%",
            width: "100%",
            overflow: "auto",
            position: "absolute",
            top: "0",
            left: "0",
            right: "0",
            bottom: "0",
          }}
        >
          <CustomAccordion
            items={items}
            type={accordionType}
            collapsible={collapsible}
            defaultValue={defaultValue}
            onValueChange={handleValueChange}
            className="w-full"
            onClick={handleClick}
            onDragStart={onDragStart}
            onDragEnd={onDragEnd}
          />
        </div>
      )}
    </div>
  );
};

/**
 * AccordionBasic 래퍼 컴포넌트
 * 추가적인 로직이나 상태 관리가 필요한 경우 사용
 */
export const AccordionBasicWrapper: React.FC<AccordionBasicComponentProps> = (props) => {
  return <AccordionBasicComponent {...props} />;
};
