/* V7 Audio Module */
import { state } from './state.js';

let audioContext = null;
let analyser = null;
let dataArray = null;

export function initAudio() {
    if (audioContext) return;

    try {
        audioContext = new (window.AudioContext || window.webkitAudioContext)();
        analyser = audioContext.createAnalyser();
        analyser.fftSize = 64;

        navigator.mediaDevices.getUserMedia({ audio: true })
            .then(stream => {
                const source = audioContext.createMediaStreamSource(stream);
                source.connect(analyser);
                dataArray = new Uint8Array(analyser.frequencyBinCount);
            })
            .catch(err => {
                console.error("Audio Access Denied", err);
                alert("Microphone access denied. Visualizer disabled.");
                state.audioMode = false;
                // Dispatch event to uncheck box? handled by loop checking state
            });
    } catch (e) {
        console.error(e);
    }
}

export function getAudioData() {
    if (!audioContext || !analyser || !state.audioMode) return null;

    analyser.getByteFrequencyData(dataArray);

    const avg = dataArray.reduce((p, c) => p + c, 0) / dataArray.length;
    const bass = dataArray[2];

    return { avg, bass };
}

/* V7 Gallery Module */
import { state } from './state.js';

const STORAGE_KEY = 'star_patterns_gallery';

export function savePattern(name, thumbDataUrl) {
    const saved = JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]');
    const pattern = {
        id: Date.now(),
        name: name || 'Untitled Pattern',
        date: new Date().toLocaleDateString(),
        thumbnail: thumbDataUrl,
        state: { ...state } // Clone state
    };
    saved.unshift(pattern); // Add to top
    localStorage.setItem(STORAGE_KEY, JSON.stringify(saved));
    renderGallery();
}

export function loadPattern(id) {
    const saved = JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]');
    const pattern = saved.find(p => p.id === id);
    if (pattern) {
        // Restore State
        Object.keys(pattern.state).forEach(k => {
            state[k] = pattern.state[k];
        });
        return true;
    }
    return false;
}

export function deletePattern(id) {
    let saved = JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]');
    saved = saved.filter(p => p.id !== id);
    localStorage.setItem(STORAGE_KEY, JSON.stringify(saved));
    renderGallery();
}

export function renderGallery() {
    const container = document.getElementById('galleryContainer');
    if (!container) return; // Should exist in HTML

    const saved = JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]');

    if (saved.length === 0) {
        container.innerHTML = '<p style="color:var(--text-secondary); text-align:center;">No saved patterns</p>';
        return;
    }

    container.innerHTML = '';
    saved.forEach(p => {
        const item = document.createElement('div');
        item.className = 'gallery-item';
        item.innerHTML = `
            <img src="${p.thumbnail}" alt="${p.name}">
            <div class="info">
                <span>${p.name}</span>
                <button class="btn-sm delete-btn" data-id="${p.id}">&times;</button>
            </div>
        `;

        // Load click
        item.querySelector('img').addEventListener('click', () => {
            const event = new CustomEvent('loadPattern', { detail: p.id });
            window.dispatchEvent(event);
        });

        // Delete click
        item.querySelector('.delete-btn').addEventListener('click', (e) => {
            e.stopPropagation();
            if (confirm('Delete this pattern?')) deletePattern(p.id);
        });

        container.appendChild(item);
    });
}

/* V9 Fractal Logic */
import { state } from './state.js';
import { drawStarPath } from './shapes.js';
import { getJitter } from './utils.js';

export function drawFractalStar(ctx, rOuter, rInner, depth) {
    if (depth <= 0) return;

    // Draw Main Star at current level
    drawStarPath(ctx, state.spikes, rOuter, rInner, state.curve, state.twist);

    // We only stroke/fill at the leaf level or complex composite?
    // Let's just draw paths. The caller fills/strokes.
    // Actually, to make it visible, we need to recurse at the TIPS (outer points).

    // Calculate tip positions
    const spikes = state.spikes;
    const step = Math.PI / spikes;
    let rot = Math.PI / 2 * 3;

    // We need to iterate coordinates manually here to translate to them
    // This replicates shapes.js logic but just for finding points

    for (let i = 0; i < spikes; i++) {
        // Outer Point (Tip)
        let outerRot = rot + step;
        // Note: shapes.js logic is slightly offset. 
        // Let's rely on standard geometry:
        // Angle = rot

        // Wait, drawStarPath handles the path. 
        // To draw recursive stars, we need to Translate to the tip, Transform, and Draw again.

        let cx = Math.cos(outerRot + step) * rOuter; // shapes.js loop is weird.
        // Let's simplify: Standard Polars.
        // Tip angles are: -PI/2 + (i * 2PI/spikes)

        const angle = -Math.PI / 2 + (i * (Math.PI * 2) / spikes);
        const x = Math.cos(angle) * rOuter;
        const y = Math.sin(angle) * rOuter;

        ctx.save();
        ctx.translate(x, y);
        ctx.scale(0.4, 0.4); // Scale down
        ctx.rotate(angle + Math.PI / 2); // Align?

        // Recurse
        drawFractalStar(ctx, rOuter, rInner, depth - 1);

        ctx.restore();
    }
}

// Alternative: A dedicated recursive render function that handles Fill/Stroke per level?
// It's cleaner to just generate one complex path? 
// No, separate stars look better for snowflakes.

export function renderRecursiveFractal(ctx, w, h, rOuter, rInner) {
    const depth = state.fractalDepth || 0;

    // Helper recursive function
    function recurse(d, rO, rI) {
        if (d <= 0) return;

        // Draw current star
        ctx.beginPath();
        drawStarPath(ctx, state.spikes, rO, rI, state.curve, state.twist);
        ctx.fill();
        if (state.lineWidth > 0) ctx.stroke();

        // If we want recursion at tips
        const angleStep = (Math.PI * 2) / state.spikes;

        for (let i = 0; i < state.spikes; i++) {
            const angle = -Math.PI / 2 + (i * angleStep);
            // The tip position
            const startAngle = (Math.PI / 2 * 3); // shapes.js start
            // shapes.js logic is: outer point is at `rot + step`
            // i=0: outerRot = start + PI/spikes. 

            // Let's calculate tip x,y based on shapes.js logic to be consistent
            let rot = startAngle + (i * angleStep);
            let outerRot = rot + (Math.PI / state.spikes);

            let tipX = Math.cos(outerRot) * rO;
            let tipY = Math.sin(outerRot) * rO;

            ctx.save();
            ctx.translate(tipX, tipY);
            ctx.scale(0.4, 0.4);
            ctx.rotate(outerRot + Math.PI / 2); // Align with spoke

            recurse(d - 1, rO, rI);

            ctx.restore();
        }
    }

    // Start recursion
    // We need loop for main star? No, recurse handles it.
    // Center logic handled by renderer.js transform.
    recurse(depth, rOuter, rInner);
}