import React from 'react'
import { View, Text, ActivityIndicator } from 'react-native'
import { AppContainer, tw } from 'common-ui'
import OfferForm from '@/components/OfferForm'
import { useRouter, useLocalSearchParams } from 'expo-router'
import { trpc } from '@/src/trpc-client'

export default function EditOffer() {
  const router = useRouter()
  const { id } = useLocalSearchParams()
  const offerId = parseInt(id as string)

  const { data: offerData, isLoading } = trpc.admin.offers.getById.useQuery(
    { id: offerId },
    { enabled: !!offerId }
  )

  const handleOfferUpdated = () => {
    router.back()
  }

  if (isLoading) {
    return (
      <AppContainer>
        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
          <ActivityIndicator size="large" color="#3B82F6" />
          <Text style={tw`mt-4 text-gray-500`}>Loading offer...</Text>
        </View>
      </AppContainer>
    )
  }

  if (!offerData?.offer) {
    return (
      <AppContainer>
        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
          <Text style={tw`text-gray-500`}>Offer not found</Text>
        </View>
      </AppContainer>
    )
  }

  const offer = offerData.offer

  return (
    <AppContainer>
      <OfferForm
        offerId={offer.id}
        initialName={offer.name}
        initialShortDescription={offer.shortDescription}
        initialLongDescription={offer.longDescription}
        initialPrice={offer.price}
        initialMarketPrice={offer.marketPrice}
        initialImages={offer.images || []}
        initialImageKeys={offer.imageKeys || []}
        initialIsSuspended={offer.isSuspended}
        initialIsFlashEnabled={offer.isFlashEnabled}
        initialItems={offer.items.map((item: any) => ({
          productId: item.productId,
          quantity: item.quantity,
          product: item.product,
        }))}
        onOfferAdded={handleOfferUpdated}
      />
    </AppContainer>
  )
}