// ==UserScript==
// @name         Image Paster
// @namespace    http://tampermonkey.net/
// @version      4.0
// @description  Paste images to OWOT using quadrants with direct writeCharToXY at cursor position
// @author       soyim
// @match        https://www.ourworldoftext.com/*
// @match        https://ourworldoftext.com/*
// @grant        none
// @run-at       document-end
// ==/UserScript==
//paste at cursor
//set dimensions

(function() {
    'use strict';

    window.addEventListener('load', function() {
        console.log('OWOT Image Paster (Octant Direct) loading...');
        setTimeout(initImagePaster, 1000);
    });

    function initImagePaster() {
        // Octant character map - 8 triangular sectors per character
        // Sectors arranged: [1][2]
        //                   [3][4]
        //                   [5][6]
        //                   [7][8]
        const OCTANT_CHARS = [
            ' ',      // 00000000: None
            '𜺨',     // 00000001: Sector 1
            '𜺫',     // 00000010: Sector 2
            '🮂',     // 00000011: Sectors 1,2
            '𜴀',     // 00000100: Sector 3
            '▘',      // 00000101: Sectors 1,3
            '𜴁',     // 00000110: Sectors 2,3
            '𜴂',     // 00000111: Sectors 1,2,3
            '𜴃',     // 00001000: Sector 4
            '𜴄',     // 00001001: Sectors 1,4
            '▝',      // 00001010: Sectors 2,4
            '𜴅',     // 00001011: Sectors 1,2,4
            '𜴆',     // 00001100: Sectors 3,4
            '𜴇',     // 00001101: Sectors 1,3,4
            '𜴈',     // 00001110: Sectors 2,3,4
            '▀',      // 00001111: Sectors 1,2,3,4
            '𜴉',     // 00010000: Sector 5
            '𜴊',     // 00010001: Sectors 1,5
            '𜴋',     // 00010010: Sectors 2,5
            '𜴌',     // 00010011: Sectors 1,2,5
            '🯦',     // 00010100: Sectors 3,5
            '𜴍',     // 00010101: Sectors 1,3,5
            '𜴎',     // 00010110: Sectors 2,3,5
            '𜴏',     // 00010111: Sectors 1,2,3,5
            '𜴐',     // 00011000: Sectors 4,5
            '𜴑',     // 00011001: Sectors 1,4,5
            '𜴒',     // 00011010: Sectors 2,4,5
            '𜴓',     // 00011011: Sectors 1,2,4,5
            '𜴔',     // 00011100: Sectors 3,4,5
            '𜴕',     // 00011101: Sectors 1,3,4,5
            '𜴖',     // 00011110: Sectors 2,3,4,5
            '𜴗',     // 00011111: Sectors 1,2,3,4,5
            '𜴘',     // 00100000: Sector 6
            '𜴙',     // 00100001: Sectors 1,6
            '𜴚',     // 00100010: Sectors 2,6
            '𜴛',     // 00100011: Sectors 1,2,6
            '𜴜',     // 00100100: Sectors 3,6
            '𜴝',     // 00100101: Sectors 1,3,6
            '𜴞',     // 00100110: Sectors 2,3,6
            '𜴟',     // 00100111: Sectors 1,2,3,6
            '🯧',     // 00101000: Sectors 4,6
            '𜴠',     // 00101001: Sectors 1,4,6
            '𜴡',     // 00101010: Sectors 2,4,6
            '𜴢',     // 00101011: Sectors 1,2,4,6
            '𜴣',     // 00101100: Sectors 3,4,6
            '𜴤',     // 00101101: Sectors 1,3,4,6
            '𜴥',     // 00101110: Sectors 2,3,4,6
            '𜴦',     // 00101111: Sectors 1,2,3,4,6
            '𜴧',     // 00110000: Sectors 5,6
            '𜴨',     // 00110001: Sectors 1,5,6
            '𜴩',     // 00110010: Sectors 2,5,6
            '𜴪',     // 00110011: Sectors 1,2,5,6
            '𜴫',     // 00110100: Sectors 3,5,6
            '𜴬',     // 00110101: Sectors 1,3,5,6
            '𜴭',     // 00110110: Sectors 2,3,5,6
            '𜴮',     // 00110111: Sectors 1,2,3,5,6
            '𜴯',     // 00111000: Sectors 4,5,6
            '𜴰',     // 00111001: Sectors 1,4,5,6
            '𜴱',     // 00111010: Sectors 2,4,5,6
            '𜴲',     // 00111011: Sectors 1,2,4,5,6
            '𜴳',     // 00111100: Sectors 3,4,5,6
            '𜴴',     // 00111101: Sectors 1,3,4,5,6
            '𜴵',     // 00111110: Sectors 2,3,4,5,6
            '🮅',     // 00111111: Sectors 1,2,3,4,5,6
            '𜺣',     // 01000000: Sector 7
            '𜴶',     // 01000001: Sectors 1,7
            '𜴷',     // 01000010: Sectors 2,7
            '𜴸',     // 01000011: Sectors 1,2,7
            '𜴹',     // 01000100: Sectors 3,7
            '𜴺',     // 01000101: Sectors 1,3,7
            '𜴻',     // 01000110: Sectors 2,3,7
            '𜴼',     // 01000111: Sectors 1,2,3,7
            '𜴽',     // 01001000: Sectors 4,7
            '𜴾',     // 01001001: Sectors 1,4,7
            '𜴿',     // 01001010: Sectors 2,4,7
            '𜵀',     // 01001011: Sectors 1,2,4,7
            '𜵁',     // 01001100: Sectors 3,4,7
            '𜵂',     // 01001101: Sectors 1,3,4,7
            '𜵃',     // 01001110: Sectors 2,3,4,7
            '𜵄',     // 01001111: Sectors 1,2,3,4,7
            '▖',      // 01010000: Sectors 5,7
            '𜵅',     // 01010001: Sectors 1,5,7
            '𜵆',     // 01010010: Sectors 2,5,7
            '𜵇',     // 01010011: Sectors 1,2,5,7
            '𜵈',     // 01010100: Sectors 3,5,7
            '▌',      // 01010101: Sectors 1,3,5,7 (left half)
            '𜵉',     // 01010110: Sectors 2,3,5,7
            '𜵊',     // 01010111: Sectors 1,2,3,5,7
            '𜵋',     // 01011000: Sectors 4,5,7
            '𜵌',     // 01011001: Sectors 1,4,5,7
            '▞',      // 01011010: Sectors 2,4,5,7
            '𜵍',     // 01011011: Sectors 1,2,4,5,7
            '𜵎',     // 01011100: Sectors 3,4,5,7
            '𜵏',     // 01011101: Sectors 1,3,4,5,7
            '𜵐',     // 01011110: Sectors 2,3,4,5,7
            '▛',      // 01011111: Sectors 1,2,3,4,5,7
            '𜵑',     // 01100000: Sectors 6,7
            '𜵒',     // 01100001: Sectors 1,6,7
            '𜵓',     // 01100010: Sectors 2,6,7
            '𜵔',     // 01100011: Sectors 1,2,6,7
            '𜵕',     // 01100100: Sectors 3,6,7
            '𜵖',     // 01100101: Sectors 1,3,6,7
            '𜵗',     // 01100110: Sectors 2,3,6,7
            '𜵘',     // 01100111: Sectors 1,2,3,6,7
            '𜵙',     // 01101000: Sectors 4,6,7
            '𜵚',     // 01101001: Sectors 1,4,6,7
            '𜵛',     // 01101010: Sectors 2,4,6,7
            '𜵜',     // 01101011: Sectors 1,2,4,6,7
            '𜵝',     // 01101100: Sectors 3,4,6,7
            '𜵞',     // 01101101: Sectors 1,3,4,6,7
            '𜵟',     // 01101110: Sectors 2,3,4,6,7
            '𜵠',     // 01101111: Sectors 1,2,3,4,6,7
            '𜵡',     // 01110000: Sectors 5,6,7
            '𜵢',     // 01110001: Sectors 1,5,6,7
            '𜵣',     // 01110010: Sectors 2,5,6,7
            '𜵤',     // 01110011: Sectors 1,2,5,6,7
            '𜵥',     // 01110100: Sectors 3,5,6,7
            '𜵦',     // 01110101: Sectors 1,3,5,6,7
            '𜵧',     // 01110110: Sectors 2,3,5,6,7
            '𜵨',     // 01110111: Sectors 1,2,3,5,6,7
            '𜵩',     // 01111000: Sectors 4,5,6,7
            '𜵪',     // 01111001: Sectors 1,4,5,6,7
            '𜵫',     // 01111010: Sectors 2,4,5,6,7
            '𜵬',     // 01111011: Sectors 1,2,4,5,6,7
            '𜵭',     // 01111100: Sectors 3,4,5,6,7
            '𜵮',     // 01111101: Sectors 1,3,4,5,6,7
            '𜵯',     // 01111110: Sectors 2,3,4,5,6,7
            '𜵰',     // 01111111: Sectors 1,2,3,4,5,6,7
            '𜺠',     // 10000000: Sector 8
            '𜵱',     // 10000001: Sectors 1,8
            '𜵲',     // 10000010: Sectors 2,8
            '𜵳',     // 10000011: Sectors 1,2,8
            '𜵴',     // 10000100: Sectors 3,8
            '𜵵',     // 10000101: Sectors 1,3,8
            '𜵶',     // 10000110: Sectors 2,3,8
            '𜵷',     // 10000111: Sectors 1,2,3,8
            '𜵸',     // 10001000: Sectors 4,8
            '𜵹',     // 10001001: Sectors 1,4,8
            '𜵺',     // 10001010: Sectors 2,4,8
            '𜵻',     // 10001011: Sectors 1,2,4,8
            '𜵼',     // 10001100: Sectors 3,4,8
            '𜵽',     // 10001101: Sectors 1,3,4,8
            '𜵾',     // 10001110: Sectors 2,3,4,8
            '𜵿',     // 10001111: Sectors 1,2,3,4,8
            '𜶀',     // 10010000: Sectors 5,8
            '𜶁',     // 10010001: Sectors 1,5,8
            '𜶂',     // 10010010: Sectors 2,5,8
            '𜶃',     // 10010011: Sectors 1,2,5,8
            '𜶄',     // 10010100: Sectors 3,5,8
            '𜶅',     // 10010101: Sectors 1,3,5,8
            '𜶆',     // 10010110: Sectors 2,3,5,8
            '𜶇',     // 10010111: Sectors 1,2,3,5,8
            '𜶈',     // 10011000: Sectors 4,5,8
            '𜶉',     // 10011001: Sectors 1,4,5,8
            '𜶊',     // 10011010: Sectors 2,4,5,8
            '𜶋',     // 10011011: Sectors 1,2,4,5,8
            '𜶌',     // 10011100: Sectors 3,4,5,8
            '𜶍',     // 10011101: Sectors 1,3,4,5,8
            '𜶎',     // 10011110: Sectors 2,3,4,5,8
            '𜶏',     // 10011111: Sectors 1,2,3,4,5,8
            '▗',      // 10100000: Sectors 6,8
            '𜶐',     // 10100001: Sectors 1,6,8
            '𜶑',     // 10100010: Sectors 2,6,8
            '𜶒',     // 10100011: Sectors 1,2,6,8
            '𜶓',     // 10100100: Sectors 3,6,8
            '▚',      // 10100101: Sectors 1,3,6,8
            '𜶔',     // 10100110: Sectors 2,3,6,8
            '𜶕',     // 10100111: Sectors 1,2,3,6,8
            '𜶖',     // 10101000: Sectors 4,6,8
            '𜶗',     // 10101001: Sectors 1,4,6,8
            '▐',      // 10101010: Sectors 2,4,6,8 (right half)
            '𜶘',     // 10101011: Sectors 1,2,4,6,8
            '𜶙',     // 10101100: Sectors 3,4,6,8
            '𜶚',     // 10101101: Sectors 1,3,4,6,8
            '𜶛',     // 10101110: Sectors 2,3,4,6,8
            '▜',      // 10101111: Sectors 1,2,3,4,6,8
            '𜶜',     // 10110000: Sectors 5,6,8
            '𜶝',     // 10110001: Sectors 1,5,6,8
            '𜶞',     // 10110010: Sectors 2,5,6,8
            '𜶟',     // 10110011: Sectors 1,2,5,6,8
            '𜶠',     // 10110100: Sectors 3,5,6,8
            '𜶡',     // 10110101: Sectors 1,3,5,6,8
            '𜶢',     // 10110110: Sectors 2,3,5,6,8
            '𜶣',     // 10110111: Sectors 1,2,3,5,6,8
            '𜶤',     // 10111000: Sectors 4,5,6,8
            '𜶥',     // 10111001: Sectors 1,4,5,6,8
            '𜶦',     // 10111010: Sectors 2,4,5,6,8
            '𜶧',     // 10111011: Sectors 1,2,4,5,6,8
            '𜶨',     // 10111100: Sectors 3,4,5,6,8
            '𜶩',     // 10111101: Sectors 1,3,4,5,6,8
            '𜶪',     // 10111110: Sectors 2,3,4,5,6,8
            '𜶫',     // 10111111: Sectors 1,2,3,4,5,6,8
            '▂',      // 11000000: Sectors 7,8
            '𜶬',     // 11000001: Sectors 1,7,8
            '𜶭',     // 11000010: Sectors 2,7,8
            '𜶮',     // 11000011: Sectors 1,2,7,8
            '𜶯',     // 11000100: Sectors 3,7,8
            '𜶰',     // 11000101: Sectors 1,3,7,8
            '𜶱',     // 11000110: Sectors 2,3,7,8
            '�²',     // 11000111: Sectors 1,2,3,7,8
            '𜶳',     // 11001000: Sectors 4,7,8
            '𜶴',     // 11001001: Sectors 1,4,7,8
            '𜶵',     // 11001010: Sectors 2,4,7,8
            '𜶶',     // 11001011: Sectors 1,2,4,7,8
            '𜶷',     // 11001100: Sectors 3,4,7,8
            '𜶸',     // 11001101: Sectors 1,3,4,7,8
            '𜶹',     // 11001110: Sectors 2,3,4,7,8
            '𜶺',     // 11001111: Sectors 1,2,3,4,7,8
            '𜶻',     // 11010000: Sectors 5,7,8
            '𜶼',     // 11010001: Sectors 1,5,7,8
            '𜶽',     // 11010010: Sectors 2,5,7,8
            '𜶾',     // 11010011: Sectors 1,2,5,7,8
            '𜶿',     // 11010100: Sectors 3,5,7,8
            '𜷀',     // 11010101: Sectors 1,3,5,7,8
            '𜷁',     // 11010110: Sectors 2,3,5,7,8
            '𜷂',     // 11010111: Sectors 1,2,3,5,7,8
            '𜷃',     // 11011000: Sectors 4,5,7,8
            '𜷄',     // 11011001: Sectors 1,4,5,7,8
            '𜷅',     // 11011010: Sectors 2,4,5,7,8
            '𜷆',     // 11011011: Sectors 1,2,4,5,7,8
            '𜷇',     // 11011100: Sectors 3,4,5,7,8
            '𜷈',     // 11011101: Sectors 1,3,4,5,7,8
            '𜷉',     // 11011110: Sectors 2,3,4,5,7,8
            '𜷊',     // 11011111: Sectors 1,2,3,4,5,7,8
            '𜷋',     // 11100000: Sectors 6,7,8
            '𜷌',     // 11100001: Sectors 1,6,7,8
            '𜷍',     // 11100010: Sectors 2,6,7,8
            '𜷎',     // 11100011: Sectors 1,2,6,7,8
            '𜷏',     // 11100100: Sectors 3,6,7,8
            '𜷐',     // 11100101: Sectors 1,3,6,7,8
            '𜷑',     // 11100110: Sectors 2,3,6,7,8
            '𜷒',     // 11100111: Sectors 1,2,3,6,7,8
            '𜷓',     // 11101000: Sectors 4,6,7,8
            '𜷔',     // 11101001: Sectors 1,4,6,7,8
            '𜷕',     // 11101010: Sectors 2,4,6,7,8
            '𜷖',     // 11101011: Sectors 1,2,4,6,7,8
            '𜷗',     // 11101100: Sectors 3,4,6,7,8
            '𜷘',     // 11101101: Sectors 1,3,4,6,7,8
            '𜷙',     // 11101110: Sectors 2,3,4,6,7,8
            '𜷚',     // 11101111: Sectors 1,2,3,4,6,7,8
            '▄',      // 11110000: Sectors 5,6,7,8 (lower half)
            '𜷛',     // 11110001: Sectors 1,5,6,7,8
            '𜷜',     // 11110010: Sectors 2,5,6,7,8
            '𜷝',     // 11110011: Sectors 1,2,5,6,7,8
            '𜷞',     // 11110100: Sectors 3,5,6,7,8
            '▙',      // 11110101: Sectors 1,3,5,6,7,8
            '𜷟',     // 11110110: Sectors 2,3,5,6,7,8
            '𜷠',     // 11110111: Sectors 1,2,3,5,6,7,8
            '𜷡',     // 11111000: Sectors 4,5,6,7,8
            '𜷢',     // 11111001: Sectors 1,4,5,6,7,8
            '▟',      // 11111010: Sectors 2,4,5,6,7,8
            '𜷣',     // 11111011: Sectors 1,2,4,5,6,7,8
            '▆',      // 11111100: Sectors 3,4,5,6,7,8
            '𜷤',     // 11111101: Sectors 1,3,4,5,6,7,8
            '𜷥',     // 11111110: Sectors 2,3,4,5,6,7,8
            '█'       // 11111111: All sectors (full block)
        ];

        // K-means clustering for 2-color reduction
        function kMeans2Colors(pixels) {
            if (pixels.length === 0) return [0, 0];
            if (pixels.length === 1) return [pixels[0], pixels[0]];

            let c1 = Math.min(...pixels);
            let c2 = Math.max(...pixels);

            for (let iter = 0; iter < 10; iter++) {
                let cluster1 = [];
                let cluster2 = [];

                for (let color of pixels) {
                    const dist1 = colorDistance(color, c1);
                    const dist2 = colorDistance(color, c2);
                    if (dist1 < dist2) {
                        cluster1.push(color);
                    } else {
                        cluster2.push(color);
                    }
                }

                if (cluster1.length > 0) {
                    c1 = averageColor(cluster1);
                }
                if (cluster2.length > 0) {
                    c2 = averageColor(cluster2);
                }
            }

            return [c1, c2];
        }

        function colorDistance(c1, c2) {
            const r1 = (c1 >> 16) & 0xFF;
            const g1 = (c1 >> 8) & 0xFF;
            const b1 = c1 & 0xFF;
            const r2 = (c2 >> 16) & 0xFF;
            const g2 = (c2 >> 8) & 0xFF;
            const b2 = c2 & 0xFF;
            return Math.sqrt((r1-r2)**2 + (g1-g2)**2 + (b1-b2)**2);
        }

        function averageColor(colors) {
            let r = 0, g = 0, b = 0;
            for (let color of colors) {
                r += (color >> 16) & 0xFF;
                g += (color >> 8) & 0xFF;
                b += color & 0xFF;
            }
            r = Math.round(r / colors.length);
            g = Math.round(g / colors.length);
            b = Math.round(b / colors.length);
            return (r << 16) | (g << 8) | b;
        }

        class OWOTImagePasterOctantDirect {
            constructor() {
                this.canvas = new OffscreenCanvas(0, 0);
                this.ctx = this.canvas.getContext('2d', { willReadFrequently: true });
                this.maxWidth = 50;
                this.maxHeight = 50;
                this.maintainAspectRatio = true;
                this.currentImageData = null;
                this.isPasting = false;
                this.isSelectingRegion = false;
                this.regionStart = null;
                this.regionEnd = null;

                this.createUI();
                this.setupPasteListener();
            }

            createUI() {
                const existing = document.getElementById('owot-image-paster-ui');
                if (existing) existing.remove();

                const ui = document.createElement('div');
                ui.id = 'owot-image-paster-ui';
                ui.style.cssText = `
                    position: fixed;
                    top: 20px;
                    right: 20px;
                    background: #2c3e50;
                    color: white;
                    padding: 20px;
                    border-radius: 10px;
                    box-shadow: 0 4px 20px rgba(0,0,0,0.5);
                    z-index: 10000;
                    font-family: Arial, sans-serif;
                    width: 400px;
                    max-height: 90vh;
                    overflow-y: auto;
                `;

                ui.innerHTML = `
                    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px;">
                        <h3 style="margin: 0; font-size: 16px;">OWOT Octant Paster</h3>
                        <button id="owot-close-btn" style="background: #e74c3c; border: none; color: white; padding: 5px 10px; border-radius: 5px; cursor: pointer; font-weight: bold;">×</button>
                    </div>

                    <div style="background: #34495e; padding: 10px; border-radius: 5px; margin-bottom: 15px; font-size: 12px; color: #95a5a6;">
                        ℹ️ Uses octants (2x4 pixels) with K-means 2-color optimization - maximum resolution!
                    </div>

                    <div id="drop-zone" style="
                        border: 2px dashed #3498db;
                        padding: 30px;
                        text-align: center;
                        border-radius: 5px;
                        background: #34495e;
                        cursor: pointer;
                        margin-bottom: 15px;
                        transition: all 0.3s;
                    ">
                        <div style="font-size: 40px; margin-bottom: 10px;">📁</div>
                        <div>Drop image here or click to select</div>
                        <div style="font-size: 12px; color: #95a5a6; margin-top: 5px;">Octants (2x4) - 2 colors per char</div>
                    </div>

                    <input type="file" id="file-input" accept="image/*" style="display: none;">

                    <div style="margin-bottom: 15px;">
                        <label style="display: flex; align-items: center; margin-bottom: 10px; font-size: 14px; cursor: pointer;">
                            <input type="checkbox" id="aspect-ratio-toggle" checked style="margin-right: 8px; cursor: pointer;">
                            Maintain Aspect Ratio
                        </label>

                        <div id="width-control" style="margin-bottom: 10px;">
                            <label style="display: block; margin-bottom: 5px; font-size: 14px;">Width: <span id="width-value">50</span> chars</label>
                            <input type="range" id="width-slider" min="22" max="1000" value="50" style="width: 100%;">
                        </div>

                        <div id="height-control" style="opacity: 0.5; pointer-events: none;">
                            <label style="display: block; margin-bottom: 5px; font-size: 14px;">Height: <span id="height-value">50</span> chars</label>
                            <input type="range" id="height-slider" min="10" max="500" value="50" style="width: 100%;" disabled>
                        </div>
                    </div>

                    <div id="preview-section" style="display: none; margin-bottom: 15px;">
                        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
                            <label style="font-size: 14px; font-weight: bold;">Preview:</label>
                            <button id="reconvert-btn" style="
                                background: #3498db;
                                border: none;
                                color: white;
                                padding: 5px 12px;
                                border-radius: 5px;
                                cursor: pointer;
                                font-size: 12px;
                            ">Reconvert</button>
                        </div>
                        <div id="preview-box" style="
                            background: #1a1a1a;
                            border: 1px solid #555;
                            border-radius: 5px;
                            padding: 10px;
                            max-height: 1px;
                            overflow: auto;
                            font-family: 'Courier New', monospace;
                            font-size: 6px;
                            line-height: 1;
                            white-space: pre;
                            color: #fff;
                        "></div>
                    </div>

                    <button id="paste-btn" style="
                        width: 100%;
                        background: #27ae60;
                        border: none;
                        color: white;
                        padding: 12px;
                        border-radius: 5px;
                        cursor: pointer;
                        font-size: 14px;
                        font-weight: bold;
                        margin-bottom: 10px;
                        display: none;
                    ">Paste at Cursor Position</button>

                    <button id="select-region-btn" style="
                        width: 100%;
                        background: #9b59b6;
                        border: none;
                        color: white;
                        padding: 12px;
                        border-radius: 5px;
                        cursor: pointer;
                        font-size: 14px;
                        font-weight: bold;
                        margin-bottom: 10px;
                        display: none;
                    ">Select Region to Paste</button>

                    <div id="status" style="
                        padding: 10px;
                        background: #34495e;
                        border-radius: 5px;
                        font-size: 12px;
                        text-align: center;
                        color: #95a5a6;
                    ">Ready to paste!</div>

                    <div style="margin-top: 10px; font-size: 11px; color: #95a5a6; text-align: center;">
                        Or press Ctrl+V anywhere on page
                    </div>
                `;

                document.body.appendChild(ui);

                const dropZone = document.getElementById('drop-zone');
                const fileInput = document.getElementById('file-input');
                const closeBtn = document.getElementById('owot-close-btn');
                const aspectRatioToggle = document.getElementById('aspect-ratio-toggle');
                const widthSlider = document.getElementById('width-slider');
                const widthValue = document.getElementById('width-value');
                const heightSlider = document.getElementById('height-slider');
                const heightValue = document.getElementById('height-value');
                const heightControl = document.getElementById('height-control');
                const pasteBtn = document.getElementById('paste-btn');
                const selectRegionBtn = document.getElementById('select-region-btn');
                const reconvertBtn = document.getElementById('reconvert-btn');

                closeBtn.onclick = () => ui.remove();
                dropZone.onclick = () => fileInput.click();

                aspectRatioToggle.onchange = (e) => {
                    this.maintainAspectRatio = e.target.checked;
                    if (this.maintainAspectRatio) {
                        heightControl.style.opacity = '0.5';
                        heightControl.style.pointerEvents = 'none';
                        heightSlider.disabled = true;
                    } else {
                        heightControl.style.opacity = '1';
                        heightControl.style.pointerEvents = 'auto';
                        heightSlider.disabled = false;
                    }
                };

                dropZone.ondragover = (e) => {
                    e.preventDefault();
                    dropZone.style.borderColor = '#2ecc71';
                    dropZone.style.background = '#2c3e50';
                };

                dropZone.ondragleave = () => {
                    dropZone.style.borderColor = '#3498db';
                    dropZone.style.background = '#34495e';
                };

                dropZone.ondrop = (e) => {
                    e.preventDefault();
                    dropZone.style.borderColor = '#3498db';
                    dropZone.style.background = '#34495e';
                    const file = e.dataTransfer.files[0];
                    if (file && file.type.startsWith('image/')) {
                        this.handleFile(file);
                    }
                };

                fileInput.onchange = (e) => {
                    const file = e.target.files[0];
                    if (file) this.handleFile(file);
                };

                widthSlider.oninput = (e) => {
                    this.maxWidth = parseInt(e.target.value);
                    widthValue.textContent = this.maxWidth;
                };

                heightSlider.oninput = (e) => {
                    this.maxHeight = parseInt(e.target.value);
                    heightValue.textContent = this.maxHeight;
                };

                pasteBtn.onclick = () => {
                    this.pasteImageAtCursor();
                };

                selectRegionBtn.onclick = () => {
                    this.startRegionSelection();
                };

                reconvertBtn.onclick = () => {
                    if (this.currentImageUrl) {
                        this.updateStatus('Reconverting...', '#3498db');
                        this.processImage(this.currentImageUrl);
                    }
                };
            }

            updateStatus(message, color = '#95a5a6') {
                const status = document.getElementById('status');
                if (status) {
                    status.textContent = message;
                    status.style.color = color;
                }
            }

            handleFile(file) {
                this.updateStatus('Processing image...', '#3498db');
                const url = URL.createObjectURL(file);
                this.currentImageUrl = url;
                this.processImage(url);
            }

            setupPasteListener() {
                document.addEventListener('paste', (event) => {
                    if (event.clipboardData) {
                        const items = event.clipboardData.items;
                        if (!items) return;

                        for (let i = 0; i < items.length; i++) {
                            if (items[i].type.indexOf('image') !== -1) {
                                const file = items[i].getAsFile();
                                const url = URL.createObjectURL(file);
                                this.currentImageUrl = url;
                                this.updateStatus('Processing pasted image...', '#3498db');
                                this.processImage(url);
                                event.preventDefault();
                                break;
                            }
                        }
                    }
                });
            }

            processImage(url) {
                const img = new Image();
                img.onload = () => {
                    // Octant is 2 pixels wide, 4 pixels tall
                    let charWidth, charHeight;

                    if (this.maintainAspectRatio) {
                        const aspectRatio = img.height / img.width;
                        charWidth = Math.min(this.maxWidth, Math.floor(img.width / 2));
                        charHeight = Math.floor(charWidth * aspectRatio / 2);
                    } else {
                        charWidth = this.maxWidth;
                        charHeight = this.maxHeight;
                    }

                    const pixelWidth = charWidth * 2;
                    const pixelHeight = charHeight * 4;

                    this.canvas.width = pixelWidth;
                    this.canvas.height = pixelHeight;
                    this.ctx.drawImage(img, 0, 0, pixelWidth, pixelHeight);

                    const imageData = this.ctx.getImageData(0, 0, pixelWidth, pixelHeight);

                    this.currentImageData = {
                        imageData: imageData,
                        charWidth: charWidth,
                        charHeight: charHeight,
                        pixelWidth: pixelWidth,
                        pixelHeight: pixelHeight
                    };

                    this.updatePreview(imageData, charWidth, charHeight);
                };
                img.src = url;
            }

            updatePreview(imageData, charWidth, charHeight) {
                const previewSection = document.getElementById('preview-section');
                const previewBox = document.getElementById('preview-box');
                const pasteBtn = document.getElementById('paste-btn');
                const selectRegionBtn = document.getElementById('select-region-btn');

                previewSection.style.display = 'block';
                pasteBtn.style.display = 'block';
                selectRegionBtn.style.display = 'block';

                let previewText = "";
                const data = imageData.data;

                for (let charY = 0; charY < charHeight; charY++) {
                    for (let charX = 0; charX < charWidth; charX++) {
                        const octantData = this.extractOctant(data, charX, charY, charWidth);
                        const char = octantData.char;
                        previewText += char;
                    }
                    previewText += "\n";
                }

                previewBox.textContent = previewText;

                this.updateStatus(`✓ Ready to paste ${charWidth}×${charHeight} chars (${charWidth*2}×${charHeight*4}px)`, '#2ecc71');
            }

            extractOctant(data, charX, charY, charWidth) {
                // Extract 2x4 pixel block (8 sectors arranged as triangles)
                // Sectors:  [1][2]
                //           [3][4]
                //           [5][6]
                //           [7][8]
                const pixels = [];
                const pixelColors = [];

                for (let py = 0; py < 4; py++) {
                    for (let px = 0; px < 2; px++) {
                        const x = charX * 2 + px;
                        const y = charY * 4 + py;
                        const idx = (y * charWidth * 2 + x) * 4;

                        const r = data[idx] || 0;
                        const g = data[idx + 1] || 0;
                        const b = data[idx + 2] || 0;
                        const a = data[idx + 3] || 0;

                        const color = ((r & 0xFF) << 16) | ((g & 0xFF) << 8) | (b & 0xFF);

                        pixels.push({ color, alpha: a, x: px, y: py });
                        if (a >= 128) {
                            pixelColors.push(color);
                        }
                    }
                }

                // Handle fully transparent
                if (pixelColors.length === 0) {
                    return { char: ' ', fgColor: 0, bgColor: 0 };
                }

                // K-means to get 2 colors
                const [color1, color2] = kMeans2Colors(pixelColors);

                // Build octant pattern
                // Bit order (MSB to LSB): Sector 8, 7, 6, 5, 4, 3, 2, 1
                let pattern = 0;

                for (let i = 0; i < 8; i++) {
                    const pixel = pixels[i];
                    if (pixel.alpha >= 128) {
                        const dist1 = colorDistance(pixel.color, color1);
                        const dist2 = colorDistance(pixel.color, color2);

                        if (dist1 < dist2) {
                            pattern |= (1 << i);
                        }
                    }
                }

                // If all pixels are solid, use full block
                if (pixelColors.length === 8) {
                    const allSameColor = pixelColors.every(c => colorDistance(c, color1) < 10);
                    if (allSameColor || pattern === 0b11111111) {
                        pattern = 0b11111111;
                    }
                }

                const char = OCTANT_CHARS[pattern];

                return {
                    char: char,
                    fgColor: color1,
                    bgColor: color2
                };
            }

            pasteImageAtCursor() {
                if (!this.currentImageData || this.isPasting) return;

                if (typeof writeCharToXY !== 'function') {
                    this.updateStatus('✗ writeCharToXY not found!', '#e74c3c');
                    return;
                }

                if (typeof cursorCoords === 'undefined') {
                    this.updateStatus('✗ cursorCoords not found!', '#e74c3c');
                    return;
                }

                this.isPasting = true;
                this.updateStatus('Pasting image...', '#f39c12');

                const { imageData, charWidth, charHeight } = this.currentImageData;
                const data = imageData.data;

                const startX = cursorCoords[0] * 16 + cursorCoords[2];
                const startY = cursorCoords[1] * 8 + cursorCoords[3];

                let charsPasted = 0;

                for (let charY = 0; charY < charHeight; charY++) {
                    for (let charX = 0; charX < charWidth; charX++) {
                        const octantData = this.extractOctant(data, charX, charY, charWidth);

                        if (octantData.char === ' ') continue;

                        const charPosX = startX + charX;
                        const charPosY = startY + charY;

                        writeCharToXY(octantData.char, octantData.fgColor, charPosX, charPosY, octantData.bgColor);
                        charsPasted++;
                    }
                }

                this.isPasting = false;
                this.updateStatus(`✓ Pasted ${charsPasted} octant characters!`, '#2ecc71');
            }

            startRegionSelection() {
                if (!this.currentImageData) return;

                // Get current cursor position as starting point
                if (typeof cursorCoords === 'undefined') {
                    this.updateStatus('✗ cursorCoords not found!', '#e74c3c');
                    return;
                }

                const startX = cursorCoords[0] * 16 + cursorCoords[2];
                const startY = cursorCoords[1] * 8 + cursorCoords[3];

                this.isSelectingRegion = true;
                this.regionStart = { x: startX, y: startY };
                this.regionEnd = null;

                this.updateStatus(`Start: (${startX}, ${startY}). Click end corner...`, '#9b59b6');

                const selectRegionBtn = document.getElementById('select-region-btn');
                selectRegionBtn.textContent = 'Cancel Selection';
                selectRegionBtn.style.background = '#e74c3c';
                selectRegionBtn.onclick = () => {
                    this.cancelRegionSelection();
                };

                // Add click listener to canvas
                this.regionClickHandler = this.handleRegionClick.bind(this);
                document.addEventListener('click', this.regionClickHandler, true);
            }

            handleRegionClick(event) {
                if (!this.isSelectingRegion) return;

                event.preventDefault();
                event.stopPropagation();

                if (typeof cursorCoords === 'undefined') {
                    this.updateStatus('✗ cursorCoords not found!', '#e74c3c');
                    this.cancelRegionSelection();
                    return;
                }

                const clickX = cursorCoords[0] * 16 + cursorCoords[2];
                const clickY = cursorCoords[1] * 8 + cursorCoords[3];

                // Set end point and paste
                this.regionEnd = { x: clickX, y: clickY };
                this.updateStatus(`End: (${clickX}, ${clickY}). Pasting...`, '#f39c12');

                // Remove the click listener
                document.removeEventListener('click', this.regionClickHandler, true);

                // Paste to the selected region
                this.pasteImageToRegion();
            }

            cancelRegionSelection() {
                this.isSelectingRegion = false;
                this.regionStart = null;
                this.regionEnd = null;

                if (this.regionClickHandler) {
                    document.removeEventListener('click', this.regionClickHandler, true);
                    this.regionClickHandler = null;
                }

                const selectRegionBtn = document.getElementById('select-region-btn');
                if (selectRegionBtn) {
                    selectRegionBtn.textContent = 'Select Region to Paste';
                    selectRegionBtn.style.background = '#9b59b6';
                    selectRegionBtn.onclick = () => {
                        this.startRegionSelection();
                    };
                }

                this.updateStatus('Selection cancelled', '#95a5a6');
            }

            pasteImageToRegion() {
                if (!this.currentImageData || !this.regionStart || !this.regionEnd) return;

                if (typeof writeCharToXY !== 'function') {
                    this.updateStatus('✗ writeCharToXY not found!', '#e74c3c');
                    this.cancelRegionSelection();
                    return;
                }

                // Calculate region dimensions
                const minX = Math.min(this.regionStart.x, this.regionEnd.x);
                const maxX = Math.max(this.regionStart.x, this.regionEnd.x);
                const minY = Math.min(this.regionStart.y, this.regionEnd.y);
                const maxY = Math.max(this.regionStart.y, this.regionEnd.y);

                const regionWidth = maxX - minX + 1;
                const regionHeight = maxY - minY + 1;

                // Process image to fit the region
                const img = new Image();
                img.onload = () => {
                    const pixelWidth = regionWidth * 2;
                    const pixelHeight = regionHeight * 4;

                    this.canvas.width = pixelWidth;
                    this.canvas.height = pixelHeight;
                    this.ctx.drawImage(img, 0, 0, pixelWidth, pixelHeight);

                    const imageData = this.ctx.getImageData(0, 0, pixelWidth, pixelHeight);
                    const data = imageData.data;

                    let charsPasted = 0;

                    for (let charY = 0; charY < regionHeight; charY++) {
                        for (let charX = 0; charX < regionWidth; charX++) {
                            const octantData = this.extractOctant(data, charX, charY, regionWidth);

                            if (octantData.char === ' ') continue;

                            const charPosX = minX + charX;
                            const charPosY = minY + charY;

                            writeCharToXY(octantData.char, octantData.fgColor, charPosX, charPosY, octantData.bgColor);
                            charsPasted++;
                        }
                    }

                    this.updateStatus(`✓ Pasted ${charsPasted} chars to region (${regionWidth}×${regionHeight})!`, '#2ecc71');
                    this.cancelRegionSelection();
                };

                img.src = this.currentImageUrl;
            }
        }

        // Initialize
        const imagePaster = new OWOTImagePasterOctantDirect();
        console.log("✓ OWOT Image Paster (Octant Direct) loaded!");
    }
})();