import { createSlice, type PayloadAction } from "@reduxjs/toolkit"

interface UiState {
  sidebarOpen: boolean
  darkMode: boolean
  currentPage: string
  loading: {
    [key: string]: boolean
  }
}

const initialState: UiState = {
  sidebarOpen: true,
  darkMode: false,
  currentPage: "/",
  loading: {},
}

export const uiSlice = createSlice({
  name: "ui",
  initialState,
  reducers: {
    toggleSidebar: (state) => {
      state.sidebarOpen = !state.sidebarOpen
    },
    setSidebarOpen: (state, action: PayloadAction<boolean>) => {
      state.sidebarOpen = action.payload
    },
    toggleDarkMode: (state) => {
      state.darkMode = !state.darkMode
    },
    setDarkMode: (state, action: PayloadAction<boolean>) => {
      state.darkMode = action.payload
    },
    setCurrentPage: (state, action: PayloadAction<string>) => {
      state.currentPage = action.payload
    },
    setLoading: (state, action: PayloadAction<{ key: string; isLoading: boolean }>) => {
      const { key, isLoading } = action.payload
      state.loading[key] = isLoading
    },
  },
})

export const { toggleSidebar, setSidebarOpen, toggleDarkMode, setDarkMode, setCurrentPage, setLoading } =
  uiSlice.actions

export default uiSlice.reducer