/* Device-aware desktop preferences. The app list and actual records stay in the existing stores. */
(() => {
  const APP_IDS = Object.keys(APPS);
  const LAYOUT_KEY = 'lifeos_window_layout_v1';
  const cell = { width: 110, height: 98, left: 24, top: 72 };
  const desktopText = (key, values) => LifeI18n.t(`desktop.${key}`, values);
  const validApps = value => Array.isArray(value) ? [...new Set(value.filter(id => APP_IDS.includes(id)))] : [];
  const preference = () => settings();
  const desktopMode = () => innerWidth > 650;
  const bounds = () => ({ rows: Math.max(1, Math.floor((innerHeight - 175) / cell.height)), columns: Math.max(1, Math.floor((innerWidth - 48) / cell.width)) });
  const chosenShortcuts = () => Array.isArray(preference().desktopShortcuts) ? validApps(preference().desktopShortcuts) : APP_IDS;
  const savedPositions = () => preference().iconPositions || {};
  const updateSettings = patch => { const state = preference(); Object.assign(state, patch); save('lifeos_settings', state); };
  const isSlot = (value, limit) => Number.isInteger(value) && value >= 0 && value < limit;
  let placed = {}, restoring = false, suppressClick = false;

  function arrangeIcons() {
    const visible = chosenShortcuts(), { rows, columns } = bounds(), occupied = new Set(), result = {};
    document.querySelectorAll('#icons .app-icon').forEach(node => { if (!visible.includes(node.dataset.app)) node.remove(); });
    const nodes = [...document.querySelectorAll('#icons .app-icon')];
    if (!desktopMode()) { nodes.forEach(node => { node.style.left = ''; node.style.top = ''; node.style.position = ''; }); placed = {}; return; }
    nodes.forEach((node, index) => {
      const id = node.dataset.app, stored = savedPositions()[id];
      let col = stored?.col, row = stored?.row;
      if (!isSlot(col, columns) || !isSlot(row, rows) || occupied.has(`${col}:${row}`)) {
        const next = Array.from({ length: rows * columns }, (_, slot) => ({ col: Math.floor(slot / rows), row: slot % rows })).find(slot => !occupied.has(`${slot.col}:${slot.row}`));
        col = next?.col ?? Math.floor(index / rows); row = next?.row ?? index % rows;
      }
      occupied.add(`${col}:${row}`); result[id] = { col, row };
      node.style.position = 'absolute'; node.style.left = `${cell.left + col * cell.width}px`; node.style.top = `${cell.top + row * cell.height}px`;
    });
    placed = result;
  }

  const originalRenderIcons = window.renderIcons;
  window.renderIcons = () => { originalRenderIcons(); arrangeIcons(); };
  const icons = document.querySelector('#icons');
  let dragState = null;
  icons.addEventListener('pointerdown', event => {
    const icon = event.target.closest('.app-icon');
    if (!desktopMode() || !icon || event.button !== 0) return;
    dragState = { icon, id: icon.dataset.app, x: event.clientX, y: event.clientY, moved: false };
    icon.setPointerCapture?.(event.pointerId);
  });
  icons.addEventListener('pointermove', event => {
    if (!dragState) return;
    const dx = event.clientX - dragState.x, dy = event.clientY - dragState.y;
    if (Math.hypot(dx, dy) > 6) dragState.moved = true;
    if (dragState.moved) {
      dragState.icon.classList.add('dragging'); dragState.icon.style.transform = `translate(${dx}px,${dy}px)`;
      const { rows, columns } = bounds(), origin = placed[dragState.id];
      const col = Math.max(0, Math.min(columns - 1, origin.col + Math.round(dx / cell.width)));
      const row = Math.max(0, Math.min(rows - 1, origin.row + Math.round(dy / cell.height)));
      window.LifeOSSnapGrid?.show(col, row);
    }
  });
  icons.addEventListener('pointerup', event => {
    if (!dragState) return;
    const { icon, id, moved, x, y } = dragState; dragState = null;
    icon.classList.remove('dragging'); icon.style.transform = ''; window.LifeOSSnapGrid?.hide();
    if (!moved) return;
    suppressClick = true;
    setTimeout(() => { suppressClick = false; }, 0);
    const { rows, columns } = bounds(), origin = placed[id];
    const col = Math.max(0, Math.min(columns - 1, Math.round((cell.left + origin.col * cell.width + event.clientX - x - cell.left) / cell.width)));
    const row = Math.max(0, Math.min(rows - 1, Math.round((cell.top + origin.row * cell.height + event.clientY - y - cell.top) / cell.height)));
    const other = Object.keys(placed).find(key => key !== id && placed[key].col === col && placed[key].row === row);
    const positions = { ...savedPositions(), [id]: { col, row } };
    if (other) positions[other] = origin;
    updateSettings({ iconPositions: positions }); arrangeIcons();
  });
  icons.addEventListener('pointercancel', () => { if (dragState) { dragState.icon.style.transform = ''; dragState.icon.classList.remove('dragging'); dragState = null; window.LifeOSSnapGrid?.hide(); } });
  icons.addEventListener('keydown', event => {
    const icon = event.target.closest('.app-icon');
    if (!desktopMode() || !icon || !event.shiftKey || !['ArrowLeft','ArrowRight','ArrowUp','ArrowDown'].includes(event.key)) return;
    event.preventDefault();
    const id = icon.dataset.app, origin = placed[id], { rows, columns } = bounds();
    const col = Math.max(0, Math.min(columns - 1, origin.col + (event.key === 'ArrowRight' ? 1 : event.key === 'ArrowLeft' ? -1 : 0)));
    const row = Math.max(0, Math.min(rows - 1, origin.row + (event.key === 'ArrowDown' ? 1 : event.key === 'ArrowUp' ? -1 : 0)));
    const other = Object.keys(placed).find(key => key !== id && placed[key].col === col && placed[key].row === row);
    const positions = { ...savedPositions(), [id]: { col, row } };
    if (other) positions[other] = origin;
    updateSettings({ iconPositions: positions }); arrangeIcons();
    window.LifeOSSnapGrid?.show(col, row); window.LifeOSSnapGrid?.hide(900);
  });
  icons.addEventListener('click', event => { if (suppressClick) { event.preventDefault(); event.stopImmediatePropagation(); } }, true);
  window.addEventListener('resize', () => { arrangeIcons(); if (desktopMode()) Object.values(windows).forEach(clampWindow); });

  const readLayout = () => { try { return JSON.parse(localStorage.getItem(LAYOUT_KEY) || '{}'); } catch { return {}; } };
  function clampWindow(node) {
    if (!desktopMode() || node.classList.contains('max')) return;
    const width = Math.min(node.offsetWidth || 700, Math.max(360, innerWidth - 20));
    const height = Math.min(node.offsetHeight || 590, Math.max(280, innerHeight - 85));
    node.style.width = `${width}px`; node.style.height = `${height}px`;
    node.style.left = `${Math.max(0, Math.min(parseFloat(node.style.left) || 0, innerWidth - 80))}px`;
    node.style.top = `${Math.max(0, Math.min(parseFloat(node.style.top) || 0, innerHeight - 95))}px`;
  }
  function rememberWindows() {
    if (restoring || preference().rememberWindowLayout === false || !desktopMode()) return;
    const entries = Object.values(windows).sort((a, b) => Number(a.style.zIndex || 0) - Number(b.style.zIndex || 0)).map(node => ({
      id: node.dataset.id, left: parseFloat(node.style.left), top: parseFloat(node.style.top),
      width: parseFloat(node.style.width) || node.offsetWidth, height: parseFloat(node.style.height) || node.offsetHeight,
      max: node.classList.contains('max'), min: node.classList.contains('min')
    }));
    localStorage.setItem(LAYOUT_KEY, JSON.stringify({ entries }));
  }
  function observeWindow(node) {
    if (node.dataset.layoutObserved) return;
    node.dataset.layoutObserved = 'true';
    if (typeof ResizeObserver !== 'undefined') new ResizeObserver(() => rememberWindows()).observe(node);
  }
  const originalOpenApp = window.openApp;
  window.openApp = id => { if (!APP_IDS.includes(id)) return; originalOpenApp(id); observeWindow(windows[id]); rememberWindows(); };
  const originalFocus = window.focus;
  window.focus = node => { originalFocus(node); rememberWindows(); };
  for (const method of ['closeWin', 'minWin', 'maxWin']) {
    const original = window[method];
    window[method] = (...args) => { original(...args); rememberWindows(); };
  }
  document.querySelector('#windows').addEventListener('pointerup', () => setTimeout(rememberWindows, 0));
  function restoreWindows() {
    restoring = true;
    try {
      const remembered = desktopMode() && preference().rememberWindowLayout !== false ? readLayout().entries : [];
      const entries = Array.isArray(remembered) ? remembered.filter(item => APP_IDS.includes(item.id)) : [];
      const startup = validApps(preference().startupApps);
      for (const id of [...new Set([...entries.map(item => item.id), ...startup])]) {
        window.openApp(id);
        const node = windows[id], position = entries.find(item => item.id === id);
        if (!position || !desktopMode()) continue;
        for (const field of ['left', 'top', 'width', 'height']) if (Number.isFinite(position[field]) && position[field] >= 0 && position[field] < 10000) node.style[field] = `${position[field]}px`;
        node.classList.toggle('max', position.max === true);
        node.classList.toggle('min', position.min === true);
        clampWindow(node);
      }
      const visible = Object.values(windows).filter(node => !node.classList.contains('min'));
      if (visible.length) focus(visible.at(-1)); else renderTaskbar();
    } finally { restoring = false; }
    rememberWindows();
  }
  const originalInit = window.init;
  window.init = () => { originalInit(); restoreWindows(); };
  window.applyDesktopPreferences = () => {
    window.renderIcons(); window.loadBingWallpaper(); window.applyWallpaper();
    for (const id of validApps(preference().startupApps)) if (!windows[id]) window.openApp(id);
  };

  const originalWallpaper = window.applyWallpaper;
  window.applyWallpaper = () => {
    const state = preference(), mode = state.wallpaperSource || 'bing', desktop = document.querySelector('#desktop');
    if (mode === 'calm') { desktop.style.backgroundImage = 'radial-gradient(ellipse at 20% 0%,#3f4a503d,transparent 40%),radial-gradient(ellipse at 93% 65%,#59604224,transparent 42%)'; desktop.title = desktopText('calm'); return; }
    if (mode === 'custom') {
      try {
        const url = new URL(state.customWallpaperUrl);
        if (url.protocol !== 'https:') throw new Error('invalid wallpaper URL');
        desktop.style.backgroundImage = `linear-gradient(120deg,color-mix(in srgb,var(--bg) 68%,transparent),color-mix(in srgb,var(--bg) 36%,transparent)),url("${url.href.replaceAll('"', '%22')}")`;
        desktop.style.backgroundSize = 'cover'; desktop.style.backgroundPosition = 'center'; desktop.title = desktopText('custom'); return;
      } catch { /* Use the built-in background until a valid URL is saved. */ }
    }
    if (state.wallpaper?.url) originalWallpaper(state.wallpaper);
  };
  const originalLoadBing = window.loadBingWallpaper;
  window.loadBingWallpaper = () => { if ((preference().wallpaperSource || 'bing') === 'bing') return originalLoadBing(); window.applyWallpaper(); };
  window.setWallpaperSource = mode => {
    if (!['bing', 'calm', 'custom'].includes(mode)) return;
    if (mode === 'custom') {
      const value = document.querySelector('#desktop-wallpaper-url')?.value.trim() || '';
      try { const url = new URL(value); if (url.protocol !== 'https:' || value.length > 2048) throw new Error('invalid URL'); }
      catch { toast(desktopText('invalidUrl')); return; }
      updateSettings({ wallpaperSource: mode, customWallpaperUrl: value });
    } else updateSettings({ wallpaperSource: mode });
    window.loadBingWallpaper(); window.applyWallpaper(); window.renderAll();
  };
  window.toggleDesktopApp = (kind, id) => {
    if (!APP_IDS.includes(id) || !['desktopShortcuts', 'startupApps'].includes(kind)) return;
    const current = kind === 'desktopShortcuts' ? chosenShortcuts() : validApps(preference().startupApps);
    const next = current.includes(id) ? current.filter(app => app !== id) : APP_IDS.filter(app => current.includes(app) || app === id);
    updateSettings({ [kind]: next });
    if (kind === 'desktopShortcuts') window.renderIcons();
    window.renderAll();
  };
  window.toggleWindowMemory = () => { const enabled = preference().rememberWindowLayout === false; updateSettings({ rememberWindowLayout: enabled }); if (enabled) rememberWindows(); window.renderAll(); };
  window.resetIconPositions = () => { updateSettings({ iconPositions: {} }); window.renderIcons(); window.renderAll(); };
  const originalSystemApp = window.systemApp;
  window.systemApp = container => {
    originalSystemApp(container);
    const state = preference(), mode = state.wallpaperSource || 'bing';
    const appChoices = kind => `<div class="desktop-app-choices">${APP_IDS.map(id => `<button type="button" class="chip ${(kind === 'desktopShortcuts' ? chosenShortcuts() : validApps(state.startupApps)).includes(id) ? 'selected' : ''}" aria-pressed="${(kind === 'desktopShortcuts' ? chosenShortcuts() : validApps(state.startupApps)).includes(id)}" onclick="toggleDesktopApp('${kind}','${id}')">${appName(id)}</button>`).join('')}</div>`;
    const customUrl = String(state.customWallpaperUrl || '').replace(/[&<>"']/g, char => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[char]));
    const personalization = `<section class="desktop-preferences" data-settings-group="appearance"><div class="eyebrow">${desktopText('heading')}</div><h2>${desktopText('wallpaper')}</h2><div class="choices">${['bing','calm'].map(value => `<button class="chip ${mode === value ? 'selected' : ''}" aria-pressed="${mode === value}" onclick="setWallpaperSource('${value}')">${desktopText(value)}</button>`).join('')}</div><div class="desktop-wallpaper-custom"><label for="desktop-wallpaper-url">${desktopText('custom')}</label><div><input id="desktop-wallpaper-url" type="url" maxlength="2048" placeholder="https://example.com/image.jpg" value="${customUrl}"><button class="secondary" onclick="setWallpaperSource('custom')">${desktopText('useUrl')}</button></div><p>${desktopText('urlHint')}</p></div><h2>${desktopText('shortcuts')}</h2><p>${desktopText('shortcutsHint')}</p>${appChoices('desktopShortcuts')}<button class="desktop-text-button" onclick="resetIconPositions()">${desktopText('resetPositions')}</button><h2>${desktopText('windowLayout')}</h2><button class="chip ${state.rememberWindowLayout !== false ? 'selected' : ''}" aria-pressed="${state.rememberWindowLayout !== false}" onclick="toggleWindowMemory()">${state.rememberWindowLayout !== false ? desktopText('rememberOn') : desktopText('rememberOff')}</button><p>${desktopText('windowHint')}</p><h2>${desktopText('startup')}</h2><p>${desktopText('startupHint')}</p>${appChoices('startupApps')}</section>`;
    const panel = container.querySelector('.settings');
    if (panel) panel.insertAdjacentHTML('beforeend', personalization);
  };
  const style = document.createElement('style');
  style.textContent = `.desktop-preferences h2{font-size:14px;margin:18px 0 9px}.desktop-preferences .desktop-app-choices{display:flex;flex-wrap:wrap;gap:8px}.desktop-preferences .chip{font-size:12px;min-height:36px}.desktop-wallpaper-custom{margin-top:13px}.desktop-wallpaper-custom label{display:block;font-size:13px;color:var(--muted);margin-bottom:7px}.desktop-wallpaper-custom>div{display:flex;gap:8px}.desktop-wallpaper-custom input{flex:1;min-width:0;background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:10px;color:var(--ink)}.desktop-wallpaper-custom .secondary{font-size:12px;white-space:nowrap}.desktop-preferences p{font-size:13px;line-height:1.5}.desktop-text-button{margin:10px 0 2px;border:0;background:transparent;padding:5px 0;color:var(--accent);font-size:13px;text-decoration:underline}.app-icon.dragging{z-index:9;cursor:grabbing;touch-action:none}.desktop-icons .app-icon{touch-action:none}@media(max-width:650px){.desktop-icons .app-icon{position:static!important;left:auto!important;top:auto!important;touch-action:auto}.desktop-wallpaper-custom>div{flex-wrap:wrap}.desktop-wallpaper-custom input{flex-basis:100%}}`;
  document.head.append(style);
  window.renderIcons();
})();