npx create-medusa-app@latest

npx create-expo-app@latest

cd your-project-name

npm install @medusajs/js-sdk @medusajs/types @react-native-async-storage/async-storage @react-native-picker/picker @react-navigation/drawer

/**
 * Below are the colors that are used in the app. The colors are defined in the light and dark mode.
 * There are many other ways to style your app. For example, [Nativewind](https://www.nativewind.dev/), [Tamagui](https://tamagui.dev/), [unistyles](https://reactnativeunistyles.vercel.app), etc.
 */

import { Platform } from "react-native"

const tintColorLight = "#000"
const tintColorDark = "#fff"

export const Colors = {
  light: {
    text: "#11181C",
    background: "#fff",
    tint: tintColorLight,
    icon: "#687076",
    tabIconDefault: "#687076",
    tabIconSelected: tintColorLight,
    border: "#e0e0e0",
    cardBackground: "#f9f9f9",
    error: "#ff3b30",
    warning: "#ff9500",
    success: "#4CAF50",
    imagePlaceholder: "#f0f0f0",
  },
  dark: {
    text: "#ECEDEE",
    background: "#151718",
    tint: tintColorDark,
    icon: "#9BA1A6",
    tabIconDefault: "#9BA1A6",
    tabIconSelected: tintColorDark,
    border: "#333",
    cardBackground: "#1a1a1a",
    error: "#ff3b30",
    warning: "#ff9500",
    success: "#4CAF50",
    imagePlaceholder: "#2a2a2a",
  },
}

export const Fonts = Platform.select({
  ios: {
    /** iOS `UIFontDescriptorSystemDesignDefault` */
    sans: "system-ui",
    /** iOS `UIFontDescriptorSystemDesignSerif` */
    serif: "ui-serif",
    /** iOS `UIFontDescriptorSystemDesignRounded` */
    rounded: "ui-rounded",
    /** iOS `UIFontDescriptorSystemDesignMonospaced` */
    mono: "ui-monospace",
  },
  default: {
    sans: "normal",
    serif: "serif",
    rounded: "normal",
    mono: "monospace",
  },
  web: {
    sans: "system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif",
    serif: "Georgia, 'Times New Roman', serif",
    rounded: "'SF Pro Rounded', 'Hiragino Maru Gothic ProN', Meiryo, 'MS PGothic', sans-serif",
    mono: "SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace",
  },
})

import Medusa from "@medusajs/js-sdk"
import AsyncStorage from "@react-native-async-storage/async-storage"
import Constants from "expo-constants"

const MEDUSA_BACKEND_URL =
  Constants.expoConfig?.extra?.EXPO_PUBLIC_MEDUSA_URL ||
  process.env.EXPO_PUBLIC_MEDUSA_URL ||
  "http://localhost:9000"

const MEDUSA_PUBLISHABLE_API_KEY = 
  Constants.expoConfig?.extra?.EXPO_PUBLIC_MEDUSA_PUBLISHABLE_API_KEY ||
  process.env.EXPO_PUBLIC_MEDUSA_PUBLISHABLE_API_KEY ||
  ""

export const sdk = new Medusa({
  baseUrl: MEDUSA_BACKEND_URL,
  debug: __DEV__,
  auth: {
    type: "jwt",
    jwtTokenStorageMethod: "custom",
    storage: AsyncStorage,
  },
  publishableKey: MEDUSA_PUBLISHABLE_API_KEY,
})

ipconfig getifaddr en0

ip addr

ipconfig

npm run dev

EXPO_PUBLIC_MEDUSA_URL=http://192.168.1.100:9000
EXPO_PUBLIC_MEDUSA_PUBLISHABLE_API_KEY=your_publishable_api_key

STORE_CORS=previous_values...,http://localhost:8081
AUTH_CORS=previous_values...,http://localhost:8081

import { sdk } from "@/lib/sdk"
import type { HttpTypes } from "@medusajs/types"
import AsyncStorage from "@react-native-async-storage/async-storage"
import React, { createContext, ReactNode, useContext, useEffect, useState } from "react"

interface RegionContextType {
  regions: HttpTypes.StoreRegion[];
  selectedRegion: HttpTypes.StoreRegion | null;
  selectedCountryCode: string | null;
  setSelectedRegion: (region: HttpTypes.StoreRegion, countryCode: string) => void;
  loading: boolean;
  error: string | null;
}

const RegionContext = createContext<RegionContextType | undefined>(undefined)

const REGION_STORAGE_KEY = "selected_region_id"
const COUNTRY_STORAGE_KEY = "selected_country_code"

export function RegionProvider({ children }: { children: ReactNode }) {
  const [regions, setRegions] = useState<HttpTypes.StoreRegion[]>([])
  const [selectedRegion, setSelectedRegionState] = useState<HttpTypes.StoreRegion | null>(null)
  const [selectedCountryCode, setSelectedCountryCode] = useState<string | null>(null)
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)

  // TODO load and select regions
}

// TODO add useRegion hook

const loadRegions = async () => {
  try {
    setLoading(true)
    setError(null)
    
    const { regions: fetchedRegions } = await sdk.store.region.list()
    setRegions(fetchedRegions)

    // Load saved region and country or use first region's first country
    const savedRegionId = await AsyncStorage.getItem(REGION_STORAGE_KEY)
    const savedCountryCode = await AsyncStorage.getItem(COUNTRY_STORAGE_KEY)
    
    const regionToSelect = savedRegionId
      ? fetchedRegions.find((r) => r.id === savedRegionId) || fetchedRegions[0]
      : fetchedRegions[0]

    if (regionToSelect) {
      setSelectedRegionState(regionToSelect)
      await AsyncStorage.setItem(REGION_STORAGE_KEY, regionToSelect.id)
      
      // Set country code - use saved one if it exists in the region, otherwise use first country
      const countryCodeToSelect = savedCountryCode && 
        regionToSelect.countries?.some((c) => (c.iso_2 || c.id) === savedCountryCode)
        ? savedCountryCode
        : regionToSelect.countries?.[0]?.iso_2 || regionToSelect.countries?.[0]?.id || null
      
      setSelectedCountryCode(countryCodeToSelect)
      if (countryCodeToSelect) {
        await AsyncStorage.setItem(COUNTRY_STORAGE_KEY, countryCodeToSelect)
      }
    }
  } catch (err) {
    console.error("Failed to load regions:", err)
    setError("Failed to load regions. Please try again.")
  } finally {
    setLoading(false)
  }
}

// Load regions on mount
useEffect(() => {
  loadRegions()
}, [])

const setSelectedRegion = async (region: HttpTypes.StoreRegion, countryCode: string) => {
  setSelectedRegionState(region)
  setSelectedCountryCode(countryCode)
  await AsyncStorage.setItem(REGION_STORAGE_KEY, region.id)
  await AsyncStorage.setItem(COUNTRY_STORAGE_KEY, countryCode)
}

return (
  <RegionContext.Provider
    value={{
      regions,
      selectedRegion,
      selectedCountryCode,
      setSelectedRegion,
      loading,
      error,
    }}
  >
    {children}
  </RegionContext.Provider>
)

export function useRegion() {
  const context = useContext(RegionContext)
  if (!context) {
    throw new Error("useRegion must be used within a RegionProvider")
  }
  return context
}

import { Colors } from "@/constants/theme"
import { useRegion } from "@/context/region-context"
import { useColorScheme } from "@/hooks/use-color-scheme"
import type { HttpTypes } from "@medusajs/types"
import React, { useMemo } from "react"
import { ScrollView, StyleSheet, Text, TouchableOpacity, View } from "react-native"

interface RegionSelectorProps {
  onRegionChange?: () => void;
}

interface CountryWithRegion {
  countryCode: string;
  countryName: string;
  region: HttpTypes.StoreRegion;
  currencyCode: string;
}

export function RegionSelector({ onRegionChange }: RegionSelectorProps) {
  const { 
    regions, 
    selectedRegion, 
    selectedCountryCode, 
    setSelectedRegion,
  } = useRegion()
  const colorScheme = useColorScheme()
  const colors = Colors[colorScheme ?? "light"]

  // Flatten countries from all regions
  const countries = useMemo(() => {
    const countryList: CountryWithRegion[] = []
    
    regions.forEach((region) => {
      if (region.countries) {
        region.countries.forEach((country) => {
          countryList.push({
            countryCode: country.iso_2 || country.id,
            countryName: country.display_name || country.name || country.iso_2 || country.id,
            region: region,
            currencyCode: region.currency_code || "",
          })
        })
      }
    })
    
    // Sort alphabetically by country name
    return countryList.sort((a, b) => a.countryName.localeCompare(b.countryName))
  }, [regions])

  // TODO handle country selection
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 16,
  },
  title: {
    fontSize: 20,
    fontWeight: "700",
    marginBottom: 20,
  },
  countryItem: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between",
    padding: 16,
    borderRadius: 8,
    borderWidth: 1,
    marginBottom: 8,
  },
  countryInfo: {
    flex: 1,
  },
  countryName: {
    fontSize: 16,
    marginBottom: 4,
  },
  currencyCode: {
    fontSize: 12,
  },
  emptyText: {
    fontSize: 14,
    textAlign: "center",
    marginTop: 20,
  },
})

const handleSelectCountry = async (countryWithRegion: CountryWithRegion) => {
  setSelectedRegion(countryWithRegion.region, countryWithRegion.countryCode)
  onRegionChange?.()
}

const isCountrySelected = (countryWithRegion: CountryWithRegion) => {
  return selectedRegion?.id === countryWithRegion.region.id && 
          selectedCountryCode === countryWithRegion.countryCode
}

return (
  <ScrollView style={styles.container}>
    <Text style={[styles.title, { color: colors.text }]}>Select Country</Text>
    {countries.length === 0 ? (
      <Text style={[styles.emptyText, { color: colors.icon }]}>
        No countries available
      </Text>
    ) : (
      countries.map((country) => {
        const isSelected = isCountrySelected(country)
        
        return (
          <TouchableOpacity
            key={`${country.region.id}-${country.countryCode}`}
            style={[
              styles.countryItem,
              {
                backgroundColor: isSelected ? colors.tint + "20" : "transparent",
                borderColor: colors.icon + "30",
              },
            ]}
            onPress={() => handleSelectCountry(country)}
          >
            <View style={styles.countryInfo}>
              <Text
                style={[
                  styles.countryName,
                  {
                    color: isSelected ? colors.tint : colors.text,
                    fontWeight: isSelected ? "600" : "400",
                  },
                ]}
              >
                {country.countryName}
              </Text>
              <Text style={[styles.currencyCode, { color: colors.icon }]}>
                {country.currencyCode.toUpperCase()}
              </Text>
            </View>
            {isSelected && (
              <Text style={{ color: colors.tint, fontSize: 18 }}>✓</Text>
            )}
          </TouchableOpacity>
        )
      })
    )}
  </ScrollView>
)

import { DrawerContentComponentProps, DrawerContentScrollView } from "@react-navigation/drawer"
import React from "react"
import { StyleSheet, View } from "react-native"
import { RegionSelector } from "./region-selector"

export function DrawerContent(props: DrawerContentComponentProps) {
  return (
    <DrawerContentScrollView {...props}>
      <View style={styles.container}>
        <RegionSelector onRegionChange={() => props.navigation.closeDrawer()} />
      </View>
    </DrawerContentScrollView>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
})

import { Drawer } from "expo-router/drawer"

import { DrawerContent } from "@/components/drawer-content"

export default function DrawerLayout() {
  return (
    <Drawer
      drawerContent={(props) => <DrawerContent {...props} />}
      screenOptions={{
        headerShown: false,
        drawerPosition: "left",
      }}
    >
    </Drawer>
  )
}

import { useColorScheme } from "@/hooks/use-color-scheme"
import { DarkTheme, DefaultTheme, ThemeProvider } from "@react-navigation/native"
import { Stack } from "expo-router"
import { StatusBar } from "expo-status-bar"
import { GestureHandlerRootView } from "react-native-gesture-handler"
import "react-native-reanimated"
import { RegionProvider } from "@/context/region-context"

export default function RootLayout() {
  const colorScheme = useColorScheme()

  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <ThemeProvider value={colorScheme === "dark" ? DarkTheme : DefaultTheme}>
        <RegionProvider>
          <Stack screenOptions={{ headerShown: false }}>
            <Stack.Screen name="(drawer)" options={{ headerShown: false }} />
          </Stack>
          <StatusBar style="auto" />
        </RegionProvider>
      </ThemeProvider>
    </GestureHandlerRootView>
  )
}

import { sdk } from "@/lib/sdk"
import { FetchError } from "@medusajs/js-sdk"
import type { HttpTypes } from "@medusajs/types"
import AsyncStorage from "@react-native-async-storage/async-storage"
import React, { createContext, ReactNode, useCallback, useContext, useEffect, useState } from "react"
import { useRegion } from "./region-context"

interface CartContextType {
  cart: HttpTypes.StoreCart | null;
  addToCart: (variantId: string, quantity: number) => Promise<void>;
  updateItemQuantity: (itemId: string, quantity: number) => Promise<void>;
  removeItem: (itemId: string) => Promise<void>;
  refreshCart: () => Promise<void>;
  clearCart: () => Promise<void>;
  loading: boolean;
  error: string | null;
}

const CartContext = createContext<CartContextType | undefined>(undefined)

const CART_STORAGE_KEY = "cart_id"

export function CartProvider({ children }: { children: ReactNode }) {
  const [cart, setCart] = useState<HttpTypes.StoreCart | null>(null)
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState<string | null>(null)
  const { selectedRegion } = useRegion()

  // TODO load cart
}

// TODO add useCart hook

const loadCart = useCallback(async () => {
  if (!selectedRegion) {return null}

  try {
    setLoading(true)
    setError(null)

    const savedCartId = await AsyncStorage.getItem(CART_STORAGE_KEY)

    if (savedCartId) {
      try {
        const { cart: fetchedCart } = await sdk.store.cart.retrieve(savedCartId, {
          fields: "+items.*",
        })
        
        setCart(fetchedCart)
        return fetchedCart
      } catch {
        // Cart not found or invalid, remove from storage
        await AsyncStorage.removeItem(CART_STORAGE_KEY)
      }
    }

    // Create new cart for current region
    const { cart: newCart } = await sdk.store.cart.create({
      region_id: selectedRegion.id,
    }, {
      fields: "+items.*",
    })
    setCart(newCart)
    await AsyncStorage.setItem(CART_STORAGE_KEY, newCart.id)
    return newCart
  } catch (err) {
    setError(`Failed to load cart: ${err instanceof FetchError ? err.message : String(err)}`)
    return null
  } finally {
    setLoading(false)
  }
}, [selectedRegion])

// Load cart on mount
useEffect(() => {
  loadCart()
}, [loadCart])

// TODO handle region update

useEffect(() => {
  const updateCartRegion = async () => {
    if (!cart || !selectedRegion || cart.region_id === selectedRegion.id) {
      return
    }

    try {
      setLoading(true)
      const { cart: updatedCart } = await sdk.store.cart.update(cart.id, {
        region_id: selectedRegion.id,
      }, {
        fields: "+items.*",
      })
      setCart(updatedCart)
    } catch (err) {
      setError(`Failed to update cart region: ${err instanceof FetchError ? err.message : String(err)}`)
    } finally {
      setLoading(false)
    }
  }

  updateCartRegion()
}, [selectedRegion])

// TODO implement cart operations

const addToCart = async (variantId: string, quantity: number) => {
  let currentCart = cart
  
  if (!currentCart) {
    currentCart = await loadCart()
    if (!currentCart) {throw new Error("Could not create cart")}
  }

  try {
    setLoading(true)
    setError(null)

    const { cart: updatedCart } = await sdk.store.cart.createLineItem(currentCart.id, {
      variant_id: variantId,
      quantity,
    }, {
      fields: "+items.*",
    })
    setCart(updatedCart)
  } catch (err) {
    setError(`Failed to add item to cart: ${err instanceof FetchError ? err.message : String(err)}`)
    throw err
  } finally {
    setLoading(false)
  }
}

const updateItemQuantity = async (itemId: string, quantity: number) => {
  if (!cart) {return}

  try {
    setLoading(true)
    setError(null)

    const { cart: updatedCart } = await sdk.store.cart.updateLineItem(
      cart.id,
      itemId,
      { quantity },
      {
        fields: "+items.*",
      }
    )
    setCart(updatedCart)
  } catch (err) {
    setError(`Failed to update quantity: ${err instanceof FetchError ? err.message : String(err)}`)
    throw err
  } finally {
    setLoading(false)
  }
}

const removeItem = async (itemId: string) => {
  if (!cart) {return}

  try {
    setLoading(true)
    setError(null)

    const { parent: updatedCart } = await sdk.store.cart.deleteLineItem(cart.id, itemId, {
      fields: "+items.*",
    })
    setCart(updatedCart!)
  } catch (err) {
    setError(`Failed to remove item: ${err instanceof FetchError ? err.message : String(err)}`)
    throw err
  } finally {
    setLoading(false)
  }
}

const refreshCart = async () => {
  if (!cart) {return}

  try {
    const { cart: updatedCart } = await sdk.store.cart.retrieve(cart.id, {
      fields: "+items.*",
    })
    setCart(updatedCart)
  } catch (err) {
    setError(`Failed to refresh cart: ${err instanceof FetchError ? err.message : String(err)}`)
  }
}

const clearCart = async () => {
  setCart(null)
  await AsyncStorage.removeItem(CART_STORAGE_KEY)
  // Create a new cart
  if (selectedRegion) {
    const { cart: newCart } = await sdk.store.cart.create({
      region_id: selectedRegion.id,
    }, {
      fields: "+items.*",
    })
    setCart(newCart)
    await AsyncStorage.setItem(CART_STORAGE_KEY, newCart.id)
  }
}

return (
  <CartContext.Provider
    value={{
      cart,
      addToCart,
      updateItemQuantity,
      removeItem,
      refreshCart,
      clearCart,
      loading,
      error,
    }}
  >
    {children}
  </CartContext.Provider>
)

export function useCart() {
  const context = useContext(CartContext)
  if (!context) {
    throw new Error("useCart must be used within a CartProvider")
  }
  return context
}

import { CartProvider } from "@/context/cart-context"

return (
  <GestureHandlerRootView style={{ flex: 1 }}>
    <ThemeProvider value={colorScheme === "dark" ? DarkTheme : DefaultTheme}>
      <RegionProvider>
        <CartProvider>
          <Stack screenOptions={{ headerShown: false }}>
            <Stack.Screen name="(drawer)" options={{ headerShown: false }} />
          </Stack>
          <StatusBar style="auto" />
        </CartProvider>
      </RegionProvider>
    </ThemeProvider>
  </GestureHandlerRootView>
)

/**
 * Format a price amount with currency code
 * Note: Medusa stores prices in major units (e.g., dollars, euros)
 * so no conversion is needed
 */
export function formatPrice(
  amount: number | undefined,
  currencyCode: string | undefined
): string {
  if (amount === undefined || !currencyCode) {
    return "N/A"
  }

  return new Intl.NumberFormat("en-US", {
    style: "currency",
    currency: currencyCode.toUpperCase(),
  }).format(amount)
}

import { Colors } from "@/constants/theme"
import { useColorScheme } from "@/hooks/use-color-scheme"
import React from "react"
import { ActivityIndicator, StyleSheet, Text, View } from "react-native"

interface LoadingProps {
  message?: string;
}

export function Loading({ message }: LoadingProps) {
  const colorScheme = useColorScheme()
  const colors = Colors[colorScheme ?? "light"]

  return (
    <View style={styles.container}>
      <ActivityIndicator size="large" color={colors.tint} />
      {message && (
        <Text style={[styles.message, { color: colors.text }]}>{message}</Text>
      )}
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    padding: 20,
  },
  message: {
    marginTop: 12,
    fontSize: 16,
  },
})

import { Colors } from "@/constants/theme"
import { useRegion } from "@/context/region-context"
import { useColorScheme } from "@/hooks/use-color-scheme"
import { formatPrice } from "@/lib/format-price"
import type { HttpTypes } from "@medusajs/types"
import { Image } from "expo-image"
import { useRouter } from "expo-router"
import React from "react"
import { StyleSheet, Text, TouchableOpacity, View } from "react-native"

interface ProductCardProps {
  product: HttpTypes.StoreProduct;
}

export const ProductCard = React.memo(function ProductCard({ product }: ProductCardProps) {
  const router = useRouter()
  const colorScheme = useColorScheme()
  const colors = Colors[colorScheme ?? "light"]
  const { selectedRegion } = useRegion()

  const thumbnail = product.thumbnail || product.images?.[0]?.url
  const variant = product.variants?.[0]
  
  // Get price from calculated_price.calculated_amount
  const priceAmount = variant?.calculated_price?.calculated_amount || 0
  
  // Use selected region's currency code
  const currencyCode = selectedRegion?.currency_code

  return (
    <TouchableOpacity
      style={[styles.card, { backgroundColor: colors.background }]}
      onPress={() => router.push({
        pathname: `/(home)/product/${product.id}` as any,
        params: { title: product.title },
      })}
      activeOpacity={0.7}
    >
      <Image
        source={{ uri: thumbnail || "https://placehold.co/200" }}
        style={[styles.image, { backgroundColor: colors.imagePlaceholder }]}
        contentFit="cover"
      />
      <View style={styles.content}>
        <Text
          style={[styles.title, { color: colors.text }]}
          numberOfLines={2}
        >
          {product.title}
        </Text>
        <View style={styles.priceRow}>
          <Text style={[styles.price, { color: colors.tint }]}>
            {formatPrice(priceAmount, currencyCode)}
          </Text>
        </View>
      </View>
    </TouchableOpacity>
  )
})

const styles = StyleSheet.create({
  card: {
    flex: 1,
    margin: 8,
    overflow: "hidden",
    shadowColor: "#000",
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 4,
    elevation: 3,
  },
  image: {
    width: "100%",
    height: 180,
    borderRadius: 8,
  },
  content: {
    padding: 12,
  },
  title: {
    fontSize: 14,
    fontWeight: "600",
    marginBottom: 12,
  },
  priceRow: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between",
    gap: 8,
  },
  price: {
    fontSize: 14,
    fontWeight: "400",
    flex: 1,
  },
})

import { Loading } from "@/components/loading"
import { ProductCard } from "@/components/product-card"
import { Colors } from "@/constants/theme"
import { useRegion } from "@/context/region-context"
import { useColorScheme } from "@/hooks/use-color-scheme"
import { sdk } from "@/lib/sdk"
import type { HttpTypes } from "@medusajs/types"
import { Image } from "expo-image"
import React, { useCallback, useEffect, useState } from "react"
import { FlatList, RefreshControl, StyleSheet, Text, View } from "react-native"

export default function HomeScreen() {
  const colorScheme = useColorScheme()
  const colors = Colors[colorScheme ?? "light"]
  const { selectedRegion } = useRegion()
  
  const [products, setProducts] = useState<HttpTypes.StoreProduct[]>([])
  const [loading, setLoading] = useState(true)
  const [refreshing, setRefreshing] = useState(false)
  const [error, setError] = useState<string | null>(null)

  const fetchProducts = useCallback(async () => {
    try {
      setLoading(true)
      setError(null)
      
      const { products: fetchedProducts } = await sdk.store.product.list({
        region_id: selectedRegion?.id,
        fields: "*variants.calculated_price,+variants.inventory_quantity",
      })
      
      setProducts(fetchedProducts)
    } catch (err) {
      console.error("Failed to fetch products:", err)
      setError("Failed to load products. Please try again.")
    } finally {
      setLoading(false)
      setRefreshing(false)
    }
  }, [selectedRegion])

  useEffect(() => {
    if (selectedRegion) {
      fetchProducts()
    }
  }, [selectedRegion, fetchProducts])

  const onRefresh = () => {
    setRefreshing(true)
    fetchProducts()
  }

  // TODO add return statement
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  centerContainer: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    padding: 20,
  },
  header: {
    width: "100%",
  },
  banner: {
    width: "100%",
    height: 200,
  },
  sectionTitle: {
    fontSize: 24,
    fontWeight: "700",
    marginTop: 24,
    marginBottom: 16,
    paddingHorizontal: 16,
  },
  listContent: {
    paddingBottom: 20,
  },
  row: {
    justifyContent: "space-between",
    paddingHorizontal: 8,
  },
  errorText: {
    fontSize: 16,
    textAlign: "center",
  },
  emptyContainer: {
    padding: 40,
    alignItems: "center",
  },
  emptyText: {
    fontSize: 16,
  },
})

if (loading) {
  return <Loading message="Loading products..." />
}

if (error) {
  return (
    <View style={[styles.centerContainer, { backgroundColor: colors.background }]}>
      <Text style={[styles.errorText, { color: colors.text }]}>{error}</Text>
    </View>
  )
}

return (
  <View style={[styles.container, { backgroundColor: colors.background }]}>
    <FlatList
      data={products}
      keyExtractor={(item) => item.id}
      numColumns={2}
      columnWrapperStyle={styles.row}
      initialNumToRender={6}
      maxToRenderPerBatch={6}
      windowSize={5}
      removeClippedSubviews={true}
      ListHeaderComponent={
        <View style={styles.header}>
          <Image
            source={{ uri: "https://images.unsplash.com/photo-1600185365483-26d7a4cc7519?w=800" }}
            style={[styles.banner, { backgroundColor: colors.imagePlaceholder }]}
            contentFit="cover"
          />
          <Text style={[styles.sectionTitle, { color: colors.text }]}>
            Latest Products
          </Text>
        </View>
      }
      renderItem={({ item }) => <ProductCard product={item} />}
      contentContainerStyle={styles.listContent}
      refreshControl={
        <RefreshControl
          refreshing={refreshing}
          onRefresh={onRefresh}
          tintColor={colors.tint}
        />
      }
      ListEmptyComponent={
        <View style={styles.emptyContainer}>
          <Text style={[styles.emptyText, { color: colors.text }]}>
            No products available
          </Text>
        </View>
      }
    />
  </View>
)

import { useColorScheme } from "@/hooks/use-color-scheme"
import { DrawerActions } from "@react-navigation/native"
import { Stack, useNavigation } from "expo-router"
import React from "react"
import { TouchableOpacity } from "react-native"

import { IconSymbol } from "@/components/ui/icon-symbol"
import { Colors } from "@/constants/theme"

export default function HomeStackLayout() {
  const colorScheme = useColorScheme()
  const navigation = useNavigation()
  const colors = Colors[colorScheme ?? "light"]

  return (
    <Stack
      screenOptions={{
        headerShown: true,
      }}
    >
      <Stack.Screen 
        name="index"
        options={{
          title: "Medusa Store",
          headerLeft: () => (
            <TouchableOpacity
              onPress={() => navigation.dispatch(DrawerActions.openDrawer())}
              style={{ height: 36, width: 36, display: "flex", alignItems: "center", justifyContent: "center" }}
            >
              <IconSymbol size={28} name="line.3.horizontal" color={colors.icon} />
            </TouchableOpacity>
          ),
        }}
      />
    </Stack>
  )
}

import { useColorScheme } from "@/hooks/use-color-scheme"
import { Tabs } from "expo-router"
import React from "react"

import { HapticTab } from "@/components/haptic-tab"
import { IconSymbol } from "@/components/ui/icon-symbol"
import { Colors } from "@/constants/theme"

export default function TabLayout() {
  const colorScheme = useColorScheme()

  return (
    <Tabs
      screenOptions={{
        tabBarActiveTintColor: Colors[colorScheme ?? "light"].tint,
        headerShown: true,
        tabBarButton: HapticTab,
      }}>
      <Tabs.Screen
        name="index"
        options={{
          href: null,
        }}
      />
      <Tabs.Screen
        name="(home)"
        options={{
          title: "Medusa Store",
          tabBarIcon: ({ color }) => <IconSymbol size={28} name="house.fill" color={color} />,
          headerShown: false, // Let the home stack manage its own headers
        }}
      />
    </Tabs>
  )
}

import { Redirect } from "expo-router"
import React from "react"

const MainScreen = () => {
  return <Redirect href="/(drawer)/(tabs)/(home)" />
}

export default MainScreen

return (
  <Drawer
    drawerContent={(props) => <DrawerContent {...props} />}
    screenOptions={{
      headerShown: false,
      drawerPosition: "left",
    }}
  >
    <Drawer.Screen
      name="(tabs)"
      options={{
        drawerLabel: "Home",
        title: "Shop",
      }}
    />
  </Drawer>
)

npm run dev

npm run start

import { Colors } from "@/constants/theme"
import { useColorScheme } from "@/hooks/use-color-scheme"
import React from "react"
import {
  ActivityIndicator,
  StyleSheet,
  Text,
  TouchableOpacity,
  TouchableOpacityProps,
} from "react-native"

interface ButtonProps extends TouchableOpacityProps {
  title: string;
  variant?: "primary" | "secondary";
  loading?: boolean;
}

export function Button({
  title,
  variant = "primary",
  loading = false,
  disabled,
  style,
  ...props
}: ButtonProps) {
  const colorScheme = useColorScheme()
  const colors = Colors[colorScheme ?? "light"]

  const isPrimary = variant === "primary"
  const isDisabled = disabled || loading
  
  // Primary button: white background with dark text in dark mode, tint background with white text in light mode
  const primaryBgColor = colorScheme === "dark" ? "#fff" : colors.tint
  const primaryTextColor = colorScheme === "dark" ? "#000" : "#fff"

  return (
    <TouchableOpacity
      style={[
        styles.button,
        isPrimary ? { backgroundColor: primaryBgColor } : styles.secondaryButton,
        isDisabled && styles.disabled,
        style,
      ]}
      disabled={isDisabled}
      {...props}
    >
      {loading ? (
        <ActivityIndicator color={isPrimary ? primaryTextColor : colors.tint} />
      ) : (
        <Text
          style={[
            styles.text,
            isPrimary ? { color: primaryTextColor } : { color: colors.tint },
          ]}
        >
          {title}
        </Text>
      )}
    </TouchableOpacity>
  )
}

const styles = StyleSheet.create({
  button: {
    paddingVertical: 14,
    paddingHorizontal: 24,
    borderRadius: 8,
    alignItems: "center",
    justifyContent: "center",
    minHeight: 48,
  },
  secondaryButton: {
    backgroundColor: "transparent",
    borderWidth: 1,
    borderColor: "#ccc",
  },
  text: {
    fontSize: 16,
    fontWeight: "600",
  },
  disabled: {
    opacity: 0.5,
  },
})

import { Colors } from "@/constants/theme"
import { useColorScheme } from "@/hooks/use-color-scheme"
import { Image } from "expo-image"
import React, { useRef, useState } from "react"
import { Dimensions, FlatList, StyleSheet, View } from "react-native"

const { width: SCREEN_WIDTH } = Dimensions.get("window")

interface ProductImageSliderProps {
  images: string[];
}

export function ProductImageSlider({ images }: ProductImageSliderProps) {
  const colorScheme = useColorScheme()
  const colors = Colors[colorScheme ?? "light"]
  const [currentImageIndex, setCurrentImageIndex] = useState(0)
  const imageListRef = useRef<FlatList>(null)

  const onViewableItemsChanged = useRef(({ viewableItems }: any) => {
    if (viewableItems.length > 0) {
      setCurrentImageIndex(viewableItems[0].index || 0)
    }
  }).current

  const viewabilityConfig = useRef({
    itemVisiblePercentThreshold: 50,
  }).current

  const renderImageItem = ({ item }: { item: string }) => (
    <View style={styles.imageSlide}>
      <Image
        source={{ uri: item }}
        style={[styles.image, { backgroundColor: colors.imagePlaceholder }]}
        contentFit="cover"
      />
    </View>
  )

  if (images.length === 0) {
    return null
  }

  return (
    <View style={styles.container}>
      <FlatList
        ref={imageListRef}
        data={images}
        renderItem={renderImageItem}
        keyExtractor={(item, index) => `image-${index}`}
        horizontal
        pagingEnabled
        showsHorizontalScrollIndicator={false}
        onViewableItemsChanged={onViewableItemsChanged}
        viewabilityConfig={viewabilityConfig}
      />
      {images.length > 1 && (
        <View style={styles.pagination}>
          {images.map((_, index) => (
            <View
              key={index}
              style={[
                styles.paginationDot,
                {
                  backgroundColor: currentImageIndex === index 
                    ? colors.tint 
                    : colors.icon + "40",
                },
              ]}
            />
          ))}
        </View>
      )}
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    position: "relative",
  },
  imageSlide: {
    width: SCREEN_WIDTH,
  },
  image: {
    width: SCREEN_WIDTH,
    height: 400,
  },
  pagination: {
    position: "absolute",
    bottom: 16,
    left: 0,
    right: 0,
    flexDirection: "row",
    justifyContent: "center",
    alignItems: "center",
    gap: 6,
  },
  paginationDot: {
    width: 8,
    height: 8,
    borderRadius: 4,
  },
})

import { Colors } from "@/constants/theme"
import { useColorScheme } from "@/hooks/use-color-scheme"
import React, { useEffect, useRef } from "react"
import { Animated, StyleSheet, View } from "react-native"

export function ProductSkeleton() {
  const colorScheme = useColorScheme()
  const colors = Colors[colorScheme ?? "light"]
  const shimmerAnim = useRef(new Animated.Value(0)).current

  useEffect(() => {
    Animated.loop(
      Animated.sequence([
        Animated.timing(shimmerAnim, {
          toValue: 1,
          duration: 1000,
          useNativeDriver: true,
        }),
        Animated.timing(shimmerAnim, {
          toValue: 0,
          duration: 1000,
          useNativeDriver: true,
        }),
      ])
    ).start()
  }, [shimmerAnim])

  const opacity = shimmerAnim.interpolate({
    inputRange: [0, 1],
    outputRange: [0.3, 0.7],
  })

  const skeletonColor = colorScheme === "dark" ? "#333" : "#e0e0e0"

  return (
    <View style={[styles.container, { backgroundColor: colors.background }]}>
      <View style={styles.imageContainer}>
        <Animated.View
          style={[
            styles.imageSkeleton,
            { backgroundColor: skeletonColor, opacity },
          ]}
        />
        <View style={styles.pagination}>
          {[1, 2, 3].map((i) => (
            <Animated.View
              key={i}
              style={[
                styles.paginationDot,
                { backgroundColor: skeletonColor, opacity },
              ]}
            />
          ))}
        </View>
      </View>

      <View style={styles.content}>
        <Animated.View
          style={[
            styles.titleSkeleton,
            { backgroundColor: skeletonColor, opacity },
          ]}
        />
        <View style={styles.descriptionContainer}>
          <Animated.View
            style={[
              styles.descriptionLine,
              { backgroundColor: skeletonColor, opacity, width: "100%" },
            ]}
          />
          <Animated.View
            style={[
              styles.descriptionLine,
              { backgroundColor: skeletonColor, opacity, width: "90%" },
            ]}
          />
          <Animated.View
            style={[
              styles.descriptionLine,
              { backgroundColor: skeletonColor, opacity, width: "70%" },
            ]}
          />
        </View>
        <Animated.View
          style={[
            styles.priceSkeleton,
            { backgroundColor: skeletonColor, opacity },
          ]}
        />
        <View style={styles.optionsContainer}>
          <Animated.View
            style={[
              styles.optionTitleSkeleton,
              { backgroundColor: skeletonColor, opacity },
            ]}
          />
          <View style={styles.optionButtons}>
            {[1, 2, 3].map((i) => (
              <Animated.View
                key={i}
                style={[
                  styles.optionButtonSkeleton,
                  { backgroundColor: skeletonColor, opacity },
                ]}
              />
            ))}
          </View>
        </View>
        <View style={styles.quantityContainer}>
          <Animated.View
            style={[
              styles.quantityLabelSkeleton,
              { backgroundColor: skeletonColor, opacity },
            ]}
          />
          <View style={styles.quantityControls}>
            <Animated.View
              style={[
                styles.quantityButtonSkeleton,
                { backgroundColor: skeletonColor, opacity },
              ]}
            />
            <Animated.View
              style={[
                styles.quantityValueSkeleton,
                { backgroundColor: skeletonColor, opacity },
              ]}
            />
            <Animated.View
              style={[
                styles.quantityButtonSkeleton,
                { backgroundColor: skeletonColor, opacity },
              ]}
            />
          </View>
        </View>
        <Animated.View
          style={[
            styles.buttonSkeleton,
            { backgroundColor: skeletonColor, opacity },
          ]}
        />
      </View>
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  imageContainer: {
    position: "relative",
  },
  imageSkeleton: {
    width: "100%",
    height: 400,
  },
  pagination: {
    position: "absolute",
    bottom: 16,
    left: 0,
    right: 0,
    flexDirection: "row",
    justifyContent: "center",
    alignItems: "center",
    gap: 6,
  },
  paginationDot: {
    width: 8,
    height: 8,
    borderRadius: 4,
  },
  content: {
    padding: 20,
  },
  titleSkeleton: {
    height: 32,
    width: "70%",
    borderRadius: 4,
    marginBottom: 12,
  },
  descriptionContainer: {
    marginBottom: 20,
  },
  descriptionLine: {
    height: 16,
    borderRadius: 4,
    marginBottom: 8,
  },
  priceSkeleton: {
    height: 36,
    width: "40%",
    borderRadius: 4,
    marginBottom: 24,
  },
  optionsContainer: {
    marginBottom: 24,
  },
  optionTitleSkeleton: {
    height: 20,
    width: "30%",
    borderRadius: 4,
    marginBottom: 12,
  },
  optionButtons: {
    flexDirection: "row",
    gap: 8,
  },
  optionButtonSkeleton: {
    height: 40,
    width: 80,
    borderRadius: 8,
  },
  quantityContainer: {
    marginBottom: 32,
  },
  quantityLabelSkeleton: {
    height: 20,
    width: "25%",
    borderRadius: 4,
    marginBottom: 12,
  },
  quantityControls: {
    flexDirection: "row",
    alignItems: "center",
  },
  quantityButtonSkeleton: {
    width: 36,
    height: 36,
    borderRadius: 18,
  },
  quantityValueSkeleton: {
    width: 30,
    height: 20,
    borderRadius: 4,
    marginHorizontal: 20,
  },
  buttonSkeleton: {
    height: 48,
    borderRadius: 8,
    marginTop: 8,
  },
})

import { useColorScheme } from "@/hooks/use-color-scheme"
import React, { useCallback, useEffect, useRef } from "react"
import { Animated, StyleSheet, Text, View } from "react-native"

interface ToastProps {
  message: string;
  visible: boolean;
  onHide: () => void;
  duration?: number;
  type?: "success" | "error" | "info";
}

export function Toast({ 
  message, 
  visible, 
  onHide, 
  duration = 3000,
  type = "success", 
}: ToastProps) {
  const colorScheme = useColorScheme()
  const opacity = useRef(new Animated.Value(0)).current
  const translateY = useRef(new Animated.Value(50)).current

  const hideToast = useCallback(() => {
    Animated.parallel([
      Animated.timing(opacity, {
        toValue: 0,
        duration: 300,
        useNativeDriver: true,
      }),
      Animated.timing(translateY, {
        toValue: 50,
        duration: 300,
        useNativeDriver: true,
      }),
    ]).start(() => {
      onHide()
    })
  }, [opacity, translateY, onHide])

  useEffect(() => {
    if (visible) {
      // Fade in and slide up
      Animated.parallel([
        Animated.timing(opacity, {
          toValue: 1,
          duration: 300,
          useNativeDriver: true,
        }),
        Animated.timing(translateY, {
          toValue: 0,
          duration: 300,
          useNativeDriver: true,
        }),
      ]).start()

      // Auto hide after duration
      const timer = setTimeout(() => {
        hideToast()
      }, duration)

      return () => clearTimeout(timer)
    }
  }, [visible, duration, opacity, translateY, hideToast])

  if (!visible) {
    return null
  }

  // Use inverted colors for minimal design: white in dark mode, black in light mode
  const backgroundColor = colorScheme === "dark" ? "#fff" : "#000"
  const textColor = colorScheme === "dark" ? "#000" : "#fff"

  return (
    <Animated.View
      style={[
        styles.container,
        {
          opacity,
          transform: [{ translateY }],
        },
      ]}
    >
      <View style={[styles.toast, { backgroundColor }]}>
        <Text style={[styles.message, { color: textColor }]}>{message}</Text>
      </View>
    </Animated.View>
  )
}

const styles = StyleSheet.create({
  container: {
    position: "absolute",
    bottom: 100,
    left: 20,
    right: 20,
    alignItems: "center",
    zIndex: 1000,
  },
  toast: {
    paddingHorizontal: 20,
    paddingVertical: 14,
    borderRadius: 12,
    shadowColor: "#000",
    shadowOffset: { width: 0, height: 4 },
    shadowOpacity: 0.3,
    shadowRadius: 8,
    elevation: 8,
    minWidth: 200,
  },
  message: {
    fontSize: 15,
    fontWeight: "600",
    textAlign: "center",
  },
})

import type { HttpTypes } from "@medusajs/types"

/**
 * Check if a product variant is in stock
 * A variant is in stock if:
 * - manage_inventory is false (inventory tracking disabled), OR
 * - inventory_quantity is greater than 0
 */
export function isVariantInStock(
  variant: HttpTypes.StoreProductVariant | undefined | null
): boolean {
  if (!variant) {
    return false
  }

  return variant.manage_inventory === false || (variant.inventory_quantity || 0) > 0
}

import { ProductImageSlider } from "@/components/product-image-slider"
import { ProductSkeleton } from "@/components/product-skeleton"
import { Button } from "@/components/ui/button"
import { Toast } from "@/components/ui/toast"
import { Colors } from "@/constants/theme"
import { useCart } from "@/context/cart-context"
import { useRegion } from "@/context/region-context"
import { useColorScheme } from "@/hooks/use-color-scheme"
import { formatPrice } from "@/lib/format-price"
import { isVariantInStock } from "@/lib/inventory"
import { sdk } from "@/lib/sdk"
import type { HttpTypes } from "@medusajs/types"
import { useLocalSearchParams, useNavigation } from "expo-router"
import React, { useCallback, useEffect, useMemo, useState } from "react"
import { ScrollView, StyleSheet, Text, TouchableOpacity, View } from "react-native"

export default function ProductDetailsScreen() {
  const { id, title } = useLocalSearchParams<{ id: string; title?: string }>()
  const colorScheme = useColorScheme()
  const colors = Colors[colorScheme ?? "light"]
  const { addToCart } = useCart()
  const { selectedRegion } = useRegion()

  const [product, setProduct] = useState<HttpTypes.StoreProduct | null>(null)
  const [selectedOptions, setSelectedOptions] = useState<Record<string, string>>({})
  const [quantity, setQuantity] = useState(1)
  const [loading, setLoading] = useState(true)
  const [addingToCart, setAddingToCart] = useState(false)
  const [error, setError] = useState<string | null>(null)
  const [toastVisible, setToastVisible] = useState(false)
  const [toastMessage, setToastMessage] = useState("")
  const navigation = useNavigation()

  // TODO fetch product
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  centerContainer: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    padding: 20,
  },
  content: {
    padding: 20,
  },
  title: {
    fontSize: 28,
    fontWeight: "700",
    marginBottom: 12,
  },
  description: {
    fontSize: 16,
    lineHeight: 24,
    marginBottom: 20,
  },
  priceContainer: {
    marginBottom: 24,
  },
  price: {
    fontSize: 20,
    fontWeight: "700",
    marginBottom: 8,
  },
  stockBadge: {
    paddingHorizontal: 12,
    paddingVertical: 6,
    borderRadius: 6,
    alignSelf: "flex-start",
  },
  outOfStockText: {
    color: "#fff",
    fontSize: 13,
    fontWeight: "600",
    textTransform: "uppercase",
  },
  lowStockText: {
    color: "#fff",
    fontSize: 13,
    fontWeight: "600",
  },
  optionsSection: {
    marginBottom: 24,
  },
  optionGroup: {
    marginBottom: 20,
  },
  sectionTitle: {
    fontSize: 18,
    fontWeight: "600",
    marginBottom: 12,
  },
  optionValues: {
    flexDirection: "row",
    flexWrap: "wrap",
    gap: 8,
  },
  optionButton: {
    paddingVertical: 10,
    paddingHorizontal: 16,
    borderRadius: 8,
    borderWidth: 1,
  },
  optionText: {
    fontSize: 14,
  },
  quantitySection: {
    marginBottom: 32,
  },
  quantityControls: {
    flexDirection: "row",
    alignItems: "center",
  },
  quantityButton: {
    width: 36,
    height: 36,
    borderRadius: 18,
    borderWidth: 1,
    alignItems: "center",
    justifyContent: "center",
  },
  quantityButtonText: {
    fontSize: 18,
    fontWeight: "600",
  },
  quantity: {
    marginHorizontal: 20,
    fontSize: 18,
    fontWeight: "600",
    minWidth: 30,
    textAlign: "center",
  },
  addButton: {
    marginTop: 8,
  },
  errorText: {
    fontSize: 16,
    textAlign: "center",
  },
})

const fetchProduct = useCallback(async () => {
  try {
    setLoading(true)
    setError(null)

    const { product: fetchedProduct } = await sdk.store.product.retrieve(id, {
      fields: "*variants.calculated_price,+variants.inventory_quantity",
      region_id: selectedRegion?.id,
    })

    setProduct(fetchedProduct)
    
    // Initialize selected options with first variant's option values
    if (fetchedProduct.variants && fetchedProduct.variants.length > 0) {
      const firstVariant = fetchedProduct.variants[0]
      const initialOptions: Record<string, string> = {}
      firstVariant.options?.forEach((optionValue) => {
        if (optionValue.option_id && optionValue.value) {
          initialOptions[optionValue.option_id] = optionValue.value
        }
      })
      setSelectedOptions(initialOptions)
    }
  } catch (err) {
    console.error("Failed to fetch product:", err)
    setError("Failed to load product. Please try again.")
  } finally {
    setLoading(false)
  }
}, [id, selectedRegion])

useEffect(() => {
  if (id && selectedRegion) {
    fetchProduct()
  }
}, [id, selectedRegion, fetchProduct])

// Update screen title immediately if passed as param, or when product is loaded
useEffect(() => {
  const productTitle = title || product?.title
  if (productTitle) {
    navigation.setOptions({
      title: productTitle,
    })
  }
}, [title, product, navigation])

// TODO select variant based on selected options

// Compute selected variant based on selected options
const selectedVariant = useMemo(() => {
  if (
    !product?.variants ||
    !product.options ||
    Object.keys(selectedOptions).length !== product.options?.length
  ) {
    return
  }

  return product.variants.find((variant) =>
    variant.options?.every(
      (optionValue) => optionValue.value === selectedOptions[optionValue.option_id!]
    )
  )
}, [selectedOptions, product])

// Check if we should show options UI
// Hide if there's only one option with one value (or all options have only one value each)
const shouldShowOptions = useMemo(() => {
  if (!product?.options || product.options.length === 0) {
    return false
  }
  // Show options only if at least one option has more than one value
  return product.options.some((option) => (option.values?.length ?? 0) > 1)
}, [product])

// Get all images from product
const images = useMemo(() => {
  const productImages = product?.images?.map((img) => img.url).filter(Boolean) || []
  // If no images, use thumbnail or fallback
  if (productImages.length === 0 && product?.thumbnail) {
    return [product.thumbnail]
  }
  return productImages.length > 0 ? productImages : []
}, [product])

// TODO handle add to cart

const handleAddToCart = async () => {
  if (!selectedVariant) {
    setToastMessage(shouldShowOptions ? "Please select all options" : "Variant not available")
    setToastVisible(true)
    return
  }

  try {
    setAddingToCart(true)
    await addToCart(selectedVariant.id, quantity)
    setToastMessage("Product added to cart!")
    setToastVisible(true)
  } catch {
    setToastMessage("Failed to add product to cart")
    setToastVisible(true)
  } finally {
    setAddingToCart(false)
  }
}

// TODO render UI

if (loading) {
  return <ProductSkeleton />
}

if (error || !product) {
  return (
    <View style={[styles.centerContainer, { backgroundColor: colors.background }]}>
      <Text style={[styles.errorText, { color: colors.text }]}>
        {error || "Product not found"}
      </Text>
    </View>
  )
}

// Get price from calculated_price.calculated_amount
const priceAmount = selectedVariant?.calculated_price?.calculated_amount || 0

// Use selected region's currency code
const currencyCode = selectedRegion?.currency_code

// Check if selected variant is in stock
const isInStock = isVariantInStock(selectedVariant)

return (
  <ScrollView style={[styles.container, { backgroundColor: colors.background }]}>
    <ProductImageSlider images={images} />

    <View style={styles.content}>
      <Text style={[styles.title, { color: colors.text }]}>{product.title}</Text>
      
      {product.description && (
        <Text style={[styles.description, { color: colors.icon }]}>
          {product.description}
        </Text>
      )}

      <View style={styles.priceContainer}>
        <Text style={[styles.price, { color: colors.tint }]}>
          {formatPrice(priceAmount, currencyCode)}
        </Text>
        {!isInStock && (
          <View style={[styles.stockBadge, { backgroundColor: colors.error }]}>
            <Text style={styles.outOfStockText}>Out of Stock</Text>
          </View>
        )}
        {isInStock && selectedVariant?.inventory_quantity !== undefined && 
          selectedVariant.inventory_quantity! <= 10 && 
          selectedVariant.manage_inventory !== false && (
          <View style={[styles.stockBadge, { backgroundColor: colors.warning }]}>
            <Text style={styles.lowStockText}>
              Only {selectedVariant.inventory_quantity} left
            </Text>
          </View>
        )}
      </View>

      {shouldShowOptions && (
        <View style={styles.optionsSection}>
          {product.options?.map((option) => (
            <View key={option.id} style={styles.optionGroup}>
              <Text style={[styles.sectionTitle, { color: colors.text }]}>
                {option.title}
              </Text>
              <View style={styles.optionValues}>
                {option.values?.map((optionValue) => {
                  const isSelected = selectedOptions[option.id!] === optionValue.value
                  return (
                    <TouchableOpacity
                      key={optionValue.id}
                      style={[
                        styles.optionButton,
                        {
                          backgroundColor: isSelected
                            ? colors.tint + "20"
                            : "transparent",
                          borderColor: isSelected
                            ? colors.tint
                            : colors.icon + "30",
                        },
                      ]}
                      onPress={() => {
                        setSelectedOptions((prev) => ({
                          ...prev,
                          [option.id!]: optionValue.value!,
                        }))
                      }}
                    >
                      <Text
                        style={[
                          styles.optionText,
                          {
                            color: isSelected ? colors.tint : colors.text,
                            fontWeight: isSelected ? "600" : "400",
                          },
                        ]}
                      >
                        {optionValue.value}
                      </Text>
                    </TouchableOpacity>
                  )
                })}
              </View>
            </View>
          ))}
        </View>
      )}

      <View style={styles.quantitySection}>
        <Text style={[styles.sectionTitle, { color: colors.text }]}>Quantity</Text>
        <View style={styles.quantityControls}>
          <TouchableOpacity
            style={[styles.quantityButton, { borderColor: colors.icon }]}
            onPress={() => setQuantity(Math.max(1, quantity - 1))}
          >
            <Text style={[styles.quantityButtonText, { color: colors.text }]}>-</Text>
          </TouchableOpacity>
          <Text style={[styles.quantity, { color: colors.text }]}>{quantity}</Text>
          <TouchableOpacity
            style={[styles.quantityButton, { borderColor: colors.icon }]}
            onPress={() => setQuantity(quantity + 1)}
          >
            <Text style={[styles.quantityButtonText, { color: colors.text }]}>+</Text>
          </TouchableOpacity>
        </View>
      </View>

      <Button
        title={isInStock ? "Add to Cart" : "Out of Stock"}
        onPress={handleAddToCart}
        loading={addingToCart}
        disabled={!isInStock}
        style={styles.addButton}
      />
    </View>
    
    <Toast
      message={toastMessage}
      visible={toastVisible}
      onHide={() => setToastVisible(false)}
      type="success"
    />
  </ScrollView>
)

<Stack.Screen 
  name="product/[id]"
  options={{
    title: "Product Details",
    presentation: "card",
    headerBackButtonDisplayMode: "minimal",
  }}
/>

import { IconSymbol } from "@/components/ui/icon-symbol"
import { Colors } from "@/constants/theme"
import { useColorScheme } from "@/hooks/use-color-scheme"
import { formatPrice } from "@/lib/format-price"
import type { HttpTypes } from "@medusajs/types"
import { Image } from "expo-image"
import React from "react"
import { StyleSheet, Text, TouchableOpacity, View } from "react-native"

interface CartItemProps {
  item: HttpTypes.StoreCartLineItem;
  currencyCode?: string;
  onUpdateQuantity: (quantity: number) => void;
  onRemove: () => void;
}

export const CartItem = React.memo(function CartItem({ item, currencyCode, onUpdateQuantity, onRemove }: CartItemProps) {
  const colorScheme = useColorScheme()
  const colors = Colors[colorScheme ?? "light"]

  const thumbnail = item.thumbnail || item.variant?.product?.thumbnail
  const total = item.subtotal || 0

  return (
    <View style={[styles.container, { borderBottomColor: colors.icon + "30" }]}>
      <Image
        source={{ uri: thumbnail || "https://placehold.co/80" }}
        style={[styles.image, { backgroundColor: colors.imagePlaceholder }]}
        contentFit="cover"
      />
      <View style={styles.content}>
        <View style={styles.info}>
          <Text style={[styles.title, { color: colors.text }]} numberOfLines={2}>
            {item.product_title || item.title}
          </Text>
          {item.variant_title && (
            <Text style={[styles.variant, { color: colors.icon }]}>
              {item.variant_title}
            </Text>
          )}
          <Text style={[styles.price, { color: colors.text }]}>
            {formatPrice(total, currencyCode)}
          </Text>
        </View>
        <View style={styles.actions}>
          <View style={styles.quantityContainer}>
            <TouchableOpacity
              style={[styles.quantityButton, { borderColor: colors.icon }]}
              onPress={() => onUpdateQuantity(Math.max(1, item.quantity - 1))}
            >
              <Text style={[styles.quantityButtonText, { color: colors.text }]}>-</Text>
            </TouchableOpacity>
            <Text style={[styles.quantity, { color: colors.text }]}>
              {item.quantity}
            </Text>
            <TouchableOpacity
              style={[styles.quantityButton, { borderColor: colors.icon }]}
              onPress={() => onUpdateQuantity(item.quantity + 1)}
            >
              <Text style={[styles.quantityButtonText, { color: colors.text }]}>+</Text>
            </TouchableOpacity>
          </View>
          <TouchableOpacity onPress={onRemove} style={styles.removeButton}>
            <IconSymbol size={20} name="trash" color={colors.text} />
          </TouchableOpacity>
        </View>
      </View>
    </View>
  )
})

const styles = StyleSheet.create({
  container: {
    flexDirection: "row",
    padding: 16,
    borderBottomWidth: 1,
  },
  image: {
    width: 80,
    height: 80,
    borderRadius: 8,
  },
  content: {
    flex: 1,
    marginLeft: 12,
    justifyContent: "space-between",
  },
  info: {
    flex: 1,
  },
  title: {
    fontSize: 14,
    fontWeight: "600",
    marginBottom: 4,
  },
  variant: {
    fontSize: 12,
    marginBottom: 4,
  },
  price: {
    fontSize: 14,
    fontWeight: "700",
    marginTop: 4,
  },
  actions: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between",
    marginTop: 8,
  },
  quantityContainer: {
    flexDirection: "row",
    alignItems: "center",
  },
  quantityButton: {
    width: 28,
    height: 28,
    borderRadius: 14,
    borderWidth: 1,
    alignItems: "center",
    justifyContent: "center",
  },
  quantityButtonText: {
    fontSize: 16,
    fontWeight: "600",
  },
  quantity: {
    marginHorizontal: 12,
    fontSize: 14,
    fontWeight: "600",
    minWidth: 20,
    textAlign: "center",
  },
  removeButton: {
    padding: 4,
  },
})

import { CartItem } from "@/components/cart-item"
import { Loading } from "@/components/loading"
import { Button } from "@/components/ui/button"
import { Colors } from "@/constants/theme"
import { useCart } from "@/context/cart-context"
import { useColorScheme } from "@/hooks/use-color-scheme"
import { formatPrice } from "@/lib/format-price"
import { useRouter } from "expo-router"
import React from "react"
import { FlatList, StyleSheet, Text, View } from "react-native"

export default function CartScreen() {
  const colorScheme = useColorScheme()
  const colors = Colors[colorScheme ?? "light"]
  const router = useRouter()
  const { cart, updateItemQuantity, removeItem, loading } = useCart()

  const isEmpty = !cart?.items || cart.items.length === 0

  if (loading && !cart) {
    return <Loading message="Loading cart..." />
  }

  if (isEmpty) {
    return (
      <View style={[styles.emptyContainer, { backgroundColor: colors.background }]}>
        <Text style={[styles.emptyTitle, { color: colors.text }]}>Your cart is empty</Text>
        <Text style={[styles.emptyText, { color: colors.icon }]}>
          Add some products to get started
        </Text>
        <Button
          title="Browse Products"
          onPress={() => router.push("/")}
          style={styles.browseButton}
        />
      </View>
    )
  }

  return (
    <View style={[styles.container, { backgroundColor: colors.background }]}>
      <FlatList
        data={cart.items}
        keyExtractor={(item) => item.id}
        renderItem={({ item }) => (
          <CartItem
            item={item}
            currencyCode={cart.currency_code}
            onUpdateQuantity={(quantity) => updateItemQuantity(item.id, quantity)}
            onRemove={() => removeItem(item.id)}
          />
        )}
        contentContainerStyle={styles.listContent}
      />
      
      <View style={[styles.footer, { backgroundColor: colors.background, borderTopColor: colors.icon + "30" }]}>
        <View style={styles.totals}>
          <View style={styles.totalRow}>
            <Text style={[styles.totalLabel, { color: colors.text }]}>Subtotal</Text>
            <Text style={[styles.totalValue, { color: colors.text }]}>
              {formatPrice(cart.item_subtotal, cart.currency_code)}
            </Text>
          </View>
          {cart.tax_total !== undefined && cart.tax_total > 0 && (
            <View style={styles.totalRow}>
              <Text style={[styles.totalLabel, { color: colors.text }]}>Tax</Text>
              <Text style={[styles.totalValue, { color: colors.text }]}>
                {formatPrice(cart.tax_total, cart.currency_code)}
              </Text>
            </View>
          )}
          {cart.shipping_total !== undefined && cart.shipping_total > 0 && (
            <View style={styles.totalRow}>
              <Text style={[styles.totalLabel, { color: colors.text }]}>Shipping</Text>
              <Text style={[styles.totalValue, { color: colors.text }]}>
                {formatPrice(cart.shipping_total, cart.currency_code)}
              </Text>
            </View>
          )}
          <View style={[styles.totalRow, styles.grandTotalRow, { borderTopColor: colors.border }]}>
            <Text style={[styles.grandTotalLabel, { color: colors.text }]}>Total</Text>
            <Text style={[styles.grandTotalValue, { color: colors.tint }]}>
              {formatPrice(cart.total, cart.currency_code)}
            </Text>
          </View>
        </View>
        <Button
          title="Proceed to Checkout"
          onPress={() =>  {
            // TODO navigate to checkout screen
          }}
          loading={loading}
        />
      </View>
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  emptyContainer: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    padding: 40,
  },
  emptyTitle: {
    fontSize: 24,
    fontWeight: "700",
    marginBottom: 12,
  },
  emptyText: {
    fontSize: 16,
    textAlign: "center",
    marginBottom: 32,
  },
  browseButton: {
    minWidth: 200,
  },
  listContent: {
    paddingBottom: 20,
  },
  footer: {
    padding: 16,
    borderTopWidth: 1,
  },
  totals: {
    marginBottom: 20,
  },
  totalRow: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
    marginBottom: 12,
  },
  totalLabel: {
    fontSize: 14,
  },
  totalValue: {
    fontSize: 14,
    fontWeight: "500",
  },
  grandTotalRow: {
    marginTop: 8,
    paddingTop: 12,
    borderTopWidth: 1,
  },
  grandTotalLabel: {
    fontSize: 18,
    fontWeight: "700",
  },
  grandTotalValue: {
    fontSize: 20,
    fontWeight: "700",
  },
})

import { useColorScheme } from "@/hooks/use-color-scheme"
import { DrawerActions } from "@react-navigation/native"
import { Stack, useNavigation } from "expo-router"
import React from "react"
import { TouchableOpacity } from "react-native"

import { IconSymbol } from "@/components/ui/icon-symbol"
import { Colors } from "@/constants/theme"

export default function CartStackLayout() {
  const colorScheme = useColorScheme()
  const navigation = useNavigation()
  const colors = Colors[colorScheme ?? "light"]

  return (
    <Stack
      screenOptions={{
        headerShown: true,
      }}
    >
      <Stack.Screen 
        name="index"
        options={{
          title: "Cart",
          headerLeft: () => (
            <TouchableOpacity
              onPress={() => navigation.dispatch(DrawerActions.openDrawer())}
              style={{ height: 36, width: 36, display: "flex", alignItems: "center", justifyContent: "center" }}
            >
              <IconSymbol size={28} name="line.3.horizontal" color={colors.icon} />
            </TouchableOpacity>
          ),
        }}
      />
    </Stack>
  )
}

import { useCart } from "@/context/cart-context"

const { cart } = useCart()

const itemCount = cart?.items?.length || 0

<Tabs.Screen
  name="(cart)"
  options={{
    title: "Cart",
    tabBarIcon: ({ color }) => <IconSymbol size={28} name="cart.fill" color={color} />,
    tabBarBadge: itemCount > 0 ? itemCount : undefined,
    tabBarBadgeStyle: {
      backgroundColor: Colors[colorScheme ?? "light"].tint,
    },
    headerShown: false, // Let the cart stack manage its own headers
  }}
/>

import { IconSymbol } from "@/components/ui/icon-symbol"
import { Colors } from "@/constants/theme"
import { useColorScheme } from "@/hooks/use-color-scheme"
import type { HttpTypes } from "@medusajs/types"
import { Picker } from "@react-native-picker/picker"
import React, { useRef, useState } from "react"
import {
  Modal,
  Platform,
  StyleSheet,
  Text,
  TextInput,
  TouchableOpacity,
  View,
} from "react-native"

interface AddressFormProps {
  firstName: string;
  lastName: string;
  address: string;
  city: string;
  postalCode: string;
  countryCode: string;
  phone: string;
  countries: HttpTypes.StoreRegionCountry[];
  onFirstNameChange: (value: string) => void;
  onLastNameChange: (value: string) => void;
  onAddressChange: (value: string) => void;
  onCityChange: (value: string) => void;
  onPostalCodeChange: (value: string) => void;
  onCountryCodeChange: (value: string) => void;
  onPhoneChange: (value: string) => void;
}

export function AddressForm({
  firstName,
  lastName,
  address,
  city,
  postalCode,
  countryCode,
  phone,
  countries,
  onFirstNameChange,
  onLastNameChange,
  onAddressChange,
  onCityChange,
  onPostalCodeChange,
  onCountryCodeChange,
  onPhoneChange,
}: AddressFormProps) {
  const colorScheme = useColorScheme()
  const colors = Colors[colorScheme ?? "light"]
  const [showPicker, setShowPicker] = useState(false)
  const [tempCountryCode, setTempCountryCode] = useState(countryCode)

  // Create refs for each input field
  const lastNameRef = useRef<TextInput>(null)
  const addressRef = useRef<TextInput>(null)
  const cityRef = useRef<TextInput>(null)
  const postalCodeRef = useRef<TextInput>(null)
  const phoneRef = useRef<TextInput>(null)

  const selectedCountry = countries.find(
    (c) => (c.iso_2 || c.id) === countryCode
  )
  const selectedCountryName = selectedCountry
    ? selectedCountry.display_name || selectedCountry.name || selectedCountry.iso_2 || selectedCountry.id
    : "Select Country"

  const handleDone = () => {
    onCountryCodeChange(tempCountryCode)
    setShowPicker(false)
    // Focus phone field after country selection
    setTimeout(() => phoneRef.current?.focus(), 100)
  }

  const handleCancel = () => {
    setTempCountryCode(countryCode)
    setShowPicker(false)
  }

  return (
    <>
      <View style={styles.row}>
        <TextInput
          style={[
            styles.input,
            styles.halfInput,
            { color: colors.text, borderColor: colors.icon + "30" },
          ]}
          placeholder="First Name"
          placeholderTextColor={colors.icon}
          value={firstName}
          onChangeText={onFirstNameChange}
          returnKeyType="next"
          onSubmitEditing={() => lastNameRef.current?.focus()}
        />
        <TextInput
          ref={lastNameRef}
          style={[
            styles.input,
            styles.halfInput,
            { color: colors.text, borderColor: colors.icon + "30" },
          ]}
          placeholder="Last Name"
          placeholderTextColor={colors.icon}
          value={lastName}
          onChangeText={onLastNameChange}
          returnKeyType="next"
          onSubmitEditing={() => addressRef.current?.focus()}
        />
      </View>

      <TextInput
        ref={addressRef}
        style={[styles.input, { color: colors.text, borderColor: colors.icon + "30" }]}
        placeholder="Address"
        placeholderTextColor={colors.icon}
        value={address}
        onChangeText={onAddressChange}
        returnKeyType="next"
        onSubmitEditing={() => cityRef.current?.focus()}
      />

      <View style={styles.row}>
        <TextInput
          ref={cityRef}
          style={[
            styles.input,
            styles.halfInput,
            { color: colors.text, borderColor: colors.icon + "30" },
          ]}
          placeholder="City"
          placeholderTextColor={colors.icon}
          value={city}
          onChangeText={onCityChange}
          returnKeyType="next"
          onSubmitEditing={() => postalCodeRef.current?.focus()}
        />
          <TextInput
            ref={postalCodeRef}
            style={[
              styles.input,
              styles.halfInput,
              { color: colors.text, borderColor: colors.icon + "30" },
            ]}
            placeholder="Postal Code"
            placeholderTextColor={colors.icon}
            value={postalCode}
            onChangeText={onPostalCodeChange}
            returnKeyType="next"
            onSubmitEditing={() => {
              setTempCountryCode(countryCode)
              setShowPicker(true)
            }}
          />
      </View>

      <TouchableOpacity
        style={[
          styles.input,
          styles.pickerButton,
          { borderColor: colors.icon + "30" },
        ]}
        onPress={() => {
          setTempCountryCode(countryCode)
          setShowPicker(true)
        }}
      >
        <Text style={[styles.pickerButtonText, { color: countryCode ? colors.text : colors.icon }]}>
          {selectedCountryName}
        </Text>
        <IconSymbol size={20} name="chevron.down" color={colors.icon} />
      </TouchableOpacity>

      <Modal
        visible={showPicker}
        transparent={true}
        animationType="none"
        onRequestClose={handleCancel}
      >
        <TouchableOpacity
          style={styles.modalOverlay}
          activeOpacity={1}
          onPress={handleCancel}
        >
          <TouchableOpacity
            activeOpacity={1}
            style={[styles.modalContent, { backgroundColor: colors.background }]}
            onPress={(e) => e.stopPropagation()}
          >
            <View style={[styles.modalHeader, { borderBottomColor: colors.icon + "30" }]}>
              <TouchableOpacity onPress={handleCancel}>
                <Text style={[styles.modalButton, { color: colors.tint }]}>Cancel</Text>
              </TouchableOpacity>
              <Text style={[styles.modalTitle, { color: colors.text }]}>Select Country</Text>
              <TouchableOpacity onPress={handleDone}>
                <Text style={[styles.modalButton, { color: colors.tint }]}>Done</Text>
              </TouchableOpacity>
            </View>
            <Picker
              selectedValue={tempCountryCode}
              onValueChange={(value) => {
                setTempCountryCode(value)
                if (Platform.OS === "android") {
                  onCountryCodeChange(value)
                  setShowPicker(false)
                  // Focus phone field after country selection on Android
                  setTimeout(() => phoneRef.current?.focus(), 100)
                }
              }}
              style={[styles.picker, Platform.OS === "android" && { color: colors.text }]}
              itemStyle={Platform.OS === "ios" ? styles.pickerItemIOS : undefined}
            >
              <Picker.Item label="Select Country" value="" enabled={false} />
              {countries.map((country) => {
                const code = country.iso_2 || country.id
                const name = country.display_name || country.name || country.iso_2 || country.id
                return <Picker.Item key={code} label={name} value={code} />
              })}
            </Picker>
          </TouchableOpacity>
        </TouchableOpacity>
      </Modal>

      <TextInput
        ref={phoneRef}
        style={[styles.input, { color: colors.text, borderColor: colors.icon + "30" }]}
        placeholder="Phone Number"
        placeholderTextColor={colors.icon}
        value={phone}
        onChangeText={onPhoneChange}
        keyboardType="phone-pad"
        returnKeyType="done"
      />
    </>
  )
}

const styles = StyleSheet.create({
  input: {
    borderWidth: 1,
    borderRadius: 8,
    padding: 12,
    fontSize: 16,
    marginBottom: 12,
  },
  row: {
    flexDirection: "row",
    gap: 12,
  },
  halfInput: {
    flex: 1,
  },
  pickerButton: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
  },
  pickerButtonText: {
    fontSize: 16,
    flex: 1,
  },
  modalOverlay: {
    flex: 1,
    backgroundColor: "rgba(0, 0, 0, 0.5)",
    justifyContent: "flex-end",
  },
  modalContent: {
    borderTopLeftRadius: 20,
    borderTopRightRadius: 20,
    maxHeight: "50%",
  },
  modalHeader: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
    padding: 16,
    borderBottomWidth: 1,
  },
  modalTitle: {
    fontSize: 18,
    fontWeight: "600",
  },
  modalButton: {
    fontSize: 16,
    fontWeight: "600",
  },
  picker: {
    width: "100%",
    height: Platform.OS === "ios" ? 250 : 48,
  },
  pickerItemIOS: {
    height: 200,
  },
})

import { AddressForm } from "@/components/checkout/address-form"
import { Button } from "@/components/ui/button"
import { Colors } from "@/constants/theme"
import { useRegion } from "@/context/region-context"
import { useColorScheme } from "@/hooks/use-color-scheme"
import React, { useEffect, useRef, useState } from "react"
import {
  Keyboard,
  KeyboardAvoidingView,
  Platform,
  ScrollView,
  StyleSheet,
  Switch,
  Text,
  TextInput,
  View,
} from "react-native"

interface Address {
  firstName: string;
  lastName: string;
  address: string;
  city: string;
  postalCode: string;
  countryCode: string;
  phone: string;
}

interface DeliveryStepProps {
  email: string;
  shippingAddress: Address;
  billingAddress: Address;
  useSameForBilling: boolean;
  loading: boolean;
  onEmailChange: (value: string) => void;
  onShippingAddressChange: (field: keyof Address, value: string) => void;
  onBillingAddressChange: (field: keyof Address, value: string) => void;
  onUseSameForBillingChange: (value: boolean) => void;
  onNext: () => void;
}

export function DeliveryStep({
  email,
  shippingAddress,
  billingAddress,
  useSameForBilling,
  loading,
  onEmailChange,
  onShippingAddressChange,
  onBillingAddressChange,
  onUseSameForBillingChange,
  onNext,
}: DeliveryStepProps) {
  const colorScheme = useColorScheme()
  const colors = Colors[colorScheme ?? "light"]
  const { selectedRegion } = useRegion()
  const scrollViewRef = useRef<ScrollView>(null)
  const [isKeyboardVisible, setKeyboardVisible] = useState(false)

  const countries = selectedRegion?.countries || []

  useEffect(() => {
    const keyboardWillShowListener = Keyboard.addListener(
      Platform.OS === "ios" ? "keyboardWillShow" : "keyboardDidShow",
      () => setKeyboardVisible(true)
    )
    const keyboardWillHideListener = Keyboard.addListener(
      Platform.OS === "ios" ? "keyboardWillHide" : "keyboardDidHide",
      () => setKeyboardVisible(false)
    )

    return () => {
      keyboardWillShowListener.remove()
      keyboardWillHideListener.remove()
    }
  }, [])

  return (
    <KeyboardAvoidingView 
      style={styles.container}
      behavior={Platform.OS === "ios" ? "padding" : "height"}
      keyboardVerticalOffset={Platform.OS === "ios" ? 90 : 0}
    >
      <ScrollView
        ref={scrollViewRef}
        style={styles.scrollView}
        contentContainerStyle={[
          styles.scrollContent,
          isKeyboardVisible && styles.scrollContentKeyboard,
        ]}
        keyboardShouldPersistTaps="handled"
        keyboardDismissMode="on-drag"
        showsVerticalScrollIndicator={true}
        automaticallyAdjustKeyboardInsets={true}
      >
        <View style={styles.section}>
          <Text style={[styles.sectionTitle, { color: colors.text }]}>
            Contact Information
          </Text>

          <TextInput
            style={[styles.input, { color: colors.text, borderColor: colors.icon + "30" }]}
            placeholder="Email"
            placeholderTextColor={colors.icon}
            value={email}
            onChangeText={onEmailChange}
            keyboardType="email-address"
            autoCapitalize="none"
            returnKeyType="next"
          />

          <Text style={[styles.sectionTitle, { color: colors.text, marginTop: 20 }]}>
            Shipping Address
          </Text>

          <AddressForm
            firstName={shippingAddress.firstName}
            lastName={shippingAddress.lastName}
            address={shippingAddress.address}
            city={shippingAddress.city}
            postalCode={shippingAddress.postalCode}
            countryCode={shippingAddress.countryCode}
            phone={shippingAddress.phone}
            countries={countries}
            onFirstNameChange={(value) => onShippingAddressChange("firstName", value)}
            onLastNameChange={(value) => onShippingAddressChange("lastName", value)}
            onAddressChange={(value) => onShippingAddressChange("address", value)}
            onCityChange={(value) => onShippingAddressChange("city", value)}
            onPostalCodeChange={(value) => onShippingAddressChange("postalCode", value)}
            onCountryCodeChange={(value) => onShippingAddressChange("countryCode", value)}
            onPhoneChange={(value) => onShippingAddressChange("phone", value)}
          />

          <View style={styles.switchContainer}>
            <Text style={[styles.switchLabel, { color: colors.text }]}>
              Use same address for billing
            </Text>
            <Switch
              value={useSameForBilling}
              onValueChange={onUseSameForBillingChange}
            />
          </View>

          {!useSameForBilling && (
            <>
              <Text style={[styles.sectionTitle, { color: colors.text, marginTop: 20 }]}>
                Billing Address
              </Text>

              <AddressForm
                firstName={billingAddress.firstName}
                lastName={billingAddress.lastName}
                address={billingAddress.address}
                city={billingAddress.city}
                postalCode={billingAddress.postalCode}
                countryCode={billingAddress.countryCode}
                phone={billingAddress.phone}
                countries={countries}
                onFirstNameChange={(value) => onBillingAddressChange("firstName", value)}
                onLastNameChange={(value) => onBillingAddressChange("lastName", value)}
                onAddressChange={(value) => onBillingAddressChange("address", value)}
                onCityChange={(value) => onBillingAddressChange("city", value)}
                onPostalCodeChange={(value) => onBillingAddressChange("postalCode", value)}
                onCountryCodeChange={(value) => onBillingAddressChange("countryCode", value)}
                onPhoneChange={(value) => onBillingAddressChange("phone", value)}
              />
            </>
          )}
        </View>
        <View style={[styles.buttonContainer, { backgroundColor: colors.background }]}>
          <Button
            title="Continue"
            onPress={onNext}
            loading={loading}
            style={styles.button}
          />
        </View>
      </ScrollView>
    </KeyboardAvoidingView>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  scrollView: {
    flex: 1,
  },
  scrollContent: {
    flexGrow: 1,
    paddingBottom: 20,
  },
  scrollContentKeyboard: {
    paddingBottom: Platform.OS === "ios" ? 300 : 320,
  },
  section: {
    padding: 20,
  },
  buttonContainer: {
    padding: 20,
    paddingTop: 10,
    paddingBottom: 30,
  },
  sectionTitle: {
    fontSize: 20,
    fontWeight: "700",
    marginBottom: 20,
  },
  input: {
    borderWidth: 1,
    borderRadius: 8,
    padding: 12,
    fontSize: 16,
    marginBottom: 12,
  },
  switchContainer: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between",
    marginVertical: 16,
  },
  switchLabel: {
    fontSize: 16,
    flex: 1,
  },
  button: {
    marginTop: 8,
  },
})

import { Loading } from "@/components/loading"
import { Button } from "@/components/ui/button"
import { Colors } from "@/constants/theme"
import { useColorScheme } from "@/hooks/use-color-scheme"
import { formatPrice } from "@/lib/format-price"
import type { HttpTypes } from "@medusajs/types"
import React from "react"
import { StyleSheet, Text, TouchableOpacity, View } from "react-native"

interface ShippingStepProps {
  shippingOptions: HttpTypes.StoreCartShippingOption[];
  selectedShippingOption: string | null;
  currencyCode?: string;
  loading: boolean;
  onSelectOption: (optionId: string) => void;
  onBack: () => void;
  onNext: () => void;
}

export function ShippingStep({
  shippingOptions,
  selectedShippingOption,
  currencyCode,
  loading,
  onSelectOption,
  onBack,
  onNext,
}: ShippingStepProps) {
  const colorScheme = useColorScheme()
  const colors = Colors[colorScheme ?? "light"]

  return (
    <View style={styles.container}>
      <View style={styles.contentWrapper}>
        <View style={styles.section}>
      <Text style={[styles.sectionTitle, { color: colors.text }]}>
        Select Shipping Method
      </Text>

      {loading ? (
        <Loading />
      ) : shippingOptions.length === 0 ? (
        <Text style={[styles.emptyText, { color: colors.icon }]}>
          No shipping options available
        </Text>
      ) : (
        shippingOptions.map((option) => (
          <TouchableOpacity
            key={option.id}
            style={[
              styles.optionCard,
              {
                backgroundColor:
                  selectedShippingOption === option.id
                    ? colors.tint + "20"
                    : "transparent",
                borderColor:
                  selectedShippingOption === option.id
                    ? colors.tint
                    : colors.icon + "30",
              },
            ]}
            onPress={() => onSelectOption(option.id)}
          >
            <View style={styles.optionInfo}>
              <Text
                style={[
                  styles.optionTitle,
                  {
                    color:
                      selectedShippingOption === option.id
                        ? colors.tint
                        : colors.text,
                  },
                ]}
              >
                {option.name}
              </Text>
              <Text style={[styles.optionPrice, { color: colors.text }]}>
                {formatPrice(option.amount, currencyCode)}
              </Text>
            </View>
            {selectedShippingOption === option.id && (
              <Text style={{ color: colors.tint, fontSize: 20 }}>✓</Text>
            )}
          </TouchableOpacity>
        ))
      )}
        </View>
      </View>

      <View style={[styles.buttonContainer, { backgroundColor: colors.background, borderTopColor: colors.icon + "30" }]}>
        <View style={styles.buttonRow}>
          <Button
            title="Back"
            variant="secondary"
            onPress={onBack}
            style={styles.halfButton}
          />
          <Button
            title="Continue"
            onPress={onNext}
            loading={loading}
            disabled={!selectedShippingOption}
            style={styles.halfButton}
          />
        </View>
      </View>
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  contentWrapper: {
    flex: 1,
  },
  section: {
    padding: 20,
  },
  buttonContainer: {
    padding: 20,
    paddingBottom: 30,
    borderTopWidth: 1,
  },
  sectionTitle: {
    fontSize: 20,
    fontWeight: "700",
    marginBottom: 20,
  },
  optionCard: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
    padding: 16,
    borderRadius: 8,
    borderWidth: 1,
    marginBottom: 12,
  },
  optionInfo: {
    flex: 1,
  },
  optionTitle: {
    fontSize: 16,
    fontWeight: "600",
    marginBottom: 4,
  },
  optionPrice: {
    fontSize: 14,
  },
  emptyText: {
    fontSize: 16,
    textAlign: "center",
    padding: 20,
  },
  buttonRow: {
    flexDirection: "row",
    gap: 12,
  },
  halfButton: {
    flex: 1,
  },
})

/**
 * Information about a payment provider for display purposes
 */
export interface PaymentProviderInfo {
  icon: string;
  title: string;
}

/**
 * Get display information for a payment provider based on its ID
 * Returns an icon name and formatted title for the payment provider
 */
export function getPaymentProviderInfo(providerId: string): PaymentProviderInfo {
  switch (providerId) {
    case "pp_system_default":
      return {
        icon: "creditcard",
        title: "Manual Payment",
      }
    default:
      return {
        icon: "creditcard",
        title: providerId.replace("pp_", "").replace(/_/g, " ").replace(/\b\w/g, (l) => l.toUpperCase()),
      }
  }
}

import { Loading } from "@/components/loading"
import { Button } from "@/components/ui/button"
import { IconSymbol } from "@/components/ui/icon-symbol"
import { Colors } from "@/constants/theme"
import { useColorScheme } from "@/hooks/use-color-scheme"
import { formatPrice } from "@/lib/format-price"
import { getPaymentProviderInfo } from "@/lib/payment-providers"
import type { HttpTypes } from "@medusajs/types"
import React from "react"
import { StyleSheet, Text, TouchableOpacity, View } from "react-native"

interface PaymentStepProps {
  cart: HttpTypes.StoreCart;
  paymentProviders: HttpTypes.StorePaymentProvider[];
  selectedPaymentProvider: string | null;
  loading: boolean;
  onSelectProvider: (providerId: string) => void;
  onBack: () => void;
  onPlaceOrder: () => void;
}

export function PaymentStep({
  cart,
  paymentProviders,
  selectedPaymentProvider,
  loading,
  onSelectProvider,
  onBack,
  onPlaceOrder,
}: PaymentStepProps) {
  const colorScheme = useColorScheme()
  const colors = Colors[colorScheme ?? "light"]

  return (
    <View style={styles.container}>
      <View style={styles.contentWrapper}>
        <View style={styles.section}>
      <Text style={[styles.sectionTitle, { color: colors.text }]}>
        Select Payment Method
      </Text>

      {loading ? (
        <Loading />
      ) : paymentProviders.length === 0 ? (
        <Text style={[styles.emptyText, { color: colors.icon }]}>
          No payment providers available
        </Text>
      ) : (
        paymentProviders.map((provider) => {
          const providerInfo = getPaymentProviderInfo(provider.id)
          const isSelected = selectedPaymentProvider === provider.id
          
          return (
            <TouchableOpacity
              key={provider.id}
              style={[
                styles.optionCard,
                {
                  backgroundColor: isSelected ? colors.tint + "20" : "transparent",
                  borderColor: isSelected ? colors.tint : colors.icon + "30",
                },
              ]}
              onPress={() => onSelectProvider(provider.id)}
            >
              <View style={styles.optionContent}>
                <IconSymbol
                  size={24}
                  name={providerInfo.icon as any}
                  color={isSelected ? colors.tint : colors.icon}
                />
                <Text
                  style={[
                    styles.optionTitle,
                    {
                      color: isSelected ? colors.tint : colors.text,
                    },
                  ]}
                >
                  {providerInfo.title}
                </Text>
              </View>
              {isSelected && (
                <Text style={{ color: colors.tint, fontSize: 20 }}>✓</Text>
              )}
            </TouchableOpacity>
          )
        })
      )}

      <View style={[styles.summary, { borderColor: colors.icon + "30" }]}>
        <Text style={[styles.summaryTitle, { color: colors.text }]}>
          Order Summary
        </Text>
        <View style={styles.summaryRow}>
          <Text style={[styles.summaryLabel, { color: colors.text }]}>Subtotal</Text>
          <Text style={[styles.summaryValue, { color: colors.text }]}>
            {formatPrice(cart.item_subtotal || 0, cart.currency_code)}
          </Text>
        </View>
        <View style={styles.summaryRow}>
          <Text style={[styles.summaryLabel, { color: colors.text }]}>Discount</Text>
          <Text style={[styles.summaryValue, { color: colors.text }]}>
            {(cart.discount_total || 0) > 0 ? "-" : ""}{formatPrice(cart.discount_total || 0, cart.currency_code)}
          </Text>
        </View>
        <View style={styles.summaryRow}>
          <Text style={[styles.summaryLabel, { color: colors.text }]}>Shipping</Text>
          <Text style={[styles.summaryValue, { color: colors.text }]}>
            {formatPrice(cart.shipping_total || 0, cart.currency_code)}
          </Text>
        </View>
        <View style={styles.summaryRow}>
          <Text style={[styles.summaryLabel, { color: colors.text }]}>Tax</Text>
          <Text style={[styles.summaryValue, { color: colors.text }]}>
            {formatPrice(cart.tax_total || 0, cart.currency_code)}
          </Text>
        </View>
        <View style={[styles.summaryRow, styles.totalRow, { borderTopColor: colors.border }]}>
          <Text style={[styles.totalLabel, { color: colors.text }]}>Total</Text>
          <Text style={[styles.totalValue, { color: colors.tint }]}>
            {formatPrice(cart.total, cart.currency_code)}
          </Text>
        </View>
      </View>
        </View>
      </View>

      <View style={[styles.buttonContainer, { backgroundColor: colors.background, borderTopColor: colors.icon + "30" }]}>
        <View style={styles.buttonRow}>
          <Button
            title="Back"
            variant="secondary"
            onPress={onBack}
            style={styles.halfButton}
          />
          <Button
            title="Place Order"
            onPress={onPlaceOrder}
            loading={loading}
            disabled={!selectedPaymentProvider}
            style={styles.halfButton}
          />
        </View>
      </View>
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  contentWrapper: {
    flex: 1,
  },
  section: {
    padding: 20,
  },
  buttonContainer: {
    padding: 20,
    paddingBottom: 30,
    borderTopWidth: 1,
  },
  sectionTitle: {
    fontSize: 20,
    fontWeight: "700",
    marginBottom: 20,
  },
  optionCard: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
    padding: 16,
    borderRadius: 8,
    borderWidth: 1,
    marginBottom: 12,
  },
  optionContent: {
    flexDirection: "row",
    alignItems: "center",
    gap: 12,
    flex: 1,
  },
  optionTitle: {
    fontSize: 16,
    fontWeight: "600",
  },
  emptyText: {
    fontSize: 16,
    textAlign: "center",
    padding: 20,
  },
  summary: {
    borderWidth: 1,
    borderRadius: 8,
    padding: 16,
    marginTop: 20,
    marginBottom: 20,
  },
  summaryTitle: {
    fontSize: 18,
    fontWeight: "700",
    marginBottom: 12,
  },
  summaryRow: {
    flexDirection: "row",
    justifyContent: "space-between",
    marginBottom: 8,
  },
  summaryLabel: {
    fontSize: 14,
  },
  summaryValue: {
    fontSize: 14,
    fontWeight: "500",
  },
  totalRow: {
    marginTop: 12,
    paddingTop: 12,
    borderTopWidth: 1,
  },
  totalLabel: {
    fontSize: 18,
    fontWeight: "700",
  },
  totalValue: {
    fontSize: 20,
    fontWeight: "700",
  },
  buttonRow: {
    flexDirection: "row",
    gap: 12,
  },
  halfButton: {
    flex: 1,
  },
})

import { DeliveryStep } from "@/components/checkout/delivery-step"
import { PaymentStep } from "@/components/checkout/payment-step"
import { ShippingStep } from "@/components/checkout/shipping-step"
import { Colors } from "@/constants/theme"
import { useCart } from "@/context/cart-context"
import { useColorScheme } from "@/hooks/use-color-scheme"
import { sdk } from "@/lib/sdk"
import type { HttpTypes } from "@medusajs/types"
import React, { useCallback, useEffect, useState } from "react"
import { Alert, StyleSheet, Text, View } from "react-native"

type CheckoutStep = "delivery" | "shipping" | "payment";

export default function CheckoutScreen() {
  const colorScheme = useColorScheme()
  const colors = Colors[colorScheme ?? "light"]
  const { cart, refreshCart } = useCart()

  const [currentStep, setCurrentStep] = useState<CheckoutStep>("delivery")
  const [loading, setLoading] = useState(false)

  // Contact & Address state
  const [email, setEmail] = useState("")
  const [shippingAddress, setShippingAddress] = useState({
    firstName: "",
    lastName: "",
    address: "",
    city: "",
    postalCode: "",
    countryCode: "",
    phone: "",
  })
  const [useSameForBilling, setUseSameForBilling] = useState(true)
  const [billingAddress, setBillingAddress] = useState({
    firstName: "",
    lastName: "",
    address: "",
    city: "",
    postalCode: "",
    countryCode: "",
    phone: "",
  })

  // Shipping step
  const [shippingOptions, setShippingOptions] = useState<HttpTypes.StoreCartShippingOption[]>([])
  const [selectedShippingOption, setSelectedShippingOption] = useState<string | null>(null)

  // Payment step
  const [paymentProviders, setPaymentProviders] = useState<HttpTypes.StorePaymentProvider[]>([])
  const [selectedPaymentProvider, setSelectedPaymentProvider] = useState<string | null>(null)

  // TODO update state when cart changes
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  centerContainer: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    padding: 20,
  },
  steps: {
    flexDirection: "row",
    justifyContent: "space-around",
    padding: 20,
    borderBottomWidth: 1,
  },
  stepIndicator: {
    alignItems: "center",
  },
  stepCircle: {
    width: 36,
    height: 36,
    borderRadius: 18,
    alignItems: "center",
    justifyContent: "center",
    marginBottom: 8,
  },
  stepNumber: {
    fontSize: 16,
    fontWeight: "600",
  },
  stepLabel: {
    fontSize: 12,
  },
  content: {
    flex: 1,
  },
  errorText: {
    fontSize: 16,
    textAlign: "center",
  },
})

useEffect(() => {
  // Populate form with existing cart data or reset to empty values
  setEmail(cart?.email || "")
  setShippingAddress({
    firstName: cart?.shipping_address?.first_name || "",
    lastName: cart?.shipping_address?.last_name || "",
    address: cart?.shipping_address?.address_1 || "",
    city: cart?.shipping_address?.city || "",
    postalCode: cart?.shipping_address?.postal_code || "",
    countryCode: cart?.shipping_address?.country_code || "",
    phone: cart?.shipping_address?.phone || "",
  })
  
  // Billing address - check if different from shipping
  const hasDifferentBilling = cart?.billing_address && 
    (cart.billing_address.address_1 !== cart.shipping_address?.address_1 ||
      cart.billing_address.city !== cart.shipping_address?.city)
  
  setUseSameForBilling(!hasDifferentBilling)
  setBillingAddress({
    firstName: cart?.billing_address?.first_name || "",
    lastName: cart?.billing_address?.last_name || "",
    address: cart?.billing_address?.address_1 || "",
    city: cart?.billing_address?.city || "",
    postalCode: cart?.billing_address?.postal_code || "",
    countryCode: cart?.billing_address?.country_code || "",
    phone: cart?.billing_address?.phone || "",
  })
  
  // Reset selections when cart is null
  if (!cart) {
    setSelectedShippingOption(null)
    setSelectedPaymentProvider(null)
    setCurrentStep("delivery")
  }
}, [cart])

// TODO fetch shipping options and payment providers

const fetchShippingOptions = useCallback(async () => {
  if (!cart) {return}

  try {
    setLoading(true)
    const { shipping_options } = await sdk.store.fulfillment.listCartOptions({
      cart_id: cart.id,
    })
    setShippingOptions(shipping_options || [])
  } catch (err) {
    console.error("Failed to fetch shipping options:", err)
    Alert.alert("Error", "Failed to load shipping options")
  } finally {
    setLoading(false)
  }
}, [cart])

const fetchPaymentProviders = useCallback(async () => {
  if (!cart) {return}

  try {
    setLoading(true)
    const { payment_providers } = await sdk.store.payment.listPaymentProviders({
      region_id: cart.region_id || "",
    })
    setPaymentProviders(payment_providers || [])
  } catch (err) {
    console.error("Failed to fetch payment providers:", err)
    Alert.alert("Error", "Failed to load payment providers")
  } finally {
    setLoading(false)
  }
}, [cart])

useEffect(() => {
  if (currentStep === "shipping") {
    fetchShippingOptions()
  } else if (currentStep === "payment") {
    fetchPaymentProviders()
  }
}, [currentStep, fetchShippingOptions, fetchPaymentProviders])

// TODO handle step transitions and order placement

const handleDeliveryNext = async () => {
  // Validate shipping address
  if (!email || !shippingAddress.firstName || !shippingAddress.lastName || 
      !shippingAddress.address || !shippingAddress.city || !shippingAddress.postalCode || 
      !shippingAddress.countryCode || !shippingAddress.phone) {
    Alert.alert("Error", "Please fill in all shipping address fields")
    return
  }

  // Validate billing address if different
  if (!useSameForBilling) {
    if (!billingAddress.firstName || !billingAddress.lastName || !billingAddress.address || 
        !billingAddress.city || !billingAddress.postalCode || !billingAddress.countryCode || 
        !billingAddress.phone) {
      Alert.alert("Error", "Please fill in all billing address fields")
      return
    }
  }

  if (!cart) {return}

  try {
    setLoading(true)
    const shippingAddressData = {
      first_name: shippingAddress.firstName,
      last_name: shippingAddress.lastName,
      address_1: shippingAddress.address,
      city: shippingAddress.city,
      postal_code: shippingAddress.postalCode,
      country_code: shippingAddress.countryCode,
      phone: shippingAddress.phone,
    }

    const billingAddressData = useSameForBilling ? shippingAddressData : {
      first_name: billingAddress.firstName,
      last_name: billingAddress.lastName,
      address_1: billingAddress.address,
      city: billingAddress.city,
      postal_code: billingAddress.postalCode,
      country_code: billingAddress.countryCode,
      phone: billingAddress.phone,
    }

    await sdk.store.cart.update(cart.id, {
      email,
      shipping_address: shippingAddressData,
      billing_address: billingAddressData,
    })

    await refreshCart()
    setCurrentStep("shipping")
  } catch (err) {
    console.error("Failed to update cart:", err)
    Alert.alert("Error", "Failed to save delivery information")
  } finally {
    setLoading(false)
  }
}

const handleShippingNext = async () => {
  if (!selectedShippingOption || !cart) {
    Alert.alert("Error", "Please select a shipping method")
    return
  }

  try {
    setLoading(true)

    await sdk.store.cart.addShippingMethod(cart.id, {
      option_id: selectedShippingOption,
    })

    await refreshCart()
    setCurrentStep("payment")
  } catch (err) {
    console.error("Failed to add shipping method:", err)
    Alert.alert("Error", "Failed to save shipping method")
  } finally {
    setLoading(false)
  }
}

const handlePlaceOrder = async () => {
  if (!selectedPaymentProvider || !cart) {
    Alert.alert("Error", "Please select a payment provider")
    return
  }

  try {
    setLoading(true)

    // Create payment session
    await sdk.store.payment.initiatePaymentSession(cart, {
      provider_id: selectedPaymentProvider,
    })

    // Complete cart (converts cart to order on backend)
    const result = await sdk.store.cart.complete(cart.id)

    if (result.type === "order") {
      // Navigate to order confirmation first
      // Cart will be cleared on the order confirmation page to prevent empty cart flash
      // TODO navigate to order confirmation screen with order details
    } else {
      Alert.alert("Error", result.error?.message || "Failed to complete order")
    }
  } catch (err: any) {
    console.error("Failed to complete order:", err)
    Alert.alert("Error", err?.message || "Failed to complete order")
  } finally {
    setLoading(false)
  }
}

// TODO render step components

if (!cart) {
  return (
    <View style={[styles.centerContainer, { backgroundColor: colors.background }]}>
      <Text style={[styles.errorText, { color: colors.text }]}>
        No cart found. Please add items to your cart first.
      </Text>
    </View>
  )
}

// Active step uses inverted colors: white bg with dark text in dark mode, tint bg with white text in light mode
const activeStepBg = colorScheme === "dark" ? "#fff" : colors.tint
const activeStepText = colorScheme === "dark" ? "#000" : "#fff"

return (
  <View style={[styles.container, { backgroundColor: colors.background }]}>
    <View style={[styles.steps, { borderBottomColor: colors.border }]}>
      {(["delivery", "shipping", "payment"] as CheckoutStep[]).map((step, index) => (
        <View key={step} style={styles.stepIndicator}>
          <View
            style={[
              styles.stepCircle,
              {
                backgroundColor:
                  currentStep === step ? activeStepBg : colors.icon + "30",
              },
            ]}
          >
            <Text
              style={[
                styles.stepNumber,
                { color: currentStep === step ? activeStepText : colors.icon },
              ]}
            >
              {index + 1}
            </Text>
          </View>
          <Text
            style={[
              styles.stepLabel,
              {
                color: currentStep === step ? colors.text : colors.icon,
                fontWeight: currentStep === step ? "600" : "400",
              },
            ]}
          >
            {step.charAt(0).toUpperCase() + step.slice(1)}
          </Text>
        </View>
      ))}
    </View>

    <View style={styles.content}>
      {currentStep === "delivery" && (
        <DeliveryStep
          email={email}
          shippingAddress={shippingAddress}
          billingAddress={billingAddress}
          useSameForBilling={useSameForBilling}
          loading={loading}
          onEmailChange={setEmail}
          onShippingAddressChange={(field, value) => 
            setShippingAddress((prev) => ({ ...prev, [field]: value }))
          }
          onBillingAddressChange={(field, value) => 
            setBillingAddress((prev) => ({ ...prev, [field]: value }))
          }
          onUseSameForBillingChange={setUseSameForBilling}
          onNext={handleDeliveryNext}
        />
      )}

      {currentStep === "shipping" && (
        <ShippingStep
          shippingOptions={shippingOptions}
          selectedShippingOption={selectedShippingOption}
          currencyCode={cart.currency_code}
          loading={loading}
          onSelectOption={setSelectedShippingOption}
          onBack={() => setCurrentStep("delivery")}
          onNext={handleShippingNext}
        />
      )}

      {currentStep === "payment" && (
        <PaymentStep
          cart={cart}
          paymentProviders={paymentProviders}
          selectedPaymentProvider={selectedPaymentProvider}
          loading={loading}
          onSelectProvider={setSelectedPaymentProvider}
          onBack={() => setCurrentStep("shipping")}
          onPlaceOrder={handlePlaceOrder}
        />
      )}
    </View>
  </View>
)

<Stack.Screen
  name="checkout"
  options={{
    headerShown: true,
    title: "Checkout",
    presentation: "card",
    headerBackButtonDisplayMode: "minimal",
  }}
/>

<Button
  title="Proceed to Checkout"
  onPress={() => router.push("/checkout")}
  loading={loading}
/>

import { Loading } from "@/components/loading"
import { Button } from "@/components/ui/button"
import { IconSymbol } from "@/components/ui/icon-symbol"
import { Colors } from "@/constants/theme"
import { useCart } from "@/context/cart-context"
import { useColorScheme } from "@/hooks/use-color-scheme"
import { formatPrice } from "@/lib/format-price"
import { getPaymentProviderInfo } from "@/lib/payment-providers"
import { sdk } from "@/lib/sdk"
import type { HttpTypes } from "@medusajs/types"
import { Image } from "expo-image"
import { useLocalSearchParams, useRouter } from "expo-router"
import React, { useCallback, useEffect, useRef, useState } from "react"
import { ScrollView, StyleSheet, Text, View } from "react-native"

export default function OrderConfirmationScreen() {
  const { id } = useLocalSearchParams<{ id: string }>()
  const router = useRouter()
  const colorScheme = useColorScheme()
  const colors = Colors[colorScheme ?? "light"]
  const { clearCart } = useCart()

  const [order, setOrder] = useState<HttpTypes.StoreOrder | null>(null)
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)
  const hasCleared = useRef(false)

  // TODO fetch order details and clear cart
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  centerContainer: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    padding: 20,
  },
  content: {
    padding: 20,
  },
  successIcon: {
    width: 80,
    height: 80,
    borderRadius: 40,
    alignItems: "center",
    justifyContent: "center",
    alignSelf: "center",
    marginBottom: 24,
  },
  checkmark: {
    fontSize: 48,
    color: "#fff",
    fontWeight: "700",
  },
  title: {
    fontSize: 28,
    fontWeight: "700",
    textAlign: "center",
    marginBottom: 8,
  },
  subtitle: {
    fontSize: 16,
    textAlign: "center",
    marginBottom: 32,
  },
  card: {
    borderWidth: 1,
    borderRadius: 12,
    padding: 16,
    marginBottom: 16,
  },
  cardTitle: {
    fontSize: 18,
    fontWeight: "700",
    marginBottom: 16,
  },
  infoRow: {
    flexDirection: "row",
    justifyContent: "space-between",
    marginBottom: 12,
  },
  label: {
    fontSize: 14,
  },
  value: {
    fontSize: 14,
    fontWeight: "500",
  },
  sectionTitle: {
    fontSize: 16,
    fontWeight: "600",
    marginTop: 16,
    marginBottom: 8,
  },
  addressText: {
    fontSize: 14,
    marginBottom: 4,
  },
  paymentMethodRow: {
    flexDirection: "row",
    alignItems: "center",
    marginBottom: 4,
  },
  itemRow: {
    flexDirection: "row",
    alignItems: "center",
    marginBottom: 16,
    paddingBottom: 16,
    borderBottomWidth: 1,
  },
  lastItemRow: {
    borderBottomWidth: 0,
    marginBottom: 0,
    paddingBottom: 0,
  },
  itemImage: {
    width: 60,
    height: 60,
    borderRadius: 8,
    marginRight: 12,
  },
  itemInfo: {
    flex: 1,
  },
  itemTitle: {
    fontSize: 14,
    fontWeight: "600",
    marginBottom: 4,
  },
  itemVariant: {
    fontSize: 12,
    marginBottom: 4,
  },
  itemQuantity: {
    fontSize: 12,
  },
  itemPrice: {
    fontSize: 14,
    fontWeight: "600",
    marginLeft: 12,
  },
  summaryRow: {
    flexDirection: "row",
    justifyContent: "space-between",
    marginBottom: 12,
  },
  summaryLabel: {
    fontSize: 14,
  },
  summaryValue: {
    fontSize: 14,
    fontWeight: "500",
  },
  totalRow: {
    marginTop: 12,
    paddingTop: 12,
    borderTopWidth: 1,
  },
  totalLabel: {
    fontSize: 18,
    fontWeight: "700",
  },
  totalValue: {
    fontSize: 20,
    fontWeight: "700",
  },
  button: {
    marginTop: 20,
  },
  continueButton: {
    marginBottom: 24,
  },
  errorText: {
    fontSize: 16,
    textAlign: "center",
    marginBottom: 20,
  },
})