newtab.js

'use strict';

/* ============================================================
   Constants
   ============================================================ */
const SEARCH_ENGINES = {
  google:     q => `https://www.google.com/search?q=${q}`,
  bing:       q => `https://www.bing.com/search?q=${q}`,
  duckduckgo: q => `https://duckduckgo.com/?q=${q}`,
  ecosia:     q => `https://www.ecosia.org/search?q=${q}`,
  startpage:  q => `https://www.startpage.com/do/search?q=${q}`,
  brave:      q => `https://search.brave.com/search?q=${q}`,
  yahoo:      q => `https://search.yahoo.com/search?p=${q}`,
};

const MAX_QUICK_LINKS = 8;

const FONT_FAMILIES = {
  inter:  '"InterVariable", system-ui, -apple-system, sans-serif',
  system: 'system-ui, -apple-system, sans-serif',
  mono:   '"SF Mono", "Fira Code", ui-monospace, monospace',
  serif:  'ui-serif, Georgia, serif',
};

const DEFAULTS = Object.freeze({
  backgroundType:       'color',
  backgroundColor:      '#0d0d10',
  backgroundGradient:   '#0d0d10,#1a1a2e',
  backgroundURL:        '',
  backgroundVideoURL:   '',
  backgroundAnim:       false,
  overlayOpacity:       0,

  glassBlur:            16,
  glassOpacity:         8,
  glassBorderOpacity:   12,

  textPrimaryOpacity:   95,
  textSecondaryOpacity: 55,

  searchEngine:         'google',
  openInNewTab:         true,
  searchRadius:         100,

  clock24h:             true,
  showSeconds:          false,
  showDate:             true,
  clockSize:            'md',
  clockWeight:          '500',
  clockColor:           '',
  dateColor:            '',
  fontFamily:           'inter',
  fontOpsz:             0,
  letterSpacing:        -2,

  showFavicons:         true,
  quickLinks:           [],
  customCSS:            '',
});

/* ============================================================
   State
   ============================================================ */
let S = { ...DEFAULTS };
let dragSrcIndex = null;

/* ============================================================
   DOM refs (cached once after DOMContentLoaded)
   ============================================================ */
const $ = id => document.getElementById(id);
let elTime, elDate, elSearchInput, elQuickLinks, elBg;
let elSidebar, elSidebarClose, elSettingsBtn, elBackdrop;

/* ============================================================
   Utility helpers
   ============================================================ */

/** Create element with optional attributes + children */
function el(tag, attrs = {}, ...children) {
  const node = document.createElement(tag);
  for (const [k, v] of Object.entries(attrs)) {
    if (k === 'className') node.className = v;
    else if (k.startsWith('on') && typeof v === 'function')
      node.addEventListener(k.slice(2).toLowerCase(), v);
    else if (k === 'textContent') node.textContent = v;
    else if (k === 'htmlFor') node.htmlFor = v;
    else node.setAttribute(k, v);
  }
  for (const child of children) {
    if (child == null) continue;
    if (typeof child === 'string') node.append(document.createTextNode(child));
    else node.append(child);
  }
  return node;
}

/** Debounce – delays fn until ms ms after last call */
function debounce(fn, ms = 400) {
  let t;
  return (...args) => { clearTimeout(t); t = setTimeout(() => fn(...args), ms); };
}

/** Write a single key to chrome.storage.local */
function save(key, value) {
  chrome.storage.local.set({ [key]: value });
}

/** Write multiple keys */
function saveAll(obj) {
  chrome.storage.local.set(obj);
}

/** Favicon helper */
function getFaviconURL(url) {
  try {
    const origin = new URL(url).origin;
    return `https://www.google.com/s2/favicons?domain=${origin}&sz=32`;
  } catch { return ''; }
}

/* ============================================================
   Clock
   ============================================================ */
let clockInterval = null;

function updateClock() {
  const now = new Date();
  let h = now.getHours(), m = now.getMinutes(), s = now.getSeconds();
  const is24 = S.clock24h;
  let period = '';

  if (!is24) {
    period = h >= 12 ? ' PM' : ' AM';
    h = h % 12 || 12;
  }

  const pad = n => String(n).padStart(2, '0');
  elTime.textContent = S.showSeconds
    ? `${pad(h)}:${pad(m)}:${pad(s)}${period}`
    : `${pad(h)}:${pad(m)}${period}`;

  if (S.showDate) {
    elDate.textContent = now.toLocaleDateString('en-US', {
      weekday: 'long', year: 'numeric', month: 'long', day: 'numeric',
    });
    elDate.hidden = false;
  } else {
    elDate.hidden = true;
  }
}

function startClock() {
  clearInterval(clockInterval);
  updateClock();
  if (S.showSeconds) {
    clockInterval = setInterval(updateClock, 1000);
  } else {
    const now = new Date();
    const msToNextMin = (60 - now.getSeconds()) * 1000 - now.getMilliseconds();
    setTimeout(() => {
      updateClock();
      clockInterval = setInterval(updateClock, 60_000);
    }, msToNextMin);
  }
}

function applyClockStyles() {
  elTime.className = `clock clock--${S.clockSize}`;
  elTime.style.fontWeight = S.clockWeight;
  elTime.style.fontVariationSettings = `"GRAD" ${S.fontOpsz}`;
  elTime.style.letterSpacing = `${S.letterSpacing / 100}em`;

  if (S.clockColor) {
    document.documentElement.style.setProperty('--clock-color', S.clockColor);
  } else {
    document.documentElement.style.removeProperty('--clock-color');
  }

  if (S.dateColor) {
    document.documentElement.style.setProperty('--date-color', S.dateColor);
  } else {
    document.documentElement.style.removeProperty('--date-color');
  }
}

/* ============================================================
   Background
   ============================================================ */
function applyBackground() {
  const existingVideo = elBg.querySelector('video');
  if (existingVideo) existingVideo.remove();
  elBg.style.backgroundImage = '';
  elBg.style.background = '';
  elBg.classList.remove('bg-animated');

  switch (S.backgroundType) {
    case 'image':
      if (S.backgroundURL) {
        elBg.style.backgroundImage = `url(${S.backgroundURL})`;
        elBg.style.backgroundSize = 'cover';
        elBg.style.backgroundPosition = 'center';
      }
      break;

    case 'gradient': {
      const stops = S.backgroundGradient || '#0d0d10,#1a1a2e';
      elBg.style.background = `linear-gradient(135deg, ${stops})`;
      if (S.backgroundAnim) {
        elBg.classList.add('bg-animated');
      }
      break;
    }

    case 'video':
      if (S.backgroundVideoURL) {
        const video = el('video', {
          src: S.backgroundVideoURL,
          autoplay: '',
          loop: '',
          muted: '',
          playsinline: '',
          'aria-hidden': 'true',
        });
        video.muted = true;
        elBg.append(video);
      }
      break;

    default:
      elBg.style.background = S.backgroundColor;
  }

  document.documentElement.style.setProperty('--overlay-opacity', S.overlayOpacity / 100);
}

/* ============================================================
   Glass, Text, Typography, Search, Custom CSS
   ============================================================ */
function applyGlass() {
  document.documentElement.style.setProperty('--glass-blur', `${S.glassBlur}px`);
  document.documentElement.style.setProperty('--glass-bg', `rgba(255 255 255 / ${S.glassOpacity / 100})`);
  document.documentElement.style.setProperty('--glass-bg-hover', `rgba(255 255 255 / ${Math.min((S.glassOpacity / 100) + 0.06, 0.5)})`);
  document.documentElement.style.setProperty('--glass-border', `rgba(255 255 255 / ${S.glassBorderOpacity / 100})`);
}

function applyTextColors() {
  document.documentElement.style.setProperty('--text-primary', `rgba(255 255 255 / ${S.textPrimaryOpacity / 100})`);
  document.documentElement.style.setProperty('--text-secondary', `rgba(255 255 255 / ${S.textSecondaryOpacity / 100})`);
  const muted = Math.max((S.textSecondaryOpacity / 100) - 0.23, 0.08);
  document.documentElement.style.setProperty('--text-muted', `rgba(255 255 255 / ${muted})`);
}

function applyTypography() {
  const ff = FONT_FAMILIES[S.fontFamily] || FONT_FAMILIES.inter;
  document.documentElement.style.setProperty('--font-body', ff);
}

function applySearchStyle() {
  document.documentElement.style.setProperty('--search-radius', `${S.searchRadius}px`);
}

function applyCustomCSS() {
  let styleTag = document.getElementById('custom-css-style');
  if (!styleTag) {
    styleTag = el('style', { id: 'custom-css-style' });
    document.head.append(styleTag);
  }
  styleTag.textContent = S.customCSS || '';
}

/* ============================================================
   Quick Links (main page)
   ============================================================ */
function renderQuickLinks() {
  elQuickLinks.textContent = '';
  S.quickLinks.forEach(link => {
    const children = [];

    if (S.showFavicons && link.url) {
      const favicon = el('img', {
        className: 'quick-link-favicon',
        src: getFaviconURL(link.url),
        alt: '',
        loading: 'lazy',
        width: '14',
        height: '14',
      });
      children.push(favicon);
    }

    children.push(document.createTextNode(link.name || link.url));

    const anchor = el('a', {
      className: 'quick-link',
      href: link.url,
      title: link.url,
      onClick: e => {
        e.preventDefault();
        navigateTo(link.url);
      },
    }, ...children);

    elQuickLinks.append(anchor);
  });
}

function navigateTo(url) {
  if (S.openInNewTab) {
    chrome.tabs.create({ url });
  } else {
    chrome.tabs.getCurrent(tab => chrome.tabs.update(tab.id, { url }));
  }
}

/* ============================================================
   Search
   ============================================================ */
function initSearch() {
  elSearchInput.addEventListener('keydown', e => {
    if (e.key !== 'Enter') return;
    const q = elSearchInput.value.trim();
    if (!q) return;

    let url;
    try {
      url = new URL(q).href;
    } catch {
      if (/^[\\w-]+\\.[\\w.-]+/.test(q) && !q.includes(' ')) {
        url = `https://${q}`;
      } else {
        const encodedQ = encodeURIComponent(q);
        const engine = SEARCH_ENGINES[S.searchEngine] || SEARCH_ENGINES.google;
        url = engine(encodedQ);
      }
    }

    navigateTo(url);
    elSearchInput.value = '';
  });
}

/* ============================================================
   Sidebar
   ============================================================ */
function openSidebar() {
  elSidebar.classList.add('is-open');
  elSidebar.setAttribute('aria-hidden', 'false');
  elSettingsBtn.setAttribute('aria-expanded', 'true');
  elBackdrop.classList.add('is-visible');
  elSidebarClose.focus();
}

function closeSidebar() {
  elSidebar.classList.remove('is-open');
  elSidebar.setAttribute('aria-hidden', 'true');
  elSettingsBtn.setAttribute('aria-expanded', 'false');
  elBackdrop.classList.remove('is-visible');
  elSettingsBtn.focus();
}

function initSidebar() {
  elSettingsBtn.addEventListener('click', openSidebar);
  elSidebarClose.addEventListener('click', closeSidebar);
  elBackdrop.addEventListener('click', closeSidebar);

  document.addEventListener('keydown', e => {
    if (e.key === 'Escape' && elSidebar.classList.contains('is-open')) {
      closeSidebar();
    }
  });

  // --- Background type ---
  const bgTypeSelect = $('bg-type');
  bgTypeSelect.value = S.backgroundType;
  bgTypeSelect.addEventListener('change', () => {
    S.backgroundType = bgTypeSelect.value;
    save('backgroundType', S.backgroundType);
    renderBgOptions();
    applyBackground();
    updateBgAnimVisibility();
  });
  renderBgOptions();

  // --- Background animation ---
  const bgAnimChk = $('bg-anim');
  if (bgAnimChk) {
    bgAnimChk.checked = S.backgroundAnim;
    bgAnimChk.addEventListener('change', () => {
      S.backgroundAnim = bgAnimChk.checked;
      save('backgroundAnim', S.backgroundAnim);
      applyBackground();
    });
    updateBgAnimVisibility();
  }

  // --- Overlay ---
  const overlaySlider = $('overlay-opacity');
  const overlayVal = $('overlay-opacity-val');
  overlaySlider.value = S.overlayOpacity;
  overlayVal.textContent = `${S.overlayOpacity}%`;
  overlaySlider.addEventListener('input', () => {
    S.overlayOpacity = +overlaySlider.value;
    overlayVal.textContent = `${S.overlayOpacity}%`;
    document.documentElement.style.setProperty('--overlay-opacity', S.overlayOpacity / 100);
  });
  overlaySlider.addEventListener('change', () => save('overlayOpacity', S.overlayOpacity));

  // --- Glass ---
  const glassBlurSlider = $('glass-blur');
  const glassBlurVal = $('glass-blur-val');
  glassBlurSlider.value = S.glassBlur;
  glassBlurVal.textContent = `${S.glassBlur}px`;
  glassBlurSlider.addEventListener('input', () => {
    S.glassBlur = +glassBlurSlider.value;
    glassBlurVal.textContent = `${S.glassBlur}px`;
    applyGlass();
  });
  glassBlurSlider.addEventListener('change', () => save('glassBlur', S.glassBlur));

  const glassOpSlider = $('glass-opacity');
  const glassOpVal = $('glass-opacity-val');
  glassOpSlider.value = S.glassOpacity;
  glassOpVal.textContent = `${S.glassOpacity}%`;
  glassOpSlider.addEventListener('input', () => {
    S.glassOpacity = +glassOpSlider.value;
    glassOpVal.textContent = `${S.glassOpacity}%`;
    applyGlass();
  });
  glassOpSlider.addEventListener('change', () => save('glassOpacity', S.glassOpacity));

  const glassBorderSlider = $('glass-border-opacity');
  const glassBorderVal = $('glass-border-opacity-val');
  glassBorderSlider.value = S.glassBorderOpacity;
  glassBorderVal.textContent = `${S.glassBorderOpacity}%`;
  glassBorderSlider.addEventListener('input', () => {
    S.glassBorderOpacity = +glassBorderSlider.value;
    glassBorderVal.textContent = `${S.glassBorderOpacity}%`;
    applyGlass();
  });
  glassBorderSlider.addEventListener('change', () => save('glassBorderOpacity', S.glassBorderOpacity));

  // --- Clock ---
  const clock24hChk = $('clock-24h');
  clock24hChk.checked = S.clock24h;
  clock24hChk.addEventListener('change', () => {
    S.clock24h = clock24hChk.checked;
    save('clock24h', S.clock24h);
    startClock();
  });

  const showSecsChk = $('show-seconds');
  showSecsChk.checked = S.showSeconds;
  showSecsChk.addEventListener('change', () => {
    S.showSeconds = showSecsChk.checked;
    save('showSeconds', S.showSeconds);
    startClock();
  });

  const showDateChk = $('show-date');
  showDateChk.checked = S.showDate;
  showDateChk.addEventListener('change', () => {
    S.showDate = showDateChk.checked;
    save('showDate', S.showDate);
    startClock();
  });

  const clockSizeSelect = $('clock-size');
  clockSizeSelect.value = S.clockSize;
  clockSizeSelect.addEventListener('change', () => {
    S.clockSize = clockSizeSelect.value;
    save('clockSize', S.clockSize);
    applyClockStyles();
  });

  const clockColorInput = $('clock-color');
  clockColorInput.value = S.clockColor || '#ffffff';
  clockColorInput.addEventListener('input', () => {
    S.clockColor = clockColorInput.value;
    save('clockColor', S.clockColor);
    applyClockStyles();
  });

  const dateColorInput = $('date-color');
  dateColorInput.value = S.dateColor || '#ffffff';
  dateColorInput.addEventListener('input', () => {
    S.dateColor = dateColorInput.value;
    save('dateColor', S.dateColor);
    applyClockStyles();
  });

  // --- Typography ---
  const fontFamilySelect = $('font-family');
  fontFamilySelect.value = S.fontFamily;
  fontFamilySelect.addEventListener('change', () => {
    S.fontFamily = fontFamilySelect.value;
    save('fontFamily', S.fontFamily);
    applyTypography();
  });

  const fontWeightSelect = $('font-weight');
  fontWeightSelect.value = S.clockWeight;
  fontWeightSelect.addEventListener('change', () => {
    S.clockWeight = fontWeightSelect.value;
    save('clockWeight', S.clockWeight);
    applyClockStyles();
  });

  const fontOpszSlider = $('font-variation');
  const fontOpszVal = $('font-variation-val');
  fontOpszSlider.value = S.fontOpsz;
  fontOpszVal.textContent = S.fontOpsz;
  fontOpszSlider.addEventListener('input', () => {
    S.fontOpsz = +fontOpszSlider.value;
    fontOpszVal.textContent = S.fontOpsz;
    applyClockStyles();
  });
  fontOpszSlider.addEventListener('change', () => save('fontOpsz', S.fontOpsz));

  const lsSlider = $('letter-spacing');
  const lsVal = $('letter-spacing-val');
  lsSlider.value = S.letterSpacing;
  lsVal.textContent = S.letterSpacing;
  lsSlider.addEventListener('input', () => {
    S.letterSpacing = +lsSlider.value;
    lsVal.textContent = S.letterSpacing;
    applyClockStyles();
  });
  lsSlider.addEventListener('change', () => save('letterSpacing', S.letterSpacing));

  // --- Text ---
  const textPrimarySlider = $('text-primary-opacity');
  const textPrimaryVal = $('text-primary-opacity-val');
  textPrimarySlider.value = S.textPrimaryOpacity;
  textPrimaryVal.textContent = `${S.textPrimaryOpacity}%`;
  textPrimarySlider.addEventListener('input', () => {
    S.textPrimaryOpacity = +textPrimarySlider.value;
    textPrimaryVal.textContent = `${S.textPrimaryOpacity}%`;
    applyTextColors();
  });
  textPrimarySlider.addEventListener('change', () => save('textPrimaryOpacity', S.textPrimaryOpacity));

  const textSecondarySlider = $('text-secondary-opacity');
  const textSecondaryVal = $('text-secondary-opacity-val');
  textSecondarySlider.value = S.textSecondaryOpacity;
  textSecondaryVal.textContent = `${S.textSecondaryOpacity}%`;
  textSecondarySlider.addEventListener('input', () => {
    S.textSecondaryOpacity = +textSecondarySlider.value;
    textSecondaryVal.textContent = `${S.textSecondaryOpacity}%`;
    applyTextColors();
  });
  textSecondarySlider.addEventListener('change', () => save('textSecondaryOpacity', S.textSecondaryOpacity));

  // --- Search ---
  const engineSelect = $('search-engine');
  engineSelect.value = S.searchEngine;
  engineSelect.addEventListener('change', () => {
    S.searchEngine = engineSelect.value;
    save('searchEngine', S.searchEngine);
  });

  const newTabChk = $('open-new-tab');
  newTabChk.checked = S.openInNewTab;
  newTabChk.addEventListener('change', () => {
    S.openInNewTab = newTabChk.checked;
    save('openInNewTab', S.openInNewTab);
  });

  const searchRadiusSlider = $('search-radius');
  const searchRadiusVal = $('search-radius-val');
  searchRadiusSlider.value = S.searchRadius;
  searchRadiusVal.textContent = `${S.searchRadius}px`;
  searchRadiusSlider.addEventListener('input', () => {
    S.searchRadius = +searchRadiusSlider.value;
    searchRadiusVal.textContent = `${S.searchRadius}px`;
    applySearchStyle();
  });
  searchRadiusSlider.addEventListener('change', () => save('searchRadius', S.searchRadius));

  // --- Quick links ---
  const showFaviconsChk = $('show-favicons');
  showFaviconsChk.checked = S.showFavicons;
  showFaviconsChk.addEventListener('change', () => {
    S.showFavicons = showFaviconsChk.checked;
    save('showFavicons', S.showFavicons);
    renderQuickLinks();
  });

  renderLinksInSidebar();
  $('add-link-btn').addEventListener('click', () => {
    if (S.quickLinks.length >= MAX_QUICK_LINKS) return;
    S.quickLinks.push({ name: '', url: '' });
    save('quickLinks', S.quickLinks);
    renderLinksInSidebar();
    renderQuickLinks();
  });

  // --- Custom CSS ---
  const customCssTA = $('custom-css-input');
  customCssTA.value = S.customCSS;
  const saveCustomCSS = debounce(() => {
    S.customCSS = customCssTA.value;
    save('customCSS', S.customCSS);
    applyCustomCSS();
  }, 500);
  customCssTA.addEventListener('input', saveCustomCSS);

  // --- Data Management ---
  initDataManagement();
}

function updateBgAnimVisibility() {
  const row = $('bg-anim-row');
  if (!row) return;
  row.hidden = S.backgroundType !== 'gradient';
}

/* ------ Background sub-options ---------------------------- */
function renderBgOptions() {
  const wrap = $('bg-options-wrap');
  wrap.textContent = '';

  if (S.backgroundType === 'color') {
    wrap.append(buildRow('Color', buildColorPicker('bg-color-pick', S.backgroundColor, val => {
      S.backgroundColor = val;
      save('backgroundColor', val);
      applyBackground();
    })));

  } else if (S.backgroundType === 'gradient') {
    const stops = (S.backgroundGradient || '#0d0d10,#1a1a2e').split(',');
    const c1 = stops[0].trim();
    const c2 = (stops[1] || '#1a1a2e').trim();

    const picker1 = buildColorPicker('bg-grad-1', c1, val => {
      const cur = (S.backgroundGradient || '#0d0d10,#1a1a2e').split(',');
      S.backgroundGradient = `${val},${cur[1] || '#1a1a2e'}`;
      save('backgroundGradient', S.backgroundGradient);
      applyBackground();
    });
    const picker2 = buildColorPicker('bg-grad-2', c2, val => {
      const cur = (S.backgroundGradient || '#0d0d10,#1a1a2e').split(',');
      S.backgroundGradient = `${cur[0] || '#0d0d10'},${val}`;
      save('backgroundGradient', S.backgroundGradient);
      applyBackground();
    });

    const gradRow = el('div', { className: 'setting-row' },
      el('span', { className: 'row-label', textContent: 'Colors' }),
      el('div', { className: 'gradient-row' }, picker1, picker2),
    );
    wrap.append(gradRow);
    wrap.append(el('p', { className: 'tip', textContent: 'Pick two colors for the diagonal gradient.' }));

  } else if (S.backgroundType === 'image') {
    const fileWrap = el('div', { className: 'file-input-wrap' });
    const fileLabel = el('label', { className: 'file-btn' });
    const fileInput = el('input', { type: 'file', accept: 'image/*' });
    const fileName = el('p', { className: 'file-name', textContent: S.backgroundURL ? 'Image loaded' : 'No image selected' });

    const uploadIcon = el('span', { className: 'icon icon-upload', 'aria-hidden': 'true' });
    fileLabel.append(uploadIcon, document.createTextNode('Upload image'), fileInput);

    fileInput.addEventListener('change', () => {
      const file = fileInput.files[0];
      if (!file) return;
      fileName.textContent = file.name;
      const reader = new FileReader();
      reader.onload = e => {
        S.backgroundURL = e.target.result;
        save('backgroundURL', S.backgroundURL);
        applyBackground();
      };
      reader.readAsDataURL(file);
    });

    fileWrap.append(fileLabel, fileName);
    wrap.append(fileWrap);
    wrap.append(el('p', { className: 'tip', textContent: 'JPG, PNG, or WebP recommended. Image is stored locally.' }));

  } else if (S.backgroundType === 'video') {
    const fileWrap = el('div', { className: 'file-input-wrap' });
    const fileLabel = el('label', { className: 'file-btn' });
    const fileInput = el('input', { type: 'file', accept: 'video/*' });
    const fileName = el('p', { className: 'file-name', textContent: S.backgroundVideoURL ? 'Video loaded' : 'No video selected' });

    const uploadIcon = el('span', { className: 'icon icon-upload', 'aria-hidden': 'true' });
    fileLabel.append(uploadIcon, document.createTextNode('Upload video'), fileInput);

    fileInput.addEventListener('change', () => {
      const file = fileInput.files[0];
      if (!file) return;
      fileName.textContent = file.name;
      const reader = new FileReader();
      reader.onload = e => {
        S.backgroundVideoURL = e.target.result;
        save('backgroundVideoURL', S.backgroundVideoURL);
        applyBackground();
      };
      reader.readAsDataURL(file);
    });

    fileWrap.append(fileLabel, fileName);
    wrap.append(fileWrap);
    wrap.append(el('p', { className: 'tip', textContent: 'Videos auto-play muted on loop. Large videos use more storage and memory.' }));
  }
}

function buildColorPicker(id, value, onChange) {
  const input = el('input', { type: 'color', id, className: 'color-input', value });
  input.addEventListener('input', () => onChange(input.value));
  input.addEventListener('change', () => onChange(input.value));
  return input;
}

function buildRow(labelText, control) {
  return el('div', { className: 'setting-row' },
    el('label', { className: 'row-label', htmlFor: control.id || '', textContent: labelText }),
    control,
  );
}

/* ------ Links editor with drag & drop --------------------- */
function buildLinkItem(list, index, storageKey, renderFn, placeholder = ['Name', 'https://…']) {
  const item = el('div', {
    className: 'link-item',
    role: 'listitem',
    draggable: 'true',
    'aria-describedby': 'dnd-hint',
  });

  const dragHandle = el('button', {
    className: 'icon-btn drag-handle',
    type: 'button',
    'aria-label': 'Drag to reorder',
    tabindex: '-1',
  });
  dragHandle.append(el('span', { className: 'icon icon-drag', 'aria-hidden': 'true' }));

  const nameInput = el('input', {
    type: 'text',
    className: 'text-input',
    value: list[index].name,
    placeholder: placeholder[0],
    'aria-label': 'Link name',
    draggable: 'false',
  });
  const urlInput = el('input', {
    type: 'url',
    className: 'text-input',
    value: list[index].url,
    placeholder: placeholder[1],
    'aria-label': 'Link URL',
    draggable: 'false',
  });

  const saveEntry = debounce(() => {
    list[index].name = nameInput.value.trim();
    list[index].url = urlInput.value.trim();
    save(storageKey, list);
    if (storageKey === 'quickLinks') renderQuickLinks();
  }, 400);

  nameInput.addEventListener('input', saveEntry);
  urlInput.addEventListener('input', saveEntry);

  const moveUpBtn = el('button', {
    className: 'icon-btn reorder-btn',
    type: 'button',
    'aria-label': 'Move link up',
    disabled: index === 0,
    onClick: () => {
      if (index === 0) return;
      [list[index], list[index - 1]] = [list[index - 1], list[index]];
      save(storageKey, list);
      renderFn();
      if (storageKey === 'quickLinks') renderQuickLinks();
    },
  });
  const upIcon = el('span', { className: 'icon icon-chevron', 'aria-hidden': 'true' });
  upIcon.style.transform = 'rotate(180deg)';
  moveUpBtn.append(upIcon);

  const moveDownBtn = el('button', {
    className: 'icon-btn reorder-btn',
    type: 'button',
    'aria-label': 'Move link down',
    disabled: index === list.length - 1,
    onClick: () => {
      if (index === list.length - 1) return;
      [list[index], list[index + 1]] = [list[index + 1], list[index]];
      save(storageKey, list);
      renderFn();
      if (storageKey === 'quickLinks') renderQuickLinks();
    },
  });
  moveDownBtn.append(el('span', { className: 'icon icon-chevron', 'aria-hidden': 'true' }));

  const delBtn = el('button', {
    className: 'icon-btn icon-btn--danger',
    type: 'button',
    'aria-label': 'Remove link',
    onClick: () => {
      list.splice(index, 1);
      save(storageKey, list);
      renderFn();
      if (storageKey === 'quickLinks') renderQuickLinks();
    },
  });
  delBtn.append(el('span', { className: 'icon icon-delete', 'aria-hidden': 'true' }));

  item.addEventListener('dragstart', e => {
    if (!e.target.closest('.drag-handle')) {
      e.preventDefault();
      return;
    }
    dragSrcIndex = index;
    item.classList.add('dragging');
    e.dataTransfer.effectAllowed = 'move';
    e.dataTransfer.setData('text/plain', String(index));
  });

  item.addEventListener('dragend', () => {
    item.classList.remove('dragging');
    document.querySelectorAll('.link-item').forEach(i => i.classList.remove('drag-over'));
    dragSrcIndex = null;
  });

  item.addEventListener('dragover', e => {
    e.preventDefault();
    e.dataTransfer.dropEffect = 'move';
  });

  item.addEventListener('dragenter', () => {
    if (index !== dragSrcIndex) item.classList.add('drag-over');
  });

  item.addEventListener('dragleave', () => {
    item.classList.remove('drag-over');
  });

  item.addEventListener('drop', e => {
    e.stopPropagation();
    const srcIndex = parseInt(e.dataTransfer.getData('text/plain'), 10);
    if (srcIndex === index || Number.isNaN(srcIndex)) return false;

    const [moved] = list.splice(srcIndex, 1);
    const insertIndex = srcIndex < index ? index - 1 : index;
    list.splice(insertIndex, 0, moved);
    save(storageKey, list);
    renderFn();
    if (storageKey === 'quickLinks') renderQuickLinks();
    return false;
  });

  const inputs = el('div', { className: 'link-item-inputs' }, nameInput, urlInput);
  const actions = el('div', { className: 'link-item-actions' }, moveUpBtn, moveDownBtn, delBtn);
  item.append(dragHandle, inputs, actions);
  return item;
}

function renderLinksInSidebar() {
  const container = $('links-list');
  container.textContent = '';
  S.quickLinks.forEach((_, i) => {
    container.append(buildLinkItem(S.quickLinks, i, 'quickLinks', renderLinksInSidebar));
  });
}

/* ============================================================
   Data Management
   ============================================================ */
function initDataManagement() {
  // Export
  $('export-btn').addEventListener('click', () => {
    chrome.storage.local.get(null, allData => {
      const blob = new Blob([JSON.stringify(allData, null, 2)], { type: 'application/json' });
      const url = URL.createObjectURL(blob);
      const a = el('a', { href: url, download: `coretab-backup-${new Date().toISOString().slice(0,10)}.json` });
      document.body.append(a);
      a.click();
      a.remove();
      URL.revokeObjectURL(url);
    });
  });

  // Import
  const importInput = $('import-file');
  const importStatus = $('import-status');
  importInput.addEventListener('change', () => {
    const file = importInput.files[0];
    if (!file) return;

    const reader = new FileReader();
    reader.onload = e => {
      try {
        const data = JSON.parse(e.target.result);
        if (typeof data !== 'object' || data === null) {
          throw new Error('Invalid JSON structure');
        }
        // Validate keys against known defaults to avoid garbage
        const validKeys = Object.keys(DEFAULTS);
        const cleaned = {};
        for (const key of Object.keys(data)) {
          if (validKeys.includes(key) || key.startsWith('background') || key === 'customCSS') {
            cleaned[key] = data[key];
          }
        }
        chrome.storage.local.set(cleaned, () => {
          importStatus.textContent = 'Settings imported successfully. Reloading…';
          importStatus.style.color = 'var(--text-secondary)';
          setTimeout(() => location.reload(), 800);
        });
      } catch (err) {
        importStatus.textContent = `Import failed: ${err.message}`;
        importStatus.style.color = 'var(--danger)';
      }
    };
    reader.readAsText(file);
    importInput.value = ''; // reset so same file can be selected again
  });

  // Reset
  $('reset-btn').addEventListener('click', () => {
    const confirmed = confirm('Reset all settings to default? This will erase your quick links, custom CSS, and all preferences. This cannot be undone.');
    if (!confirmed) return;
    chrome.storage.local.clear(() => {
      location.reload();
    });
  });
}

/* ============================================================
   Storage: initial load + live sync
   ============================================================ */
function loadSettings() {
  chrome.storage.local.get(DEFAULTS, stored => {
    S = { ...DEFAULTS, ...stored };
    applyBackground();
    applyClockStyles();
    applyGlass();
    applyTextColors();
    applyTypography();
    applySearchStyle();
    applyCustomCSS();
    startClock();
    renderQuickLinks();
    initSidebar();
  });
}

chrome.storage.onChanged.addListener((changes, area) => {
  if (area !== 'local') return;

  for (const [key, { newValue }] of Object.entries(changes)) {
    S[key] = newValue;

    switch (key) {
      case 'backgroundType':
      case 'backgroundColor':
      case 'backgroundGradient':
      case 'backgroundURL':
      case 'backgroundVideoURL':
      case 'backgroundAnim':
        applyBackground();
        break;
      case 'overlayOpacity':
        document.documentElement.style.setProperty('--overlay-opacity', newValue / 100);
        break;
      case 'glassBlur':
      case 'glassOpacity':
      case 'glassBorderOpacity':
        applyGlass();
        break;
      case 'textPrimaryOpacity':
      case 'textSecondaryOpacity':
        applyTextColors();
        break;
      case 'clock24h':
      case 'showSeconds':
      case 'showDate':
        startClock();
        break;
      case 'clockSize':
      case 'clockWeight':
      case 'fontOpsz':
      case 'letterSpacing':
      case 'clockColor':
      case 'dateColor':
        applyClockStyles();
        break;
      case 'fontFamily':
        applyTypography();
        break;
      case 'searchRadius':
        applySearchStyle();
        break;
      case 'showFavicons':
      case 'quickLinks':
        renderQuickLinks();
        break;
      case 'customCSS':
        applyCustomCSS();
        break;
    }
  }
});

/* ============================================================
   Boot
   ============================================================ */
document.addEventListener('DOMContentLoaded', () => {
  elTime = $('time');
  elDate = $('date');
  elSearchInput = $('search-input');
  elQuickLinks = $('quick-links');
  elBg = $('bg');
  elSidebar = $('sidebar');
  elSidebarClose = $('sidebar-close');
  elSettingsBtn = $('settings-btn');
  elBackdrop = $('backdrop');

  initSearch();
  loadSettings();
});