main.js

// === Vector Mandala Maker Main Logic ===
// This file manages both the border/background shape (always present, not a drawing tool)
// and the interactive drawing tools (freehand, line, ellipse, regular polygon, weird polygon, irregular polygon, etc).
// Border/background controls are separate from drawing tool controls.

// (All DOM element access and event listeners are now inside DOMContentLoaded. Only functions/vars outside.)

function getSVGCoords(e) {
    const rect = svg.getBoundingClientRect();
    // Use viewBox for scaling
    let vb = svg.viewBox && svg.viewBox.baseVal ? svg.viewBox.baseVal : {x:0, y:0, width:svg.width.baseVal.value, height:svg.height.baseVal.value};
    return {
        x: ((e.clientX - rect.left) / rect.width) * vb.width + vb.x,
        y: ((e.clientY - rect.top) / rect.height) * vb.height + vb.y
    };
}
// === BEGIN AUTOFILLCOLOR & COLOR_SWATCHES LOGIC ===
// Move all DOM-dependent code inside DOMContentLoaded
let svg;
let controls;
let strokeColor;
let fillColor;
let autoFillColorToggle;
let strokeWidth;
let symmetryAxes;
let clearBtn;
let downloadBtn;
let borderFill;
let borderEdgeColor;
let borderWidth;
let borderShapeType;
let borderPolySides;
let borderPolySidesLabel;
let AutoFillColor = true;
let COLOR_SWATCHES;
let pickRandomSwatchColor;
let setRandomFillColor;
// --- Drawing Tool State (must be defined before any function uses them) ---
let currentTool = 'freehand';
let drawing = false;
let startPoint = null;
let currentPath = null;
let weirdPolygonPoints = [];
let weirdPolygonDrawing = false;
let irregularPolygonPoints = [];
let irregularPolygonDrawing = false;
document.addEventListener('DOMContentLoaded', () => {
    // DOM references
    svg = document.getElementById('mandalaCanvas');
    controls = document.getElementById('controls');
    strokeColor = document.getElementById('strokeColor');
    fillColor = document.getElementById('fillColor');
    autoFillColorToggle = document.getElementById('autoFillColorToggle');
    strokeWidth = document.getElementById('strokeWidth');
    symmetryAxes = document.getElementById('symmetryAxes');
    clearBtn = document.getElementById('clearBtn');
    downloadBtn = document.getElementById('downloadBtn');
    borderFill = document.getElementById('borderFill');
    borderEdgeColor = document.getElementById('borderEdgeColor');
    borderWidth = document.getElementById('borderWidth');
    borderShapeType = document.getElementById('borderShapeType');
    borderPolySides = document.getElementById('borderPolySides');
    borderPolySidesLabel = document.getElementById('borderPolySidesLabel');

    // Basic palette of common colors
    COLOR_SWATCHES = [
      '#000000', '#ffffff', '#e53935', '#d81b60', '#8e24aa', '#3949ab',
      '#1e88e5', '#00897b', '#43a047', '#fbc02d', '#fb8c00', '#6d4c41',
      '#bdbdbd', '#757575', '#00bcd4', '#cddc39'
    ];
    pickRandomSwatchColor = function() {
      return COLOR_SWATCHES[Math.floor(Math.random() * COLOR_SWATCHES.length)];
    };
    setRandomFillColor = function() {
      const color = pickRandomSwatchColor();
      fillColor.value = color;
      fillColor.dispatchEvent(new Event('input', { bubbles: true }));
    };
    // Listen for toggle
    if (autoFillColorToggle) {
      autoFillColorToggle.checked = true;
      autoFillColorToggle.addEventListener('change', () => {
        AutoFillColor = autoFillColorToggle.checked;
      });
    }
    AutoFillColor = autoFillColorToggle ? autoFillColorToggle.checked : true;
    // On startup, set initial fill color if AutoFillColor is enabled
    if (AutoFillColor) {
      setRandomFillColor();
    }

    // Color swatch UI
    createColorSwatches('strokeSwatches', strokeColor);
    createColorSwatches('fillSwatches', fillColor);

    // Border/background controls event listeners
    function redrawBorder() {
        setupBgAndBorderRects();
        updateBgAndBorder();
        console.log('[VectorMandala] Border shape redrawn');
    }
    borderFill.addEventListener('input', redrawBorder);
    borderEdgeColor.addEventListener('input', redrawBorder);
    borderWidth.addEventListener('input', redrawBorder);
    borderShapeType.addEventListener('change', () => {
        // Enable/disable polygon sides
        if (borderShapeType.value === 'polygon') {
            borderPolySides.disabled = false;
            borderPolySidesLabel.style.opacity = 1;
        } else {
            borderPolySides.disabled = true;
            borderPolySidesLabel.style.opacity = 0.5;
        }
        redrawBorder();
    });
    borderPolySides.addEventListener('input', redrawBorder);
    // Set initial state for polygon sides
    if (borderShapeType.value === 'polygon') {
        borderPolySides.disabled = false;
        borderPolySidesLabel.style.opacity = 1;
    } else {
        borderPolySides.disabled = true;
        borderPolySidesLabel.style.opacity = 0.5;
    }
    // Initial draw
    redrawBorder();
    console.log('[VectorMandala] Initialization complete');

    // Drawing tool listeners (example for color)
    strokeColor.addEventListener('input', () => {
        if (selectedShape) updateSelectedShapeStyle();
    });
    fillColor.addEventListener('input', () => {
        if (selectedShape) updateSelectedShapeStyle();
    });
    // Add more listeners as needed for drawing tools, clear, download, etc.

    // Example: Clear button
    if (clearBtn) {
        clearBtn.addEventListener('click', () => {
            Array.from(svg.children).forEach(el => el.remove());
            saveHistory();
        });
    }
    // Example: Download button
    if (downloadBtn) {
        downloadBtn.addEventListener('click', () => {
            // Download SVG logic here
        });
    }
    // ... Add any additional setup or listeners needed for your tools ...

    // --- Drawing Tool Button Event Handling ---
    if (controls) {
        controls.addEventListener('click', e => {
            if (e.target.matches('button[data-tool]')) {
                setActiveTool(e.target.dataset.tool);
            }
        });
    }
    if (svg) {
        svg.addEventListener('mousedown', e => {
            console.log('[mousedown] tool:', currentTool);
            if (e.button !== 0) return;
            const { x, y } = getSVGCoords(e);
            startPoint = { x, y };
            // Capture style for this shape
            currentShapeStyle = {
                stroke: strokeColor.value,
                fill: fillColor.value,
                strokeWidth: strokeWidth.value
            };
            if (currentTool === 'freehand') {
                drawing = true;
                currentPath = [{ x, y }];
                drawPreview();
            } else if (currentTool === 'line' || currentTool === 'ellipse') {
                drawing = true;
                drawPreview({ x, y });
            } else if (currentTool === 'polygon-regular') {
                drawing = true;
                drawPreview({ x, y });
            } else if (currentTool === 'weird-polygon') {
                weirdPolygonDrawing = true;
                weirdPolygonPoints = [{ x, y }];
                drawPreview({ x, y });
            } else if (currentTool === 'polygon-irregular') {
                irregularPolygonDrawing = true;
                irregularPolygonPoints = [{ x, y }];
                drawPreview({ x, y });
            }
        });
    }

    // --- Drawing Preview on Mouse Move ---
    if (svg) {
        svg.addEventListener('mousemove', e => {
            if (currentTool === 'polygon-irregular' && irregularPolygonDrawing) {
                const { x, y } = getSVGCoords(e);
                irregularPolygonPoints.push({ x, y });
                drawPreview({ x, y });
                return;
            }
            if (!drawing) return;
            const { x, y } = getSVGCoords(e);
            if (currentTool === 'freehand' && currentPath) {
                currentPath.push({ x, y });
                drawPreview();
            } else if (currentTool === 'polygon-regular' && startPoint) {
                drawPreview({ x, y });
            } else if (currentTool === 'line' || currentTool === 'ellipse') {
                drawPreview({ x, y });
            } else if (currentTool === 'weird-polygon' && weirdPolygonDrawing) {
                weirdPolygonPoints.push({ x, y });
                drawPreview({ x, y });
            }
        });
        svg.addEventListener('mouseup', e => {
            if (!drawing && !weirdPolygonDrawing && !irregularPolygonDrawing) return;
            const { x, y } = getSVGCoords(e);
            if (currentTool === 'freehand' && currentPath) {
                drawing = false;
                commitFreehand(currentPath, currentShapeStyle);
                currentPath = null;
            } else if (currentTool === 'line') {
                drawing = false;
                commitLine(startPoint, { x, y }, currentShapeStyle);
                startPoint = null;
            } else if (currentTool === 'ellipse') {
                drawing = false;
                commitEllipse(startPoint, { x, y }, currentShapeStyle);
                startPoint = null;
            } else if (currentTool === 'polygon-regular') {
                drawing = false;
                commitRegularPolygon(startPoint, { x, y }, regularPolySides, currentShapeStyle);
                startPoint = null;
            } else if (currentTool === 'weird-polygon' && weirdPolygonDrawing) {
                weirdPolygonPoints.push({ x, y });
                commitWeirdPolygon(weirdPolygonPoints, currentShapeStyle);
                weirdPolygonDrawing = false;
                weirdPolygonPoints = [];
            } else if (currentTool === 'polygon-irregular' && irregularPolygonDrawing) {
                irregularPolygonPoints.push({ x, y });
                commitSymmetricIrregularPolygon(irregularPolygonPoints, currentShapeStyle);
                irregularPolygonDrawing = false;
                irregularPolygonPoints = [];
            }
            drawPreview();
        });
    }

    const undoBtn = document.getElementById('undoBtn');
    if (undoBtn) undoBtn.addEventListener('click', undo);
    const redoBtn = document.getElementById('redoBtn');
    if (redoBtn) redoBtn.addEventListener('click', redo);
    const regularPolySidesInput = document.getElementById('regularPolySides');
    if (regularPolySidesInput) {
        regularPolySidesInput.addEventListener('input', e => {
            regularPolySides = Math.max(3, Math.floor(e.target.value));
        });
    }
    // --- END Drawing Tool Button Event Handling ---

    // Sync borderPolySides to symmetryAxes at startup
    if (borderPolySides && symmetryAxes) {
        borderPolySides.value = symmetryAxes.value;
    }
    setupBgAndBorderRects();
    updateBgAndBorder();
    drawSymmetryAxes();
    resizeSVGToFit();
    setActiveTool('freehand');
    if (typeof updateRegularPolySidesVisibility === 'function') updateRegularPolySidesVisibility();
    saveHistory();
    // Listen for axes toggle
    const showAxes = document.getElementById('showAxes');
    if (showAxes) {
        showAxes.addEventListener('change', drawSymmetryAxes);
    }
    // Keep borderPolySides in sync with symmetryAxes on change
    if (symmetryAxes && borderPolySides) {
        symmetryAxes.addEventListener('input', (e) => {
            borderPolySides.value = e.target.value;
        });
    }
});
// === END AUTOFILLCOLOR & COLOR_SWATCHES LOGIC ===


// === BEGIN COLOR SWATCHES LOGIC (now inside DOMContentLoaded) ===
// (All color swatch logic is now inside DOMContentLoaded to avoid redeclaration errors)


function createColorSwatches(containerId, inputEl) {
  const container = document.getElementById(containerId);
  if (!container) return;
  container.innerHTML = '';
  COLOR_SWATCHES.forEach(color => {
    const swatch = document.createElement('div');
    swatch.style.background = color;
    swatch.style.width = '22px';
    swatch.style.height = '22px';
    swatch.style.border = '2px solid #aaa';
    swatch.style.borderRadius = '4px';
    swatch.style.cursor = 'pointer';
    swatch.style.transition = 'border 0.15s';
    swatch.title = color;
    // Highlight selected color
    function updateHighlight() {
      swatch.style.border = (inputEl.value.toLowerCase() === color.toLowerCase()) ? '3px solid #1976d2' : '2px solid #aaa';
    }
    inputEl.addEventListener('input', updateHighlight);
    swatch.addEventListener('click', () => {
      inputEl.value = color;
      inputEl.dispatchEvent(new Event('input', { bubbles: true }));
      updateHighlight();
    });
    updateHighlight();
    container.appendChild(swatch);
  });
  // Update highlights when color is changed elsewhere
  inputEl.addEventListener('change', () => {
    Array.from(container.children).forEach(child => {
      child.style.border = (inputEl.value.toLowerCase() === child.title.toLowerCase()) ? '3px solid #1976d2' : '2px solid #aaa';
    });
  });
}


// === END COLOR SWATCHES LOGIC ===
// (All border/background control initialization and event listeners are now inside DOMContentLoaded. Remove global declarations.)

let selectedShape = null;
let backgroundRect = null;
let backgroundCircle = null;
let backgroundPolygon = null;
let borderRect = null;

// Insert background and border rects
// --- Border/Background Shape Drawing ---
// Draws the border/background shape according to border controls. Not a drawing tool.
function setupBgAndBorderRects() {
    // Remove symmetry axes if present (they will be redrawn if needed)
    Array.from(svg.querySelectorAll('.symmetry-axis')).forEach(el => el.remove());
    drawSymmetryAxes();
    // Remove existing border shape if present
    Array.from(svg.querySelectorAll('.border-rect')).forEach(el => el.remove());
    const shapeType = borderShapeType.value;
    // Get SVG size from viewBox or bounding rect
    let width = 800, height = 800;
    if (svg.viewBox && svg.viewBox.baseVal && svg.viewBox.baseVal.width) {
        width = svg.viewBox.baseVal.width;
        height = svg.viewBox.baseVal.height;
    } else if (svg.width && svg.height) {
        width = svg.width.baseVal.value;
        height = svg.height.baseVal.value;
    } else {
        const rect = svg.getBoundingClientRect();
        width = rect.width;
        height = rect.height;
    }
    const size = Math.min(width, height);
    // Draw background shape with border
    // Draw border shape only (as first SVG child)
    let borderShape = null;
    if (shapeType === 'square') {
        const inset = borderWidth.value / 2;
        borderShape = createSVGElement('rect', {
            x: (width - size) / 2 + inset, y: (height - size) / 2 + inset, width: size - borderWidth.value, height: size - borderWidth.value,
            fill: borderFill.value,
            stroke: borderEdgeColor.value,
            'stroke-width': borderWidth.value,
            class: 'border-rect'
        });
        svg.insertBefore(borderShape, svg.firstChild);
    } else if (shapeType === 'circle') {
        const inset = borderWidth.value / 2;
        const center = getSVGCenter();
        borderShape = createSVGElement('circle', {
            cx: center.x, cy: center.y, r: (size / 2) - inset,
            fill: borderFill.value,
            stroke: borderEdgeColor.value,
            'stroke-width': borderWidth.value,
            class: 'border-rect'
        });
        svg.insertBefore(borderShape, svg.firstChild);
    } else if (shapeType === 'polygon') {
        const sides = Math.max(3, Math.floor(borderPolySides.value));
        const center = getSVGCenter();
        const r = (size / 2) - (borderWidth.value / 2);
        let points = [];
        for (let i = 0; i < sides; i++) {
            const angle = 2 * Math.PI * i / sides - Math.PI / 2;
            const x = center.x + r * Math.cos(angle);
            const y = center.y + r * Math.sin(angle);
            points.push(`${x},${y}`);
        }
        borderShape = createSVGElement('polygon', {
            points: points.join(' '),
            fill: borderFill.value,
            stroke: borderEdgeColor.value,
            'stroke-width': borderWidth.value,
            class: 'border-rect'
        });
        svg.insertBefore(borderShape, svg.firstChild);
    }
    borderRect = borderShape;
}

function updateBgAndBorder() {
    // Update fill, stroke, and stroke-width for border shape
    if (borderRect) {
        borderRect.setAttribute('fill', borderFill.value);
        borderRect.setAttribute('stroke', borderEdgeColor.value);
        borderRect.setAttribute('stroke-width', borderWidth.value);
    }
}

function resizeSVGToFit() {
    const controls = document.getElementById('controls');
    const container = document.getElementById('canvasContainer');
    const toolbarHeight = controls.offsetHeight;
    const availableHeight = window.innerHeight - toolbarHeight - 24; // 24px for margin
    const availableWidth = container.offsetWidth || window.innerWidth;
    const size = Math.min(availableWidth, availableHeight);
    svg.setAttribute('width', size);
    svg.setAttribute('height', size);
    svg.setAttribute('viewBox', `0 0 ${size} ${size}`);
    svg.style.display = 'block';
    setupBgAndBorderRects();
    updateBgAndBorder();
}
// Removed second DOMContentLoaded handler
window.addEventListener('resize', () => {
    resizeSVGToFit();
    drawSymmetryAxes();
});

function drawSymmetryAxes() {
    // Remove old axes
    Array.from(svg.querySelectorAll('.symmetry-axis')).forEach(el => el.remove());
    const showAxes = document.getElementById('showAxes');
    const symmetryAxes = document.getElementById('symmetryAxes');
    if (!showAxes || !showAxes.checked || !symmetryAxes) return;
    const axes = parseInt(symmetryAxes.value);
    if (!axes || axes < 2) return;
    const center = getSVGCenter();
    // Use radius as half the minimum of width/height
    let width = 800, height = 800;
    if (svg.viewBox && svg.viewBox.baseVal && svg.viewBox.baseVal.width) {
        width = svg.viewBox.baseVal.width;
        height = svg.viewBox.baseVal.height;
    } else if (svg.width && svg.height) {
        width = svg.width.baseVal.value;
        height = svg.height.baseVal.value;
    } else {
        const rect = svg.getBoundingClientRect();
        width = rect.width;
        height = rect.height;
    }
    const r = Math.min(width, height) / 2;
    for (let i = 0; i < axes; i++) {
        const angle = (2 * Math.PI * i) / axes;
        const x2 = center.x + r * Math.cos(angle);
        const y2 = center.y + r * Math.sin(angle);
        const axis = createSVGElement('line', {
            x1: center.x, y1: center.y, x2: x2, y2: y2,
            stroke: '#888',
            'stroke-width': 1,
            'stroke-dasharray': '6 6',
            class: 'symmetry-axis'
        });
        svg.insertBefore(axis, svg.firstChild);
    }
}

// Only border shape controls remain; bgColor, bgShapeType, etc. are obsolete and removed.
// (All event listeners and DOM accesses are now inside DOMContentLoaded handler above.)


function selectShape(shape) {
    if (selectedShape) deselectShape();
    selectedShape = shape;
    shape.classList.add('selected');
    // Update controls to match shape
    if (shape.hasAttribute('stroke')) strokeColor.value = shape.getAttribute('stroke');
    if (shape.hasAttribute('fill')) fillColor.value = shape.getAttribute('fill');
    if (shape.hasAttribute('stroke-width')) strokeWidth.value = shape.getAttribute('stroke-width');
}

function deselectShape() {
    if (selectedShape) selectedShape.classList.remove('selected');
    selectedShape = null;
}

function updateSelectedShapeStyle() {
    if (!selectedShape) return;
    if (selectedShape.hasAttribute('stroke')) selectedShape.setAttribute('stroke', strokeColor.value);
    if (selectedShape.hasAttribute('fill')) selectedShape.setAttribute('fill', fillColor.value);
    if (selectedShape.hasAttribute('stroke-width')) selectedShape.setAttribute('stroke-width', strokeWidth.value);
}





let regularPolySides = 6;
let currentShapeStyle = {};
let undoStack = [];
let redoStack = [];

// --- Function declarations (move all above DOMContentLoaded) ---
function saveHistory() {
    const shapes = Array.from(svg.children).filter(el => !el.classList.contains('bg-rect') && !el.classList.contains('border-rect'));
    const snapshot = shapes.map(el => el.outerHTML);
    if (undoStack.length === 0 || JSON.stringify(undoStack[undoStack.length - 1]) !== JSON.stringify(snapshot)) {
        undoStack.push(snapshot);
        redoStack = [];
        const children = Array.from(svg.children).map(el => el.tagName + ' ' + el.getAttribute('class'));
        console.log('[saveHistory] New snapshot saved. Undo stack length:', undoStack.length, 'SVG children:', children, 'Stack:', JSON.stringify(undoStack));
    } else {
        const children = Array.from(svg.children).map(el => el.tagName + ' ' + el.getAttribute('class'));
        console.log('[saveHistory] Snapshot identical to last. No push. Undo stack length:', undoStack.length, 'SVG children:', children);
    }
}
function restoreHistory(snapshot) {
    Array.from(svg.children).forEach(el => {
        if (!el.classList.contains('bg-rect') && !el.classList.contains('border-rect')) el.remove();
    });
    snapshot.forEach(html => {
        const temp = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
        temp.innerHTML = html;
        const node = temp.firstElementChild;
        if (node) svg.appendChild(node);
    });
    setupBgAndBorderRects();
    updateBgAndBorder();
    const children = Array.from(svg.children).map(el => el.tagName + ' ' + el.getAttribute('class'));
    console.log('[restoreHistory] SVG children after restore:', children, 'Snapshot:', snapshot);
}
function undo() {
    if (undoStack.length <= 1) return;
    const current = undoStack.pop();
    redoStack.push(current);
    const prev = undoStack[undoStack.length - 1];
    restoreHistory(prev);
    deselectShape();
}
function redo() {
    if (!redoStack.length) return;
    const next = redoStack.pop();
    undoStack.push(next);
    restoreHistory(next);
    deselectShape();
}
// Always-visible input for regular polygon sides
const regularPolySidesInput = document.getElementById('regularPolySides');
if (regularPolySidesInput) {
    regularPolySidesInput.addEventListener('input', e => {
        regularPolySides = Math.max(3, Math.floor(e.target.value));
    });
}

function getSVGCenter() {
    // Computes the true center of the SVG based on viewBox or width/height
    let width = 800, height = 800;
    if (svg.viewBox && svg.viewBox.baseVal && svg.viewBox.baseVal.width) {
        width = svg.viewBox.baseVal.width;
        height = svg.viewBox.baseVal.height;
    } else if (svg.width && svg.height) {
        width = svg.width.baseVal.value;
        height = svg.height.baseVal.value;
    } else {
        const rect = svg.getBoundingClientRect();
        width = rect.width;
        height = rect.height;
    }
    return { x: width / 2, y: height / 2 };
}

function getSymmetryPoints(x, y, cx, cy, axes) {
    // Returns an array of points rotated around the center
    const points = [];
    const angleStep = (2 * Math.PI) / axes;
    for (let i = 0; i < axes; i++) {
        const angle = angleStep * i;
        const dx = x - cx;
        const dy = y - cy;
        const rx = Math.cos(angle) * dx - Math.sin(angle) * dy + cx;
        const ry = Math.sin(angle) * dx + Math.cos(angle) * dy + cy;
        points.push({ x: rx, y: ry });
    }
    return points;
}

function createSVGElement(tag, attrs) {
    const el = document.createElementNS('http://www.w3.org/2000/svg', tag);
    for (const k in attrs) {
        el.setAttribute(k, attrs[k]);
    }
    return el;
}

// --- Drawing Tool Selection ---
// Handles switching between drawing tools and showing/hiding their controls.
function setActiveTool(tool) {
    console.log('[DIAG] setActiveTool called with', tool);
    currentTool = tool;
    Array.from(controls.querySelectorAll('button[data-tool]')).forEach(btn => {
        btn.classList.toggle('active', btn.dataset.tool === tool);
    });
    // --- Commit in-progress weird polygon if needed ---
    if (weirdPolygonDrawing && weirdPolygonPoints.length > 1) {
        // Ensure the last mouse position is included if not already
        if (typeof mousePos !== 'undefined' && mousePos && weirdPolygonPoints.length > 0) {
            const last = weirdPolygonPoints[weirdPolygonPoints.length - 1];
            if (last.x !== mousePos.x || last.y !== mousePos.y) {
                weirdPolygonPoints.push({x: mousePos.x, y: mousePos.y});
            }
        }
        commitWeirdPolygon([...weirdPolygonPoints], currentShapeStyle);
    }
    // --- Commit in-progress irregular polygon if needed ---
    if (irregularPolygonDrawing && irregularPolygonPoints.length > 2) {
        commitSymmetricIrregularPolygon(irregularPolygonPoints, currentShapeStyle);
    }

    // Reset all tool-specific state
    drawing = false;
    startPoint = null;
    currentPath = null;
    weirdPolygonPoints = [];
    weirdPolygonDrawing = false;
    irregularPolygonPoints = [];
    irregularPolygonDrawing = false;
    // Only clear currentPath for non-freehand tools
    if (currentTool !== 'freehand') currentPath = null;
    // Only clear preview shapes, not committed shapes
    Array.from(svg.querySelectorAll('.preview')).forEach(el => el.remove());
    drawPreview(); // Clear any preview
}


// --- Drawing Tool Button Event Handling ---
// (drawing logic is now only inside svg.addEventListener('mousedown', ...) in DOMContentLoaded)

// ESCAPE KEY: Finish (commit) irregular polygon if drawing
window.addEventListener('keydown', e => {
    if (e.key === 'Escape' && irregularPolygonDrawing) {
        if (irregularPolygonPoints.length > 2) {
            commitSymmetricIrregularPolygon(irregularPolygonPoints, currentShapeStyle);
        }
        irregularPolygonPoints = [];
        irregularPolygonDrawing = false;
        drawPreview();
    }
});

// --- Main Drawing Logic: Mouse Up ---
svg.addEventListener('mouseup', e => {
    console.log('[mouseup] tool:', currentTool, 'drawing:', drawing);

    if (!drawing) return;
    drawing = false;
    const { x, y } = getSVGCoords(e);
    if (currentTool === 'freehand' && currentPath) {
        currentPath.push({ x, y });
        console.log('[mouseup] committing freehand currentPath:', currentPath);
        commitFreehand(currentPath, currentShapeStyle);
        currentPath = null;
    } else if (currentTool === 'polygon-regular' && startPoint) {
        commitRegularPolygon(startPoint, { x, y }, regularPolySides, currentShapeStyle);
    } else if (currentTool === 'line') {
        commitLine(startPoint, { x, y }, currentShapeStyle);
    } else if (currentTool === 'ellipse') {
        commitEllipse(startPoint, { x, y }, currentShapeStyle);
    }
    // For irregular polygon: use double-click to finish
});

// --- Main Drawing Logic: Double Click (for polygons) ---
svg.addEventListener('dblclick', e => {
    if (currentTool === 'weird-polygon' && weirdPolygonDrawing) {
        if (weirdPolygonPoints.length > 1) {
            // Ensure the last mouse position is included if not already
            if (typeof mousePos !== 'undefined' && mousePos && weirdPolygonPoints.length > 0) {
                const last = weirdPolygonPoints[weirdPolygonPoints.length - 1];
                if (last.x !== mousePos.x || last.y !== mousePos.y) {
                    weirdPolygonPoints.push({x: mousePos.x, y: mousePos.y});
                }
            }
            commitWeirdPolygon([...weirdPolygonPoints], currentShapeStyle);
        }
        weirdPolygonPoints = [];
        drawPreview();
    } else if (currentTool === 'polygon-irregular' && irregularPolygonDrawing) {
        // Double-click to close and commit with symmetry
        if (irregularPolygonPoints.length > 2) {
            commitSymmetricIrregularPolygon(irregularPolygonPoints, currentShapeStyle);
        }
        irregularPolygonPoints = [];
        irregularPolygonDrawing = false;
        drawPreview();
    }
});

// --- Drawing Preview for All Tools ---

function commitWeirdPolygon(points, style) {
    console.log('[commitWeirdPolygon] called with', points, style);
    if (points.length < 2) return;
    const axes = parseInt(symmetryAxes.value);
    const center = getSVGCenter();
    drawSymmetricWeirdPolygon(points, axes, center, false, style);
    saveHistory();
    if (AutoFillColor) setRandomFillColor();
    console.log('[commitWeirdPolygon] finished, called saveHistory');
}

function drawPreview(mousePos) {
    console.log('[drawPreview] tool:', currentTool, 'drawing:', drawing, 'currentPath:', currentPath, 'mousePos:', mousePos);
    // Remove previous preview
    Array.from(svg.querySelectorAll('.preview')).forEach(el => el.remove());
    const axes = parseInt(symmetryAxes.value);
    const center = getSVGCenter();
    if (currentTool === 'freehand' && currentPath) {
        console.log('[drawPreview] drawing freehand preview path');
        drawSymmetricPaths(currentPath, axes, center, true, currentShapeStyle);
    } else if ((currentTool === 'line' || currentTool === 'ellipse') && drawing && startPoint && mousePos) {
        if (currentTool === 'line') {
            drawSymmetricLine(startPoint, mousePos, axes, center, true, currentShapeStyle);
        } else {
            drawSymmetricEllipse(startPoint, mousePos, axes, center, true, currentShapeStyle);
        }
    } else if (currentTool === 'weird-polygon' && weirdPolygonDrawing && weirdPolygonPoints.length) {
        let points = [...weirdPolygonPoints];
        if (mousePos) points.push(mousePos);
        drawSymmetricWeirdPolygon(points, axes, center, true, currentShapeStyle);
    } else if (currentTool === 'polygon-irregular' && irregularPolygonDrawing && irregularPolygonPoints.length) {
        let points = [...irregularPolygonPoints];
        if (mousePos) points.push(mousePos);
        drawSymmetricIrregularPolygon(points, axes, center, true, currentShapeStyle);
        // Draw a small preview circle at the first point to indicate closing area
        const first = irregularPolygonPoints[0];
        const circle = createSVGElement('circle', {
            cx: first.x,
            cy: first.y,
            r: 7,
            fill: 'none',
            stroke: '#00ff00',
            'stroke-width': 2,
            class: 'preview'
        });
        svg.appendChild(circle);
        // The following code draws a path for irregular polygons only. It should NOT run for 'polygon-regular'.
        // (No code here for regular polygon)
    } else if (currentTool === 'polygon-regular' && drawing && startPoint && mousePos) {
        console.log('[drawPreview] drawing regular polygon preview, regularPolySides:', regularPolySides);
        if (regularPolySides >= 3) {
            drawSymmetricRegularPolygon(startPoint, mousePos, regularPolySides, axes, center, true, currentShapeStyle);
        } else {
            console.log('[drawPreview] NOT drawing: regularPolySides < 3');
        }
    }
}

function commitFreehand(points, style) {
    const axes = parseInt(symmetryAxes.value);
    const center = getSVGCenter();
    drawSymmetricPaths(points, axes, center, false, style);
    saveHistory();
    if (AutoFillColor) setRandomFillColor();
}

function commitLine(p1, p2, style) {
    console.log('[commitLine] called with', p1, p2, style);
    // Only draw and save if points are different
    if (p1.x !== p2.x || p1.y !== p2.y) {
        const axes = parseInt(symmetryAxes.value);
        const center = getSVGCenter();
        drawSymmetricLine(p1, p2, axes, center, false, style);
        saveHistory();
    } else {
        console.log('[commitLine] Skipped: start and end points are identical');
    }
}

function commitEllipse(p1, p2, style) {
    const axes = parseInt(symmetryAxes.value);
    const center = getSVGCenter();
    drawSymmetricEllipse(p1, p2, axes, center, false, style);
    saveHistory();
    if (AutoFillColor) setRandomFillColor();
}

// Commit the drawn irregular polygon as a filled SVG path
// Commit the drawn irregular polygon as a filled SVG path with symmetry
function commitSymmetricIrregularPolygon(points, style) {
    if (points.length < 3) return;
    const axes = parseInt(symmetryAxes.value);
    const center = getSVGCenter();
    drawSymmetricIrregularPolygon(points, axes, center, false, style);
    saveHistory();
}

function commitRegularPolygon(centerPt, edgePt, sides, style) {
    const axes = parseInt(symmetryAxes.value);
    const center = getSVGCenter();
    drawSymmetricRegularPolygon(centerPt, edgePt, sides, axes, center, false, style);
    saveHistory();
    if (AutoFillColor) setRandomFillColor();
}

function drawSymmetricPaths(points, axes, center, preview, style) {
    for (let i = 0; i < axes; i++) {
        const rotated = points.map(pt => rotatePoint(pt, center, i * 2 * Math.PI / axes));
        const pathData = rotated.map((pt, j) => (j === 0 ? `M${pt.x},${pt.y}` : `L${pt.x},${pt.y}`)).join(' ');
        const path = createSVGElement('path', {
            d: pathData,
            stroke: style?.stroke || strokeColor.value,
            'stroke-width': style?.strokeWidth || strokeWidth.value,
            fill: 'none',
            'stroke-linecap': 'round',
            'stroke-linejoin': 'round',
            class: preview ? 'preview' : ''
        });
        svg.appendChild(path);
    }
}

function drawSymmetricLine(p1, p2, axes, center, preview, style) {
    for (let i = 0; i < axes; i++) {
        const rp1 = rotatePoint(p1, center, i * 2 * Math.PI / axes);
        const rp2 = rotatePoint(p2, center, i * 2 * Math.PI / axes);
        const line = createSVGElement('line', {
            x1: rp1.x, y1: rp1.y, x2: rp2.x, y2: rp2.y,
            stroke: style?.stroke || strokeColor.value,
            'stroke-width': style?.strokeWidth || strokeWidth.value,
            class: preview ? 'preview' : ''
        });
        svg.appendChild(line);
    }
}

function drawSymmetricEllipse(p1, p2, axes, center, preview, style) {
    const rx = Math.abs(p2.x - p1.x) / 2;
    const ry = Math.abs(p2.y - p1.y) / 2;
    const cx = (p1.x + p2.x) / 2;
    const cy = (p1.y + p2.y) / 2;
    for (let i = 0; i < axes; i++) {
        const rc = rotatePoint({ x: cx, y: cy }, center, i * 2 * Math.PI / axes);
        // Calculate the angle from the center to the ellipse center
        const angleRad = Math.atan2(rc.y - center.y, rc.x - center.x);
        const angleDeg = angleRad * 180 / Math.PI;
        const ellipse = createSVGElement('ellipse', {
            cx: rc.x, cy: rc.y, rx, ry,
            stroke: style?.stroke || strokeColor.value,
            'stroke-width': style?.strokeWidth || strokeWidth.value,
            fill: style?.fill || fillColor.value,
            class: preview ? 'preview' : '',
            transform: `rotate(${angleDeg},${rc.x},${rc.y})`
        });
        svg.appendChild(ellipse);
    }
}

function drawSymmetricWeirdPolygon(points, axes, center, preview, style) {
    if (points.length < 2) return;
    for (let i = 0; i < axes; i++) {
        const rotated = points.map(pt => rotatePoint(pt, center, i * 2 * Math.PI / axes));
        const pathData = rotated.map((pt, j) => (j === 0 ? `M${pt.x},${pt.y}` : `L${pt.x},${pt.y}`)).join(' ') + ' Z';
        const poly = createSVGElement('path', {
            d: pathData,
            stroke: style?.stroke || strokeColor.value,
            'stroke-width': style?.strokeWidth || strokeWidth.value,
            fill: style?.fill || fillColor.value,
            'stroke-linecap': 'round',
            'stroke-linejoin': 'round',
            class: preview ? 'preview' : ''
        });
        svg.appendChild(poly);
    }
}

function drawSymmetricIrregularPolygon(points, axes, center, preview, style) {
    if (points.length < 2) return;
    for (let i = 0; i < axes; i++) {
        const rotated = points.map(pt => rotatePoint(pt, center, i * 2 * Math.PI / axes));
        const pathData = rotated.map((pt, j) => (j === 0 ? `M${pt.x},${pt.y}` : `L${pt.x},${pt.y}`)).join(' ') + ' Z';
        const poly = createSVGElement('path', {
            d: pathData,
            stroke: style?.stroke || strokeColor.value,
            'stroke-width': style?.strokeWidth || strokeWidth.value,
            fill: style?.fill || fillColor.value,
            'stroke-linecap': 'round',
            'stroke-linejoin': 'round',
            class: preview ? 'preview' : ''
        });
        svg.appendChild(poly);
    }
}

function drawSymmetricRegularPolygon(centerPt, edgePt, sides, axes, center, preview, style) {
    console.log('[drawSymmetricRegularPolygon] sides:', sides);
    if (sides < 3) return;
    // Calculate radius
    const dx = edgePt.x - centerPt.x;
    const dy = edgePt.y - centerPt.y;
    const radius = Math.sqrt(dx * dx + dy * dy);
    const angle0 = Math.atan2(dy, dx);
    for (let i = 0; i < axes; i++) {
        const polyPoints = [];
        for (let j = 0; j < sides; j++) {
            const angle = angle0 + j * 2 * Math.PI / sides;
            polyPoints.push({
                x: centerPt.x + Math.cos(angle) * radius,
                y: centerPt.y + Math.sin(angle) * radius
            });
        }
        const rotatedPoly = polyPoints.map(pt => rotatePoint(pt, center, i * 2 * Math.PI / axes));
        const pathData = rotatedPoly.map((pt, j) => (j === 0 ? `M${pt.x},${pt.y}` : `L${pt.x},${pt.y}`)).join(' ') + ' Z';
        const poly = createSVGElement('path', {
            d: pathData,
            stroke: preview ? '#ff00ff' : (style?.stroke || strokeColor.value),
            'stroke-width': style?.strokeWidth || strokeWidth.value,
            fill: style?.fill || fillColor.value,
            'stroke-linecap': 'round',
            'stroke-linejoin': 'round',
            class: preview ? 'preview' : ''
        });
        svg.appendChild(poly);
    }
}

function rotatePoint(pt, center, angle) {
    const dx = pt.x - center.x;
    const dy = pt.y - center.y;
    const rx = Math.cos(angle) * dx - Math.sin(angle) * dy + center.x;
    const ry = Math.sin(angle) * dx + Math.cos(angle) * dy + center.y;
    return { x: rx, y: ry };
}

clearBtn.addEventListener('click', () => {
    Array.from(svg.children).forEach(el => el.remove());
    saveHistory();
});

downloadBtn.addEventListener('click', () => {
    const serializer = new XMLSerializer();
    let source = serializer.serializeToString(svg);
    // Add XML declaration and SVG namespace if missing
    if (!source.match(/^<\?xml/)) {
        source = '<?xml version="1.0" standalone="no"?>\r\n' + source;
    }
    const url = 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(source);
    const a = document.createElement('a');
    a.href = url;
    a.download = 'mandala.svg';
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
});

// Initial polygon sides state
if (borderShapeType.value === 'polygon') {
    borderPolySides.disabled = false;
    borderPolySidesLabel.style.opacity = 1;
} else {
    borderPolySides.disabled = true;
    borderPolySidesLabel.style.opacity = 0.5;
}
// Initial tool highlight
setActiveTool('freehand');