script.js

new Vue({
    el: '#app',
    data: {
        colors: [],
        displayedColors: [],
        allResults: [],
        userInput: '',
        loading: true,
        sortBy: 'similarity',
        displayLimit: 50,
    },
    mounted() {
        fetch('https://api.color.pizza/v1/')
            .then(response => response.json())
            .then(data => {
                // Pre-calculate Lab values for performance
                this.colors = data.colors.map(c => {
                    try {
                        const chromaColor = chroma(c.hex);
                        return {
                            ...c,
                            lab: chromaColor.lab(),
                            hex: c.hex // ensure hex is present
                        };
                    } catch (e) {
                        return null;
                    }
                }).filter(Boolean);
                
                this.loading = false;
                console.log(`Loaded ${this.colors.length} colors`);
            })
            .catch(err => {
                console.error("Failed to load colors", err);
                this.loading = false;
                alert("Failed to connect to the color API. Please check your internet connection.");
            });
    },
    methods: {
        isDark(rgb) {
            // Formula from the original CodePen
            if (!rgb) return false;
            // RGB might be object or string depending on API. checks...
            // API returns {r:.., g:.., b:..} usually.
            // Let's use Chroma to be safe if RGB is messy
            // But for detailed control, use the formula provided.
            
            let r, g, b;
            if (typeof rgb === 'object') {
                r = rgb.r; g = rgb.g; b = rgb.b;
            } else {
                // fallback
                 return false; 
            }
            
            return (
                ((parseInt(r) * 299) +
                (parseInt(g) * 587) +
                (parseInt(b) * 114)) / 1000
            ) < 125;
        },
        
        findColors() {
            if (!this.userInput.trim()) return;
            if (this.loading) return;

            const input = this.userInput.trim();
            let targetLab = null;
            let targetName = '';

            // 1. Try to search by name in our loaded list first (for perfect matches like "Brick")
            const nameMatch = this.colors.find(c => c.name.toLowerCase() === input.toLowerCase());
            if (nameMatch) {
                targetLab = nameMatch.lab;
                targetName = nameMatch.name;
            } else {
                // 2. Try to parse as color (Hex, RGB, common name 'red', 'blue')
                if (chroma.valid(input)) {
                    targetLab = chroma(input).lab();
                    targetName = input;
                }
            }

            if (targetLab) {
                // Calculate distances using CIEDE2000 logic from Colordle
                const results = this.colors.map(c => {
                    // Use ciede2000 algorithm
                    const distance = ciede2000(targetLab, c.lab);
                    // Colordle logic: "The closer you are to the mystery color, the higher the percent!"
                    // Formula: 100 - DeltaE
                    const similarity = Math.max(0, 100 - distance);
                    return { ...c, distance, similarity };
                });

                // Sort and take top matches based on displayLimit
                results.sort((a, b) => b.similarity - a.similarity);
                this.allResults = results;
                this.updateDisplayedColors();
                this.sortBy = 'similarity'; // Reset sort on new search
            } else {
                alert("Could not understand that color. Try a hex code, rgb value, or valid color name.");
            }
        },

        sortResults(criteria) {
            this.sortBy = criteria;
            
            if (criteria === 'similarity') {
                this.allResults.sort((a, b) => b.similarity - a.similarity);
            } else if (criteria === 'name') {
                this.allResults.sort((a, b) => a.name.localeCompare(b.name));
            } else if (criteria === 'hex') {
                this.allResults.sort((a, b) => a.hex.localeCompare(b.hex));
            }
            this.updateDisplayedColors();
        },

        updateDisplayLimit() {
            this.updateDisplayedColors();
        },

        loadMore() {
            const currentLength = this.displayedColors.length;
            const nextBatch = this.allResults.slice(currentLength, currentLength + parseInt(this.displayLimit));
            this.displayedColors = [...this.displayedColors, ...nextBatch];
        },
        
        updateDisplayedColors() {
            // When sorting or searching, reset to show just the limit
            this.displayedColors = this.allResults.slice(0, parseInt(this.displayLimit));
        },

        copyName(name) {
            navigator.clipboard.writeText(name).then(() => {
                // You could add a toast notification here if desired
                console.log('Color name copied: ' + name);
            }).catch(err => {
                console.error('Failed to copy text: ', err);
            });
        }
    }
});

// CIEDE2000 algorithm implementation
// Based on: http://www2.ece.rochester.edu/~gsharma/ciede2000/
function ciede2000(lab1, lab2) {
    const L1 = lab1[0], a1 = lab1[1], b1 = lab1[2];
    const L2 = lab2[0], a2 = lab2[1], b2 = lab2[2];
    
    const deg2rad = Math.PI / 180;
    const rad2deg = 180 / Math.PI;

    const kL = 1;
    const kC = 1;
    const kH = 1;

    const C1 = Math.sqrt(a1 * a1 + b1 * b1);
    const C2 = Math.sqrt(a2 * a2 + b2 * b2);
    const C_bar = (C1 + C2) / 2;

    const G = 0.5 * (1 - Math.sqrt(Math.pow(C_bar, 7) / (Math.pow(C_bar, 7) + Math.pow(25, 7))));

    const a1_prime = (1 + G) * a1;
    const a2_prime = (1 + G) * a2;

    const C1_prime = Math.sqrt(a1_prime * a1_prime + b1 * b1);
    const C2_prime = Math.sqrt(a2_prime * a2_prime + b2 * b2);

    let h1_prime = 0;
    if (!(a1_prime === 0 && b1 === 0)) {
        h1_prime = Math.atan2(b1, a1_prime) * rad2deg;
        if (h1_prime < 0) h1_prime += 360;
    }

    let h2_prime = 0;
    if (!(a2_prime === 0 && b2 === 0)) {
        h2_prime = Math.atan2(b2, a2_prime) * rad2deg;
        if (h2_prime < 0) h2_prime += 360;
    }

    const delta_L_prime = L2 - L1;
    const delta_C_prime = C2_prime - C1_prime;

    let delta_h_prime = 0;
    if (C1_prime * C2_prime !== 0) {
        if (Math.abs(h2_prime - h1_prime) <= 180) {
            delta_h_prime = h2_prime - h1_prime;
        } else if (h2_prime - h1_prime > 180) {
            delta_h_prime = h2_prime - h1_prime - 360;
        } else {
            delta_h_prime = h2_prime - h1_prime + 360;
        }
    }
    const delta_H_prime = 2 * Math.sqrt(C1_prime * C2_prime) * Math.sin((delta_h_prime * deg2rad) / 2);

    const L_bar_prime = (L1 + L2) / 2;
    const C_bar_prime = (C1_prime + C2_prime) / 2;

    let h_bar_prime = 0;
    if (C1_prime * C2_prime !== 0) {
        if (Math.abs(h1_prime - h2_prime) <= 180) {
            h_bar_prime = (h1_prime + h2_prime) / 2;
        } else if (h1_prime + h2_prime < 360) {
            h_bar_prime = (h1_prime + h2_prime + 360) / 2;
        } else {
            h_bar_prime = (h1_prime + h2_prime - 360) / 2;
        }
    }

    const T = 1 - 0.17 * Math.cos((h_bar_prime - 30) * deg2rad) 
                + 0.24 * Math.cos((2 * h_bar_prime) * deg2rad) 
                + 0.32 * Math.cos((3 * h_bar_prime + 6) * deg2rad) 
                - 0.20 * Math.cos((4 * h_bar_prime - 63) * deg2rad);

    const delta_theta = 30 * Math.exp(-Math.pow((h_bar_prime - 275) / 25, 2));
    const R_C = 2 * Math.sqrt(Math.pow(C_bar_prime, 7) / (Math.pow(C_bar_prime, 7) + Math.pow(25, 7)));
    const S_L = 1 + (0.015 * Math.pow(L_bar_prime - 50, 2)) / Math.sqrt(20 + Math.pow(L_bar_prime - 50, 2));
    const S_C = 1 + 0.045 * C_bar_prime;
    const S_H = 1 + 0.015 * C_bar_prime * T;
    const R_T = -Math.sin(2 * delta_theta * deg2rad) * R_C;

    const DE = Math.sqrt(
        Math.pow(delta_L_prime / (kL * S_L), 2) + 
        Math.pow(delta_C_prime / (kC * S_C), 2) + 
        Math.pow(delta_H_prime / (kH * S_H), 2) + 
        R_T * (delta_C_prime / (kC * S_C)) * (delta_H_prime / (kH * S_H))
    );

    return DE;
}