{% extends "base.html" %}

{% block content %}
<section class="auth-layout auth-layout--full-width">
  <div class="auth-copy">
    <p class="eyebrow">Node</p>
    <h1>{% if is_edit %}Edit{% else %}Create{% endif %} a node for {{ overview.graph.display_name }}.</h1>
    <p class="hero-text">
      Update node metadata, schema attachment, raw JSON data, and payload changes in
      one save.
    </p>
    <ul class="feature-list">
      <li>Graph: {{ overview.graph.display_name }}.</li>
      <li>Instance: {{ overview.instance.display_name }}.</li>
      <li>Prefix: {{ overview.graph.table_prefix_label }}.</li>
      {% if is_edit and node_detail %}
      <li>Current version: {{ node_detail.node.version }}.</li>
      {% endif %}
    </ul>
  </div>

  <div class="auth-card">
    <h2>{% if is_edit %}Update node{% else %}New node{% endif %}</h2>
    <form class="auth-form" action="{{ submit_url }}" method="post" enctype="multipart/form-data">
      {% if is_edit and node_detail %}
      <label class="field">
        <span>Node ID</span>
        <input value="{{ node_detail.node.id }}" readonly>
      </label>
      {% endif %}

      <label class="field">
        <span>Type</span>
        <input name="type" value="{{ (form_data or {}).get('type', '') }}" required>
      </label>

      <label class="field">
        <span>Name</span>
        <input name="name" value="{{ (form_data or {}).get('name', '') }}">
      </label>

      <label class="field">
        <span>Schema</span>
        <select id="node-schema-name" name="schema_name">
          <option value="">No schema</option>
          {% for schema_name in schema_names %}
          <option value="{{ schema_name }}" {% if (form_data or {}).get('schema_name', '') == schema_name %}selected{% endif %}>{{ schema_name }}</option>
          {% endfor %}
        </select>
        <small>Only node schemas are shown here.</small>
      </label>

      <label class="field">
        <span>Owner ID</span>
        <input name="owner_id" value="{{ (form_data or {}).get('owner_id', '') }}">
      </label>

      <label class="field">
        <span>Parent ID</span>
        <input name="parent_id" value="{{ (form_data or {}).get('parent_id', '') }}">
      </label>

      <label class="field">
        <span>Tags</span>
        <input name="tags" value="{{ (form_data or {}).get('tags', '') }}" placeholder="alpha, beta">
      </label>

      <section
        class="schema-editor-card"
        data-jedison-root
        data-mode="form"
        data-schema-select-id="node-schema-name"
        data-json-field-id="node-data-json"
      >
        <div class="schema-editor-card__header">
          <h3>Schema Editor</h3>
        </div>
        <div class="schema-editor-card__body" data-jedison-mount></div>
        <p class="schema-editor-card__status" data-jedison-status></p>
        <script type="application/json" data-jedison-schema-map>{{ schema_json_map | tojson }}</script>
      </section>

      <label class="field">
        <span>Raw JSON</span>
        <textarea id="node-data-json" name="data" rows="14" required>{{ (form_data or {}).get('data', '') }}</textarea>
      </label>

      <label class="field">
        <span>Payload file</span>
        <input id="node-payload-file" type="file" name="payload_file">
        <small>
          {% if is_edit %}
          Leave blank to keep the current payload. Upload an empty file to store a zero-byte payload.
          {% else %}
          Optional. Upload an empty file if you want this node to store a zero-byte payload.
          {% endif %}
        </small>
      </label>

      <label class="field">
        <span>Payload MIME</span>
        <input id="node-payload-mime" name="mime" value="{{ (form_data or {}).get('mime', '') }}" placeholder="text/plain">
      </label>

      {% if is_edit and node_detail %}
      <section class="schema-editor-card">
        <div class="schema-editor-card__header">
          <h3>Current payload</h3>
        </div>
        <p class="resource-note">
          {% if node_detail.node.has_payload %}
          Stored: {{ node_detail.node.payload_filename or node_detail.node.id }} ({{ node_detail.node.payload_size }} bytes).
          {% else %}
          No payload is currently stored on this node.
          {% endif %}
        </p>
        <label class="field">
          <span>
            <input type="checkbox" name="clear_payload" value="true" {% if (form_data or {}).get('clear_payload', '') %}checked{% endif %}>
            Clear payload on save
          </span>
          <small>Do not combine this with a replacement file upload.</small>
        </label>
      </section>
      {% endif %}

      <div class="button-row">
        <button class="button" type="submit">{% if is_edit %}Save changes{% else %}Create node{% endif %}</button>
        <a class="button button-secondary" href="{% if is_edit and node_detail %}{{ web_app.url_path_for('graph_node_detail_page', graph_id=overview.graph.id, node_id=node_detail.node.id) }}{% else %}{{ web_app.url_path_for('graph_node_list_page', graph_id=overview.graph.id) }}{% endif %}">Back</a>
      </div>
    </form>
  </div>
</section>
{% endblock %}

{% block scripts %}
<script src="{{ mount_prefix }}{{ web_app.url_path_for('static', path='js/jedison.umd.js') }}"></script>
<script src="{{ mount_prefix }}{{ web_app.url_path_for('static', path='js/jedison-form.js') }}"></script>
<script>
  document.addEventListener("DOMContentLoaded", function () {
    var fileInput = document.getElementById("node-payload-file");
    var mimeInput = document.getElementById("node-payload-mime");

    if (!fileInput || !mimeInput) {
      return;
    }

    function inferMimeFromExtension(filename) {
      var lastDot = filename.lastIndexOf(".");
      if (lastDot === -1 || lastDot === filename.length - 1) {
        return "";
      }

      var ext = filename.slice(lastDot + 1).toLowerCase();
      switch (ext) {
        case "txt":
          return "text/plain";
        case "md":
        case "markdown":
          return "text/markdown";
        case "json":
          return "application/json";
        case "csv":
          return "text/csv";
        case "html":
        case "htm":
          return "text/html";
        case "xml":
          return "application/xml";
        case "jpg":
        case "jpeg":
          return "image/jpeg";
        case "png":
          return "image/png";
        case "gif":
          return "image/gif";
        case "webp":
          return "image/webp";
        case "svg":
          return "image/svg+xml";
        case "pdf":
          return "application/pdf";
        case "zip":
          return "application/zip";
        default:
          return "";
      }
    }

    fileInput.addEventListener("change", function () {
      if (mimeInput.value.trim() !== "") {
        return;
      }
      var file = fileInput.files && fileInput.files[0];
      if (!file) {
        return;
      }

      var inferred = file.type || inferMimeFromExtension(file.name || "");
      if (inferred) {
        mimeInput.value = inferred;
      }
    });
  });
</script>
{% endblock %}