import { createSlice } from '@reduxjs/toolkit';

const initialState = {
  modals: {
    settings: false,
    invite: false,
    volume: false,
    recording: false,
    leave: false,
    jamTrack: false,
    backingTrack: false,
    mediaControls: false,
    metronome: false,
    videoSettings: false
  },

  panels: {
    chat: true,
    mixer: false,
    participants: true,
    tracks: true
  },

  // View preferences
  view: {
    participantLayout: 'grid', // 'grid' | 'list' | 'compact'
    showParticipantVideos: true,
    showMixer: false,
    sidebarCollapsed: false
  },

  // Media UI state (Phase 5: from MediaContext)
  mediaUI: {
    showMyMixes: false,
    showCustomMixes: false,
    editingMixdownId: null,
    creatingMixdown: false,
    createMixdownErrors: null
  },

  // Mixer UI state (Phase 5: from useMixerHelper/useMixerStore)
  mixerUI: {
    mixMode: 'PERSONAL', // 'PERSONAL' | 'MASTER'
    currentMixerRange: {
      min: null,
      max: null
    }
  },

  // JamTrack UI state (Phase 5)
  openJamTrack: null, // Currently open JamTrack ID or null
  jamTrackUI: {
    lastUsedMixdownId: null, // User's last selected mixdown for this session
    volume: 100 // Last used volume (0-100)
  },

  // Recording state
  recording: {
    isRecording: false,
    recordingId: null,
    thisClientStartedRecording: false
  }
};

export const sessionUISlice = createSlice({
  name: 'sessionUI',
  initialState,
  reducers: {
    // Modal management
    openModal: (state, action) => {
      state.modals[action.payload] = true;
    },

    closeModal: (state, action) => {
      state.modals[action.payload] = false;
    },

    toggleModal: (state, action) => {
      state.modals[action.payload] = !state.modals[action.payload];
    },

    closeAllModals: (state) => {
      Object.keys(state.modals).forEach(key => {
        state.modals[key] = false;
      });
    },

    // Panel management
    openPanel: (state, action) => {
      state.panels[action.payload] = true;
    },

    closePanel: (state, action) => {
      state.panels[action.payload] = false;
    },

    togglePanel: (state, action) => {
      state.panels[action.payload] = !state.panels[action.payload];
    },

    // View preferences
    setParticipantLayout: (state, action) => {
      state.view.participantLayout = action.payload;
    },

    toggleParticipantVideos: (state) => {
      state.view.showParticipantVideos = !state.view.showParticipantVideos;
    },

    setShowParticipantVideos: (state, action) => {
      state.view.showParticipantVideos = action.payload;
    },

    toggleMixer: (state) => {
      state.view.showMixer = !state.view.showMixer;
    },

    setShowMixer: (state, action) => {
      state.view.showMixer = action.payload;
    },

    toggleSidebar: (state) => {
      state.view.sidebarCollapsed = !state.view.sidebarCollapsed;
    },

    setSidebarCollapsed: (state, action) => {
      state.view.sidebarCollapsed = action.payload;
    },

    // Phase 5: Media UI reducers
    setShowMyMixes: (state, action) => {
      state.mediaUI.showMyMixes = action.payload;
    },

    toggleMyMixes: (state) => {
      state.mediaUI.showMyMixes = !state.mediaUI.showMyMixes;
    },

    setShowCustomMixes: (state, action) => {
      state.mediaUI.showCustomMixes = action.payload;
    },

    toggleCustomMixes: (state) => {
      state.mediaUI.showCustomMixes = !state.mediaUI.showCustomMixes;
    },

    setEditingMixdownId: (state, action) => {
      state.mediaUI.editingMixdownId = action.payload;
    },

    setCreatingMixdown: (state, action) => {
      state.mediaUI.creatingMixdown = action.payload;
    },

    setCreateMixdownErrors: (state, action) => {
      state.mediaUI.createMixdownErrors = action.payload;
    },

    // Phase 5: Mixer UI reducers
    setMixMode: (state, action) => {
      state.mixerUI.mixMode = action.payload;
    },

    toggleMixMode: (state) => {
      state.mixerUI.mixMode = state.mixerUI.mixMode === 'PERSONAL' ? 'MASTER' : 'PERSONAL';
    },

    setCurrentMixerRange: (state, action) => {
      state.mixerUI.currentMixerRange = action.payload;
    },

    // Phase 5: JamTrack UI reducers
    setOpenJamTrack: (state, action) => {
      state.openJamTrack = action.payload;
    },

    updateJamTrackUI: (state, action) => {
      state.jamTrackUI = { ...state.jamTrackUI, ...action.payload };
    },

    clearOpenJamTrack: (state) => {
      state.openJamTrack = null;
    },

    // Recording state reducers
    setRecordingStarted: (state, action) => {
      state.recording.isRecording = true;
      state.recording.recordingId = action.payload;
      state.recording.thisClientStartedRecording = true;
    },

    setRecordingStopped: (state) => {
      state.recording.isRecording = false;
      state.recording.recordingId = null;
      state.recording.thisClientStartedRecording = false;
    },

    // Reset UI state (useful when leaving session)
    resetUI: (state) => {
      return { ...initialState };
    }
  }
});

export const {
  openModal,
  closeModal,
  toggleModal,
  closeAllModals,
  openPanel,
  closePanel,
  togglePanel,
  setParticipantLayout,
  toggleParticipantVideos,
  setShowParticipantVideos,
  toggleMixer,
  setShowMixer,
  toggleSidebar,
  setSidebarCollapsed,
  // Phase 5: Media UI actions
  setShowMyMixes,
  toggleMyMixes,
  setShowCustomMixes,
  toggleCustomMixes,
  setEditingMixdownId,
  setCreatingMixdown,
  setCreateMixdownErrors,
  // Phase 5: Mixer UI actions
  setMixMode,
  toggleMixMode,
  setCurrentMixerRange,
  // Phase 5: JamTrack UI actions
  setOpenJamTrack,
  updateJamTrackUI,
  clearOpenJamTrack,
  // Recording actions
  setRecordingStarted,
  setRecordingStopped,
  resetUI
} = sessionUISlice.actions;

export default sessionUISlice.reducer;

// Selectors
export const selectModal = (modalName) => (state) => state.sessionUI.modals[modalName];
export const selectAllModals = (state) => state.sessionUI.modals;
export const selectIsAnyModalOpen = (state) => Object.values(state.sessionUI.modals).some(Boolean);

export const selectPanel = (panelName) => (state) => state.sessionUI.panels[panelName];
export const selectAllPanels = (state) => state.sessionUI.panels;

export const selectParticipantLayout = (state) => state.sessionUI.view.participantLayout;
export const selectShowParticipantVideos = (state) => state.sessionUI.view.showParticipantVideos;
export const selectShowMixer = (state) => state.sessionUI.view.showMixer;
export const selectSidebarCollapsed = (state) => state.sessionUI.view.sidebarCollapsed;
export const selectViewPreferences = (state) => state.sessionUI.view;

// Phase 5: Media UI selectors
export const selectShowMyMixes = (state) => state.sessionUI.mediaUI.showMyMixes;
export const selectShowCustomMixes = (state) => state.sessionUI.mediaUI.showCustomMixes;
export const selectEditingMixdownId = (state) => state.sessionUI.mediaUI.editingMixdownId;
export const selectCreatingMixdown = (state) => state.sessionUI.mediaUI.creatingMixdown;
export const selectCreateMixdownErrors = (state) => state.sessionUI.mediaUI.createMixdownErrors;
export const selectMediaUI = (state) => state.sessionUI.mediaUI;

// Phase 5: Mixer UI selectors
export const selectMixMode = (state) => state.sessionUI.mixerUI.mixMode;
export const selectCurrentMixerRange = (state) => state.sessionUI.mixerUI.currentMixerRange;
export const selectMixerUI = (state) => state.sessionUI.mixerUI;

// Phase 5: JamTrack UI selectors
export const selectOpenJamTrack = (state) => state.sessionUI.openJamTrack;
export const selectJamTrackUI = (state) => state.sessionUI.jamTrackUI;

// Recording selectors
export const selectIsRecording = (state) => state.sessionUI.recording.isRecording;
export const selectRecordingId = (state) => state.sessionUI.recording.recordingId;
export const selectThisClientStartedRecording = (state) => state.sessionUI.recording.thisClientStartedRecording;
