script.js

// State
let colors = [];
let charColorAssignments = {}; // { charIndex: colorHex }
let isSelecting = false;
let selectionStart = -1;
let selectionEnd = -1;

// Preset gradients organized by category
const PRESETS = {
    "Popular": [
        { name: "Rainbow", colors: ["#ff0000", "#ff8800", "#ffff00", "#00ff00", "#0088ff", "#8800ff"] },
        { name: "Sunset", colors: ["#ff6b6b", "#feca57", "#ff9ff3"] },
        { name: "Ocean", colors: ["#0077b6", "#00b4d8", "#90e0ef"] },
        { name: "Fire", colors: ["#ff0000", "#ff5500", "#ffaa00"] },
        { name: "Aurora", colors: ["#00c9ff", "#92fe9d"] },
        { name: "Sakura", colors: ["#ff69b4", "#ffb7c5", "#ffffff"] },
    ],
    "Vibrant": [
        { name: "Cyberpunk", colors: ["#00ffff", "#ff00ff", "#ffff00"] },
        { name: "Vaporwave", colors: ["#ff71ce", "#01cdfe", "#05ffa1"] },
        { name: "Electric", colors: ["#00f5ff", "#0080ff", "#8000ff"] },
        { name: "Neon", colors: ["#ff006e", "#8338ec", "#3a86ff"] },
        { name: "Tropical", colors: ["#f72585", "#7209b7", "#4cc9f0"] },
        { name: "Candy", colors: ["#ff6b6b", "#ffd93d", "#6bcb77"] },
    ],
    "Soft": [
        { name: "Cotton Candy", colors: ["#ffb7d5", "#c5a3ff", "#a3d5ff"] },
        { name: "Peach", colors: ["#ffcdb2", "#ffb4a2", "#e5989b"] },
        { name: "Mint", colors: ["#b8f2e6", "#aed9e0", "#89c2d9"] },
        { name: "Lavender", colors: ["#e0aaff", "#c77dff", "#9d4edd"] },
        { name: "Autumn", colors: ["#ff6b35", "#f7931e", "#f9c74f"] },
        { name: "Forest", colors: ["#134e5e", "#4a7c59", "#71b280"] },
    ],
};

// ============================================================================
// COLOR UTILITIES
// ============================================================================

function hexToRgb(hex) {
    hex = hex.replace('#', '');
    return {
        r: parseInt(hex.substr(0, 2), 16),
        g: parseInt(hex.substr(2, 2), 16),
        b: parseInt(hex.substr(4, 2), 16)
    };
}

function rgbToHex(r, g, b) {
    const toHex = (n) => {
        const hex = Math.round(n).toString(16);
        return hex.length === 1 ? '0' + hex : hex;
    };
    return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
}

function interpolateColors(colorArray, numSteps) {
    if (numSteps <= 0) return [];
    if (numSteps === 1) return [colorArray[0]];
    if (colorArray.length === 1) return Array(numSteps).fill(colorArray[0]);

    const result = [];
    const numSegments = colorArray.length - 1;
    const stepsPerSegment = (numSteps - 1) / numSegments;

    for (let i = 0; i < numSteps; i++) {
        const segmentFloat = stepsPerSegment > 0 ? i / stepsPerSegment : 0;
        const segment = Math.min(Math.floor(segmentFloat), numSegments - 1);
        const localT = segmentFloat - segment;

        const color1 = hexToRgb(colorArray[segment]);
        const color2 = hexToRgb(colorArray[Math.min(segment + 1, colorArray.length - 1)]);

        const r = color1.r + (color2.r - color1.r) * localT;
        const g = color1.g + (color2.g - color1.g) * localT;
        const b = color1.b + (color2.b - color1.b) * localT;

        result.push(rgbToHex(r, g, b));
    }

    return result;
}

// ============================================================================
// COLOR MANAGEMENT
// ============================================================================

function addColor(color) {
    colors.push(color);
    updateAll();
}

function removeColor(index) {
    colors.splice(index, 1);
    updateAll();
}

function clearColors() {
    colors = [];
    updateAll();
}

function applyPreset(presetColors) {
    colors = [...presetColors];
    updateAll();
}

// ============================================================================
// UI UPDATES
// ============================================================================

function updateColorDisplay() {
    const display = document.getElementById('colorDisplay');
    display.innerHTML = '';

    if (colors.length === 0) {
        display.className = 'color-display-compact empty';
        display.innerHTML = `<div class="empty-state">Add colors to get started</div>`;
        return;
    }

    display.className = 'color-display-compact';
    colors.forEach((color, index) => {
        const swatch = document.createElement('div');
        swatch.className = 'color-swatch';

        const swatchBox = document.createElement('div');
        swatchBox.className = 'swatch-box';
        swatchBox.style.background = color;
        swatchBox.dataset.color = color;

        // Click to remove color
        swatchBox.onclick = () => removeColor(index);
        swatchBox.title = 'Click to remove';

        const label = document.createElement('div');
        label.className = 'swatch-label';
        label.textContent = color;

        swatch.appendChild(swatchBox);
        swatch.appendChild(label);
        display.appendChild(swatch);
    });
}

function updatePreview() {
    const preview = document.getElementById('preview');
    const text = document.getElementById('textInput').value;

    if (!text) {
        preview.className = 'preview empty';
        preview.textContent = 'Type a message above';
        return;
    }

    preview.className = 'preview';
    preview.innerHTML = '';

    // Calculate gradient for entire text (or use white as default)
    const colorsToUse = colors.length >= 2 ? colors : (colors.length === 1 ? [...colors, ...colors] : ['#ffffff']);
    const allChars = text.split('').filter(c => c !== ' ');
    const gradient = allChars.length > 0 ? interpolateColors(colorsToUse, allChars.length) : [];

    let charIndex = 0;
    let currentMarker = null;
    let markerStartIndex = -1;

    // Helper function to find next non-space character index
    const findNextNonSpaceCharIndex = (startPos) => {
        let tempCharIndex = charIndex;
        for (let j = startPos + 1; j < text.length; j++) {
            if (text[j] !== ' ') {
                return tempCharIndex + 1;
            }
        }
        return -1;
    };

    // Create individual character spans for drag selection
    for (let i = 0; i < text.length; i++) {
        const char = text[i];

        if (char === ' ') {
            // Add space element
            const space = document.createElement('span');
            space.textContent = ' ';
            space.className = 'space-char';
            // Store the index of the character before this space for selection purposes
            space.dataset.afterCharIndex = charIndex - 1;

            // Only add space to marker if next non-space char also has custom color
            if (currentMarker) {
                const nextCharIndex = findNextNonSpaceCharIndex(i);
                const nextHasCustomColor = nextCharIndex !== -1 && charColorAssignments[nextCharIndex] !== undefined;

                if (nextHasCustomColor) {
                    // Next char is also colored, include space in marker
                    currentMarker.appendChild(space);
                } else {
                    // Next char is not colored, close marker and add space outside
                    currentMarker.dataset.endIndex = charIndex - 1;
                    preview.appendChild(currentMarker);
                    currentMarker = null;
                    markerStartIndex = -1;
                    preview.appendChild(space);
                }
            } else {
                preview.appendChild(space);
            }
        } else {
            const hasCustomColor = charColorAssignments[charIndex] !== undefined;

            // Create selectable character span
            const span = document.createElement('span');
            span.className = 'char-span';
            span.dataset.charIndex = charIndex;
            span.textContent = char;

            // Check if this character has a custom color
            if (hasCustomColor) {
                span.style.color = charColorAssignments[charIndex];
                span.classList.add('has-custom-color');

                // Start or continue a marker
                if (!currentMarker) {
                    currentMarker = document.createElement('span');
                    currentMarker.className = 'color-marker';
                    markerStartIndex = charIndex;
                    currentMarker.dataset.startIndex = markerStartIndex;
                }
                currentMarker.appendChild(span);
            } else {
                // Close current marker if any
                if (currentMarker) {
                    currentMarker.dataset.endIndex = charIndex - 1;
                    preview.appendChild(currentMarker);
                    currentMarker = null;
                    markerStartIndex = -1;
                }

                if (gradient.length > 0) {
                    span.style.color = gradient[charIndex];
                } else {
                    span.style.color = '#ffffff'; // Default to white
                }
                preview.appendChild(span);
            }

            charIndex++;
        }
    }

    // Close any remaining marker
    if (currentMarker) {
        currentMarker.dataset.endIndex = charIndex - 1;
        preview.appendChild(currentMarker);
    }

    // Add click handlers to markers
    document.querySelectorAll('.color-marker').forEach(marker => {
        marker.addEventListener('click', (e) => {
            // Only trigger if clicking the marker itself, not during drag selection or if picker is open
            if (!isSelecting && (!popupPickr || !popupPickr.isOpen())) {
                const start = parseInt(marker.dataset.startIndex);
                const end = parseInt(marker.dataset.endIndex);
                clearColorRange(start, end);
                e.stopPropagation();
                e.preventDefault();
            }
        });
    });
}

function clearColorRange(start, end) {
    for (let i = start; i <= end; i++) {
        delete charColorAssignments[i];
    }
    updateAll();
    showToast('Custom colors removed!', 'success');
}

function generateOutput() {
    const text = document.getElementById('textInput').value;
    const output = document.getElementById('output');
    const charCounter = document.getElementById('charCounter');

    if (!text) {
        output.value = '';
        charCounter.textContent = '0/300';
        charCounter.style.color = 'var(--text-muted)';
        return;
    }

    // Use white as default if no colors selected
    const colorsToUse = colors.length > 0 ? colors : ['#ffffff'];

    // Generate text with mixed gradient and custom character colors
    const coloredText = generateMixedColorText(text, colorsToUse);
    output.value = coloredText;

    // Update character counter
    const charCount = coloredText.length;
    charCounter.textContent = `${charCount}/300`;

    // Change color based on length
    if (charCount > 300) {
        charCounter.style.color = 'var(--error)';
    } else if (charCount > 250) {
        charCounter.style.color = '#fbbf24'; // Warning yellow
    } else {
        charCounter.style.color = 'var(--success)';
    }
}

function generateMixedColorText(text, colorArray) {
    if (!text || !colorArray || colorArray.length === 0) return '';

    let result = '';

    // Calculate gradient for entire text
    const colorsToUse = colorArray.length >= 2 ? colorArray : [...colorArray, ...colorArray];
    const allChars = text.split('').filter(c => c !== ' ');
    const gradient = allChars.length > 0 ? interpolateColors(colorsToUse, allChars.length) : [];

    let charIndex = 0;
    let lastColor = null;

    for (let i = 0; i < text.length; i++) {
        const char = text[i];

        if (char === ' ') {
            result += ' ';
        } else {
            // Get color for this character
            let currentColor;
            if (charColorAssignments[charIndex]) {
                currentColor = charColorAssignments[charIndex];
            } else if (gradient.length > 0) {
                currentColor = gradient[charIndex];
            } else {
                currentColor = null;
            }

            // Only add color code if it's different from the last one
            if (currentColor && currentColor !== lastColor) {
                result += currentColor + char;
                lastColor = currentColor;
            } else {
                result += char;
            }
            charIndex++;
        }
    }

    return result;
}

function updateAll() {
    updateColorDisplay();
    updatePreview();
    generateOutput();
}

// ============================================================================
// PRESET BUTTONS
// ============================================================================

function generatePresetButtons() {
    const container = document.getElementById('presetsContainer');
    container.innerHTML = '';

    for (const [category, items] of Object.entries(PRESETS)) {
        // Add category header
        const header = document.createElement('div');
        header.className = 'preset-category';
        header.textContent = category;
        container.appendChild(header);

        // Add preset buttons
        items.forEach(preset => {
            const btn = document.createElement('button');
            btn.className = 'preset-btn';
            btn.textContent = preset.name;

            // Set gradient preview
            const gradientCSS = `linear-gradient(90deg, ${preset.colors.join(', ')})`;
            btn.style.setProperty('--preset-gradient', gradientCSS);

            btn.onclick = () => applyPreset(preset.colors);
            container.appendChild(btn);
        });
    }
}

// ============================================================================
// CLIPBOARD
// ============================================================================

function copyToClipboard() {
    const output = document.getElementById('output');
    const text = output.value;

    if (!text) {
        showToast('Nothing to copy! Add at least 2 colors first.', 'error');
        return;
    }

    output.select();
    document.execCommand('copy');

    // Also try modern clipboard API
    if (navigator.clipboard) {
        navigator.clipboard.writeText(text);
    }

    showToast('Copied to clipboard!', 'success');
}

// ============================================================================
// TOAST NOTIFICATIONS
// ============================================================================

function showToast(message, type = 'success') {
    const existingToast = document.querySelector('.toast');
    if (existingToast) {
        existingToast.remove();
    }

    const toast = document.createElement('div');
    toast.className = `toast ${type}`;

    const icon = type === 'success' ? '✓' : '✕';
    toast.innerHTML = `<span style="font-size: 18px;">${icon}</span> ${message}`;

    document.body.appendChild(toast);

    // Wait for animations to complete: slideUp starts at 1.7s and runs for 0.3s = 2.0s total
    setTimeout(() => {
        toast.remove();
    }, 2100);
}

// ============================================================================
// COLOR PICKER POPUP
// ============================================================================

// Store selection position for picker positioning
let selectionPosition = { x: 0, y: 0 };

function openColorPickerPopup() {
    // Set initial color to first selected char's color if it has one
    const firstSelectedCharIdx = Math.min(selectionStart, selectionEnd);
    if (charColorAssignments[firstSelectedCharIdx]) {
        const color = charColorAssignments[firstSelectedCharIdx];
        popupPickr.setColor(color);
    }

    // Calculate position based on selected characters
    const selectedChars = document.querySelectorAll('.char-selected');
    if (selectedChars.length > 0) {
        // Get bounding rectangle of first and last selected elements
        const firstChar = selectedChars[0];
        const lastChar = selectedChars[selectedChars.length - 1];
        const firstRect = firstChar.getBoundingClientRect();
        const lastRect = lastChar.getBoundingClientRect();

        // Store position for use in show event
        selectionPosition.x = (firstRect.left + lastRect.right) / 2;
        selectionPosition.y = firstRect.top;

        // Show the picker
        popupPickr.show();
    }
}

function applyColorToSelection(color) {
    const start = Math.min(selectionStart, selectionEnd);
    const end = Math.max(selectionStart, selectionEnd);

    // Apply color to all selected characters
    for (let i = start; i <= end; i++) {
        charColorAssignments[i] = color;
    }

    updateAll();
}

function clearSelectedColors() {
    const start = Math.min(selectionStart, selectionEnd);
    const end = Math.max(selectionStart, selectionEnd);

    // Remove color assignments for selected characters
    for (let i = start; i <= end; i++) {
        delete charColorAssignments[i];
    }

    updateAll();
    showToast('Selection cleared!', 'success');
}

function clearSelection() {
    selectionStart = -1;
    selectionEnd = -1;
    isSelecting = false;

    // Remove selection highlights
    document.querySelectorAll('.char-selected').forEach(el => {
        el.classList.remove('char-selected');
    });
}

// ============================================================================
// CHARACTER SELECTION
// ============================================================================

function setupCharacterSelection() {
    const preview = document.getElementById('preview');

    preview.addEventListener('mousedown', (e) => {
        // Don't start selection if picker is open
        if (popupPickr && popupPickr.isOpen()) return;

        let startCharIdx = -1;
        let targetElement = null;

        if (e.target.classList.contains('char-span')) {
            // Check if this char-span is inside a marker
            const marker = e.target.parentElement;
            if (marker && marker.classList.contains('color-marker')) {
                // Don't start selection on colored text - let marker handle clicks
                return;
            }

            startCharIdx = parseInt(e.target.dataset.charIndex);
            targetElement = e.target;
        } else if (e.target.classList.contains('space-char')) {
            // Clicking on space - start selection at the next character
            const afterIdx = parseInt(e.target.dataset.afterCharIndex);
            startCharIdx = afterIdx + 1;

            // Find the next character span to highlight
            const allChars = preview.querySelectorAll('.char-span');
            for (let span of allChars) {
                if (parseInt(span.dataset.charIndex) === startCharIdx) {
                    targetElement = span;
                    break;
                }
            }
        } else if (e.target === preview || e.target.classList.contains('preview')) {
            // Clicking on preview background - find nearest character
            const allChars = preview.querySelectorAll('.char-span');
            if (allChars.length > 0) {
                let nearestChar = null;
                let minDistance = Infinity;

                // Find the character closest to the click
                allChars.forEach(char => {
                    const rect = char.getBoundingClientRect();
                    const charCenterX = rect.left + rect.width / 2;
                    const charCenterY = rect.top + rect.height / 2;
                    const distance = Math.sqrt(
                        Math.pow(e.clientX - charCenterX, 2) +
                        Math.pow(e.clientY - charCenterY, 2)
                    );

                    if (distance < minDistance) {
                        minDistance = distance;
                        nearestChar = char;
                    }
                });

                if (nearestChar) {
                    startCharIdx = parseInt(nearestChar.dataset.charIndex);
                    targetElement = nearestChar;
                }
            }
        }

        if (startCharIdx !== -1 && targetElement) {
            // Clear previous selection first
            document.querySelectorAll('.char-selected').forEach(el => {
                el.classList.remove('char-selected');
            });

            isSelecting = true;
            selectionStart = startCharIdx;
            selectionEnd = startCharIdx;
            targetElement.classList.add('char-selected');
            e.preventDefault();
        }
    });

    preview.addEventListener('mousemove', (e) => {
        // Don't process mousemove if picker is open
        if (popupPickr && popupPickr.isOpen()) return;

        if (isSelecting) {
            let charIdx = -1;

            if (e.target.classList.contains('char-span')) {
                charIdx = parseInt(e.target.dataset.charIndex);
            } else if (e.target.classList.contains('space-char')) {
                // Dragging over space - extend selection to the next character
                const afterIdx = parseInt(e.target.dataset.afterCharIndex);
                charIdx = afterIdx + 1;
            }

            if (charIdx !== -1) {
                selectionEnd = charIdx;
                updateSelectionHighlight();
            }
        }
    });

    document.addEventListener('mouseup', () => {
        if (isSelecting) {
            isSelecting = false;
            if (selectionStart !== -1 && selectionEnd !== -1) {
                openColorPickerPopup();
            } else {
                clearSelection();
            }
        }
    });
}

function updateSelectionHighlight() {
    const start = Math.min(selectionStart, selectionEnd);
    const end = Math.max(selectionStart, selectionEnd);

    // Highlight character spans
    document.querySelectorAll('.char-span').forEach(el => {
        const idx = parseInt(el.dataset.charIndex);
        if (idx >= start && idx <= end) {
            el.classList.add('char-selected');
        } else {
            el.classList.remove('char-selected');
        }
    });

    // Also highlight spaces that are between selected characters
    document.querySelectorAll('.space-char').forEach(el => {
        const afterIdx = parseInt(el.dataset.afterCharIndex);
        // Highlight space if it's between two selected characters
        if (afterIdx >= start - 1 && afterIdx < end) {
            el.classList.add('char-selected');
        } else {
            el.classList.remove('char-selected');
        }
    });
}

// ============================================================================
// INITIALIZATION
// ============================================================================

// Pickr instances
let gradientPickr;
let popupPickr;

document.addEventListener('DOMContentLoaded', () => {
    generatePresetButtons();

    // Load Rainbow preset by default
    const rainbowPreset = PRESETS["Popular"].find(p => p.name === "Rainbow");
    if (rainbowPreset) {
        applyPreset(rainbowPreset.colors);
    }

    updateAll();

    // Setup character selection
    setupCharacterSelection();

    // Initialize Pickr for gradient colors
    gradientPickr = Pickr.create({
        el: '#gradientPickr',
        theme: 'monolith',
        default: '#ff0000',
        swatches: [
            '#ff0000', '#ff8800', '#ffff00', '#00ff00', '#0088ff', '#8800ff',
            '#ff69b4', '#00ffff', '#ffa500', '#800080',
            '#ffffff', '#000000', '#808080', '#ff69b4', '#98fb98', '#87ceeb'
        ],
        components: {
            preview: true,
            opacity: false,
            hue: true,
            interaction: {
                hex: true,
                rgba: true,
                input: true,
                save: true
            }
        }
    });

    // Add color when Save button is clicked
    gradientPickr.on('save', (color) => {
        const hexColor = color.toHEXA().toString().toLowerCase();
        addColor(hexColor);
        gradientPickr.hide();
    });

    // Initialize Pickr for text selection
    popupPickr = Pickr.create({
        el: '#selectionPickrContainer',
        theme: 'monolith',
        default: '#ff0000',
        swatches: [
            '#ff0000', '#ff8800', '#ffff00', '#00ff00', '#0088ff', '#8800ff',
            '#ff69b4', '#00ffff', '#ffa500', '#800080',
            '#ffffff', '#000000', '#808080', '#ff69b4', '#98fb98', '#87ceeb'
        ],
        components: {
            preview: true,
            opacity: false,
            hue: true,
            interaction: {
                hex: true,
                rgba: true,
                input: true,
                clear: true,
                save: true
            }
        }
    });

    // Hide the Pickr button (we only use the popup programmatically)
    const popupPickrButton = popupPickr.getRoot().button;
    if (popupPickrButton) {
        popupPickrButton.style.display = 'none';
    }

    // Position picker at selection when shown
    popupPickr.on('show', () => {
        requestAnimationFrame(() => {
            // Get the picker's app element (Pickr stores reference to it)
            const pickerApp = popupPickr.getRoot().app;
            if (pickerApp && selectionPosition.x && selectionPosition.y) {
                // Position picker above the selection, centered
                const pickerWidth = pickerApp.offsetWidth || 380;
                const pickerHeight = pickerApp.offsetHeight || 400;

                let left = selectionPosition.x - (pickerWidth / 2);
                let top = selectionPosition.y - pickerHeight - 10;

                // Keep picker within viewport
                if (left < 10) left = 10;
                if (left + pickerWidth > window.innerWidth - 10) {
                    left = window.innerWidth - pickerWidth - 10;
                }
                if (top < 10) {
                    // Show below selection if not enough space above
                    top = selectionPosition.y + 40;
                }

                pickerApp.style.position = 'fixed';
                pickerApp.style.left = `${left}px`;
                pickerApp.style.top = `${top}px`;
                pickerApp.style.transform = 'none';
            }
        });
    });

    // Real-time color application for selection picker
    popupPickr.on('change', (color) => {
        if (selectionStart !== -1 && selectionEnd !== -1) {
            applyColorToSelection(color.toHEXA().toString().toLowerCase());
        }
    });

    // Handle clear button
    popupPickr.on('clear', () => {
        clearSelectedColors();
        popupPickr.hide();
    });

    // Close picker when Save button is clicked
    popupPickr.on('save', () => {
        if (selectionStart !== -1 && selectionEnd !== -1) {
            const color = popupPickr.getColor().toHEXA().toString().toLowerCase();
            applyColorToSelection(color);
        }
        popupPickr.hide();
        clearSelection();
    });

    // Clear selection when picker hides
    popupPickr.on('hide', () => {
        clearSelection();
    });
});