musicland/src/screens/Profile/OrderHistory.js

import React, { useCallback, useEffect, useMemo, useState } from 'react'
import { ActivityIndicator, FlatList, StyleSheet, Text, View } from 'react-native'

import firebase from '../../config/firebase'
import { background } from '../../assets'
import Page from '../../layouts/Page'
import { useUser } from '../../providers/UserDataProvider'
import { gutters, Palette } from '../../styles'
import { FONT_FAMILY } from '../../styles/Fonts'
import CreditAmount from '../../components/CreditAmount'

const ORDER_TYPE_LABELS = {
  GIFT: 'Crédit offert',
  COINS: 'Achat de coins',
  SONG: 'Génération de musique',
  SUBSCRIPTION: 'Abonnement',
}

const formatDateParts = (date) => {
  if (!date) {
    return {
      dateLabel: 'En attente de confirmation',
      timeLabel: '',
    }
  }
  try {
    const dateLabel = date.toLocaleDateString('fr-FR', {
      day: '2-digit',
      month: 'short',
      year: 'numeric',
    })
    const timeLabel = date.toLocaleTimeString('fr-FR', {
      hour: '2-digit',
      minute: '2-digit',
    })
    return { dateLabel, timeLabel }
  } catch (_error) {
    return {
      dateLabel: date.toString(),
      timeLabel: '',
    }
  }
}

const mapOrderType = (type) => ORDER_TYPE_LABELS[type] || 'Opération'

const shortenIdentifier = (value, visible = 6) => {
  if (typeof value !== 'string') return null
  if (value.length <= visible + 2) return value
  return `${value.slice(0, visible)}…`
}

const OrderHistory = () => {
  const { currentUID } = useUser() || {}
  const [orders, setOrders] = useState([])
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState(null)

  useEffect(() => {
    if (!currentUID) {
      setOrders([])
      setLoading(false)
      return
    }

    setLoading(true)
    setError(null)

    const unsubscribe = firebase
      .firestore()
      .collection('orders')
      .where('userId', '==', currentUID)
      .orderBy('createdAt', 'desc')
      .onSnapshot(
        (snapshot) => {
          const nextOrders = snapshot.docs.map((doc) => {
            const rawData = doc.data() || {}
            const createdAt =
              typeof rawData.createdAt?.toDate === 'function' ? rawData.createdAt.toDate() : null
            return {
              id: doc.id,
              ...rawData,
              createdAt,
            }
          })

          setOrders(nextOrders)
          setLoading(false)
        },
        (firestoreError) => {
          console.warn(
            '[OrderHistory] Unable to load orders',
            firestoreError?.message || firestoreError
          )
          setError(firestoreError?.message || "Impossible de récupérer l'historique des commandes.")
          setLoading(false)
        }
      )

    return () => {
      if (typeof unsubscribe === 'function') {
        unsubscribe()
      }
    }
  }, [currentUID])

  const renderOrder = useCallback(({ item }) => {
    const amountValue =
      typeof item.amount === 'number' && Number.isFinite(item.amount) ? item.amount : 0
    const isPositive = amountValue > 0
    const amountTextStyle = [
      styles.orderAmount,
      isPositive ? styles.amountPositive : styles.amountNegative,
    ]

    const { dateLabel } = formatDateParts(item.createdAt)

    let reasonLabel = mapOrderType(item.type)

    if (item.type === 'GIFT') {
      const reason = item.metadata?.reason
      if (reason === 'WELCOME_BONUS') {
        reasonLabel = 'Crédit de bienvenue'
      } else if (typeof reason === 'string' && reason.trim()) {
        reasonLabel = reason.trim()
      }
    } else if (item.type === 'SONG') {
      reasonLabel = 'Génération de musique'
    } else if (item.type === 'COINS') {
      if (item.metadata?.coinPackKey) {
        const shortenedPack = shortenIdentifier(item.metadata.coinPackKey, 10)
        reasonLabel = `Pack ${shortenedPack || item.metadata.coinPackKey}`
      } else if (typeof item.metadata?.source === 'string' && item.metadata.source.trim()) {
        const source = item.metadata.source.trim()
        reasonLabel = source === 'STRIPE_CHECKOUT' ? 'Recharge Stripe' : source
      } else {
        reasonLabel = 'Rechargement de coins'
      }
    } else if (item.type === 'SUBSCRIPTION') {
      const rawPeriod =
        typeof item.metadata?.billingPeriod === 'string'
          ? item.metadata.billingPeriod.toLowerCase()
          : null
      reasonLabel =
        rawPeriod === 'annual'
          ? 'Abonnement annuel'
          : rawPeriod === 'monthly'
            ? 'Abonnement mensuel'
            : 'Abonnement'
    }

    return (
      <View style={styles.orderCard}>
        <CreditAmount value={amountValue} showPlus textStyle={amountTextStyle} iconSize={18} />
        <Text style={styles.orderReason}>{reasonLabel}</Text>
        <Text style={styles.orderTimestamp}>{dateLabel}</Text>
      </View>
    )
  }, [])

  const keyExtractor = useCallback((item) => item.id, [])

  const listEmptyComponent = useMemo(() => {
    if (loading) {
      return null
    }
    if (!currentUID) {
      return (
        <Text style={styles.emptyText}>
          Connecte-toi pour consulter l'historique de tes commandes.
        </Text>
      )
    }
    if (error) {
      return <Text style={styles.errorText}>{error}</Text>
    }
    return <Text style={styles.emptyText}>Aucune opération de coins pour le moment.</Text>
  }, [loading, currentUID, error])

  return (
    <Page
      headerType="NAVIGATION"
      title="Historique de commandes"
      backgroundImg={background.profileBG}
      contentContainerStyle={{ paddingBottom: gutters * 2 }}
      containerStyle={{
        backgroundColor: 'rgba(0,0,0,0.4)',
      }}
    >
      <View style={styles.container}>
        {loading ? (
          <View style={styles.loaderContainer}>
            <ActivityIndicator color={Palette.white} size="large" />
          </View>
        ) : (
          <FlatList
            data={orders}
            keyExtractor={keyExtractor}
            renderItem={renderOrder}
            contentContainerStyle={[
              styles.listContent,
              orders.length === 0 && styles.emptyListContent,
            ]}
            ItemSeparatorComponent={() => <View style={{ height: 12 }} />}
            ListEmptyComponent={listEmptyComponent}
          />
        )}
      </View>
    </Page>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingHorizontal: gutters,
    paddingTop: gutters,
  },
  loaderContainer: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  listContent: {
    paddingBottom: gutters * 2,
  },
  emptyListContent: {
    flexGrow: 1,
    justifyContent: 'center',
  },
  orderCard: {
    padding: 16,
    borderRadius: 16,
    backgroundColor: Palette.ultraLightWhite,
    borderWidth: 1,
    borderColor: 'rgba(255, 255, 255, 0.08)',
    gap: 6,
  },
  orderAmount: {
    fontSize: 16,
    fontFamily: FONT_FAMILY.InterSemiBold,
  },
  amountPositive: {
    color: Palette.green,
  },
  amountNegative: {
    color: Palette.red,
  },
  orderReason: {
    fontSize: 14,
    fontFamily: FONT_FAMILY.InterRegular,
    color: Palette.white,
  },
  orderTimestamp: {
    fontSize: 12,
    color: Palette.grayMid,
    fontFamily: FONT_FAMILY.InterMedium,
  },
  emptyText: {
    textAlign: 'center',
    color: Palette.grayMid,
    fontSize: 15,
    fontFamily: FONT_FAMILY.InterRegular,
  },
  errorText: {
    textAlign: 'center',
    color: Palette.red,
    fontSize: 15,
    fontFamily: FONT_FAMILY.InterRegular,
  },
})

export default OrderHistory