"use client";

import React, { useState, useEffect, useCallback, useMemo } 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 { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command";
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
import { Button } from "@/components/ui/button";
import { Check, ChevronsUpDown } from "lucide-react";
import { cn } from "@/lib/utils";
import { tableManagementApi, getTableColumns } from "@/lib/api/tableManagement";
import type { RelatedDataButtonsConfig } from "./types";

interface TableInfo {
  tableName: string;
  displayName?: string;
}

interface ColumnInfo {
  columnName: string;
  columnLabel?: string;
}

interface RelatedDataButtonsConfigPanelProps {
  config: RelatedDataButtonsConfig;
  onChange: (config: RelatedDataButtonsConfig) => void;
  tables?: TableInfo[];
}

export const RelatedDataButtonsConfigPanel: React.FC<RelatedDataButtonsConfigPanelProps> = ({
  config,
  onChange,
  tables: propTables = [],
}) => {
  const [allTables, setAllTables] = useState<TableInfo[]>([]);
  const [sourceTableColumns, setSourceTableColumns] = useState<ColumnInfo[]>([]);
  const [buttonTableColumns, setButtonTableColumns] = useState<ColumnInfo[]>([]);
  
  // Popover 상태
  const [sourceTableOpen, setSourceTableOpen] = useState(false);
  const [buttonTableOpen, setButtonTableOpen] = useState(false);

  // 전체 테이블 로드
  useEffect(() => {
    const loadTables = async () => {
      try {
        const response = await tableManagementApi.getTableList();
        if (response.success && response.data) {
          setAllTables(response.data.map((t: any) => ({
            tableName: t.tableName || t.table_name,
            displayName: t.tableLabel || t.table_label || t.displayName,
          })));
        }
      } catch (error) {
        console.error("테이블 목록 로드 실패:", error);
      }
    };
    loadTables();
  }, []);

  // 소스 테이블 컬럼 로드
  useEffect(() => {
    const loadColumns = async () => {
      if (!config.sourceMapping?.sourceTable) {
        setSourceTableColumns([]);
        return;
      }
      try {
        const response = await getTableColumns(config.sourceMapping.sourceTable);
        if (response.success && response.data?.columns) {
          setSourceTableColumns(response.data.columns.map((c: any) => ({
            columnName: c.columnName || c.column_name,
            columnLabel: c.columnLabel || c.column_label || c.displayName,
          })));
        }
      } catch (error) {
        console.error("소스 테이블 컬럼 로드 실패:", error);
      }
    };
    loadColumns();
  }, [config.sourceMapping?.sourceTable]);

  // 버튼 테이블 컬럼 로드
  useEffect(() => {
    const loadColumns = async () => {
      if (!config.buttonDataSource?.tableName) {
        setButtonTableColumns([]);
        return;
      }
      try {
        const response = await getTableColumns(config.buttonDataSource.tableName);
        if (response.success && response.data?.columns) {
          setButtonTableColumns(response.data.columns.map((c: any) => ({
            columnName: c.columnName || c.column_name,
            columnLabel: c.columnLabel || c.column_label || c.displayName,
          })));
        }
      } catch (error) {
        console.error("버튼 테이블 컬럼 로드 실패:", error);
      }
    };
    loadColumns();
  }, [config.buttonDataSource?.tableName]);

  // 설정 업데이트 헬퍼
  const updateConfig = useCallback((updates: Partial<RelatedDataButtonsConfig>) => {
    onChange({ ...config, ...updates });
  }, [config, onChange]);

  const updateSourceMapping = useCallback((updates: Partial<RelatedDataButtonsConfig["sourceMapping"]>) => {
    onChange({
      ...config,
      sourceMapping: { ...config.sourceMapping, ...updates },
    });
  }, [config, onChange]);

  const updateHeaderDisplay = useCallback((updates: Partial<NonNullable<RelatedDataButtonsConfig["headerDisplay"]>>) => {
    onChange({
      ...config,
      headerDisplay: { ...config.headerDisplay, ...updates } as any,
    });
  }, [config, onChange]);

  const updateButtonDataSource = useCallback((updates: Partial<RelatedDataButtonsConfig["buttonDataSource"]>) => {
    onChange({
      ...config,
      buttonDataSource: { ...config.buttonDataSource, ...updates },
    });
  }, [config, onChange]);

  const updateButtonStyle = useCallback((updates: Partial<NonNullable<RelatedDataButtonsConfig["buttonStyle"]>>) => {
    onChange({
      ...config,
      buttonStyle: { ...config.buttonStyle, ...updates },
    });
  }, [config, onChange]);

  const updateAddButton = useCallback((updates: Partial<NonNullable<RelatedDataButtonsConfig["addButton"]>>) => {
    onChange({
      ...config,
      addButton: { ...config.addButton, ...updates },
    });
  }, [config, onChange]);

  const updateEvents = useCallback((updates: Partial<NonNullable<RelatedDataButtonsConfig["events"]>>) => {
    onChange({
      ...config,
      events: { ...config.events, ...updates },
    });
  }, [config, onChange]);

  const tables = allTables.length > 0 ? allTables : propTables;

  return (
    <div className="space-y-6">
      {/* 소스 매핑 (좌측 패널 연결) */}
      <div className="space-y-3">
        <Label className="text-sm font-semibold">소스 테이블 (좌측 패널)</Label>
        
        <div className="space-y-2">
          <Label className="text-xs">테이블</Label>
          <Popover open={sourceTableOpen} onOpenChange={setSourceTableOpen}>
            <PopoverTrigger asChild>
              <Button variant="outline" role="combobox" className="w-full justify-between">
                {config.sourceMapping?.sourceTable || "테이블 선택"}
                <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.displayName || ""} ${table.tableName}`}
                      onSelect={() => {
                        updateSourceMapping({ sourceTable: table.tableName });
                        setSourceTableOpen(false);
                      }}
                    >
                      <Check className={cn("mr-2 h-4 w-4", config.sourceMapping?.sourceTable === table.tableName ? "opacity-100" : "opacity-0")} />
                      {table.displayName || table.tableName}
                      {table.displayName && <span className="ml-2 text-xs text-gray-500">({table.tableName})</span>}
                    </CommandItem>
                  ))}
                </CommandGroup>
              </Command>
            </PopoverContent>
          </Popover>
        </div>

        <div className="space-y-2">
          <Label className="text-xs">필터 컬럼 (버튼 테이블 조회 시 사용)</Label>
          <Select
            value={config.sourceMapping?.sourceColumn || ""}
            onValueChange={(value) => updateSourceMapping({ sourceColumn: value })}
          >
            <SelectTrigger>
              <SelectValue placeholder="컬럼 선택" />
            </SelectTrigger>
            <SelectContent>
              {sourceTableColumns.map((col) => (
                <SelectItem key={col.columnName} value={col.columnName}>
                  {col.columnLabel || col.columnName}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
        </div>
      </div>

      {/* 헤더 표시 설정 */}
      <div className="space-y-3">
        <div className="flex items-center justify-between">
          <Label className="text-sm font-semibold">헤더 표시</Label>
          <Switch
            checked={config.headerDisplay?.show !== false}
            onCheckedChange={(checked) => updateHeaderDisplay({ show: checked })}
          />
        </div>

        {config.headerDisplay?.show !== false && (
          <div className="space-y-2 pl-2 border-l-2 border-gray-200">
            <div className="space-y-1">
              <Label className="text-xs">제목 컬럼</Label>
              <Select
                value={config.headerDisplay?.titleColumn || ""}
                onValueChange={(value) => updateHeaderDisplay({ titleColumn: value })}
              >
                <SelectTrigger>
                  <SelectValue placeholder="제목 컬럼 선택" />
                </SelectTrigger>
                <SelectContent>
                  {sourceTableColumns.map((col) => (
                    <SelectItem key={col.columnName} value={col.columnName}>
                      {col.columnLabel || col.columnName}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>

            <div className="space-y-1">
              <Label className="text-xs">부제목 컬럼 (선택)</Label>
              <Select
                value={config.headerDisplay?.subtitleColumn || "__none__"}
                onValueChange={(value) => updateHeaderDisplay({ subtitleColumn: value === "__none__" ? "" : value })}
              >
                <SelectTrigger>
                  <SelectValue placeholder="부제목 컬럼 선택" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="__none__">없음</SelectItem>
                  {sourceTableColumns.map((col) => (
                    <SelectItem key={col.columnName} value={col.columnName}>
                      {col.columnLabel || col.columnName}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>
          </div>
        )}
      </div>

      {/* 버튼 데이터 소스 */}
      <div className="space-y-3">
        <Label className="text-sm font-semibold">버튼 데이터 소스</Label>

        <div className="space-y-2">
          <Label className="text-xs">테이블</Label>
          <Popover open={buttonTableOpen} onOpenChange={setButtonTableOpen}>
            <PopoverTrigger asChild>
              <Button variant="outline" role="combobox" className="w-full justify-between">
                {config.buttonDataSource?.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.displayName || ""} ${table.tableName}`}
                      onSelect={() => {
                        updateButtonDataSource({ tableName: table.tableName });
                        setButtonTableOpen(false);
                      }}
                    >
                      <Check className={cn("mr-2 h-4 w-4", config.buttonDataSource?.tableName === table.tableName ? "opacity-100" : "opacity-0")} />
                      {table.displayName || table.tableName}
                      {table.displayName && <span className="ml-2 text-xs text-gray-500">({table.tableName})</span>}
                    </CommandItem>
                  ))}
                </CommandGroup>
              </Command>
            </PopoverContent>
          </Popover>
        </div>

        <div className="grid grid-cols-2 gap-2">
          <div className="space-y-1">
            <Label className="text-xs">필터 컬럼</Label>
            <Select
              value={config.buttonDataSource?.filterColumn || ""}
              onValueChange={(value) => updateButtonDataSource({ filterColumn: value })}
            >
              <SelectTrigger>
                <SelectValue placeholder="선택" />
              </SelectTrigger>
              <SelectContent>
                {buttonTableColumns.map((col) => (
                  <SelectItem key={col.columnName} value={col.columnName}>
                    {col.columnLabel || col.columnName}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>

          <div className="space-y-1">
            <Label className="text-xs">표시 컬럼</Label>
            <Select
              value={config.buttonDataSource?.displayColumn || ""}
              onValueChange={(value) => updateButtonDataSource({ displayColumn: value })}
            >
              <SelectTrigger>
                <SelectValue placeholder="선택" />
              </SelectTrigger>
              <SelectContent>
                {buttonTableColumns.map((col) => (
                  <SelectItem key={col.columnName} value={col.columnName}>
                    {col.columnLabel || col.columnName}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>
        </div>
      </div>

      {/* 버튼 스타일 */}
      <div className="space-y-3">
        <Label className="text-sm font-semibold">버튼 스타일</Label>

        <div className="grid grid-cols-2 gap-2">
          <div className="space-y-1">
            <Label className="text-xs">기본 스타일</Label>
            <Select
              value={config.buttonStyle?.variant || "outline"}
              onValueChange={(value: any) => updateButtonStyle({ variant: value })}
            >
              <SelectTrigger>
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="default">Default</SelectItem>
                <SelectItem value="outline">Outline</SelectItem>
                <SelectItem value="secondary">Secondary</SelectItem>
                <SelectItem value="ghost">Ghost</SelectItem>
              </SelectContent>
            </Select>
          </div>

          <div className="space-y-1">
            <Label className="text-xs">선택 시 스타일</Label>
            <Select
              value={config.buttonStyle?.activeVariant || "default"}
              onValueChange={(value: any) => updateButtonStyle({ activeVariant: value })}
            >
              <SelectTrigger>
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="default">Default</SelectItem>
                <SelectItem value="outline">Outline</SelectItem>
                <SelectItem value="secondary">Secondary</SelectItem>
              </SelectContent>
            </Select>
          </div>
        </div>

        {/* 기본 표시 설정 */}
        <div className="space-y-2">
          <Label className="text-xs">기본 버전 표시 컬럼</Label>
          <Select
            value={config.buttonStyle?.defaultIndicator?.column || "__none__"}
            onValueChange={(value) => updateButtonStyle({
              defaultIndicator: {
                ...config.buttonStyle?.defaultIndicator,
                column: value === "__none__" ? "" : value,
                showStar: config.buttonStyle?.defaultIndicator?.showStar ?? true,
              },
            })}
          >
            <SelectTrigger>
              <SelectValue placeholder="없음" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="__none__">없음</SelectItem>
              {buttonTableColumns.map((col) => (
                <SelectItem key={col.columnName} value={col.columnName}>
                  {col.columnLabel || col.columnName}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
        </div>

        {config.buttonStyle?.defaultIndicator?.column && (
          <div className="flex items-center gap-4">
            <div className="flex items-center gap-2">
              <Switch
                checked={config.buttonStyle?.defaultIndicator?.showStar ?? true}
                onCheckedChange={(checked) => updateButtonStyle({
                  defaultIndicator: {
                    ...config.buttonStyle?.defaultIndicator,
                    column: config.buttonStyle?.defaultIndicator?.column || "",
                    showStar: checked,
                  },
                })}
              />
              <Label className="text-xs">별표 표시</Label>
            </div>
          </div>
        )}
      </div>

      {/* 이벤트 설정 (하위 테이블 연동) */}
      <div className="space-y-3">
        <Label className="text-sm font-semibold">하위 테이블 연동</Label>

        <div className="space-y-2">
          <Label className="text-xs">대상 테이블</Label>
          <Popover>
            <PopoverTrigger asChild>
              <Button variant="outline" role="combobox" className="w-full justify-between">
                {config.events?.targetTable || "테이블 선택"}
                <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.displayName || ""} ${table.tableName}`}
                      onSelect={() => {
                        updateEvents({ targetTable: table.tableName });
                      }}
                    >
                      <Check className={cn("mr-2 h-4 w-4", config.events?.targetTable === table.tableName ? "opacity-100" : "opacity-0")} />
                      {table.displayName || table.tableName}
                    </CommandItem>
                  ))}
                </CommandGroup>
              </Command>
            </PopoverContent>
          </Popover>
        </div>

        <div className="space-y-2">
          <Label className="text-xs">필터 컬럼 (버튼 값 컬럼 → 대상 테이블 컬럼)</Label>
          <Input
            value={config.events?.targetFilterColumn || ""}
            onChange={(e) => updateEvents({ targetFilterColumn: e.target.value })}
            placeholder="예: routing_version_id"
          />
        </div>
      </div>

      {/* 추가 버튼 설정 */}
      <div className="space-y-3">
        <div className="flex items-center justify-between">
          <Label className="text-sm font-semibold">추가 버튼</Label>
          <Switch
            checked={config.addButton?.show ?? false}
            onCheckedChange={(checked) => updateAddButton({ show: checked })}
          />
        </div>

        {config.addButton?.show && (
          <div className="space-y-2 pl-2 border-l-2 border-gray-200">
            <div className="space-y-1">
              <Label className="text-xs">버튼 라벨</Label>
              <Input
                value={config.addButton?.label || ""}
                onChange={(e) => updateAddButton({ label: e.target.value })}
                placeholder="+ 버전 추가"
              />
            </div>

            <div className="space-y-1">
              <Label className="text-xs">위치</Label>
              <Select
                value={config.addButton?.position || "header"}
                onValueChange={(value: any) => updateAddButton({ position: value })}
              >
                <SelectTrigger>
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="header">헤더 우측</SelectItem>
                  <SelectItem value="inline">버튼들과 함께</SelectItem>
                </SelectContent>
              </Select>
            </div>

            <div className="space-y-1">
              <Label className="text-xs">모달 화면 ID</Label>
              <Input
                type="number"
                value={config.addButton?.modalScreenId || ""}
                onChange={(e) => updateAddButton({ modalScreenId: parseInt(e.target.value) || undefined })}
                placeholder="화면 ID"
              />
            </div>
          </div>
        )}
      </div>

      {/* 기타 설정 */}
      <div className="space-y-3">
        <Label className="text-sm font-semibold">기타 설정</Label>

        <div className="flex items-center gap-2">
          <Switch
            checked={config.autoSelectFirst ?? true}
            onCheckedChange={(checked) => updateConfig({ autoSelectFirst: checked })}
          />
          <Label className="text-xs">첫 번째 항목 자동 선택</Label>
        </div>

        <div className="space-y-1">
          <Label className="text-xs">빈 상태 메시지</Label>
          <Input
            value={config.emptyMessage || ""}
            onChange={(e) => updateConfig({ emptyMessage: e.target.value })}
            placeholder="데이터가 없습니다"
          />
        </div>
      </div>
    </div>
  );
};

export default RelatedDataButtonsConfigPanel;