"use client";

/**
 * V2 품목별 라우팅 설정 패널
 * 토스식 단계별 UX: 데이터 소스 -> 모달 연동 -> 공정 컬럼 -> 레이아웃(접힘)
 */

import React, { useState, useEffect } from "react";
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 { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command";
import {
  Settings, ChevronDown, Plus, Trash2, Check, ChevronsUpDown,
  Database, Monitor, Columns,
} from "lucide-react";
import { cn } from "@/lib/utils";
import type { ItemRoutingConfig, ProcessColumnDef } from "@/lib/registry/components/v2-item-routing/types";
import { defaultConfig } from "@/lib/registry/components/v2-item-routing/config";

interface V2ItemRoutingConfigPanelProps {
  config: Partial<ItemRoutingConfig>;
  onChange: (config: Partial<ItemRoutingConfig>) => void;
}

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

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

interface ScreenInfo {
  screenId: number;
  screenName: string;
  screenCode: string;
}

// ─── 테이블 Combobox ───
function TableCombobox({
  value,
  onChange,
  tables,
  loading,
}: {
  value: string;
  onChange: (v: string) => void;
  tables: TableInfo[];
  loading: boolean;
}) {
  const [open, setOpen] = useState(false);
  const selected = tables.find((t) => t.tableName === value);

  return (
    <Popover open={open} onOpenChange={setOpen}>
      <PopoverTrigger asChild>
        <Button
          variant="outline"
          role="combobox"
          aria-expanded={open}
          className="h-7 w-full justify-between text-xs"
          disabled={loading}
        >
          {loading
            ? "로딩 중..."
            : selected
              ? selected.displayName || selected.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>
          <CommandInput placeholder="테이블 검색..." className="text-xs" />
          <CommandList>
            <CommandEmpty className="py-4 text-center text-xs">테이블을 찾을 수 없습니다.</CommandEmpty>
            <CommandGroup className="max-h-[200px] overflow-auto">
              {tables.map((t) => (
                <CommandItem
                  key={t.tableName}
                  value={`${t.displayName || ""} ${t.tableName}`}
                  onSelect={() => { onChange(t.tableName); setOpen(false); }}
                  className="text-xs"
                >
                  <Check className={cn("mr-2 h-3 w-3", value === t.tableName ? "opacity-100" : "opacity-0")} />
                  <div className="flex flex-col">
                    <span className="font-medium">{t.displayName || t.tableName}</span>
                    {t.displayName && <span className="text-[10px] text-muted-foreground">{t.tableName}</span>}
                  </div>
                </CommandItem>
              ))}
            </CommandGroup>
          </CommandList>
        </Command>
      </PopoverContent>
    </Popover>
  );
}

// ─── 컬럼 Combobox ───
function ColumnCombobox({
  value,
  onChange,
  tableName,
  placeholder,
}: {
  value: string;
  onChange: (v: string) => void;
  tableName: string;
  placeholder?: string;
}) {
  const [open, setOpen] = useState(false);
  const [columns, setColumns] = useState<ColumnInfo[]>([]);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    if (!tableName) { setColumns([]); return; }
    const load = async () => {
      setLoading(true);
      try {
        const { tableManagementApi } = await import("@/lib/api/tableManagement");
        const res = await tableManagementApi.getColumnList(tableName);
        if (res.success && res.data?.columns) {
          setColumns(res.data.columns);
        }
      } catch { /* ignore */ } finally { setLoading(false); }
    };
    load();
  }, [tableName]);

  const selected = columns.find((c) => c.columnName === value);

  return (
    <Popover open={open} onOpenChange={setOpen}>
      <PopoverTrigger asChild>
        <Button
          variant="outline"
          role="combobox"
          aria-expanded={open}
          className="h-7 w-[140px] justify-between text-xs"
          disabled={loading || !tableName}
        >
          {loading ? "로딩..." : !tableName ? "테이블 먼저 선택" : selected ? selected.displayName || selected.columnName : placeholder || "컬럼 선택"}
          <ChevronsUpDown className="ml-2 h-3 w-3 shrink-0 opacity-50" />
        </Button>
      </PopoverTrigger>
      <PopoverContent className="w-[240px] p-0" align="start">
        <Command>
          <CommandInput placeholder="컬럼 검색..." className="text-xs" />
          <CommandList>
            <CommandEmpty className="py-4 text-center text-xs">컬럼을 찾을 수 없습니다.</CommandEmpty>
            <CommandGroup className="max-h-[200px] overflow-auto">
              {columns.map((c) => (
                <CommandItem
                  key={c.columnName}
                  value={`${c.displayName || ""} ${c.columnName}`}
                  onSelect={() => { onChange(c.columnName); setOpen(false); }}
                  className="text-xs"
                >
                  <Check className={cn("mr-2 h-3 w-3", value === c.columnName ? "opacity-100" : "opacity-0")} />
                  <div className="flex flex-col">
                    <span className="font-medium">{c.displayName || c.columnName}</span>
                    {c.displayName && <span className="text-[10px] text-muted-foreground">{c.columnName}</span>}
                  </div>
                </CommandItem>
              ))}
            </CommandGroup>
          </CommandList>
        </Command>
      </PopoverContent>
    </Popover>
  );
}

// ─── 화면 Combobox ───
function ScreenCombobox({
  value,
  onChange,
}: {
  value?: number;
  onChange: (v?: number) => void;
}) {
  const [open, setOpen] = useState(false);
  const [screens, setScreens] = useState<ScreenInfo[]>([]);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    const load = async () => {
      setLoading(true);
      try {
        const { screenApi } = await import("@/lib/api/screen");
        const res = await screenApi.getScreens({ page: 1, size: 1000 });
        if (res.data) {
          setScreens(
            res.data.map((s: any) => ({
              screenId: s.screenId,
              screenName: s.screenName || `화면 ${s.screenId}`,
              screenCode: s.screenCode || "",
            }))
          );
        }
      } catch { /* ignore */ } finally { setLoading(false); }
    };
    load();
  }, []);

  const selected = screens.find((s) => s.screenId === value);

  return (
    <Popover open={open} onOpenChange={setOpen}>
      <PopoverTrigger asChild>
        <Button
          variant="outline"
          role="combobox"
          aria-expanded={open}
          className="h-7 w-[140px] justify-between text-xs"
          disabled={loading}
        >
          {loading ? "로딩..." : selected ? selected.screenName : "화면 선택"}
          <ChevronsUpDown className="ml-2 h-3 w-3 shrink-0 opacity-50" />
        </Button>
      </PopoverTrigger>
      <PopoverContent className="w-[260px] p-0" align="start">
        <Command>
          <CommandInput placeholder="화면 검색..." className="text-xs" />
          <CommandList>
            <CommandEmpty className="py-4 text-center text-xs">화면을 찾을 수 없습니다.</CommandEmpty>
            <CommandGroup className="max-h-[200px] overflow-auto">
              {screens.map((s) => (
                <CommandItem
                  key={s.screenId}
                  value={`${s.screenName} ${s.screenCode} ${s.screenId}`}
                  onSelect={() => { onChange(s.screenId); setOpen(false); }}
                  className="text-xs"
                >
                  <Check className={cn("mr-2 h-3 w-3", value === s.screenId ? "opacity-100" : "opacity-0")} />
                  <div className="flex flex-col">
                    <span className="font-medium">{s.screenName}</span>
                    <span className="text-[10px] text-muted-foreground">ID: {s.screenId}</span>
                  </div>
                </CommandItem>
              ))}
            </CommandGroup>
          </CommandList>
        </Command>
      </PopoverContent>
    </Popover>
  );
}

// ─── 메인 컴포넌트 ───
export const V2ItemRoutingConfigPanel: React.FC<V2ItemRoutingConfigPanelProps> = ({
  config: configProp,
  onChange,
}) => {
  const [tables, setTables] = useState<TableInfo[]>([]);
  const [loadingTables, setLoadingTables] = useState(false);
  const [dataSourceOpen, setDataSourceOpen] = useState(false);
  const [layoutOpen, setLayoutOpen] = useState(false);

  const config: ItemRoutingConfig = {
    ...defaultConfig,
    ...configProp,
    dataSource: { ...defaultConfig.dataSource, ...configProp?.dataSource },
    modals: { ...defaultConfig.modals, ...configProp?.modals },
    processColumns: configProp?.processColumns?.length ? configProp.processColumns : defaultConfig.processColumns,
  };

  useEffect(() => {
    const loadTables = async () => {
      setLoadingTables(true);
      try {
        const { tableManagementApi } = await import("@/lib/api/tableManagement");
        const res = await tableManagementApi.getTableList();
        if (res.success && res.data) {
          setTables(
            res.data.map((t: any) => ({
              tableName: t.tableName,
              displayName: t.displayName || t.tableName,
            }))
          );
        }
      } catch { /* ignore */ } finally { setLoadingTables(false); }
    };
    loadTables();
  }, []);

  const dispatchConfigEvent = (newConfig: Partial<ItemRoutingConfig>) => {
    if (typeof window !== "undefined") {
      window.dispatchEvent(
        new CustomEvent("componentConfigChanged", {
          detail: { config: { ...config, ...newConfig } },
        })
      );
    }
  };

  const update = (partial: Partial<ItemRoutingConfig>) => {
    const merged = { ...configProp, ...partial };
    onChange(merged);
    dispatchConfigEvent(partial);
  };

  const updateDataSource = (field: string, value: string) => {
    const newDataSource = { ...config.dataSource, [field]: value };
    const partial = { dataSource: newDataSource };
    onChange({ ...configProp, ...partial });
    dispatchConfigEvent(partial);
  };

  const updateModals = (field: string, value?: number) => {
    const newModals = { ...config.modals, [field]: value };
    const partial = { modals: newModals };
    onChange({ ...configProp, ...partial });
    dispatchConfigEvent(partial);
  };

  // 공정 컬럼 관리
  const addColumn = () => {
    update({
      processColumns: [
        ...config.processColumns,
        { name: "", label: "새 컬럼", width: 100, align: "left" as const },
      ],
    });
  };

  const removeColumn = (idx: number) => {
    update({ processColumns: config.processColumns.filter((_, i) => i !== idx) });
  };

  const updateColumn = (idx: number, field: keyof ProcessColumnDef, value: string | number) => {
    const next = [...config.processColumns];
    next[idx] = { ...next[idx], [field]: value };
    update({ processColumns: next });
  };

  return (
    <div className="space-y-4">
      {/* ─── 1단계: 모달 연동 ─── */}
      <div className="space-y-2">
        <div className="flex items-center gap-2">
          <Monitor className="h-4 w-4 text-muted-foreground" />
          <p className="text-sm font-medium">모달 연동</p>
        </div>
        <p className="text-[11px] text-muted-foreground">버전 추가/공정 추가·수정 시 열리는 화면을 설정해요</p>
      </div>

      <div className="rounded-lg border bg-muted/30 p-4 space-y-3">
        <div className="flex items-center justify-between py-1">
          <span className="text-xs text-muted-foreground">버전 추가 화면</span>
          <ScreenCombobox
            value={config.modals.versionAddScreenId}
            onChange={(v) => updateModals("versionAddScreenId", v)}
          />
        </div>
        <div className="flex items-center justify-between py-1">
          <span className="text-xs text-muted-foreground">공정 추가 화면</span>
          <ScreenCombobox
            value={config.modals.processAddScreenId}
            onChange={(v) => updateModals("processAddScreenId", v)}
          />
        </div>
        <div className="flex items-center justify-between py-1">
          <span className="text-xs text-muted-foreground">공정 수정 화면</span>
          <ScreenCombobox
            value={config.modals.processEditScreenId}
            onChange={(v) => updateModals("processEditScreenId", v)}
          />
        </div>
      </div>

      {/* ─── 2단계: 공정 테이블 컬럼 ─── */}
      <div className="space-y-2">
        <div className="flex items-center gap-2">
          <Columns className="h-4 w-4 text-muted-foreground" />
          <p className="text-sm font-medium">공정 테이블 컬럼</p>
        </div>
        <p className="text-[11px] text-muted-foreground">공정 순서 테이블에 표시할 컬럼을 설정해요</p>
      </div>

      <div className="rounded-lg border bg-muted/30 p-4 space-y-2">
        {config.processColumns.map((col, idx) => (
          <div
            key={idx}
            className="flex items-center gap-1.5 rounded-md border bg-background p-2"
          >
            <Input
              value={col.name}
              onChange={(e) => updateColumn(idx, "name", e.target.value)}
              className="h-7 w-24 text-[10px]"
              placeholder="컬럼명"
            />
            <Input
              value={col.label}
              onChange={(e) => updateColumn(idx, "label", e.target.value)}
              className="h-7 flex-1 text-[10px]"
              placeholder="표시명"
            />
            <Input
              type="number"
              value={col.width || 100}
              onChange={(e) => updateColumn(idx, "width", parseInt(e.target.value) || 100)}
              className="h-7 w-14 text-[10px]"
              placeholder="너비"
            />
            <Select
              value={col.align || "left"}
              onValueChange={(v) => updateColumn(idx, "align", v)}
            >
              <SelectTrigger className="h-7 w-16 text-[10px]">
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="left">좌</SelectItem>
                <SelectItem value="center">중</SelectItem>
                <SelectItem value="right">우</SelectItem>
              </SelectContent>
            </Select>
            <Button
              variant="ghost"
              size="icon"
              className="h-6 w-6 shrink-0 text-destructive hover:text-destructive"
              onClick={() => removeColumn(idx)}
            >
              <Trash2 className="h-3 w-3" />
            </Button>
          </div>
        ))}

        <Button
          variant="outline"
          size="sm"
          className="h-7 w-full gap-1 text-xs"
          onClick={addColumn}
        >
          <Plus className="h-3 w-3" />
          컬럼 추가
        </Button>
      </div>

      {/* ─── 3단계: 데이터 소스 (Collapsible) ─── */}
      <Collapsible open={dataSourceOpen} onOpenChange={setDataSourceOpen}>
        <CollapsibleTrigger asChild>
          <button
            type="button"
            className="flex w-full items-center justify-between rounded-lg border bg-muted/30 px-4 py-2.5 text-left transition-colors hover:bg-muted/50"
          >
            <div className="flex items-center gap-2">
              <Database className="h-4 w-4 text-muted-foreground" />
              <span className="text-sm font-medium">데이터 소스 설정</span>
            </div>
            <ChevronDown
              className={cn(
                "h-4 w-4 text-muted-foreground transition-transform duration-200",
                dataSourceOpen && "rotate-180"
              )}
            />
          </button>
        </CollapsibleTrigger>
        <CollapsibleContent>
          <div className="rounded-b-lg border border-t-0 p-4 space-y-3">
            <div className="space-y-1">
              <span className="text-xs text-muted-foreground">품목 테이블</span>
              <TableCombobox
                value={config.dataSource.itemTable}
                onChange={(v) => updateDataSource("itemTable", v)}
                tables={tables}
                loading={loadingTables}
              />
            </div>
            <div className="flex items-center justify-between py-1">
              <span className="text-xs text-muted-foreground">품목명 컬럼</span>
              <ColumnCombobox
                value={config.dataSource.itemNameColumn}
                onChange={(v) => updateDataSource("itemNameColumn", v)}
                tableName={config.dataSource.itemTable}
                placeholder="품목명"
              />
            </div>
            <div className="flex items-center justify-between py-1">
              <span className="text-xs text-muted-foreground">품목코드 컬럼</span>
              <ColumnCombobox
                value={config.dataSource.itemCodeColumn}
                onChange={(v) => updateDataSource("itemCodeColumn", v)}
                tableName={config.dataSource.itemTable}
                placeholder="품목코드"
              />
            </div>
            <div className="space-y-1 pt-2">
              <span className="text-xs text-muted-foreground">라우팅 버전 테이블</span>
              <TableCombobox
                value={config.dataSource.routingVersionTable}
                onChange={(v) => updateDataSource("routingVersionTable", v)}
                tables={tables}
                loading={loadingTables}
              />
            </div>
            <div className="flex items-center justify-between py-1">
              <span className="text-xs text-muted-foreground">품목 FK 컬럼</span>
              <ColumnCombobox
                value={config.dataSource.routingVersionFkColumn}
                onChange={(v) => updateDataSource("routingVersionFkColumn", v)}
                tableName={config.dataSource.routingVersionTable}
                placeholder="FK 컬럼"
              />
            </div>
            <div className="flex items-center justify-between py-1">
              <span className="text-xs text-muted-foreground">버전명 컬럼</span>
              <ColumnCombobox
                value={config.dataSource.routingVersionNameColumn}
                onChange={(v) => updateDataSource("routingVersionNameColumn", v)}
                tableName={config.dataSource.routingVersionTable}
                placeholder="버전명"
              />
            </div>
            <div className="space-y-1 pt-2">
              <span className="text-xs text-muted-foreground">라우팅 상세 테이블</span>
              <TableCombobox
                value={config.dataSource.routingDetailTable}
                onChange={(v) => updateDataSource("routingDetailTable", v)}
                tables={tables}
                loading={loadingTables}
              />
            </div>
            <div className="flex items-center justify-between py-1">
              <span className="text-xs text-muted-foreground">버전 FK 컬럼</span>
              <ColumnCombobox
                value={config.dataSource.routingDetailFkColumn}
                onChange={(v) => updateDataSource("routingDetailFkColumn", v)}
                tableName={config.dataSource.routingDetailTable}
                placeholder="FK 컬럼"
              />
            </div>
            <div className="space-y-1 pt-2">
              <span className="text-xs text-muted-foreground">공정 마스터 테이블</span>
              <TableCombobox
                value={config.dataSource.processTable}
                onChange={(v) => updateDataSource("processTable", v)}
                tables={tables}
                loading={loadingTables}
              />
            </div>
            <div className="flex items-center justify-between py-1">
              <span className="text-xs text-muted-foreground">공정명 컬럼</span>
              <ColumnCombobox
                value={config.dataSource.processNameColumn}
                onChange={(v) => updateDataSource("processNameColumn", v)}
                tableName={config.dataSource.processTable}
                placeholder="공정명"
              />
            </div>
            <div className="flex items-center justify-between py-1">
              <span className="text-xs text-muted-foreground">공정코드 컬럼</span>
              <ColumnCombobox
                value={config.dataSource.processCodeColumn}
                onChange={(v) => updateDataSource("processCodeColumn", v)}
                tableName={config.dataSource.processTable}
                placeholder="공정코드"
              />
            </div>
          </div>
        </CollapsibleContent>
      </Collapsible>

      {/* ─── 4단계: 레이아웃 & 기타 (Collapsible) ─── */}
      <Collapsible open={layoutOpen} onOpenChange={setLayoutOpen}>
        <CollapsibleTrigger asChild>
          <button
            type="button"
            className="flex w-full items-center justify-between rounded-lg border bg-muted/30 px-4 py-2.5 text-left transition-colors hover:bg-muted/50"
          >
            <div className="flex items-center gap-2">
              <Settings className="h-4 w-4 text-muted-foreground" />
              <span className="text-sm font-medium">레이아웃 & 기타</span>
            </div>
            <ChevronDown
              className={cn(
                "h-4 w-4 text-muted-foreground transition-transform duration-200",
                layoutOpen && "rotate-180"
              )}
            />
          </button>
        </CollapsibleTrigger>
        <CollapsibleContent>
          <div className="rounded-b-lg border border-t-0 p-4 space-y-3">
            <div className="flex items-center justify-between py-1">
              <div>
                <span className="text-xs text-muted-foreground">좌측 패널 비율 (%)</span>
                <p className="text-[10px] text-muted-foreground mt-0.5">품목 목록 패널의 너비</p>
              </div>
              <Input
                type="number"
                min={20}
                max={60}
                value={config.splitRatio || 40}
                onChange={(e) => update({ splitRatio: parseInt(e.target.value) || 40 })}
                className="h-7 w-[80px] text-xs"
              />
            </div>

            <div className="flex items-center justify-between py-1">
              <span className="text-xs text-muted-foreground">좌측 패널 제목</span>
              <Input
                value={config.leftPanelTitle || ""}
                onChange={(e) => update({ leftPanelTitle: e.target.value })}
                placeholder="품목 목록"
                className="h-7 w-[140px] text-xs"
              />
            </div>

            <div className="flex items-center justify-between py-1">
              <span className="text-xs text-muted-foreground">우측 패널 제목</span>
              <Input
                value={config.rightPanelTitle || ""}
                onChange={(e) => update({ rightPanelTitle: e.target.value })}
                placeholder="공정 순서"
                className="h-7 w-[140px] text-xs"
              />
            </div>

            <div className="flex items-center justify-between py-1">
              <span className="text-xs text-muted-foreground">버전 추가 버튼 텍스트</span>
              <Input
                value={config.versionAddButtonText || ""}
                onChange={(e) => update({ versionAddButtonText: e.target.value })}
                placeholder="+ 라우팅 버전 추가"
                className="h-7 w-[140px] text-xs"
              />
            </div>

            <div className="flex items-center justify-between py-1">
              <span className="text-xs text-muted-foreground">공정 추가 버튼 텍스트</span>
              <Input
                value={config.processAddButtonText || ""}
                onChange={(e) => update({ processAddButtonText: e.target.value })}
                placeholder="+ 공정 추가"
                className="h-7 w-[140px] text-xs"
              />
            </div>

            <div className="flex items-center justify-between py-1">
              <div>
                <p className="text-sm">첫 번째 버전 자동 선택</p>
                <p className="text-[11px] text-muted-foreground">품목 선택 시 첫 버전을 자동으로 선택해요</p>
              </div>
              <Switch
                checked={config.autoSelectFirstVersion !== false}
                onCheckedChange={(checked) => update({ autoSelectFirstVersion: checked })}
              />
            </div>

            <div className="flex items-center justify-between py-1">
              <div>
                <p className="text-sm">읽기 전용</p>
                <p className="text-[11px] text-muted-foreground">추가/수정/삭제 버튼을 숨겨요</p>
              </div>
              <Switch
                checked={config.readonly || false}
                onCheckedChange={(checked) => update({ readonly: checked })}
              />
            </div>
          </div>
        </CollapsibleContent>
      </Collapsible>
    </div>
  );
};

V2ItemRoutingConfigPanel.displayName = "V2ItemRoutingConfigPanel";

export default V2ItemRoutingConfigPanel;