<template>
  <div class="vue-flow-test">
    <h3>Vue Flow Test Component</h3>
    <div class="test-container">
      <client-only>
        <VueFlow
          :nodes="testNodes"
          :edges="testEdges"
          class="test-flow"
          style="height: 400px"
        >
          <Background />
          <Controls />
        </VueFlow>
      </client-only>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { VueFlow } from "@vue-flow/core";
import { Background } from "@vue-flow/background";
import { Controls } from "@vue-flow/controls";
import '@vue-flow/core/dist/style.css';
import '@vue-flow/core/dist/theme-default.css';
import '@vue-flow/controls/dist/style.css';
import '@vue-flow/minimap/dist/style.css';

console.log("🧪 VueFlowTest component loaded");

const testNodes = ref([
  {
    id: "test-1",
    type: "default",
    position: { x: 100, y: 100 },
    data: { label: "Test Node 1" },
  },
  {
    id: "test-2",
    type: "default",
    position: { x: 300, y: 100 },
    data: { label: "Test Node 2" },
  },
]);

const testEdges = ref([
  {
    id: "test-edge-1",
    source: "test-1",
    target: "test-2",
  },
]);

console.log("🧪 Test nodes:", testNodes.value);
console.log("🧪 Test edges:", testEdges.value);
</script>

<style scoped>
.vue-flow-test {
  padding: 20px;
  border: 2px solid #ccc;
  margin: 20px;
}

.test-container {
  width: 100%;
  height: 450px;
  border: 1px solid #ddd;
  position: relative;
}

.test-flow {
  width: 100%;
  height: 100%;
}
</style>
