/**
 * Mermaid.js integration for ObsiGate.
 *
 * Handles initialization, rendering, templates, zoom/pan,
 * fullscreen, focus mode, theme sync, and Obsidian compatibility.
 *
 * Usage: import { initMermaid, renderMermaidBlocks } from './mermaid-viewer.js';
 */
import { safeCreateIcons } from './utils.js';

// ---------------------------------------------------------------------------
// Configuration (#20)
// ---------------------------------------------------------------------------

var _mermaidReady = false;
var _currentTheme = 'default';

export function initMermaid() {
  if (typeof mermaid === 'undefined') {
    console.warn('[Mermaid] library not loaded');
    return;
  }
  mermaid.initialize({
    startOnLoad: false,
    securityLevel: 'strict',
    theme: _currentTheme,
    fontFamily: 'inherit',
  });
  _mermaidReady = true;
}

export function updateMermaidTheme(isDark) {
  _currentTheme = isDark ? 'dark' : 'default';
  if (_mermaidReady) {
    mermaid.initialize({
      startOnLoad: false,
      securityLevel: 'strict',
      theme: _currentTheme,
      fontFamily: 'inherit',
    });
  }
}

// ---------------------------------------------------------------------------
// Templates for all diagram types (#22)
// ---------------------------------------------------------------------------

export var MERMAID_TEMPLATES = {
  flowchart: 'flowchart TD\n    A[Start] --> B{Decision?}\n    B -->|Yes| C[OK]\n    B -->|No| D[Cancel]',
  sequenceDiagram: 'sequenceDiagram\n    Alice->>Bob: Hello\n    Bob-->>Alice: Hi!',
  classDiagram: 'classDiagram\n    class Animal {\n        +name: string\n        +age: int\n        +makeSound()\n    }\n    class Dog {\n        +bark()\n    }\n    Animal <|-- Dog',
  'stateDiagram-v2': 'stateDiagram-v2\n    [*] --> Idle\n    Idle --> Running : start\n    Running --> Idle : stop\n    Running --> [*] : done',
  erDiagram: 'erDiagram\n    CUSTOMER ||--o{ ORDER : places\n    ORDER ||--|{ LINE-ITEM : contains',
  journey: 'journey\n    title My day\n    section Morning\n        Wake up: 5: Me\n        Breakfast: 3: Me\n    section Work\n        Code: 5: Me, Cat',
  gantt: 'gantt\n    title Project Plan\n    dateFormat YYYY-MM-DD\n    section Design\n        Mockups :a1, 2024-01-01, 7d\n    section Dev\n        Backend :a2, after a1, 14d',
  pie: 'pie title Languages\n    "Python" : 45\n    "JavaScript" : 30\n    "Go" : 15\n    "Rust" : 10',
  gitGraph: 'gitGraph\n    commit\n    branch feature\n    checkout feature\n    commit\n    checkout main\n    merge feature',
  requirementDiagram: 'requirementDiagram\n    requirement req1 {\n        id: 1\n        text: System shall do X\n    }\n    element Component {\n        type: package\n    }\n    Component - satisfies -> req1',
  mindmap: 'mindmap\n  root((Project))\n    Frontend\n      HTML\n      CSS\n      JavaScript\n    Backend\n      API\n      Database',
  timeline: 'timeline\n    title History\n    2020 : Started\n    2022 : v1.0\n    2024 : v2.0',
  quadrantChart: 'quadrantChart\n    title Products\n    x-axis Low Reach --> High Reach\n    y-axis Low Value --> High Value\n    quadrant-1 Stars\n    quadrant-2 Question Marks\n    Product A: [0.8, 0.6]\n    Product B: [0.3, 0.8]',
  C4Context: 'C4Context\n    title System Context\n    Person(user, "User")\n    System(app, "My App")\n    System_Ext(db, "Database")\n    Rel(user, app, "Uses")\n    Rel(app, db, "Reads/Writes")',
  C4Container: 'C4Container\n    title Containers\n    Container(web, "Web App", "React")\n    Container(api, "API", "FastAPI")\n    ContainerDb(db, "DB", "PostgreSQL")\n    Rel(web, api, "REST")\n    Rel(api, db, "SQL")',
  C4Component: 'C4Component\n    title API Components\n    Container_Boundary(api, "API") {\n        Component(auth, "Auth Service")\n        Component(search, "Search Engine")\n    }',
  C4Dynamic: 'C4Dynamic\n    title Login Flow\n    Person(user, "User")\n    Container(web, "Web App")\n    Container(api, "API")\n    Rel(user, web, "POST /login")\n    Rel(web, api, "authenticate")',
  C4Deployment: 'C4Deployment\n    title Deployment\n    Deployment_Node(cloud, "Cloud") {\n        Container(web, "Web")\n        Container(api, "API")\n    }',
  'xychart-beta': 'xychart-beta\n    title "Sales"\n    x-axis [Jan, Feb, Mar, Apr]\n    y-axis "Revenue" 0 --> 100\n    bar [45, 60, 75, 90]\n    line [30, 45, 55, 70]',
  'block-beta': 'block-beta\n    columns 3\n    A B C\n    D E F',
  'sankey-beta': 'sankey-beta\n    A, B, 50\n    A, C, 30\n    B, D, 20\n    C, D, 30',
};

// ---------------------------------------------------------------------------
// Rendering engine (#21)
// ---------------------------------------------------------------------------

var _renderCounter = 0;

export async function renderMermaidBlocks(container) {
  if (!_mermaidReady || typeof mermaid === 'undefined') return;

  var blocks = container.querySelectorAll('pre code.language-mermaid, .mermaid-code');
  if (blocks.length === 0) return;

  for (var i = 0; i < blocks.length; i++) {
    var codeBlock = blocks[i];
    var originalCode = codeBlock.textContent || codeBlock.innerText || '';
    if (!originalCode.trim()) continue;

    var wrapper = codeBlock.closest('pre') || codeBlock.parentElement;
    if (!wrapper) continue;

    // Check if already rendered
    if (wrapper.querySelector('.mermaid-rendered')) continue;

    try {
      // Preprocess Obsidian syntax before Mermaid parsing (#24)
      var code = preprocessObsidian(originalCode);
      await mermaid.parse(code);
      var id = 'mermaid-' + (++_renderCounter) + '-' + Date.now();
      var result = await mermaid.render(id, code);

      // Extract diagram type from first non-comment, non-empty line
      var diagramType = extractDiagramType(code);

      // Build container with header + body
      var containerDiv = document.createElement('div');
      containerDiv.className = 'mermaid-container';

      // Header bar
      var header = document.createElement('div');
      header.className = 'mermaid-header';
      header.innerHTML =
        '<span class="mermaid-diagram-type">' + escapeHtml(diagramType) + '</span>' +
        '<div class="mermaid-header-actions">' +
          '<button class="mermaid-btn mermaid-zoom-in" title="Zoom +"><i data-lucide="zoom-in" style="width:14px;height:14px"></i></button>' +
          '<button class="mermaid-btn mermaid-zoom-out" title="Zoom -"><i data-lucide="zoom-out" style="width:14px;height:14px"></i></button>' +
          '<button class="mermaid-btn mermaid-fullscreen" title="Plein ecran"><i data-lucide="expand" style="width:14px;height:14px"></i></button>' +
          '<button class="mermaid-btn mermaid-copy" title="Copier SVG"><i data-lucide="copy" style="width:14px;height:14px"></i></button>' +
          '<button class="mermaid-btn mermaid-download" title="Telecharger PNG"><i data-lucide="download" style="width:14px;height:14px"></i></button>' +
          '<div class="mermaid-toggle">' +
            '<button class="mermaid-toggle-btn active" data-mode="preview">Preview</button>' +
            '<button class="mermaid-toggle-btn" data-mode="code">Code</button>' +
          '</div>' +
        '</div>';

      // Body
      var body = document.createElement('div');
      body.className = 'mermaid-body';
      body.innerHTML =
        '<div class="mermaid-rendered">' + result.svg + '</div>' +
        '<div class="mermaid-source" style="display:none"><pre><code class="language-mermaid">' + escapeHtml(originalCode) + '</code></pre></div>';

      containerDiv.appendChild(header);
      containerDiv.appendChild(body);

      wrapper.parentNode.replaceChild(containerDiv, wrapper);

      // Wire up header buttons
      wireHeaderButtons(containerDiv, originalCode);
      setupZoomPan(containerDiv);
      setupCodePreviewToggle(containerDiv);
      safeCreateIcons();
    } catch (err) {
      var errorDiv = document.createElement('div');
      errorDiv.className = 'mermaid-error';
      errorDiv.innerHTML = '<strong>Erreur Mermaid</strong><br>' + escapeHtml(err.message || String(err));
      wrapper.parentNode.replaceChild(errorDiv, wrapper);
    }
  }
}

// ---------------------------------------------------------------------------
// Header button wiring
// ---------------------------------------------------------------------------

function wireHeaderButtons(container, originalCode) {
  // Copy SVG
  var copyBtn = container.querySelector('.mermaid-copy');
  if (copyBtn) {
    copyBtn.addEventListener('click', function() {
      copySvgToClipboard(container);
    });
  }

  // Download PNG
  var downloadBtn = container.querySelector('.mermaid-download');
  if (downloadBtn) {
    downloadBtn.addEventListener('click', function() {
      exportMermaidPNG(container);
    });
  }
}

// ---------------------------------------------------------------------------
// Code / Preview toggle
// ---------------------------------------------------------------------------

function setupCodePreviewToggle(container) {
  var toggleBtns = container.querySelectorAll('.mermaid-toggle-btn');
  var rendered = container.querySelector('.mermaid-rendered');
  var source = container.querySelector('.mermaid-source');
  var zoomBtns = container.querySelectorAll('.mermaid-zoom-in, .mermaid-zoom-out');
  var fullscreenBtn = container.querySelector('.mermaid-fullscreen');

  for (var i = 0; i < toggleBtns.length; i++) {
    toggleBtns[i].addEventListener('click', function() {
      var mode = this.getAttribute('data-mode');

      // Update active state
      for (var j = 0; j < toggleBtns.length; j++) {
        toggleBtns[j].classList.remove('active');
      }
      this.classList.add('active');

      if (mode === 'preview') {
        rendered.style.display = '';
        source.style.display = 'none';
        // Show zoom/fullscreen buttons in preview mode
        for (var k = 0; k < zoomBtns.length; k++) zoomBtns[k].style.display = '';
        if (fullscreenBtn) fullscreenBtn.style.display = '';
      } else {
        rendered.style.display = 'none';
        source.style.display = '';
        // Hide zoom/fullscreen in code mode
        for (var k = 0; k < zoomBtns.length; k++) zoomBtns[k].style.display = 'none';
        if (fullscreenBtn) fullscreenBtn.style.display = 'none';
      }
    });
  }
}

// ---------------------------------------------------------------------------
// Diagram type extraction
// ---------------------------------------------------------------------------

function extractDiagramType(code) {
  var lines = code.trim().split('\n');
  for (var i = 0; i < lines.length; i++) {
    var line = lines[i].trim();
    // Skip comments and empty lines
    if (!line || line.indexOf('%%') === 0) continue;
    // Return the first meaningful word(s)
    var words = line.split(/\s+/);
    if (words.length >= 2) {
      return words[0] + ' ' + words[1];
    }
    return words[0] || 'mermaid';
  }
  return 'mermaid';
}

// ---------------------------------------------------------------------------
// Zoom & Pan (#27)
// ---------------------------------------------------------------------------

function setupZoomPan(container) {
  var svgWrapper = container.querySelector('.mermaid-rendered');
  if (!svgWrapper) return;
  var svg = svgWrapper.querySelector('svg');
  if (!svg) return;

  var scale = 1;
  var panX = 0, panY = 0;
  var dragging = false, startX, startY;

  svg.style.transformOrigin = '0 0';
  svg.style.cursor = 'grab';

  function update() {
    svg.style.transform = 'translate(' + panX + 'px, ' + panY + 'px) scale(' + scale + ')';
  }

  svg.addEventListener('mousedown', function(e) {
    dragging = true;
    startX = e.clientX - panX;
    startY = e.clientY - panY;
    svg.style.cursor = 'grabbing';
    e.preventDefault();
  });

  document.addEventListener('mousemove', function(e) {
    if (!dragging) return;
    panX = e.clientX - startX;
    panY = e.clientY - startY;
    update();
  });

  document.addEventListener('mouseup', function() {
    dragging = false;
    if (svg) svg.style.cursor = 'grab';
  });

  svg.addEventListener('wheel', function(e) {
    e.preventDefault();
    var delta = e.deltaY > 0 ? 0.9 : 1.1;
    scale = Math.max(0.2, Math.min(5, scale * delta));
    update();
  }, { passive: false });

  var zoomIn = container.querySelector('.mermaid-zoom-in');
  var zoomOut = container.querySelector('.mermaid-zoom-out');
  if (zoomIn) zoomIn.addEventListener('click', function() { scale = Math.min(5, scale * 1.3); update(); });
  if (zoomOut) zoomOut.addEventListener('click', function() { scale = Math.max(0.2, scale * 0.7); update(); });

  // Fullscreen (#28)
  var fsBtn = container.querySelector('.mermaid-fullscreen');
  if (fsBtn) {
    fsBtn.addEventListener('click', function() {
      openFullscreen(container);
    });
  }
}

// ---------------------------------------------------------------------------
// Fullscreen mode (#28) — with header bar + full-size diagram
// ---------------------------------------------------------------------------

function openFullscreen(container) {
  var svgWrapper = container.querySelector('.mermaid-rendered');
  var diagramType = container.querySelector('.mermaid-diagram-type');
  var typeLabel = diagramType ? diagramType.textContent : 'mermaid';

  var overlay = document.createElement('div');
  overlay.className = 'mermaid-fullscreen-overlay';

  // Fullscreen header bar
  overlay.innerHTML =
    '<div class="mermaid-fullscreen-header">' +
      '<span class="mermaid-diagram-type">' + escapeHtml(typeLabel) + '</span>' +
      '<div class="mermaid-header-actions">' +
        '<button class="mermaid-btn mermaid-fs-zoom-in" title="Zoom +"><i data-lucide="zoom-in" style="width:14px;height:14px"></i></button>' +
        '<button class="mermaid-btn mermaid-fs-zoom-out" title="Zoom -"><i data-lucide="zoom-out" style="width:14px;height:14px"></i></button>' +
        '<button class="mermaid-btn mermaid-fs-copy" title="Copier SVG"><i data-lucide="copy" style="width:14px;height:14px"></i></button>' +
        '<button class="mermaid-btn mermaid-fs-download" title="Telecharger PNG"><i data-lucide="download" style="width:14px;height:14px"></i></button>' +
        '<button class="mermaid-btn mermaid-fs-close" title="Fermer (Echap)"><i data-lucide="x" style="width:14px;height:14px"></i></button>' +
      '</div>' +
    '</div>' +
    '<div class="mermaid-fullscreen-content"></div>';

  var content = overlay.querySelector('.mermaid-fullscreen-content');
  content.innerHTML = svgWrapper.innerHTML;
  var svg = content.querySelector('svg');
  if (svg) {
    svg.style.cursor = 'default';
  }

  document.body.appendChild(overlay);

  // Fullscreen zoom
  var fsScale = 1, fsPanX = 0, fsPanY = 0, fsDragging = false, fsStartX, fsStartY;
  if (svg) {
    svg.style.transformOrigin = '0 0';
    function fsUpdate() {
      svg.style.transform = 'translate(' + fsPanX + 'px, ' + fsPanY + 'px) scale(' + fsScale + ')';
    }

    svg.addEventListener('mousedown', function(e) {
      fsDragging = true;
      fsStartX = e.clientX - fsPanX;
      fsStartY = e.clientY - fsPanY;
      svg.style.cursor = 'grabbing';
      e.preventDefault();
    });

    document.addEventListener('mousemove', function(e) {
      if (!fsDragging) return;
      fsPanX = e.clientX - fsStartX;
      fsPanY = e.clientY - fsStartY;
      fsUpdate();
    });

    document.addEventListener('mouseup', function() {
      fsDragging = false;
      if (svg) svg.style.cursor = 'grab';
    });

    svg.addEventListener('wheel', function(e) {
      e.preventDefault();
      var delta = e.deltaY > 0 ? 0.9 : 1.1;
      fsScale = Math.max(0.2, Math.min(5, fsScale * delta));
      fsUpdate();
    }, { passive: false });

    var fsZoomIn = overlay.querySelector('.mermaid-fs-zoom-in');
    var fsZoomOut = overlay.querySelector('.mermaid-fs-zoom-out');
    if (fsZoomIn) fsZoomIn.addEventListener('click', function() { fsScale = Math.min(5, fsScale * 1.3); fsUpdate(); });
    if (fsZoomOut) fsZoomOut.addEventListener('click', function() { fsScale = Math.max(0.2, fsScale * 0.7); fsUpdate(); });
  }

  // Copy SVG in fullscreen
  var fsCopy = overlay.querySelector('.mermaid-fs-copy');
  if (fsCopy) {
    fsCopy.addEventListener('click', function() {
      copySvgFromElement(content);
    });
  }

  // Download PNG in fullscreen
  var fsDownload = overlay.querySelector('.mermaid-fs-download');
  if (fsDownload) {
    fsDownload.addEventListener('click', function() {
      exportMermaidPNGFromElement(svg);
    });
  }

  safeCreateIcons();

  function close() {
    overlay.remove();
    document.removeEventListener('keydown', escHandler);
  }

  var escHandler = function(e) {
    if (e.key === 'Escape') close();
  };
  document.addEventListener('keydown', escHandler);

  overlay.addEventListener('click', function(e) {
    if (e.target === overlay) close();
  });
  overlay.querySelector('.mermaid-fs-close').addEventListener('click', close);
}

// ---------------------------------------------------------------------------
// Copy SVG to clipboard
// ---------------------------------------------------------------------------

function copySvgToClipboard(container) {
  copySvgFromElement(container.querySelector('.mermaid-rendered'));
}

function copySvgFromElement(el) {
  if (!el) return;
  var svg = el.querySelector('svg');
  if (!svg) return;
  var data = new XMLSerializer().serializeToString(svg);
  if (navigator.clipboard && navigator.clipboard.writeText) {
    navigator.clipboard.writeText(data).then(function() {
      /* copied */
    }).catch(function() {
      fallbackCopy(data);
    });
  } else {
    fallbackCopy(data);
  }
}

function fallbackCopy(text) {
  var textarea = document.createElement('textarea');
  textarea.value = text;
  textarea.style.position = 'fixed';
  textarea.style.opacity = '0';
  document.body.appendChild(textarea);
  textarea.select();
  try { document.execCommand('copy'); } catch (e) {}
  document.body.removeChild(textarea);
}

// ---------------------------------------------------------------------------
// Export SVG/PNG (#24)
// ---------------------------------------------------------------------------

export function exportMermaidSVG(container) {
  var svg = container.querySelector('svg');
  if (!svg) return;
  var data = new XMLSerializer().serializeToString(svg);
  var blob = new Blob([data], { type: 'image/svg+xml' });
  downloadBlob(blob, 'diagram.svg');
}

export function exportMermaidPNG(container) {
  var svg = container.querySelector('svg');
  exportMermaidPNGFromElement(svg);
}

function exportMermaidPNGFromElement(svg) {
  if (!svg) return;
  var data = new XMLSerializer().serializeToString(svg);
  var canvas = document.createElement('canvas');
  var ctx = canvas.getContext('2d');
  var img = new Image();
  var blob = new Blob([data], { type: 'image/svg+xml' });
  var url = URL.createObjectURL(blob);

  img.onload = function() {
    canvas.width = img.width * 2;
    canvas.height = img.height * 2;
    ctx.scale(2, 2);
    ctx.drawImage(img, 0, 0);
    URL.revokeObjectURL(url);
    canvas.toBlob(function(pngBlob) {
      downloadBlob(pngBlob, 'diagram.png');
    }, 'image/png');
  };
  img.src = url;
}

function downloadBlob(blob, filename) {
  var a = document.createElement('a');
  a.href = URL.createObjectURL(blob);
  a.download = filename;
  a.click();
  URL.revokeObjectURL(a.href);
}

// ---------------------------------------------------------------------------
// Focus mode (#29) — click diagram to enlarge in a side panel
// ---------------------------------------------------------------------------

var _focusPanel = null;

export function setupFocusMode() {
  document.addEventListener('click', function(e) {
    var container = e.target.closest('.mermaid-container');
    if (!container) return;
    // Don't trigger focus if clicking header or controls
    if (e.target.closest('.mermaid-header') || e.target.closest('button')) return;

    var svgWrapper = container.querySelector('.mermaid-rendered');
    if (!svgWrapper) return;

    if (_focusPanel && _focusPanel.style.display !== 'none') {
      updateFocusPanel(svgWrapper);
    } else {
      showFocusPanel(svgWrapper);
    }
  });
}

function showFocusPanel(svgWrapper) {
  if (!_focusPanel) {
    _focusPanel = document.createElement('div');
    _focusPanel.className = 'mermaid-focus-panel';
    _focusPanel.innerHTML =
      '<div class="mermaid-focus-header">' +
      '<span>Diagramme</span>' +
      '<button class="mermaid-focus-close" title="Fermer"><i data-lucide="x" style="width:14px;height:14px"></i></button>' +
      '</div>' +
      '<div class="mermaid-focus-content"></div>';
    document.body.appendChild(_focusPanel);

    _focusPanel.querySelector('.mermaid-focus-close').addEventListener('click', function() {
      _focusPanel.style.display = 'none';
    });
  }

  _focusPanel.style.display = 'block';
  updateFocusPanel(svgWrapper);
  safeCreateIcons();
}

function updateFocusPanel(svgWrapper) {
  if (!_focusPanel) return;
  var content = _focusPanel.querySelector('.mermaid-focus-content');
  content.innerHTML = svgWrapper.innerHTML;
  var svg = content.querySelector('svg');
  if (svg) {
    svg.style.width = '100%';
    svg.style.height = 'auto';
    svg.style.maxHeight = '80vh';
  }
}

// ---------------------------------------------------------------------------
// Obsidian compatibility pre-processor (#24)
// ---------------------------------------------------------------------------

export function preprocessObsidian(code) {
  return code
    .replace(/!\[\[([^\]]+?)\]\]/g, function(_, m) {
      var parts = m.split('|');
      var src = parts[0].trim();
      var width = parts[1] ? parts[1].trim() : null;
      if (width && /^\d+$/.test(width)) {
        return '<img src="' + src + '" width="' + width + '" />';
      }
      return '<img src="' + src + '" />';
    })
    .replace(/\[\[([^\]]+?)\]\]/g, '<a href="$1">$1</a>')
    .replace(/==([^=]+)==/g, '<mark>$1</mark>');
}

// ---------------------------------------------------------------------------
// Utility
// ---------------------------------------------------------------------------

function escapeHtml(str) {
  var div = document.createElement('div');
  div.textContent = str;
  return div.innerHTML;
}