// stores/media/signals.ts
import { signal, computed, effect } from '@preact/signals-core';
import type { MediaTrack, NetworkStats } from '@/types/media';

// 1. 原子状态
export const localTracks = signal<Map<string, MediaTrack>>(new Map());
export const remoteTracks = signal<Map<string, Map<string, MediaTrack>>>(new Map()); // userId -> trackMap
export const networkStats = signal<NetworkStats>({ rtt: 0, jitter: 0, packetLoss: 0 });

// 2. 派生状态 - 自动追踪依赖，仅当相关 track 变化时重算
export const dominantSpeaker = computed(() => {
  let maxVolume = -1;
  let speakerId: string | null = null;
  remoteTracks.value.forEach((tracks, uid) => {
    const audioTrack = tracks.get('audio');
    if (audioTrack?.volume > maxVolume) {
      maxVolume = audioTrack.volume;
      speakerId = uid;
    }
  });
  return speakerId;
});

// 3. 副作用隔离 - 统计上报、自动降码逻辑
effect(() => {
  const stats = networkStats.value;
  if (stats.packetLoss > 0.3) {
    mediaEngine.requestBitrateReduction(); // 触发引擎内部调整，不经过 UI 层
  }
  // 上报埋点...
});

// 4. 暴露标准化 Action 供上层调用
export const mediaActions = {
  addLocalTrack: (track: MediaTrack) => { localTracks.value = new Map(localTracks.value).set(track.id, track); },
  removeRemoteUser: (uid: string) => { 
    const next = new Map(remoteTracks.value); 
    next.delete(uid); 
    remoteTracks.value = next; 
  },
  updateNetworkStats: (stats: Partial<NetworkStats>) => { 
    networkStats.value = { ...networkStats.value, ...stats }; 
  }
};

// store/features/meeting/participantsSlice.ts
import { createSlice, createEntityAdapter, PayloadAction } from '@reduxjs/toolkit';
import { RootState } from '@/store';

const participantsAdapter = createEntityAdapter<Participant, string>({
  selectId: (p) => p.userId,
  sortComparer: (a, b) => a.joinTime - b.joinTime, // 按加入时间排序
});

const participantsSlice = createSlice({
  name: 'meeting/participants',
  initialState: participantsAdapter.getInitialState({
    loading: 'idle',
    currentUserId: null as string | null,
  }),
  reducers: {
    // 乐观更新：本地静音/取消静音即时反馈
    toggleMuteOptimistic: (state, action: PayloadAction<{ userId: string; muted: boolean }>) => {
      const participant = state.entities[action.payload.userId];
      if (participant) {
        participant.audioMuted = action.payload.muted;
      }
    },
    // 服务端同步回调：权威状态覆盖
    syncParticipantState: (state, action: PayloadAction<Participant>) => {
      participantsAdapter.upsertOne(state, action.payload);
    },
    // 批量同步：会议中途加入/全量刷新
    setAllParticipants: (state, action: PayloadAction<Participant[]>) => {
      participantsAdapter.setAll(state, action.payload);
    },
    removeParticipant: participantsAdapter.removeOne,
  },
  extraReducers: (builder) => {
    // 监听 RTK Query 的 fulfilled action 进行同步
    builder.addMatcher(
      api.endpoints.fetchMeetingParticipants.matchFulfilled,
      (state, action) => participantsAdapter.setAll(state, action.payload)
    );
  },
});

// 导出 Memoized Selectors，避免重复计算
export const selectParticipants = participantsAdapter.getSelectors<RootState>(
  (state) => state.meeting.participants
).selectAll;

export const selectCurrentUser = (state: RootState) => 
  state.meeting.participants.entities[state.meeting.participants.currentUserId];

// store/api/meetingApi.ts
export const meetingApi = createApi({
  reducerPath: 'meetingApi',
  baseQuery: fetchBaseQuery({ baseUrl: '/api/v1', prepareHeaders: (headers) => { /* token注入 */ } }),
  tagTypes: ['Meeting', 'Participants', 'ChatMessages', 'Recording'],
  endpoints: (builder) => ({
    joinMeeting: builder.mutation<JoinResponse, JoinParams>({
      query: (body) => ({ url: '/meetings/join', method: 'POST', body }),
      invalidatesTags: ['Meeting', 'Participants'], // 入会成功自动触发列表刷新
      async onQueryStarted(arg, { dispatch, queryFulfilled }) {
        // 乐观更新：入会前预置本地用户信息
        const patchResult = dispatch(participantsSlice.actions.setCurrentUser(arg.userInfo));
        try {
          await queryFulfilled;
        } catch {
          patchResult.undo(); // 失败回滚
        }
      },
    }),
    getMessages: builder.query<Message[], { meetingId: string; cursor?: string }>({
      query: ({ meetingId, cursor }) => `/meetings/${meetingId}/messages?cursor=${cursor}`,
      serializeQueryArgs: ({ endpointName, queryArgs }) => `${endpointName}-${queryArgs.meetingId}`, // 同会议共享缓存
      forceRefetch({ currentArg, previousArg }) {
        return currentArg?.cursor !== previousArg?.cursor; // 分页参数变化才重新请求
      },
    }),
  }),
});

// stores/ui/invitationPanel.ts
import { defineStore } from 'pinia';
import { ref, computed, watch } from 'vue';
import { useDebounceFn, useTimeoutFn } from '@vueuse/core';
import { useMeetingStore } from '@/store/features/meeting/meetingSlice'; // RTK Selector Hook 适配器
import { mediaActions, dominantSpeaker } from '@/stores/media/signals'; // Signals 适配器

export const useInvitationPanelStore = defineStore('ui/invitationPanel', () => {
  // 1. 依赖外部 Store (RTK/Signals) - 通过适配器桥接
  const meetingStore = useMeetingStore(); // 封装了 useSelector 的 Hook
  const meetingId = computed(() => meetingStore.currentMeetingId);
  const currentUserRole = computed(() => meetingStore.currentUserRole);

  // 2. 内部 UI 状态
  const visible = ref(false);
  const searchKeyword = ref('');
  const invitingUsers = ref<Set<string>>(new Set());
  const inviteStatus = ref<Map<string, 'pending' | 'success' | 'failed'>>(new Map());

  // 3. 计算属性聚合数据
  const contactList = computed(() => {
    const list = meetingStore.contacts; // 来自 RTK 缓存
    if (!searchKeyword.value) return list;
    return list.filter(u => u.name.includes(searchKeyword.value));
  });

  const canInvite = computed(() => 
    currentUserRole.value === 'host' || currentUserRole.value === 'cohost'
  );

  // 4. 复杂交互 Action 封装
  const invite = async (userIds: string[]) => {
    if (!canInvite.value) return;
    
    visible.value = true; // 打开面板反馈
    userIds.forEach(uid => {
      invitingUsers.value.add(uid);
      inviteStatus.value.set(uid, 'pending');
    });

    // 防抖发送信令，避免连点刷接口
    const debouncedSend = useDebounceFn(async () => {
      try {
        await meetingApi.inviteUsers({ meetingId: meetingId.value!, userIds: [...invitingUsers.value] });
        invitingUsers.value.forEach(uid => inviteStatus.value.set(uid, 'success'));
        // 3秒后自动关闭成功提示
        useTimeoutFn(() => { visible.value = false; }, 3000);
      } catch (e) {
        invitingUsers.value.forEach(uid => inviteStatus.value.set(uid, 'failed'));
        // 错误上报...
      } finally {
        invitingUsers.value.clear();
      }
    }, 300);

    debouncedSend();
  };

  // 5. 监听实时状态联动 (Signals -> Pinia)
  // 当主讲人变化时，若被邀请者是主讲人，高亮显示
  watch(() => dominantSpeaker.value, (speakerId) => {
    if (speakerId && invitingUsers.value.has(speakerId)) {
      // 触发 UI 高亮动画...
    }
  });

  return { visible, searchKeyword, contactList, canInvite, invite, inviteStatus };
});

// store/middleware/optimisticMiddleware.ts
import { Middleware, AnyAction } from '@reduxjs/toolkit';
import { v4 as uuidv4 } from 'uuid';

interface OptimisticMeta {
  offlineId: string;          // 离线唯一标识
  rollbackAction: AnyAction;  // 失败回滚 Action
  confirmAction?: AnyAction;  // 成功确认 Action (可选，用于携带服务端返回的权威字段如 serverTimestamp)
  retryCount?: number;
  maxRetries?: number;
}

// 扩展 Action 类型
declare module '@reduxjs/toolkit' {
  interface AnyAction {
    meta?: OptimisticMeta & AnyAction['meta'];
  }
}

export const optimisticMiddleware: Middleware = (store) => (next) => (action) => {
  const { meta } = action;
  
  // 1. 标准 Action 直接透传
  if (!meta?.offlineId) return next(action);

  // 2. 乐观更新：立即分发 rollbackAction 的逆操作（或直接应用 payload）
  // 假设 action.payload 已包含期望的新状态
  next(action); 

  // 3. 异步提交队列（持久化到 IndexedDB，保证进程重启不丢）
  const offlineQueue = getOfflineQueue(); // 单例队列管理器
  offlineQueue.enqueue({
    id: meta.offlineId,
    actionType: action.type,
    payload: action.payload,
    rollback: meta.rollbackAction,
    confirm: meta.confirmAction,
    retries: meta.retryCount ?? 0,
    maxRetries: meta.maxRetries ?? 3,
    timestamp: Date.now(),
  });

  // 4. 触发网络层发送（由 RTK Query 或 WebSocket Manager 消费队列）
  networkLayer.flushQueue();
  
  // 阻止后续 reducer 重复处理（已由 next(action) 处理）
  return { ...action, meta: { ...meta, _processed: true } };
};

sequenceDiagram
    participant Web as Web端
    participant Mobile as 移动端
    participant Server as 信令服务器
    participant Engine as 媒体引擎
    
    Mobile->>Server: Intent: {type: 'MUTE', target: 'local', payload: true, clientId: 'mobile-1'}
    Server->>Server: 权限校验 + 状态机流转
    Server-->>Web: AuthorityEvent: {type: 'AUDIO_MUTED', userId: 'u1', sourceClient: 'mobile-1', timestamp: 12345}
    Server-->>Mobile: AuthorityEvent: {type: 'AUDIO_MUTED', ...} (回显确认)
    Web->>Engine: applyAuthorityEvent() -> mediaActions.muteLocal()
    Mobile->>Engine: applyAuthorityEvent() -> mediaActions.muteLocal()
    Note right of Engine: Signals 层响应式更新, 双端 UI 同帧刷新

// e2e/state-consistency.spec.ts
import { test, expect } from '@playwright/test';

test('大型会议中途弱网重连状态一致性', async ({ page, context }) => {
  // 1. 进入 200 人会议，等待状态稳定
  await page.goto('/meeting/large-200');
  await page.waitForSelector('[data-testid="participant-list"]:has-text("200")');
  
  // 2. 捕获基线状态快照
  const baselineState = await captureReduxState(page); // 自定义注入脚本读取 store.getState()
  const baselineSignals = await captureSignalsState(page); // 读取 dominantSpeaker.value 等
  
  // 3. 模拟弱网：离线 -> 发起乐观操作 (举手) -> 恢复在线
  await context.setOffline(true);
  await page.click('[data-testid="raise-hand-btn"]');
  await expect(page.locator('[data-testid="my-hand-raised"]')).toBeVisible(); // 乐观生效
  
  await context.setOffline(false);
  await page.waitForNetworkIdle(); // 等待队列刷新
  
  // 4. 捕获恢复后状态，Diff 对比
  const recoveredState = await captureReduxState(page);
  const diff = deepDiff(baselineState, recoveredState, {
    // 忽略预期变化字段
    ignorePaths: ['meeting.participants.entities.*.handRaised', 'meeting.meta.lastSyncTime']
  });
  
  // 5. 断言：除举手状态外，核心业务状态零漂移
  expect(diff.added).toEqual([]);
  expect(diff.deleted).toEqual([]);
  expect(diff.updated).toHaveLength(1); // 仅允许 handRaised 变更
  
  // 6. 视觉回归：确保 UI 无闪烁/错位
  await expect(page).toHaveScreenshot('meeting-reconnected.png', { maxDiffPixels: 100 });
});

// adapters/legacyVuexAdapter.ts
import { LegacyVuexStore } from '@/legacy/store';
import type { IUnifiedStore } from '@/store/interfaces';

export class LegacyVuexAdapter implements IUnifiedStore<RootState> {
  constructor(private legacyStore: LegacyVuexStore) {}
  
  getState() { 
    // 转换旧状态结构为新 Schema
    return transformLegacyToNew(this.legacyStore.state); 
  }
  
  dispatch(action) {
    // 映射新 Action 到旧 Mutation/Action
    if (action.type.startsWith('meeting/')) {
      return this.legacyStore.dispatch(mapNewActionToLegacy(action));
    }
    return this.legacyStore.dispatch(action); // 透传
  }
  
  subscribe(listener) {
    // 监听旧 Store 变化，触发新监听器
    return this.legacyStore.subscribe((mutation, state) => {
      listener(transformLegacyToNew(state));
    });
  }
}

// 采样上报 (1% 全量 + 100% 错误)
const shouldReport = Math.random() < 0.01 || action.type.endsWith('/rejected');
if (shouldReport) {
  logtail.push({
    level: 'info',
    event: 'state_transition',
    actionType: action.type,
    prevStateHash: hash(prevState), // 仅上报 Hash，保护隐私
    nextStateHash: hash(nextState),
    durationMs: performance.now() - startTime,
    userId: getCurrentUserId(),
    sessionId: getMeetingId(),
  });
}