// ==UserScript==
// @name         Single Pixel Modifier Tool
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  Change exactly one pixel in images/GIFs before upload
// @author       You
// @match        *https://sneed.95.fyi/*
// @match        *https://ironcafe.org/*
// @match        *https://sidson.city/*
// @match        *https://gigacha.de/*
// @match        *https://www.28chan.org/*
// @grant        none
// @run-at       document-end
// ==/UserScript==

(function() {
    'use strict';

    console.log('Single Pixel Modifier loading...');

    // Create the tool
    const tool = document.createElement('div');
    tool.innerHTML = `
        <div id="pixel-modifier-tool" style="
            position: fixed;
            top: 20px;
            left: 20px;
            background: rgba(0, 0, 0, 0.97);
            color: white;
            padding: 20px;
            border-radius: 10px;
            font-family: Arial, sans-serif;
            font-size: 14px;
            z-index: 10000;
            width: 320px;
            box-shadow: 0 4px 25px rgba(0,0,0,0.6);
            border: 2px solid #4CAF50;
            user-select: none;
            display: none;
        ">
            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px;">
                <strong style="color: #4CAF50; font-size: 16px;">🎯 One Pixel Changer</strong>
                <button id="close-tool" style="
                    background: none;
                    border: none;
                    color: white;
                    font-size: 20px;
                    cursor: pointer;
                    padding: 0;
                    line-height: 1;
                ">×</button>
            </div>

            <div style="margin-bottom: 15px; font-size: 12px; color: #aaa; text-align: center;">
                Changes exactly ONE pixel by ±1 value
            </div>

            <div id="drop-area" style="
                border: 2px dashed #4CAF50;
                border-radius: 8px;
                padding: 25px;
                text-align: center;
                margin-bottom: 15px;
                background: rgba(76, 175, 80, 0.05);
                transition: all 0.2s;
                cursor: pointer;
            ">
                <div style="font-size: 40px; margin-bottom: 10px;">📤</div>
                <div style="font-weight: bold; margin-bottom: 5px;">Drop images/GIFs here</div>
                <div style="font-size: 11px; color: #888;">Supports: JPG, PNG, GIF, WEBP</div>
            </div>

            <input type="file" id="file-input" multiple accept="image/*,image/gif,image/jpeg,image/png,image/webp" style="display: none;">

            <div id="file-list" style="
                max-height: 250px;
                overflow-y: auto;
                margin-bottom: 15px;
                border: 1px solid #333;
                border-radius: 6px;
                padding: 10px;
                font-size: 12px;
                background: rgba(255,255,255,0.05);
            ">
                <div style="color: #666; text-align: center; padding: 20px;">No files</div>
            </div>

            <div style="background: rgba(255,255,255,0.05); padding: 12px; border-radius: 6px; margin-bottom: 15px;">
                <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;">
                    <span style="color: #aaa;">Pixel Change:</span>
                    <span id="change-display" style="color: #4CAF50; font-weight: bold;">±1</span>
                </div>
                <input type="range" id="change-amount" min="1" max="5" value="1" style="width: 100%;">
                <div style="display: flex; justify-content: space-between; font-size: 11px; color: #666; margin-top: 5px;">
                    <span>Subtle</span>
                    <span>Noticeable</span>
                </div>
            </div>

            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 15px;">
                <button id="modify-btn" style="
                    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
                    color: white;
                    border: none;
                    padding: 12px;
                    border-radius: 6px;
                    cursor: pointer;
                    font-size: 14px;
                    font-weight: bold;
                ">Modify Files</button>
                <button id="inject-btn" style="
                    background: linear-gradient(135deg, #4CAF50 0%, #2E7D32 100%);
                    color: white;
                    border: none;
                    padding: 12px;
                    border-radius: 6px;
                    cursor: pointer;
                    font-size: 14px;
                    font-weight: bold;
                    display: none;
                ">Inject to Site</button>
            </div>

            <div id="status" style="
                font-size: 12px;
                color: #4CAF50;
                text-align: center;
                padding: 8px;
                border-radius: 4px;
                background: rgba(76, 175, 80, 0.1);
                min-height: 18px;
            ">Ready</div>
        </div>

        <button id="open-tool" style="
            position: fixed;
            top: 20px;
            left: 20px;
            width: 50px;
            height: 50px;
            background: linear-gradient(135deg, #4CAF50 0%, #2E7D32 100%);
            color: white;
            border: none;
            border-radius: 50%;
            font-size: 22px;
            cursor: pointer;
            z-index: 9999;
            box-shadow: 0 4px 15px rgba(76, 175, 80, 0.4);
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s;
        ">⚡</button>
    `;

    document.body.appendChild(tool);

    // State
    let files = [];
    let modifiedFiles = [];
    let changeAmount = 1;

    // Elements
    const toolDiv = document.getElementById('pixel-modifier-tool');
    const openBtn = document.getElementById('open-tool');
    const closeBtn = document.getElementById('close-tool');
    const dropArea = document.getElementById('drop-area');
    const fileInput = document.getElementById('file-input');
    const fileList = document.getElementById('file-list');
    const changeSlider = document.getElementById('change-amount');
    const changeDisplay = document.getElementById('change-display');
    const modifyBtn = document.getElementById('modify-btn');
    const injectBtn = document.getElementById('inject-btn');
    const status = document.getElementById('status');

    // Open/Close
    openBtn.addEventListener('click', () => {
        toolDiv.style.display = 'block';
        openBtn.style.display = 'none';
    });

    closeBtn.addEventListener('click', () => {
        toolDiv.style.display = 'none';
        openBtn.style.display = 'flex';
    });

    // Change amount
    changeSlider.addEventListener('input', (e) => {
        changeAmount = parseInt(e.target.value);
        changeDisplay.textContent = `±${changeAmount}`;
    });

    // File handling
    dropArea.addEventListener('click', () => fileInput.click());
    dropArea.addEventListener('dragover', (e) => {
        e.preventDefault();
        dropArea.style.background = 'rgba(76, 175, 80, 0.15)';
        dropArea.style.borderColor = '#2E7D32';
    });

    dropArea.addEventListener('dragleave', () => {
        dropArea.style.background = 'rgba(76, 175, 80, 0.05)';
        dropArea.style.borderColor = '#4CAF50';
    });

    dropArea.addEventListener('drop', (e) => {
        e.preventDefault();
        dropArea.style.background = 'rgba(76, 175, 80, 0.05)';
        dropArea.style.borderColor = '#4CAF50';
        handleFiles(e.dataTransfer.files);
    });

    fileInput.addEventListener('change', (e) => handleFiles(e.target.files));

    function handleFiles(fileList) {
        const newFiles = Array.from(fileList);

        if (newFiles.length === 0) {
            showStatus('No files selected', 'error');
            return;
        }

        // Filter for images
        const imageFiles = newFiles.filter(file =>
            file.type.startsWith('image/') ||
            file.name.match(/\.(jpg|jpeg|png|gif|webp|bmp)$/i)
        );

        if (imageFiles.length === 0) {
            showStatus('No image files found', 'error');
            return;
        }

        files.push(...imageFiles);
        modifiedFiles = files.map(() => null); // Reset modifications
        updateFileList();
        showStatus(`Added ${imageFiles.length} image(s)`, 'success');

        injectBtn.style.display = 'none';
        modifyBtn.disabled = false;
    }

    function updateFileList() {
        if (files.length === 0) {
            fileList.innerHTML = '<div style="color: #666; text-align: center; padding: 20px;">No files</div>';
            return;
        }

        let html = '';
        files.forEach((file, index) => {
            const isModified = modifiedFiles[index] !== null;
            const fileType = file.type.split('/')[1] || file.name.split('.').pop();
            const fileSize = formatFileSize(file.size);

            html += `
                <div style="
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    padding: 10px;
                    margin-bottom: 8px;
                    background: ${isModified ? 'rgba(76, 175, 80, 0.1)' : 'rgba(255, 152, 0, 0.1)'};
                    border-radius: 5px;
                    border-left: 4px solid ${isModified ? '#4CAF50' : '#FF9800'};
                ">
                    <div style="flex: 1; min-width: 0;">
                        <div style="display: flex; align-items: center; gap: 8px; margin-bottom: 4px;">
                            <span style="
                                background: ${isModified ? '#4CAF50' : '#666'};
                                color: white;
                                width: 20px;
                                height: 20px;
                                border-radius: 50%;
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                font-size: 10px;
                            ">${isModified ? '✓' : index + 1}</span>
                            <span style="
                                font-weight: bold;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                white-space: nowrap;
                            " title="${file.name}">${file.name}</span>
                        </div>
                        <div style="font-size: 10px; color: #888; display: flex; gap: 10px;">
                            <span>${fileType.toUpperCase()}</span>
                            <span>${fileSize}</span>
                        </div>
                    </div>
                    <button class="remove-btn" data-index="${index}" style="
                        background: #f44336;
                        color: white;
                        border: none;
                        width: 24px;
                        height: 24px;
                        border-radius: 50%;
                        cursor: pointer;
                        font-size: 14px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        flex-shrink: 0;
                    " title="Remove">×</button>
                </div>
            `;
        });

        fileList.innerHTML = html;

        // Add remove button listeners
        fileList.querySelectorAll('.remove-btn').forEach(btn => {
            btn.addEventListener('click', (e) => {
                const index = parseInt(e.target.dataset.index);
                files.splice(index, 1);
                modifiedFiles.splice(index, 1);
                updateFileList();
                showStatus('File removed', 'info');
            });
        });
    }

    // Modify function - changes exactly ONE pixel
    async function modifySinglePixel(file) {
        return new Promise((resolve, reject) => {
            const reader = new FileReader();

            reader.onload = function(e) {
                const img = new Image();

                img.onload = function() {
                    const canvas = document.createElement('canvas');
                    const ctx = canvas.getContext('2d');

                    // Set canvas size
                    canvas.width = img.width;
                    canvas.height = img.height;

                    // Draw image (works for GIFs too - will be static but that's fine)
                    ctx.drawImage(img, 0, 0);

                    // Get image data
                    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
                    const data = imageData.data;

                    // Choose ONE random pixel (avoid edges by 2 pixels)
                    const x = Math.floor(Math.random() * (canvas.width - 4)) + 2;
                    const y = Math.floor(Math.random() * (canvas.height - 4)) + 2;
                    const pixelIndex = (y * canvas.width + x) * 4;

                    // Choose ONE random channel (R, G, or B)
                    const channel = Math.floor(Math.random() * 3);

                    // Choose change direction (+ or -)
                    const change = Math.random() > 0.5 ? changeAmount : -changeAmount;

                    // Get original value
                    const originalValue = data[pixelIndex + channel];

                    // Calculate new value (clamp to 0-255)
                    let newValue = originalValue + change;
                    if (newValue < 0) newValue = 0;
                    if (newValue > 255) newValue = 255;

                    // Apply the change to exactly ONE pixel
                    data[pixelIndex + channel] = newValue;

                    // Put modified data back
                    ctx.putImageData(imageData, 0, 0);

                    // Convert to blob with original format
                    const mimeType = file.type === 'image/gif' ? 'image/gif' : 'image/jpeg';
                    const quality = file.type === 'image/gif' ? 1.0 : 0.95;

                    canvas.toBlob(function(blob) {
                        // Create new file with modified content
                        const modifiedFile = new File([blob], file.name, {
                            type: file.type,
                            lastModified: Date.now() + Math.floor(Math.random() * 1000) // Ensure unique timestamp
                        });

                        console.log(`Modified ${file.name}: Pixel(${x},${y}) ${['R','G','B'][channel]}: ${originalValue}→${newValue} (${change > 0 ? '+' : ''}${change})`);

                        resolve(modifiedFile);
                    }, mimeType, quality);
                };

                img.onerror = reject;
                img.src = e.target.result;
            };

            reader.onerror = reject;
            reader.readAsDataURL(file);
        });
    }

    // Modify all files
    modifyBtn.addEventListener('click', async () => {
        if (files.length === 0) {
            showStatus('No files to modify', 'error');
            return;
        }

        showStatus('Modifying files...', 'processing');
        modifyBtn.disabled = true;
        modifyBtn.textContent = 'Modifying...';

        let successCount = 0;
        let failCount = 0;

        for (let i = 0; i < files.length; i++) {
            try {
                showStatus(`Modifying ${i + 1}/${files.length}: ${files[i].name}`, 'processing');
                modifiedFiles[i] = await modifySinglePixel(files[i]);
                successCount++;
                updateFileList();
            } catch (error) {
                console.error(`Failed to modify ${files[i].name}:`, error);
                failCount++;
                modifiedFiles[i] = null;
            }
        }

        // Update UI
        modifyBtn.disabled = false;
        modifyBtn.textContent = 'Modify Files';

        if (successCount > 0) {
            showStatus(`Modified ${successCount} file(s)${failCount > 0 ? `, ${failCount} failed` : ''}`, 'success');
            injectBtn.style.display = 'block';
        } else {
            showStatus('Failed to modify any files', 'error');
        }
    });

    // Inject to site
    injectBtn.addEventListener('click', () => {
        const readyFiles = modifiedFiles.filter(f => f !== null);

        if (readyFiles.length === 0) {
            showStatus('No modified files to inject', 'error');
            return;
        }

        showStatus('Looking for upload form...', 'processing');

        // Find ALL file inputs
        const fileInputs = document.querySelectorAll('input[type="file"]');

        if (fileInputs.length === 0) {
            showStatus('No file upload found on page', 'error');
            return;
        }

        console.log(`Found ${fileInputs.length} file input(s)`);

        // Try each input until one works
        let injected = false;

        for (const input of fileInputs) {
            try {
                // Create DataTransfer with modified files
                const dataTransfer = new DataTransfer();
                readyFiles.forEach(file => dataTransfer.items.add(file));

                // Assign to input
                input.files = dataTransfer.files;

                // Trigger events
                input.dispatchEvent(new Event('change', { bubbles: true }));
                input.dispatchEvent(new Event('input', { bubbles: true }));

                console.log(`Injected ${readyFiles.length} file(s) to input:`, input);
                injected = true;

                // If this is a single file input and we have multiple files,
                // try to find multiple file inputs
                if (!input.multiple && readyFiles.length > 1) {
                    showStatus(`Warning: Input doesn't support multiple files. Only first file injected.`, 'warning');
                } else {
                    showStatus(`✓ Injected ${readyFiles.length} file(s)!`, 'success');
                }

                break; // Stop after first successful injection

            } catch (error) {
                console.error('Failed to inject to input:', error);
                continue; // Try next input
            }
        }

        if (!injected) {
            showStatus('Failed to inject to any file inputs', 'error');
        } else {
            // Auto-close after successful injection
            setTimeout(() => {
                toolDiv.style.display = 'none';
                openBtn.style.display = 'flex';
                showStatus('Ready', 'info');
            }, 1500);
        }
    });

    // Helper functions
    function showStatus(message, type = 'info') {
        status.textContent = message;
        switch(type) {
            case 'success':
                status.style.color = '#4CAF50';
                status.style.background = 'rgba(76, 175, 80, 0.1)';
                break;
            case 'error':
                status.style.color = '#f44336';
                status.style.background = 'rgba(244, 67, 54, 0.1)';
                break;
            case 'warning':
                status.style.color = '#FF9800';
                status.style.background = 'rgba(255, 152, 0, 0.1)';
                break;
            case 'processing':
                status.style.color = '#2196F3';
                status.style.background = 'rgba(33, 150, 243, 0.1)';
                break;
            default:
                status.style.color = '#aaa';
                status.style.background = 'rgba(255, 255, 255, 0.05)';
        }
    }

    function formatFileSize(bytes) {
        if (bytes < 1024) return bytes + ' B';
        if (bytes < 1048576) return (bytes / 1024).toFixed(1) + ' KB';
        return (bytes / 1048576).toFixed(1) + ' MB';
    }

    // Auto-hide when clicking outside
    document.addEventListener('click', (e) => {
        if (!toolDiv.contains(e.target) && e.target !== openBtn && toolDiv.style.display === 'block') {
            toolDiv.style.display = 'none';
            openBtn.style.display = 'flex';
        }
    });

    console.log('Single Pixel Modifier ready!');
})();