script.js

// js/script.js - color conversion, dark mode, copy, reset, mobile menu
(function() {
  'use strict';

  // ---------- DOM elements ----------
  const colorInput = document.getElementById('colorInput');
  const colorPreview = document.getElementById('colorPreview');
  const hexOutput = document.getElementById('hexOutput');
  const rgbOutput = document.getElementById('rgbOutput');
  const hslOutput = document.getElementById('hslOutput');
  const resetBtn = document.getElementById('resetBtn');
  const errorMsg = document.getElementById('errorMsg');
  const copyBtns = document.querySelectorAll('.copy-btn');

  // ---------- Dark mode, mobile menu, back to top (shared) ----------
  const darkToggle = document.getElementById('darkModeToggle');
  const mobileToggle = document.getElementById('mobileToggle');
  const navMenu = document.getElementById('nav-menu');
  const backBtn = document.getElementById('backToTop');

  // Dark mode
  function setDark(enable) {
    document.body.classList.toggle('dark', enable);
    localStorage.setItem('theme', enable ? 'dark' : 'light');
    if (darkToggle) darkToggle.textContent = enable ? '☀️' : '🌙';
  }
  const stored = localStorage.getItem('theme');
  const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
  setDark(stored ? stored === 'dark' : prefersDark);
  if (darkToggle) darkToggle.addEventListener('click', () => setDark(!document.body.classList.contains('dark')));

  // Mobile menu
  if (mobileToggle && navMenu) {
    mobileToggle.addEventListener('click', (e) => {
      e.stopPropagation();
      navMenu.classList.toggle('active');
      mobileToggle.textContent = navMenu.classList.contains('active') ? '✕' : '☰';
    });
    document.querySelectorAll('.nav-menu a').forEach(link => {
      link.addEventListener('click', () => {
        navMenu.classList.remove('active');
        if (mobileToggle) mobileToggle.textContent = '☰';
      });
    });
  }

  // Back to top
  if (backBtn) {
    window.addEventListener('scroll', () => backBtn.classList.toggle('visible', window.scrollY > 400));
    backBtn.addEventListener('click', () => window.scrollTo({ top: 0, behavior: 'smooth' }));
  }

  // ---------- Color conversion functions ----------
  function hexToRgb(hex) {
    let r = 0, g = 0, b = 0;
    // 3 or 6 digits
    if (hex.length === 4) {
      r = parseInt(hex[1] + hex[1], 16);
      g = parseInt(hex[2] + hex[2], 16);
      b = parseInt(hex[3] + hex[3], 16);
    } else if (hex.length === 7) {
      r = parseInt(hex.substring(1,3), 16);
      g = parseInt(hex.substring(3,5), 16);
      b = parseInt(hex.substring(5,7), 16);
    } else {
      return null;
    }
    return { r, g, b };
  }

  function rgbToHex(r, g, b) {
    return '#' + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
  }

  function rgbToHsl(r, g, b) {
    r /= 255; g /= 255; b /= 255;
    const max = Math.max(r, g, b), min = Math.min(r, g, b);
    let h, s, l = (max + min) / 2;
    if (max === min) {
      h = s = 0;
    } else {
      const d = max - min;
      s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
      switch (max) {
        case r: h = (g - b) / d + (g < b ? 6 : 0); break;
        case g: h = (b - r) / d + 2; break;
        case b: h = (r - g) / d + 4; break;
      }
      h /= 6;
    }
    return { h: Math.round(h * 360), s: Math.round(s * 100), l: Math.round(l * 100) };
  }

  function hslToRgb(h, s, l) {
    h /= 360; s /= 100; l /= 100;
    let r, g, b;
    if (s === 0) {
      r = g = b = l;
    } else {
      const hue2rgb = (p, q, t) => {
        if (t < 0) t += 1;
        if (t > 1) t -= 1;
        if (t < 1/6) return p + (q - p) * 6 * t;
        if (t < 1/2) return q;
        if (t < 2/3) return p + (q - p) * (2/3 - t) * 6;
        return p;
      };
      const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
      const p = 2 * l - q;
      r = hue2rgb(p, q, h + 1/3);
      g = hue2rgb(p, q, h);
      b = hue2rgb(p, q, h - 1/3);
    }
    return { r: Math.round(r * 255), g: Math.round(g * 255), b: Math.round(b * 255) };
  }

  // Parse any color string (HEX, RGB, HSL)
  function parseColor(str) {
    str = str.trim().toLowerCase();
    // HEX
    if (str.startsWith('#')) {
      const hex = str;
      if (!/^#([0-9a-f]{3}|[0-9a-f]{6})$/.test(hex)) return null;
      return { format: 'hex', value: hex };
    }
    // RGB
    const rgbMatch = str.match(/^rgb\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3})\)$/);
    if (rgbMatch) {
      const r = parseInt(rgbMatch[1]), g = parseInt(rgbMatch[2]), b = parseInt(rgbMatch[3]);
      if (r > 255 || g > 255 || b > 255) return null;
      return { format: 'rgb', r, g, b };
    }
    // HSL
    const hslMatch = str.match(/^hsl\((\d{1,3}),\s*(\d{1,3})%,\s*(\d{1,3})%\)$/);
    if (hslMatch) {
      let h = parseInt(hslMatch[1]), s = parseInt(hslMatch[2]), l = parseInt(hslMatch[3]);
      if (h > 360) h = 360;
      if (s > 100) s = 100;
      if (l > 100) l = 100;
      return { format: 'hsl', h, s, l };
    }
    return null;
  }

  // Update UI based on input
  function updateFromInput() {
    const raw = colorInput.value.trim();
    const parsed = parseColor(raw);
    if (!parsed) {
      errorMsg.textContent = '❌ Invalid color format. Use HEX (#rrggbb), rgb(r,g,b), or hsl(h,s%,l%)';
      return;
    }
    errorMsg.textContent = '';

    let r, g, b;
    if (parsed.format === 'hex') {
      const rgb = hexToRgb(parsed.value);
      if (!rgb) { errorMsg.textContent = '❌ Invalid HEX'; return; }
      r = rgb.r; g = rgb.g; b = rgb.b;
    } else if (parsed.format === 'rgb') {
      r = parsed.r; g = parsed.g; b = parsed.b;
    } else { // hsl
      const rgb = hslToRgb(parsed.h, parsed.s, parsed.l);
      r = rgb.r; g = rgb.g; b = rgb.b;
    }

    // Update preview
    colorPreview.style.backgroundColor = `rgb(${r},${g},${b})`;

    // Update HEX
    hexOutput.textContent = rgbToHex(r, g, b);
    // Update RGB
    rgbOutput.textContent = `rgb(${r},${g},${b})`;
    // Update HSL
    const hsl = rgbToHsl(r, g, b);
    hslOutput.textContent = `hsl(${hsl.h},${hsl.s}%,${hsl.l}%)`;
  }

  // Reset to default
  function resetToDefault() {
    colorInput.value = '#4f46e5';
    updateFromInput();
  }

  // Event listeners
  colorInput.addEventListener('input', updateFromInput);
  resetBtn.addEventListener('click', resetToDefault);

  // Copy buttons
  copyBtns.forEach(btn => {
    btn.addEventListener('click', (e) => {
      const targetId = btn.getAttribute('data-target');
      if (targetId) {
        const targetEl = document.getElementById(targetId);
        if (targetEl) {
          navigator.clipboard.writeText(targetEl.textContent).then(() => {
            alert('✅ Copied!');
          }).catch(() => alert('❌ Copy failed'));
        }
      }
    });
  });

  // Initial conversion
  updateFromInput();
})();