import { createSlice, createAsyncThunk, PayloadAction } from '@reduxjs/toolkit';
import { BlogState, BlogPost } from '@/types/blog';
import { blogApi } from '@/lib/api';

const initialState: BlogState = {
  posts: [],
  currentPost: null,
  loading: false,
  error: null,
};

// Async thunks
export const fetchPosts = createAsyncThunk(
  'blog/fetchPosts',
  async (_, { rejectWithValue }) => {
    console.log('fetchPosts thunk called');
    try {
      console.log('Calling blogApi.getPosts()...');
      const posts = await blogApi.getPosts();
      console.log('fetchPosts thunk success, posts:', posts);
      return posts;
    } catch (error) {
      console.error('fetchPosts thunk error:', error);
      return rejectWithValue('Failed to fetch posts');
    }
  }
);

export const fetchPost = createAsyncThunk(
  'blog/fetchPost',
  async (id: number, { rejectWithValue }) => {
    try {
      const post = await blogApi.getPost(id);
      return post;
    } catch (error) {
      return rejectWithValue('Failed to fetch post');
    }
  }
);

export const fetchPostBySlug = createAsyncThunk(
  'blog/fetchPostBySlug',
  async (slug: string, { rejectWithValue }) => {
    try {
      const post = await blogApi.getPostBySlug(slug);
      return post;
    } catch (error) {
      return rejectWithValue('Failed to fetch post by slug');
    }
  }
);

const blogSlice = createSlice({
  name: 'blog',
  initialState,
  reducers: {
    clearCurrentPost: (state) => {
      state.currentPost = null;
    },
    clearError: (state) => {
      state.error = null;
    },
  },
  extraReducers: (builder) => {
    builder
      // Fetch posts
      .addCase(fetchPosts.pending, (state) => {
        state.loading = true;
        state.error = null;
      })
      .addCase(fetchPosts.fulfilled, (state, action: PayloadAction<BlogPost[]>) => {
        state.loading = false;
        console.log('Redux: fetchPosts.fulfilled, payload:', action.payload);
        console.log('Redux: payload length:', action.payload.length);
        state.posts = action.payload;
        console.log('Redux: state.posts after update:', state.posts);
        console.log('Redux: state.posts length:', state.posts.length);
      })
      .addCase(fetchPosts.rejected, (state, action) => {
        state.loading = false;
        state.error = action.payload as string;
      })
      // Fetch single post
      .addCase(fetchPost.pending, (state) => {
        state.loading = true;
        state.error = null;
      })
      .addCase(fetchPost.fulfilled, (state, action: PayloadAction<BlogPost>) => {
        state.loading = false;
        state.currentPost = action.payload;
      })
      .addCase(fetchPost.rejected, (state, action) => {
        state.loading = false;
        state.error = action.payload as string;
      })
      // Fetch single post by slug
      .addCase(fetchPostBySlug.pending, (state) => {
        state.loading = true;
        state.error = null;
      })
      .addCase(fetchPostBySlug.fulfilled, (state, action: PayloadAction<BlogPost>) => {
        state.loading = false;
        state.currentPost = action.payload;
      })
      .addCase(fetchPostBySlug.rejected, (state, action) => {
        state.loading = false;
        state.error = action.payload as string;
      });
  },
});

export const { clearCurrentPost, clearError } = blogSlice.actions;
export default blogSlice.reducer;