"use client";

import React, { useState, useMemo } from "react";
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 { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Card, CardContent } from "@/components/ui/card";
import { Plus, X } from "lucide-react";
import { SelectedItemsDetailInputConfig, AdditionalFieldDefinition } from "./types";
import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem } from "@/components/ui/command";
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
import { Check, ChevronsUpDown } from "lucide-react";
import { cn } from "@/lib/utils";

export interface SelectedItemsDetailInputConfigPanelProps {
  config: SelectedItemsDetailInputConfig;
  onChange: (config: Partial<SelectedItemsDetailInputConfig>) => void;
  tableColumns?: Array<{ columnName: string; columnLabel?: string; dataType?: string }>;
  allTables?: Array<{ tableName: string; displayName?: string }>;
  onTableChange?: (tableName: string) => void;
}

/**
 * SelectedItemsDetailInput 설정 패널
 * 컴포넌트의 설정값들을 편집할 수 있는 UI 제공
 */
export const SelectedItemsDetailInputConfigPanel: React.FC<SelectedItemsDetailInputConfigPanelProps> = ({
  config,
  onChange,
  tableColumns = [],
  allTables = [],
  onTableChange,
}) => {
  const [localFields, setLocalFields] = useState<AdditionalFieldDefinition[]>(config.additionalFields || []);
  const [displayColumns, setDisplayColumns] = useState<string[]>(config.displayColumns || []);
  const [fieldPopoverOpen, setFieldPopoverOpen] = useState<Record<number, boolean>>({});

  const handleChange = (key: keyof SelectedItemsDetailInputConfig, value: any) => {
    onChange({ [key]: value });
  };

  const handleFieldsChange = (fields: AdditionalFieldDefinition[]) => {
    setLocalFields(fields);
    handleChange("additionalFields", fields);
  };

  const handleDisplayColumnsChange = (columns: string[]) => {
    setDisplayColumns(columns);
    handleChange("displayColumns", columns);
  };

  // 필드 추가
  const addField = () => {
    const newField: AdditionalFieldDefinition = {
      name: `field_${localFields.length + 1}`,
      label: `필드 ${localFields.length + 1}`,
      type: "text",
    };
    handleFieldsChange([...localFields, newField]);
  };

  // 필드 제거
  const removeField = (index: number) => {
    handleFieldsChange(localFields.filter((_, i) => i !== index));
  };

  // 필드 수정
  const updateField = (index: number, updates: Partial<AdditionalFieldDefinition>) => {
    const newFields = [...localFields];
    newFields[index] = { ...newFields[index], ...updates };
    handleFieldsChange(newFields);
  };

  // 표시 컬럼 추가
  const addDisplayColumn = (columnName: string) => {
    if (!displayColumns.includes(columnName)) {
      handleDisplayColumnsChange([...displayColumns, columnName]);
    }
  };

  // 표시 컬럼 제거
  const removeDisplayColumn = (columnName: string) => {
    handleDisplayColumnsChange(displayColumns.filter((col) => col !== columnName));
  };

  // 사용되지 않은 컬럼 목록
  const availableColumns = useMemo(() => {
    const usedColumns = new Set([...displayColumns, ...localFields.map((f) => f.name)]);
    return tableColumns.filter((col) => !usedColumns.has(col.columnName));
  }, [tableColumns, displayColumns, localFields]);

  // 테이블 선택 Combobox 상태
  const [tableSelectOpen, setTableSelectOpen] = useState(false);
  const [tableSearchValue, setTableSearchValue] = useState("");

  // 필터링된 테이블 목록
  const filteredTables = useMemo(() => {
    if (!tableSearchValue) return allTables;
    const searchLower = tableSearchValue.toLowerCase();
    return allTables.filter(
      (table) =>
        table.tableName.toLowerCase().includes(searchLower) || table.displayName?.toLowerCase().includes(searchLower),
    );
  }, [allTables, tableSearchValue]);

  // 선택된 테이블 표시명
  const selectedTableLabel = useMemo(() => {
    if (!config.targetTable) return "테이블을 선택하세요";
    const table = allTables.find((t) => t.tableName === config.targetTable);
    return table ? table.displayName || table.tableName : config.targetTable;
  }, [config.targetTable, allTables]);

  return (
    <div className="space-y-4">
      {/* 데이터 소스 ID */}
      <div className="space-y-2">
        <Label className="text-xs font-semibold sm:text-sm">데이터 소스 ID</Label>
        <Input
          value={config.dataSourceId || ""}
          onChange={(e) => handleChange("dataSourceId", e.target.value)}
          placeholder="table-list-123"
          className="h-7 text-xs sm:h-8 sm:text-sm"
        />
        <p className="text-[10px] text-gray-500 sm:text-xs">
          💡 이전 모달에서 데이터를 전달하는 컴포넌트 ID (보통 TableList의 ID)
        </p>
      </div>

      {/* 저장 대상 테이블 */}
      <div className="space-y-2">
        <Label className="text-xs font-semibold sm:text-sm">저장 대상 테이블</Label>
        <Popover open={tableSelectOpen} onOpenChange={setTableSelectOpen}>
          <PopoverTrigger asChild>
            <Button
              variant="outline"
              role="combobox"
              aria-expanded={tableSelectOpen}
              className="h-7 w-full justify-between text-xs sm:h-8 sm:text-sm"
            >
              {selectedTableLabel}
              <ChevronsUpDown className="ml-2 h-3 w-3 shrink-0 opacity-50 sm:h-4 sm:w-4" />
            </Button>
          </PopoverTrigger>
          <PopoverContent className="w-full p-0" align="start">
            <Command>
              <CommandInput
                placeholder="테이블 검색..."
                value={tableSearchValue}
                onValueChange={setTableSearchValue}
                className="text-xs sm:text-sm"
              />
              <CommandEmpty className="text-xs sm:text-sm">테이블을 찾을 수 없습니다.</CommandEmpty>
              <CommandGroup className="max-h-48 overflow-auto sm:max-h-64">
                {filteredTables.map((table) => (
                  <CommandItem
                    key={table.tableName}
                    value={table.tableName}
                    onSelect={(currentValue) => {
                      handleChange("targetTable", currentValue);
                      setTableSelectOpen(false);
                      setTableSearchValue("");
                      if (onTableChange) {
                        onTableChange(currentValue);
                      }
                    }}
                    className="text-xs sm:text-sm"
                  >
                    <Check
                      className={cn(
                        "mr-2 h-3 w-3 sm:h-4 sm:w-4",
                        config.targetTable === table.tableName ? "opacity-100" : "opacity-0",
                      )}
                    />
                    {table.displayName || table.tableName}
                  </CommandItem>
                ))}
              </CommandGroup>
            </Command>
          </PopoverContent>
        </Popover>
        <p className="text-[10px] text-gray-500 sm:text-xs">최종 데이터를 저장할 테이블</p>
      </div>

      {/* 표시할 원본 데이터 컬럼 */}
      <div className="space-y-2">
        <Label className="text-xs font-semibold sm:text-sm">표시할 원본 데이터 컬럼</Label>
        <div className="space-y-2">
          {displayColumns.map((colName, index) => (
            <div key={index} className="flex items-center gap-2">
              <Input value={colName} readOnly className="h-7 flex-1 text-xs sm:h-8 sm:text-sm" />
              <Button
                type="button"
                variant="ghost"
                size="icon"
                onClick={() => removeDisplayColumn(colName)}
                className="h-6 w-6 text-red-500 hover:bg-red-50 sm:h-7 sm:w-7"
              >
                <X className="h-3 w-3 sm:h-4 sm:w-4" />
              </Button>
            </div>
          ))}
          
          <Popover>
            <PopoverTrigger asChild>
              <Button
                type="button"
                variant="outline"
                size="sm"
                className="h-7 w-full border-dashed text-xs sm:text-sm"
              >
                <Plus className="mr-1 h-3 w-3 sm:h-4 sm:w-4" />
                컬럼 추가
              </Button>
            </PopoverTrigger>
            <PopoverContent className="w-full p-0" align="start">
              <Command>
                <CommandInput placeholder="컬럼 검색..." className="text-xs sm:text-sm" />
                <CommandEmpty className="text-xs sm:text-sm">사용 가능한 컬럼이 없습니다.</CommandEmpty>
                <CommandGroup className="max-h-48 overflow-auto sm:max-h-64">
                  {availableColumns.map((column) => (
                    <CommandItem
                      key={column.columnName}
                      value={column.columnName}
                      onSelect={() => addDisplayColumn(column.columnName)}
                      className="text-xs sm:text-sm"
                    >
                      <div>
                        <div className="font-medium">{column.columnLabel || column.columnName}</div>
                        {column.dataType && <div className="text-[10px] text-gray-500">{column.dataType}</div>}
                      </div>
                    </CommandItem>
                  ))}
                </CommandGroup>
              </Command>
            </PopoverContent>
          </Popover>
        </div>
        <p className="text-[10px] text-gray-500 sm:text-xs">
          전달받은 원본 데이터 중 화면에 표시할 컬럼 (예: 품목코드, 품목명)
        </p>
      </div>

      {/* 추가 입력 필드 정의 */}
      <div className="space-y-2">
        <Label className="text-xs font-semibold sm:text-sm">추가 입력 필드 정의</Label>

        {localFields.map((field, index) => (
          <Card key={index} className="border-2">
            <CardContent className="space-y-2 pt-3 sm:space-y-3 sm:pt-4">
              <div className="flex items-center justify-between">
                <span className="text-xs font-semibold text-gray-700 sm:text-sm">필드 {index + 1}</span>
                <Button
                  type="button"
                  variant="ghost"
                  size="icon"
                  onClick={() => removeField(index)}
                  className="h-5 w-5 text-red-500 hover:bg-red-50 sm:h-6 sm:w-6"
                >
                  <X className="h-2 w-2 sm:h-3 sm:w-3" />
                </Button>
              </div>

              <div className="grid grid-cols-2 gap-2 sm:gap-3">
                <div className="space-y-1">
                  <Label className="text-[10px] sm:text-xs">필드명 (컬럼)</Label>
                  <Popover
                    open={fieldPopoverOpen[index] || false}
                    onOpenChange={(open) => setFieldPopoverOpen({ ...fieldPopoverOpen, [index]: open })}
                  >
                    <PopoverTrigger asChild>
                      <Button
                        variant="outline"
                        role="combobox"
                        className="h-6 w-full justify-between text-[10px] sm:h-7 sm:text-xs"
                      >
                        {field.name || "컬럼 선택"}
                        <ChevronsUpDown className="ml-1 h-2 w-2 shrink-0 opacity-50 sm:h-3 sm:w-3" />
                      </Button>
                    </PopoverTrigger>
                    <PopoverContent className="w-[180px] p-0 sm:w-[200px]">
                      <Command>
                        <CommandInput placeholder="컬럼 검색..." className="h-6 text-[10px] sm:h-7 sm:text-xs" />
                        <CommandEmpty className="text-[10px] sm:text-xs">사용 가능한 컬럼이 없습니다.</CommandEmpty>
                        <CommandGroup className="max-h-[150px] overflow-auto sm:max-h-[200px]">
                          {availableColumns.map((column) => (
                            <CommandItem
                              key={column.columnName}
                              value={column.columnName}
                              onSelect={() => {
                                updateField(index, {
                                  name: column.columnName,
                                  label: column.columnLabel || column.columnName,
                                });
                                setFieldPopoverOpen({ ...fieldPopoverOpen, [index]: false });
                              }}
                              className="text-[10px] sm:text-xs"
                            >
                              <Check
                                className={cn(
                                  "mr-1 h-2 w-2 sm:mr-2 sm:h-3 sm:w-3",
                                  field.name === column.columnName ? "opacity-100" : "opacity-0",
                                )}
                              />
                              <div>
                                <div className="font-medium">{column.columnLabel}</div>
                                <div className="text-[9px] text-gray-500">{column.columnName}</div>
                              </div>
                            </CommandItem>
                          ))}
                        </CommandGroup>
                      </Command>
                    </PopoverContent>
                  </Popover>
                </div>

                <div className="space-y-1">
                  <Label className="text-[10px] sm:text-xs">라벨</Label>
                  <Input
                    value={field.label}
                    onChange={(e) => updateField(index, { label: e.target.value })}
                    placeholder="필드 라벨"
                    className="h-6 w-full text-[10px] sm:h-7 sm:text-xs"
                  />
                </div>
              </div>

              <div className="grid grid-cols-2 gap-2 sm:gap-3">
                <div className="space-y-1">
                  <Label className="text-[10px] sm:text-xs">타입</Label>
                  <Select
                    value={field.type}
                    onValueChange={(value) =>
                      updateField(index, { type: value as AdditionalFieldDefinition["type"] })
                    }
                  >
                    <SelectTrigger className="h-6 w-full text-[10px] sm:h-7 sm:text-xs">
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="text" className="text-[10px] sm:text-xs">
                        텍스트
                      </SelectItem>
                      <SelectItem value="number" className="text-[10px] sm:text-xs">
                        숫자
                      </SelectItem>
                      <SelectItem value="date" className="text-[10px] sm:text-xs">
                        날짜
                      </SelectItem>
                      <SelectItem value="select" className="text-[10px] sm:text-xs">
                        선택박스
                      </SelectItem>
                      <SelectItem value="checkbox" className="text-[10px] sm:text-xs">
                        체크박스
                      </SelectItem>
                      <SelectItem value="textarea" className="text-[10px] sm:text-xs">
                        텍스트영역
                      </SelectItem>
                    </SelectContent>
                  </Select>
                </div>

                <div className="space-y-1">
                  <Label className="text-[10px] sm:text-xs">Placeholder</Label>
                  <Input
                    value={field.placeholder || ""}
                    onChange={(e) => updateField(index, { placeholder: e.target.value })}
                    placeholder="입력 안내"
                    className="h-6 w-full text-[10px] sm:h-7 sm:text-xs"
                  />
                </div>
              </div>

              <div className="flex items-center space-x-2">
                <Checkbox
                  id={`required-${index}`}
                  checked={field.required ?? false}
                  onCheckedChange={(checked) => updateField(index, { required: checked as boolean })}
                />
                <Label htmlFor={`required-${index}`} className="cursor-pointer text-[10px] font-normal sm:text-xs">
                  필수 입력
                </Label>
              </div>
            </CardContent>
          </Card>
        ))}

        <Button
          type="button"
          variant="outline"
          size="sm"
          onClick={addField}
          className="h-7 w-full border-dashed text-xs sm:text-sm"
        >
          <Plus className="mr-1 h-3 w-3 sm:mr-2 sm:h-4 sm:w-4" />
          필드 추가
        </Button>
      </div>

      {/* 레이아웃 설정 */}
      <div className="space-y-2">
        <Label className="text-xs font-semibold sm:text-sm">레이아웃</Label>
        <Select
          value={config.layout || "grid"}
          onValueChange={(value) => handleChange("layout", value as "grid" | "card")}
        >
          <SelectTrigger className="h-7 text-xs sm:h-8 sm:text-sm">
            <SelectValue />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="grid" className="text-xs sm:text-sm">
              테이블 형식 (Grid)
            </SelectItem>
            <SelectItem value="card" className="text-xs sm:text-sm">
              카드 형식 (Card)
            </SelectItem>
          </SelectContent>
        </Select>
        <p className="text-[10px] text-muted-foreground sm:text-xs">
          {config.layout === "grid" ? "행 단위로 데이터를 표시합니다" : "각 항목을 카드로 표시합니다"}
        </p>
      </div>

      {/* 옵션 */}
      <div className="space-y-2 rounded-lg border p-3 sm:p-4">
        <div className="flex items-center space-x-2">
          <Checkbox
            id="show-index"
            checked={config.showIndex ?? true}
            onCheckedChange={(checked) => handleChange("showIndex", checked as boolean)}
          />
          <Label htmlFor="show-index" className="cursor-pointer text-[10px] font-normal sm:text-xs">
            항목 번호 표시
          </Label>
        </div>

        <div className="flex items-center space-x-2">
          <Checkbox
            id="allow-remove"
            checked={config.allowRemove ?? false}
            onCheckedChange={(checked) => handleChange("allowRemove", checked as boolean)}
          />
          <Label htmlFor="allow-remove" className="cursor-pointer text-[10px] font-normal sm:text-xs">
            항목 삭제 허용
          </Label>
        </div>

        <div className="flex items-center space-x-2">
          <Checkbox
            id="disabled"
            checked={config.disabled ?? false}
            onCheckedChange={(checked) => handleChange("disabled", checked as boolean)}
          />
          <Label htmlFor="disabled" className="cursor-pointer text-[10px] font-normal sm:text-xs">
            비활성화 (읽기 전용)
          </Label>
        </div>
      </div>

      {/* 사용 예시 */}
      <div className="rounded-lg bg-blue-50 p-2 text-xs sm:p-3 sm:text-sm">
        <p className="mb-1 font-medium text-blue-900">💡 사용 예시</p>
        <ul className="space-y-1 text-[10px] text-blue-700 sm:text-xs">
          <li>• 품목 선택 모달 → 다음 버튼 → 거래처별 가격 입력</li>
          <li>• 사용자 선택 모달 → 다음 버튼 → 권한 및 부서 할당</li>
          <li>• 제품 선택 모달 → 다음 버튼 → 수량 및 납기일 입력</li>
        </ul>
      </div>
    </div>
  );
};

SelectedItemsDetailInputConfigPanel.displayName = "SelectedItemsDetailInputConfigPanel";