"use client";

import React, { useState, useEffect, useMemo } from "react";
import { Label } from "@/components/ui/label";
import { Input } from "@/components/ui/input";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Checkbox } from "@/components/ui/checkbox";
import { Button } from "@/components/ui/button";
import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command";
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
import { Check, ChevronsUpDown } from "lucide-react";
import { cn } from "@/lib/utils";
import { CodePartType, DATE_FORMAT_OPTIONS } from "@/types/numbering-rule";
import { tableManagementApi } from "@/lib/api/tableManagement";

interface AutoConfigPanelProps {
  partType: CodePartType;
  config?: any;
  onChange: (config: any) => void;
  isPreview?: boolean;
}

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

interface ColumnInfo {
  columnName: string;
  displayName: string;
  dataType: string;
  inputType?: string;
}

export const AutoConfigPanel: React.FC<AutoConfigPanelProps> = ({
  partType,
  config = {},
  onChange,
  isPreview = false,
}) => {
  // 1. 순번 (자동 증가)
  if (partType === "sequence") {
    return (
      <div className="space-y-3 sm:space-y-4">
        <div>
          <Label className="text-xs font-medium sm:text-sm">순번 자릿수</Label>
          <Input
            type="number"
            min={1}
            max={10}
            value={config.sequenceLength || 3}
            onChange={(e) =>
              onChange({ ...config, sequenceLength: parseInt(e.target.value) || 3 })
            }
            disabled={isPreview}
            className="h-8 text-xs sm:h-10 sm:text-sm"
          />
          <p className="mt-1 text-[10px] text-muted-foreground sm:text-xs">
            예: 3 → 001, 4 → 0001
          </p>
        </div>
        <div>
          <Label className="text-xs font-medium sm:text-sm">시작 번호</Label>
          <Input
            type="number"
            min={1}
            value={config.startFrom || 1}
            onChange={(e) =>
              onChange({ ...config, startFrom: parseInt(e.target.value) || 1 })
            }
            disabled={isPreview}
            className="h-8 text-xs sm:h-10 sm:text-sm"
          />
          <p className="mt-1 text-[10px] text-muted-foreground sm:text-xs">
            순번이 시작될 번호
          </p>
        </div>
      </div>
    );
  }

  // 2. 숫자 (고정 자릿수)
  if (partType === "number") {
    return (
      <div className="space-y-3 sm:space-y-4">
        <div>
          <Label className="text-xs font-medium sm:text-sm">숫자 자릿수</Label>
          <Input
            type="number"
            min={1}
            max={10}
            value={config.numberLength || 4}
            onChange={(e) =>
              onChange({ ...config, numberLength: parseInt(e.target.value) || 4 })
            }
            disabled={isPreview}
            className="h-8 text-xs sm:h-10 sm:text-sm"
          />
          <p className="mt-1 text-[10px] text-muted-foreground sm:text-xs">
            예: 4 → 0001, 5 → 00001
          </p>
        </div>
        <div>
          <Label className="text-xs font-medium sm:text-sm">숫자 값</Label>
          <Input
            type="number"
            min={0}
            value={config.numberValue || 0}
            onChange={(e) =>
              onChange({ ...config, numberValue: parseInt(e.target.value) || 0 })
            }
            disabled={isPreview}
            className="h-8 text-xs sm:h-10 sm:text-sm"
          />
          <p className="mt-1 text-[10px] text-muted-foreground sm:text-xs">
            고정으로 사용할 숫자
          </p>
        </div>
      </div>
    );
  }

  // 3. 날짜
  if (partType === "date") {
    return (
      <DateConfigPanel
        config={config}
        onChange={onChange}
        isPreview={isPreview}
      />
    );
  }

  // 4. 문자
  if (partType === "text") {
    return (
      <div>
        <Label className="text-xs font-medium sm:text-sm">텍스트 값</Label>
        <Input
          value={config.textValue || ""}
          onChange={(e) => onChange({ ...config, textValue: e.target.value })}
          placeholder="예: PRJ, CODE, PROD"
          disabled={isPreview}
          className="h-8 text-xs sm:h-10 sm:text-sm"
        />
        <p className="mt-1 text-[10px] text-muted-foreground sm:text-xs">
          고정으로 사용할 텍스트 또는 코드
        </p>
      </div>
    );
  }

  return null;
};

/**
 * 날짜 타입 전용 설정 패널
 * - 날짜 형식 선택
 * - 컬럼 값 기준 생성 옵션
 */
interface DateConfigPanelProps {
  config?: any;
  onChange: (config: any) => void;
  isPreview?: boolean;
}

const DateConfigPanel: React.FC<DateConfigPanelProps> = ({
  config = {},
  onChange,
  isPreview = false,
}) => {
  // 테이블 목록
  const [tables, setTables] = useState<TableInfo[]>([]);
  const [loadingTables, setLoadingTables] = useState(false);
  const [tableComboboxOpen, setTableComboboxOpen] = useState(false);

  // 컬럼 목록
  const [columns, setColumns] = useState<ColumnInfo[]>([]);
  const [loadingColumns, setLoadingColumns] = useState(false);
  const [columnComboboxOpen, setColumnComboboxOpen] = useState(false);

  // 체크박스 상태
  const useColumnValue = config.useColumnValue || false;
  const sourceTableName = config.sourceTableName || "";
  const sourceColumnName = config.sourceColumnName || "";

  // 테이블 목록 로드
  useEffect(() => {
    if (useColumnValue && tables.length === 0) {
      loadTables();
    }
  }, [useColumnValue]);

  // 테이블 변경 시 컬럼 로드
  useEffect(() => {
    if (sourceTableName) {
      loadColumns(sourceTableName);
    } else {
      setColumns([]);
    }
  }, [sourceTableName]);

  const loadTables = async () => {
    setLoadingTables(true);
    try {
      const response = await tableManagementApi.getTableList();
      if (response.success && response.data) {
        const tableList = response.data.map((t: any) => ({
          tableName: t.tableName || t.table_name,
          displayName: t.displayName || t.table_label || t.tableName || t.table_name,
        }));
        setTables(tableList);
      }
    } catch (error) {
      console.error("테이블 목록 로드 실패:", error);
    } finally {
      setLoadingTables(false);
    }
  };

  const loadColumns = async (tableName: string) => {
    setLoadingColumns(true);
    try {
      const response = await tableManagementApi.getColumnList(tableName);
      if (response.success && response.data) {
        const rawColumns = response.data?.columns || response.data;
        // 날짜 타입 컬럼만 필터링
        const dateColumns = (rawColumns as any[]).filter((col: any) => {
          const inputType = col.inputType || col.input_type || "";
          const dataType = (col.dataType || col.data_type || "").toLowerCase();
          return (
            inputType === "date" ||
            inputType === "datetime" ||
            dataType.includes("date") ||
            dataType.includes("timestamp")
          );
        });

        setColumns(
          dateColumns.map((col: any) => ({
            columnName: col.columnName || col.column_name,
            displayName: col.displayName || col.column_label || col.columnName || col.column_name,
            dataType: col.dataType || col.data_type || "",
            inputType: col.inputType || col.input_type || "",
          }))
        );
      }
    } catch (error) {
      console.error("컬럼 목록 로드 실패:", error);
    } finally {
      setLoadingColumns(false);
    }
  };

  // 선택된 테이블/컬럼 라벨
  const selectedTableLabel = useMemo(() => {
    const found = tables.find((t) => t.tableName === sourceTableName);
    return found ? `${found.displayName} (${found.tableName})` : "";
  }, [tables, sourceTableName]);

  const selectedColumnLabel = useMemo(() => {
    const found = columns.find((c) => c.columnName === sourceColumnName);
    return found ? `${found.displayName} (${found.columnName})` : "";
  }, [columns, sourceColumnName]);

  return (
    <div className="space-y-3 sm:space-y-4">
      {/* 날짜 형식 선택 */}
      <div>
        <Label className="text-xs font-medium sm:text-sm">날짜 형식</Label>
        <Select
          value={config.dateFormat || "YYYYMMDD"}
          onValueChange={(value) => onChange({ ...config, dateFormat: value })}
          disabled={isPreview}
        >
          <SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm">
            <SelectValue />
          </SelectTrigger>
          <SelectContent>
            {DATE_FORMAT_OPTIONS.map((option) => (
              <SelectItem key={option.value} value={option.value} className="text-xs sm:text-sm">
                {option.label} ({option.example})
              </SelectItem>
            ))}
          </SelectContent>
        </Select>
        <p className="mt-1 text-[10px] text-muted-foreground sm:text-xs">
          {useColumnValue
            ? "선택한 컬럼의 날짜 값이 이 형식으로 변환됩니다"
            : "현재 날짜가 자동으로 입력됩니다"}
        </p>
      </div>

      {/* 컬럼 값 기준 생성 체크박스 */}
      <div className="flex items-start gap-2">
        <Checkbox
          id="useColumnValue"
          checked={useColumnValue}
          onCheckedChange={(checked) => {
            onChange({
              ...config,
              useColumnValue: checked,
              // 체크 해제 시 테이블/컬럼 초기화
              ...(checked ? {} : { sourceTableName: "", sourceColumnName: "" }),
            });
          }}
          disabled={isPreview}
          className="mt-0.5"
        />
        <div className="flex-1">
          <Label
            htmlFor="useColumnValue"
            className="cursor-pointer text-xs font-medium sm:text-sm"
          >
            날짜 컬럼 기준으로 생성
          </Label>
          <p className="text-[10px] text-muted-foreground sm:text-xs">
            폼에 입력된 날짜 값으로 코드를 생성합니다
          </p>
        </div>
      </div>

      {/* 테이블 선택 (체크 시 표시) */}
      {useColumnValue && (
        <>
          <div>
            <Label className="text-xs font-medium sm:text-sm">테이블</Label>
            <Popover open={tableComboboxOpen} onOpenChange={setTableComboboxOpen}>
              <PopoverTrigger asChild>
                <Button
                  variant="outline"
                  role="combobox"
                  aria-expanded={tableComboboxOpen}
                  disabled={isPreview || loadingTables}
                  className="h-8 w-full justify-between text-xs sm:h-10 sm:text-sm"
                >
                  {loadingTables
                    ? "로딩 중..."
                    : sourceTableName
                      ? selectedTableLabel
                      : "테이블 선택"}
                  <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
                </Button>
              </PopoverTrigger>
              <PopoverContent
                className="p-0"
                style={{ width: "var(--radix-popover-trigger-width)" }}
                align="start"
              >
                <Command>
                  <CommandInput placeholder="테이블 검색..." className="text-xs sm:text-sm" />
                  <CommandList>
                    <CommandEmpty className="text-xs sm:text-sm">
                      테이블을 찾을 수 없습니다
                    </CommandEmpty>
                    <CommandGroup>
                      {tables.map((table) => (
                        <CommandItem
                          key={table.tableName}
                          value={`${table.displayName} ${table.tableName}`}
                          onSelect={() => {
                            onChange({
                              ...config,
                              sourceTableName: table.tableName,
                              sourceColumnName: "", // 테이블 변경 시 컬럼 초기화
                            });
                            setTableComboboxOpen(false);
                          }}
                          className="text-xs sm:text-sm"
                        >
                          <Check
                            className={cn(
                              "mr-2 h-4 w-4",
                              sourceTableName === table.tableName ? "opacity-100" : "opacity-0"
                            )}
                          />
                          <div className="flex flex-col">
                            <span className="font-medium">{table.displayName}</span>
                            <span className="text-[10px] text-gray-500">{table.tableName}</span>
                          </div>
                        </CommandItem>
                      ))}
                    </CommandGroup>
                  </CommandList>
                </Command>
              </PopoverContent>
            </Popover>
          </div>

          {/* 컬럼 선택 */}
          <div>
            <Label className="text-xs font-medium sm:text-sm">날짜 컬럼</Label>
            <Popover open={columnComboboxOpen} onOpenChange={setColumnComboboxOpen}>
              <PopoverTrigger asChild>
                <Button
                  variant="outline"
                  role="combobox"
                  aria-expanded={columnComboboxOpen}
                  disabled={isPreview || loadingColumns || !sourceTableName}
                  className="h-8 w-full justify-between text-xs sm:h-10 sm:text-sm"
                >
                  {loadingColumns
                    ? "로딩 중..."
                    : !sourceTableName
                      ? "테이블을 먼저 선택하세요"
                      : sourceColumnName
                        ? selectedColumnLabel
                        : columns.length === 0
                          ? "날짜 컬럼이 없습니다"
                          : "컬럼 선택"}
                  <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
                </Button>
              </PopoverTrigger>
              <PopoverContent
                className="p-0"
                style={{ width: "var(--radix-popover-trigger-width)" }}
                align="start"
              >
                <Command>
                  <CommandInput placeholder="컬럼 검색..." className="text-xs sm:text-sm" />
                  <CommandList>
                    <CommandEmpty className="text-xs sm:text-sm">
                      날짜 컬럼을 찾을 수 없습니다
                    </CommandEmpty>
                    <CommandGroup>
                      {columns.map((column) => (
                        <CommandItem
                          key={column.columnName}
                          value={`${column.displayName} ${column.columnName}`}
                          onSelect={() => {
                            onChange({ ...config, sourceColumnName: column.columnName });
                            setColumnComboboxOpen(false);
                          }}
                          className="text-xs sm:text-sm"
                        >
                          <Check
                            className={cn(
                              "mr-2 h-4 w-4",
                              sourceColumnName === column.columnName ? "opacity-100" : "opacity-0"
                            )}
                          />
                          <div className="flex flex-col">
                            <span className="font-medium">{column.displayName}</span>
                            <span className="text-[10px] text-gray-500">
                              {column.columnName} ({column.inputType || column.dataType})
                            </span>
                          </div>
                        </CommandItem>
                      ))}
                    </CommandGroup>
                  </CommandList>
                </Command>
              </PopoverContent>
            </Popover>
            {sourceTableName && columns.length === 0 && !loadingColumns && (
              <p className="mt-1 text-[10px] text-amber-600 sm:text-xs">
                이 테이블에 날짜 타입 컬럼이 없습니다
              </p>
            )}
          </div>
        </>
      )}
    </div>
  );
};