"use client";

import React, { useState, useEffect } from "react";
import { Label } from "@/components/ui/label";
import { Input } from "@/components/ui/input";
import { Switch } from "@/components/ui/switch";
import { Button } from "@/components/ui/button";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion";
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover";
import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
} from "@/components/ui/command";
import { Check, ChevronsUpDown, Loader2 } from "lucide-react";
import { cn } from "@/lib/utils";
import { tableTypeApi } from "@/lib/api/screen";
import { TimelineSchedulerConfig, ScheduleType, SourceDataConfig } from "./types";
import { zoomLevelOptions, scheduleTypeOptions } from "./config";

interface TimelineSchedulerConfigPanelProps {
  config: TimelineSchedulerConfig;
  onChange: (config: Partial<TimelineSchedulerConfig>) => void;
}

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

interface ColumnInfo {
  columnName: string;
  displayName: string;
}

export function TimelineSchedulerConfigPanel({
  config,
  onChange,
}: TimelineSchedulerConfigPanelProps) {
  const [tables, setTables] = useState<TableInfo[]>([]);
  const [sourceColumns, setSourceColumns] = useState<ColumnInfo[]>([]);
  const [resourceColumns, setResourceColumns] = useState<ColumnInfo[]>([]);
  const [loading, setLoading] = useState(false);
  const [sourceTableSelectOpen, setSourceTableSelectOpen] = useState(false);
  const [resourceTableSelectOpen, setResourceTableSelectOpen] = useState(false);

  // 테이블 목록 로드
  useEffect(() => {
    const loadTables = async () => {
      setLoading(true);
      try {
        const tableList = await tableTypeApi.getTables();
        if (Array.isArray(tableList)) {
          setTables(
            tableList.map((t: any) => ({
              tableName: t.table_name || t.tableName,
              displayName: t.display_name || t.displayName || t.table_name || t.tableName,
            }))
          );
        }
      } catch (err) {
        console.error("테이블 목록 로드 오류:", err);
      } finally {
        setLoading(false);
      }
    };
    loadTables();
  }, []);

  // 소스 테이블 컬럼 로드
  useEffect(() => {
    const loadSourceColumns = async () => {
      if (!config.sourceConfig?.tableName) {
        setSourceColumns([]);
        return;
      }
      try {
        const columns = await tableTypeApi.getColumns(config.sourceConfig.tableName);
        if (Array.isArray(columns)) {
          setSourceColumns(
            columns.map((col: any) => ({
              columnName: col.column_name || col.columnName,
              displayName: col.display_name || col.displayName || col.column_name || col.columnName,
            }))
          );
        }
      } catch (err) {
        console.error("소스 컬럼 로드 오류:", err);
        setSourceColumns([]);
      }
    };
    loadSourceColumns();
  }, [config.sourceConfig?.tableName]);

  // 리소스 테이블 컬럼 로드
  useEffect(() => {
    const loadResourceColumns = async () => {
      if (!config.resourceTable) {
        setResourceColumns([]);
        return;
      }
      try {
        const columns = await tableTypeApi.getColumns(config.resourceTable);
        if (Array.isArray(columns)) {
          setResourceColumns(
            columns.map((col: any) => ({
              columnName: col.column_name || col.columnName,
              displayName: col.display_name || col.displayName || col.column_name || col.columnName,
            }))
          );
        }
      } catch (err) {
        console.error("리소스 컬럼 로드 오류:", err);
        setResourceColumns([]);
      }
    };
    loadResourceColumns();
  }, [config.resourceTable]);

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

  // 소스 데이터 설정 업데이트
  const updateSourceConfig = (updates: Partial<SourceDataConfig>) => {
    updateConfig({
      sourceConfig: {
        ...config.sourceConfig,
        ...updates,
      },
    });
  };

  // 리소스 필드 매핑 업데이트
  const updateResourceFieldMapping = (field: string, value: string) => {
    updateConfig({
      resourceFieldMapping: {
        ...config.resourceFieldMapping,
        id: config.resourceFieldMapping?.id || "id",
        name: config.resourceFieldMapping?.name || "name",
        [field]: value,
      },
    });
  };

  return (
    <div className="space-y-4 p-4">
      <Accordion type="multiple" defaultValue={["source", "resource", "display"]}>
        {/* 소스 데이터 설정 (스케줄 생성 기준) */}
        <AccordionItem value="source">
          <AccordionTrigger className="text-sm font-medium">
            스케줄 생성 설정
          </AccordionTrigger>
          <AccordionContent className="space-y-3 pt-2">
            <p className="text-[10px] text-muted-foreground mb-2">
              스케줄 자동 생성 시 참조할 원본 데이터 설정 (저장: schedule_mng)
            </p>

            {/* 스케줄 타입 */}
            <div className="space-y-1">
              <Label className="text-xs">스케줄 타입</Label>
              <Select
                value={config.scheduleType || "PRODUCTION"}
                onValueChange={(v) => updateConfig({ scheduleType: v as ScheduleType })}
              >
                <SelectTrigger className="h-8 text-xs">
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  {scheduleTypeOptions.map((opt) => (
                    <SelectItem key={opt.value} value={opt.value}>
                      {opt.label}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>

            {/* 소스 테이블 선택 */}
            <div className="space-y-1">
              <Label className="text-xs">소스 테이블 (수주/작업요청 등)</Label>
              <Popover open={sourceTableSelectOpen} onOpenChange={setSourceTableSelectOpen}>
                <PopoverTrigger asChild>
                  <Button
                    variant="outline"
                    role="combobox"
                    aria-expanded={sourceTableSelectOpen}
                    className="h-8 w-full justify-between text-xs"
                    disabled={loading}
                  >
                    {config.sourceConfig?.tableName ? (
                      tables.find((t) => t.tableName === config.sourceConfig?.tableName)
                        ?.displayName || config.sourceConfig.tableName
                    ) : (
                      "소스 테이블 선택..."
                    )}
                    <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
                    filter={(value, search) => {
                      const lowerSearch = search.toLowerCase();
                      if (value.toLowerCase().includes(lowerSearch)) {
                        return 1;
                      }
                      return 0;
                    }}
                  >
                    <CommandInput placeholder="테이블 검색..." className="text-xs" />
                    <CommandList>
                      <CommandEmpty className="text-xs">
                        테이블을 찾을 수 없습니다.
                      </CommandEmpty>
                      <CommandGroup>
                        {tables.map((table) => (
                          <CommandItem
                            key={table.tableName}
                            value={`${table.displayName} ${table.tableName}`}
                            onSelect={() => {
                              updateSourceConfig({ tableName: table.tableName });
                              setSourceTableSelectOpen(false);
                            }}
                            className="text-xs"
                          >
                            <Check
                              className={cn(
                                "mr-2 h-3 w-3",
                                config.sourceConfig?.tableName === table.tableName
                                  ? "opacity-100"
                                  : "opacity-0"
                              )}
                            />
                            <div className="flex flex-col">
                              <span>{table.displayName}</span>
                              <span className="text-[10px] text-muted-foreground">
                                {table.tableName}
                              </span>
                            </div>
                          </CommandItem>
                        ))}
                      </CommandGroup>
                    </CommandList>
                  </Command>
                </PopoverContent>
              </Popover>
            </div>

            {/* 소스 필드 매핑 */}
            {config.sourceConfig?.tableName && (
              <div className="space-y-2 mt-2">
                <Label className="text-xs font-medium">필드 매핑</Label>
                <div className="grid grid-cols-2 gap-2">
                  {/* 기준일 필드 */}
                  <div className="space-y-1 col-span-2">
                    <Label className="text-[10px]">기준일 (마감일/납기일) *</Label>
                    <Select
                      value={config.sourceConfig?.dueDateField || ""}
                      onValueChange={(v) => updateSourceConfig({ dueDateField: v })}
                    >
                      <SelectTrigger className="h-7 text-xs">
                        <SelectValue placeholder="필수 선택" />
                      </SelectTrigger>
                      <SelectContent>
                        {sourceColumns.map((col) => (
                          <SelectItem key={col.columnName} value={col.columnName}>
                            {col.displayName}
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                    <p className="text-[10px] text-muted-foreground">
                      스케줄 종료일로 사용됩니다
                    </p>
                  </div>

                  {/* 수량 필드 */}
                  <div className="space-y-1">
                    <Label className="text-[10px]">수량 필드</Label>
                    <Select
                      value={config.sourceConfig?.quantityField || ""}
                      onValueChange={(v) => updateSourceConfig({ quantityField: v })}
                    >
                      <SelectTrigger className="h-7 text-xs">
                        <SelectValue placeholder="선택" />
                      </SelectTrigger>
                      <SelectContent>
                        {sourceColumns.map((col) => (
                          <SelectItem key={col.columnName} value={col.columnName}>
                            {col.displayName}
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                  </div>

                  {/* 그룹화 필드 */}
                  <div className="space-y-1">
                    <Label className="text-[10px]">그룹 필드 (품목코드)</Label>
                    <Select
                      value={config.sourceConfig?.groupByField || ""}
                      onValueChange={(v) => updateSourceConfig({ groupByField: v })}
                    >
                      <SelectTrigger className="h-7 text-xs">
                        <SelectValue placeholder="선택" />
                      </SelectTrigger>
                      <SelectContent>
                        {sourceColumns.map((col) => (
                          <SelectItem key={col.columnName} value={col.columnName}>
                            {col.displayName}
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                  </div>

                  {/* 그룹명 필드 */}
                  <div className="space-y-1 col-span-2">
                    <Label className="text-[10px]">그룹명 필드 (품목명)</Label>
                    <Select
                      value={config.sourceConfig?.groupNameField || ""}
                      onValueChange={(v) => updateSourceConfig({ groupNameField: v })}
                    >
                      <SelectTrigger className="h-7 text-xs">
                        <SelectValue placeholder="선택" />
                      </SelectTrigger>
                      <SelectContent>
                        {sourceColumns.map((col) => (
                          <SelectItem key={col.columnName} value={col.columnName}>
                            {col.displayName}
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                  </div>
                </div>
              </div>
            )}
          </AccordionContent>
        </AccordionItem>

        {/* 리소스 설정 */}
        <AccordionItem value="resource">
          <AccordionTrigger className="text-sm font-medium">
            리소스 설정 (설비/작업자)
          </AccordionTrigger>
          <AccordionContent className="space-y-3 pt-2">
            <p className="text-[10px] text-muted-foreground mb-2">
              타임라인 Y축에 표시할 리소스 (설비, 작업자 등)
            </p>

            {/* 리소스 테이블 선택 */}
            <div className="space-y-1">
              <Label className="text-xs">리소스 테이블</Label>
              <Popover
                open={resourceTableSelectOpen}
                onOpenChange={setResourceTableSelectOpen}
              >
                <PopoverTrigger asChild>
                  <Button
                    variant="outline"
                    role="combobox"
                    aria-expanded={resourceTableSelectOpen}
                    className="h-8 w-full justify-between text-xs"
                    disabled={loading}
                  >
                    {config.resourceTable ? (
                      tables.find((t) => t.tableName === config.resourceTable)
                        ?.displayName || config.resourceTable
                    ) : (
                      "리소스 테이블 선택..."
                    )}
                    <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
                    filter={(value, search) => {
                      const lowerSearch = search.toLowerCase();
                      if (value.toLowerCase().includes(lowerSearch)) {
                        return 1;
                      }
                      return 0;
                    }}
                  >
                    <CommandInput placeholder="테이블 검색..." className="text-xs" />
                    <CommandList>
                      <CommandEmpty className="text-xs">
                        테이블을 찾을 수 없습니다.
                      </CommandEmpty>
                      <CommandGroup>
                        {tables.map((table) => (
                          <CommandItem
                            key={table.tableName}
                            value={`${table.displayName} ${table.tableName}`}
                            onSelect={() => {
                              updateConfig({ resourceTable: table.tableName });
                              setResourceTableSelectOpen(false);
                            }}
                            className="text-xs"
                          >
                            <Check
                              className={cn(
                                "mr-2 h-3 w-3",
                                config.resourceTable === table.tableName
                                  ? "opacity-100"
                                  : "opacity-0"
                              )}
                            />
                            <div className="flex flex-col">
                              <span>{table.displayName}</span>
                              <span className="text-[10px] text-muted-foreground">
                                {table.tableName}
                              </span>
                            </div>
                          </CommandItem>
                        ))}
                      </CommandGroup>
                    </CommandList>
                  </Command>
                </PopoverContent>
              </Popover>
            </div>

            {/* 리소스 필드 매핑 */}
            {config.resourceTable && (
              <div className="space-y-2 mt-2">
                <Label className="text-xs font-medium">리소스 필드</Label>
                <div className="grid grid-cols-2 gap-2">
                  {/* ID 필드 */}
                  <div className="space-y-1">
                    <Label className="text-[10px]">ID 필드</Label>
                    <Select
                      value={config.resourceFieldMapping?.id || ""}
                      onValueChange={(v) => updateResourceFieldMapping("id", v)}
                    >
                      <SelectTrigger className="h-7 text-xs">
                        <SelectValue placeholder="선택" />
                      </SelectTrigger>
                      <SelectContent>
                        {resourceColumns.map((col) => (
                          <SelectItem key={col.columnName} value={col.columnName}>
                            {col.displayName}
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                  </div>

                  {/* 이름 필드 */}
                  <div className="space-y-1">
                    <Label className="text-[10px]">이름 필드</Label>
                    <Select
                      value={config.resourceFieldMapping?.name || ""}
                      onValueChange={(v) => updateResourceFieldMapping("name", v)}
                    >
                      <SelectTrigger className="h-7 text-xs">
                        <SelectValue placeholder="선택" />
                      </SelectTrigger>
                      <SelectContent>
                        {resourceColumns.map((col) => (
                          <SelectItem key={col.columnName} value={col.columnName}>
                            {col.displayName}
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                  </div>
                </div>
              </div>
            )}
          </AccordionContent>
        </AccordionItem>

        {/* 표시 설정 */}
        <AccordionItem value="display">
          <AccordionTrigger className="text-sm font-medium">
            표시 설정
          </AccordionTrigger>
          <AccordionContent className="space-y-3 pt-2">
            {/* 기본 줌 레벨 */}
            <div className="space-y-1">
              <Label className="text-xs">기본 줌 레벨</Label>
              <Select
                value={config.defaultZoomLevel || "day"}
                onValueChange={(v) =>
                  updateConfig({ defaultZoomLevel: v as any })
                }
              >
                <SelectTrigger className="h-8 text-xs">
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  {zoomLevelOptions.map((opt) => (
                    <SelectItem key={opt.value} value={opt.value}>
                      {opt.label}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>

            {/* 높이 */}
            <div className="space-y-1">
              <Label className="text-xs">높이 (px)</Label>
              <Input
                type="number"
                value={config.height || 500}
                onChange={(e) =>
                  updateConfig({ height: parseInt(e.target.value) || 500 })
                }
                className="h-8 text-xs"
              />
            </div>

            {/* 행 높이 */}
            <div className="space-y-1">
              <Label className="text-xs">행 높이 (px)</Label>
              <Input
                type="number"
                value={config.rowHeight || 50}
                onChange={(e) =>
                  updateConfig({ rowHeight: parseInt(e.target.value) || 50 })
                }
                className="h-8 text-xs"
              />
            </div>

            {/* 토글 스위치들 */}
            <div className="space-y-2">
              <div className="flex items-center justify-between">
                <Label className="text-xs">편집 가능</Label>
                <Switch
                  checked={config.editable ?? true}
                  onCheckedChange={(v) => updateConfig({ editable: v })}
                />
              </div>

              <div className="flex items-center justify-between">
                <Label className="text-xs">드래그 이동</Label>
                <Switch
                  checked={config.draggable ?? true}
                  onCheckedChange={(v) => updateConfig({ draggable: v })}
                />
              </div>

              <div className="flex items-center justify-between">
                <Label className="text-xs">리사이즈</Label>
                <Switch
                  checked={config.resizable ?? true}
                  onCheckedChange={(v) => updateConfig({ resizable: v })}
                />
              </div>

              <div className="flex items-center justify-between">
                <Label className="text-xs">오늘 표시선</Label>
                <Switch
                  checked={config.showTodayLine ?? true}
                  onCheckedChange={(v) => updateConfig({ showTodayLine: v })}
                />
              </div>

              <div className="flex items-center justify-between">
                <Label className="text-xs">진행률 표시</Label>
                <Switch
                  checked={config.showProgress ?? true}
                  onCheckedChange={(v) => updateConfig({ showProgress: v })}
                />
              </div>

              <div className="flex items-center justify-between">
                <Label className="text-xs">툴바 표시</Label>
                <Switch
                  checked={config.showToolbar ?? true}
                  onCheckedChange={(v) => updateConfig({ showToolbar: v })}
                />
              </div>
            </div>
          </AccordionContent>
        </AccordionItem>
      </Accordion>
    </div>
  );
}

export default TimelineSchedulerConfigPanel;
