src/
├── store/
│   ├── index.ts           # Налаштування Store
│   ├── hooks.ts           # Типізовані хуки
│   ├── slices/            # Модулі стану (Slices)
│   │   ├── tripsSlice.ts
│   │   └── settingsSlice.ts
│   └── thunks/            # Асинхронні дії
│       └── tripsThunks.ts

// src/store/index.ts
import { configureStore } from '@reduxjs/toolkit'

// Поки що створюємо порожній Store
export const store = configureStore({
    reducer: {
        // Тут будуть підключатися наші slices
    },
})

// Експортуємо типи для TypeScript
export type RootState = ReturnType<typeof store.getState>
export type AppDispatch = typeof store.dispatch

┌──────────────────────────────────────────────────────────────────────────────────────────┐
│                                 REDUX TOOLKIT (RTK)                                      │
├──────────────────────────┬───────────────────────────────┬───────────────────────────────┤
│    configureStore()      │        createSlice()          │      createAsyncThunk()       │
│  Автоматичний thunk,     │  Об'єднує Actions + Reducers  │  Стандартизує async lifecycle │
│  DevTools та middleware  │   з підтримкою Immer Proxy    │   (pending/fulfilled/rejected)│
├──────────────────────────┼───────────────────────────────┼───────────────────────────────┤
│  createEntityAdapter()   │       createSelector()        │   createListenerMiddleware()  │
│   Нормалізація O(1)      │      Reselect мемоїзація      │    Легковагі сайд-ефекти      │
│  (byId + allIds CRUD)    │    для важких списків RN      │    замість важкої Saga        │
└──────────────────────────┴───────────────────────────────┴───────────────────────────────┘

// Приклад стану у Store
{
    trips: {
        items: [
            { id: '1', title: 'Карпати', region: 'Захід' },
            { id: '2', title: 'Одеса', region: 'Південь' }
        ],
        loading: false,
        error: null
    },
    user: {
        profile: { name: 'Олександр', email: 'alex@example.com' },
        isAuthenticated: true
    },
    settings: {
        theme: 'dark',
        language: 'uk'
    }
}

// Приклад простої дії
{
    type: 'trips/addTrip',           // Тип дії (обов'язковий)
    payload: {                        // Дані дії (опціонально)
        id: '3',
        title: 'Київ',
        region: 'Центр'
    }
}

// Простий приклад редюсера (без Redux Toolkit)
function tripsReducer(state = initialState, action) {
    // Перевіряємо тип дії
    if (action.type === 'trips/addTrip') {
        // Повертаємо НОВИЙ стан (не мутуємо старий!)
        return {
            ...state,
            items: [action.payload, ...state.items],
        }
    }

    // Якщо дія не для нас — повертаємо стан без змін
    return state
}

// src/store/slices/tripsSlice.ts
import { createSlice, PayloadAction } from '@reduxjs/toolkit'

interface Trip {
    id: string
    title: string
    region: string
}

interface TripsState {
    items: Trip[]
    loading: boolean
    error: string | null
}

const initialState: TripsState = {
    items: [],
    loading: false,
    error: null,
}

// ВСЕ В ОДНОМУ МІСЦІ!
export const tripsSlice = createSlice({
    name: 'trips',
    initialState,
    reducers: {
        // Додавання поїздки
        addTrip(state, action: PayloadAction<Trip>) {
            // Можемо мутувати state напряму! (Immer під капотом)
            state.items.push(action.payload)
        },
        // Видалення поїздки
        removeTrip(state, action: PayloadAction<string>) {
            state.items = state.items.filter((t) => t.id !== action.payload)
        },
        // Початок завантаження
        setLoading(state, action: PayloadAction<boolean>) {
            state.loading = action.payload
        },
    },
})

// Експортуємо action creators (згенеровані автоматично!)
export const { addTrip, removeTrip, setLoading } = tripsSlice.actions

// Експортуємо reducer
export default tripsSlice.reducer

interface FluxStandardAction<Payload = any, Meta = any> {
    type: string // Обов'язковий унікальний ідентифікатор події
    payload?: Payload // Дані дії (корисне навантаження)
    error?: boolean // Прапорець, що вказує на наявність помилки в payload
    meta?: Meta // Додаткові метадані (наприклад, analyticsId, timestamp)
}

import { createAction, nanoid } from '@reduxjs/toolkit'

// Базовий Action Creator:
export const resetAllFilters = createAction('filters/reset')
// Виклик resetAllFilters() повертає { type: 'filters/reset' }

// Action Creator з функцією підготовки (Prepare Callback):
export const addCustomTrip = createAction('trips/addCustom', (title: string, region: string) => {
    return {
        payload: {
            id: nanoid(), // Генерація унікального ID
            title,
            region,
            createdAt: new Date().toISOString(), // Серіалізована дата!
        },
        meta: {
            analyticsEvent: 'TRIP_CREATED_MANUALLY',
        },
    }
})

// Використання:
const action = addCustomTrip('Карпати', 'Захід')
console.log(action)
// {
//   type: 'trips/addCustom',
//   payload: { id: 'V1StGXR8_Z5jdHi6B-myT', title: 'Карпати', region: 'Захід', createdAt: '...' },
//   meta: { analyticsEvent: 'TRIP_CREATED_MANUALLY' }
// }

const action: unknown = { type: 'filters/reset' }

if (resetAllFilters.match(action)) {
    // TypeScript автоматично звужує тип action до PayloadAction
    console.log('Це дійсно дія скидання фільтрів!')
}

// СТАРИЙ ПІДХІД (Legacy Redux): Складно читати, легко зробити помилку!
function legacyReducer(state = initialState, action) {
    switch (action.type) {
        case 'trips/updatePlaceRating':
            return {
                ...state,
                trips: state.trips.map((trip) => {
                    if (trip.id !== action.payload.tripId) return trip
                    return {
                        ...trip,
                        places: trip.places.map((place) => {
                            if (place.id !== action.payload.placeId) return place
                            return {
                                ...place,
                                rating: action.payload.rating,
                            }
                        }),
                    }
                }),
            }
        default:
            return state
    }
}

// СУЧАСНИЙ ПІДХІД (Redux Toolkit + Immer):
updatePlaceRating(state, action: PayloadAction<{ tripId: string; placeId: string; rating: number }>) {
  const trip = state.trips.find(t => t.id === action.payload.tripId);
  const place = trip?.places.find(p => p.id === action.payload.placeId);
  if (place) {
    place.rating = action.payload.rating; // Пряма мутація draft-об'єкта!
  }
}

import { createSlice, PayloadAction } from '@reduxjs/toolkit'

interface Trip {
    id: string
    title: string
    region: string
    likes: number
}

interface TripsState {
    items: Trip[]
    loading: boolean
    error: string | null
    selectedTripId: string | null
}

const initialState: TripsState = {
    items: [],
    loading: false,
    error: null,
    selectedTripId: null,
}

export const tripsSlice = createSlice({
    // 1️⃣ name — Назва slice (використовується у типах дій)
    name: 'trips',

    // 2️⃣ initialState — Початковий стан slice
    initialState,

    // 3️⃣ reducers — Внутрішні дії та їх обробники
    reducers: {
        // Простий редюсер без payload
        clearTrips(state) {
            state.items = []
        },

        // Редюсер з payload (типізований через PayloadAction)
        addTrip(state, action: PayloadAction<Trip>) {
            state.items.unshift(action.payload)
        },

        // Редюсер з підготовкою (prepare callback)
        addTripWithAutoId: {
            reducer(state, action: PayloadAction<Trip>) {
                state.items.unshift(action.payload)
            },
            prepare(title: string, region: string) {
                return {
                    payload: {
                        id: nanoid(), // Генерація ID
                        title,
                        region,
                        likes: 0,
                    },
                }
            },
        },

        // Оновлення вкладеного поля
        updateTripLikes(state, action: PayloadAction<{ id: string; likes: number }>) {
            const trip = state.items.find((t) => t.id === action.payload.id)
            if (trip) {
                trip.likes = action.payload.likes // Immer дозволяє мутацію!
            }
        },

        // Видалення за ID
        removeTrip(state, action: PayloadAction<string>) {
            state.items = state.items.filter((t) => t.id !== action.payload)
        },
    },

    // 4️⃣ extraReducers — Обробка зовнішніх дій
    extraReducers: (builder) => {
        // Обробка асинхронних thunk-ів
        builder
            .addCase(fetchTripsThunk.pending, (state) => {
                state.loading = true
            })
            .addCase(fetchTripsThunk.fulfilled, (state, action) => {
                state.items = action.payload
                state.loading = false
            })
    },
})

// 5️⃣ Експорт згенерованих action creators
export const { clearTrips, addTrip, addTripWithAutoId, updateTripLikes, removeTrip } = tripsSlice.actions

// 6️⃣ Експорт reducer для підключення до store
export default tripsSlice.reducer

createSlice({
    name: 'trips',
    reducers: {
        addTrip: ...,
        removeTrip: ...
    }
})

// Згенеровані типи дій:
// - trips/addTrip
// - trips/removeTrip

// Простий стан
const initialState = {
    items: [],
    loading: false,
}

// Складний стан з TypeScript інтерфейсом
interface TripsState {
    items: Trip[]
    loading: boolean
    error: string | null
    filters: {
        region: string
        search: string
    }
    pagination: {
        page: number
        pageSize: number
        total: number
    }
}

const initialState: TripsState = {
    items: [],
    loading: false,
    error: null,
    filters: {
        region: 'all',
        search: '',
    },
    pagination: {
        page: 1,
        pageSize: 20,
        total: 0,
    },
}

reducers: {
    // 1. Редюсер без аргументів
    clearTrips(state) {
        state.items = []
    }
}

// Використання:
dispatch(clearTrips())  // Викликаємо БЕЗ аргументів

// Згенерована дія:
// { type: 'trips/clearTrips' }

reducers: {
    // 2. Редюсер з одним аргументом
    addTrip(state, action: PayloadAction<Trip>) {
        state.items.push(action.payload)
    }
}

// Використання:
dispatch(addTrip({ id: '1', title: 'Київ' }))

// Згенерована дія:
// {
//   type: 'trips/addTrip',
//   payload: { id: '1', title: 'Київ' }
// }

reducers: {
    // 3. Редюсер з prepare callback (багато аргументів)
    addTripWithMetadata: {
        reducer(state, action: PayloadAction<Trip>) {
            state.items.push(action.payload)
        },
        prepare(title: string, region: string, userId: string) {
            return {
                payload: {
                    id: nanoid(),
                    title,
                    region,
                    createdAt: new Date().toISOString(),
                    createdBy: userId
                }
            }
        }
    }
}

// Використання:
dispatch(addTripWithMetadata('Карпати', 'Захід', 'user-123'))

// Згенерована дія:
// {
//   type: 'trips/addTripWithMetadata',
//   payload: {
//     id: 'V1StGXR8_Z5jd...',
//     title: 'Карпати',
//     region: 'Захід',
//     createdAt: '2026-08-29T10:30:00.000Z',
//     createdBy: 'user-123'
//   }
// }

reducers: {
    // Додавання елемента на початок
    addTripToStart(state, action: PayloadAction<Trip>) {
        state.items.unshift(action.payload)  // Immer дозволяє!
    },

    // Оновлення за ID
    updateTrip(state, action: PayloadAction<{ id: string; changes: Partial<Trip> }>) {
        const { id, changes } = action.payload
        const trip = state.items.find(t => t.id === id)
        if (trip) {
            Object.assign(trip, changes)  // Immer дозволяє!
        }
    },

    // Видалення за умовою
    removeCompletedTrips(state) {
        state.items = state.items.filter(t => !t.isCompleted)
    },

    // Оновлення вкладеного об'єкта
    updateFilter(state, action: PayloadAction<{ key: keyof Filters; value: string }>) {
        const { key, value } = action.payload
        state.filters[key] = value
    },

    // Скидання до початкового стану
    resetTrips(state) {
        return initialState  // Повертаємо новий об'єкт
    }
}

import { createSlice, PayloadAction, nanoid } from '@reduxjs/toolkit'

interface TripItem {
    id: string
    title: string
    createdAt: string
}

interface TripsState {
    list: TripItem[]
}

const initialState: TripsState = { list: [] }

export const tripsSlice = createSlice({
    name: 'trips',
    initialState,
    reducers: {
        // Простий редюсер
        clearAllTrips(state) {
            state.list = []
        },

        // Редюсер з функцією попередньої підготовки (prepare)
        addTripWithAutoId: {
            reducer(state, action: PayloadAction<TripItem>) {
                state.list.unshift(action.payload)
            },
            prepare(title: string) {
                return {
                    payload: {
                        id: nanoid(),
                        title,
                        createdAt: new Date().toISOString(),
                    },
                }
            },
        },
    },
})

export const { clearAllTrips, addTripWithAutoId } = tripsSlice.actions
export default tripsSlice.reducer

import { createSlice, PayloadAction } from '@reduxjs/toolkit'
import { fetchTripsThunk, createTripThunk } from '../thunks/tripsThunks'
import { logout } from './userSlice' // Дія з іншого slice!

export const tripsSlice = createSlice({
    name: 'trips',
    initialState,
    reducers: {
        // Власні дії slice
        clearTrips(state) {
            state.items = []
        },
    },
    extraReducers: (builder) => {
        // Builder має 3 методи:
        // - addCase: обробка конкретної дії
        // - addMatcher: обробка групи дій за умовою
        // - addDefaultCase: обробка всіх неопрацьованих дій

        builder
            // 1. ОБРОБКА КОНКРЕТНОЇ ДІЇ (addCase)
            .addCase(fetchTripsThunk.pending, (state) => {
                state.loading = true
                state.error = null
            })
            .addCase(fetchTripsThunk.fulfilled, (state, action: PayloadAction<Trip[]>) => {
                state.loading = false
                state.items = action.payload // Дані прийшли з сервера
            })
            .addCase(fetchTripsThunk.rejected, (state, action) => {
                state.loading = false
                state.error = action.payload ?? 'Помилка завантаження'
            })

            // 2. РЕАГУВАННЯ НА ДІЇ З ІНШОГО SLICE
            .addCase(logout, (state) => {
                // Коли користувач виходить — очищаємо поїздки
                state.items = []
                state.loading = false
                state.error = null
            })
    },
})

import { createSlice, isAnyOf, isPending, isFulfilled, isRejected } from '@reduxjs/toolkit'
import { resetAllFilters } from './filtersActions'
import { fetchTripsThunk, createTripThunk, deleteTripThunk, updateTripThunk } from './tripsThunks'

export const tripsSlice = createSlice({
    name: 'trips',
    initialState,
    reducers: {},
    extraReducers: (builder) => {
        builder
            // 1. ТОЧНА ОБРОБКА конкретних успішних дій
            .addCase(fetchTripsThunk.fulfilled, (state, action) => {
                state.items = action.payload
            })
            .addCase(createTripThunk.fulfilled, (state, action) => {
                state.items.unshift(action.payload) // Додаємо на початок
            })
            .addCase(deleteTripThunk.fulfilled, (state, action) => {
                state.items = state.items.filter((t) => t.id !== action.payload)
            })

            // 2. РЕАГУВАННЯ НА ДІЮ З ІНШОГО SLICE
            .addCase(resetAllFilters, (state) => {
                state.items = []
            })

            // 3. МАТЧЕР: Об'єднання ВСІХ станів завантаження (pending)
            // Замість копіювання коду для кожного thunk окремо!
            .addMatcher(
                isAnyOf(
                    fetchTripsThunk.pending,
                    createTripThunk.pending,
                    deleteTripThunk.pending,
                    updateTripThunk.pending,
                ),
                (state) => {
                    state.loading = true
                    state.error = null
                },
            )

            // 4. МАТЧЕР: Загальне завершення операцій (fulfilled)
            .addMatcher(
                isAnyOf(
                    fetchTripsThunk.fulfilled,
                    createTripThunk.fulfilled,
                    deleteTripThunk.fulfilled,
                    updateTripThunk.fulfilled,
                ),
                (state) => {
                    state.loading = false
                },
            )

            // 5. МАТЧЕР: Універсальне перехоплення ВСІХ помилок (rejected)
            .addMatcher(
                isAnyOf(
                    fetchTripsThunk.rejected,
                    createTripThunk.rejected,
                    deleteTripThunk.rejected,
                    updateTripThunk.rejected,
                ),
                (state, action) => {
                    state.loading = false
                    state.error = (action.payload as string) ?? action.error.message ?? 'Невідома помилка'
                },
            )
    },
})

import {
    isAnyOf, // Хоча б одна умова істинна (OR)
    isAllOf, // Всі умови істинні (AND)
    isPending, // Дія має тип *.pending
    isFulfilled, // Дія має тип *.fulfilled
    isRejected, // Дія має тип *.rejected
    isAsyncThunkAction, // Будь-яка дія від createAsyncThunk
} from '@reduxjs/toolkit'

// Приклад: Універсальний індикатор завантаження для ВСІХ thunk-ів
builder.addMatcher(
    isAsyncThunkAction, // Будь-яка асинхронна дія
    (state, action) => {
        if (isPending(action)) {
            state.globalLoading = true
        }
        if (isFulfilled(action) || isRejected(action)) {
            state.globalLoading = false
        }
    },
)

// Приклад: Логування помилок тільки для конкретних thunk-ів
builder.addMatcher(
    isAllOf(isRejected, (action) => action.type.startsWith('trips/')),
    (state, action) => {
        console.error('[TRIPS ERROR]', action.error)
    },
)

// src/store/slices/userSlice.ts
export const userSlice = createSlice({
    name: 'user',
    initialState,
    reducers: {
        logout(state) {
            state.profile = null
            state.isAuthenticated = false
        },
    },
})

export const { logout } = userSlice.actions

// src/store/slices/tripsSlice.ts
import { logout } from './userSlice'

export const tripsSlice = createSlice({
    name: 'trips',
    initialState,
    reducers: {},
    extraReducers: (builder) => {
        builder.addCase(logout, (state) => {
            // Реагуємо на logout з userSlice
            state.items = []
            state.error = null
        })
    },
})

// src/store/slices/favoritesSlice.ts
import { logout } from './userSlice'

export const favoritesSlice = createSlice({
    name: 'favorites',
    initialState,
    reducers: {},
    extraReducers: (builder) => {
        builder.addCase(logout, (state) => {
            // Також очищаємо улюблені поїздки
            state.favoriteIds = []
        })
    },
})

// src/components/TripCard.tsx
import React from 'react'
import { Pressable, Text } from 'react-native'
import { useAppDispatch, useAppSelector } from '@/store/hooks'
import { toggleLikeThunk } from '@/store/thunks/likesThunks'

export function TripCard({ tripId }: { tripId: string }) {
    const dispatch = useAppDispatch()

    // Отримуємо стан лайка зі store
    const isLiked = useAppSelector((state) => state.likes.byTripId[tripId] ?? false)
    const isLoading = useAppSelector((state) => state.likes.loading)

    const handleLike = () => {
        // 1️⃣ Користувач натискає — відправляємо дію
        dispatch(toggleLikeThunk({ tripId }))
    }

    return (
        <Pressable onPress={handleLike} disabled={isLoading}>
            <Text>{isLiked ? '❤️' : '🤍'}</Text>
        </Pressable>
    )
}

// Коли ви викликаєте dispatch(toggleLikeThunk({ tripId: '123' }))
// відбувається наступне:

// 1. Redux відправляє PENDING дію:
{
    type: 'likes/toggleLike/pending',
    meta: {
        requestId: 'xR3k...',
        arg: { tripId: '123' }
    }
}

// src/store/thunks/likesThunks.ts
import { createAsyncThunk } from '@reduxjs/toolkit'
import { apiClient } from '@/api/client'
import type { RootState } from '../index'

export const toggleLikeThunk = createAsyncThunk<
    { tripId: string; isLiked: boolean }, // Успішний результат
    { tripId: string }, // Вхідний аргумент
    {
        state: RootState
        rejectValue: { tripId: string; previousState: boolean }
    }
>('likes/toggleLike', async ({ tripId }, { getState, rejectWithValue }) => {
    // 2️⃣ Зберігаємо поточний стан для можливого rollback
    const previousState = getState().likes.byTripId[tripId] ?? false

    try {
        // 3️⃣ Відправляємо запит на сервер
        const response = await apiClient.post(`/trips/${tripId}/like`, {
            liked: !previousState,
        })

        // 4️⃣ Успіх — повертаємо нові дані
        return {
            tripId,
            isLiked: response.data.liked,
        }
    } catch (error) {
        // 5️⃣ Помилка — повертаємо дані для rollback
        return rejectWithValue({
            tripId,
            previousState,
        })
    }
})

// src/store/slices/likesSlice.ts
import { createSlice, PayloadAction } from '@reduxjs/toolkit'
import { toggleLikeThunk } from '../thunks/likesThunks'

interface LikesState {
    byTripId: Record<string, boolean> // { '123': true, '456': false }
    loading: boolean
    error: string | null
}

const initialState: LikesState = {
    byTripId: {},
    loading: false,
    error: null,
}

export const likesSlice = createSlice({
    name: 'likes',
    initialState,
    reducers: {
        // Внутрішні дії (якщо потрібні)
    },
    extraReducers: (builder) => {
        builder
            // 1️⃣ PENDING: Оптимістичне оновлення UI
            .addCase(toggleLikeThunk.pending, (state, action) => {
                const { tripId } = action.meta.arg
                const currentState = state.byTripId[tripId] ?? false

                // Миттєво змінюємо UI (не чекаємо сервер!)
                state.byTripId[tripId] = !currentState
                state.loading = true
                state.error = null

                console.log('🟡 PENDING: UI оновлено миттєво')
            })

            // 2️⃣ FULFILLED: Фіксуємо результат від сервера
            .addCase(toggleLikeThunk.fulfilled, (state, action) => {
                const { tripId, isLiked } = action.payload

                // Встановлюємо точний стан від сервера
                state.byTripId[tripId] = isLiked
                state.loading = false

                console.log('🟢 FULFILLED: Сервер підтвердив:', isLiked)
            })

            // 3️⃣ REJECTED: Відкат до попереднього стану
            .addCase(toggleLikeThunk.rejected, (state, action) => {
                if (action.payload) {
                    const { tripId, previousState } = action.payload

                    // ROLLBACK: повертаємо попереднє значення
                    state.byTripId[tripId] = previousState
                    state.loading = false
                    state.error = 'Не вдалося оновити лайк'

                    console.log('🔴 REJECTED: Повернуто до:', previousState)
                }
            })
    },
})

export default likesSlice.reducer

// React автоматично виявляє зміни в store через useAppSelector
export function TripCard({ tripId }: { tripId: string }) {
    // 6️⃣ Цей селектор підписаний на зміни в state.likes.byTripId
    const isLiked = useAppSelector((state) => state.likes.byTripId[tripId] ?? false)

    // 7️⃣ Коли state.likes.byTripId[tripId] змінюється:
    //    - React виявляє зміну (нове посилання)
    //    - Компонент ререндериться
    //    - UI оновлюється (❤️ або 🤍)

    return <Text>{isLiked ? '❤️ Лайкнуто' : '🤍 Лайкнути'}</Text>
}

// src/store/middleware/analyticsLogger.ts
import { Middleware } from '@reduxjs/toolkit'
import type { RootState } from '../index'

/**
 * Логує кожну дію та час її виконання у консоль під час розробки
 */
export const analyticsLoggerMiddleware: Middleware<{}, RootState> = (storeApi) => (next) => (action: any) => {
    if (__DEV__) {
        const startTime = Date.now()
        console.log(`%c[ACTION] ${action.type}`, 'color: #2563eb; font-weight: bold;', action.payload)

        const result = next(action)

        const duration = Date.now() - startTime
        console.log(`%c[STATE AFTER] (${duration}ms)`, 'color: #059669;', storeApi.getState())

        return result
    }

    return next(action)
}

// src/store/index.ts
import { configureStore, combineReducers } from '@reduxjs/toolkit'
import tripsReducer from './slices/tripsSlice'
import settingsReducer from './slices/settingsSlice'
import { analyticsLoggerMiddleware } from './middleware/analyticsLogger'

const rootReducer = combineReducers({
    trips: tripsReducer,
    settings: settingsReducer,
})

export const store = configureStore({
    reducer: rootReducer,
    middleware: (getDefaultMiddleware) =>
        getDefaultMiddleware({
            // Налаштування стандартних перевірок RTK
            thunk: true,
            immutableCheck: { warnAfter: 128 },
            serializableCheck: {
                ignoredActions: ['persist/PERSIST'],
            },
        }).concat(analyticsLoggerMiddleware),
    devTools: process.env.NODE_ENV !== 'production',
})

// Експорт глобальних типів
export type RootState = ReturnType<typeof store.getState>
export type AppDispatch = typeof store.dispatch

// src/store/listenerMiddleware.ts
import { createListenerMiddleware, isAnyOf } from '@reduxjs/toolkit'
import type { RootState, AppDispatch } from './index'
import { setTheme, setLocale } from './slices/settingsSlice'
import { addTrip } from './slices/tripsSlice'

export const listenerMiddleware = createListenerMiddleware()

export const startAppListening = listenerMiddleware.startListening.withTypes<RootState, AppDispatch>()

// 1. Слухач для збереження налаштувань у сховище при будь-якій зміні теми чи мови
startAppListening({
    matcher: isAnyOf(setTheme, setLocale),
    effect: async (action, listenerApi) => {
        const state = listenerApi.getState()
        console.log('[PERSIST SYNC] Збереження налаштувань на диск:', state.settings)
        // Тут виконується асинхронний запис у MMKV / AsyncStorage
    },
})

// 2. Слухач з можливістю Debounce (затримки та скасування попередньої спроби)
startAppListening({
    actionCreator: addTrip,
    effect: async (action, listenerApi) => {
        // Скасовуємо попередні незавершені ефекти цього слухача
        listenerApi.cancelActiveListeners()

        // Очікуємо 500мс (Debounce)
        await listenerApi.delay(500)

        // Відправляємо аналітичну подію
        console.log('[ANALYTICS] Подія: Поїздку успішно створено', action.payload.title)
    },
})

export const store = configureStore({
    reducer: rootReducer,
    middleware: (getDefaultMiddleware) => getDefaultMiddleware().prepend(listenerMiddleware.middleware),
})

// ❌ АНТИПАТЕРН: Постійне створення нового масиву в пам'яті!
const selectFilteredTrips = (state: RootState) => {
    return state.trips.list.filter((t) => t.isFavorite) // filter() повертає [] з новим посиланням!
}

function FavoriteTripsList() {
    // Цей компонент буде ререндеритися при БУДЬ-ЯКІЙ зміні стану в store (навіть при зміні теми!),
    // оскільки посилання на результат selectFilteredTrips ЗАВЖДИ нове!
    const favorites = useAppSelector(selectFilteredTrips)
    // ...
}

import { createSelector } from '@reduxjs/toolkit'
import type { RootState } from '../index'

// 1. Вхідні базові селектори
const selectTripsList = (state: RootState) => state.trips.list
const selectSearchQuery = (state: RootState) => state.filters.searchQuery
const selectSelectedRegion = (state: RootState) => state.filters.region

// 2. Складений мемоїзований селектор
export const selectFilteredTrips = createSelector(
    [selectTripsList, selectSearchQuery, selectSelectedRegion],
    (trips, query, region) => {
        console.log('Виконання важкої фільтрації списку...')
        return trips.filter((trip) => {
            const matchesQuery = trip.title.toLowerCase().includes(query.toLowerCase())
            const matchesRegion = region === 'all' || trip.region === region
            return matchesQuery && matchesRegion
        })
    },
)

// ❌ НЕПРАВИЛЬНО ДЛЯ БАГАТЬОХ ЕКЗЕМПЛЯРІВ:
export const selectTripById = (tripId: string) =>
    createSelector([selectTripsList], (trips) => trips.find((t) => t.id === tripId))

// Якщо ComponentA викликає selectTripById('1') і ComponentB викликає selectTripById('2'),
// кеш розміром 1 буде перезаписуватися при кожному виклику!

// ✅ ПРАВИЛЬНО: Створення персонального екземпляра селектора для кожного компонента
export const makeSelectTripById = () =>
    createSelector([selectTripsList, (_state: RootState, tripId: string) => tripId], (trips, tripId) =>
        trips.find((t) => t.id === tripId),
    )

// Використання в компоненті картки:
function TripCard({ tripId }: { tripId: string }) {
    // Створюємо персональний мемоїзований селектор один раз при монтуванні
    const selectTrip = useMemo(makeSelectTripById, [])
    const trip = useAppSelector((state) => selectTrip(state, tripId))

    return <Text>{trip?.title}</Text>
}

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

// Типізований dispatch знає про всі AsyncThunkActions
export const useAppDispatch = () => useDispatch<AppDispatch>()

// Типізований selector надає повне автодоповнення полів RootState
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector

import { shallowEqual } from 'react-redux'
import { useAppSelector } from '@/store/hooks'

function HeaderProfile() {
    // Ререндер відбудеться лише якщо зміниться name АБО avatar (поверхова перевірка властивостей)
    const { name, avatar } = useAppSelector(
        (state) => ({
            name: state.user.profile?.name,
            avatar: state.user.profile?.avatarUrl,
        }),
        shallowEqual,
    )

    return (
        <View>
            <Text>{name}</Text>
        </View>
    )
}

import { createSlice, createEntityAdapter } from '@reduxjs/toolkit'
import type { RootState } from '../index'

export interface Trip {
    id: string
    title: string
    region: string
    likes: number
}

// 1. Створюємо адаптер сутностей з сортуванням за назвою
export const tripsAdapter = createEntityAdapter<Trip>({
    selectId: (trip) => trip.id,
    sortComparer: (a, b) => a.title.localeCompare(b.title),
})

// 2. Отримуємо початковий стан: { ids: [], entities: {} } + кастомні поля
const initialState = tripsAdapter.getInitialState({
    isLoading: false,
    error: null as string | null,
})

// 3. Слайс із вбудованими CRUD-мутаціями адаптера
export const tripsNormalizedSlice = createSlice({
    name: 'tripsNormalized',
    initialState,
    reducers: {
        // Додавання однієї поїздки зі складністю O(1)
        addTrip: tripsAdapter.addOne,

        // Оновлення поїздки зі складністю O(1)
        updateTripLikes(state, action: { payload: { id: string; likes: number } }) {
            tripsAdapter.updateOne(state, {
                id: action.payload.id,
                changes: { likes: action.payload.likes },
            })
        },

        // Видалення поїздки
        removeTrip: tripsAdapter.removeOne,

        // Повне перезаписування списку
        setAllTrips: tripsAdapter.setAll,
    },
})

// 4. Автоматично згенеровані високопродуктивні селектори
export const {
    selectAll: selectAllNormalizedTrips, // Повертає впорядкований масив Trip[]
    selectById: selectNormalizedTripById, // Вибірка за ID зі складністю O(1)
    selectIds: selectTripIds, // Повертає масив id []
    selectTotal: selectTotalTripsCount, // Повертає загальну кількість
} = tripsAdapter.getSelectors((state: RootState) => state.tripsNormalized)

// ❌ ПОМИЛКА: Редюсери НЕ МОЖУТЬ бути асинхронними!
const tripsSlice = createSlice({
    name: 'trips',
    initialState,
    reducers: {
        // ❌ Це НЕ ПРАЦЮЄ — редюсер має бути синхронним!
        async loadTrips(state) {
            const response = await fetch('/api/trips')
            state.items = await response.json()
        },
    },
})

import { createAsyncThunk } from '@reduxjs/toolkit'

// createAsyncThunk автоматично створює:
// - fetchTrips.pending    → 'trips/fetchTrips/pending'
// - fetchTrips.fulfilled  → 'trips/fetchTrips/fulfilled'
// - fetchTrips.rejected   → 'trips/fetchTrips/rejected'

export const fetchTrips = createAsyncThunk(
    'trips/fetchTrips', // Префікс для типів дій
    async () => {
        // Асинхронна функція (payload creator)
        const response = await fetch('/api/trips')
        return response.json() // Це стане payload у fulfilled дії
    },
)

const myThunk = createAsyncThunk<
    ReturnType, // Тип успішного результату (fulfilled payload)
    ArgType, // Тип вхідного аргументу
    ThunkApiConfig // Конфігурація (state, dispatch, rejectValue тощо)
>(
    'slice/actionName', // 1. Префікс типу дії
    payloadCreator, // 2. Асинхронна функція
    options, // 3. Додаткові опції (condition, dispatchConditionRejection)
)

export const fetchTripById = createAsyncThunk<
    // 1️⃣ ReturnType — тип даних, які повертаємо при успіху
    Trip,
    // 2️⃣ ArgType — тип аргументу, який передаємо при виклику
    string, // tripId
    // 3️⃣ ThunkApiConfig — конфігурація для TypeScript
    {
        state: RootState // Доступ до getState()
        dispatch: AppDispatch // Типізований dispatch
        rejectValue: string // Тип payload при rejectWithValue()
    }
>(
    // Префікс дії (обов'язковий)
    'trips/fetchById',

    // Payload Creator — асинхронна функція (обов'язкова)
    async (tripId: string, thunkAPI) => {
        // thunkAPI надає корисні методи:
        // - getState()    → поточний стан store
        // - dispatch()    → відправка інших дій
        // - extra         → додаткові аргументи (наприклад, API client)
        // - requestId     → унікальний ID запиту
        // - signal        → AbortSignal для скасування
        // - rejectWithValue() → повернення кастомної помилки

        try {
            const response = await fetch(`/api/trips/${tripId}`, {
                signal: thunkAPI.signal, // Для скасування запиту
            })

            if (!response.ok) {
                // Кастомна обробка помилки
                return thunkAPI.rejectWithValue('Поїздку не знайдено')
            }

            const data = await response.json()
            return data // Стане payload у fulfilled дії
        } catch (error) {
            // Автоматична обробка помилки
            return thunkAPI.rejectWithValue(error.message)
        }
    },

    // Options — додаткові налаштування (опціонально)
    {
        // Умова виконання (guard condition)
        condition: (tripId, { getState }) => {
            const { loading } = getState().trips
            // Запобігаємо повторному запиту, якщо вже завантажуємо
            if (loading) {
                return false // Thunk не виконається
            }
            return true
        },

        // Чи відправляти rejected дію при condition = false?
        dispatchConditionRejection: false,
    },
)