{% extends 'base_templates/nav_layout.html' %}


{% load static %}
{% block content %}

    <style>
        :root {
            --bg: #0b1221;
            --panel: #0f1724;
            --accent: #ffd166;
            --muted: #94a3b8
        }

        html, body {
            height: 100%;
            margin: 0;
            background: linear-gradient(180deg, var(--bg), #071019);
            font-family: Inter, system-ui, Segoe UI, Roboto, Helvetica, Arial
        }

        .app {
            display: grid;
            grid-template-columns:1fr 320px;
            gap: 16px;
            height: 100vh;
            padding: 18px;
            box-sizing: border-box
        }

        .stage {
            background: #01040a;
            border-radius: 12px;
            box-shadow: 0 10px 30px rgba(2, 6, 23, .6);
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden
        }

        canvas {
            image-rendering: pixelated;
            width: 100%;
            height: 100%;
            display: block
        }

        .panel {
            background: var(--panel);
            color: #e6eef8;
            padding: 14px;
            border-radius: 12px;
            display: flex;
            flex-direction: column;
            gap: 12px
        }

        h1 {
            margin: 0;
            font-size: 18px
        }

        .controls {
            display: flex;
            flex-wrap: wrap;
            gap: 8px
        }

        button {
            background: #0b1b2b;
            border: 1px solid rgba(255, 255, 255, .04);
            color: var(--accent);
            padding: 8px 10px;
            border-radius: 8px;
            cursor: pointer
        }

        .tool-list {
            display: grid;
            grid-template-columns:repeat(2, 1fr);
            gap: 8px
        }

        .tool {
            background: linear-gradient(180deg, #0f2536, #071422);
            padding: 10px;
            border-radius: 8px;
            border: 1px solid rgba(255, 255, 255, .03);
            cursor: pointer;
            text-align: center
        }

        .tool.active {
            outline: 2px solid rgba(255, 209, 102, .18)
        }

        .row {
            display: flex;
            gap: 8px;
            align-items: center
        }

        label {
            color: var(--muted);
            font-size: 13px
        }

        input[type=range] {
            width: 100%
        }

        footer {
            margin-top: auto;
            font-size: 13px;
            color: var(--muted)
        }

        .legend {
            display: flex;
            gap: 10px;
            flex-wrap: wrap
        }

        .swatch {
            width: 18px;
            height: 18px;
            border-radius: 4px;
            border: 1px solid rgba(255, 255, 255, .06)
        }

        .muted {
            color: var(--muted)
        }

        .small {
            font-size: 12px
        }
    </style>

    <div class="app">
        <div class="stage">
            <canvas id="canvas"></canvas>
        </div>
        <div class="panel">
            {% include 'base_templates/navbar.html' %}

            <h1 class="text-white">Falling Sand Simulator</h1>
            <div class="row">
                <div class="controls">
                    <button id="playBtn">Pause</button>
                    <button id="clearBtn">Clear</button>
                    <button id="randomBtn">Randomize</button>
                </div>
            </div>

            <div>
                <label class="small">Brush size: <span id="brushSizeLabel">6</span></label>
                <input id="brushSize" type="range" min="1" max="40" value="6">
            </div>

            <div>
                <label class="small">Tool</label>
                <div class="tool-list" id="tools"></div>
            </div>

            <div>
                <label class="small">Simulation speed: <span id="speedLabel">1</span>x</label>
                <input id="speed" type="range" min="0" max="3" step="0.5" value="1">
            </div>

            <div class="legend small">
                <div class="swatch" style="background:#d6a14b"></div>
                <div class="muted">Sand</div>
                <div class="swatch" style="background:#4aa3ff"></div>
                <div class="muted">Water</div>
                <div class="swatch" style="background:#8b8b8b"></div>
                <div class="muted">Wall</div>
                <div class="swatch" style="background:#ff6b6b"></div>
                <div class="muted">Acid</div>
            </div>

            <footer>
                Click & drag to paint. Use right-click to erase. Touch supported.
            </footer>
        </div>
    </div>

    <script>
        // Grid-based falling sand simulator (simple, performant)
        const canvas = document.getElementById('canvas');
        const ctx = canvas.getContext('2d');
        let WIDTH = 300; // logical grid width
        let HEIGHT = 200; // logical grid height
        let scale = 3; // upscaling for display

        function resize() {
            // keep canvas filling stage while maintaining aspect
            const stage = document.querySelector('.stage');
            const rect = stage.getBoundingClientRect();
            // choose scale to fit
            scale = Math.floor(Math.min(rect.width / WIDTH, rect.height / HEIGHT));
            if (scale < 1) scale = 1;
            canvas.width = WIDTH;
            canvas.height = HEIGHT;
            canvas.style.width = (WIDTH * scale) + 'px';
            canvas.style.height = (HEIGHT * scale) + 'px';
        }

        window.addEventListener('resize', resize);
        resize();

        // particle types
        const EMPTY = 0, SAND = 1, WATER = 2, WALL = 3, ACID = 4;
        const colors = {
            [EMPTY]: '#01040a',
            [SAND]: '#d6a14b',
            [WATER]: '#4aa3ff',
            [WALL]: '#8b8b8b',
            [ACID]: '#ff6b6b'
        };

        // grid arrays
        let grid = new Uint8Array(WIDTH * HEIGHT);
        let updated = new Uint8Array(WIDTH * HEIGHT);

        function idx(x, y) {
            return x + y * WIDTH
        }

        // utilities
        function inBounds(x, y) {
            return x >= 0 && y >= 0 && x < WIDTH && y < HEIGHT
        }

        // draw the grid to canvas (pixel-perfect)
        function draw() {
            const image = ctx.createImageData(WIDTH, HEIGHT);
            const data = image.data;
            for (let y = 0; y < HEIGHT; y++) {
                for (let x = 0; x < WIDTH; x++) {
                    const i = idx(x, y);
                    const c = colors[grid[i]] || '#000';
                    const offset = (x + y * WIDTH) * 4;
                    // parse hex
                    data[offset] = parseInt(c.substr(1, 2), 16);
                    data[offset + 1] = parseInt(c.substr(3, 2), 16);
                    data[offset + 2] = parseInt(c.substr(5, 2), 16);
                    data[offset + 3] = 255;
                }
            }
            ctx.putImageData(image, 0, 0);
        }

        // simple physics step
        function step() {
            updated.fill(0);
            // iterate bottom-up for proper falling
            for (let y = HEIGHT - 1; y >= 0; y--) {
                for (let x = 0; x < WIDTH; x++) {
                    const i = idx(x, y);
                    if (updated[i]) continue;
                    const p = grid[i];
                    if (p === SAND) {
                        // try down
                        if (inBounds(x, y + 1) && grid[idx(x, y + 1)] === EMPTY) {
                            grid[idx(x, y + 1)] = SAND;
                            grid[i] = EMPTY;
                            updated[idx(x, y + 1)] = 1;
                        } else {
                            // try down-left or down-right
                            const dir = Math.random() < 0.5 ? -1 : 1;
                            if (inBounds(x + dir, y + 1) && grid[idx(x + dir, y + 1)] === EMPTY) {
                                grid[idx(x + dir, y + 1)] = SAND;
                                grid[i] = EMPTY;
                                updated[idx(x + dir, y + 1)] = 1;
                            } else {
                                // try slide sideways
                                if (inBounds(x - 1, y) && grid[idx(x - 1, y)] === EMPTY && Math.random() < 0.5) {
                                    grid[idx(x - 1, y)] = SAND;
                                    grid[i] = EMPTY;
                                    updated[idx(x - 1, y)] = 1;
                                } else if (inBounds(x + 1, y) && grid[idx(x + 1, y)] === EMPTY) {
                                    grid[idx(x + 1, y)] = SAND;
                                    grid[i] = EMPTY;
                                    updated[idx(x + 1, y)] = 1;
                                } else {
                                    updated[i] = 1; // settled
                                }
                            }
                        }
                    } else if (p === WATER) {
                        // water prefers down then sideways
                        if (inBounds(x, y + 1) && grid[idx(x, y + 1)] === EMPTY) {
                            grid[idx(x, y + 1)] = WATER;
                            grid[i] = EMPTY;
                            updated[idx(x, y + 1)] = 1;
                        } else {
                            // try left or right randomly
                            const r = Math.random();
                            if (r < 0.45 && inBounds(x - 1, y) && grid[idx(x - 1, y)] === EMPTY) {
                                grid[idx(x - 1, y)] = WATER;
                                grid[i] = EMPTY;
                                updated[idx(x - 1, y)] = 1;
                            } else if (r < 0.9 && inBounds(x + 1, y) && grid[idx(x + 1, y)] === EMPTY) {
                                grid[idx(x + 1, y)] = WATER;
                                grid[i] = EMPTY;
                                updated[idx(x + 1, y)] = 1;
                            } else updated[i] = 1;
                        }
                    } else if (p === ACID) {
                        // acid falls like water but eats walls and sand
                        if (inBounds(x, y + 1) && (grid[idx(x, y + 1)] === EMPTY || grid[idx(x, y + 1)] === WALL || grid[idx(x, y + 1)] === SAND)) {
                            const target = idx(x, y + 1);
                            if (grid[target] === WALL || grid[target] === SAND) grid[target] = ACID;
                            else grid[target] = ACID;
                            grid[i] = EMPTY;
                            updated[target] = 1;
                        } else {
                            // sideways
                            const r = Math.random();
                            const left = idx(x - 1, y), right = idx(x + 1, y);
                            if (r < 0.45 && inBounds(x - 1, y) && (grid[left] === EMPTY || grid[left] === WALL || grid[left] === SAND)) {
                                if (grid[left] === WALL || grid[left] === SAND) grid[left] = ACID; else grid[left] = ACID;
                                grid[i] = EMPTY;
                                updated[left] = 1;
                            } else if (r < 0.9 && inBounds(x + 1, y) && (grid[right] === EMPTY || grid[right] === WALL || grid[right] === SAND)) {
                                if (grid[right] === WALL || grid[right] === SAND) grid[right] = ACID; else grid[right] = ACID;
                                grid[i] = EMPTY;
                                updated[right] = 1;
                            } else updated[i] = 1;
                        }
                    } else {
                        updated[i] = 1;
                    }
                }
            }
        }

        // controls
        const tools = [
            {id: SAND, name: 'Sand'},
            {id: WATER, name: 'Water'},
            {id: WALL, name: 'Wall'},
            {id: ACID, name: 'Acid'},
            {id: EMPTY, name: 'Eraser'}
        ];
        let currentTool = SAND;
        let brush = 6;
        let running = true;
        let simSpeed = 1;

        const toolsEl = document.getElementById('tools');

        function makeTools() {
            tools.forEach(t => {
                const el = document.createElement('div');
                el.className = 'tool';
                el.textContent = t.name;
                el.onclick = () => {
                    currentTool = t.id;
                    document.querySelectorAll('.tool').forEach(n => n.classList.remove('active'));
                    el.classList.add('active');
                }
                toolsEl.appendChild(el);
                if (t.id === currentTool) el.classList.add('active');
            })
        }

        makeTools();

        // input handling
        let mouseDown = false;
        let rightDown = false;
        let lastPos = null;

        function applyBrush(cx, cy, tool) {
            const r = brush;
            for (let dy = -r; dy <= r; dy++) {
                for (let dx = -r; dx <= r; dx++) {
                    if (dx * dx + dy * dy > r * r) continue;
                    const x = Math.floor(cx + dx);
                    const y = Math.floor(cy + dy);
                    if (!inBounds(x, y)) continue;
                    grid[idx(x, y)] = tool;
                }
            }
        }

        function getCanvasPos(e) {
            const rect = canvas.getBoundingClientRect();
            const clientX = e.touches ? e.touches[0].clientX : e.clientX;
            const clientY = e.touches ? e.touches[0].clientY : e.clientY;
            const x = Math.floor((clientX - rect.left) / scale);
            const y = Math.floor((clientY - rect.top) / scale);
            return {x, y};
        }

        canvas.addEventListener('pointerdown', (ev) => {
            ev.preventDefault();
            const pos = getCanvasPos(ev);
            mouseDown = true;
            rightDown = (ev.button === 2 || ev.pointerType === 'touch' && ev.buttons === 2);
            lastPos = pos;
            const tool = (ev.button === 2) ? EMPTY : currentTool;
            applyBrush(pos.x, pos.y, tool);
        });
        canvas.addEventListener('pointermove', (ev) => {
            if (!mouseDown) return;
            const pos = getCanvasPos(ev);
            // draw line between lastPos and pos
            const dx = pos.x - lastPos.x;
            const dy = pos.y - lastPos.y;
            const steps = Math.max(Math.abs(dx), Math.abs(dy), 1);
            for (let i = 0; i <= steps; i++) {
                const t = i / steps;
                const ix = Math.round(lastPos.x + dx * t);
                const iy = Math.round(lastPos.y + dy * t);
                applyBrush(ix, iy, ev.button === 2 ? EMPTY : currentTool);
            }
            lastPos = pos;
        });
        window.addEventListener('pointerup', () => {
            mouseDown = false;
            lastPos = null
        });
        canvas.addEventListener('contextmenu', e => e.preventDefault());

        // UI wiring
        const playBtn = document.getElementById('playBtn');
        const clearBtn = document.getElementById('clearBtn');
        const randomBtn = document.getElementById('randomBtn');
        const brushSizeInput = document.getElementById('brushSize');
        const brushSizeLabel = document.getElementById('brushSizeLabel');
        const speedInput = document.getElementById('speed');
        const speedLabel = document.getElementById('speedLabel');

        playBtn.onclick = () => {
            running = !running;
            playBtn.textContent = running ? 'Pause' : 'Resume';
        }
        clearBtn.onclick = () => {
            grid.fill(EMPTY);
            draw();
        }
        randomBtn.onclick = () => {
            for (let i = 0; i < grid.length; i++) grid[i] = Math.random() < 0.02 ? SAND : (Math.random() < 0.005 ? WALL : EMPTY);
            draw();
        }
        brushSizeInput.oninput = () => {
            brush = parseInt(brushSizeInput.value);
            brushSizeLabel.textContent = brush;
        }
        speedInput.oninput = () => {
            simSpeed = parseFloat(speedInput.value);
            speedLabel.textContent = simSpeed;
        }

        // main loop
        let last = performance.now();

        function loop(now) {
            const dt = now - last;
            last = now;
            // run multiple steps depending on simSpeed and dt
            if (running) {
                const steps = Math.max(1, Math.round(simSpeed));
                for (let s = 0; s < steps; s++) step();
            }
            draw();
            requestAnimationFrame(loop);
        }

        requestAnimationFrame(loop);

        // initial demo: a floor
        for (let x = 0; x < WIDTH; x++) grid[idx(x, HEIGHT - 1)] = WALL;

        // responsiveness
        resize();

    </script>
{% endblock %}