#!/usr/bin/env node

const fs = require('fs');
const path = require('path');

// Simple solution: Create a convert-to-html script that uses mermaid.js
// Since we can't install globally, we'll create an HTML file for each diagram

const diagrams = [
  'system-context.mermaid',
  'container-architecture.mermaid',
  'blockchain-architecture.mermaid',
  'workflow-state-machine.mermaid',
  'data-flow.mermaid',
  'deployment-architecture.mermaid'
];

const dir = __dirname;

diagrams.forEach(diagram => {
  const mermaidPath = path.join(dir, diagram);
  const htmlPath = path.join(dir, diagram.replace('.mermaid', '.html'));

  if (fs.existsSync(mermaidPath)) {
    const content = fs.readFileSync(mermaidPath, 'utf8');

    const html = `<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>${diagram.replace('.mermaid', '')}</title>
  <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
  <style>
    body {
      margin: 0;
      padding: 20px;
      background: #1a1a1a;
      color: #fff;
      font-family: Arial, sans-serif;
    }
    h1 {
      text-align: center;
      color: #3b82f6;
    }
    .mermaid {
      display: flex;
      justify-content: center;
      background: transparent;
    }
  </style>
</head>
<body>
  <h1>${diagram.replace('.mermaid', '').replace(/-/g, ' ').toUpperCase()}</h1>
  <div class="mermaid">
${content}
  </div>
  <script>
    mermaid.initialize({ startOnLoad: true, theme: 'dark' });
    mermaid.contentLoaded();
  </script>
</body>
</html>`;

    fs.writeFileSync(htmlPath, html);
    console.log(`Created: ${htmlPath}`);
  }
});

console.log('HTML conversion complete!');
console.log('Open each .html file in a browser and use browser tools to export as PNG');
