<script>
  import { onMount } from 'svelte';
  import JSONEditor from 'jsoneditor';
  import 'jsoneditor/dist/jsoneditor.css';
  import 'ace-builds/src-noconflict/ace';
  import 'ace-builds/src-noconflict/theme-monokai';
  import 'ace-builds/src-noconflict/theme-github';
  let editor;
  let container;

  // detect theme passed by Vite
  const mode = import.meta.env.MODE;
  const isDark = mode === 'dark';

  function loadEditor(json, schema) {
    editor = new JSONEditor(container, {
      mode: 'code',
      modes: ['tree', 'text', 'code'],
      indentation: 2,
      mainMenuBar: true,
      schema: schema,
      theme: isDark ? 'ace/theme/monokai' : 'ace/theme/github'
    });

    editor.set(json);
  }

  onMount(() => {
    if (isDark) {
      document.body.classList.add('dark');
    }

    if (window.qt && window.qt.webChannelTransport) {
      new QWebChannel(qt.webChannelTransport, (channel) => {
        const backend = channel.objects.backend;

        backend.getInitialJson((jsonStr) => {
          backend.getSchema((schemaStr) => {
            const json = JSON.parse(jsonStr);
            const schema = JSON.parse(schemaStr);
            loadEditor(json, schema);
          });
        });
      });
    } else {
      console.warn("No QWebChannel transport found — running in standalone mode");
      loadEditor({ name: "Fallback", version: 1 }, {
        "$schema": "http://json-schema.org/draft-07/schema#",
        "type": "object",
        "properties": {
          "name": { "type": "string" },
          "version": { "type": "number" }
        },
        "required": ["name", "version"]
      });
    }
  });
</script>

<style>
  html, body, #app, .editor-container {
    margin: 0;
    padding: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
  }
  .ace_hidden-cursors {
    cursor: default !important;
  }

  .editor-container {
    display: flex;
    flex-direction: column;
    background-color: var(--background-color);
    color: var(--text-color);
  }
  .ace_hidden-cursors {
    cursor: default !important;
  }
  body, .jsoneditor, .editor-container {
    cursor: default;
  }
  .jsoneditor {
    flex: 1;
    min-height: 0;
    background-color: var(--background-color);
    color: var(--text-color);
  }

  :root {
    --background-color: #ffffff;
    --text-color: #000000;
  }

  body.dark {
    --background-color: #1e1e1e;
    --text-color: #f0f0f0;
  }
  /* These apply only when body has the class .dark */
  body.dark .jsoneditor,
  body.dark .jsoneditor-outer,
  body.dark .ace_editor,
  body.dark .jsoneditor-menu {
    background-color: #1e1e1e;
    color: #ddd;
    border-color: #444;
  }

  body.dark .jsoneditor .ace_gutter {
    background: #2b2b2b;
    color: #aaa;
  }

  body.dark .jsoneditor .jsoneditor-statusbar {
    background-color: #2a2a2a;
    color: #ccc;
  }

  body.dark .jsoneditor-menu a,
  body.dark .jsoneditor-menu button {
    background-color: #2a2a2a;
    color: #ccc;
    border: none;
  }

  body.dark .jsoneditor-menu a:hover,
  body.dark .jsoneditor-menu button:hover {
    background-color: #333;
    color: #fff;
  }
.ace_editor, .ace_content, .ace_scroller, .ace_layer, .ace_hidden-cursors {
  cursor: default !important;
}
</style>

<div class="editor-container" bind:this={container}></div>
