"use client";

import React, { useEffect, useState } from "react";
import { Input } from "@/components/ui/input";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Button } from "@/components/ui/button";
import { Trash2, Loader2, X } from "lucide-react";
import { SimpleRepeaterTableProps, SimpleRepeaterColumnConfig } from "./types";
import { cn } from "@/lib/utils";
import { ComponentRendererProps } from "@/types/component";
import { useCalculation } from "./useCalculation";
import { apiClient } from "@/lib/api/client";

export interface SimpleRepeaterTableComponentProps extends ComponentRendererProps {
  config?: SimpleRepeaterTableProps;
  // SimpleRepeaterTableProps의 개별 prop들도 지원 (호환성)
  value?: any[];
  onChange?: (newData: any[]) => void;
  columns?: SimpleRepeaterColumnConfig[];
  calculationRules?: any[];
  readOnly?: boolean;
  showRowNumber?: boolean;
  allowDelete?: boolean;
  maxHeight?: string;
}

export function SimpleRepeaterTableComponent({
  // ComponentRendererProps (자동 전달)
  component,
  isDesignMode = false,
  isSelected = false,
  isInteractive = false,
  onClick,
  className,
  formData,
  onFormDataChange,

  // SimpleRepeaterTable 전용 props
  config,
  value: propValue,
  onChange: propOnChange,
  columns: propColumns,
  calculationRules: propCalculationRules,
  readOnly: propReadOnly,
  showRowNumber: propShowRowNumber,
  allowDelete: propAllowDelete,
  maxHeight: propMaxHeight,

  ...props
}: SimpleRepeaterTableComponentProps) {
  // config 또는 component.config 또는 개별 prop 우선순위로 병합
  const componentConfig = {
    ...config,
    ...component?.config,
  };

  // config prop 우선, 없으면 개별 prop 사용
  const columns = componentConfig?.columns || propColumns || [];
  const calculationRules = componentConfig?.calculationRules || propCalculationRules || [];
  const readOnly = componentConfig?.readOnly ?? propReadOnly ?? false;
  const showRowNumber = componentConfig?.showRowNumber ?? propShowRowNumber ?? true;
  const allowDelete = componentConfig?.allowDelete ?? propAllowDelete ?? true;
  const maxHeight = componentConfig?.maxHeight || propMaxHeight || "240px";

  // value는 formData[columnName] 우선, 없으면 prop 사용
  const columnName = component?.columnName;
  const value = (columnName && formData?.[columnName]) || componentConfig?.value || propValue || [];

  // 🆕 로딩 상태
  const [isLoading, setIsLoading] = useState(false);
  const [loadError, setLoadError] = useState<string | null>(null);

  // onChange 래퍼 (기존 onChange 콜백 + onFormDataChange 호출)
  const handleChange = (newData: any[]) => {
    // 기존 onChange 콜백 호출 (호환성)
    const externalOnChange = componentConfig?.onChange || propOnChange;
    if (externalOnChange) {
      externalOnChange(newData);
    }

    // onFormDataChange 호출하여 EditModal의 groupData 업데이트
    if (onFormDataChange && columnName) {
      onFormDataChange(columnName, newData);
    }
  };

  // 계산 hook
  const { calculateRow, calculateAll } = useCalculation(calculationRules);

  // 🆕 초기 데이터 로드
  useEffect(() => {
    const loadInitialData = async () => {
      const initialConfig = componentConfig?.initialDataConfig;
      if (!initialConfig || !initialConfig.sourceTable) {
        return; // 초기 데이터 설정이 없으면 로드하지 않음
      }

      setIsLoading(true);
      setLoadError(null);

      try {
        // 필터 조건 생성
        const filters: Record<string, any> = {};

        if (initialConfig.filterConditions) {
          for (const condition of initialConfig.filterConditions) {
            let filterValue = condition.value;

            // formData에서 값 가져오기
            if (condition.valueFromField && formData) {
              filterValue = formData[condition.valueFromField];
            }

            filters[condition.field] = filterValue;
          }
        }

        // API 호출
        const response = await apiClient.post(
          `/table-management/tables/${initialConfig.sourceTable}/data`,
          {
            search: filters,
            page: 1,
            size: 1000, // 대량 조회
          }
        );

        if (response.data.success && response.data.data?.data) {
          const loadedData = response.data.data.data;

          // 1. 기본 데이터 매핑 (Direct & Manual)
          const baseMappedData = loadedData.map((row: any) => {
            const mappedRow: any = { ...row }; // 원본 데이터 유지 (조인 키 참조용)

            for (const col of columns) {
              if (col.sourceConfig) {
                if (col.sourceConfig.type === "direct" && col.sourceConfig.sourceColumn) {
                  mappedRow[col.field] = row[col.sourceConfig.sourceColumn];
                } else if (col.sourceConfig.type === "manual") {
                  mappedRow[col.field] = col.defaultValue;
                }
                // Join은 2단계에서 처리
              } else {
                mappedRow[col.field] = row[col.field] ?? col.defaultValue;
              }
            }
            return mappedRow;
          });

          // 2. 조인 데이터 처리
          const joinColumns = columns.filter(
            (col) => col.sourceConfig?.type === "join" && col.sourceConfig.joinTable && col.sourceConfig.joinKey
          );

          if (joinColumns.length > 0) {
            // 조인 테이블별로 그룹화
            const joinGroups = new Map<string, { key: string; refKey: string; cols: typeof columns }>();

            joinColumns.forEach((col) => {
              const table = col.sourceConfig!.joinTable!;
              const key = col.sourceConfig!.joinKey!;
              // refKey가 없으면 key와 동일하다고 가정 (하위 호환성)
              const refKey = col.sourceConfig!.joinRefKey || key;
              const groupKey = `${table}:${key}:${refKey}`;

              if (!joinGroups.has(groupKey)) {
                joinGroups.set(groupKey, { key, refKey, cols: [] });
              }
              joinGroups.get(groupKey)!.cols.push(col);
            });

            // 각 그룹별로 데이터 조회 및 병합
            await Promise.all(
              Array.from(joinGroups.entries()).map(async ([groupKey, { key, refKey, cols }]) => {
                const [tableName] = groupKey.split(":");

                // 조인 키 값 수집 (중복 제거)
                const keyValues = Array.from(new Set(
                  baseMappedData
                    .map((row: any) => row[key])
                    .filter((v: any) => v !== undefined && v !== null)
                ));

                if (keyValues.length === 0) return;

                try {
                  // 조인 테이블 조회
                  // refKey(타겟 테이블 컬럼)로 검색
                  const response = await apiClient.post(
                    `/table-management/tables/${tableName}/data`,
                    {
                      search: { [refKey]: keyValues }, // { id: [1, 2, 3] }
                      page: 1,
                      size: 1000,
                    }
                  );

                  if (response.data.success && response.data.data?.data) {
                    const joinedRows = response.data.data.data;
                    // 조인 데이터 맵 생성 (refKey -> row)
                    const joinMap = new Map(joinedRows.map((r: any) => [r[refKey], r]));

                    // 데이터 병합
                    baseMappedData.forEach((row: any) => {
                      const keyValue = row[key];
                      const joinedRow = joinMap.get(keyValue);

                      if (joinedRow) {
                        cols.forEach((col) => {
                          if (col.sourceConfig?.joinColumn) {
                            row[col.field] = joinedRow[col.sourceConfig.joinColumn];
                          }
                        });
                      }
                    });
                  }
                } catch (error) {
                  console.error(`조인 실패 (${tableName}):`, error);
                  // 실패 시 무시하고 진행 (값은 undefined)
                }
              })
            );
          }

          const mappedData = baseMappedData;

          // 계산 필드 적용
          const calculatedData = calculateAll(mappedData);
          handleChange(calculatedData);
        }
      } catch (error: any) {
        console.error("초기 데이터 로드 실패:", error);
        setLoadError(error.message || "데이터를 불러올 수 없습니다");
      } finally {
        setIsLoading(false);
      }
    };

    loadInitialData();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [componentConfig?.initialDataConfig]);

  // 초기 데이터에 계산 필드 적용
  useEffect(() => {
    if (value.length > 0 && calculationRules.length > 0) {
      const calculated = calculateAll(value);
      // 값이 실제로 변경된 경우만 업데이트
      if (JSON.stringify(calculated) !== JSON.stringify(value)) {
        handleChange(calculated);
      }
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  // 🆕 저장 요청 시 테이블별로 데이터 그룹화 (beforeFormSave 이벤트 리스너)
  useEffect(() => {
    const handleSaveRequest = async (event: Event) => {
      if (value.length === 0) {
        console.warn("⚠️ [SimpleRepeaterTable] 저장할 데이터 없음");
        return;
      }

      // 🆕 테이블별로 데이터 그룹화
      const dataByTable: Record<string, any[]> = {};

      for (const row of value) {
        // 각 행의 데이터를 테이블별로 분리
        for (const col of columns) {
          // 저장 설정이 있고 저장이 활성화된 경우에만
          if (col.targetConfig && col.targetConfig.targetTable && col.targetConfig.saveEnabled !== false) {
            const targetTable = col.targetConfig.targetTable;
            const targetColumn = col.targetConfig.targetColumn || col.field;

            // 테이블 그룹 초기화
            if (!dataByTable[targetTable]) {
              dataByTable[targetTable] = [];
            }

            // 해당 테이블의 데이터 찾기 또는 생성
            let tableRow = dataByTable[targetTable].find((r: any) => r._rowIndex === row._rowIndex);
            if (!tableRow) {
              tableRow = { _rowIndex: row._rowIndex };
              dataByTable[targetTable].push(tableRow);
            }

            // 컬럼 값 저장
            tableRow[targetColumn] = row[col.field];
          }
        }
      }

      // _rowIndex 제거
      Object.keys(dataByTable).forEach((tableName) => {
        dataByTable[tableName] = dataByTable[tableName].map((row: any) => {
          const { _rowIndex, ...rest } = row;
          return rest;
        });
      });

      console.log("✅ [SimpleRepeaterTable] 테이블별 저장 데이터:", dataByTable);

      // CustomEvent의 detail에 테이블별 데이터 추가
      if (event instanceof CustomEvent && event.detail) {
        // 각 테이블별로 데이터 전달
        Object.entries(dataByTable).forEach(([tableName, rows]) => {
          const key = `${columnName || component?.id}_${tableName}`;
          event.detail.formData[key] = rows.map((row: any) => ({
            ...row,
            _targetTable: tableName,
          }));
        });

        console.log("✅ [SimpleRepeaterTable] 저장 데이터 준비:", {
          tables: Object.keys(dataByTable),
          totalRows: Object.values(dataByTable).reduce((sum, rows) => sum + rows.length, 0),
        });
      }

      // 기존 onFormDataChange도 호출 (호환성)
      if (onFormDataChange && columnName) {
        // 테이블별 데이터를 통합하여 전달
        onFormDataChange(columnName, Object.entries(dataByTable).flatMap(([table, rows]) =>
          rows.map((row: any) => ({ ...row, _targetTable: table }))
        ));
      }
    };

    // 저장 버튼 클릭 시 데이터 수집
    window.addEventListener("beforeFormSave", handleSaveRequest as EventListener);

    return () => {
      window.removeEventListener("beforeFormSave", handleSaveRequest as EventListener);
    };
  }, [value, columns, columnName, component?.id, onFormDataChange]);

  const handleCellEdit = (rowIndex: number, field: string, cellValue: any) => {
    const newRow = { ...value[rowIndex], [field]: cellValue };

    // 계산 필드 업데이트
    const calculatedRow = calculateRow(newRow);

    const newData = [...value];
    newData[rowIndex] = calculatedRow;
    handleChange(newData);
  };

  const handleRowDelete = (rowIndex: number) => {
    const newData = value.filter((_, i) => i !== rowIndex);
    handleChange(newData);
  };

  const renderCell = (
    row: any,
    column: SimpleRepeaterColumnConfig,
    rowIndex: number
  ) => {
    const cellValue = row[column.field];

    // 계산 필드는 편집 불가
    if (column.calculated || !column.editable || readOnly) {
      return (
        <div className="px-2 py-1">
          {column.type === "number"
            ? typeof cellValue === "number"
              ? cellValue.toLocaleString()
              : cellValue || "0"
            : cellValue || "-"}
        </div>
      );
    }

    // 편집 가능한 필드
    switch (column.type) {
      case "number":
        return (
          <Input
            type="number"
            value={cellValue || ""}
            onChange={(e) =>
              handleCellEdit(rowIndex, column.field, parseFloat(e.target.value) || 0)
            }
            className="h-7 text-xs"
          />
        );

      case "date":
        return (
          <Input
            type="date"
            value={cellValue || ""}
            onChange={(e) => handleCellEdit(rowIndex, column.field, e.target.value)}
            className="h-7 text-xs"
          />
        );

      case "select":
        return (
          <Select
            value={cellValue || ""}
            onValueChange={(newValue) =>
              handleCellEdit(rowIndex, column.field, newValue)
            }
          >
            <SelectTrigger className="h-7 text-xs">
              <SelectValue />
            </SelectTrigger>
            <SelectContent>
              {column.selectOptions?.map((option) => (
                <SelectItem key={option.value} value={option.value}>
                  {option.label}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
        );

      default: // text
        return (
          <Input
            type="text"
            value={cellValue || ""}
            onChange={(e) => handleCellEdit(rowIndex, column.field, e.target.value)}
            className="h-7 text-xs"
          />
        );
    }
  };

  // 로딩 중일 때
  if (isLoading) {
    return (
      <div className={cn("border rounded-md overflow-hidden bg-background", className)}>
        <div className="flex items-center justify-center py-12" style={{ minHeight: maxHeight }}>
          <div className="text-center">
            <Loader2 className="h-8 w-8 animate-spin text-primary mx-auto mb-2" />
            <p className="text-sm text-muted-foreground">데이터를 불러오는 중...</p>
          </div>
        </div>
      </div>
    );
  }

  // 에러 발생 시
  if (loadError) {
    return (
      <div className={cn("border rounded-md overflow-hidden bg-background", className)}>
        <div className="flex items-center justify-center py-12" style={{ minHeight: maxHeight }}>
          <div className="text-center">
            <div className="w-12 h-12 rounded-full bg-destructive/10 flex items-center justify-center mx-auto mb-2">
              <X className="h-6 w-6 text-destructive" />
            </div>
            <p className="text-sm font-medium text-destructive mb-1">데이터 로드 실패</p>
            <p className="text-xs text-muted-foreground">{loadError}</p>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className={cn("border rounded-md overflow-hidden bg-background", className)}>
      <div
        className="overflow-x-auto overflow-y-auto"
        style={{ maxHeight }}
      >
        <table className="w-full text-xs sm:text-sm">
          <thead className="bg-muted sticky top-0 z-10">
            <tr>
              {showRowNumber && (
                <th className="px-4 py-2 text-left font-medium text-muted-foreground w-12">
                  #
                </th>
              )}
              {columns.map((col) => (
                <th
                  key={col.field}
                  className="px-4 py-2 text-left font-medium text-muted-foreground"
                  style={{ width: col.width }}
                >
                  {col.label}
                  {col.required && <span className="text-destructive ml-1">*</span>}
                </th>
              ))}
              {!readOnly && allowDelete && (
                <th className="px-4 py-2 text-left font-medium text-muted-foreground w-20">
                  삭제
                </th>
              )}
            </tr>
          </thead>
          <tbody className="bg-background">
            {value.length === 0 ? (
              <tr>
                <td
                  colSpan={columns.length + (showRowNumber ? 1 : 0) + (allowDelete && !readOnly ? 1 : 0)}
                  className="px-4 py-8 text-center text-muted-foreground"
                >
                  표시할 데이터가 없습니다
                </td>
              </tr>
            ) : (
              value.map((row, rowIndex) => (
                <tr key={rowIndex} className="border-t hover:bg-accent/50">
                  {showRowNumber && (
                    <td className="px-4 py-2 text-center text-muted-foreground">
                      {rowIndex + 1}
                    </td>
                  )}
                  {columns.map((col) => (
                    <td key={col.field} className="px-2 py-1">
                      {renderCell(row, col, rowIndex)}
                    </td>
                  ))}
                  {!readOnly && allowDelete && (
                    <td className="px-4 py-2 text-center">
                      <Button
                        variant="ghost"
                        size="sm"
                        onClick={() => handleRowDelete(rowIndex)}
                        className="h-7 w-7 p-0 text-destructive hover:text-destructive"
                      >
                        <Trash2 className="h-4 w-4" />
                      </Button>
                    </td>
                  )}
                </tr>
              ))
            )}
          </tbody>
        </table>
      </div>
    </div>
  );
}