<template>
  <div ref="container" class="monaco-host" />
</template>

<script>
import * as monaco from 'monaco-editor';
import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker';

// Configure Monaco web workers once (Vite bundles each ?worker as its own chunk).
if (!window.__mixedassetsMonacoEnv) {
  self.MonacoEnvironment = {
    getWorker(_workerId, label) {
      return label === 'json' ? new jsonWorker() : new editorWorker();
    }
  };
  window.__mixedassetsMonacoEnv = true;
}

export default {
  props: {
    modelValue: { type: String, default: '' },
    readOnly: { type: Boolean, default: false },
    theme: { type: String, default: 'vs-dark' }
  },
  emits: ['update:modelValue'],
  mounted() {
    this.editor = monaco.editor.create(this.$refs.container, {
      value: this.modelValue,
      language: 'json',
      theme: this.theme,
      automaticLayout: true,
      minimap: { enabled: false },
      fontSize: 13,
      tabSize: 2,
      scrollBeyondLastLine: false,
      readOnly: this.readOnly,
      formatOnPaste: true,
      fixedOverflowWidgets: true
    });
    this.editor.onDidChangeModelContent(() => {
      const value = this.editor.getValue();
      if (value !== this.modelValue) this.$emit('update:modelValue', value);
    });
  },
  beforeUnmount() {
    this.editor?.dispose();
  },
  watch: {
    modelValue(value) {
      if (this.editor && value !== this.editor.getValue()) this.editor.setValue(value || '');
    },
    readOnly(value) {
      this.editor?.updateOptions({ readOnly: value });
    },
    theme(value) {
      monaco.editor.setTheme(value);
    }
  },
  methods: {
    format() {
      this.editor?.getAction('editor.action.formatDocument')?.run();
    }
  }
};
</script>

<style scoped>
.monaco-host {
  width: 100%;
  height: 540px;
  border: 1px solid rgba(128, 128, 128, 0.3);
  border-radius: 8px;
  overflow: hidden;
}
</style>
