ERP-node/frontend/lib/registry/pop-components/pop-status-bar/PopStatusBarConfig.tsx

"use client";

import { useState, useEffect, useMemo, useCallback } from "react";
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 { Plus, Trash2, Loader2, AlertTriangle, RefreshCw } from "lucide-react";
import { getTableColumns } from "@/lib/api/tableManagement";
import { dataApi } from "@/lib/api/data";
import type { ColumnTypeInfo } from "@/lib/api/tableManagement";
import type { StatusBarConfig, StatusChipStyle, StatusChipOption } from "./types";
import { DEFAULT_STATUS_BAR_CONFIG, STATUS_CHIP_STYLE_LABELS } from "./types";

interface ConfigPanelProps {
  config: StatusBarConfig | undefined;
  onUpdate: (config: StatusBarConfig) => void;
  allComponents?: import("@/components/pop/designer/types/pop-layout").PopComponentDefinition[];
  connections?: import("@/components/pop/designer/types/pop-layout").PopDataConnection[];
  componentId?: string;
}

export function PopStatusBarConfigPanel({
  config: rawConfig,
  onUpdate,
  allComponents,
  connections,
  componentId,
}: ConfigPanelProps) {
  const cfg = { ...DEFAULT_STATUS_BAR_CONFIG, ...(rawConfig || {}) };

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

  const options = cfg.options || [];

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

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

  // 연결된 카드 컴포넌트의 테이블 컬럼 가져오기
  const connectedTableName = useMemo(() => {
    if (!componentId || !connections || !allComponents) return null;
    const targetIds = connections
      .filter((c) => c.sourceComponent === componentId)
      .map((c) => c.targetComponent);
    const sourceIds = connections
      .filter((c) => c.targetComponent === componentId)
      .map((c) => c.sourceComponent);
    const peerIds = [...new Set([...targetIds, ...sourceIds])];

    for (const pid of peerIds) {
      const comp = allComponents.find((c) => c.id === pid);
      if (!comp?.config) continue;
      const compCfg = comp.config as Record<string, unknown>;
      const ds = compCfg.dataSource as { tableName?: string } | undefined;
      if (ds?.tableName) return ds.tableName;
    }
    return null;
  }, [componentId, connections, allComponents]);

  const [targetColumns, setTargetColumns] = useState<ColumnTypeInfo[]>([]);
  const [columnsLoading, setColumnsLoading] = useState(false);

  // 집계 컬럼의 고유값 (옵션 선택용)
  const [distinctValues, setDistinctValues] = useState<string[]>([]);
  const [distinctLoading, setDistinctLoading] = useState(false);

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

  const fetchDistinctValues = useCallback(async (tableName: string, column: string) => {
    setDistinctLoading(true);
    try {
      const res = await dataApi.getTableData(tableName, { page: 1, size: 9999 });
      const vals = new Set<string>();
      for (const row of res.data) {
        const v = row[column];
        if (v != null && String(v).trim() !== "") {
          vals.add(String(v));
        }
      }
      const sorted = [...vals].sort();
      setDistinctValues(sorted);
      return sorted;
    } catch {
      setDistinctValues([]);
      return [];
    } finally {
      setDistinctLoading(false);
    }
  }, []);

  // 집계 컬럼 변경 시 고유값 새로 가져오기
  useEffect(() => {
    const col = cfg.countColumn;
    if (!connectedTableName || !col) {
      setDistinctValues([]);
      return;
    }
    fetchDistinctValues(connectedTableName, col);
  }, [connectedTableName, cfg.countColumn, fetchDistinctValues]);

  const handleAutoFill = useCallback(async () => {
    if (!connectedTableName || !cfg.countColumn) return;
    const vals = await fetchDistinctValues(connectedTableName, cfg.countColumn);
    if (vals.length === 0) return;
    const newOptions: StatusChipOption[] = vals.map((v) => {
      const existing = options.find((o) => o.value === v);
      return { value: v, label: existing?.label || v };
    });
    update({ options: newOptions });
  }, [connectedTableName, cfg.countColumn, options, fetchDistinctValues]);

  const addOptionFromValue = (value: string) => {
    if (options.some((o) => o.value === value)) return;
    update({
      options: [...options, { value, label: value }],
    });
  };

  return (
    <div className="space-y-4">
      {/* --- 칩 옵션 목록 --- */}
      <div className="space-y-1">
        <div className="flex items-center justify-between">
          <Label className="text-[10px]">상태 칩 옵션 목록</Label>
          {connectedTableName && cfg.countColumn && (
            <Button
              variant="ghost"
              size="sm"
              className="h-6 px-2 text-[9px]"
              onClick={handleAutoFill}
              disabled={distinctLoading}
            >
              {distinctLoading ? (
                <Loader2 className="mr-1 h-3 w-3 animate-spin" />
              ) : (
                <RefreshCw className="mr-1 h-3 w-3" />
              )}
              DB에서 자동 채우기
            </Button>
          )}
        </div>
        {cfg.useSubCount && (
          <div className="flex items-start gap-1.5 rounded border border-amber-200 bg-amber-50 p-2">
            <AlertTriangle className="mt-0.5 h-3 w-3 shrink-0 text-amber-500" />
            <p className="text-[9px] text-amber-700">
              하위 필터 자동 전환이 켜져 있으면 런타임에 가상 컬럼으로
              집계됩니다. DB 값과 다를 수 있으니 직접 입력을 권장합니다.
            </p>
          </div>
        )}
        {options.length === 0 && (
          <p className="text-[9px] text-muted-foreground">
            {connectedTableName && cfg.countColumn
              ? "\"DB에서 자동 채우기\"를 클릭하거나 아래에서 추가하세요."
              : "옵션이 없습니다. 먼저 집계 컬럼을 선택한 후 추가하세요."}
          </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="DB 값"
              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>
        ))}

        {/* 고유값에서 추가 */}
        {distinctValues.length > 0 && (
          <div className="space-y-1">
            <Label className="text-[9px] text-muted-foreground">
              값 추가 (DB에서 가져온 고유값)
            </Label>
            <div className="flex flex-wrap gap-1">
              {distinctValues
                .filter((dv) => !options.some((o) => o.value === dv))
                .map((dv) => (
                  <button
                    key={dv}
                    type="button"
                    onClick={() => addOptionFromValue(dv)}
                    className="flex h-6 items-center gap-1 rounded-full border border-dashed px-2 text-[9px] text-muted-foreground transition-colors hover:border-primary hover:text-primary"
                  >
                    <Plus className="h-2.5 w-2.5" />
                    {dv}
                  </button>
                ))}
              {distinctValues.every((dv) => options.some((o) => o.value === dv)) && (
                <p className="text-[9px] text-muted-foreground">모든 값이 추가되었습니다</p>
              )}
            </div>
          </div>
        )}

        {/* 수동 추가 */}
        <Button
          variant="outline"
          size="sm"
          className="h-7 w-full text-[10px]"
          onClick={() => {
            update({
              options: [
                ...options,
                { value: "", label: "" },
              ],
            });
          }}
        >
          <Plus className="mr-1 h-3 w-3" />
          옵션 추가
        </Button>
      </div>

      {/* --- 전체 보기 칩 --- */}
      <div className="space-y-1">
        <div className="flex items-center gap-2">
          <Checkbox
            id="allowAll"
            checked={cfg.allowAll !== false}
            onCheckedChange={(checked) => update({ allowAll: Boolean(checked) })}
          />
          <Label htmlFor="allowAll" className="text-[10px]">
            &quot;전체&quot; 보기 칩 표시
          </Label>
        </div>
        <p className="pl-5 text-[9px] text-muted-foreground">
          필터 해제용 칩을 옵션 목록 맨 앞에 자동 추가합니다
        </p>

        {cfg.allowAll !== false && (
          <div className="space-y-1 pl-5">
            <Label className="text-[9px] text-muted-foreground">
              표시 라벨
            </Label>
            <Input
              value={cfg.allLabel || ""}
              onChange={(e) => update({ allLabel: e.target.value })}
              placeholder="전체"
              className="h-7 text-[10px]"
            />
          </div>
        )}
      </div>

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

      {cfg.showCount !== false && (
        <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>
          ) : targetColumns.length > 0 ? (
            <Select
              value={cfg.countColumn || ""}
              onValueChange={(v) => update({ countColumn: v })}
            >
              <SelectTrigger className="h-8 text-xs">
                <SelectValue placeholder="집계 컬럼 선택" />
              </SelectTrigger>
              <SelectContent>
                {targetColumns.map((col) => (
                  <SelectItem
                    key={col.columnName}
                    value={col.columnName}
                    className="text-xs"
                  >
                    {col.displayName || col.columnName}
                    <span className="ml-1 text-muted-foreground">
                      ({col.columnName})
                    </span>
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          ) : (
            <Input
              value={cfg.countColumn || ""}
              onChange={(e) => update({ countColumn: e.target.value })}
              placeholder="예: status"
              className="h-8 text-xs"
            />
          )}
          <p className="text-[9px] text-muted-foreground">
            연결된 카드의 이 컬럼 값으로 상태별 건수를 집계합니다
          </p>
        </div>
      )}

      {cfg.showCount !== false && (
        <div className="space-y-2 rounded bg-muted/30 p-2">
          <div className="flex items-center gap-2">
            <Checkbox
              id="useSubCount"
              checked={cfg.useSubCount || false}
              onCheckedChange={(checked) =>
                update({ useSubCount: Boolean(checked) })
              }
            />
            <Label htmlFor="useSubCount" className="text-[10px]">
              하위 필터 적용 시 집계 컬럼 자동 전환
            </Label>
          </div>
          {cfg.useSubCount && (
            <>
              <p className="pl-5 text-[9px] text-muted-foreground">
                연결된 카드의 하위 테이블 필터가 적용되면 집계 컬럼이 자동
                전환됩니다
              </p>
              <div className="mt-1 flex items-center gap-2 pl-5">
                <Checkbox
                  id="hideUntilSubFilter"
                  checked={cfg.hideUntilSubFilter || false}
                  onCheckedChange={(checked) =>
                    update({ hideUntilSubFilter: Boolean(checked) })
                  }
                />
                <Label htmlFor="hideUntilSubFilter" className="text-[10px]">
                  하위 필터 선택 전까지 칩 숨김
                </Label>
              </div>
              {cfg.hideUntilSubFilter && (
                <div className="space-y-1 pl-5">
                  <Label className="text-[9px] text-muted-foreground">
                    숨김 상태 안내 문구
                  </Label>
                  <Input
                    value={cfg.hiddenMessage || ""}
                    onChange={(e) => update({ hiddenMessage: e.target.value })}
                    placeholder="조건을 선택하면 상태별 현황이 표시됩니다"
                    className="h-7 text-[10px]"
                  />
                </div>
              )}
            </>
          )}
        </div>
      )}

      {/* --- 칩 스타일 --- */}
      <div className="space-y-1">
        <Label className="text-[10px]">칩 스타일</Label>
        <Select
          value={cfg.chipStyle || "tab"}
          onValueChange={(v) => update({ chipStyle: v as StatusChipStyle })}
        >
          <SelectTrigger className="h-8 text-xs">
            <SelectValue />
          </SelectTrigger>
          <SelectContent>
            {Object.entries(STATUS_CHIP_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 border-t pt-3">
        <Label className="text-[10px]">필터 대상 컬럼</Label>
        {!connectedTableName && (
          <div className="flex items-start gap-1.5 rounded border border-amber-200 bg-amber-50 p-2">
            <AlertTriangle className="mt-0.5 h-3 w-3 shrink-0 text-amber-500" />
            <p className="text-[9px] text-amber-700">
              연결 탭에서 대상 카드 컴포넌트를 먼저 연결해주세요.
            </p>
          </div>
        )}
        {connectedTableName && (
          <>
            {columnsLoading ? (
              <div className="flex h-8 items-center gap-2 text-xs text-muted-foreground">
                <Loader2 className="h-3 w-3 animate-spin" />
                컬럼 로딩...
              </div>
            ) : targetColumns.length > 0 ? (
              <Select
                value={cfg.filterColumn || cfg.countColumn || ""}
                onValueChange={(v) => update({ filterColumn: v })}
              >
                <SelectTrigger className="h-8 text-xs">
                  <SelectValue placeholder="필터 컬럼 선택" />
                </SelectTrigger>
                <SelectContent>
                  {targetColumns.map((col) => (
                    <SelectItem
                      key={col.columnName}
                      value={col.columnName}
                      className="text-xs"
                    >
                      {col.displayName || col.columnName}
                      <span className="ml-1 text-muted-foreground">
                        ({col.columnName})
                      </span>
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            ) : (
              <Input
                value={cfg.filterColumn || ""}
                onChange={(e) => update({ filterColumn: e.target.value })}
                placeholder="예: status"
                className="h-8 text-xs"
              />
            )}
            <p className="text-[9px] text-muted-foreground">
              선택한 상태 칩 값으로 카드를 필터링할 컬럼 (비어있으면 집계
              컬럼과 동일)
            </p>
          </>
        )}
      </div>
    </div>
  );
}