// src/store/tripsSlice.ts — ТРАДИЦІЙНИЙ ПІДХІД
import { createSlice, createAsyncThunk } from '@reduxjs/toolkit'

// Визначаємо структуру даних поїздки
interface Trip {
    id: string
    title: string
    region: string
    startDate: string
}

// Описуємо стан слайса з усіма необхідними полями
interface TripsState {
    trips: Trip[]           // Масив завантажених поїздок
    isLoading: boolean      // Чи відбувається зараз завантаження?
    error: string | null    // Текст помилки, якщо щось пішло не так
}

// Початковий стан при запуску застосунку
const initialState: TripsState = {
    trips: [],
    isLoading: false,
    error: null,
}

// Створюємо асинхронну дію для завантаження даних з сервера
export const fetchTrips = createAsyncThunk(
    'trips/fetchTrips',
    async () => {
        const response = await fetch('http://localhost:3000/trips')
        if (!response.ok) {
            throw new Error('Не вдалося завантажити поїздки')
        }
        return response.json()
    }
)

// Створюємо слайс з обробкою всіх можливих станів запиту
const tripsSlice = createSlice({
    name: 'trips',
    initialState,
    reducers: {},
    extraReducers: (builder) => {
        builder
            // Запит почався — встановлюємо прапорець завантаження
            .addCase(fetchTrips.pending, (state) => {
                state.isLoading = true
                state.error = null
            })
            // Запит успішно завершився — зберігаємо дані
            .addCase(fetchTrips.fulfilled, (state, action) => {
                state.isLoading = false
                state.trips = action.payload
            })
            // Запит завершився помилкою — зберігаємо повідомлення
            .addCase(fetchTrips.rejected, (state, action) => {
                state.isLoading = false
                state.error = action.error.message || 'Невідома помилка'
            })
    },
})

export default tripsSlice.reducer

// app/screens/TripsListScreen.tsx
import React, { useEffect } from 'react'
import { View, Text, FlatList, ActivityIndicator } from 'react-native'
import { useDispatch, useSelector } from 'react-redux'
import { fetchTrips } from '@/store/tripsSlice'

export function TripsListScreen() {
    const dispatch = useDispatch()
    
    // Отримуємо дані зі стору
    const { trips, isLoading, error } = useSelector((state) => state.trips)

    // При монтуванні компонента запускаємо завантаження
    useEffect(() => {
        dispatch(fetchTrips())
    }, [dispatch])

    if (isLoading) {
        return <ActivityIndicator size="large" />
    }

    if (error) {
        return <Text>Помилка: {error}</Text>
    }

    return (
        <FlatList
            data={trips}
            keyExtractor={(item) => item.id}
            renderItem={({ item }) => <Text>{item.title}</Text>}
        />
    )
}

// Додаємо ще один thunk для створення поїздки
export const createTrip = createAsyncThunk(
    'trips/createTrip',
    async (newTrip: Omit<Trip, 'id'>) => {
        const response = await fetch('http://localhost:3000/trips', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(newTrip),
        })
        return response.json()
    }
)

// Розширюємо extraReducers ще трьома кейсами
extraReducers: (builder) => {
    // ... попередні кейси для fetchTrips
    builder
        .addCase(createTrip.pending, (state) => {
            state.isLoading = true
        })
        .addCase(createTrip.fulfilled, (state, action) => {
            state.isLoading = false
            // Додаємо нову поїздку до списку
            state.trips.push(action.payload)
        })
        .addCase(createTrip.rejected, (state, action) => {
            state.isLoading = false
            state.error = action.error.message || 'Помилка створення'
        })
}

import { AppState } from 'react-native'
import NetInfo from '@react-native-community/netinfo'

// Відслідковуємо стан застосунку
useEffect(() => {
    const subscription = AppState.addEventListener('change', (nextAppState) => {
        if (nextAppState === 'active') {
            // Застосунок знову активний — перезавантажити дані?
            dispatch(fetchTrips())
        }
    })
    return () => subscription.remove()
}, [])

// Відслідковуємо стан мережі
useEffect(() => {
    const unsubscribe = NetInfo.addEventListener((state) => {
        if (state.isConnected) {
            // Інтернет відновлено — перезавантажити дані?
            dispatch(fetchTrips())
        }
    })
    return () => unsubscribe()
}, [])

// src/services/tripsApi.ts — ПІДХІД RTK QUERY
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'

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

// Описуємо API один раз — RTK Query згенерує все інше автоматично
export const tripsApi = createApi({
    reducerPath: 'tripsApi',
    baseQuery: fetchBaseQuery({ baseUrl: 'http://localhost:3000' }),
    tagTypes: ['Trip'],  // Для автоматичної інвалідації кешу
    endpoints: (builder) => ({
        // Ендпоінт для отримання списку
        getTrips: builder.query<Trip[], void>({
            query: () => '/trips',
            providesTags: ['Trip'],  // Цей запит надає дані типу Trip
        }),
        // Ендпоінт для створення нової поїздки
        createTrip: builder.mutation<Trip, Omit<Trip, 'id'>>({
            query: (newTrip) => ({
                url: '/trips',
                method: 'POST',
                body: newTrip,
            }),
            invalidatesTags: ['Trip'],  // Автоматично оновити getTrips
        }),
    }),
})

// RTK Query автоматично створює хуки для кожного ендпоінта
export const { useGetTripsQuery, useCreateTripMutation } = tripsApi

// app/screens/TripsListScreen.tsx — З RTK QUERY
import { useGetTripsQuery } from '@/services/tripsApi'

export function TripsListScreen() {
    // Один хук замінює весь попередній код!
    const { data: trips, isLoading, error } = useGetTripsQuery()

    if (isLoading) return <ActivityIndicator />
    if (error) return <Text>Помилка завантаження</Text>

    return (
        <FlatList
            data={trips}
            keyExtractor={(item) => item.id}
            renderItem={({ item }) => <Text>{item.title}</Text>}
        />
    )
}

// src/screens/TripDetailsScreen.tsx
import { useSelector } from 'react-redux'
import { useGetTripByIdQuery } from '@/services/tripsApi'

function TripDetailsScreen({ tripId }) {
    // 1. КЛІЄНТСЬКИЙ СТАН: налаштування теми (з Redux slice)
    const theme = useSelector((state) => state.theme.mode)
    
    // 2. СЕРВЕРНИЙ СТАН: деталі поїздки (з RTK Query)
    const { data: trip, isLoading } = useGetTripByIdQuery(tripId)
    
    if (isLoading) return <ActivityIndicator />
    
    return (
        <View style={{ backgroundColor: theme === 'dark' ? '#000' : '#fff' }}>
            {/* Тема (клієнтський стан) — застосовується миттєво */}
            
            <Text>{trip.title}</Text>
            {/* Деталі поїздки (серверний стан) — можуть оновитись при refetch */}
        </View>
    )
}

// src/services/api.ts
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'

// Визначаємо структуру даних
interface Post {
    id: number
    title: string
    body: string
}

// Створюємо API
export const api = createApi({
    // Назва слайса у Redux store
    reducerPath: 'api',
    
    // Базова конфігурація запитів
    baseQuery: fetchBaseQuery({ 
        baseUrl: 'https://jsonplaceholder.typicode.com' 
    }),
    
    // Описуємо ендпоінти
    endpoints: (builder) => ({
        // Один простий GET-запит
        getPosts: builder.query<Post[], void>({
            query: () => '/posts',
        }),
    }),
})

// RTK Query автоматично створює хук!
export const { useGetPostsQuery } = api

// src/store/index.ts
import { configureStore } from '@reduxjs/toolkit'
import { setupListeners } from '@reduxjs/toolkit/query'
import { api } from '@/services/api'

export const store = configureStore({
    reducer: {
        // Додаємо автоматично згенерований редюсер
        [api.reducerPath]: api.reducer,
    },
    middleware: (getDefaultMiddleware) =>
        // Додаємо middleware для керування кешем та підписками
        getDefaultMiddleware().concat(api.middleware),
})

// Увімкнути refetchOnFocus та refetchOnReconnect
setupListeners(store.dispatch)

export type RootState = ReturnType<typeof store.getState>
export type AppDispatch = typeof store.dispatch

// app/screens/PostsScreen.tsx
import React from 'react'
import { View, Text, FlatList, ActivityIndicator, StyleSheet } from 'react-native'
import { useGetPostsQuery } from '@/services/api'

export function PostsScreen() {
    // Викликаємо хук — запит виконається автоматично!
    const { data, isLoading, error } = useGetPostsQuery()

    // Показуємо індикатор завантаження
    if (isLoading) {
        return (
            <View style={styles.center}>
                <ActivityIndicator size="large" color="#3b82f6" />
                <Text style={styles.loadingText}>Завантаження постів...</Text>
            </View>
        )
    }

    // Обробка помилки
    if (error) {
        return (
            <View style={styles.center}>
                <Text style={styles.errorText}>
                    Помилка: {error.toString()}
                </Text>
            </View>
        )
    }

    // Відображаємо дані
    return (
        <FlatList
            data={data}
            keyExtractor={(item) => item.id.toString()}
            renderItem={({ item }) => (
                <View style={styles.card}>
                    <Text style={styles.title}>{item.title}</Text>
                    <Text style={styles.body}>{item.body}</Text>
                </View>
            )}
        />
    )
}

const styles = StyleSheet.create({
    center: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        padding: 20,
    },
    loadingText: {
        marginTop: 12,
        fontSize: 14,
        color: '#64748b',
    },
    errorText: {
        fontSize: 16,
        color: '#dc2626',
        textAlign: 'center',
    },
    card: {
        backgroundColor: '#ffffff',
        padding: 16,
        marginHorizontal: 16,
        marginTop: 12,
        borderRadius: 12,
        shadowColor: '#000',
        shadowOffset: { width: 0, height: 2 },
        shadowOpacity: 0.1,
        shadowRadius: 4,
        elevation: 3,
    },
    title: {
        fontSize: 16,
        fontWeight: '700',
        color: '#0f172a',
        marginBottom: 8,
    },
    body: {
        fontSize: 14,
        color: '#64748b',
        lineHeight: 20,
    },
})

// src/services/tripsApi.ts
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'
import { Platform } from 'react-native'
import Constants from 'expo-constants'

/**
 * Функція для визначення правильної URL адреси в залежності від середовища.
 * Це критично для React Native, бо localhost працює по-різному:
 * - iOS Simulator: localhost = комп'ютер розробника
 * - Android Emulator: localhost = сам емулятор (потрібно 10.0.2.2)
 * - Реальний пристрій: потрібна IP-адреса комп'ютера в локальній мережі
 */
const getBaseUrl = (): string => {
    // Для Android емулятора використовуємо спеціальну адресу
    if (Platform.OS === 'android') {
        return 'http://10.0.2.2:3000'
    }
    
    // Для реальних пристроїв отримуємо IP з Expo
    const hostUri = Constants.expoConfig?.hostUri
    if (hostUri) {
        const ip = hostUri.split(':').shift()
        if (ip) return `http://${ip}:3000`
    }
    
    // Fallback для iOS Simulator
    return 'http://localhost:3000'
}

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

export const tripsApi = createApi({
    // 1️⃣ REDUCER PATH: Унікальне ім'я для Redux store
    reducerPath: 'tripsApi',
    
    // 2️⃣ BASE QUERY: Налаштування HTTP-клієнта
    baseQuery: fetchBaseQuery({
        baseUrl: getBaseUrl(),
        
        // Таймаут для запитів (мс)
        timeout: 10000,
        
        // Функція для додавання заголовків до кожного запиту
        prepareHeaders: (headers, { getState }) => {
            // Отримуємо токен авторизації зі стору
            const token = (getState() as any).auth?.token
            
            if (token) {
                headers.set('Authorization', `Bearer ${token}`)
            }
            
            headers.set('Accept', 'application/json')
            headers.set('Content-Type', 'application/json')
            
            return headers
        },
    }),
    
    // 3️⃣ TAG TYPES: Типи сутностей для інвалідації кешу
    tagTypes: ['Trip', 'User'],
    
    // 4️⃣ REFETCH ON FOCUS: Оновлювати дані при поверненні в застосунок
    refetchOnFocus: true,
    
    // 5️⃣ REFETCH ON RECONNECT: Оновлювати при відновленні інтернету
    refetchOnReconnect: true,
    
    // 6️⃣ KEEP UNUSED DATA FOR: Скільки секунд зберігати невикористані дані
    keepUnusedDataFor: 60,  // 1 хвилина
    
    // 7️⃣ ENDPOINTS: Опис API ендпоінтів
    endpoints: (builder) => ({
        getTrips: builder.query<Trip[], void>({
            query: () => '/trips',
        }),
    }),
})

export const { useGetTripsQuery } = tripsApi

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

interface AuthState {
    token: string | null
    user: { id: string; email: string } | null
}

const initialState: AuthState = {
    token: null,
    user: null,
}

const authSlice = createSlice({
    name: 'auth',
    initialState,
    reducers: {
        // Зберігаємо токен після успішного логіну
        setCredentials: (state, action: PayloadAction<{ token: string; user: any }>) => {
            state.token = action.payload.token
            state.user = action.payload.user
        },
        // Видаляємо токен при виході
        logout: (state) => {
            state.token = null
            state.user = null
        },
    },
})

export const { setCredentials, logout } = authSlice.actions
export default authSlice.reducer

// src/services/api.ts
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'
import type { RootState } from '@/store'

export const api = createApi({
    baseQuery: fetchBaseQuery({
        baseUrl: 'https://api.example.com',
        
        // Функція викликається перед кожним запитом
        prepareHeaders: (headers, { getState }) => {
            // Отримуємо токен зі Redux store
            const token = (getState() as RootState).auth.token
            
            // Якщо токен є — додаємо його до заголовків
            if (token) {
                headers.set('Authorization', `Bearer ${token}`)
            }
            
            return headers
        },
    }),
    endpoints: (builder) => ({
        // Тепер усі запити автоматично отримають заголовок Authorization
        getProfile: builder.query({
            query: () => '/user/profile',
        }),
        getTrips: builder.query({
            query: () => '/trips',
        }),
    }),
})

// Access Token живе 15 хвилин
// Користувач відкриває застосунок через 20 хвилин

// Запит повертає помилку:
{
    status: 401,
    data: { message: "Token expired" }
}

// src/services/baseQueryWithReauth.ts
import { fetchBaseQuery } from '@reduxjs/toolkit/query'
import type { BaseQueryFn, FetchArgs, FetchBaseQueryError } from '@reduxjs/toolkit/query'
import { setCredentials, logout } from '@/store/authSlice'
import type { RootState } from '@/store'

// Базовий запит з токеном
const baseQuery = fetchBaseQuery({
    baseUrl: 'https://api.example.com',
    prepareHeaders: (headers, { getState }) => {
        const token = (getState() as RootState).auth.token
        if (token) {
            headers.set('Authorization', `Bearer ${token}`)
        }
        return headers
    },
})

// Обгортка, яка додає логіку refresh
export const baseQueryWithReauth: BaseQueryFn<
    string | FetchArgs,
    unknown,
    FetchBaseQueryError
> = async (args, api, extraOptions) => {
    // Спробуємо виконати звичайний запит
    let result = await baseQuery(args, api, extraOptions)

    // Якщо отримали 401 — токен застарів
    if (result.error && result.error.status === 401) {
        console.log('🔄 Access token застарів, оновлюємо...')
        
        // Отримуємо refresh token зі стору
        const refreshToken = (api.getState() as RootState).auth.refreshToken
        
        // Запитуємо новий access token
        const refreshResult = await baseQuery(
            {
                url: '/auth/refresh',
                method: 'POST',
                body: { refreshToken },
            },
            api,
            extraOptions,
        )

        if (refreshResult.data) {
            // ✅ Успішно оновили токен
            console.log('✅ Токен оновлено успішно')
            
            // Зберігаємо нові токени у Redux
            api.dispatch(setCredentials(refreshResult.data as any))
            
            // Повторюємо початковий запит з новим токеном
            result = await baseQuery(args, api, extraOptions)
        } else {
            // ❌ Не вдалося оновити токен — розлогінюємо користувача
            console.log('❌ Не вдалося оновити токен, виходимо')
            api.dispatch(logout())
        }
    }

    return result
}

// src/services/api.ts
import { createApi } from '@reduxjs/toolkit/query/react'
import { baseQueryWithReauth } from './baseQueryWithReauth'

export const api = createApi({
    // Використовуємо нашу розумну baseQuery замість звичайної
    baseQuery: baseQueryWithReauth,
    
    endpoints: (builder) => ({
        getProfile: builder.query({
            query: () => '/user/profile',
        }),
        getTrips: builder.query({
            query: () => '/trips',
        }),
    }),
})

function DashboardScreen() {
    // 3 запити виконуються ОДНОЧАСНО при монтуванні екрана
    const { data: profile } = useGetProfileQuery()
    const { data: trips } = useGetTripsQuery()
    const { data: stats } = useGetStatsQuery()
    
    // Якщо access token застарів, всі 3 запити отримають 401!
    // Наївна реалізація спробує оновити токен 3 РАЗИ паралельно
}

npm install async-mutex

// src/services/baseQueryWithReauth.ts
import { fetchBaseQuery } from '@reduxjs/toolkit/query'
import type { BaseQueryFn, FetchArgs, FetchBaseQueryError } from '@reduxjs/toolkit/query'
import { Mutex } from 'async-mutex'
import { setCredentials, logout } from '@/store/authSlice'
import type { RootState } from '@/store'

// Створюємо єдиний mutex для всього застосунку
const mutex = new Mutex()

const baseQuery = fetchBaseQuery({
    baseUrl: 'https://api.example.com',
    prepareHeaders: (headers, { getState }) => {
        const token = (getState() as RootState).auth.token
        if (token) {
            headers.set('Authorization', `Bearer ${token}`)
        }
        return headers
    },
})

export const baseQueryWithReauth: BaseQueryFn<
    string | FetchArgs,
    unknown,
    FetchBaseQueryError
> = async (args, api, extraOptions) => {
    // 🔒 Чекаємо, поки mutex буде вільний
    // Якщо хтось вже оновлює токен — почекаємо
    await mutex.waitForUnlock()
    
    let result = await baseQuery(args, api, extraOptions)

    if (result.error && result.error.status === 401) {
        // Перевіряємо: може інший запит вже захопив mutex?
        if (!mutex.isLocked()) {
            // 🔒 Захоплюємо mutex — тепер тільки ми можемо оновлювати токен
            const release = await mutex.acquire()
            
            try {
                console.log('🔄 Оновлюю токен (mutex захоплено)')
                
                const refreshToken = (api.getState() as RootState).auth.refreshToken
                
                const refreshResult = await baseQuery(
                    {
                        url: '/auth/refresh',
                        method: 'POST',
                        body: { refreshToken },
                    },
                    api,
                    extraOptions,
                )

                if (refreshResult.data) {
                    console.log('✅ Токен оновлено, звільняю mutex')
                    api.dispatch(setCredentials(refreshResult.data as any))
                    
                    // Повторюємо початковий запит
                    result = await baseQuery(args, api, extraOptions)
                } else {
                    console.log('❌ Refresh провалився, виходимо')
                    api.dispatch(logout())
                }
            } finally {
                // 🔓 ОБОВ'ЯЗКОВО звільняємо mutex
                release()
            }
        } else {
            // Інший запит вже оновлює токен
            // Просто чекаємо його завершення та повторюємо запит
            console.log('⏳ Чекаю завершення refresh від іншого запиту...')
            await mutex.waitForUnlock()
            
            // Токен вже оновлено — повторюємо запит
            result = await baseQuery(args, api, extraOptions)
        }
    }

    return result
}

// src/services/api.ts
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'

interface Post {
    id: number
    title: string
    body: string
}

export const api = createApi({
    baseQuery: fetchBaseQuery({ baseUrl: 'https://jsonplaceholder.typicode.com' }),
    endpoints: (builder) => ({
        // Query без аргументів — тип <ТипВідповіді, void>
        getPosts: builder.query<Post[], void>({
            query: () => '/posts',
        }),
    }),
})

export const { useGetPostsQuery } = api

function PostsScreen() {
    // Виклик без аргументів
    const { data, isLoading, error } = useGetPostsQuery()
    
    if (isLoading) return <ActivityIndicator />
    if (error) return <Text>Помилка завантаження</Text>
    
    return (
        <FlatList
            data={data}
            renderItem={({ item }) => <Text>{item.title}</Text>}
        />
    )
}

// src/services/api.ts
export const api = createApi({
    baseQuery: fetchBaseQuery({ baseUrl: 'https://jsonplaceholder.typicode.com' }),
    endpoints: (builder) => ({
        // Аргумент — число (ID поста)
        getPostById: builder.query<Post, number>({
            query: (postId) => `/posts/${postId}`,
        }),
    }),
})

export const { useGetPostByIdQuery } = api

function PostDetailScreen({ route }) {
    const postId = route.params.id
    
    // Передаємо ID як аргумент
    const { data: post, isLoading } = useGetPostByIdQuery(postId)
    
    if (isLoading) return <ActivityIndicator />
    
    return (
        <View>
            <Text style={styles.title}>{post?.title}</Text>
            <Text>{post?.body}</Text>
        </View>
    )
}

// src/services/tripsApi.ts
interface Trip {
    id: string
    title: string
    region: string
    startDate: string
}

// Інтерфейс для параметрів фільтрації
interface GetTripsParams {
    region?: string
    search?: string
    sortBy?: 'date' | 'title'
    limit?: number
}

export const tripsApi = createApi({
    baseQuery: fetchBaseQuery({ baseUrl: 'http://localhost:3000' }),
    endpoints: (builder) => ({
        getTrips: builder.query<Trip[], GetTripsParams | void>({
            query: (params) => {
                // Якщо параметрів немає — просто повертаємо URL
                if (!params) return '/trips'
                
                // Будуємо query string з параметрів
                const searchParams = new URLSearchParams()
                
                if (params.region) searchParams.set('region', params.region)
                if (params.search) searchParams.set('q', params.search)
                if (params.sortBy) searchParams.set('_sort', params.sortBy)
                if (params.limit) searchParams.set('_limit', params.limit.toString())
                
                return `/trips?${searchParams.toString()}`
            },
        }),
    }),
})

export const { useGetTripsQuery } = tripsApi

function TripsListScreen() {
    const [region, setRegion] = useState<string>('all')
    const [search, setSearch] = useState('')
    
    // Передаємо об'єкт з параметрами
    const { data: trips, isLoading } = useGetTripsQuery({
        region: region !== 'all' ? region : undefined,
        search: search || undefined,
        limit: 20,
    })
    
    return (
        <View>
            <Picker value={region} onValueChange={setRegion}>
                <Picker.Item label="Усі регіони" value="all" />
                <Picker.Item label="Європа" value="europe" />
                <Picker.Item label="Азія" value="asia" />
            </Picker>
            
            <TextInput
                placeholder="Пошук..."
                value={search}
                onChangeText={setSearch}
            />
            
            <FlatList
                data={trips}
                renderItem={({ item }) => <TripCard trip={item} />}
            />
        </View>
    )
}

useGetTripsQuery({ region: 'europe' })        // Кеш #1
useGetTripsQuery({ region: 'asia' })          // Кеш #2
useGetTripsQuery({ region: 'europe', limit: 10 })  // Кеш #3
useGetTripsQuery()                            // Кеш #4 (без параметрів)

// Сервер повертає:
{
    "status": "success",
    "data": {
        "items": [...],
        "total": 42,
        "page": 1
    }
}

// Але нам потрібен лише масив items

export const api = createApi({
    endpoints: (builder) => ({
        getTrips: builder.query<Trip[], void>({
            query: () => '/trips',
            
            // Трансформуємо відповідь перед збереженням у кеш
            transformResponse: (response: { status: string; data: { items: Trip[] } }) => {
                console.log('📦 Сирі дані з сервера:', response)
                
                // Витягуємо лише масив items
                return response.data.items
            },
        }),
    }),
})

const {
    data,              // Дані з кешу або сервера
    error,             // Об'єкт помилки (якщо щось пішло не так)
    isLoading,         // true ТІЛЬКИ при першому завантаженні
    isFetching,        // true при будь-якому запиті (включно з фоновим)
    isSuccess,         // true коли дані успішно завантажені
    isError,           // true при помилці
    refetch,           // Функція для примусового оновлення
    currentData,       // Дані поточного запиту (може бути undefined)
    originalArgs,      // Аргументи, з якими було викликано хук
} = useGetTripsQuery(params)

function TripsListScreen() {
    const { data, isLoading, isFetching, isError, error, refetch } = useGetTripsQuery()

    // 1. ПОВНОЕКРАННИЙ ЛОАДЕР: перше завантаження (немає даних)
    if (isLoading) {
        return (
            <View style={styles.center}>
                <ActivityIndicator size="large" />
                <Text>Завантаження поїздок...</Text>
            </View>
        )
    }

    // 2. ЕКРАН ПОМИЛКИ: не вдалося завантажити
    if (isError) {
        return (
            <View style={styles.center}>
                <Text style={styles.errorText}>
                    Помилка: {error?.toString()}
                </Text>
                <Button title="Спробувати знову" onPress={refetch} />
            </View>
        )
    }

    // 3. РОБОЧИЙ СТАН: показуємо дані
    return (
        <View style={styles.container}>
            {/* Тонкий індикатор фонового оновлення */}
            {isFetching && !isLoading && (
                <View style={styles.topBar}>
                    <ActivityIndicator size="small" />
                    <Text style={styles.topBarText}>Оновлення...</Text>
                </View>
            )}
            
            <FlatList
                data={data}
                keyExtractor={(item) => item.id}
                renderItem={({ item }) => <TripCard trip={item} />}
                
                {/* Pull-to-Refresh */}
                refreshControl={
                    <RefreshControl 
                        refreshing={isFetching && !isLoading}
                        onRefresh={refetch}
                        tintColor="#3b82f6"
                    />
                }
            />
        </View>
    )
}

export const { useGetTripByIdQuery, useLazyGetTripByIdQuery } = tripsApi

// ❌ ПРОБЛЕМА: Компонент ререндериться при зміні БУДЬ-ЯКОЇ поїздки у списку
function TripTitle({ tripId }) {
    const { data: trips } = useGetTripsQuery()
    const trip = trips?.find(t => t.id === tripId)
    
    return <Text>{trip?.title}</Text>
}

// ✅ ОПТИМІЗАЦІЯ: Ререндер тільки при зміні цієї конкретної поїздки
function TripTitle({ tripId }) {
    const { trip } = useGetTripsQuery(undefined, {
        // selectFromResult дозволяє підписатись лише на частину даних
        selectFromResult: ({ data }) => ({
            trip: data?.find(t => t.id === tripId),
        }),
    })
    
    return <Text>{trip?.title}</Text>
}

// src/services/tripsApi.ts
interface Trip {
    id: string
    title: string
    region: string
    startDate: string
}

// Дані для створення (без ID — його поверне сервер)
interface CreateTripDto {
    title: string
    region: string
    startDate: string
}

export const tripsApi = createApi({
    baseQuery: fetchBaseQuery({ baseUrl: 'http://localhost:3000' }),
    tagTypes: ['Trip'],
    endpoints: (builder) => ({
        // Query для читання
        getTrips: builder.query<Trip[], void>({
            query: () => '/trips',
            providesTags: ['Trip'],
        }),
        
        // Mutation для створення
        createTrip: builder.mutation<Trip, CreateTripDto>({
            query: (newTrip) => ({
                url: '/trips',
                method: 'POST',
                body: newTrip,
            }),
            invalidatesTags: ['Trip'],  // Оновити список після створення
        }),
    }),
})

export const { useGetTripsQuery, useCreateTripMutation } = tripsApi

// app/screens/CreateTripScreen.tsx
import { useState } from 'react'
import { View, TextInput, Button, Text, ActivityIndicator } from 'react-native'
import { useCreateTripMutation } from '@/services/tripsApi'
import { useRouter } from 'expo-router'

export function CreateTripScreen() {
    const router = useRouter()
    
    // Хук мутації повертає [функцію-тригер, стан запиту]
    const [createTrip, { isLoading, error, isSuccess }] = useCreateTripMutation()
    
    const [title, setTitle] = useState('')
    const [region, setRegion] = useState('')
    
    const handleSubmit = async () => {
        try {
            // Викликаємо мутацію вручну
            const result = await createTrip({
                title,
                region,
                startDate: new Date().toISOString(),
            }).unwrap()  // .unwrap() кидає помилку при провалі
            
            console.log('✅ Поїздку створено:', result)
            router.back()  // Повертаємось на попередній екран
        } catch (err) {
            console.error('❌ Помилка створення:', err)
        }
    }
    
    return (
        <View style={{ padding: 20 }}>
            <TextInput
                placeholder="Назва поїздки"
                value={title}
                onChangeText={setTitle}
                style={styles.input}
            />
            
            <TextInput
                placeholder="Регіон"
                value={region}
                onChangeText={setRegion}
                style={styles.input}
            />
            
            <Button 
                title={isLoading ? "Створення..." : "Створити поїздку"}
                onPress={handleSubmit}
                disabled={isLoading || !title || !region}
            />
            
            {error && (
                <Text style={styles.error}>
                    Помилка: {error.toString()}
                </Text>
            )}
        </View>
    )
}