// src/store/slices/counterSlice.ts
import { createSlice, PayloadAction } from "@reduxjs/toolkit";

interface CounterState {
  value: number;
  history: number[];
}

const initialState: CounterState = {
  value: 0,
  history: [],
};

const counterSlice = createSlice({
  name: "counter", // Префікс для типів actions: counter/increment

  initialState,

  reducers: {
    // Кожен метод стає action creator + case у reducer
    increment(state) {
      state.value += 1; // Immer перетворює це на immutable update
      state.history.push(state.value);
    },

    decrement(state) {
      state.value -= 1;
      state.history.push(state.value);
    },

    incrementByAmount(state, action: PayloadAction<number>) {
      // PayloadAction<T> типізує action.payload
      state.value += action.payload;
      state.history.push(state.value);
    },

    reset(state) {
      // Можна повернути новий стан або мутувати поточний
      return initialState;
    },
  },
});

// Експортуємо згенеровані action creators
export const { increment, decrement, incrementByAmount, reset } = counterSlice.actions;

// Експортуємо reducer для підключення до store
export default counterSlice.reducer;

// src/store/index.ts
import { configureStore } from "@reduxjs/toolkit";
import counterReducer from "./slices/counterSlice";

export const store = configureStore({
  reducer: {
    counter: counterReducer,
  },
});

// Виведення типів для useSelector та useDispatch
export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;

// src/store/hooks.ts
import { TypedUseSelectorHook, useDispatch, useSelector } from "react-redux";
import type { RootState, AppDispatch } from "./index";

// Типізовані версії useDispatch та useSelector
export const useAppDispatch = () => useDispatch<AppDispatch>();
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;

// src/components/Counter.tsx
import { useAppDispatch, useAppSelector } from "../store/hooks";
import { increment, decrement, incrementByAmount, reset } from "../store/slices/counterSlice";

function Counter() {
  // TypeScript автоматично виводить типи
  const { value, history } = useAppSelector((state) => state.counter);
  const dispatch = useAppDispatch();

  return (
    <div className="counter">
      <h1>Лічильник: {value}</h1>

      <div className="controls">
        <button onClick={() => dispatch(increment())}>+1</button>
        <button onClick={() => dispatch(decrement())}>-1</button>
        <button onClick={() => dispatch(incrementByAmount(5))}>+5</button>
        <button onClick={() => dispatch(reset())}>Скинути</button>
      </div>

      <div className="history">
        <h3>Історія змін:</h3>
        <p>{history.join(" → ")}</p>
      </div>
    </div>
  );
}

export default Counter;

// src/store/slices/todoSlice.ts
import { createSlice, PayloadAction } from "@reduxjs/toolkit";

interface Todo {
  id: number;
  text: string;
  completed: boolean;
}

interface TodoState {
  todos: Todo[];
  filter: "all" | "active" | "completed";
}

const initialState: TodoState = {
  todos: [],
  filter: "all",
};

let nextTodoId = 0;

const todoSlice = createSlice({
  name: "todos",
  initialState,
  reducers: {
    addTodo(state, action: PayloadAction<string>) {
      state.todos.push({
        id: nextTodoId++,
        text: action.payload,
        completed: false,
      });
    },

    toggleTodo(state, action: PayloadAction<number>) {
      const todo = state.todos.find((t) => t.id === action.payload);
      if (todo) {
        todo.completed = !todo.completed; // Мутація через Immer
      }
    },

    deleteTodo(state, action: PayloadAction<number>) {
      state.todos = state.todos.filter((t) => t.id !== action.payload);
    },

    setFilter(state, action: PayloadAction<TodoState["filter"]>) {
      state.filter = action.payload;
    },

    clearCompleted(state) {
      state.todos = state.todos.filter((t) => !t.completed);
    },
  },
});

export const { addTodo, toggleTodo, deleteTodo, setFilter, clearCompleted } = todoSlice.actions;
export default todoSlice.reducer;

// src/store/index.ts — комбінування slices
import { configureStore } from "@reduxjs/toolkit";
import counterReducer from "./slices/counterSlice";
import todoReducer from "./slices/todoSlice";

export const store = configureStore({
  reducer: {
    counter: counterReducer,
    todos: todoReducer,
  },
});

export type RootState = ReturnType<typeof store.getState>;
// RootState = {
//   counter: CounterState,
//   todos: TodoState
// }

export type AppDispatch = typeof store.dispatch;

// src/store/slices/userSlice.ts
import { createSlice, createAsyncThunk, PayloadAction } from "@reduxjs/toolkit";
import axios from "axios";

interface User {
  id: number;
  name: string;
  email: string;
  phone: string;
}

interface UserState {
  data: User | null;
  isLoading: boolean;
  error: string | null;
}

const initialState: UserState = {
  data: null,
  isLoading: false,
  error: null,
};

// Async thunk — автоматично генерує pending/fulfilled/rejected actions
export const fetchUser = createAsyncThunk<User, number>(
  "user/fetch", // Префікс для actions: user/fetch/pending, user/fetch/fulfilled, ...
  async (userId, { rejectWithValue }) => {
    try {
      const { data } = await axios.get<User>(
        `https://jsonplaceholder.typicode.com/users/${userId}`
      );
      return data; // Стає payload у fulfilled action
    } catch (error) {
      if (axios.isAxiosError(error)) {
        return rejectWithValue(error.response?.data?.message ?? error.message);
      }
      return rejectWithValue("Невідома помилка");
    }
  }
);

const userSlice = createSlice({
  name: "user",
  initialState,

  reducers: {
    clearUser(state) {
      state.data = null;
      state.error = null;
    },
  },

  // extraReducers обробляє actions поза slice (async thunks)
  extraReducers: (builder) => {
    builder
      .addCase(fetchUser.pending, (state) => {
        state.isLoading = true;
        state.error = null;
      })
      .addCase(fetchUser.fulfilled, (state, action: PayloadAction<User>) => {
        state.isLoading = false;
        state.data = action.payload;
      })
      .addCase(fetchUser.rejected, (state, action) => {
        state.isLoading = false;
        state.error = action.payload as string;
      });
  },
});

export const { clearUser } = userSlice.actions;
export default userSlice.reducer;

// src/components/UserProfile.tsx
import { useEffect } from "react";
import { useAppDispatch, useAppSelector } from "../store/hooks";
import { fetchUser, clearUser } from "../store/slices/userSlice";

interface UserProfileProps {
  userId: number;
}

function UserProfile({ userId }: UserProfileProps) {
  const dispatch = useAppDispatch();
  const { data: user, isLoading, error } = useAppSelector((state) => state.user);

  useEffect(() => {
    dispatch(fetchUser(userId)); // Повертає Promise, можна чекати завершення

    return () => {
      dispatch(clearUser()); // Cleanup при розмонтуванні
    };
  }, [userId, dispatch]);

  if (isLoading) return <p>Завантаження профілю...</p>;
  if (error) return <p className="error">Помилка: {error}</p>;
  if (!user) return <p>Користувача не знайдено</p>;

  return (
    <div className="user-profile">
      <h2>{user.name}</h2>
      <p>Email: {user.email}</p>
      <p>Телефон: {user.phone}</p>
    </div>
  );
}

export default UserProfile;

// src/store/slices/notificationSlice.ts
import { createSlice } from "@reduxjs/toolkit";
import { fetchUser } from "./userSlice"; // Імпортуємо thunk з іншого slice

interface NotificationState {
  message: string | null;
}

const initialState: NotificationState = {
  message: null,
};

const notificationSlice = createSlice({
  name: "notification",
  initialState,

  reducers: {
    showNotification(state, action) {
      state.message = action.payload;
    },
    clearNotification(state) {
      state.message = null;
    },
  },

  extraReducers: (builder) => {
    // Реагуємо на успішне завантаження користувача з userSlice
    builder.addCase(fetchUser.fulfilled, (state, action) => {
      state.message = `Вітаємо, ${action.payload.name}!`;
    });

    // Реагуємо на помилку
    builder.addCase(fetchUser.rejected, (state) => {
      state.message = "Не вдалося завантажити профіль";
    });
  },
});

export const { showNotification, clearNotification } = notificationSlice.actions;
export default notificationSlice.reducer;

// Те, що ви пишете у reducer
increment(state) {
  state.value += 1;
  state.history.push(state.value);
}

// Те, що Immer генерує під капотом (спрощена версія)
increment(state) {
  return {
    ...state,
    value: state.value + 1,
    history: [...state.history, state.value + 1],
  };
}

// src/store/slices/todoSlice.ts
import { createSlice, createSelector } from "@reduxjs/toolkit";
import type { RootState } from "../index";

// ... (код slice)

// Базові селектори — просто витягують дані зі стану
const selectTodos = (state: RootState) => state.todos.todos;
const selectFilter = (state: RootState) => state.todos.filter;

// Мемоїзований селектор — перераховує лише при зміні залежностей
export const selectVisibleTodos = createSelector(
  [selectTodos, selectFilter],
  (todos, filter) => {
    console.log("🔄 Перерахунок видимих задач"); // Логується лише при зміні todos/filter

    switch (filter) {
      case "active":
        return todos.filter((t) => !t.completed);
      case "completed":
        return todos.filter((t) => t.completed);
      default:
        return todos;
    }
  }
);

export const selectTodoStats = createSelector([selectTodos], (todos) => {
  const total = todos.length;
  const completed = todos.filter((t) => t.completed).length;
  const active = total - completed;

  return { total, completed, active };
});

function TodoList() {
  const visibleTodos = useAppSelector(selectVisibleTodos);
  const stats = useAppSelector(selectTodoStats);

  return (
    <div>
      <p>Всього: {stats.total} | Активних: {stats.active} | Виконаних: {stats.completed}</p>
      <ul>
        {visibleTodos.map((todo) => (
          <li key={todo.id}>{todo.text}</li>
        ))}
      </ul>
    </div>
  );
}

// src/store/middleware/logger.ts
import { Middleware } from "@reduxjs/toolkit";

export const loggerMiddleware: Middleware = (storeAPI) => (next) => (action) => {
  console.log("⚡ Action:", action.type);
  console.log("📦 Поточний стан:", storeAPI.getState());

  const result = next(action); // Передаємо action далі

  console.log("✅ Новий стан:", storeAPI.getState());
  return result;
};

// src/store/index.ts
import { configureStore } from "@reduxjs/toolkit";
import counterReducer from "./slices/counterSlice";
import { loggerMiddleware } from "./middleware/logger";

export const store = configureStore({
  reducer: {
    counter: counterReducer,
  },
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware().concat(loggerMiddleware),
});

// src/store/slices/booksSlice.ts
import { createSlice, createAsyncThunk, PayloadAction } from "@reduxjs/toolkit";
import axios from "axios";

interface Book {
  id: number;
  title: string;
  author: string;
  year: number;
  genre: string;
  price: number;
}

interface BooksState {
  items: Book[];
  isLoading: boolean;
  error: string | null;
  filter: string;
}

const initialState: BooksState = {
  items: [],
  isLoading: false,
  error: null,
  filter: "all",
};

// Async thunks для API-взаємодії
export const fetchBooks = createAsyncThunk<Book[]>(
  "books/fetchAll",
  async () => {
    const { data } = await axios.get<Book[]>("http://localhost:3001/books");
    return data;
  }
);

export const addBook = createAsyncThunk<Book, Omit<Book, "id">>(
  "books/add",
  async (bookData) => {
    const { data } = await axios.post<Book>("http://localhost:3001/books", bookData);
    return data;
  }
);

export const deleteBook = createAsyncThunk<number, number>(
  "books/delete",
  async (id) => {
    await axios.delete(`http://localhost:3001/books/${id}`);
    return id; // Повертаємо ID для видалення з масиву
  }
);

const booksSlice = createSlice({
  name: "books",
  initialState,

  reducers: {
    setFilter(state, action: PayloadAction<string>) {
      state.filter = action.payload;
    },
  },

  extraReducers: (builder) => {
    // Fetch books
    builder
      .addCase(fetchBooks.pending, (state) => {
        state.isLoading = true;
        state.error = null;
      })
      .addCase(fetchBooks.fulfilled, (state, action) => {
        state.isLoading = false;
        state.items = action.payload;
      })
      .addCase(fetchBooks.rejected, (state, action) => {
        state.isLoading = false;
        state.error = action.error.message ?? "Помилка завантаження";
      });

    // Add book
    builder
      .addCase(addBook.fulfilled, (state, action) => {
        state.items.push(action.payload);
      })
      .addCase(addBook.rejected, (state, action) => {
        state.error = action.error.message ?? "Помилка додавання";
      });

    // Delete book
    builder
      .addCase(deleteBook.fulfilled, (state, action) => {
        state.items = state.items.filter((book) => book.id !== action.payload);
      })
      .addCase(deleteBook.rejected, (state, action) => {
        state.error = action.error.message ?? "Помилка видалення";
      });
  },
});

export const { setFilter } = booksSlice.actions;
export default booksSlice.reducer;

// src/store/slices/statsSlice.ts — селектори для статистики
import { createSelector } from "@reduxjs/toolkit";
import type { RootState } from "../index";

const selectBooks = (state: RootState) => state.books.items;

export const selectBookStats = createSelector([selectBooks], (books) => {
  if (books.length === 0) {
    return { total: 0, avgPrice: 0, genres: [] };
  }

  const total = books.length;
  const avgPrice = books.reduce((sum, b) => sum + b.price, 0) / total;
  const genres = [...new Set(books.map((b) => b.genre))];

  return { total, avgPrice: Math.round(avgPrice), genres };
});

export const selectFilteredBooks = createSelector(
  [selectBooks, (state: RootState) => state.books.filter],
  (books, filter) => {
    if (filter === "all") return books;
    return books.filter((b) => b.genre === filter);
  }
);

// src/components/BookList.tsx
import { useEffect } from "react";
import { useAppDispatch, useAppSelector } from "../store/hooks";
import { fetchBooks, deleteBook, setFilter } from "../store/slices/booksSlice";
import { selectFilteredBooks, selectBookStats } from "../store/slices/statsSlice";

function BookList() {
  const dispatch = useAppDispatch();
  const books = useAppSelector(selectFilteredBooks);
  const stats = useAppSelector(selectBookStats);
  const { isLoading, error, filter } = useAppSelector((state) => state.books);

  useEffect(() => {
    dispatch(fetchBooks());
  }, [dispatch]);

  if (isLoading) return <p>Завантаження...</p>;
  if (error) return <p className="error">Помилка: {error}</p>;

  return (
    <div className="bookstore">
      <header>
        <h1>Книгарня</h1>
        <div className="stats">
          <p>📚 Всього книг: {stats.total}</p>
          <p>💰 Середня ціна: {stats.avgPrice} ₴</p>
        </div>
      </header>

      <div className="filters">
        <button onClick={() => dispatch(setFilter("all"))}>Всі</button>
        {stats.genres.map((genre) => (
          <button key={genre} onClick={() => dispatch(setFilter(genre))}>
            {genre}
          </button>
        ))}
      </div>

      <ul className="books-list">
        {books.map((book) => (
          <li key={book.id}>
            <h3>{book.title}</h3>
            <p>Автор: {book.author}</p>
            <p>Жанр: {book.genre}</p>
            <p>Ціна: {book.price} ₴</p>
            <button onClick={() => dispatch(deleteBook(book.id))}>Видалити</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default BookList;