musicland/src/screens/LandingPage.js

import AsyncStorage from '@react-native-async-storage/async-storage'
import { useNavigation } from '@react-navigation/native'
import { useCallback, useEffect, useState } from 'react'
import { Image, Platform, StyleSheet, Text, TouchableOpacity, View } from 'react-native'
import { background, icons } from '../assets'
import EntryJingle from '../components/EntryJingle'
import FullscreenIntroVideo from '../components/FullscreenIntroVideo'
import GradientButton from '../components/GradientButton'
import { videosRef } from '../config/firebase'
import useDataFromRef from '../hooks/useDataFromRef'
import Page from '../layouts/Page'
import { Routes } from '../navigation'
import { useUser } from '../providers/UserDataProvider'
import { Palette } from '../styles'
import { FONT_FAMILY } from '../styles/Fonts'
import { BlurView } from 'expo-blur'

const LANGUAGE_STORAGE_KEY = 'preferredLanguage'

export default function LandingPage() {
  const navigation = useNavigation()
  const { currentUID } = useUser()
  const [videoUrl, setVideoUrl] = useState(null)
  const [selectedLanguage, setSelectedLanguage] = useState(null)
  const [hasLoadedPreferredLanguage, setHasLoadedPreferredLanguage] = useState(false)
  const [showFreeCreditsPopup, setShowFreeCreditsPopup] = useState(false)
  const isAuthenticated = !!currentUID

  const handleSelectLanguage = useCallback((language) => {
    setSelectedLanguage(language)
    AsyncStorage.setItem(LANGUAGE_STORAGE_KEY, language).catch((error) => {
      console.warn('LandingPage: failed to persist language', error)
    })
  }, [])

  const handleLaunchAdventure = useCallback(() => {
    if (isAuthenticated) {
      navigation.navigate(Routes.BottomTab, {
        screen: Routes.HomeStack,
        params: { screen: Routes.Home },
      })
      return
    }
    navigation.navigate(Routes.Register)
  }, [isAuthenticated, navigation])

  const handleOpenSubscriptions = useCallback(() => {
    navigation.navigate(Routes.Payments)
  }, [navigation])

  const { data: video } = useDataFromRef({
    ref: videosRef.doc('fr'),
    simpleRef: true,
  })

  useEffect(() => {
    let isMounted = true
    AsyncStorage.getItem(LANGUAGE_STORAGE_KEY)
      .then((storedLanguage) => {
        if (storedLanguage && isMounted) {
          setSelectedLanguage(storedLanguage)
        }
      })
      .catch((error) => {
        console.warn('LandingPage: failed to load language', error)
      })
      .finally(() => {
        if (isMounted) {
          setHasLoadedPreferredLanguage(true)
        }
      })

    return () => {
      isMounted = false
    }
  }, [])

  useEffect(() => {
    if (currentUID) {
      setShowFreeCreditsPopup(false)
      return
    }
    if (selectedLanguage) {
      setShowFreeCreditsPopup(true)
    }
  }, [currentUID, selectedLanguage])

  return (
    <>
      <EntryJingle active={hasLoadedPreferredLanguage && !selectedLanguage} />
      <Page
        shareBtn
        // connect
        title="Landing Page"
        backgroundImg={background.homeBGWeb}
      >
        <View
          style={{
            flex: 1,
            justifyContent: 'center',
            alignItems: 'center',
          }}
        >
          <View style={styles.content}>
            {!selectedLanguage && (
              <View style={styles.languageRow}>
                <TouchableOpacity
                  style={[styles.languageButton]}
                  onPress={() => handleSelectLanguage('fr')}
                >
                  <Image source={icons.frenchFlag} style={styles.flagIcon} />
                  <Text style={styles.languageText}>Français</Text>
                </TouchableOpacity>
                <TouchableOpacity
                  style={[styles.languageButton]}
                  onPress={() => handleSelectLanguage('en')}
                >
                  <Image source={icons.englishFlag} style={styles.flagIcon} />
                  <Text style={styles.languageText}>English</Text>
                </TouchableOpacity>
              </View>
            )}
            {selectedLanguage && (
              <View style={styles.actions}>
                <GradientButton
                  title="Découvrir Musicland"
                  onPress={() => setVideoUrl(video?.introWeb)}
                  containerStyle={styles.actionButton}
                />
                <GradientButton
                  title="Présentation de Musicland"
                  onPress={() =>
                    setVideoUrl(Platform.OS === 'web' ? video?.landingWeb : video?.landing)
                  }
                  containerStyle={styles.actionButton}
                />
                <GradientButton
                  title={
                    isAuthenticated
                      ? "Continuer l'aventure"
                      : Platform.OS === 'web'
                        ? "Je me lance dans l'aventure"
                        : 'Commencer'
                  }
                  onPress={handleLaunchAdventure}
                  containerStyle={styles.actionButton}
                />
                {!isAuthenticated ? (
                  <GradientButton
                    title="Nos tarifs"
                    onPress={handleOpenSubscriptions}
                    containerStyle={styles.actionButton}
                  />
                ) : null}
                {showFreeCreditsPopup && (
                  <BlurView style={styles.freeCreditsCard}>
                    <View style={styles.freeCreditsContent}>
                      <View style={styles.freeCreditsTextContainer}>
                        <Text style={styles.freeCreditsTitle}>10 crédits offert</Text>
                        <Text style={styles.freeCreditsSubtitle}>pour 1 parcours gratuit !</Text>
                      </View>
                      <TouchableOpacity
                        onPress={() => setShowFreeCreditsPopup(false)}
                        accessibilityRole="button"
                        accessibilityLabel="Fermer le message des crédits offerts"
                        style={styles.freeCreditsClose}
                      >
                        <Image source={icons.close} style={styles.freeCreditsCloseIcon} />
                      </TouchableOpacity>
                    </View>
                  </BlurView>
                )}
              </View>
            )}
          </View>
        </View>
      </Page>
      <FullscreenIntroVideo url={videoUrl} visible={!!videoUrl} onClose={() => setVideoUrl(null)} />
    </>
  )
}

const styles = StyleSheet.create({
  content: {
    width: '100%',
    maxWidth: 360,
    alignItems: 'center',
    gap: 32,
  },
  languageRow: {
    flexDirection: 'row',
    gap: 16,
    justifyContent: 'center',
  },
  languageButton: {
    borderRadius: 14,
    borderWidth: 1,
    borderColor: Palette.ultraLightWhite,
    backgroundColor: Palette.ultraLightWhite,
    paddingVertical: 12,
    paddingHorizontal: 18,
    minWidth: 140,
    alignItems: 'center',
    flexDirection: 'row',
    gap: 8,
  },
  flagIcon: {
    width: 24,
    height: 18,
  },
  languageText: {
    fontSize: 16,
    color: Palette.white,
    fontFamily: FONT_FAMILY.InterSemiBold,
  },
  actions: {
    width: '100%',
    maxWidth: 320,
    gap: 16,
  },
  actionButton: {
    width: '100%',
  },
  freeCreditsCard: {
    width: '100%',
    borderRadius: 18,
    paddingVertical: 14,
    paddingHorizontal: 20,
    overflow: 'hidden',
  },
  freeCreditsContent: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 12,
  },
  freeCreditsTextContainer: {
    flex: 1,
    gap: 2,
  },
  freeCreditsTitle: {
    fontSize: 16,
    color: Palette.white,
    fontFamily: FONT_FAMILY.InterSemiBold,
  },
  freeCreditsSubtitle: {
    fontSize: 13,
    color: Palette.white,
    fontFamily: FONT_FAMILY.InterRegular,
  },
  freeCreditsClose: {
    padding: 6,
    marginLeft: 6,
  },
  freeCreditsCloseIcon: {
    width: 14,
    height: 14,
    tintColor: Palette.grayMid,
  },
})