import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";
import type { BannerItem, BannerPayload, BannerResponse } from "@/types/api/banner.types";
import type { RootState } from "@/store/store";

export const fetchBanner = createAsyncThunk<BannerItem[], BannerPayload>(
  "banner/fetchBanner",
  async (payload, { rejectWithValue }) => {
    try {
      const { default: apiClient } = await import("@/services/api.client");
      const { API_ENDPOINTS } = await import("@/lib/constants/apiEndpoints");
      const { data } = await apiClient.post<BannerResponse>(
        API_ENDPOINTS.GET_BANNER,
        payload,
      );
      return (data.result ?? []).filter((b) => b.status === 1);
    } catch (err) {
      return rejectWithValue((err as Error)?.message ?? "Failed to load banner.");
    }
  },
);

interface BannerState {
  items: BannerItem[];
  isLoading: boolean;
  isLoaded: boolean;
  error: string | null;
}

const initialState: BannerState = {
  items: [],
  isLoading: false,
  isLoaded: false,
  error: null,
};

export const bannerSlice = createSlice({
  name: "banner",
  initialState,
  reducers: {},
  extraReducers: (builder) => {
    builder
      .addCase(fetchBanner.pending, (state) => {
        state.isLoading = true;
        state.error = null;
      })
      .addCase(fetchBanner.fulfilled, (state, action) => {
        state.isLoading = false;
        state.isLoaded = true;
        state.items = action.payload;
      })
      .addCase(fetchBanner.rejected, (state, action) => {
        state.isLoading = false;
        state.isLoaded = true;
        state.error = (action.payload as string) ?? "Something went wrong.";
      });
  },
});

export default bannerSlice.reducer;

export const selectBannerItems = (state: RootState) => state.banner.items;
export const selectBannerLoaded = (state: RootState) => state.banner.isLoaded;
export const selectBannerLoading = (state: RootState) => state.banner.isLoading;