frontend/src/stores/chatSettingsStore.ts

/**
 * 聊天设置 Store
 * 持久化存储用户的聊天样式偏好设置
 */

import AsyncStorage from '@react-native-async-storage/async-storage';
import { create } from 'zustand';
import { persist, createJSONStorage } from 'zustand/middleware';
import { useShallow } from 'zustand/react/shallow';

// 主题配置 - 扩展包含更多颜色
export const CHAT_THEMES = [
  { 
    id: 'default', 
    name: '默认绿', 
    primary: '#4CAF50', 
    secondary: '#E8F5E9', 
    bubble: '#DCF8C6', 
    icon: '🏠',
    // 扩展颜色
    card: '#FFFFFF',           // 卡片背景
    inputBg: '#FFFFFF',        // 输入框背景
    panelBg: '#F5F5F5',        // 面板背景
    headerBg: '#FFFFFF',       // 头部背景
    textPrimary: '#1A1A1A',    // 主要文字
    textSecondary: '#666666',  // 次要文字
  },
  { 
    id: 'yellow', 
    name: '活力黄', 
    primary: '#FFC107', 
    secondary: '#FFF8E1', 
    bubble: '#FFECB3', 
    icon: '🐥',
    card: '#FFFFFF',
    inputBg: '#FFFFFF',
    panelBg: '#FFFDE7',
    headerBg: '#FFFFFF',
    textPrimary: '#1A1A1A',
    textSecondary: '#666666',
  },
  { 
    id: 'blue', 
    name: '清新蓝', 
    primary: '#2196F3', 
    secondary: '#E3F2FD', 
    bubble: '#BBDEFB', 
    icon: '☃️',
    card: '#FFFFFF',
    inputBg: '#FFFFFF',
    panelBg: '#E1F5FE',
    headerBg: '#FFFFFF',
    textPrimary: '#1A1A1A',
    textSecondary: '#666666',
  },
  { 
    id: 'purple', 
    name: '梦幻紫', 
    primary: '#9C27B0', 
    secondary: '#F3E5F5', 
    bubble: '#E1BEE7', 
    icon: '💎',
    card: '#FFFFFF',
    inputBg: '#FFFFFF',
    panelBg: '#F3E5F5',
    headerBg: '#FFFFFF',
    textPrimary: '#1A1A1A',
    textSecondary: '#666666',
  },
  { 
    id: 'teal', 
    name: '自然青', 
    primary: '#009688', 
    secondary: '#E0F2F1', 
    bubble: '#B2DFDB', 
    icon: '🦁',
    card: '#FFFFFF',
    inputBg: '#FFFFFF',
    panelBg: '#E0F2F1',
    headerBg: '#FFFFFF',
    textPrimary: '#1A1A1A',
    textSecondary: '#666666',
  },
] as const;

export type ChatThemeId = typeof CHAT_THEMES[number]['id'];

export interface ChatSettings {
  // 消息字号 (12-24)
  fontSize: number;
  // 消息圆角 (0-30)
  messageRadius: number;
  // 选中的主题索引
  themeIndex: number;
  // 夜间模式
  nightMode: boolean;
  // 聊天壁纸 (可选)
  wallpaper?: string | null;
  // 名称颜色 (可选)
  nameColor?: string | null;
}

const DEFAULT_SETTINGS: ChatSettings = {
  fontSize: 16,
  messageRadius: 12,
  themeIndex: 0,
  nightMode: false,
  wallpaper: null,
  nameColor: null,
};

interface ChatSettingsState extends ChatSettings {
  // 获取当前主题
  getCurrentTheme: () => typeof CHAT_THEMES[number];
  // 更新设置
  updateSettings: (settings: Partial<ChatSettings>) => void;
  // 重置为默认
  resetSettings: () => void;
  // 设置字号
  setFontSize: (size: number) => void;
  // 设置圆角
  setMessageRadius: (radius: number) => void;
  // 设置主题
  setTheme: (index: number) => void;
  // 切换夜间模式
  toggleNightMode: () => void;
}

const STORAGE_KEY = 'chat_settings';

export const useChatSettingsStore = create<ChatSettingsState>()(
  persist(
    (set, get) => ({
      ...DEFAULT_SETTINGS,

      getCurrentTheme: () => {
        const { themeIndex } = get();
        return CHAT_THEMES[themeIndex] ?? CHAT_THEMES[0];
      },

      updateSettings: (settings) => {
        set((state) => ({ ...state, ...settings }));
      },

      resetSettings: () => {
        set(DEFAULT_SETTINGS);
      },

      setFontSize: (fontSize) => {
        set({ fontSize: Math.max(12, Math.min(24, fontSize)) });
      },

      setMessageRadius: (messageRadius) => {
        set({ messageRadius: Math.max(0, Math.min(30, messageRadius)) });
      },

      setTheme: (themeIndex) => {
        set({ themeIndex: Math.max(0, Math.min(CHAT_THEMES.length - 1, themeIndex)) });
      },

      toggleNightMode: () => {
        set((state) => ({ nightMode: !state.nightMode }));
      },
    }),
    {
      name: STORAGE_KEY,
      storage: createJSONStorage(() => AsyncStorage),
    }
  )
);

// 导出便捷 hooks
export function useChatFontSize() {
  return useChatSettingsStore((s) => s.fontSize);
}

export function useChatMessageRadius() {
  return useChatSettingsStore((s) => s.messageRadius);
}

export function useChatTheme() {
  const themeIndex = useChatSettingsStore((s) => s.themeIndex);
  return CHAT_THEMES[themeIndex];
}

export function useChatNightMode() {
  return useChatSettingsStore((s) => s.nightMode);
}

export function useChatSettingsActions() {
  return useChatSettingsStore(
    useShallow((s) => ({
      setFontSize: s.setFontSize,
      setMessageRadius: s.setMessageRadius,
      setTheme: s.setTheme,
      toggleNightMode: s.toggleNightMode,
      updateSettings: s.updateSettings,
      resetSettings: s.resetSettings,
    }))
  );
}