// /static/js/graph/style.js
export const baseStyles = [
  {
    selector: 'node',
    style: {
      'shape': 'round-rectangle',
      'background-color': '#e8f0ff',
      'border-color': '#0ea5e9',
      'border-width': 2,
      'label': 'data(label)',
      'color': '#0f172a',
      'text-valign': 'center',
      'text-halign': 'center',
      'font-size': 12,
      'text-wrap': 'wrap',
      'text-max-width': 140,
      'padding': '8px',
      'width': 100,
      'height': 50
    }
  },
  {
    selector: 'edge',
    style: {
      'line-color': '#64748b',
      'width': 2,
      'curve-style': 'straight',

      // NEW: static “middle of edge” label
      'label': 'data(midLabel)',
      'text-rotation': 'autorotate',
      'text-margin-y': -8,             // nudge mid-label off the line a bit

      // keep your side labels for “where the IP sits”
      'source-label': 'data(sourceLabel)',
      'target-label': 'data(targetLabel)',
      'source-text-offset': 50,
      'target-text-offset': 50,

      'font-size': 11,
      'color': '#334155',
      'text-background-color': '#ffffff',
      'text-background-opacity': 0.9,
      'text-background-shape': 'round-rectangle',
      'text-background-padding': 2,
      'text-outline-color': '#ffffff',
      'text-outline-width': 1
    }
  },
  {
    selector: ':selected',
    style: { 'border-width': 3, 'border-color': '#22d3ee', 'line-color': '#22d3ee' }
  },

  // Optional: make compound parents (like Proxmox) look like containers
  {
    selector: ':parent',
    style: {
      'background-color': '#f8fafc',
      'border-color': '#94a3b8',
      'border-width': 2,
      'padding': '12px',
      'text-valign': 'top',
      'text-halign': 'center',
      'font-weight': '600'
    }
  }
];