/* V7 State Manager */
export const state = {
    // Geometry
    spikes: 5,
    outerRadius: 150,
    innerRadius: 75,
    curve: 0,
    twist: 0,
    lineWidth: 5,

    // Effects
    glow: 0,
    jitter: 0,
    speed: 0,
    rotation: 0,

    // Modes
    wallpaperMode: false,
    cols: 3,
    rows: 3,

    kaleidoscopeMode: false,
    segments: 6,

    audioMode: false,

    // V8 Unique Features
    pulseEnabled: false,
    pulseSpeed: 5,
    rainbowMode: false,
    parallaxEnabled: false,
    mouseX: 0,
    mouseY: 0,

    // V9 Expansion
    fractalMode: false,
    fractalDepth: 2,

    // V11 Visual FX
    trailEnabled: false,
    trailStrength: 0.1,
    echoEnabled: false,
    echoCount: 3,

    // V12 Quantum Effects
    gravityEnabled: false,
    orbitEnabled: false,
    chromaticAberration: false,
    holographicMode: false,

    // V13 Neural Canvas
    glitchEnabled: false,
    scanlinesEnabled: false,
    vignetteEnabled: false,
    bloomEnabled: false,
    pixelateEnabled: false,
    invertEnabled: false,
    morphEnabled: false,
    colorShiftEnabled: false,
    mandalaMode: false,
    spiralMode: false,
    tessellationMode: false,
    mirrorMode: false,

    // V14 Quantum Nexus
    depthFieldEnabled: false,
    warpFieldEnabled: false,
    chromaticAberrationV2: false,
    edgeGlowEnabled: false,
    waveDistortEnabled: false,
    colorGradingEnabled: false,
    neuralPatternMode: false,
    lSystemMode: false,
    voronoiMode: false,
    timelineEnabled: false,

    // Particles (New)
    particlesEnabled: true,

    // Colors
    fillColor: '#6366f1',
    fillColor2: '#ec4899',
    useGradient: true,
    strokeColor: '#ffffff',
    bgColor: '#000000',

    // Internal
    _gradId: null
};

// Simple Observer Pattern for reactivity if needed,
// but for now we just export the object.
// UI updates State, Renderer reads State.

/* V7 Particle System */
import { state } from './state.js';

let particles = [];
const PARTICLE_COUNT = 50;

class Particle {
    constructor(w, h) {
        this.reset(w, h);
    }

    reset(w, h) {
        this.x = Math.random() * w;
        this.y = Math.random() * h;
        this.z = Math.random() * 2 + 0.5; // depth
        this.size = Math.random() * 2;
        this.vx = (Math.random() - 0.5) * 0.5;
        this.vy = (Math.random() - 0.5) * 0.5;
        this.alpha = Math.random() * 0.5 + 0.1;
    }

    update(w, h) {
        this.x += this.vx * this.z;
        this.y += this.vy * this.z;

        // Wrap
        if (this.x < 0) this.x = w;
        if (this.x > w) this.x = 0;
        if (this.y < 0) this.y = h;
        if (this.y > h) this.y = 0;
    }

    draw(ctx) {
        ctx.fillStyle = `rgba(255, 255, 255, ${this.alpha})`;
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
        ctx.fill();
    }
}

export function initParticles(w, h) {
    particles = [];
    for (let i = 0; i < PARTICLE_COUNT; i++) {
        particles.push(new Particle(w, h));
    }
}

export function drawParticles(ctx, w, h) {
    if (!state.particlesEnabled) return;

    if (particles.length === 0) initParticles(w, h); // lazy init

    particles.forEach(p => {
        p.update(w, h);
        p.draw(ctx);
    });
}

/* V14 Shaders Module - Advanced Shader-like Effects */
import { state } from './state.js';

/**
 * Apply all enabled shader effects
 */
export function applyShaderEffects(ctx, canvas) {
    if (state.depthFieldEnabled) {
        applyDepthField(ctx, canvas);
    }

    if (state.warpFieldEnabled) {
        applyWarpField(ctx, canvas);
    }

    if (state.chromaticAberrationV2) {
        applyChromaticAberration(ctx, canvas);
    }

    if (state.edgeGlowEnabled) {
        applyEdgeGlow(ctx, canvas);
    }

    if (state.waveDistortEnabled) {
        applyWaveDistortion(ctx, canvas);
    }

    if (state.colorGradingEnabled) {
        applyColorGrading(ctx, canvas);
    }
}

/**
 * Depth Field - Simulated depth of field blur
 */
function applyDepthField(ctx, canvas) {
    const cx = canvas.width / 2;
    const cy = canvas.height / 2;
    const maxDist = Math.sqrt(cx * cx + cy * cy);

    // Simple radial blur simulation
    ctx.save();
    ctx.globalCompositeOperation = 'multiply';

    const gradient = ctx.createRadialGradient(cx, cy, 0, cx, cy, maxDist);
    gradient.addColorStop(0, 'rgba(255,255,255,1)');
    gradient.addColorStop(0.5, 'rgba(255,255,255,0.9)');
    gradient.addColorStop(1, 'rgba(200,200,200,0.7)');

    ctx.fillStyle = gradient;
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    ctx.restore();
}

/**
 * Warp Field - Space-time distortion
 */
function applyWarpField(ctx, canvas) {
    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    const data = imageData.data;
    const tempCanvas = document.createElement('canvas');
    tempCanvas.width = canvas.width;
    tempCanvas.height = canvas.height;
    const tempCtx = tempCanvas.getContext('2d');
    tempCtx.putImageData(imageData, 0, 0);

    ctx.clearRect(0, 0, canvas.width, canvas.height);

    const cx = canvas.width / 2;
    const cy = canvas.height / 2;
    const strength = 30;

    for (let y = 0; y < canvas.height; y += 2) {
        for (let x = 0; x < canvas.width; x += 2) {
            const dx = x - cx;
            const dy = y - cy;
            const dist = Math.sqrt(dx * dx + dy * dy);
            const angle = Math.atan2(dy, dx);

            const warp = strength / (dist + 1);
            const newX = x + Math.cos(angle) * warp;
            const newY = y + Math.sin(angle) * warp;

            if (newX >= 0 && newX < canvas.width && newY >= 0 && newY < canvas.height) {
                const pixel = tempCtx.getImageData(newX, newY, 1, 1);
                ctx.putImageData(pixel, x, y);
            }
        }
    }
}

/**
 * Enhanced Chromatic Aberration
 */
function applyChromaticAberration(ctx, canvas) {
    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    const data = imageData.data;
    const offset = 5;

    // Shift channels
    for (let i = 0; i < data.length; i += 4) {
        const rIdx = i + offset * 4;
        const bIdx = i - offset * 4;

        if (rIdx < data.length) {
            data[i] = data[rIdx]; // R from offset
        }
        if (bIdx >= 0) {
            data[i + 2] = data[bIdx + 2]; // B from -offset
        }
    }

    ctx.putImageData(imageData, 0, 0);
}

/**
 * Edge Glow - Neon edge detection
 */
function applyEdgeGlow(ctx, canvas) {
    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    const data = imageData.data;
    const w = canvas.width;
    const h = canvas.height;

    // Simple edge detection (Sobel-like)
    const edges = new Uint8ClampedArray(data.length);

    for (let y = 1; y < h - 1; y++) {
        for (let x = 1; x < w - 1; x++) {
            const idx = (y * w + x) * 4;

            // Get surrounding pixels
            const tl = data[((y - 1) * w + (x - 1)) * 4];
            const tr = data[((y - 1) * w + (x + 1)) * 4];
            const bl = data[((y + 1) * w + (x - 1)) * 4];
            const br = data[((y + 1) * w + (x + 1)) * 4];

            const gx = (tr + 2 * data[((y) * w + (x + 1)) * 4] + br) -
                (tl + 2 * data[((y) * w + (x - 1)) * 4] + bl);
            const gy = (bl + 2 * data[((y + 1) * w + x) * 4] + br) -
                (tl + 2 * data[((y - 1) * w + x) * 4] + tr);

            const edge = Math.sqrt(gx * gx + gy * gy);

            if (edge > 50) {
                edges[idx] = 255;     // R
                edges[idx + 1] = 255; // G
                edges[idx + 2] = 255; // B
                edges[idx + 3] = 255; // A
            }
        }
    }

    // Overlay edges with glow
    ctx.save();
    ctx.globalCompositeOperation = 'screen';
    ctx.filter = 'blur(3px)';
    const edgeData = new ImageData(edges, w, h);
    ctx.putImageData(edgeData, 0, 0);
    ctx.filter = 'none';
    ctx.restore();
}

/**
 * Wave Distortion - Sine wave displacement
 */
function applyWaveDistortion(ctx, canvas) {
    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    const tempCanvas = document.createElement('canvas');
    tempCanvas.width = canvas.width;
    tempCanvas.height = canvas.height;
    const tempCtx = tempCanvas.getContext('2d');
    tempCtx.putImageData(imageData, 0, 0);

    ctx.clearRect(0, 0, canvas.width, canvas.height);

    const amplitude = 10;
    const frequency = 0.05;
    const time = Date.now() * 0.001;

    for (let y = 0; y < canvas.height; y++) {
        const offset = Math.sin(y * frequency + time) * amplitude;
        ctx.drawImage(tempCanvas, offset, y, canvas.width, 1, 0, y, canvas.width, 1);
    }
}

/**
 * Color Grading - Professional color correction
 */
function applyColorGrading(ctx, canvas) {
    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    const data = imageData.data;

    // Cinematic color grading (teal and orange)
    for (let i = 0; i < data.length; i += 4) {
        const r = data[i];
        const g = data[i + 1];
        const b = data[i + 2];

        // Boost oranges in highlights
        if (r > 128) {
            data[i] = Math.min(255, r * 1.1);
            data[i + 1] = Math.min(255, g * 0.95);
        }

        // Boost teals in shadows
        if (b > 100 && r < 128) {
            data[i + 1] = Math.min(255, g * 1.05);
            data[i + 2] = Math.min(255, b * 1.1);
        }

        // Increase contrast
        data[i] = ((data[i] - 128) * 1.2) + 128;
        data[i + 1] = ((data[i + 1] - 128) * 1.2) + 128;
        data[i + 2] = ((data[i + 2] - 128) * 1.2) + 128;
    }

    ctx.putImageData(imageData, 0, 0);
}

/* V7 Main Entry Point */
import { state } from './state.js';
import { draw } from './renderer.js';
import { resizeCanvas } from './utils.js';
import { initControls } from './controls.js';
import { renderGallery } from './gallery.js';
import { updateAnimations } from './animations.js';

console.log("V7 Main Module Loaded");

// Initialize immediately (Modules are deferred, so DOM is ready when this runs)
const canvas = document.getElementById('starCanvas');
const ctx = canvas.getContext('2d');
const container = document.getElementById('previewContainer');
const stats = document.getElementById('canvasDims');

if (!canvas || !container) {
    console.error("Critical: Canvas or Container not found!");
} else {
    // Init Modules
    initControls(canvas, ctx);
    renderGallery();

    // Resize & Initial Draw
    function handleResize() {
        resizeCanvas(canvas, container, stats);
        draw(ctx, canvas);
    }

    window.addEventListener('resize', handleResize);

    // Force initial sizing
    handleResize();

    // Animation Loop
    function loop() {
        // Run loop if ANY animation is active
        const shouldAnimate = state.speed > 0 ||
            state.audioMode ||
            state.particlesEnabled ||
            state.morphEnabled ||
            state.colorShiftEnabled ||
            state.pulseEnabled ||
            state.rainbowMode ||
            state.orbitEnabled ||
            state.gravityEnabled ||
            state.trailEnabled;

        if (shouldAnimate) {
            state.rotation += (state.speed * 0.005);
            updateAnimations(); // V13
            draw(ctx, canvas);
            requestAnimationFrame(loop);
        }
    }

    // Start Loop
    loop();

    // Expose Globals for debugging and controls
    window._triggerDraw = () => draw(ctx, canvas);
    window._triggerLoop = () => loop();
    window.state = state;
}