{% extends "op_zz_frame.html" %}
{% block centercontent %}
<main class="ct-docs-content-col" role="main">
  <h1 class="ct-docs-page-h1-title" id="content">Workflow Designer - {{ name }}</h1>
  <form method="post">
    <input type="hidden" name="id" value="{{ id }}">

    <div id="designer" class="mb-3">
      <div id="plugin-palette">
        <div class="plugin" draggable="true" data-type="chargepoint_message">Chargepoint Message</div>
        <div class="plugin" draggable="true" data-type="cpms_message">CPMS Message</div>
        <div class="plugin" draggable="true" data-type="log_entry">Log Entry</div>
        <div class="plugin" draggable="true" data-type="setvalue">SetValue</div>
        <div class="plugin" draggable="true" data-type="stop">Stop</div>
      </div>
      <div id="canvas"></div>
    </div>

    <div class="mb-3">
      <textarea class="form-control" name="definition" rows="8">{{ definition }}</textarea>
    </div>
    <button class="btn btn-primary btn-sm" type="submit">Save</button>
    <a class="btn btn-default btn-sm" href="/op_workflows">Back</a>
  </form>

  <style>
    #designer {
      display: flex;
      height: 400px;
    }
    #plugin-palette {
      width: 200px;
      border: 1px solid #ccc;
      margin-right: 10px;
      padding: 10px;
    }
    #plugin-palette .plugin {
      padding: 5px;
      margin-bottom: 5px;
      background: #e8e8e8;
      border: 1px solid #333;
      border-radius: 4px;
      cursor: grab;
    }
    #canvas {
      flex: 1;
      border: 1px solid #ccc;
      position: relative;
      overflow: hidden;
      background-image: radial-gradient(#ddd 1px, transparent 1px);
      background-size: 20px 20px;
    }
    #canvas .node {
      position: absolute;
      padding: 10px;
      background: #f0f0f0;
      border: 1px solid #333;
      border-radius: 4px;
      cursor: move;
    }
  </style>

  <div class="modal" tabindex="-1" id="pluginModal">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="pluginModalLabel">Plugin Settings</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
        </div>
        <div class="modal-body">
          <form id="pluginForm">
            <div class="mb-3" id="field-trigger">
              <label class="form-label">Trigger</label>
              <select class="form-select" name="trigger">
                <option value="BootNotification">BootNotification</option>
                <option value="Metervalues">Metervalues</option>
                <option value="Authorization Request">Authorization Request</option>
                <option value="Connect">Connect</option>
                <option value="Disconnect">Disconnect</option>
              </select>
            </div>
            <div class="mb-3" id="field-cpid">
              <label class="form-label">ChargePoint ID (optional)</label>
              <input type="text" class="form-control" name="chargepointId">
            </div>
            <div class="mb-3" id="field-key">
              <label class="form-label">Key</label>
              <input type="text" class="form-control" name="key">
            </div>
            <div class="mb-3" id="field-value">
              <label class="form-label">Value</label>
              <input type="text" class="form-control" name="value">
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary" id="savePlugin">Save</button>
        </div>
      </div>
    </div>
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jsPlumb/2.15.6/js/jsplumb.min.js"></script>
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      var instance = jsPlumb.getInstance({
        Connector: 'Flowchart',
        Endpoint: ['Dot', { radius: 3 }],
        PaintStyle: { strokeWidth: 2, stroke: '#000' },
        EndpointStyle: { fill: '#000' }
      });

      instance.setContainer('canvas');

      var sourceEndpoint = { isSource: true, maxConnections: -1 };
      var targetEndpoint = { isTarget: true, maxConnections: -1 };
      var counter = 0;
      var currentNode = null;
      var modal = new bootstrap.Modal(document.getElementById('pluginModal'));
      var form = document.getElementById('pluginForm');

      function updateDefinition() {
        var nodes = [];
        document.querySelectorAll('#canvas .node').forEach(function(node) {
          var n = {
            id: node.id,
            type: node.getAttribute('data-type'),
            position: {
              x: parseInt(node.style.left, 10) || 0,
              y: parseInt(node.style.top, 10) || 0
            }
          };
          switch(n.type) {
            case 'chargepoint_message':
            case 'cpms_message':
              n.settings = {
                trigger: node.dataset.trigger || '',
                chargepoint_id: node.dataset.chargepointId || ''
              };
              break;
            case 'setvalue':
              n.settings = {
                key: node.dataset.key || '',
                value: node.dataset.value || ''
              };
              break;
          }
          nodes.push(n);
        });
        var connections = [];
        instance.getAllConnections().forEach(function(conn) {
          connections.push({
            source: conn.sourceId,
            target: conn.targetId
          });
        });
        var json = JSON.stringify({ nodes: nodes, connections: connections }, null, 2);
        document.querySelector('textarea[name="definition"]').value = json;
      }

      function createNode(type, x, y, label, settings) {
        var id = 'node' + counter++;
        var div = document.createElement('div');
        div.className = 'node';
        div.id = id;
        div.innerText = label;
        div.style.left = x + 'px';
        div.style.top = y + 'px';
        div.setAttribute('data-type', type);
        document.getElementById('canvas').appendChild(div);

        instance.draggable(div, { stop: updateDefinition });
        div.addEventListener('click', function(e) {
          e.stopPropagation();
          openSettings(div);
        });

        if (type === 'stop') {
          instance.addEndpoint(div, { anchor: 'Left', uuid: id + '_left' }, targetEndpoint);
        } else if (type === 'chargepoint_message' || type === 'cpms_message') {
          instance.addEndpoint(div, { anchor: 'Right', uuid: id + '_right' }, sourceEndpoint);
        } else {
          instance.addEndpoint(div, { anchor: 'Left', uuid: id + '_left' }, targetEndpoint);
          instance.addEndpoint(div, { anchor: 'Right', uuid: id + '_right' }, sourceEndpoint);
        }

        if (settings) {
          if (settings.trigger) div.dataset.trigger = settings.trigger;
          if (settings.chargepoint_id) div.dataset.chargepointId = settings.chargepoint_id;
          if (settings.key) div.dataset.key = settings.key;
          if (settings.value) div.dataset.value = settings.value;
        }
        updateDefinition();
      }

      document.querySelectorAll('.plugin').forEach(function(el) {
        el.addEventListener('dragstart', function(ev) {
          ev.dataTransfer.setData('type', el.getAttribute('data-type'));
          ev.dataTransfer.setData('label', el.textContent);
        });
      });
      var canvas = document.getElementById('canvas');
      canvas.addEventListener('dragover', function(ev) { ev.preventDefault(); });
      canvas.addEventListener('drop', function(ev) {
        ev.preventDefault();
        var type = ev.dataTransfer.getData('type');
        var label = ev.dataTransfer.getData('label');
        var rect = canvas.getBoundingClientRect();
        createNode(type, ev.clientX - rect.left, ev.clientY - rect.top, label);
      });

      instance.bind('connection', updateDefinition);
      instance.bind('connectionDetached', updateDefinition);
      instance.bind('connectionMoved', updateDefinition);

      try {
        var existing = JSON.parse(document.querySelector('textarea[name="definition"]').value);
        if (existing.nodes) {
          existing.nodes.forEach(function(n) {
            createNode(n.type, n.position.x, n.position.y, pluginLabel(n.type), n.settings || {});
          });
          if (existing.connections) {
            existing.connections.forEach(function(c) {
              instance.connect({ source: c.source, target: c.target });
            });
            updateDefinition();
          }
        }
      } catch (e) {
        // ignore
      }

      function pluginLabel(type) {
        switch(type) {
          case 'chargepoint_message': return 'Chargepoint Message';
          case 'cpms_message': return 'CPMS Message';
          case 'log_entry': return 'Log Entry';
          case 'setvalue': return 'SetValue';
          case 'stop': return 'Stop';
          default: return type;
        }
      }

      function openSettings(node) {
        var type = node.getAttribute('data-type');
        document.getElementById('field-trigger').style.display = 'none';
        document.getElementById('field-cpid').style.display = 'none';
        document.getElementById('field-key').style.display = 'none';
        document.getElementById('field-value').style.display = 'none';
        currentNode = null;

        if (type === 'chargepoint_message' || type === 'cpms_message') {
          document.getElementById('field-trigger').style.display = 'block';
          document.getElementById('field-cpid').style.display = 'block';
          form.trigger.value = node.dataset.trigger || 'BootNotification';
          form.chargepointId.value = node.dataset.chargepointId || '';
        } else if (type === 'setvalue') {
          document.getElementById('field-key').style.display = 'block';
          document.getElementById('field-value').style.display = 'block';
          form.key.value = node.dataset.key || '';
          form.value.value = node.dataset.value || '';
        } else {
          return;
        }
        currentNode = node;
        modal.show();
      }

      document.getElementById('savePlugin').addEventListener('click', function() {
        if (!currentNode) return;
        var type = currentNode.getAttribute('data-type');
        if (type === 'chargepoint_message' || type === 'cpms_message') {
          currentNode.dataset.trigger = form.trigger.value;
          currentNode.dataset.chargepointId = form.chargepointId.value;
        } else if (type === 'setvalue') {
          currentNode.dataset.key = form.key.value;
          currentNode.dataset.value = form.value.value;
        }
        modal.hide();
        updateDefinition();
      });
    });
  </script>
</main>
{% endblock %}