import WorkflowViz from 'workflow-viz';

// Initialize with a container element
const workflow = new WorkflowViz('#workflow-container');

<div id="simple-workflow"></div>

<script>
  // Define workflow steps with timestamps and status
  var line = {
    name: "Project Alpha",
    data: [
      [1707235200000, "Planning"],     // Feb 6, 2024
      [1707321600000, "Development"],   // Feb 7, 2024
      [1707408000000, "Testing"]        // Feb 8, 2024
    ]
  };

  // Add important milestones or events
  var markers = [
    [1707321600000, "Development Sprint Started"],
    [1707408000000, "QA Review Completed"]
  ];

  $('#simple-workflow').workflowviz(line, markers);
</script>

<div id="multi-workflow"></div>

<script>
  // Define multiple workflow streams
  var frontend = {
    name: "Frontend Development",
    data: [
      [1707235200000, "Design"],
      [1707321600000, "Implementation"],
      [1707408000000, "Testing"]
    ]
  };

  var backend = {
    name: "Backend Development",
    data: [
      [1707235200000, "Architecture"],
      [1707321600000, "API Development"],
      [1707408000000, "Integration"]
    ]
  };

  var lines = [frontend, backend];
  
  // Add shared milestones
  var markers = [
    [1707321600000, "Sprint 1 Review"],
    [1707408000000, "Integration Complete"]
  ];

  $('#multi-workflow').workflowviz(lines, markers);
</script>

<div id="custom-workflow"></div>

<script>
  var line = {
    name: "Release Pipeline",
    data: [
      [1707235200000, "Development"],
      [1707321600000, "Testing"],
      [1707408000000, "Deployment"]
    ]
  };

  var markers = [
    [1707408000000, "Production Release"]
  ];

  // Custom options
  var options = {
    theme: 'dark',
    nodeStyle: {
      shape: 'rectangle',
      color: '#4A90E2'
    },
    markerStyle: {
      icon: 'flag',
      color: '#E24A90'
    },
    dateFormat: 'MMM DD, YYYY'
  };

  $('#custom-workflow').workflowviz(line, markers, options);
</script>

workflow.defineTemplate('custom', {
    shape: 'hexagon',
    size: { width: 120, height: 80 },
    style: {
        fill: '#e6f3ff',
        stroke: '#0066cc',
        textColor: '#333333'
    }
});

workflow.addNode({
    id: 'special-task',
    label: 'Custom Process',
    template: 'custom'
});

workflow.on('nodeClick', (node) => {
    console.log(`Node ${node.id} clicked`);
});

workflow.on('connectionCreated', (source, target) => {
    console.log(`New connection: ${source} → ${target}`);
});

// Update node status
workflow.updateNode('task1', {
    status: 'completed',
    metadata: {
        completedBy: 'John Doe',
        timestamp: Date.now()
    }
});

// Get workflow state
const state = workflow.exportState();

const config = {
    theme: 'light',           // 'light' or 'dark'
    autoLayout: true,         // Enable automatic node positioning
    gridSize: 20,            // Snap-to-grid size in pixels
    animationDuration: 300,   // Transition duration in milliseconds
    readonly: false,         // Disable editing capabilities
    connectorStyle: 'curved' // 'straight', 'curved', or 'orthogonal'
};

const workflow = new WorkflowViz('#container', config);