Change main page and modify flows

src/screens/Writing/CreateLyricsWithAi.js

@@ -1,13 +1,13 @@
 import { View, Dimensions } from "react-native";
 import React, { useMemo, useRef, useState } from "react";
-import { useRoute } from "@react-navigation/native";
 import Page from "../../layouts/Page";
 import MusicLandHeader from "../../components/MusicLandHeader";
 import GradientButton from "../../components/GradientButton";
 import { gutters } from "../../styles";
 import { SwiperFlatList } from "react-native-swiper-flatlist";
 import Goals from "./Goals";
-import { goBack } from "../../navigation/NavigationService";
+import { goBack, navigate } from "../../navigation/NavigationService";
+import { Routes } from "../../navigation";
 import SpecificityContext from "./SpecificityContext";
 import EmotionConvey from "./EmotionConvey";
 import SongStyle from "./SongStyle";
@@ -20,42 +20,24 @@ import { responsiveHeight } from "react-native-responsive-dimensions";
 
 const { width } = Dimensions.get("window");
 
-const CreateLyricsWithAi = () => {
+const CreateLyricsWithAi = ({ route }) => {
+  const { hasLyrics = false, regenerateKey } = route?.params || {};
   const scrollRef = useRef(null);
-  const route = useRoute();
-  const regenerateKey = route?.params?.regenerateKey;
-  const [selectedIndex, setSelectedIndex] = useState(0);
+  // If user already has lyrics, start at SongStructure (index 5)
+  const [selectedIndex, setSelectedIndex] = useState(hasLyrics ? 5 : 0);
   const [progress, setProgress] = useState(16);
   const [parentLayout, setparentLayout] = useState(null);
 
   // Collected state across steps
-  const [objective, setObjective] = useState(
-    __DEV__ ? "Pour mon entreprise" : null,
-  ); // from Goals list
+  const [objective, setObjective] = useState(null); // from Goals list
   const [otherObjective, setOtherObjective] = useState("");
-  const [context, setContext] = useState(
-    __DEV__
-      ? "L'agence minuit est une agence de développement mobile et web qui accompagnes ses client dans la réalisations de projets divers et variés"
-      : "",
-  );
-  const [emotion, setEmotion] = useState(
-    __DEV__
-      ? {
-          title: "La Joie",
-          description:
-            "expose un bonheur profond, l'émerveillement, la gratitude, satisfaction intense, énergie positive",
-        }
-      : null,
-  ); // { title, description }
-  const [style, setStyle] = useState(__DEV__ ? "Upbeat" : null); // from list
+  const [context, setContext] = useState("");
+  const [emotion, setEmotion] = useState(null);
+  const [style, setStyle] = useState(null); // from list
   const [otherStyle, setOtherStyle] = useState("");
-  const [audience, setAudience] = useState(
-    __DEV__ ? "Aux clients de l'agence minuit" : "",
-  );
-  const [structure, setStructure] = useState(
-    __DEV__ ? "1 couplet, 1 refrain, 1 couplet, 1 refrain" : null,
-  ); // selected structure string
-  const [rhymes, setRhymes] = useState(__DEV__ ? "Avec rimes" : null);
+  const [audience, setAudience] = useState("");
+  const [structure, setStructure] = useState(null); // selected structure string
+  const [rhymes, setRhymes] = useState(null);
   const [customStructure, setCustomStructure] = useState(null); // array like ['couplet','refrain']
 
   const parsedStructure = useMemo(() => {
@@ -117,27 +99,61 @@ const CreateLyricsWithAi = () => {
   ]);
 
   const onPressNext = () => {
-    setSelectedIndex(selectedIndex + 1);
-    setProgress(progress + 9);
-    scrollRef.current.scrollToIndex({
-      index: selectedIndex + 1,
-      animated: true,
-    });
+    // If user already has lyrics and just finished CustomizeSongStructure (index 6),
+    // skip AI generation and go straight to Lyrics editor
+    if (hasLyrics && selectedIndex === 6) {
+      const chosenStructure =
+        (customStructure &&
+        parsedStructure &&
+        customStructure.length === parsedStructure.length
+          ? customStructure
+          : parsedStructure) || [];
+      navigate(Routes.Lyrics, {
+        config: { structure: chosenStructure },
+        selections: {
+          objective,
+          otherObjective,
+          context,
+          emotion,
+          style,
+          otherStyle,
+          audience,
+          structure,
+          parsedStructure,
+          customStructure,
+          rhymes,
+        },
+        hasLyrics: true,
+      });
+      return;
+    }
+    setSelectedIndex((idx) => idx + 1);
   };
 
   const onPressBack = () => {
-    if (selectedIndex > 0) {
-      setSelectedIndex(selectedIndex - 1);
-      setProgress(progress - 9);
-      scrollRef.current.scrollToIndex({
-        index: selectedIndex - 1,
-        animated: true,
-      });
+    // If currently on SongStructure, go back to previous screen instead of previous step
+    if (selectedIndex === 5) {
+      goBack();
+    } else if (selectedIndex > 0) {
+      setSelectedIndex((idx) => Math.max(0, idx - 1));
     } else {
       goBack();
     }
   };
 
+  // Sync scroll position and progress with selectedIndex
+  React.useEffect(() => {
+    if (!parentLayout?.height) return;
+    try {
+      const nextProgress = 16 + selectedIndex * 9;
+      setProgress(nextProgress);
+      scrollRef.current?.scrollToIndex?.({
+        index: selectedIndex,
+        animated: true,
+      });
+    } catch (_) {}
+  }, [selectedIndex, parentLayout?.height]);
+
   return (
     <Page headerType="NONE">
       <MusicLandHeader
@@ -160,6 +176,7 @@ const CreateLyricsWithAi = () => {
             style={{ width, left: -gutters }}
             ref={scrollRef}
             disableGesture
+            index={selectedIndex}
           >
             <View
               style={{