"use client";

import { useState, useEffect } from "react";
import { cn } from "@/lib/utils";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Button } from "@/components/ui/button";
import { Checkbox } from "@/components/ui/checkbox";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { ChevronLeft, ChevronRight, Plus, Trash2, Loader2 } from "lucide-react";
import type {
  PopSearchConfig,
  SearchInputType,
  DatePresetOption,
  ModalSelectConfig,
  ModalDisplayStyle,
  ModalSearchMode,
  ModalFilterTab,
} from "./types";
import {
  SEARCH_INPUT_TYPE_LABELS,
  DATE_PRESET_LABELS,
  MODAL_DISPLAY_STYLE_LABELS,
  MODAL_SEARCH_MODE_LABELS,
  MODAL_FILTER_TAB_LABELS,
  normalizeInputType,
} from "./types";
import { tableManagementApi, getTableColumns } from "@/lib/api/tableManagement";
import type { TableInfo, ColumnTypeInfo } from "@/lib/api/tableManagement";

// ========================================
// 기본값
// ========================================

const DEFAULT_CONFIG: PopSearchConfig = {
  inputType: "text",
  fieldName: "",
  placeholder: "검색어 입력",
  debounceMs: 500,
  triggerOnEnter: true,
  labelPosition: "top",
  labelText: "",
  labelVisible: true,
};

// ========================================
// 설정 패널 메인
// ========================================

interface ConfigPanelProps {
  config: PopSearchConfig | undefined;
  onUpdate: (config: PopSearchConfig) => void;
}

export function PopSearchConfigPanel({ config, onUpdate }: ConfigPanelProps) {
  const [step, setStep] = useState(0);
  const rawCfg = { ...DEFAULT_CONFIG, ...(config || {}) };
  const cfg: PopSearchConfig = {
    ...rawCfg,
    inputType: normalizeInputType(rawCfg.inputType as string),
  };

  const update = (partial: Partial<PopSearchConfig>) => {
    onUpdate({ ...cfg, ...partial });
  };

  const STEPS = ["기본 설정", "상세 설정"];

  return (
    <div className="space-y-3 overflow-y-auto pr-1 pb-32">
      {/* Stepper 헤더 */}
      <div className="flex items-center gap-2 rounded-lg bg-muted/50 px-3 py-2">
        {STEPS.map((s, i) => (
          <button
            key={s}
            type="button"
            onClick={() => setStep(i)}
            className={cn(
              "flex items-center gap-1 rounded px-2 py-1 text-[10px] font-medium transition-colors",
              step === i
                ? "bg-primary text-primary-foreground"
                : "text-muted-foreground hover:text-foreground"
            )}
          >
            <span className="flex h-4 w-4 items-center justify-center rounded-full bg-background text-[8px] font-bold text-foreground">
              {i + 1}
            </span>
            {s}
          </button>
        ))}
      </div>

      {step === 0 && <StepBasicSettings cfg={cfg} update={update} />}
      {step === 1 && <StepDetailSettings cfg={cfg} update={update} />}

      <div className="flex justify-between pt-2">
        <Button
          variant="outline"
          size="sm"
          className="h-7 text-[10px]"
          disabled={step === 0}
          onClick={() => setStep(step - 1)}
        >
          <ChevronLeft className="mr-1 h-3 w-3" />
          이전
        </Button>
        <Button
          variant="outline"
          size="sm"
          className="h-7 text-[10px]"
          disabled={step === STEPS.length - 1}
          onClick={() => setStep(step + 1)}
        >
          다음
          <ChevronRight className="ml-1 h-3 w-3" />
        </Button>
      </div>
    </div>
  );
}

// ========================================
// STEP 1: 기본 설정
// ========================================

interface StepProps {
  cfg: PopSearchConfig;
  update: (partial: Partial<PopSearchConfig>) => void;
}

function StepBasicSettings({ cfg, update }: StepProps) {
  return (
    <div className="space-y-3">
      <div className="space-y-1">
        <Label className="text-[10px]">입력 타입</Label>
        <Select
          value={normalizeInputType(cfg.inputType as string)}
          onValueChange={(v) => update({ inputType: v as SearchInputType })}
        >
          <SelectTrigger className="h-8 text-xs">
            <SelectValue />
          </SelectTrigger>
          <SelectContent>
            {Object.entries(SEARCH_INPUT_TYPE_LABELS).map(([key, label]) => (
              <SelectItem key={key} value={key} className="text-xs">
                {label}
              </SelectItem>
            ))}
          </SelectContent>
        </Select>
      </div>

      <div className="space-y-1">
        <Label className="text-[10px]">플레이스홀더</Label>
        <Input
          value={cfg.placeholder || ""}
          onChange={(e) => update({ placeholder: e.target.value })}
          placeholder="입력 힌트 텍스트"
          className="h-8 text-xs"
        />
      </div>

      <div className="flex items-center gap-2">
        <Checkbox
          id="labelVisible"
          checked={cfg.labelVisible !== false}
          onCheckedChange={(checked) => update({ labelVisible: Boolean(checked) })}
        />
        <Label htmlFor="labelVisible" className="text-[10px]">라벨 표시</Label>
      </div>

      {cfg.labelVisible !== false && (
        <>
          <div className="space-y-1">
            <Label className="text-[10px]">라벨 텍스트</Label>
            <Input
              value={cfg.labelText || ""}
              onChange={(e) => update({ labelText: e.target.value })}
              placeholder="예: 거래처명"
              className="h-8 text-xs"
            />
          </div>
          <div className="space-y-1">
            <Label className="text-[10px]">라벨 위치</Label>
            <Select
              value={cfg.labelPosition || "top"}
              onValueChange={(v) => update({ labelPosition: v as "top" | "left" })}
            >
              <SelectTrigger className="h-8 text-xs">
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="top" className="text-xs">위 (기본)</SelectItem>
                <SelectItem value="left" className="text-xs">왼쪽</SelectItem>
              </SelectContent>
            </Select>
          </div>
        </>
      )}
    </div>
  );
}

// ========================================
// STEP 2: 타입별 상세 설정
// ========================================

function StepDetailSettings({ cfg, update }: StepProps) {
  const normalized = normalizeInputType(cfg.inputType as string);
  switch (normalized) {
    case "text":
    case "number":
      return <TextDetailSettings cfg={cfg} update={update} />;
    case "select":
      return <SelectDetailSettings cfg={cfg} update={update} />;
    case "date-preset":
      return <DatePresetDetailSettings cfg={cfg} update={update} />;
    case "modal":
      return <ModalDetailSettings cfg={cfg} update={update} />;
    case "toggle":
      return (
        <div className="rounded-lg bg-muted/50 p-3">
          <p className="text-[10px] text-muted-foreground">
            토글은 추가 설정이 없습니다. ON/OFF 값이 바로 전달됩니다.
          </p>
        </div>
      );
    default:
      return (
        <div className="rounded-lg bg-muted/50 p-3">
          <p className="text-[10px] text-muted-foreground">
            {cfg.inputType} 타입의 상세 설정은 후속 구현 예정입니다.
          </p>
        </div>
      );
  }
}

// ========================================
// text/number 상세 설정
// ========================================

function TextDetailSettings({ cfg, update }: StepProps) {
  return (
    <div className="space-y-3">
      <div className="space-y-1">
        <Label className="text-[10px]">디바운스 (ms)</Label>
        <Input
          type="number"
          value={cfg.debounceMs ?? 500}
          onChange={(e) => update({ debounceMs: Math.max(0, Number(e.target.value)) })}
          min={0}
          max={5000}
          step={100}
          className="h-8 text-xs"
        />
        <p className="text-[9px] text-muted-foreground">
          입력 후 대기 시간. 0이면 즉시 발행 (권장: 300~500)
        </p>
      </div>
      <div className="flex items-center gap-2">
        <Checkbox
          id="triggerOnEnter"
          checked={cfg.triggerOnEnter !== false}
          onCheckedChange={(checked) => update({ triggerOnEnter: Boolean(checked) })}
        />
        <Label htmlFor="triggerOnEnter" className="text-[10px]">Enter 키로 즉시 발행</Label>
      </div>
    </div>
  );
}

// ========================================
// select 상세 설정
// ========================================

function SelectDetailSettings({ cfg, update }: StepProps) {
  const options = cfg.options || [];

  const addOption = () => {
    update({
      options: [...options, { value: `opt_${options.length + 1}`, label: `옵션 ${options.length + 1}` }],
    });
  };

  const removeOption = (index: number) => {
    update({ options: options.filter((_, i) => i !== index) });
  };

  const updateOption = (index: number, field: "value" | "label", val: string) => {
    update({ options: options.map((opt, i) => (i === index ? { ...opt, [field]: val } : opt)) });
  };

  return (
    <div className="space-y-3">
      <Label className="text-[10px]">옵션 목록</Label>
      {options.length === 0 && (
        <p className="text-[9px] text-muted-foreground">옵션이 없습니다. 아래 버튼으로 추가하세요.</p>
      )}
      {options.map((opt, i) => (
        <div key={i} className="flex items-center gap-1">
          <Input value={opt.value} onChange={(e) => updateOption(i, "value", e.target.value)} placeholder="값" className="h-7 flex-1 text-[10px]" />
          <Input value={opt.label} onChange={(e) => updateOption(i, "label", e.target.value)} placeholder="라벨" className="h-7 flex-1 text-[10px]" />
          <button type="button" onClick={() => removeOption(i)} className="flex h-7 w-7 shrink-0 items-center justify-center rounded text-muted-foreground transition-colors hover:bg-destructive/10 hover:text-destructive">
            <Trash2 className="h-3 w-3" />
          </button>
        </div>
      ))}
      <Button variant="outline" size="sm" className="h-7 w-full text-[10px]" onClick={addOption}>
        <Plus className="mr-1 h-3 w-3" />
        옵션 추가
      </Button>
    </div>
  );
}

// ========================================
// date-preset 상세 설정
// ========================================

function DatePresetDetailSettings({ cfg, update }: StepProps) {
  const ALL_PRESETS: DatePresetOption[] = ["today", "this-week", "this-month", "custom"];
  const activePresets = cfg.datePresets || ["today", "this-week", "this-month"];

  const togglePreset = (preset: DatePresetOption) => {
    const next = activePresets.includes(preset)
      ? activePresets.filter((p) => p !== preset)
      : [...activePresets, preset];
    update({ datePresets: next.length > 0 ? next : ["today"] });
  };

  return (
    <div className="space-y-3">
      <Label className="text-[10px]">활성화할 프리셋</Label>
      {ALL_PRESETS.map((preset) => (
        <div key={preset} className="flex items-center gap-2">
          <Checkbox
            id={`preset_${preset}`}
            checked={activePresets.includes(preset)}
            onCheckedChange={() => togglePreset(preset)}
          />
          <Label htmlFor={`preset_${preset}`} className="text-[10px]">{DATE_PRESET_LABELS[preset]}</Label>
        </div>
      ))}
      {activePresets.includes("custom") && (
        <p className="text-[9px] text-muted-foreground">
          &quot;직접&quot; 선택 시 날짜 입력 UI가 표시됩니다 (후속 구현)
        </p>
      )}
    </div>
  );
}

// ========================================
// modal 상세 설정
// ========================================

const DEFAULT_MODAL_CONFIG: ModalSelectConfig = {
  displayStyle: "table",
  displayField: "",
  valueField: "",
  searchMode: "contains",
};

function ModalDetailSettings({ cfg, update }: StepProps) {
  const mc: ModalSelectConfig = { ...DEFAULT_MODAL_CONFIG, ...(cfg.modalConfig || {}) };

  const updateModal = (partial: Partial<ModalSelectConfig>) => {
    update({ modalConfig: { ...mc, ...partial } });
  };

  const [tables, setTables] = useState<TableInfo[]>([]);
  const [columns, setColumns] = useState<ColumnTypeInfo[]>([]);
  const [tablesLoading, setTablesLoading] = useState(false);
  const [columnsLoading, setColumnsLoading] = useState(false);

  useEffect(() => {
    let cancelled = false;
    setTablesLoading(true);
    tableManagementApi.getTableList().then((res) => {
      if (!cancelled && res.success && res.data) setTables(res.data);
    }).finally(() => !cancelled && setTablesLoading(false));
    return () => { cancelled = true; };
  }, []);

  useEffect(() => {
    if (!mc.tableName) { setColumns([]); return; }
    let cancelled = false;
    setColumnsLoading(true);
    getTableColumns(mc.tableName).then((res) => {
      if (!cancelled && res.success && res.data?.columns) setColumns(res.data.columns);
    }).finally(() => !cancelled && setColumnsLoading(false));
    return () => { cancelled = true; };
  }, [mc.tableName]);

  const toggleArrayItem = (field: "displayColumns" | "searchColumns", col: string) => {
    const current = mc[field] || [];
    const next = current.includes(col) ? current.filter((c) => c !== col) : [...current, col];
    updateModal({ [field]: next });
  };

  const toggleFilterTab = (tab: ModalFilterTab) => {
    const current = mc.filterTabs || [];
    const next = current.includes(tab) ? current.filter((t) => t !== tab) : [...current, tab];
    updateModal({ filterTabs: next });
  };

  const updateColumnLabel = (colName: string, label: string) => {
    const current = mc.columnLabels || {};
    if (!label.trim()) {
      const { [colName]: _, ...rest } = current;
      updateModal({ columnLabels: Object.keys(rest).length > 0 ? rest : undefined });
    } else {
      updateModal({ columnLabels: { ...current, [colName]: label } });
    }
  };

  const selectedDisplayCols = mc.displayColumns || [];

  return (
    <div className="space-y-3">
      {/* 보여주기 방식 */}
      <div className="space-y-1">
        <Label className="text-[10px]">보여주기 방식</Label>
        <Select
          value={mc.displayStyle || "table"}
          onValueChange={(v) => updateModal({ displayStyle: v as ModalDisplayStyle })}
        >
          <SelectTrigger className="h-8 text-xs">
            <SelectValue />
          </SelectTrigger>
          <SelectContent>
            {Object.entries(MODAL_DISPLAY_STYLE_LABELS).map(([key, label]) => (
              <SelectItem key={key} value={key} className="text-xs">{label}</SelectItem>
            ))}
          </SelectContent>
        </Select>
        <p className="text-[9px] text-muted-foreground">
          테이블: 표 형태 / 아이콘: 아이콘 카드 형태
        </p>
      </div>

      {/* 데이터 테이블 */}
      <div className="space-y-1">
        <Label className="text-[10px]">데이터 테이블</Label>
        {tablesLoading ? (
          <div className="flex h-8 items-center gap-2 text-xs text-muted-foreground">
            <Loader2 className="h-3 w-3 animate-spin" />
            테이블 목록 로딩...
          </div>
        ) : (
          <Select
            value={mc.tableName || undefined}
            onValueChange={(v) =>
              updateModal({ tableName: v, displayColumns: [], searchColumns: [], displayField: "", valueField: "", columnLabels: undefined })
            }
          >
            <SelectTrigger className="h-8 text-xs">
              <SelectValue placeholder="테이블 선택" />
            </SelectTrigger>
            <SelectContent>
              {tables.map((t) => (
                <SelectItem key={t.tableName} value={t.tableName} className="text-xs">
                  {t.displayName || t.tableName}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
        )}
      </div>

      {mc.tableName && (
        <>
          {/* 표시할 컬럼 */}
          <div className="space-y-1">
            <Label className="text-[10px]">표시할 컬럼</Label>
            {columnsLoading ? (
              <div className="flex h-8 items-center gap-2 text-xs text-muted-foreground">
                <Loader2 className="h-3 w-3 animate-spin" />
                컬럼 로딩...
              </div>
            ) : (
              <div className="max-h-32 space-y-1 overflow-y-auto rounded border p-2">
                {columns.map((col) => (
                  <div key={col.columnName} className="flex items-center gap-2">
                    <Checkbox
                      id={`disp_${col.columnName}`}
                      checked={mc.displayColumns?.includes(col.columnName) ?? false}
                      onCheckedChange={() => toggleArrayItem("displayColumns", col.columnName)}
                    />
                    <Label htmlFor={`disp_${col.columnName}`} className="text-[10px]">
                      {col.displayName || col.columnName}
                      <span className="ml-1 text-muted-foreground">({col.columnName})</span>
                    </Label>
                  </div>
                ))}
              </div>
            )}
          </div>

          {/* 컬럼 헤더 라벨 편집 (표시할 컬럼이 선택된 경우만) */}
          {selectedDisplayCols.length > 0 && (
            <div className="space-y-1">
              <Label className="text-[10px]">컬럼 헤더 라벨</Label>
              <div className="space-y-1 rounded border p-2">
                {selectedDisplayCols.map((colName) => {
                  const colInfo = columns.find((c) => c.columnName === colName);
                  const defaultLabel = colInfo?.displayName || colName;
                  return (
                    <div key={colName} className="flex items-center gap-2">
                      <span className="w-24 shrink-0 truncate text-[9px] text-muted-foreground">
                        {colName}
                      </span>
                      <Input
                        value={mc.columnLabels?.[colName] ?? ""}
                        onChange={(e) => updateColumnLabel(colName, e.target.value)}
                        placeholder={defaultLabel}
                        className="h-6 flex-1 text-[10px]"
                      />
                    </div>
                  );
                })}
              </div>
              <p className="text-[9px] text-muted-foreground">
                비워두면 기본 컬럼명이 사용됩니다
              </p>
            </div>
          )}

          {/* 검색 대상 컬럼 */}
          <div className="space-y-1">
            <Label className="text-[10px]">검색 대상 컬럼</Label>
            <div className="max-h-24 space-y-1 overflow-y-auto rounded border p-2">
              {columns.map((col) => (
                <div key={col.columnName} className="flex items-center gap-2">
                  <Checkbox
                    id={`search_${col.columnName}`}
                    checked={mc.searchColumns?.includes(col.columnName) ?? false}
                    onCheckedChange={() => toggleArrayItem("searchColumns", col.columnName)}
                  />
                  <Label htmlFor={`search_${col.columnName}`} className="text-[10px]">
                    {col.displayName || col.columnName}
                    <span className="ml-1 text-muted-foreground">({col.columnName})</span>
                  </Label>
                </div>
              ))}
            </div>
          </div>

          {/* 검색 방식 */}
          <div className="space-y-1">
            <Label className="text-[10px]">검색 방식</Label>
            <Select
              value={mc.searchMode || "contains"}
              onValueChange={(v) => updateModal({ searchMode: v as ModalSearchMode })}
            >
              <SelectTrigger className="h-8 text-xs">
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                {Object.entries(MODAL_SEARCH_MODE_LABELS).map(([key, label]) => (
                  <SelectItem key={key} value={key} className="text-xs">{label}</SelectItem>
                ))}
              </SelectContent>
            </Select>
            <p className="text-[9px] text-muted-foreground">
              포함: 어디든 일치 / 시작: 앞에서 일치 / 같음: 정확히 일치
            </p>
          </div>

          {/* 필터 탭 (가나다/ABC) */}
          <div className="space-y-1">
            <Label className="text-[10px]">필터 탭</Label>
            <div className="flex gap-3">
              {(Object.entries(MODAL_FILTER_TAB_LABELS) as [ModalFilterTab, string][]).map(([key, label]) => (
                <div key={key} className="flex items-center gap-1.5">
                  <Checkbox
                    id={`ftab_${key}`}
                    checked={mc.filterTabs?.includes(key) ?? false}
                    onCheckedChange={() => toggleFilterTab(key)}
                  />
                  <Label htmlFor={`ftab_${key}`} className="text-[10px]">{label}</Label>
                </div>
              ))}
            </div>
            <p className="text-[9px] text-muted-foreground">
              모달 상단에 초성(가나다) / 알파벳(ABC) 필터 탭 표시
            </p>
          </div>

          {/* 검색창에 보일 값 */}
          <div className="space-y-1">
            <Label className="text-[10px]">검색창에 보일 값</Label>
            <Select
              value={mc.displayField || "__none__"}
              onValueChange={(v) => updateModal({ displayField: v === "__none__" ? "" : v })}
            >
              <SelectTrigger className="h-8 text-xs">
                <SelectValue placeholder="컬럼 선택" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="__none__" className="text-xs text-muted-foreground">선택 안 함</SelectItem>
                {columns.map((col) => (
                  <SelectItem key={col.columnName} value={col.columnName} className="text-xs">
                    {col.displayName || col.columnName} ({col.columnName})
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
            <p className="text-[9px] text-muted-foreground">
              선택 후 검색 입력란에 표시될 값 (예: 회사명)
            </p>
          </div>

          {/* 필터에 쓸 값 */}
          <div className="space-y-1">
            <Label className="text-[10px]">필터에 쓸 값</Label>
            <Select
              value={mc.valueField || "__none__"}
              onValueChange={(v) => updateModal({ valueField: v === "__none__" ? "" : v })}
            >
              <SelectTrigger className="h-8 text-xs">
                <SelectValue placeholder="컬럼 선택" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="__none__" className="text-xs text-muted-foreground">선택 안 함</SelectItem>
                {columns.map((col) => (
                  <SelectItem key={col.columnName} value={col.columnName} className="text-xs">
                    {col.displayName || col.columnName} ({col.columnName})
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
            <p className="text-[9px] text-muted-foreground">
              연결된 리스트를 필터할 때 사용할 값 (예: 회사코드)
            </p>
          </div>
        </>
      )}
    </div>
  );
}