"use client";

import React from "react";
import { Button } from "@/components/ui/button";
import { Label } from "@/components/ui/label";
import { Table2, Check, ChevronsUpDown } from "lucide-react";
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command";
import { cn } from "@/lib/utils";

export interface BasicConfigPanelProps {
  config: any;
  onChange: (key: string, value: any) => void;
  screenTableName?: string;
  availableTables: Array<{ tableName: string; displayName: string }>;
  loadingTables: boolean;
  targetTableName: string | undefined;
  tableComboboxOpen: boolean;
  onTableComboboxOpenChange: (open: boolean) => void;
  onTableChange: (newTableName: string) => void;
}

/**
 * 기본 설정 패널: 테이블 선택, 데이터 소스
 */
export const BasicConfigPanel: React.FC<BasicConfigPanelProps> = ({
  config,
  screenTableName,
  availableTables,
  loadingTables,
  targetTableName,
  tableComboboxOpen,
  onTableComboboxOpenChange,
  onTableChange,
}) => {
  return (
    <div className="space-y-6">
      <div className="space-y-3">
        <div>
          <h3 className="text-sm font-semibold">데이터 소스</h3>
          <p className="text-muted-foreground text-[10px]">
            테이블을 선택하세요. 미선택 시 화면 메인 테이블을 사용합니다.
          </p>
        </div>
        <hr className="border-border" />
        <div className="space-y-2">
          <Label className="text-xs">테이블 선택</Label>
          <Popover open={tableComboboxOpen} onOpenChange={onTableComboboxOpenChange}>
            <PopoverTrigger asChild>
              <Button
                variant="outline"
                role="combobox"
                aria-expanded={tableComboboxOpen}
                className="h-8 w-full justify-between text-xs"
                disabled={loadingTables}
              >
                <div className="flex items-center gap-2 truncate">
                  <Table2 className="h-3 w-3 shrink-0" />
                  <span className="truncate">
                    {loadingTables
                      ? "테이블 로딩 중..."
                      : targetTableName
                        ? availableTables.find((t) => t.tableName === targetTableName)?.displayName || targetTableName
                        : "테이블 선택"}
                  </span>
                </div>
                <ChevronsUpDown className="ml-2 h-3 w-3 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" />
                <CommandList>
                  <CommandEmpty className="text-xs">테이블을 찾을 수 없습니다.</CommandEmpty>
                  <CommandGroup>
                    {availableTables.map((table) => (
                      <CommandItem
                        key={table.tableName}
                        value={`${table.tableName} ${table.displayName}`}
                        onSelect={() => onTableChange(table.tableName)}
                        className="text-xs"
                      >
                        <Check
                          className={cn(
                            "mr-2 h-3 w-3",
                            targetTableName === table.tableName ? "opacity-100" : "opacity-0",
                          )}
                        />
                        <div className="flex flex-col">
                          <span>{table.displayName}</span>
                          {table.displayName !== table.tableName && (
                            <span className="text-[10px] text-gray-400">{table.tableName}</span>
                          )}
                        </div>
                      </CommandItem>
                    ))}
                  </CommandGroup>
                </CommandList>
              </Command>
            </PopoverContent>
          </Popover>
          {screenTableName && targetTableName && targetTableName !== screenTableName && (
            <div className="flex items-center justify-between rounded bg-amber-50 px-2 py-1">
              <span className="text-[10px] text-amber-700">
                화면 기본 테이블({screenTableName})과 다른 테이블을 사용 중
              </span>
              <Button
                variant="ghost"
                size="sm"
                className="h-5 px-1.5 text-[10px] text-amber-700 hover:text-amber-900"
                onClick={() => onTableChange(screenTableName)}
              >
                기본으로
              </Button>
            </div>
          )}
        </div>
      </div>
    </div>
  );
};