{% extends "base.html" %}
{% block title %}الخريطة الذهنية — {{ report.project_name }}{% endblock %}
{% block content %}
<div class="max-w-7xl mx-auto px-4 py-8">

    <!-- Header -->
    <div class="flex flex-col md:flex-row md:items-center justify-between mb-6 pb-6 border-b border-white/5">
        <div>
            <div class="flex items-center gap-3 mb-3">
                {% if not shared %}
                <a href="{{ url_for('study.notebook_view', report_id=report.id) }}"
                   class="w-10 h-10 rounded-xl glass flex items-center justify-center text-slate-400 hover:text-white hover:border-accent-gold transition-all duration-300">&larr;</a>
                {% endif %}
                <div class="px-3 py-1 rounded-full bg-teal-500/10 border border-teal-500/20 text-[10px] text-teal-400 font-bold uppercase tracking-wider">
                    Mind Map
                </div>
            </div>
            <h1 class="text-2xl font-black text-white">🧠 الخريطة الذهنية</h1>
            <p class="text-slate-500 text-sm mt-1">{{ report.project_name }}</p>
        </div>
        <div class="flex items-center gap-3 mt-4 md:mt-0">
            {% include "study/_share_btn.html" %}
            <button onclick="resetZoom()" class="glass px-4 py-2 rounded-xl text-slate-400 text-xs hover:text-white transition-all">
                ↺ إعادة ضبط
            </button>
            <button onclick="toggleLayout()" id="layoutBtn" class="glass px-4 py-2 rounded-xl text-slate-400 text-xs hover:text-white transition-all">
                ⇄ تبديل العرض
            </button>
            <button onclick="downloadSVG()" class="btn-luxury px-5 py-2.5 rounded-xl font-bold text-xs flex items-center gap-2 transition-all">
                ⬇ تحميل SVG
            </button>
        </div>
    </div>

    <!-- Mind Map Container -->
    <div class="panel p-0 overflow-hidden rounded-2xl" style="min-height: 600px; position: relative;">
        <!-- Controls overlay -->
        <div class="absolute top-4 left-4 z-10 flex flex-col gap-2">
            <button onclick="zoomIn()" class="w-8 h-8 rounded-lg glass flex items-center justify-center text-slate-400 hover:text-white text-lg transition-all">+</button>
            <button onclick="zoomOut()" class="w-8 h-8 rounded-lg glass flex items-center justify-center text-slate-400 hover:text-white text-lg transition-all">−</button>
        </div>
        <!-- Legend -->
        <div class="absolute bottom-4 left-4 z-10 glass rounded-xl px-3 py-2">
            <div class="flex items-center gap-4 text-[10px] text-slate-400">
                <span class="flex items-center gap-1"><span class="w-3 h-3 rounded-full bg-amber-400 inline-block"></span> الجذر</span>
                <span class="flex items-center gap-1"><span class="w-3 h-3 rounded-full bg-teal-400 inline-block"></span> فرع رئيسي</span>
                <span class="flex items-center gap-1"><span class="w-3 h-3 rounded-full bg-purple-400 inline-block"></span> فرع فرعي</span>
            </div>
        </div>
        <div id="mindmap-container" style="width: 100%; height: 650px;"></div>
    </div>

    <!-- Node Details Panel -->
    <div id="nodeDetail" class="hidden mt-6 panel p-6 rounded-2xl">
        <h3 class="text-lg font-bold text-white mb-2" id="nodeDetailTitle"></h3>
        <p class="text-slate-400 text-sm" id="nodeDetailInfo"></p>
    </div>
</div>

<script src="https://d3js.org/d3.v7.min.js"></script>
<script>
const DATA = {{ mindmap_data | safe }};
const container = document.getElementById('mindmap-container');
let currentLayout = 'radial'; // 'radial' or 'tree'
let svg, g, zoomBehavior;

const COLORS = {
    root: '#f59e0b',
    branch: ['#14b8a6', '#8b5cf6', '#3b82f6', '#ec4899', '#f97316', '#06b6d4', '#84cc16'],
    leaf: '#64748b',
    link: 'rgba(148, 163, 184, 0.15)',
    linkHover: 'rgba(148, 163, 184, 0.4)',
    text: '#e2e8f0',
    textSub: '#94a3b8',
    bg: '#0f172a',
};

function init() {
    const width = container.clientWidth;
    const height = container.clientHeight;

    d3.select('#mindmap-container').selectAll('*').remove();

    svg = d3.select('#mindmap-container')
        .append('svg')
        .attr('width', width)
        .attr('height', height)
        .attr('id', 'mindmap-svg')
        .style('background', 'transparent');

    g = svg.append('g');

    zoomBehavior = d3.zoom()
        .scaleExtent([0.2, 4])
        .on('zoom', (event) => g.attr('transform', event.transform));

    svg.call(zoomBehavior);

    if (currentLayout === 'radial') {
        drawRadial(width, height);
    } else {
        drawTree(width, height);
    }
}

function drawRadial(width, height) {
    const root = d3.hierarchy(DATA);
    const radius = Math.min(width, height) / 2 - 80;

    const treeLayout = d3.tree()
        .size([2 * Math.PI, radius])
        .separation((a, b) => (a.parent === b.parent ? 1 : 2) / a.depth);

    treeLayout(root);

    g.attr('transform', `translate(${width / 2},${height / 2})`);
    svg.call(zoomBehavior.transform, d3.zoomIdentity.translate(width / 2, height / 2));

    // Links
    g.selectAll('.link')
        .data(root.links())
        .join('path')
        .attr('class', 'link')
        .attr('d', d3.linkRadial()
            .angle(d => d.x)
            .radius(d => d.y))
        .attr('fill', 'none')
        .attr('stroke', COLORS.link)
        .attr('stroke-width', d => Math.max(1, 3 - d.target.depth))
        .style('transition', 'stroke 0.3s');

    // Nodes
    const nodes = g.selectAll('.node')
        .data(root.descendants())
        .join('g')
        .attr('class', 'node')
        .attr('transform', d => `rotate(${d.x * 180 / Math.PI - 90}) translate(${d.y},0)`)
        .style('cursor', 'pointer')
        .on('click', (event, d) => showNodeDetail(d))
        .on('mouseenter', function(event, d) {
            d3.select(this).select('circle')
                .transition().duration(200)
                .attr('r', getRadius(d) * 1.5)
                .attr('filter', 'drop-shadow(0 0 8px ' + getColor(d) + ')');
        })
        .on('mouseleave', function(event, d) {
            d3.select(this).select('circle')
                .transition().duration(200)
                .attr('r', getRadius(d))
                .attr('filter', 'none');
        });

    nodes.append('circle')
        .attr('r', d => getRadius(d))
        .attr('fill', d => getColor(d))
        .attr('stroke', d => getColor(d))
        .attr('stroke-width', 2)
        .attr('fill-opacity', 0.2);

    nodes.append('text')
        .attr('dy', '0.31em')
        .attr('x', d => (d.x < Math.PI) === !d.children ? 8 : -8)
        .attr('text-anchor', d => (d.x < Math.PI) === !d.children ? 'start' : 'end')
        .attr('transform', d => d.x >= Math.PI ? 'rotate(180)' : null)
        .attr('fill', d => d.depth === 0 ? COLORS.root : COLORS.text)
        .attr('font-size', d => d.depth === 0 ? '14px' : d.depth === 1 ? '12px' : '11px')
        .attr('font-weight', d => d.depth <= 1 ? 'bold' : 'normal')
        .attr('font-family', 'system-ui, -apple-system, sans-serif')
        .text(d => d.data.name.length > 35 ? d.data.name.slice(0, 35) + '…' : d.data.name)
        .append('title')
        .text(d => d.data.name);
}

function drawTree(width, height) {
    const root = d3.hierarchy(DATA);
    const treeWidth = Math.max(width - 160, root.height * 250);
    const treeHeight = Math.max(height - 80, root.leaves().length * 28);

    const treeLayout = d3.tree().size([treeHeight, treeWidth]);
    treeLayout(root);

    g.attr('transform', 'translate(80, 40)');
    svg.call(zoomBehavior.transform, d3.zoomIdentity.translate(80, 40));

    // Links
    g.selectAll('.link')
        .data(root.links())
        .join('path')
        .attr('class', 'link')
        .attr('d', d3.linkHorizontal().x(d => d.y).y(d => d.x))
        .attr('fill', 'none')
        .attr('stroke', COLORS.link)
        .attr('stroke-width', d => Math.max(1, 3 - d.target.depth));

    // Nodes
    const nodes = g.selectAll('.node')
        .data(root.descendants())
        .join('g')
        .attr('class', 'node')
        .attr('transform', d => `translate(${d.y},${d.x})`)
        .style('cursor', 'pointer')
        .on('click', (event, d) => showNodeDetail(d))
        .on('mouseenter', function(event, d) {
            d3.select(this).select('circle')
                .transition().duration(200)
                .attr('r', getRadius(d) * 1.5)
                .attr('filter', 'drop-shadow(0 0 8px ' + getColor(d) + ')');
        })
        .on('mouseleave', function(event, d) {
            d3.select(this).select('circle')
                .transition().duration(200)
                .attr('r', getRadius(d))
                .attr('filter', 'none');
        });

    nodes.append('circle')
        .attr('r', d => getRadius(d))
        .attr('fill', d => getColor(d))
        .attr('stroke', d => getColor(d))
        .attr('stroke-width', 2)
        .attr('fill-opacity', 0.2);

    nodes.append('text')
        .attr('dy', '0.31em')
        .attr('x', d => d.children ? -10 : 10)
        .attr('text-anchor', d => d.children ? 'end' : 'start')
        .attr('fill', d => d.depth === 0 ? COLORS.root : COLORS.text)
        .attr('font-size', d => d.depth === 0 ? '14px' : d.depth === 1 ? '12px' : '11px')
        .attr('font-weight', d => d.depth <= 1 ? 'bold' : 'normal')
        .attr('font-family', 'system-ui, -apple-system, sans-serif')
        .text(d => d.data.name.length > 40 ? d.data.name.slice(0, 40) + '…' : d.data.name)
        .append('title')
        .text(d => d.data.name);
}

function getColor(d) {
    if (d.depth === 0) return COLORS.root;
    if (d.depth === 1) {
        const idx = d.parent.children.indexOf(d) % COLORS.branch.length;
        return COLORS.branch[idx];
    }
    if (d.parent && d.parent.depth === 1) {
        const idx = d.parent.parent.children.indexOf(d.parent) % COLORS.branch.length;
        return COLORS.branch[idx];
    }
    return COLORS.leaf;
}

function getRadius(d) {
    if (d.depth === 0) return 12;
    if (d.depth === 1) return 7;
    return 4;
}

function showNodeDetail(d) {
    const panel = document.getElementById('nodeDetail');
    const title = document.getElementById('nodeDetailTitle');
    const info = document.getElementById('nodeDetailInfo');

    title.textContent = d.data.name;
    const childCount = d.children ? d.children.length : 0;
    const depthLabel = d.depth === 0 ? 'الجذر' : d.depth === 1 ? 'فرع رئيسي' : 'فرع فرعي';
    info.textContent = `المستوى: ${depthLabel} | الفروع: ${childCount}`;

    if (childCount > 0) {
        const childNames = d.children.map(c => '• ' + c.data.name).join('\n');
        info.textContent += '\n' + childNames;
        info.style.whiteSpace = 'pre-line';
    }

    panel.classList.remove('hidden');
    panel.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
}

function resetZoom() {
    const width = container.clientWidth;
    const height = container.clientHeight;
    if (currentLayout === 'radial') {
        svg.transition().duration(500).call(zoomBehavior.transform, d3.zoomIdentity.translate(width / 2, height / 2));
    } else {
        svg.transition().duration(500).call(zoomBehavior.transform, d3.zoomIdentity.translate(80, 40));
    }
}

function zoomIn() {
    svg.transition().duration(300).call(zoomBehavior.scaleBy, 1.3);
}

function zoomOut() {
    svg.transition().duration(300).call(zoomBehavior.scaleBy, 0.7);
}

function toggleLayout() {
    currentLayout = currentLayout === 'radial' ? 'tree' : 'radial';
    document.getElementById('layoutBtn').textContent = currentLayout === 'radial' ? '⇄ عرض شجري' : '⇄ عرض دائري';
    init();
}

function downloadSVG() {
    const svgEl = document.getElementById('mindmap-svg');
    const clone = svgEl.cloneNode(true);

    // Add white background for download
    const bg = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
    bg.setAttribute('width', '100%');
    bg.setAttribute('height', '100%');
    bg.setAttribute('fill', '#0f172a');
    clone.insertBefore(bg, clone.firstChild);

    const data = new XMLSerializer().serializeToString(clone);
    const blob = new Blob([data], { type: 'image/svg+xml' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = '{{ report.project_name }}-mindmap.svg';
    a.click();
    URL.revokeObjectURL(url);
}

// Initialize
init();
window.addEventListener('resize', () => init());
</script>
{% endblock %}