"use client";

import React, { useState, useEffect } from "react";
import { entityJoinApi } from "@/lib/api/entityJoin";
import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectLabel,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { Label } from "@/components/ui/label";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { Checkbox } from "@/components/ui/checkbox";
import { Trash2 } from "lucide-react";

interface CardDisplayConfigPanelProps {
  config: any;
  onChange: (config: any) => void;
  screenTableName?: string;
  tableColumns?: any[];
}

interface EntityJoinColumn {
  tableName: string;
  columnName: string;
  columnLabel: string;
  dataType: string;
  joinAlias: string;
  suggestedLabel: string;
}

interface JoinTable {
  tableName: string;
  currentDisplayColumn: string;
  joinConfig?: {
    sourceColumn: string;
  };
  availableColumns: Array<{
    columnName: string;
    columnLabel: string;
    dataType: string;
    description?: string;
  }>;
}

/**
 * CardDisplay 설정 패널
 * 카드 레이아웃과 동일한 설정 UI 제공 + 엔티티 조인 컬럼 지원
 */
export const CardDisplayConfigPanel: React.FC<CardDisplayConfigPanelProps> = ({
  config,
  onChange,
  screenTableName,
  tableColumns = [],
}) => {
  // 엔티티 조인 컬럼 상태
  const [entityJoinColumns, setEntityJoinColumns] = useState<{
    availableColumns: EntityJoinColumn[];
    joinTables: JoinTable[];
  }>({ availableColumns: [], joinTables: [] });
  const [loadingEntityJoins, setLoadingEntityJoins] = useState(false);

  // 엔티티 조인 컬럼 정보 가져오기
  useEffect(() => {
    const fetchEntityJoinColumns = async () => {
      const tableName = config.tableName || screenTableName;
      if (!tableName) {
        setEntityJoinColumns({ availableColumns: [], joinTables: [] });
        return;
      }

      setLoadingEntityJoins(true);
      try {
        const result = await entityJoinApi.getEntityJoinColumns(tableName);
        setEntityJoinColumns({
          availableColumns: result.availableColumns || [],
          joinTables: result.joinTables || [],
        });
      } catch (error) {
        console.error("Entity 조인 컬럼 조회 오류:", error);
        setEntityJoinColumns({ availableColumns: [], joinTables: [] });
      } finally {
        setLoadingEntityJoins(false);
      }
    };

    fetchEntityJoinColumns();
  }, [config.tableName, screenTableName]);

  const handleChange = (key: string, value: any) => {
    onChange({ ...config, [key]: value });
  };

  const handleNestedChange = (path: string, value: any) => {
    const keys = path.split(".");
    let newConfig = { ...config };
    let current = newConfig;

    for (let i = 0; i < keys.length - 1; i++) {
      if (!current[keys[i]]) {
        current[keys[i]] = {};
      }
      current = current[keys[i]];
    }

    current[keys[keys.length - 1]] = value;
    onChange(newConfig);
  };

  // 컬럼 선택 시 조인 컬럼이면 joinColumns 설정도 함께 업데이트
  const handleColumnSelect = (path: string, columnName: string) => {
    const joinColumn = entityJoinColumns.availableColumns.find(
      (col) => col.joinAlias === columnName
    );

    if (joinColumn) {
      const joinColumnsConfig = config.joinColumns || [];
      const existingJoinColumn = joinColumnsConfig.find(
        (jc: any) => jc.columnName === columnName
      );

      if (!existingJoinColumn) {
        const joinTableInfo = entityJoinColumns.joinTables?.find(
          (jt) => jt.tableName === joinColumn.tableName
        );

        const newJoinColumnConfig = {
          columnName: joinColumn.joinAlias,
          label: joinColumn.suggestedLabel || joinColumn.columnLabel,
          sourceColumn: joinTableInfo?.joinConfig?.sourceColumn || "",
          referenceTable: joinColumn.tableName,
          referenceColumn: joinColumn.columnName,
          isJoinColumn: true,
        };

        onChange({
          ...config,
          columnMapping: {
            ...config.columnMapping,
            [path.split(".")[1]]: columnName,
          },
          joinColumns: [...joinColumnsConfig, newJoinColumnConfig],
        });
        return;
      }
    }

    handleNestedChange(path, columnName);
  };

  // 표시 컬럼 추가
  const addDisplayColumn = () => {
    const currentColumns = config.columnMapping?.displayColumns || [];
    const newColumns = [...currentColumns, ""];
    handleNestedChange("columnMapping.displayColumns", newColumns);
  };

  // 표시 컬럼 삭제
  const removeDisplayColumn = (index: number) => {
    const currentColumns = [...(config.columnMapping?.displayColumns || [])];
    currentColumns.splice(index, 1);
    handleNestedChange("columnMapping.displayColumns", currentColumns);
  };

  // 표시 컬럼 값 변경
  const updateDisplayColumn = (index: number, value: string) => {
    const currentColumns = [...(config.columnMapping?.displayColumns || [])];
    currentColumns[index] = value;

    const joinColumn = entityJoinColumns.availableColumns.find(
      (col) => col.joinAlias === value
    );

    if (joinColumn) {
      const joinColumnsConfig = config.joinColumns || [];
      const existingJoinColumn = joinColumnsConfig.find(
        (jc: any) => jc.columnName === value
      );

      if (!existingJoinColumn) {
        const joinTableInfo = entityJoinColumns.joinTables?.find(
          (jt) => jt.tableName === joinColumn.tableName
        );

        const newJoinColumnConfig = {
          columnName: joinColumn.joinAlias,
          label: joinColumn.suggestedLabel || joinColumn.columnLabel,
          sourceColumn: joinTableInfo?.joinConfig?.sourceColumn || "",
          referenceTable: joinColumn.tableName,
          referenceColumn: joinColumn.columnName,
          isJoinColumn: true,
        };

        onChange({
          ...config,
          columnMapping: {
            ...config.columnMapping,
            displayColumns: currentColumns,
          },
          joinColumns: [...joinColumnsConfig, newJoinColumnConfig],
        });
        return;
      }
    }

    handleNestedChange("columnMapping.displayColumns", currentColumns);
  };

  // 테이블별로 조인 컬럼 그룹화
  const joinColumnsByTable: Record<string, EntityJoinColumn[]> = {};
  entityJoinColumns.availableColumns.forEach((col) => {
    if (!joinColumnsByTable[col.tableName]) {
      joinColumnsByTable[col.tableName] = [];
    }
    joinColumnsByTable[col.tableName].push(col);
  });

  // 컬럼 선택 셀렉트 박스 렌더링 (Shadcn UI)
  const renderColumnSelect = (
    value: string,
    onChangeHandler: (value: string) => void,
    placeholder: string = "컬럼을 선택하세요"
  ) => {
    return (
      <Select 
        value={value || "__none__"} 
        onValueChange={(val) => onChangeHandler(val === "__none__" ? "" : val)}
      >
        <SelectTrigger className="h-8 text-xs">
          <SelectValue placeholder={placeholder} />
        </SelectTrigger>
        <SelectContent>
          {/* 선택 안함 옵션 */}
          <SelectItem value="__none__" className="text-xs text-muted-foreground">
            선택 안함
          </SelectItem>

          {/* 기본 테이블 컬럼 */}
          {tableColumns.length > 0 && (
            <SelectGroup>
              <SelectLabel className="text-xs font-semibold text-muted-foreground">
                기본 컬럼
              </SelectLabel>
              {tableColumns.map((column) => (
                <SelectItem
                  key={column.columnName}
                  value={column.columnName}
                  className="text-xs"
                >
                  {column.columnLabel || column.columnName}
                </SelectItem>
              ))}
            </SelectGroup>
          )}

          {/* 조인 테이블별 컬럼 */}
          {Object.entries(joinColumnsByTable).map(([tableName, columns]) => (
            <SelectGroup key={tableName}>
              <SelectLabel className="text-xs font-semibold text-blue-600">
                {tableName} (조인)
              </SelectLabel>
              {columns.map((col) => (
                <SelectItem
                  key={col.joinAlias}
                  value={col.joinAlias}
                  className="text-xs"
                >
                  {col.suggestedLabel || col.columnLabel}
                </SelectItem>
              ))}
            </SelectGroup>
          ))}
        </SelectContent>
      </Select>
    );
  };

  return (
    <div className="space-y-4">
      <div className="text-sm font-medium">카드 디스플레이 설정</div>

      {/* 테이블이 선택된 경우 컬럼 매핑 설정 */}
      {tableColumns && tableColumns.length > 0 && (
        <div className="space-y-3">
          <h5 className="text-xs font-medium text-muted-foreground">컬럼 매핑</h5>

          {loadingEntityJoins && (
            <div className="text-xs text-muted-foreground">조인 컬럼 로딩 중...</div>
          )}

          <div className="space-y-1">
            <Label className="text-xs">타이틀 컬럼</Label>
            {renderColumnSelect(
              config.columnMapping?.titleColumn || "",
              (value) => handleColumnSelect("columnMapping.titleColumn", value)
            )}
          </div>

          <div className="space-y-1">
            <Label className="text-xs">서브타이틀 컬럼</Label>
            {renderColumnSelect(
              config.columnMapping?.subtitleColumn || "",
              (value) => handleColumnSelect("columnMapping.subtitleColumn", value)
            )}
          </div>

          <div className="space-y-1">
            <Label className="text-xs">설명 컬럼</Label>
            {renderColumnSelect(
              config.columnMapping?.descriptionColumn || "",
              (value) => handleColumnSelect("columnMapping.descriptionColumn", value)
            )}
          </div>

          <div className="space-y-1">
            <Label className="text-xs">이미지 컬럼</Label>
            {renderColumnSelect(
              config.columnMapping?.imageColumn || "",
              (value) => handleColumnSelect("columnMapping.imageColumn", value)
            )}
          </div>

          {/* 동적 표시 컬럼 추가 */}
          <div className="space-y-2">
            <div className="flex items-center justify-between">
              <Label className="text-xs">표시 컬럼들</Label>
              <Button
                type="button"
                variant="outline"
                size="sm"
                onClick={addDisplayColumn}
                className="h-6 px-2 text-xs"
              >
                + 컬럼 추가
              </Button>
            </div>

            <div className="space-y-2">
              {(config.columnMapping?.displayColumns || []).map((column: string, index: number) => (
                <div key={index} className="flex items-center gap-2">
                  <div className="flex-1">
                    {renderColumnSelect(
                      column,
                      (value) => updateDisplayColumn(index, value)
                    )}
                  </div>
                  <Button
                    type="button"
                    variant="ghost"
                    size="sm"
                    onClick={() => removeDisplayColumn(index)}
                    className="h-8 w-8 p-0 text-destructive hover:bg-destructive/10 hover:text-destructive"
                  >
                    <Trash2 className="h-4 w-4" />
                  </Button>
                </div>
              ))}

              {(!config.columnMapping?.displayColumns || config.columnMapping.displayColumns.length === 0) && (
                <div className="rounded-md border border-dashed border-muted-foreground/30 py-3 text-center text-xs text-muted-foreground">
                  "컬럼 추가" 버튼을 클릭하여 표시할 컬럼을 추가하세요
                </div>
              )}
            </div>
          </div>
        </div>
      )}

      {/* 카드 스타일 설정 */}
      <div className="space-y-3">
        <h5 className="text-xs font-medium text-muted-foreground">카드 스타일</h5>

        <div className="grid grid-cols-2 gap-3">
          <div className="space-y-1">
            <Label className="text-xs">한 행당 카드 수</Label>
            <Input
              type="number"
              min="1"
              max="6"
              value={config.cardsPerRow || 3}
              onChange={(e) => handleChange("cardsPerRow", parseInt(e.target.value))}
              className="h-8 text-xs"
            />
          </div>

          <div className="space-y-1">
            <Label className="text-xs">카드 간격 (px)</Label>
            <Input
              type="number"
              min="0"
              max="50"
              value={config.cardSpacing || 16}
              onChange={(e) => handleChange("cardSpacing", parseInt(e.target.value))}
              className="h-8 text-xs"
            />
          </div>
        </div>

        <div className="space-y-2">
          <div className="flex items-center space-x-2">
            <Checkbox
              id="showTitle"
              checked={config.cardStyle?.showTitle ?? true}
              onCheckedChange={(checked) => handleNestedChange("cardStyle.showTitle", checked)}
            />
            <Label htmlFor="showTitle" className="text-xs font-normal">
              타이틀 표시
            </Label>
          </div>

          <div className="flex items-center space-x-2">
            <Checkbox
              id="showSubtitle"
              checked={config.cardStyle?.showSubtitle ?? true}
              onCheckedChange={(checked) => handleNestedChange("cardStyle.showSubtitle", checked)}
            />
            <Label htmlFor="showSubtitle" className="text-xs font-normal">
              서브타이틀 표시
            </Label>
          </div>

          <div className="flex items-center space-x-2">
            <Checkbox
              id="showDescription"
              checked={config.cardStyle?.showDescription ?? true}
              onCheckedChange={(checked) => handleNestedChange("cardStyle.showDescription", checked)}
            />
            <Label htmlFor="showDescription" className="text-xs font-normal">
              설명 표시
            </Label>
          </div>

          <div className="flex items-center space-x-2">
            <Checkbox
              id="showImage"
              checked={config.cardStyle?.showImage ?? false}
              onCheckedChange={(checked) => handleNestedChange("cardStyle.showImage", checked)}
            />
            <Label htmlFor="showImage" className="text-xs font-normal">
              이미지 표시
            </Label>
          </div>

          <div className="flex items-center space-x-2">
            <Checkbox
              id="showActions"
              checked={config.cardStyle?.showActions ?? true}
              onCheckedChange={(checked) => handleNestedChange("cardStyle.showActions", checked)}
            />
            <Label htmlFor="showActions" className="text-xs font-normal">
              액션 버튼 표시
            </Label>
          </div>

          {/* 개별 버튼 설정 */}
          {(config.cardStyle?.showActions ?? true) && (
            <div className="ml-5 space-y-2 border-l-2 border-muted pl-3">
              <div className="flex items-center space-x-2">
                <Checkbox
                  id="showViewButton"
                  checked={config.cardStyle?.showViewButton ?? true}
                  onCheckedChange={(checked) => handleNestedChange("cardStyle.showViewButton", checked)}
                />
                <Label htmlFor="showViewButton" className="text-xs font-normal">
                  상세보기 버튼
                </Label>
              </div>

              <div className="flex items-center space-x-2">
                <Checkbox
                  id="showEditButton"
                  checked={config.cardStyle?.showEditButton ?? true}
                  onCheckedChange={(checked) => handleNestedChange("cardStyle.showEditButton", checked)}
                />
                <Label htmlFor="showEditButton" className="text-xs font-normal">
                  편집 버튼
                </Label>
              </div>

              <div className="flex items-center space-x-2">
                <Checkbox
                  id="showDeleteButton"
                  checked={config.cardStyle?.showDeleteButton ?? false}
                  onCheckedChange={(checked) => handleNestedChange("cardStyle.showDeleteButton", checked)}
                />
                <Label htmlFor="showDeleteButton" className="text-xs font-normal">
                  삭제 버튼
                </Label>
              </div>
            </div>
          )}
        </div>

        <div className="space-y-1">
          <Label className="text-xs">설명 최대 길이</Label>
          <Input
            type="number"
            min="10"
            max="500"
            value={config.cardStyle?.maxDescriptionLength || 100}
            onChange={(e) => handleNestedChange("cardStyle.maxDescriptionLength", parseInt(e.target.value))}
            className="h-8 text-xs"
          />
        </div>
      </div>

      {/* 공통 설정 */}
      <div className="space-y-3">
        <h5 className="text-xs font-medium text-muted-foreground">공통 설정</h5>

        <div className="flex items-center space-x-2">
          <Checkbox
            id="disabled"
            checked={config.disabled || false}
            onCheckedChange={(checked) => handleChange("disabled", checked)}
          />
          <Label htmlFor="disabled" className="text-xs font-normal">
            비활성화
          </Label>
        </div>

        <div className="flex items-center space-x-2">
          <Checkbox
            id="readonly"
            checked={config.readonly || false}
            onCheckedChange={(checked) => handleChange("readonly", checked)}
          />
          <Label htmlFor="readonly" className="text-xs font-normal">
            읽기 전용
          </Label>
        </div>
      </div>
    </div>
  );
};