import { addEdge, Background, Controls, MarkerType, MiniMap, ReactFlow, useEdgesState, useNodesState } from "@xyflow/react";
import { useCallback, useEffect } from "react";
import "@xyflow/react/dist/style.css";

const THEME = {
  frontend: { bg: "#2563eb", border: "#1d4ed8", color: "#fff" }, // Blue
  backend: { bg: "#059669", border: "#047857", color: "#fff" }, // Green
  database: { bg: "#ea580c", border: "#c2410c", color: "#fff" }, // Orange/Red
  documentation: { bg: "#8b5cf6", border: "#7c3aed", color: "#fff" }, // Purple
  general: { bg: "#475569", border: "#334155", color: "#fff" }, // Slate Grey
};

const createStyle = (type: string) => {
  const themeObj = THEME[type as keyof typeof THEME] || THEME.general;
  return {
    backgroundColor: themeObj.bg,
    borderColor: themeObj.border,
    color: themeObj.color,
    borderWidth: "2px",
    borderStyle: "solid",
    borderRadius: type === "database" ? "12px" : type === "documentation" ? "9999px" : "8px",
    padding: "10px 14px",
    fontWeight: "bold",
    fontSize: "11px",
    boxShadow: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
    width: 200,
    textAlign: "center" as const,
    whiteSpace: "pre-wrap" as const,
    wordBreak: "break-all" as const,
  };
};

export function ProjectGraph({ graphData }: { graphData: { nodes: any[]; edges: any[] } | null }) {
  const [nodes, setNodes, onNodesChange] = useNodesState([]);
  const [edges, setEdges, onEdgesChange] = useEdgesState([]);

  useEffect(() => {
    if (graphData && Array.isArray(graphData.nodes)) {
      const flowNodes = graphData.nodes.map((node: any) => ({
        id: node.id,
        position: node.position || { x: Math.random() * 500, y: Math.random() * 500 },
        data: { label: `${node.name}\n(${node.path})` },
        style: createStyle(node.type),
      }));

      const flowEdges = graphData.edges.map((edge: any) => ({
        id: edge.id,
        source: edge.source,
        target: edge.target,
        animated: edge.animated !== false,
        style: { strokeWidth: 2, stroke: "#64748b" },
        markerEnd: {
          type: MarkerType.ArrowClosed,
          color: "#64748b",
        },
      }));

      setNodes(flowNodes);
      setEdges(flowEdges);
    } else {
      setNodes([]);
      setEdges([]);
    }
  }, [graphData, setNodes, setEdges]);

  const onConnect = useCallback((params: any) => setEdges((eds) => addEdge(params, eds)), [setEdges]);

  if (!graphData?.nodes || graphData.nodes.length === 0) {
    return (
      <div className="flex flex-col items-center justify-center h-full text-muted-foreground p-8 bg-slate-950">
        <div className="text-4xl mb-3">🕸️</div>
        <p className="text-sm font-semibold">Chưa có dữ liệu sơ đồ tri thức codebase.</p>
        <p className="text-xs text-muted-foreground mt-1">Hãy nhập đường dẫn thư mục và nhấn nút Quét Codebase ở trên.</p>
      </div>
    );
  }

  return (
    <div style={{ width: "100%", height: "100%", background: "#090d16" }}>
      <ReactFlow
        nodes={nodes}
        edges={edges}
        onNodesChange={onNodesChange}
        onEdgesChange={onEdgesChange}
        onConnect={onConnect}
        fitView
        attributionPosition="bottom-right"
      >
        <Controls style={{ backgroundColor: "#1e293b", fill: "white" }} />
        <MiniMap nodeColor={(n) => n.style?.backgroundColor as string} style={{ backgroundColor: "#1e293b" }} maskColor="rgba(15, 23, 42, 0.7)" />
        <Background gap={16} size={1} color="#1e293b" />
      </ReactFlow>
    </div>
  );
}