import { ref, watchEffect } from 'vue';

export type ThemeId = 'default' | 'forest';

export interface ThemeOption {
  id: ThemeId;
  label: string;
  icon: string;
  description: string;
}

export const THEMES: ThemeOption[] = [
  {
    id: 'default',
    label: '默认',
    icon: '🔵',
    description: 'Element Plus 蓝色主题',
  },
  {
    id: 'forest',
    label: '森林绿',
    icon: '🌿',
    description: 'Boreal 森林绿主题',
  },
];

const STORAGE_KEY = 'cube-theme';

function getInitialTheme(): ThemeId {
  const stored = localStorage.getItem(STORAGE_KEY) as ThemeId | null;
  if (stored && THEMES.some((t) => t.id === stored)) return stored;
  return 'default';
}

const currentTheme = ref<ThemeId>(getInitialTheme());

watchEffect(() => {
  const theme = currentTheme.value;
  if (theme === 'default') {
    document.documentElement.removeAttribute('data-theme');
  } else {
    document.documentElement.setAttribute('data-theme', theme);
  }
  localStorage.setItem(STORAGE_KEY, theme);
});

export function useTheme() {
  function setTheme(id: ThemeId) {
    currentTheme.value = id;
  }

  return {
    currentTheme,
    themes: THEMES,
    setTheme,
  };
}