<!--
  Overview tab — name, description, and the data block.

  Version is auto-generated by the backend (incremented on save) and is
  intentionally not exposed here. Documentation-only inputs/outputs lists
  were removed in favour of the per-node schema-driven editors on the
  canvas.
-->
<template>
  <div class="column q-gutter-md q-pa-md">
    <q-input
      :model-value="model.name"
      @update:model-value="set('name', $event)"
      dense outlined label="Name" autofocus
    />

    <q-input
      :model-value="model.description"
      @update:model-value="set('description', $event)"
      dense outlined type="textarea" autogrow
      label="Description (markdown)"
      input-style="min-height: 100px;"
    />

    <!-- data block as JSON -->
    <div>
      <div class="text-caption text-grey q-mb-xs">data — global constants merged into the runtime context root</div>
      <q-input
        v-model="dataText"
        dense outlined type="textarea" autogrow
        :error="!dataParsed.ok"
        :error-message="dataParsed.ok ? '' : dataParsed.error"
        input-style="font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12.5px; min-height: 80px;"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, computed, watch } from "vue";

const props = defineProps({
  modelValue: { type: Object, required: true },
});
const emit = defineEmits(["update:modelValue"]);

const model = computed(() => props.modelValue);

function patch(patchObj) {
  emit("update:modelValue", { ...model.value, ...patchObj });
}
function set(key, value) {
  patch({ [key]: value });
}

// ----- data block JSON editor -----
const dataText = ref(JSON.stringify(model.value.data || {}, null, 2));
watch(() => model.value.data, (val) => {
  // Keep the textarea in sync when the parent replaces the model wholesale
  // (e.g. after a YAML import or AI generation).
  const formatted = JSON.stringify(val || {}, null, 2);
  if (formatted !== dataText.value) dataText.value = formatted;
}, { deep: true });

const dataParsed = computed(() => {
  try { return { ok: true, value: JSON.parse(dataText.value || "{}") }; }
  catch (e) { return { ok: false, error: e.message }; }
});
watch(dataText, () => {
  if (!dataParsed.value.ok) return;
  set("data", dataParsed.value.value);
});
</script>
