{% extends "base.html" %}

{% block content %}
<section class="auth-layout auth-layout--full-width">
  <div class="auth-copy">
    <p class="eyebrow">Schema</p>
    <h1>{% if is_edit %}Edit{% else %}Create{% endif %} a schema for {{ overview.graph.display_name }}.</h1>
    <p class="hero-text">
      Schemas validate either node or edge JSON data at write time. {% if is_edit %}Only
      non-breaking updates are allowed here; breaking changes still require a future migration
      workflow.{% else %}Breaking-change migration flows come later.{% endif %}
    </p>
    {% if is_edit and schema_detail %}
    <ul class="feature-list">
      <li>Name: {{ schema_detail.schema.name }}.</li>
      <li>Kind: {{ schema_detail.schema.kind }}.</li>
      <li>Current version: {{ schema_detail.schema.version }}.</li>
      <li>Usage: {{ schema_detail.schema.usage.node_count }} node{{ "" if schema_detail.schema.usage.node_count == 1
        else "s" }}, {{ schema_detail.schema.usage.edge_count }} edge{{ "" if schema_detail.schema.usage.edge_count == 1
        else "s" }}.</li>
    </ul>
    {% endif %}
  </div>

  <div class="auth-card">
    <h2>{% if is_edit %}Update schema{% else %}New schema{% endif %}</h2>
    <form class="auth-form" action="{{ submit_url }}" method="post">
      {% if is_edit %}
      <label class="field">
        <span>Name</span>
        <input value="{{ (form_data or {}).get('name', '') }}" readonly>
      </label>
      <label class="field">
        <span>Kind</span>
        <input value="{{ (form_data or {}).get('kind', 'node') }}" readonly>
        <input type="hidden" name="kind" value="{{ (form_data or {}).get('kind', 'node') }}">
      </label>
      {% else %}
      <label class="field">
        <span>Name</span>
        <input name="name" value="{{ (form_data or {}).get('name', '') }}" required>
      </label>
      <label class="field">
        <span>Kind</span>
        <select name="kind">
          {% for schema_kind in ("node", "edge") %}
          <option value="{{ schema_kind }}" {% if (form_data or {}).get('kind', 'node' )==schema_kind %}selected{% endif
            %}>{{ schema_kind }}</option>
          {% endfor %}
        </select>
      </label>
      {% endif %}

      <label class="field">
        <span>Alias (optional)</span>
        <input name="alias" value="{{ (form_data or {}).get('alias', '') }}" placeholder="Short display name for visualization">
        <small class="field-hint">A short name or emoji to display in the graph viewer instead of the schema name</small>
      </label>

      <label class="field">
        <span>SVG Icon (optional)</span>
        <textarea name="svg_icon" rows="5" placeholder="<svg>...</svg>">{{ (form_data or {}).get('svg_icon', '') }}</textarea>
        <div class="svg-preview">
          <span class="field-hint">Preview:</span>
          <div id="svg-preview-container" class="svg-icon-slot svg-icon-slot--md" data-svg-icon-slot></div>
        </div>
        <small class="field-hint">Custom SVG icon to display in the graph viewer (max 20KB)</small>
      </label>

      <label class="field">
        <span>Extends (optional)</span>
        <textarea name="extends" rows="3" placeholder="parent_schema_1, parent_schema_2">{{ (form_data or {}).get('extends', '') }}</textarea>
        <small class="field-hint">Comma-separated parent schema names (additive inheritance only). When editing, leave empty to clear inheritance.</small>
      </label>

      {% if is_edit and schema_detail and schema_detail.schema.effective_json_schema %}
      <label class="field">
        <span>Effective JSON Schema (read-only)</span>
        <textarea readonly rows="10">{{ schema_detail.schema.effective_json_schema | tojson(indent=2) }}</textarea>
        <small class="field-hint">Computed schema including all inherited fields from parent schemas</small>
      </label>
      {% endif %}

      <!-- JSONJoy Builder Editor Container -->
      <section class="schema-editor-card" data-jsonjoy-root>
        <div class="schema-editor-card__header">
          <h3>JSON Schema Editor</h3>
          <button class="button button-secondary" type="button" data-jsonjoy-refresh>
            Reset to Original
          </button>
        </div>
        <div class="schema-editor-card__body" id="jsonjoy-editor-mount"></div>
        <p class="schema-editor-card__status" data-jsonjoy-status></p>
      </section>

      <!-- Hidden input for form submission -->
      <input type="hidden" name="json_schema" id="schema-json-field"
        value="{{ (form_data or {}).get('json_schema', '') }}">

      <div class="button-row">
        <button class="button" type="submit">{% if is_edit %}Save changes{% else %}Create schema{% endif %}</button>
        <a class="button button-secondary"
          href="{% if is_edit %}{{ mount_prefix }}{{ web_app.url_path_for('graph_schema_detail_page', graph_id=overview.graph.id, schema_name=schema_detail.schema.name, kind=schema_detail.schema.kind) }}{% else %}{{ mount_prefix }}{{ web_app.url_path_for('graph_schema_list_page', graph_id=overview.graph.id) }}{% endif %}">Back</a>
      </div>
    </form>
  </div>
</section>
{% endblock %}

{% block scripts %}
<script>
  document.addEventListener('DOMContentLoaded', function () {
    {% if error_message %} window.showInfoStrap && showInfoStrap('{{ error_message }}', 'error'); {% endif %}
    {% if success_message %} window.showInfoStrap && showInfoStrap('{{ success_message }}', 'success'); {% endif %}
  });
</script>
<script src="{{ mount_prefix }}{{ web_app.url_path_for('static', path='js/jsonjoy-builder.bundle.js') }}"></script>
<script src="{{ mount_prefix }}{{ web_app.url_path_for('static', path='js/jsonjoy-wrapper.js') }}"></script>
<script>
  (function () {
    const EDITOR_ID = 'jsonjoy-editor-mount';
    const SCHEMA_FIELD_ID = 'schema-json-field';

    const schemaField = document.getElementById(SCHEMA_FIELD_ID);
    const statusEl = document.querySelector('[data-jsonjoy-status]');
    const refreshBtn = document.querySelector('[data-jsonjoy-refresh]');

    let initialSchema = {};

    // Parse initial schema from form data
    try {
      initialSchema = JSON.parse(schemaField.value || '{}');
    } catch (e) {
      initialSchema = { type: 'object' };
      if (statusEl) {
        statusEl.textContent = 'Invalid initial schema, using default.';
        statusEl.dataset.state = 'warning';
      }
    }

    // Mount the editor
    window.JsonJoyEditor.mount(EDITOR_ID, initialSchema, {
      readOnly: false,
      textarea: schemaField,
      onChange: function (newSchema) {
        if (statusEl) {
          statusEl.textContent = '';
          delete statusEl.dataset.state;
        }
      },
    });

    // Reset button handler
    if (refreshBtn) {
      refreshBtn.addEventListener('click', function () {
        window.JsonJoyEditor.destroy(EDITOR_ID);
        window.JsonJoyEditor.mount(EDITOR_ID, initialSchema, {
          readOnly: false,
          textarea: schemaField,
        });
        if (statusEl) {
          statusEl.textContent = 'Schema reset to original.';
          delete statusEl.dataset.state;
        }
      });
    }

    // Cleanup on page unload
    window.addEventListener('beforeunload', function () {
      window.JsonJoyEditor.destroy(EDITOR_ID);
    });

    const svgIconInput = document.querySelector('textarea[name="svg_icon"]');
    const svgPreviewContainer = document.getElementById('svg-preview-container');

    function refreshSvgPreview() {
      if (!svgIconInput || !svgPreviewContainer) return;
      var raw = svgIconInput.value.trim();
      if (!raw) {
        svgPreviewContainer.innerHTML = '';
        return;
      }
      svgPreviewContainer.innerHTML = raw;
      if (window.gpdbSvgIconSlot && typeof window.gpdbSvgIconSlot.upgrade === 'function') {
        window.gpdbSvgIconSlot.upgrade(svgPreviewContainer);
      }
    }

    if (svgIconInput && svgPreviewContainer) {
      svgIconInput.addEventListener('input', refreshSvgPreview);
      refreshSvgPreview();
    }
  })();
</script>
{% endblock %}