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 FullscreenIntroVideo from "../components/FullscreenIntroVideo";
import GradientButton from "../components/GradientButton";
import { LinearGradient } from "../components/LinearGradient/LinearGradient";
import { videosRef } from "../config/firebase";
import useDataFromRef from "../hooks/useDataFromRef";
import Page from "../layouts/Page";
import { Routes } from "../navigation/Routes";
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 [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);
      });

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

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

  return (
    <>
      <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")}
                >
                  <Text style={styles.languageText}>🇫🇷 Français</Text>
                </TouchableOpacity>
                <TouchableOpacity
                  style={[styles.languageButton]}
                  onPress={() => handleSelectLanguage("en")}
                >
                  <Text style={styles.languageText}>🇬🇧 English</Text>
                </TouchableOpacity>
              </View>
            )}
            {selectedLanguage && (
              <View style={styles.actions}>
                {showFreeCreditsPopup && (
                  <BlurView style={styles.freeCreditsCard}>
                    <View style={styles.freeCreditsContent}>
                      <View style={styles.freeCreditsTextContainer}>
                        <Text style={styles.freeCreditsTitle}>
                          Tu as 5 crédits gratuits
                        </Text>
                        <Text style={styles.freeCreditsSubtitle}>
                          pour 1 parcours offert !
                        </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>
                )}
                <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}
              </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",
  },
  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,
  },
  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,
  },
});