/app/chrome-extension/entrypoints/sidepanel/composables/useAgentTheme.ts

/**
 * Composable for managing AgentChat theme.
 * Handles theme persistence and application.
 */
import { ref, type Ref } from 'vue';

/** Available theme identifiers */
export type AgentThemeId =
  | 'warm-editorial'
  | 'blueprint-architect'
  | 'zen-journal'
  | 'neo-pop'
  | 'dark-console'
  | 'swiss-grid';

/** Storage key for persisting theme preference */
const STORAGE_KEY_THEME = 'agentTheme';

/** Default theme when none is set */
const DEFAULT_THEME: AgentThemeId = 'warm-editorial';

/** Valid theme IDs for validation */
const VALID_THEMES: AgentThemeId[] = [
  'warm-editorial',
  'blueprint-architect',
  'zen-journal',
  'neo-pop',
  'dark-console',
  'swiss-grid',
];

/** Theme display names for UI */
export const THEME_LABELS: Record<AgentThemeId, string> = {
  'warm-editorial': 'Editorial',
  'blueprint-architect': 'Blueprint',
  'zen-journal': 'Zen',
  'neo-pop': 'Neo-Pop',
  'dark-console': 'Console',
  'swiss-grid': 'Swiss',
};

export interface UseAgentTheme {
  /** Current theme ID */
  theme: Ref<AgentThemeId>;
  /** Whether theme has been loaded from storage */
  ready: Ref<boolean>;
  /** Set and persist a new theme */
  setTheme: (id: AgentThemeId) => Promise<void>;
  /** Load theme from storage (call on mount) */
  initTheme: () => Promise<void>;
  /** Apply theme to a DOM element */
  applyTo: (el: HTMLElement) => void;
  /** Get the preloaded theme from document (set by main.ts) */
  getPreloadedTheme: () => AgentThemeId;
}

/**
 * Check if a string is a valid theme ID
 */
function isValidTheme(value: unknown): value is AgentThemeId {
  return typeof value === 'string' && VALID_THEMES.includes(value as AgentThemeId);
}

/**
 * Get theme from document element (preloaded by main.ts)
 */
function getThemeFromDocument(): AgentThemeId {
  const value = document.documentElement.dataset.agentTheme;
  return isValidTheme(value) ? value : DEFAULT_THEME;
}

/**
 * Composable for managing AgentChat theme
 */
export function useAgentTheme(): UseAgentTheme {
  // Initialize with preloaded theme (or default)
  const theme = ref<AgentThemeId>(getThemeFromDocument());
  const ready = ref(false);

  /**
   * Load theme from chrome.storage.local
   */
  async function initTheme(): Promise<void> {
    try {
      const result = await chrome.storage.local.get(STORAGE_KEY_THEME);
      const stored = result[STORAGE_KEY_THEME];

      if (isValidTheme(stored)) {
        theme.value = stored;
      } else {
        // Use preloaded or default
        theme.value = getThemeFromDocument();
      }
    } catch (error) {
      console.error('[useAgentTheme] Failed to load theme:', error);
      theme.value = getThemeFromDocument();
    } finally {
      ready.value = true;
    }
  }

  /**
   * Set and persist a new theme
   */
  async function setTheme(id: AgentThemeId): Promise<void> {
    if (!isValidTheme(id)) {
      console.warn('[useAgentTheme] Invalid theme ID:', id);
      return;
    }

    // Update immediately for responsive UI
    theme.value = id;

    // Also update document element for consistency
    document.documentElement.dataset.agentTheme = id;

    // Persist to storage
    try {
      await chrome.storage.local.set({ [STORAGE_KEY_THEME]: id });
    } catch (error) {
      console.error('[useAgentTheme] Failed to save theme:', error);
    }
  }

  /**
   * Apply theme to a DOM element
   */
  function applyTo(el: HTMLElement): void {
    el.dataset.agentTheme = theme.value;
  }

  /**
   * Get the preloaded theme from document
   */
  function getPreloadedTheme(): AgentThemeId {
    return getThemeFromDocument();
  }

  return {
    theme,
    ready,
    setTheme,
    initTheme,
    applyTo,
    getPreloadedTheme,
  };
}

/**
 * Preload theme before Vue mounts (call in main.ts)
 * This prevents theme flashing on page load.
 */
export async function preloadAgentTheme(): Promise<AgentThemeId> {
  let themeId: AgentThemeId = DEFAULT_THEME;

  try {
    const result = await chrome.storage.local.get(STORAGE_KEY_THEME);
    const stored = result[STORAGE_KEY_THEME];

    if (isValidTheme(stored)) {
      themeId = stored;
    }
  } catch (error) {
    console.error('[preloadAgentTheme] Failed to load theme:', error);
  }

  // Set on document element for immediate application
  document.documentElement.dataset.agentTheme = themeId;

  return themeId;
}