frontend/app.js

// Ensure Markmap libraries are loaded from CDN
const { markmap } = window;
const { Markmap, loadCSS, loadJS } = markmap;
const { Transformer } = window.markmap;

// Create Transformer instance
const transformer = new Transformer();

// Initialize Markmap on the SVG element
let mm;
document.addEventListener('DOMContentLoaded', () => {
    mm = Markmap.create('#markmap');
    
    // Initial dummy data to show something beautiful right away
    const initialMarkdown = `
# マインドマップ自動生成
## 使い方
- 左側に文章を入力します
- 「マップを生成」ボタンを押します
## 特徴
- AIが文脈を理解して自動で構造化
- 専用カスタムAI（edha 1.0 3B）による情報抽出
`;
    renderMindMap(initialMarkdown);
});

// Function to render Markdown to MindMap
function renderMindMap(markdownContent) {
    // 1. Transform markdown to Markmap internal format
    const { root, features } = transformer.transform(markdownContent);
    
    // 2. Load necessary assets for features (like Katex or highlight.js) if used
    const { styles, scripts } = transformer.getUsedAssets(features);
    if (styles) loadCSS(styles);
    if (scripts) loadJS(scripts, { getMarkmap: () => markmap });
    
    // 3. Update the Markmap instance with new data
    mm.setData(root);
    mm.fit(); // Automatically fit to screen
}

// Event Listeners
const generateBtn = document.getElementById('generateBtn');
const inputText = document.getElementById('inputText');
const loadingDiv = document.getElementById('loading');

generateBtn.addEventListener('click', async () => {
    const text = inputText.value.trim();
    if (!text) {
        alert("Please enter some text to generate a map.");
        return;
    }

    // Show loading
    generateBtn.disabled = true;
    generateBtn.classList.add('hidden');
    loadingDiv.classList.remove('hidden');

    try {
        // --- PHASE 3: Real API Call ---
        console.log("Sending request to backend...");
        const response = await fetch('/generate', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({ text: text })
        });

        if (!response.ok) {
            throw new Error('API error: ' + response.status);
        }

        const data = await response.json();
        console.log("✅ RAW BACKEND RESPONSE:", data.markdown);
        
        // Render the Markdown returned by the Python backend
        renderMindMap(data.markdown);
        
    } catch (error) {
        alert("Error occurred: " + error.message);
    } finally {
        // Hide loading
        generateBtn.disabled = false;
        generateBtn.classList.remove('hidden');
        loadingDiv.classList.add('hidden');
    }
});