"use client";

import React, { useState, useMemo, useEffect } from "react";
import { Label } from "@/components/ui/label";
import { Input } from "@/components/ui/input";
import { Switch } from "@/components/ui/switch";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Slider } from "@/components/ui/slider";
import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem } from "@/components/ui/command";
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
import { Button } from "@/components/ui/button";
import { Check, ChevronsUpDown, ArrowRight } from "lucide-react";
import { cn } from "@/lib/utils";
import { SplitPanelLayoutConfig } from "./types";
import { TableInfo, ColumnInfo } from "@/types/screen";
import { tableTypeApi } from "@/lib/api/screen";

interface SplitPanelLayoutConfigPanelProps {
  config: SplitPanelLayoutConfig;
  onChange: (config: SplitPanelLayoutConfig) => void;
  tables?: TableInfo[]; // 전체 테이블 목록 (선택적)
  screenTableName?: string; // 현재 화면의 테이블명 (좌측 패널에서 사용)
}

/**
 * SplitPanelLayout 설정 패널
 */
export const SplitPanelLayoutConfigPanel: React.FC<SplitPanelLayoutConfigPanelProps> = ({
  config,
  onChange,
  tables = [], // 기본값 빈 배열
  screenTableName, // 현재 화면의 테이블명
}) => {
  const [rightTableOpen, setRightTableOpen] = useState(false);
  const [leftColumnOpen, setLeftColumnOpen] = useState(false);
  const [rightColumnOpen, setRightColumnOpen] = useState(false);
  const [loadedTableColumns, setLoadedTableColumns] = useState<Record<string, ColumnInfo[]>>({});
  const [loadingColumns, setLoadingColumns] = useState<Record<string, boolean>>({});

  // screenTableName이 변경되면 좌측 패널 테이블을 항상 화면 테이블로 설정
  useEffect(() => {
    if (screenTableName) {
      // 좌측 패널은 항상 현재 화면의 테이블 사용
      if (config.leftPanel?.tableName !== screenTableName) {
        updateLeftPanel({ tableName: screenTableName });
      }
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [screenTableName]);

  // 테이블 컬럼 로드 함수
  const loadTableColumns = async (tableName: string) => {
    if (loadedTableColumns[tableName] || loadingColumns[tableName]) {
      return; // 이미 로드되었거나 로딩 중
    }

    setLoadingColumns((prev) => ({ ...prev, [tableName]: true }));

    try {
      const columnsResponse = await tableTypeApi.getColumns(tableName);
      console.log(`📊 테이블 ${tableName} 컬럼 응답:`, columnsResponse);

      const columns: ColumnInfo[] = (columnsResponse || []).map((col: any) => ({
        tableName: col.tableName || tableName,
        columnName: col.columnName || col.column_name,
        columnLabel: col.displayName || col.columnLabel || col.column_label || col.columnName || col.column_name,
        dataType: col.dataType || col.data_type || col.dbType,
        webType: col.webType || col.web_type,
        input_type: col.inputType || col.input_type,
        widgetType: col.widgetType || col.widget_type || col.webType || col.web_type,
        isNullable: col.isNullable || col.is_nullable,
        required: col.required !== undefined ? col.required : col.isNullable === "NO" || col.is_nullable === "NO",
        columnDefault: col.columnDefault || col.column_default,
        characterMaximumLength: col.characterMaximumLength || col.character_maximum_length,
        codeCategory: col.codeCategory || col.code_category,
        codeValue: col.codeValue || col.code_value,
      }));

      console.log(`✅ 테이블 ${tableName} 컬럼 ${columns.length}개 로드됨:`, columns);
      setLoadedTableColumns((prev) => ({ ...prev, [tableName]: columns }));
    } catch (error) {
      console.error(`테이블 ${tableName} 컬럼 로드 실패:`, error);
      setLoadedTableColumns((prev) => ({ ...prev, [tableName]: [] }));
    } finally {
      setLoadingColumns((prev) => ({ ...prev, [tableName]: false }));
    }
  };

  // 좌측/우측 테이블이 변경되면 해당 테이블의 컬럼 로드
  useEffect(() => {
    if (config.leftPanel?.tableName) {
      loadTableColumns(config.leftPanel.tableName);
    }
  }, [config.leftPanel?.tableName]);

  useEffect(() => {
    if (config.rightPanel?.tableName) {
      loadTableColumns(config.rightPanel.tableName);
    }
  }, [config.rightPanel?.tableName]);

  console.log("🔧 SplitPanelLayoutConfigPanel 렌더링");
  console.log("  - config:", config);
  console.log("  - tables:", tables);
  console.log("  - tablesCount:", tables.length);
  console.log("  - screenTableName:", screenTableName);
  console.log("  - leftTable:", config.leftPanel?.tableName);
  console.log("  - rightTable:", config.rightPanel?.tableName);

  const updateConfig = (updates: Partial<SplitPanelLayoutConfig>) => {
    const newConfig = { ...config, ...updates };
    console.log("🔄 Config 업데이트:", newConfig);
    onChange(newConfig);
  };

  const updateLeftPanel = (updates: Partial<SplitPanelLayoutConfig["leftPanel"]>) => {
    const newConfig = {
      ...config,
      leftPanel: { ...config.leftPanel, ...updates },
    };
    console.log("🔄 Left Panel 업데이트:", newConfig);
    onChange(newConfig);
  };

  const updateRightPanel = (updates: Partial<SplitPanelLayoutConfig["rightPanel"]>) => {
    const newConfig = {
      ...config,
      rightPanel: { ...config.rightPanel, ...updates },
    };
    console.log("🔄 Right Panel 업데이트:", newConfig);
    onChange(newConfig);
  };

  // 좌측 테이블 컬럼 (로드된 컬럼 사용)
  const leftTableColumns = useMemo(() => {
    const tableName = config.leftPanel?.tableName || screenTableName;
    return tableName ? loadedTableColumns[tableName] || [] : [];
  }, [loadedTableColumns, config.leftPanel?.tableName, screenTableName]);

  // 우측 테이블 컬럼 (로드된 컬럼 사용)
  const rightTableColumns = useMemo(() => {
    const tableName = config.rightPanel?.tableName;
    return tableName ? loadedTableColumns[tableName] || [] : [];
  }, [loadedTableColumns, config.rightPanel?.tableName]);

  // 테이블 데이터 로딩 상태 확인
  if (!tables || tables.length === 0) {
    return (
      <div className="rounded-lg border p-4">
        <p className="text-sm font-medium">테이블 데이터를 불러올 수 없습니다.</p>
        <p className="mt-1 text-xs text-gray-600">
          화면에 테이블이 연결되지 않았거나 테이블 목록이 로드되지 않았습니다.
        </p>
      </div>
    );
  }

  // 관계 타입에 따라 우측 테이블을 자동으로 설정
  const relationshipType = config.rightPanel?.relation?.type || "detail";

  return (
    <div className="space-y-6">
      {/* 관계 타입 선택 */}
      <div className="space-y-3">
        <h3 className="text-sm font-semibold">패널 관계 타입</h3>
        <Select
          value={relationshipType}
          onValueChange={(value: "join" | "detail") => {
            // 상세 모드로 변경 시 우측 테이블을 현재 화면 테이블로 설정
            if (value === "detail" && screenTableName) {
              updateRightPanel({
                relation: { ...config.rightPanel?.relation, type: value },
                tableName: screenTableName,
              });
            } else {
              updateRightPanel({
                relation: { ...config.rightPanel?.relation, type: value },
              });
            }
          }}
        >
          <SelectTrigger className="bg-white">
            <SelectValue placeholder="관계 타입 선택" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="detail">
              <div className="flex flex-col">
                <span className="font-medium">상세 (DETAIL)</span>
                <span className="text-xs text-gray-500">좌측 목록 → 우측 상세 정보 (동일 테이블)</span>
              </div>
            </SelectItem>
            <SelectItem value="join">
              <div className="flex flex-col">
                <span className="font-medium">조인 (JOIN)</span>
                <span className="text-xs text-gray-500">좌측 테이블 → 우측 관련 테이블 (다른 테이블)</span>
              </div>
            </SelectItem>
          </SelectContent>
        </Select>
      </div>

      {/* 좌측 패널 설정 (마스터) */}
      <div className="space-y-4">
        <h3 className="text-sm font-semibold">좌측 패널 설정 (마스터)</h3>

        <div className="space-y-2">
          <Label>패널 제목</Label>
          <Input
            value={config.leftPanel?.title || ""}
            onChange={(e) => updateLeftPanel({ title: e.target.value })}
            placeholder="좌측 패널 제목"
          />
        </div>

        <div className="space-y-2">
          <Label>테이블 (현재 화면 고정)</Label>
          <div className="rounded-lg border border-gray-200 bg-gray-50 p-3">
            <p className="text-sm font-medium text-gray-900">
              {config.leftPanel?.tableName || screenTableName || "테이블이 지정되지 않음"}
            </p>
            <p className="mt-1 text-xs text-gray-500">좌측 패널은 현재 화면의 테이블 데이터를 표시합니다</p>
          </div>
        </div>

        <div className="flex items-center justify-between">
          <Label>검색 기능</Label>
          <Switch
            checked={config.leftPanel?.showSearch ?? true}
            onCheckedChange={(checked) => updateLeftPanel({ showSearch: checked })}
          />
        </div>

        <div className="flex items-center justify-between">
          <Label>추가 버튼</Label>
          <Switch
            checked={config.leftPanel?.showAdd ?? false}
            onCheckedChange={(checked) => updateLeftPanel({ showAdd: checked })}
          />
        </div>
      </div>

      {/* 우측 패널 설정 */}
      <div className="space-y-4">
        <h3 className="text-sm font-semibold">우측 패널 설정 ({relationshipType === "detail" ? "상세" : "조인"})</h3>

        <div className="space-y-2">
          <Label>패널 제목</Label>
          <Input
            value={config.rightPanel?.title || ""}
            onChange={(e) => updateRightPanel({ title: e.target.value })}
            placeholder="우측 패널 제목"
          />
        </div>

        {/* 관계 타입에 따라 테이블 선택 UI 변경 */}
        {relationshipType === "detail" ? (
          // 상세 모드: 좌측과 동일한 테이블 (자동 설정)
          <div className="space-y-2">
            <Label>테이블 (좌측과 동일)</Label>
            <div className="rounded-lg border border-gray-200 bg-gray-50 p-3">
              <p className="text-sm font-medium text-gray-900">
                {config.leftPanel?.tableName || screenTableName || "테이블이 지정되지 않음"}
              </p>
              <p className="mt-1 text-xs text-gray-500">상세 모드에서는 좌측과 동일한 테이블을 사용합니다</p>
            </div>
          </div>
        ) : (
          // 조인 모드: 전체 테이블에서 선택 가능
          <div className="space-y-2">
            <Label>테이블 선택 (전체 테이블)</Label>
            <Popover open={rightTableOpen} onOpenChange={setRightTableOpen}>
              <PopoverTrigger asChild>
                <Button
                  variant="outline"
                  role="combobox"
                  aria-expanded={rightTableOpen}
                  className="w-full justify-between"
                >
                  {config.rightPanel?.tableName || "테이블을 선택하세요"}
                  <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
                </Button>
              </PopoverTrigger>
              <PopoverContent className="w-full p-0">
                <Command>
                  <CommandInput placeholder="테이블 검색..." />
                  <CommandEmpty>테이블을 찾을 수 없습니다.</CommandEmpty>
                  <CommandGroup className="max-h-[200px] overflow-auto">
                    {tables.map((table) => (
                      <CommandItem
                        key={table.tableName}
                        value={table.tableName}
                        onSelect={(value) => {
                          updateRightPanel({ tableName: value });
                          setRightTableOpen(false);
                        }}
                      >
                        <Check
                          className={cn(
                            "mr-2 h-4 w-4",
                            config.rightPanel?.tableName === table.tableName ? "opacity-100" : "opacity-0",
                          )}
                        />
                        {table.tableName}
                        <span className="ml-2 text-xs text-gray-500">({table.tableLabel || ""})</span>
                      </CommandItem>
                    ))}
                  </CommandGroup>
                </Command>
              </PopoverContent>
            </Popover>
          </div>
        )}

        {/* 컬럼 매핑 - 조인 모드에서만 표시 */}
        {relationshipType !== "detail" && (
          <div className="space-y-3 rounded-lg border border-gray-200 bg-gray-50 p-3">
            <Label className="text-sm font-semibold">컬럼 매핑 (외래키 관계)</Label>
            <p className="text-xs text-gray-600">좌측 테이블의 컬럼을 우측 테이블의 컬럼과 연결합니다</p>

            <div className="space-y-2">
              <Label className="text-xs">좌측 컬럼</Label>
              <Popover open={leftColumnOpen} onOpenChange={setLeftColumnOpen}>
                <PopoverTrigger asChild>
                  <Button
                    variant="outline"
                    role="combobox"
                    aria-expanded={leftColumnOpen}
                    className="w-full justify-between"
                    disabled={!config.leftPanel?.tableName}
                  >
                    {config.rightPanel?.relation?.leftColumn || "좌측 컬럼 선택"}
                    <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
                  </Button>
                </PopoverTrigger>
                <PopoverContent className="w-full p-0">
                  <Command>
                    <CommandInput placeholder="컬럼 검색..." />
                    <CommandEmpty>컬럼을 찾을 수 없습니다.</CommandEmpty>
                    <CommandGroup className="max-h-[200px] overflow-auto">
                      {leftTableColumns.map((column) => (
                        <CommandItem
                          key={column.columnName}
                          value={column.columnName}
                          onSelect={(value) => {
                            updateRightPanel({
                              relation: { ...config.rightPanel?.relation, leftColumn: value },
                            });
                            setLeftColumnOpen(false);
                          }}
                        >
                          <Check
                            className={cn(
                              "mr-2 h-4 w-4",
                              config.rightPanel?.relation?.leftColumn === column.columnName
                                ? "opacity-100"
                                : "opacity-0",
                            )}
                          />
                          {column.columnName}
                          <span className="ml-2 text-xs text-gray-500">({column.columnLabel || ""})</span>
                        </CommandItem>
                      ))}
                    </CommandGroup>
                  </Command>
                </PopoverContent>
              </Popover>
            </div>

            <div className="flex items-center justify-center">
              <ArrowRight className="h-4 w-4 text-gray-400" />
            </div>

            <div className="space-y-2">
              <Label className="text-xs">우측 컬럼 (외래키)</Label>
              <Popover open={rightColumnOpen} onOpenChange={setRightColumnOpen}>
                <PopoverTrigger asChild>
                  <Button
                    variant="outline"
                    role="combobox"
                    aria-expanded={rightColumnOpen}
                    className="w-full justify-between"
                    disabled={!config.rightPanel?.tableName}
                  >
                    {config.rightPanel?.relation?.foreignKey || "우측 컬럼 선택"}
                    <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
                  </Button>
                </PopoverTrigger>
                <PopoverContent className="w-full p-0">
                  <Command>
                    <CommandInput placeholder="컬럼 검색..." />
                    <CommandEmpty>컬럼을 찾을 수 없습니다.</CommandEmpty>
                    <CommandGroup className="max-h-[200px] overflow-auto">
                      {rightTableColumns.map((column) => (
                        <CommandItem
                          key={column.columnName}
                          value={column.columnName}
                          onSelect={(value) => {
                            updateRightPanel({
                              relation: { ...config.rightPanel?.relation, foreignKey: value },
                            });
                            setRightColumnOpen(false);
                          }}
                        >
                          <Check
                            className={cn(
                              "mr-2 h-4 w-4",
                              config.rightPanel?.relation?.foreignKey === column.columnName
                                ? "opacity-100"
                                : "opacity-0",
                            )}
                          />
                          {column.columnName}
                          <span className="ml-2 text-xs text-gray-500">({column.columnLabel || ""})</span>
                        </CommandItem>
                      ))}
                    </CommandGroup>
                  </Command>
                </PopoverContent>
              </Popover>
            </div>
          </div>
        )}

        <div className="flex items-center justify-between">
          <Label>검색 기능</Label>
          <Switch
            checked={config.rightPanel?.showSearch ?? true}
            onCheckedChange={(checked) => updateRightPanel({ showSearch: checked })}
          />
        </div>

        <div className="flex items-center justify-between">
          <Label>추가 버튼</Label>
          <Switch
            checked={config.rightPanel?.showAdd ?? false}
            onCheckedChange={(checked) => updateRightPanel({ showAdd: checked })}
          />
        </div>
      </div>

      {/* 레이아웃 설정 */}
      <div className="space-y-4">
        <h3 className="text-sm font-semibold">레이아웃 설정</h3>

        <div className="space-y-2">
          <Label>좌측 패널 너비: {config.splitRatio || 30}%</Label>
          <Slider
            value={[config.splitRatio || 30]}
            onValueChange={(value) => updateConfig({ splitRatio: value[0] })}
            min={20}
            max={80}
            step={5}
          />
        </div>

        <div className="flex items-center justify-between">
          <Label>크기 조절 가능</Label>
          <Switch
            checked={config.resizable ?? true}
            onCheckedChange={(checked) => updateConfig({ resizable: checked })}
          />
        </div>

        <div className="flex items-center justify-between">
          <Label>자동 데이터 로드</Label>
          <Switch
            checked={config.autoLoad ?? true}
            onCheckedChange={(checked) => updateConfig({ autoLoad: checked })}
          />
        </div>
      </div>
    </div>
  );
};