// src/app/store.js
import { configureStore } from '@reduxjs/toolkit';
import counterReducer from '../features/counter/counterSlice'; // Import the counter reducer

/**
 * @function configureStore
 * @description Centralizes the application's state by creating a Redux store.
 * It automatically sets up the Redux DevTools Extension and adds some Redux middleware
 * like Redux Thunk for handling asynchronous logic.
 * We consolidate all feature reducers here to build the root reducer.
 */
export const store = configureStore({
  reducer: {
    // We register our counter reducer here.
    // Each slice of state gets its own key in the root reducer.
    counter: counterReducer,
    // Add other slices/reducers here as your application grows
    // users: usersReducer,
    // products: productsReducer,
  },
  // Middleware setup is handled automatically by configureStore.
  // If you need custom middleware, you can add it here.
  // middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(myCustomMiddleware),
  // DevTools are enabled by default in development mode.
  // devTools: process.env.NODE_ENV !== 'production',
});

// Optional: Export types for useSelector and useDispatch for better type safety with TypeScript
// export type RootState = ReturnType<typeof store.getState>;
// export type AppDispatch = typeof store.dispatch;

// src/features/counter/counterSlice.js
import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';

/**
 * @function createAsyncThunk
 * @description Creates an async thunk action. This is used for dispatching actions that involve asynchronous logic,
 * such as API calls. It handles pending, fulfilled, and rejected states automatically.
 * Here, we simulate an asynchronous increment after a delay.
 */
export const incrementAsync = createAsyncThunk(
  'counter/incrementAsync', // Action type prefix
  async (amount) => {
    // Simulate an API call with a 1-second delay
    await new Promise((resolve) => setTimeout(resolve, 1000));
    return amount; // The value returned here will be the payload of the fulfilled action
  }
);

/**
 * @function createSlice
 * @description A function that accepts an initial state, an object full of reducer functions,
 * and a 'slice name', and automatically generates action creators and action types that correspond
 * to the reducers and state.
 */
export const counterSlice = createSlice({
  name: 'counter', // This is the slice name, used as a prefix for action types
  initialState: {
    value: 0,
    status: 'idle', // 'idle' | 'loading' | 'succeeded' | 'failed' - for async status
  },
  reducers: {
    /**
     * @description Reducer for synchronously incrementing the counter.
     * With Redux Toolkit and Immer, we can write 'mutating' logic directly inside reducers,
     * but Immer actually handles creating a new immutable state behind the scenes.
     */
    increment: (state) => {
      state.value += 1; // Direct mutation (Immer handles it immutably)
    },
    /**
     * @description Reducer for synchronously decrementing the counter.
     */
    decrement: (state) => {
      state.value -= 1;
    },
    /**
     * @description Reducer for synchronously incrementing by a specific amount.
     * The 'action.payload' contains the amount passed when dispatching the action.
     */
    incrementByAmount: (state, action) => {
      state.value += action.payload;
    },
  },
  /**
   * @description Extra reducers are used to handle actions defined outside of this slice,
   * typically actions generated by 'createAsyncThunk'. They respond to actions from other slices/thunks.
   */
  extraReducers: (builder) => {
    builder
      .addCase(incrementAsync.pending, (state) => {
        state.status = 'loading'; // Set status to loading when async action starts
      })
      .addCase(incrementAsync.fulfilled, (state, action) => {
        state.status = 'succeeded'; // Set status to succeeded
        state.value += action.payload; // Update state with the payload from the fulfilled action
      })
      .addCase(incrementAsync.rejected, (state) => {
        state.status = 'failed'; // Handle errors by setting status to failed
      });
  },
});

// We export the action creators for our reducers, to be used by components to dispatch actions.
export const { increment, decrement, incrementByAmount } = counterSlice.actions;

// We export the reducer function itself to be included in the Redux store configuration.
export default counterSlice.reducer;

// src/components/Counter.jsx
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { increment, decrement, incrementByAmount, incrementAsync } from '../features/counter/counterSlice';

/**
 * @function Counter
 * @description A React component that demonstrates how to interact with the Redux store
 * using 'useSelector' to read state and 'useDispatch' to dispatch actions.
 */
function Counter() {
  // Use 'useSelector' to extract specific pieces of state from the Redux store.
  // This component will re-render only when 'state.counter.value' or 'state.counter.status' changes.
  const count = useSelector((state) => state.counter.value);
  const status = useSelector((state) => state.counter.status); // Also get status for async operations

  // Use 'useDispatch' to get the 'dispatch' function, which we use to send actions to the store.
  const dispatch = useDispatch();

  // Define local state for the increment amount input, demonstrating that not all state needs to be global.
  const [incrementAmount, setIncrementAmount] = React.useState('2');

  return (
    <div>
      <p>Current Count: <strong>{count}</strong></p>
      <p>Status: <em>{status}</em></p>
      <div>
        <button onClick={() => dispatch(increment())}>Increment</button>
        <button onClick={() => dispatch(decrement())}>Decrement</button>
      </div>
      <div>
        <input
          aria-label="Set increment amount"
          value={incrementAmount}
          onChange={(e) => setIncrementAmount(e.target.value)}
        />
        <button onClick={() => dispatch(incrementByAmount(Number(incrementAmount) || 0))}>
          Add Amount
        </button>
        <button onClick={() => dispatch(incrementAsync(Number(incrementAmount) || 0))}>
          Add Async (1s)
        </button>
      </div>
    </div>
  );
}

export default Counter;

// src/index.js (or App.js, depending on your setup)
import React from 'react';
import ReactDOM from 'react-dom/client'; // For React 18+
import { Provider } from 'react-redux'; // Import the Redux Provider
import { store } from './app/store'; // Import our configured store
import Counter from './components/Counter'; // Import the Counter component

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    {/* The Provider component makes the Redux store available to any nested components */}
    {/* that call 'useSelector' or 'useDispatch'. It must wrap your root component. */}
    <Provider store={store}>
      <Counter />
    </Provider>
  </React.StrictMode>
);

// src/store/useCounterStore.js
import { create } from 'zustand';

/**
 * @function create
 * @description Creates a Zustand store. It takes a function that defines the initial state
 * and functions (actions) to modify that state.
 * The function receives 'set' and 'get' as arguments:
 * 'set': A function to merge state (like React's setState).
 * 'get': A function to retrieve the current state.
 */
export const useCounterStore = create((set, get) => ({
  // Define initial state properties
  count: 0,
  status: 'idle', // For demonstrating async operations within the store

  /**
   * @function increment
   * @description Action to synchronously increment the counter.
   * We use 'set' to update the state, returning a new state object for immutability.
   */
  increment: () => set((state) => ({ count: state.count + 1 })),

  /**
   * @function decrement
   * @description Action to synchronously decrement the counter.
   */
  decrement: () => set((state) => ({ count: state.count - 1 })),

  /**
   * @function incrementByAmount
   * @description Action to synchronously increment the counter by a specific amount.
   * Takes 'amount' as an argument, directly passed by the component.
   */
  incrementByAmount: (amount) => set((state) => ({ count: state.count + amount })),

  /**
   * @function incrementAsync
   * @description Asynchronous action to increment the counter after a delay.
   * Zustand allows 'async/await' directly within store actions, offering great flexibility.
   */
  incrementAsync: async (amount) => {
    set({ status: 'loading' }); // Update status to loading immediately
    await new Promise((resolve) => setTimeout(resolve, 1000)); // Simulate an API call delay
    set((state) => ({ count: state.count + amount, status: 'succeeded' })); // Update count and status upon success
  },
}));

// src/components/ZustandCounter.jsx
import React from 'react';
import { useCounterStore } from '../store/useCounterStore'; // Import our Zustand store hook

/**
 * @function ZustandCounter
 * @description A React component that demonstrates how to interact with a Zustand store
 * using the custom hook provided by 'create'.
 */
function ZustandCounter() {
  // Use the Zustand store hook to subscribe to specific state values and actions.
  // By using selectors, this component will only re-render when 'count' or 'status' changes.
  const count = useCounterStore((state) => state.count);
  const status = useCounterStore((state) => state.status);

  // We can also select actions directly. This pattern helps avoid unnecessary re-renders
  // if the actions themselves are stable and don't change.
  const increment = useCounterStore((state) => state.increment);
  const decrement = useCounterStore((state) => state.decrement);
  const incrementByAmount = useCounterStore((state) => state.incrementByAmount);
  const incrementAsync = useCounterStore((state) => state.incrementAsync);

  // Define local state for the increment amount input, showcasing that not all state needs to be global.
  const [incrementAmount, setIncrementAmount] = React.useState('2');

  return (
    <div>
      <p>Current Count (Zustand): <strong>{count}</strong></p>
      <p>Status: <em>{status}</em></p>
      <div>
        <button onClick={increment}>Increment</button>
        <button onClick={decrement}>Decrement</button>
      </div>
      <div>
        <input
          aria-label="Set increment amount"
          value={incrementAmount}
          onChange={(e) => setIncrementAmount(e.target.value)}
        />
        <button onClick={() => incrementByAmount(Number(incrementAmount) || 0)}>
          Add Amount
        </button>
        <button onClick={() => incrementAsync(Number(incrementAmount) || 0)}>
          Add Async (1s)
        </button>
      </div>
    </div>
  );
}

export default ZustandCounter;