ERP-node/frontend/components/dataflow/DataFlowList.tsx

"use client";

import { useState, useEffect, useCallback, useMemo } from "react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import {
  Plus,
  Search,
  Network,
  RefreshCw,
  Pencil,
  Copy,
  Trash2,
  LayoutGrid,
  List,
  Loader2,
} from "lucide-react";
import { toast } from "sonner";
import { showErrorToast } from "@/lib/utils/toastUtils";
import { apiClient } from "@/lib/api/client";
import { getNodePaletteItem } from "@/components/dataflow/node-editor/sidebar/nodePaletteConfig";

interface TopologyNode {
  id: string;
  type: string;
  x: number;
  y: number;
}

interface FlowSummary {
  nodeCount: number;
  edgeCount: number;
  nodeTypes: Record<string, number>;
  topology: {
    nodes: TopologyNode[];
    edges: [string, string][];
  } | null;
}

interface NodeFlow {
  flowId: number;
  flowName: string;
  flowDescription: string;
  createdAt: string;
  updatedAt: string;
  summary: FlowSummary;
}

interface DataFlowListProps {
  onLoadFlow: (flowId: number | null) => void;
}

const CATEGORY_COLORS: Record<string, { text: string; bg: string; border: string }> = {
  source: { text: "text-teal-400", bg: "bg-teal-500/10", border: "border-teal-500/20" },
  transform: { text: "text-violet-400", bg: "bg-violet-500/10", border: "border-violet-500/20" },
  action: { text: "text-emerald-400", bg: "bg-emerald-500/10", border: "border-emerald-500/20" },
  external: { text: "text-pink-400", bg: "bg-pink-500/10", border: "border-pink-500/20" },
  utility: { text: "text-zinc-400", bg: "bg-zinc-500/10", border: "border-zinc-500/20" },
};

function getNodeCategoryColor(nodeType: string) {
  const item = getNodePaletteItem(nodeType);
  const cat = item?.category || "utility";
  return CATEGORY_COLORS[cat] || CATEGORY_COLORS.utility;
}

function getNodeLabel(nodeType: string) {
  const item = getNodePaletteItem(nodeType);
  return item?.label || nodeType;
}

function getNodeColor(nodeType: string): string {
  const item = getNodePaletteItem(nodeType);
  return item?.color || "#6B7280";
}

function relativeTime(dateStr: string): string {
  const now = Date.now();
  const d = new Date(dateStr).getTime();
  const diff = now - d;
  const min = Math.floor(diff / 60000);
  if (min < 1) return "방금 전";
  if (min < 60) return `${min}분 전`;
  const h = Math.floor(min / 60);
  if (h < 24) return `${h}시간 전`;
  const day = Math.floor(h / 24);
  if (day < 30) return `${day}일 전`;
  const month = Math.floor(day / 30);
  return `${month}개월 전`;
}

function MiniTopology({ topology }: { topology: FlowSummary["topology"] }) {
  if (!topology || topology.nodes.length === 0) {
    return (
      <div className="flex h-full items-center justify-center">
        <span className="font-mono text-[10px] text-zinc-600">빈 캔버스</span>
      </div>
    );
  }

  const W = 340;
  const H = 88;
  const padX = 40;
  const padY = 18;

  const nodeMap = new Map(topology.nodes.map((n) => [n.id, n]));

  return (
    <svg viewBox={`0 0 ${W} ${H}`} fill="none" className="h-full w-full">
      {topology.edges.map(([src, tgt], i) => {
        const s = nodeMap.get(src);
        const t = nodeMap.get(tgt);
        if (!s || !t) return null;
        const sx = padX + s.x * (W - padX * 2);
        const sy = padY + s.y * (H - padY * 2);
        const tx = padX + t.x * (W - padX * 2);
        const ty = padY + t.y * (H - padY * 2);
        const mx = (sx + tx) / 2;
        const my = (sy + ty) / 2 - 8;
        return (
          <path
            key={`e-${i}`}
            d={`M${sx} ${sy}Q${mx} ${my} ${tx} ${ty}`}
            stroke="rgba(108,92,231,0.25)"
            strokeWidth="1.5"
          />
        );
      })}
      {topology.nodes.map((n) => {
        const cx = padX + n.x * (W - padX * 2);
        const cy = padY + n.y * (H - padY * 2);
        const color = getNodeColor(n.type);
        return (
          <g key={n.id}>
            <circle cx={cx} cy={cy} r="5" fill={`${color}20`} stroke={color} strokeWidth="1.5" />
            <circle cx={cx} cy={cy} r="2" fill={color} />
          </g>
        );
      })}
    </svg>
  );
}

function FlowCard({
  flow,
  onOpen,
  onCopy,
  onDelete,
}: {
  flow: NodeFlow;
  onOpen: () => void;
  onCopy: () => void;
  onDelete: () => void;
}) {
  const chips = useMemo(() => {
    const entries = Object.entries(flow.summary?.nodeTypes || {});
    return entries.slice(0, 4).map(([type, count]) => {
      const colors = getNodeCategoryColor(type);
      const label = getNodeLabel(type);
      return { type, count, label, colors };
    });
  }, [flow.summary?.nodeTypes]);

  return (
    <div
      className="group relative cursor-pointer overflow-hidden rounded-xl border border-zinc-800 bg-zinc-900/80 transition-all duration-200 hover:-translate-y-0.5 hover:border-violet-500/50 hover:shadow-lg hover:shadow-violet-500/5"
      onClick={onOpen}
    >
      {/* 미니 토폴로지 */}
      <div className="relative h-[88px] overflow-hidden border-b border-zinc-800/60 bg-gradient-to-b from-violet-500/[0.03] to-transparent">
        <MiniTopology topology={flow.summary?.topology} />
      </div>

      {/* 카드 바디 */}
      <div className="px-4 pb-3 pt-3.5">
        <h3 className="mb-1 truncate text-sm font-semibold tracking-tight text-zinc-100">
          {flow.flowName}
        </h3>
        <p className="mb-3 line-clamp-2 min-h-[2.5rem] text-[11px] leading-relaxed text-zinc-500">
          {flow.flowDescription || "설명이 아직 없어요"}
        </p>

        {/* 노드 타입 칩 */}
        {chips.length > 0 && (
          <div className="mb-3 flex flex-wrap gap-1.5">
            {chips.map(({ type, count, label, colors }) => (
              <span
                key={type}
                className={`inline-flex items-center gap-1 rounded-md border px-1.5 py-0.5 font-mono text-[10px] font-semibold ${colors.text} ${colors.bg} ${colors.border}`}
              >
                {label} {count}
              </span>
            ))}
          </div>
        )}
      </div>

      {/* 카드 푸터 */}
      <div className="flex items-center justify-between border-t border-zinc-800/40 px-4 py-2.5">
        <span className="font-mono text-[11px] text-zinc-600">
          수정 {relativeTime(flow.updatedAt)}
        </span>
        <div className="flex gap-0.5">
          <button
            className="flex h-7 w-7 items-center justify-center rounded-lg text-zinc-500 transition-colors hover:bg-violet-500/10 hover:text-violet-400"
            title="편집"
            onClick={(e) => {
              e.stopPropagation();
              onOpen();
            }}
          >
            <Pencil className="h-3.5 w-3.5" />
          </button>
          <button
            className="flex h-7 w-7 items-center justify-center rounded-lg text-zinc-500 transition-colors hover:bg-violet-500/10 hover:text-violet-400"
            title="복사"
            onClick={(e) => {
              e.stopPropagation();
              onCopy();
            }}
          >
            <Copy className="h-3.5 w-3.5" />
          </button>
          <button
            className="flex h-7 w-7 items-center justify-center rounded-lg text-zinc-500 transition-colors hover:bg-pink-500/10 hover:text-pink-400"
            title="삭제"
            onClick={(e) => {
              e.stopPropagation();
              onDelete();
            }}
          >
            <Trash2 className="h-3.5 w-3.5" />
          </button>
        </div>
      </div>
    </div>
  );
}

export default function DataFlowList({ onLoadFlow }: DataFlowListProps) {
  const [flows, setFlows] = useState<NodeFlow[]>([]);
  const [loading, setLoading] = useState(true);
  const [searchTerm, setSearchTerm] = useState("");
  const [viewMode, setViewMode] = useState<"grid" | "list">("grid");
  const [showDeleteModal, setShowDeleteModal] = useState(false);
  const [selectedFlow, setSelectedFlow] = useState<NodeFlow | null>(null);

  const loadFlows = useCallback(async () => {
    try {
      setLoading(true);
      const response = await apiClient.get("/dataflow/node-flows");
      if (response.data.success) {
        setFlows(response.data.data);
      } else {
        throw new Error(response.data.message || "플로우 목록 조회 실패");
      }
    } catch (error) {
      console.error("플로우 목록 조회 실패", error);
      showErrorToast("플로우 목록을 불러오는 데 실패했어요", error, {
        guidance: "네트워크 연결을 확인해 주세요.",
      });
    } finally {
      setLoading(false);
    }
  }, []);

  useEffect(() => {
    loadFlows();
  }, [loadFlows]);

  const handleDelete = (flow: NodeFlow) => {
    setSelectedFlow(flow);
    setShowDeleteModal(true);
  };

  const handleCopy = async (flow: NodeFlow) => {
    try {
      setLoading(true);
      const response = await apiClient.get(`/dataflow/node-flows/${flow.flowId}`);
      if (!response.data.success) throw new Error(response.data.message || "플로우 조회 실패");

      const copyResponse = await apiClient.post("/dataflow/node-flows", {
        flowName: `${flow.flowName} (복사본)`,
        flowDescription: flow.flowDescription,
        flowData: response.data.data.flowData,
      });

      if (copyResponse.data.success) {
        toast.success("플로우를 복사했어요");
        await loadFlows();
      } else {
        throw new Error(copyResponse.data.message || "플로우 복사 실패");
      }
    } catch (error) {
      console.error("플로우 복사 실패:", error);
      showErrorToast("플로우 복사에 실패했어요", error, {
        guidance: "잠시 후 다시 시도해 주세요.",
      });
    } finally {
      setLoading(false);
    }
  };

  const handleConfirmDelete = async () => {
    if (!selectedFlow) return;
    try {
      setLoading(true);
      const response = await apiClient.delete(`/dataflow/node-flows/${selectedFlow.flowId}`);
      if (response.data.success) {
        toast.success(`"${selectedFlow.flowName}" 플로우를 삭제했어요`);
        await loadFlows();
      } else {
        throw new Error(response.data.message || "플로우 삭제 실패");
      }
    } catch (error) {
      console.error("플로우 삭제 실패:", error);
      showErrorToast("플로우 삭제에 실패했어요", error, {
        guidance: "잠시 후 다시 시도해 주세요.",
      });
    } finally {
      setLoading(false);
      setShowDeleteModal(false);
      setSelectedFlow(null);
    }
  };

  const filteredFlows = useMemo(
    () =>
      flows.filter(
        (f) =>
          f.flowName.toLowerCase().includes(searchTerm.toLowerCase()) ||
          (f.flowDescription || "").toLowerCase().includes(searchTerm.toLowerCase()),
      ),
    [flows, searchTerm],
  );

  const stats = useMemo(() => {
    let totalNodes = 0;
    let totalEdges = 0;
    flows.forEach((f) => {
      totalNodes += f.summary?.nodeCount || 0;
      totalEdges += f.summary?.edgeCount || 0;
    });
    return { total: flows.length, totalNodes, totalEdges };
  }, [flows]);

  if (loading && flows.length === 0) {
    return (
      <div className="flex h-64 items-center justify-center">
        <Loader2 className="text-muted-foreground h-6 w-6 animate-spin" />
      </div>
    );
  }

  return (
    <div className="space-y-6">
      {/* 헤더 */}
      <div className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
        <div>
          <h1 className="bg-gradient-to-r from-zinc-100 to-violet-300 bg-clip-text text-2xl font-bold tracking-tight text-transparent sm:text-3xl">
            제어 관리
          </h1>
          <p className="mt-1 text-xs text-zinc-500 sm:text-sm">
            노드 기반 데이터 플로우를 시각적으로 설계하고 관리해요
          </p>
        </div>
        <div className="flex gap-2">
          <Button
            variant="outline"
            size="sm"
            onClick={loadFlows}
            disabled={loading}
            className="gap-1.5 border-zinc-700 bg-zinc-900 text-zinc-400 hover:bg-zinc-800 hover:text-zinc-200"
          >
            <RefreshCw className={`h-3.5 w-3.5 ${loading ? "animate-spin" : ""}`} />
            새로고침
          </Button>
          <Button
            size="sm"
            onClick={() => onLoadFlow(null)}
            className="gap-1.5 bg-violet-600 font-semibold text-white shadow-lg shadow-violet-600/25 hover:bg-violet-500"
          >
            <Plus className="h-3.5 w-3.5" />
            새 플로우
          </Button>
        </div>
      </div>

      {/* 통계 스트립 */}
      <div className="flex flex-wrap items-center gap-5 border-b border-zinc-800/60 pb-4">
        <div className="flex items-center gap-1.5 text-xs text-zinc-500">
          <div className="h-1.5 w-1.5 rounded-full bg-violet-500" />
          전체{" "}
          <strong className="font-mono font-bold text-zinc-200">{stats.total}</strong>
        </div>
        <div className="flex items-center gap-1.5 text-xs text-zinc-500">
          <div className="h-1.5 w-1.5 rounded-full bg-zinc-600" />
          총 노드{" "}
          <strong className="font-mono font-bold text-zinc-300">{stats.totalNodes}</strong>
        </div>
        <div className="flex items-center gap-1.5 text-xs text-zinc-500">
          <div className="h-1.5 w-1.5 rounded-full bg-zinc-600" />
          총 연결{" "}
          <strong className="font-mono font-bold text-zinc-300">{stats.totalEdges}</strong>
        </div>
      </div>

      {/* 툴바 */}
      <div className="flex flex-wrap items-center gap-3">
        <div className="relative min-w-[200px] flex-1 sm:max-w-[360px]">
          <Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-zinc-600" />
          <Input
            placeholder="플로우 검색..."
            value={searchTerm}
            onChange={(e) => setSearchTerm(e.target.value)}
            className="h-10 border-zinc-700 bg-zinc-900 pl-10 text-sm text-zinc-200 placeholder:text-zinc-600 focus-visible:ring-violet-500/40"
          />
        </div>
        <div className="flex gap-0.5 rounded-lg border border-zinc-700 bg-zinc-900 p-0.5">
          <button
            className={`flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-medium transition-colors ${
              viewMode === "grid"
                ? "bg-violet-500/10 text-violet-400"
                : "text-zinc-500 hover:text-zinc-300"
            }`}
            onClick={() => setViewMode("grid")}
          >
            <LayoutGrid className="h-3.5 w-3.5" />
            그리드
          </button>
          <button
            className={`flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-medium transition-colors ${
              viewMode === "list"
                ? "bg-violet-500/10 text-violet-400"
                : "text-zinc-500 hover:text-zinc-300"
            }`}
            onClick={() => setViewMode("list")}
          >
            <List className="h-3.5 w-3.5" />
            리스트
          </button>
        </div>
      </div>

      {/* 컨텐츠 */}
      {filteredFlows.length === 0 ? (
        <div className="flex flex-col items-center justify-center rounded-2xl border-2 border-dashed border-zinc-700 px-6 py-20 text-center">
          <div className="mb-5 flex h-20 w-20 items-center justify-center rounded-2xl border border-violet-500/15 bg-violet-500/[0.08]">
            <Network className="h-9 w-9 text-violet-400" />
          </div>
          <h2 className="mb-2 text-lg font-bold text-zinc-200">
            {searchTerm ? "검색 결과가 없어요" : "아직 플로우가 없어요"}
          </h2>
          <p className="mb-6 max-w-sm text-sm leading-relaxed text-zinc-500">
            {searchTerm
              ? `"${searchTerm}"에 해당하는 플로우를 찾지 못했어요. 다른 키워드로 검색해 보세요.`
              : "노드를 연결해서 데이터 처리 파이프라인을 만들어 보세요. 코드 없이 드래그 앤 드롭만으로 설계할 수 있어요."}
          </p>
          {!searchTerm && (
            <Button
              onClick={() => onLoadFlow(null)}
              className="gap-2 bg-violet-600 px-5 font-semibold text-white shadow-lg shadow-violet-600/25 hover:bg-violet-500"
            >
              <Plus className="h-4 w-4" />
              첫 번째 플로우 만들기
            </Button>
          )}
        </div>
      ) : viewMode === "grid" ? (
        <div className="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3">
          {filteredFlows.map((flow) => (
            <FlowCard
              key={flow.flowId}
              flow={flow}
              onOpen={() => onLoadFlow(flow.flowId)}
              onCopy={() => handleCopy(flow)}
              onDelete={() => handleDelete(flow)}
            />
          ))}
          {/* 새 플로우 만들기 카드 */}
          <div
            className="group flex min-h-[260px] cursor-pointer flex-col items-center justify-center rounded-xl border border-dashed border-zinc-700 transition-all duration-200 hover:border-violet-500/50 hover:bg-violet-500/[0.04]"
            onClick={() => onLoadFlow(null)}
          >
            <div className="mb-3 flex h-12 w-12 items-center justify-center rounded-xl bg-violet-500/[0.08]">
              <Plus className="h-6 w-6 text-violet-400" />
            </div>
            <span className="text-sm font-semibold text-zinc-400 group-hover:text-zinc-200">
              새 플로우 만들기
            </span>
            <span className="mt-1 text-[11px] text-zinc-600">빈 캔버스에서 시작해요</span>
          </div>
        </div>
      ) : (
        <div className="space-y-2">
          {filteredFlows.map((flow) => (
            <div
              key={flow.flowId}
              className="group flex cursor-pointer items-center gap-4 rounded-lg border border-zinc-800 bg-zinc-900/80 px-4 py-3 transition-all hover:border-violet-500/40 hover:bg-zinc-900"
              onClick={() => onLoadFlow(flow.flowId)}
            >
              <div className="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-lg bg-violet-500/10">
                <Network className="h-5 w-5 text-violet-400" />
              </div>
              <div className="min-w-0 flex-1">
                <h3 className="truncate text-sm font-semibold text-zinc-100">
                  {flow.flowName}
                </h3>
                <p className="truncate text-xs text-zinc-500">
                  {flow.flowDescription || "설명이 아직 없어요"}
                </p>
              </div>
              <div className="hidden items-center gap-1.5 lg:flex">
                {Object.entries(flow.summary?.nodeTypes || {})
                  .slice(0, 3)
                  .map(([type, count]) => {
                    const colors = getNodeCategoryColor(type);
                    return (
                      <span
                        key={type}
                        className={`inline-flex items-center gap-1 rounded-md border px-1.5 py-0.5 font-mono text-[10px] font-semibold ${colors.text} ${colors.bg} ${colors.border}`}
                      >
                        {getNodeLabel(type)} {count}
                      </span>
                    );
                  })}
              </div>
              <span className="hidden font-mono text-[11px] text-zinc-600 sm:block">
                {relativeTime(flow.updatedAt)}
              </span>
              <div className="flex gap-0.5" onClick={(e) => e.stopPropagation()}>
                <button
                  className="flex h-7 w-7 items-center justify-center rounded-lg text-zinc-500 transition-colors hover:bg-violet-500/10 hover:text-violet-400"
                  title="복사"
                  onClick={() => handleCopy(flow)}
                >
                  <Copy className="h-3.5 w-3.5" />
                </button>
                <button
                  className="flex h-7 w-7 items-center justify-center rounded-lg text-zinc-500 transition-colors hover:bg-pink-500/10 hover:text-pink-400"
                  title="삭제"
                  onClick={() => handleDelete(flow)}
                >
                  <Trash2 className="h-3.5 w-3.5" />
                </button>
              </div>
            </div>
          ))}
        </div>
      )}

      {/* 삭제 확인 모달 */}
      <Dialog open={showDeleteModal} onOpenChange={setShowDeleteModal}>
        <DialogContent className="max-w-[95vw] sm:max-w-[500px]">
          <DialogHeader>
            <DialogTitle className="text-base sm:text-lg">플로우를 삭제할까요?</DialogTitle>
            <DialogDescription className="text-xs sm:text-sm">
              &ldquo;{selectedFlow?.flowName}&rdquo; 플로우가 완전히 삭제돼요.
              <br />
              <span className="text-destructive font-medium">
                이 작업은 되돌릴 수 없으며, 모든 노드와 연결 정보가 함께 삭제돼요.
              </span>
            </DialogDescription>
          </DialogHeader>
          <DialogFooter className="gap-2 sm:gap-0">
            <Button
              variant="outline"
              onClick={() => setShowDeleteModal(false)}
              className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
            >
              취소
            </Button>
            <Button
              variant="destructive"
              onClick={handleConfirmDelete}
              disabled={loading}
              className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
            >
              {loading ? "삭제 중..." : "삭제"}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  );
}