import { watchEffect } from 'vue';
import { useSettingsStore } from '@/store/useSettingsStore';
import {
  getIconDensityScale,
  getLayoutDensityPreset,
  getThemePreset,
  iconRadiusRange,
} from '@/config/settingsPresets';
import { layoutConfig } from '@/config/layout';

const setPx = (root: HTMLElement, name: string, value: number) => {
  root.style.setProperty(name, `${value}px`);
};

const setVar = (root: HTMLElement, name: string, value: string) => {
  root.style.setProperty(name, value);
};

const clampRange = (value: number, min: number, max: number) =>
  Math.min(Math.max(value, min), max);

const getSidebarVars = (compact: boolean) => {
  const base = layoutConfig.sidebar;
  if (!compact) {
    return {
      width: base.width,
      paddingY: base.paddingY,
      profileSize: base.profileSize,
      profileMarginBottom: base.profileMarginBottom,
      navItemSize: base.navItemSize,
      navGap: base.navGap,
    };
  }
  return {
    width: Math.max(56, base.width - 8),
    paddingY: Math.max(12, base.paddingY - 6),
    profileSize: Math.max(30, base.profileSize - 8),
    profileMarginBottom: Math.max(16, base.profileMarginBottom - 12),
    navItemSize: Math.max(34, base.navItemSize - 8),
    navGap: Math.max(10, base.navGap - 6),
  };
};

export const useSettingsSync = () => {
  const settingsStore = useSettingsStore();
  const root = document.documentElement;

  watchEffect(() => {
    const layoutPreset = getLayoutDensityPreset(settingsStore.layoutDensity);
    const themePreset = getThemePreset(settingsStore.themeId);
    const baseIcon = layoutConfig.icon;
    const iconRadius = clampRange(settingsStore.iconRadius, iconRadiusRange.min, iconRadiusRange.max);
    const baseGrid = layoutConfig.grid;
    const sizeScale = layoutPreset.cellSize / baseGrid.cellSize;
    const labelScale = clampRange(sizeScale, 0.7, 1);
    const iconPadding = Math.max(0, baseIcon.padding * sizeScale);
    const widgetScale = sizeScale;
    const widgetPadding = Math.max(0, baseIcon.padding * sizeScale);
    const iconFontSize = Math.max(14, Math.round(baseIcon.fontSize * sizeScale));
    const iconLabelFontSize = Math.max(10, Math.round(baseIcon.labelFontSize * labelScale));
    const iconLabelMarginTop = Math.max(4, Math.round(baseIcon.labelMarginTop * labelScale));
    const widgetLabelFontSize = Math.max(
      10,
      Math.round(layoutConfig.widget.labelFontSize * labelScale)
    );
    const widgetLabelPaddingY = Math.max(
      4,
      Math.round(layoutConfig.widget.labelPaddingY * labelScale)
    );
    const densityScale = getIconDensityScale(settingsStore.iconDensity);
    const baseVisualGap = (layoutPreset.gap + iconPadding * 2) * densityScale;
    // Keep density purely controlling spacing; allow deeper negative gap for extra-tight layouts.
    const minGap = -layoutPreset.cellSize * 0.75;
    const gridGap = Math.max(minGap, baseVisualGap - iconPadding * 2);

    setPx(root, '--grid-cell-size', layoutPreset.cellSize);
    setPx(root, '--grid-gap', gridGap);

    setPx(root, '--icon-card-padding', iconPadding);
    setPx(root, '--widget-card-padding', widgetPadding);
    setVar(root, '--widget-scale', widgetScale.toFixed(3));
    setPx(root, '--icon-font-size', iconFontSize);
    setPx(root, '--icon-label-font-size', iconLabelFontSize);
    setPx(root, '--icon-radius', iconRadius);
    setPx(
      root,
      '--icon-label-margin-top',
      settingsStore.showIconLabels ? iconLabelMarginTop : 0
    );
    setPx(root, '--widget-label-font-size', widgetLabelFontSize);
    setPx(root, '--widget-label-padding-y', widgetLabelPaddingY);

    setVar(root, '--icon-label-display', settingsStore.showIconLabels ? 'block' : 'none');
    setVar(root, '--widget-label-display', settingsStore.showIconLabels ? 'block' : 'none');

    const sidebarVars = getSidebarVars(settingsStore.compactSidebar);
    setPx(root, '--sidebar-width', sidebarVars.width);
    setPx(root, '--sidebar-padding-y', sidebarVars.paddingY);
    setPx(root, '--sidebar-profile-size', sidebarVars.profileSize);
    setPx(root, '--sidebar-profile-margin-bottom', sidebarVars.profileMarginBottom);
    setPx(root, '--sidebar-nav-item-size', sidebarVars.navItemSize);
    setPx(root, '--sidebar-nav-gap', sidebarVars.navGap);

    setVar(root, '--sidebar-label-display', settingsStore.showGroupLabels ? 'block' : 'none');
    setVar(root, '--sidebar-icon-margin-bottom', settingsStore.showGroupLabels ? '4px' : '0px');

    setVar(root, '--desktop-bg-image', themePreset.image);
    setVar(root, '--desktop-bg-overlay', themePreset.overlay);
  });
};
