[
  { "id": "t1", "title": "Карпати", "likes": 12 },
  { "id": "t2", "title": "Львів", "likes": 45 }
]

         СЕРВЕРНА ВІДПОВІДЬ (ARRAY)                   НОРМАЛІЗОВАНИЙ СТЕЙТ КЛІЄНТА
  +-------------------------------------+       +-----------------------------------------+
  | [                                   |       | {                                       |
  |   { "id": "t1", "title": "Карпати" },|  ==> |   byId: {                               |
  |   { "id": "t2", "title": "Львів" }   |       |     "t1": { "id": "t1", title: "..." }, |
  | ]                                   |       |     "t2": { "id": "t2", title: "..." }  |
  +-------------------------------------+       |   },                                    |
                                                |   allIds: ["t1", "t2"]                  |
                                                | }                                       |
                                                +-----------------------------------------+

/**
 * Виконує безпечний HTTP-запит з гарантованим таймаутом та обробкою HTTP-помилок
 */
async function executeFetchWithTimeout<T>(
    url: string,
    options: RequestInit = {},
    timeoutMs: number = 8000,
): Promise<T> {
    const controller = new AbortController()
    const { signal } = controller

    // Реєструємо таймер примусового скасування запиту
    const timerId = setTimeout(() => {
        controller.abort()
    }, timeoutMs)

    try {
        const response = await fetch(url, {
            ...options,
            signal,
            headers: {
                Accept: 'application/json',
                'Content-Type': 'application/json',
                ...options.headers,
            },
        })

        clearTimeout(timerId)

        // Валідація діапазону успішних статусів (200-299)
        if (!response.ok) {
            throw new Error(`HTTP_${response.status}: ${response.statusText}`)
        }

        const contentType = response.headers.get('content-type')
        if (!contentType || !contentType.includes('application/json')) {
            throw new Error('INVALID_CONTENT_TYPE: Очікувався application/json')
        }

        return (await response.json()) as T
    } catch (error: unknown) {
        clearTimeout(timerId)

        if (error instanceof Error && error.name === 'AbortError') {
            throw new Error(`TIMEOUT: Запит перевищив ліміт очікування у ${timeoutMs} мс`)
        }

        throw error
    }
}

// src/utils/retryWithBackoff.ts
export interface RetryOptions {
    maxRetries?: number
    baseDelayMs?: number
    maxDelayMs?: number
    shouldRetry?: (error: unknown) => boolean
}

/**
 * Виконує асинхронну операцію з алгоритмом Full Jitter Exponential Backoff
 */
export async function retryWithBackoff<T>(operation: () => Promise<T>, options: RetryOptions = {}): Promise<T> {
    const {
        maxRetries = 3,
        baseDelayMs = 500,
        maxDelayMs = 8000,
        shouldRetry = (err: any) => {
            // За замовчуванням повторюємо лише мережеві збої та 5xx статуси
            if (err?.response?.status && err.response.status >= 400 && err.response.status < 500) {
                return false // Ніколи не повторюємо 4xx
            }
            return true
        },
    } = options

    let attempt = 0

    while (attempt < maxRetries) {
        try {
            return await operation()
        } catch (error) {
            attempt++

            if (attempt >= maxRetries || !shouldRetry(error)) {
                throw error
            }

            // Розрахунок експоненційного діапазону: base * 2^attempt
            const calculatedCap = Math.min(maxDelayMs, baseDelayMs * Math.pow(2, attempt))
            // Full Jitter: рівномірний випадковий вибір від 0 до calculatedCap
            const jitterDelay = Math.random() * calculatedCap

            await new Promise((resolve) => setTimeout(resolve, jitterDelay))
        }
    }

    throw new Error('RETRY_EXHAUSTED')
}

// src/api/AppError.ts
import axios, { AxiosError } from 'axios'

export enum ErrorKind {
    Network = 'NETWORK',
    Timeout = 'TIMEOUT',
    Server = 'SERVER',
    Unauthorized = 'UNAUTHORIZED',
    Forbidden = 'FORBIDDEN',
    NotFound = 'NOT_FOUND',
    Validation = 'VALIDATION',
    SchemaMismatch = 'SCHEMA_MISMATCH',
    Unknown = 'UNKNOWN',
}

export class AppError extends Error {
    public readonly kind: ErrorKind
    public readonly userMessage: string
    public readonly statusCode?: number
    public readonly originalError?: unknown

    constructor(params: { kind: ErrorKind; userMessage: string; statusCode?: number; originalError?: unknown }) {
        super(params.userMessage)
        this.name = 'AppError'
        this.kind = params.kind
        this.userMessage = params.userMessage
        this.statusCode = params.statusCode
        this.originalError = params.originalError

        // Зберігаємо коректний прототип для перевірки через instanceof
        Object.setPrototypeOf(this, AppError.prototype)
    }

    /**
     * Фабричний метод для приведення будь-якого невідомого винятку до стандарту AppError
     */
    public static from(error: unknown): AppError {
        if (error instanceof AppError) {
            return error
        }

        if (axios.isAxiosError(error)) {
            const axiosError = error as AxiosError<{ message?: string; error?: string }>

            // 1. Помилка таймауту
            if (axiosError.code === 'ECONNABORTED' || axiosError.message.includes('timeout')) {
                return new AppError({
                    kind: ErrorKind.Timeout,
                    userMessage: 'Час очікування відповіді вичерпано. Перевірте швидкість інтернету.',
                    originalError: error,
                })
            }

            // 2. Відсутність фізичного з'єднання або DNS збій
            if (!axiosError.response) {
                return new AppError({
                    kind: ErrorKind.Network,
                    userMessage: "Зв'язок із сервером відсутній. Перевірте мережеве з'єднання.",
                    originalError: error,
                })
            }

            const status = axiosError.response.status
            const serverMessage = axiosError.response.data?.message

            // 3. Авторизаційні помилки
            if (status === 401) {
                return new AppError({
                    kind: ErrorKind.Unauthorized,
                    userMessage: 'Сесія завершилася. Будь ласка, виконайте вхід повторно.',
                    statusCode: status,
                    originalError: error,
                })
            }

            if (status === 403) {
                return new AppError({
                    kind: ErrorKind.Forbidden,
                    userMessage: 'У вас немає прав для виконання цієї дії.',
                    statusCode: status,
                    originalError: error,
                })
            }

            if (status === 404) {
                return new AppError({
                    kind: ErrorKind.NotFound,
                    userMessage: serverMessage ?? 'Запитуваний ресурс не знайдено на сервері.',
                    statusCode: status,
                    originalError: error,
                })
            }

            if (status === 422 || status === 400) {
                return new AppError({
                    kind: ErrorKind.Validation,
                    userMessage: serverMessage ?? 'Надіслані дані містять помилки валідації.',
                    statusCode: status,
                    originalError: error,
                })
            }

            // 4. Серверні помилки 5xx
            if (status >= 500) {
                return new AppError({
                    kind: ErrorKind.Server,
                    userMessage: 'На сервері сталася технічна помилка. Ми вже працюємо над її усуненням.',
                    statusCode: status,
                    originalError: error,
                })
            }
        }

        // 5. Нерозпізнані або синтаксичні винятки
        return new AppError({
            kind: ErrorKind.Unknown,
            userMessage: 'Сталася непередбачена помилка. Спробуйте пізніше.',
            originalError: error,
        })
    }
}

// src/components/PrivacyShield.tsx
import React, { useEffect, useState } from 'react'
import { StyleSheet, View, Text, AppState, AppStateStatus } from 'react-native'

/**
 * Накладає захисну маску, коли застосунок згортається у фон або переходить в App Switcher
 */
export const PrivacyShield: React.FC<{ children: React.ReactNode }> = ({ children }) => {
    const [isShieldVisible, setIsShieldVisible] = useState(false)

    useEffect(() => {
        const subscription = AppState.addEventListener('change', (nextState: AppStateStatus) => {
            // На iOS при відкритті App Switcher стан стає 'inactive'
            // На Android при згортанні стан стає 'background'
            const shouldHideData = nextState === 'inactive' || nextState === 'background'
            setIsShieldVisible(shouldHideData)
        })

        return () => subscription.remove()
    }, [])

    return (
        <View style={styles.container}>
            {children}
            {isShieldVisible && (
                <View style={styles.overlay}>
                    <Text style={styles.shieldText}>🔒 Дані захищено</Text>
                </View>
            )}
        </View>
    )
}

const styles = StyleSheet.create({
    container: { flex: 1 },
    overlay: {
        ...StyleSheet.absoluteFillObject,
        backgroundColor: '#0f172a',
        justifyContent: 'center',
        alignItems: 'center',
        zIndex: 99999,
    },
    shieldText: { color: '#ffffff', fontSize: 20, fontWeight: '700' },
})

// src/hooks/useRefetchOnFocusAndNetwork.ts
import { useEffect, useRef } from 'react'
import { AppState, AppStateStatus } from 'react-native'
import { useNetworkStatus } from './useNetworkStatus'

interface RefetchOptions {
    /**
     * Мінімальний інтервал між повторними запитами в мілісекундах (захист від Throttling)
     * @default 5000
     */
    throttleIntervalMs?: number
}

/**
 * Автоматично викликає колбек оновлення даних при:
 * 1. Поверненні застосунку з фону в активний стан (background -> active);
 * 2. Відновленні доступу до Інтернету після офлайну.
 */
export function useRefetchOnFocusAndNetwork(onRefetch: () => void | Promise<void>, options: RefetchOptions = {}): void {
    const { throttleIntervalMs = 5000 } = options
    const { isOffline } = useNetworkStatus()

    const prevAppStateRef = useRef<AppStateStatus>(AppState.currentState)
    const prevOfflineRef = useRef<boolean>(isOffline)
    const lastRefetchTimestampRef = useRef<number>(Date.now())
    const onRefetchRef = useRef(onRefetch)

    // Оновлюємо актуальне посилання на функцію без перезапуску ефекту
    useEffect(() => {
        onRefetchRef.current = onRefetch
    }, [onRefetch])

    useEffect(() => {
        function executeThrottledRefetch(reason: string) {
            const now = Date.now()
            if (now - lastRefetchTimestampRef.current < throttleIntervalMs) {
                return // Запобігаємо надто частим запитам
            }

            if (!isOffline) {
                lastRefetchTimestampRef.current = now
                onRefetchRef.current()
            }
        }

        // 1. Слухач життєвого циклу застосунку
        const subscription = AppState.addEventListener('change', (nextAppState: AppStateStatus) => {
            const isComingToForeground =
                prevAppStateRef.current.match(/inactive|background/) && nextAppState === 'active'

            if (isComingToForeground) {
                executeThrottledRefetch('APP_ENTERED_FOREGROUND')
            }

            prevAppStateRef.current = nextAppState
        })

        // 2. Реакція на відновлення мережі
        const wasOffline = prevOfflineRef.current
        const isNowOnline = !isOffline

        if (wasOffline && isNowOnline) {
            executeThrottledRefetch('NETWORK_RECONNECTED')
        }

        prevOfflineRef.current = isOffline

        return () => {
            subscription.remove()
        }
    }, [isOffline, throttleIntervalMs])
}

// src/api/tripsApi.ts
import { apiClient } from './client'
import { AppError } from './AppError'

export interface TripDto {
    id: string
    title: string
    dateLabel: string
    description: string
    coverUri: string
    region: string
}

export async function getTrips(): Promise<TripDto[]> {
    try {
        const response = await apiClient.get<TripDto[]>('/trips')
        return response.data
    } catch (error) {
        throw AppError.from(error)
    }
}

export async function getTripById(id: string): Promise<TripDto> {
    try {
        const response = await apiClient.get<TripDto>(`/trips/${id}`)
        return response.data
    } catch (error) {
        throw AppError.from(error)
    }
}

// src/features/trips/model/TripsProvider.tsx
import React, { createContext, useContext, useState, useEffect, useCallback, useMemo } from 'react'
import { getTrips, TripDto } from '../../../api/tripsApi'
import { AppError } from '../../../api/AppError'
import {
    normalizeEntities,
    denormalizeEntities,
    updateEntity,
    upsertEntity,
    NormalizedEntities,
} from '../../../utils/normalize'
import { useRefetchOnFocusAndNetwork } from '../../../hooks/useRefetchOnFocusAndNetwork'

interface TripsContextType {
    trips: TripDto[]
    tripsById: Record<string, TripDto>
    isLoading: boolean
    isRefreshing: boolean
    error: AppError | null
    getTrip: (id: string) => TripDto | undefined
    patchTrip: (id: string, patch: Partial<TripDto>) => void
    addTrip: (trip: TripDto) => void
    refetch: (isManual?: boolean) => Promise<void>
}

const TripsContext = createContext<TripsContextType | undefined>(undefined)

export const TripsProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
    const [tripsState, setTripsState] = useState<NormalizedEntities<TripDto>>({
        byId: {},
        allIds: [],
    })
    const [isLoading, setIsLoading] = useState<boolean>(true)
    const [isRefreshing, setIsRefreshing] = useState<boolean>(false)
    const [error, setError] = useState<AppError | null>(null)

    const fetchTripsData = useCallback(async (isManual = false) => {
        if (isManual) {
            setIsRefreshing(true)
        } else {
            setIsLoading(true)
        }
        setError(null)

        try {
            const data = await getTrips()
            // Зберігаємо нормалізовану структуру
            setTripsState(normalizeEntities(data))
        } catch (err) {
            setError(AppError.from(err))
        } finally {
            setIsLoading(false)
            setIsRefreshing(false)
        }
    }, [])

    useEffect(() => {
        fetchTripsData()
    }, [fetchTripsData])

    // Автоматична ресинхронізація
    useRefetchOnFocusAndNetwork(() => {
        fetchTripsData(true)
    })

    // Швидка вибірка O(1) за ID
    const getTrip = useCallback((id: string) => tripsState.byId[id], [tripsState.byId])

    // Миттєве оновлення O(1)
    const patchTrip = useCallback((id: string, patch: Partial<TripDto>) => {
        setTripsState((prev) => updateEntity(prev, id, patch))
    }, [])

    // Додавання нової поїздки O(1)
    const addTrip = useCallback((trip: TripDto) => {
        setTripsState((prev) => upsertEntity(prev, trip))
    }, [])

    // Мемоізований список для компонентів-списків
    const tripsArray = useMemo(() => denormalizeEntities(tripsState), [tripsState])

    return (
        <TripsContext.Provider
            value={{
                trips: tripsArray,
                tripsById: tripsState.byId,
                isLoading,
                isRefreshing,
                error,
                getTrip,
                patchTrip,
                addTrip,
                refetch: fetchTripsData,
            }}
        >
            {children}
        </TripsContext.Provider>
    )
}

export function useTrips(): TripsContextType {
    const context = useContext(TripsContext)
    if (!context) {
        throw new Error('useTrips must be used within a TripsProvider')
    }
    return context
}

// app/_layout.tsx
import { Stack } from 'expo-router'
import { TripsProvider } from '../src/features/trips/model/TripsProvider'
import { OfflineBanner } from '../src/components/OfflineBanner'
import { SafeAreaView, StyleSheet } from 'react-native'

export default function RootLayout() {
    return (
        <SafeAreaView style={styles.root}>
            <OfflineBanner />
            <TripsProvider>
                <Stack screenOptions={{ headerShown: false }} />
            </TripsProvider>
        </SafeAreaView>
    )
}

const styles = StyleSheet.create({
    root: {
        flex: 1,
        backgroundColor: '#0f172a',
    },
})