generate two covers

2025-10-23 10:16:36 +02:00
parent b4375d04be
commit ebe26542fe
9 changed files with 754 additions and 436 deletions
@@ -125,16 +125,18 @@ const Studio = () => {
                navigate(Routes.SongReady);
              }}
            />
-            <GradientButton
-              title="Générer une pochette"
-              containerStyle={{
-                marginTop: responsiveHeight(2),
-              }}
-              onPress={() => {
-                selectProject(selected.id);
-                navigate(Routes.PouchReady);
-              }}
-            />
+            {!selected?.coverUrl && (
+              <GradientButton
+                title="Générer une pochette"
+                containerStyle={{
+                  marginTop: responsiveHeight(2),
+                }}
+                onPress={() => {
+                  selectProject(selected.id);
+                  navigate(Routes.PouchReady);
+                }}
+              />
+            )}
          </>
        )}
      </View>
@@ -1,9 +1,23 @@
-import React from "react";
-import { Image, StyleSheet, Text, TouchableOpacity, View } from "react-native";
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import {
+  Image,
+  ScrollView,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} from "react-native";
 import { icons } from "../../assets";
 import { Palette } from "../../styles";
 import { FONT_FAMILY } from "../../styles/Fonts";
 import {
+  arraysAreSame,
  formatStructureLabel,
  getSegmentMeta,
  OPTIONAL_STRUCTURE_SEGMENTS,
@@ -17,17 +31,16 @@ const getScrollY = () => (typeof window !== "undefined" ? window.scrollY : 0);

 const randomSuffix = () => Math.random().toString(36).slice(2, 8);

-const buildSortableItems = (values = []) => {
-  const counters = {};
-  return sanitizeStructureList(values).map((segment, index) => {
-    counters[segment] = (counters[segment] || 0) + 1;
-    return {
-      id: `${segment}-${index}-${randomSuffix()}`,
-      type: segment,
-      value: segment,
-    };
-  });
-};
+const createSortableItem = (type, index = 0) => ({
+  id: `${type}-${index}-${randomSuffix()}`,
+  type,
+  value: type,
+});
+
+const buildSortableItems = (values = []) =>
+  sanitizeStructureList(values).map((type, index) =>
+    createSortableItem(type, index)
+  );

 const reorder = (list, from, to) => {
  if (from === to) return list;
@@ -40,108 +53,137 @@ const reorder = (list, from, to) => {
 const clamp = (value, min, max) => Math.max(min, Math.min(max, value));

 const CustomizeSongStructure = ({ baseStructure = [], onChange }) => {
-  const sanitized = React.useMemo(
+  const sanitizedBase = useMemo(
    () => sanitizeStructureList(baseStructure),
    [baseStructure]
  );
-  const [items, setItems] = React.useState(() => buildSortableItems(sanitized));
-  const [activeItemId, setActiveItemId] = React.useState(null);
-  const containerRef = React.useRef(null);
-  const dragStateRef = React.useRef({
+  const [sortableItems, setSortableItems] = useState(() =>
+    buildSortableItems(sanitizedBase)
+  );
+  const [activeItemId, setActiveItemId] = useState(null);
+  const containerRef = useRef(null);
+  const dragStateRef = useRef({
    itemId: null,
    containerTop: 0,
  });

-  React.useEffect(() => {
-    console.debug("[CustomizeSongStructure.web] sanitized", sanitized);
-    setItems(buildSortableItems(sanitized));
-    dragStateRef.current = { itemId: null, containerTop: 0 };
-    setActiveItemId(null);
-  }, [sanitized]);
+  const extractValues = useCallback(
+    (items) =>
+      (items || []).map((item) => item?.type || item?.value).filter(Boolean),
+    []
+  );

-  React.useEffect(() => {
-    console.debug("[CustomizeSongStructure.web] items", items);
-    onChange?.(
-      items.map((item) => (item?.type || item?.value)).filter(Boolean)
-    );
-  }, [items, onChange]);
+  useEffect(() => {
+    setSortableItems((prev) => {
+      const currentValues = extractValues(prev);
+      if (arraysAreSame(currentValues, sanitizedBase)) {
+        return prev;
+      }
+      return buildSortableItems(sanitizedBase);
+    });
+  }, [sanitizedBase, extractValues]);

-  const labeledItems = React.useMemo(() => {
+  useEffect(() => {
+    onChange?.(extractValues(sortableItems));
+  }, [sortableItems, extractValues, onChange]);
+
+  const labeledItems = useMemo(() => {
    const counts = {};
-    return items.map((item) => {
-      const type = item?.type || item?.value;
-      counts[type] = (counts[type] || 0) + 1;
+    return sortableItems.map((item) => {
+      const baseType = item.type || item.value;
+      const nextCount = (counts[baseType] || 0) + 1;
+      counts[baseType] = nextCount;
      return {
        ...item,
-        type,
-        value: type,
-        label: formatStructureLabel(type, counts[type]),
+        type: baseType,
+        value: baseType,
+        label: formatStructureLabel(baseType, nextCount),
      };
    });
-  }, [items]);
+  }, [sortableItems]);

-  const selectedTypes = React.useMemo(() => {
-    const set = new Set();
-    items.forEach((item) => {
-      if (item?.type) set.add(item.type);
-      else if (item?.value) set.add(item.value);
-    });
-    return set;
-  }, [items]);
-
-  const optionalSegments = React.useMemo(
+  const optionalSegments = useMemo(
    () =>
      OPTIONAL_STRUCTURE_SEGMENTS.map((type) => {
        const meta = getSegmentMeta(type);
-        return { type, label: meta?.label };
+        return { type, label: meta?.label || formatStructureLabel(type, 1) };
      }),
    []
  );

-  const toggleOptionalSegment = React.useCallback((type) => {
-    setItems((prev) => {
-      const currentValues = prev.map((item) => item.type || item.value);
-      if (currentValues.includes(type)) {
-        const filtered = currentValues.filter((value) => value !== type);
-        return buildSortableItems(filtered);
-      }
-      const meta = getSegmentMeta(type);
-      let nextValues = [...currentValues];
-      if (meta?.exclusiveGroup) {
-        nextValues = nextValues.filter((value) => {
-          const itemMeta = getSegmentMeta(value);
-          return itemMeta?.exclusiveGroup !== meta.exclusiveGroup;
-        });
-      }
-      nextValues.push(type);
-      return buildSortableItems(nextValues);
+  const segmentCounts = useMemo(() => {
+    const counts = {};
+    extractValues(sortableItems).forEach((type) => {
+      counts[type] = (counts[type] || 0) + 1;
    });
-  }, []);
+    return counts;
+  }, [sortableItems, extractValues]);

-  const handleGrant = (index, event) => {
-    const item = labeledItems[index];
-    if (!item) return;
-    const rect = containerRef.current?.getBoundingClientRect();
-    const scrollY = getScrollY();
-    const nativeEvent = event.nativeEvent || {};
-    const fallbackY =
-      typeof nativeEvent.pageY === "number"
-        ? nativeEvent.pageY
-        : typeof nativeEvent.clientY === "number"
-          ? nativeEvent.clientY + scrollY
-          : scrollY;
-    const containerTop = rect ? rect.top + scrollY : fallbackY;
-    dragStateRef.current = {
-      itemId: item.id,
-      containerTop,
-    };
-    setActiveItemId(item.id);
-    if (typeof document !== "undefined") {
-      document.body.style.userSelect = "none";
-    }
-  };
+  const handleRemoveItem = useCallback(
+    (itemId) => {
+      setSortableItems((prev) => {
+        const remaining = prev.filter((item) => item.id !== itemId);
+        const sanitized = sanitizeStructureList(extractValues(remaining));
+        return buildSortableItems(sanitized);
+      });
+    },
+    [extractValues]
+  );

-  const handleMove = (event) => {
+  const handleOptionalSegmentPress = useCallback(
+    (type) => {
+      const meta = getSegmentMeta(type);
+      setSortableItems((prev) => {
+        const currentValues = extractValues(prev);
+        let nextValues = [...currentValues];
+
+        if (meta?.exclusiveGroup) {
+          nextValues = nextValues.filter((value) => {
+            const itemMeta = getSegmentMeta(value);
+            return itemMeta?.exclusiveGroup !== meta.exclusiveGroup;
+          });
+        }
+
+        const allowsMultiple = meta?.allowMultiple !== false;
+        if (!allowsMultiple && nextValues.includes(type)) {
+          const filtered = nextValues.filter((value) => value !== type);
+          const sanitized = sanitizeStructureList(filtered);
+          return buildSortableItems(sanitized);
+        }
+
+        nextValues.push(type);
+        const sanitized = sanitizeStructureList(nextValues);
+        return buildSortableItems(sanitized);
+      });
+    },
+    [extractValues]
+  );
+
+  const handleGrant = useCallback(
+    (itemId, event) => {
+      const rect = containerRef.current?.getBoundingClientRect();
+      const scrollY = getScrollY();
+      const nativeEvent = event.nativeEvent || {};
+      const fallbackY =
+        typeof nativeEvent.pageY === "number"
+          ? nativeEvent.pageY
+          : typeof nativeEvent.clientY === "number"
+            ? nativeEvent.clientY + scrollY
+            : scrollY;
+      const containerTop = rect ? rect.top + scrollY : fallbackY;
+      dragStateRef.current = {
+        itemId,
+        containerTop,
+      };
+      setActiveItemId(itemId);
+      if (typeof document !== "undefined") {
+        document.body.style.userSelect = "none";
+      }
+    },
+    []
+  );
+
+  const handleMove = useCallback((event) => {
    const { itemId, containerTop } = dragStateRef.current;
    if (!itemId) return;
    const nativeEvent = event.nativeEvent || {};
@@ -154,7 +196,7 @@ const CustomizeSongStructure = ({ baseStructure = [], onChange }) => {
          : scrollY;
    const pointerY = absoluteY - containerTop;

-    setItems((prev) => {
+    setSortableItems((prev) => {
      const currentIndex = prev.findIndex((it) => it.id === itemId);
      if (currentIndex === -1) return prev;
      const targetIndex = clamp(
@@ -165,11 +207,11 @@ const CustomizeSongStructure = ({ baseStructure = [], onChange }) => {
      if (targetIndex === currentIndex) return prev;
      return reorder(prev, currentIndex, targetIndex);
    });
-  };
+  }, []);

-  const handleRelease = () => {
-    setItems((prev) =>
-      buildSortableItems(prev.map((item) => item.type || item.value))
+  const handleRelease = useCallback(() => {
+    setSortableItems((prev) =>
+      buildSortableItems(extractValues(prev))
    );
    dragStateRef.current = {
      itemId: null,
@@ -179,86 +221,94 @@ const CustomizeSongStructure = ({ baseStructure = [], onChange }) => {
    if (typeof document !== "undefined") {
      document.body.style.userSelect = "";
    }
-  };
+  }, [extractValues]);

-  if (!labeledItems.length) {
+  const StructureRow = ({ item }) => {
+    const baseType = item?.type || item?.value;
+    const meta = getSegmentMeta(baseType);
+    const canRemove = meta?.optional === true;
    return (
-      <View style={{ flex: 1, gap: 10, marginTop: 16 }}>
-        <CreateLyricsHeader
-          title="Personnalise la structure de ta chanson"
-          subTitle="Sélectionne une structure pour commencer"
-        />
-        <View style={styles.optionsContainer}>
-          {optionalSegments.map((segment) => {
-            const selected = selectedTypes.has(segment.type);
-            return (
+      <View
+        style={[
+          styles.itemContainer,
+          activeItemId === item.id && styles.activeItem,
+        ]}
+      >
+        <View style={styles.row}>
+          <Text style={styles.rowText}>{item.label}</Text>
+          <View style={styles.rowActions}>
+            {canRemove && (
              <TouchableOpacity
-                key={segment.type}
-                activeOpacity={0.85}
-                onPress={() => toggleOptionalSegment(segment.type)}
-                style={[styles.optionItem, selected && styles.selectedItem]}
+                onPress={() => handleRemoveItem(item.id)}
+                style={styles.removeButton}
+                hitSlop={{ top: 8, right: 8, bottom: 8, left: 8 }}
              >
-                <Text style={styles.optionText}>{segment.label}</Text>
-                <Image
-                  source={selected ? icons.check : icons.add}
-                  style={[styles.optionIcon]}
-                />
+                <Image source={icons.close} style={styles.removeIcon} />
              </TouchableOpacity>
-            );
-          })}
+            )}
+            <View
+              style={styles.handleWrapper}
+              onStartShouldSetResponder={() => true}
+              onResponderGrant={(event) => handleGrant(item.id, event)}
+              onResponderMove={handleMove}
+              onResponderRelease={handleRelease}
+              onResponderTerminate={handleRelease}
+            >
+              <Image source={icons.dragDots} style={styles.handleIcon} />
+            </View>
+          </View>
        </View>
      </View>
    );
-  }
+  };

  return (
    <View style={{ flex: 1, gap: 10, marginTop: 16 }}>
      <CreateLyricsHeader
        title="Personnalise la structure de ta chanson"
-        subTitle="Glisse-dépose pour réorganiser"
+        subTitle="Réorganise par glisser-déposer"
      />
-      <View style={styles.listContainer} ref={containerRef}>
-        {labeledItems.map((item, index) => (
-          <View
-            key={item.id}
-            style={[
-              styles.itemContainer,
-              activeItemId === item.id && styles.activeItem,
-            ]}
-            onStartShouldSetResponder={() => true}
-            onResponderGrant={(event) => handleGrant(index, event)}
-            onResponderMove={handleMove}
-            onResponderRelease={handleRelease}
-            onResponderTerminate={handleRelease}
-          >
-            <View style={styles.row}>
-              <Text style={styles.rowText}>{item.label}</Text>
-              <Image source={icons.dragDots} style={styles.handleIcon} />
-            </View>
+      <View style={{ flex: 1 }}>
+        <ScrollView
+          contentContainerStyle={styles.scrollContent}
+          showsVerticalScrollIndicator={false}
+        >
+          <View style={styles.sectionTag}>
+            <Text style={styles.sectionTagText}>Structure actuelle</Text>
          </View>
-        ))}
-      </View>
-      <View style={styles.optionsContainer}>
-        {optionalSegments.map((segment) => {
-          const selected = selectedTypes.has(segment.type);
-          return (
-            <TouchableOpacity
-              key={segment.type}
-              activeOpacity={0.85}
-              onPress={() => toggleOptionalSegment(segment.type)}
-              style={[styles.optionItem, selected && styles.selectedItem]}
-            >
-              <Text style={styles.optionText}>{segment.label}</Text>
-              <Image
-                source={selected ? icons.check : icons.add}
-                style={[
-                  styles.optionIcon,
-                  selected && styles.optionIconSelected,
-                ]}
-              />
-            </TouchableOpacity>
-          );
-        })}
+          <View style={styles.listContainer} ref={containerRef}>
+            {labeledItems.map((item) => (
+              <StructureRow key={item.id} item={item} />
+            ))}
+          </View>
+          <View style={[styles.sectionTag, styles.addSectionTag]}>
+            <Text style={styles.sectionTagText}>Éléments à ajouter</Text>
+          </View>
+          <View style={styles.optionsContainer}>
+            {optionalSegments.map((segment) => {
+              const count = segmentCounts[segment.type] || 0;
+              const selected = count > 0;
+              return (
+                <TouchableOpacity
+                  key={segment.type}
+                  activeOpacity={0.85}
+                  onPress={() => handleOptionalSegmentPress(segment.type)}
+                  style={[styles.optionItem, selected && styles.selectedItem]}
+                >
+                  <Text style={styles.rowText}>{segment.label}</Text>
+                  <View
+                    style={[
+                      styles.countBadge,
+                      selected && styles.countBadgeActive,
+                    ]}
+                  >
+                    <Text style={styles.countBadgeText}>{count}</Text>
+                  </View>
+                </TouchableOpacity>
+              );
+            })}
+          </View>
+        </ScrollView>
      </View>
    </View>
  );
@@ -267,8 +317,29 @@ const CustomizeSongStructure = ({ baseStructure = [], onChange }) => {
 export default CustomizeSongStructure;

 const styles = StyleSheet.create({
+  scrollContent: {
+    paddingBottom: 24,
+    gap: 12,
+  },
+  sectionTag: {
+    alignSelf: "flex-start",
+    paddingHorizontal: 12,
+    paddingVertical: 6,
+    borderRadius: 999,
+    backgroundColor: "rgba(255,255,255,0.12)",
+    marginTop: 12,
+  },
+  addSectionTag: {
+    marginTop: 24,
+  },
+  sectionTagText: {
+    fontSize: 12,
+    color: Palette.white,
+    fontFamily: FONT_FAMILY.InterSemiBold,
+    letterSpacing: 1,
+    textTransform: "uppercase",
+  },
  listContainer: {
-    flex: 1,
    gap: 12,
  },
  itemContainer: {
@@ -298,6 +369,25 @@ const styles = StyleSheet.create({
    color: Palette.white,
    fontFamily: FONT_FAMILY.InterRegular,
  },
+  rowActions: {
+    flexDirection: "row",
+    alignItems: "center",
+  },
+  removeButton: {
+    padding: 6,
+    borderRadius: 999,
+    backgroundColor: "rgba(255,255,255,0.08)",
+    marginRight: 8,
+  },
+  removeIcon: {
+    width: 16,
+    height: 16,
+    tintColor: Palette.white,
+  },
+  handleWrapper: {
+    padding: 6,
+    borderRadius: 999,
+  },
  handleIcon: {
    width: 22,
    height: 22,
@@ -305,8 +395,8 @@ const styles = StyleSheet.create({
    cursor: "grab",
  },
  optionsContainer: {
-    marginTop: 16,
    gap: 12,
+    marginTop: 12,
  },
  optionItem: {
    height: ROW_HEIGHT,
@@ -323,19 +413,25 @@ const styles = StyleSheet.create({
    alignItems: "center",
    justifyContent: "space-between",
  },
-  optionText: {
-    fontSize: 16,
-    color: Palette.white,
-    fontFamily: FONT_FAMILY.InterRegular,
-  },
-  optionIcon: {
-    width: 20,
-    height: 20,
-    tintColor: Palette.white,
-  },
-
  selectedItem: {
    borderWidth: 1,
    borderColor: Palette.white,
  },
+  countBadge: {
+    minWidth: 28,
+    paddingHorizontal: 8,
+    paddingVertical: 4,
+    borderRadius: 999,
+    backgroundColor: "rgba(255,255,255,0.08)",
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  countBadgeActive: {
+    backgroundColor: Palette.transparentWhite,
+  },
+  countBadgeText: {
+    fontSize: 14,
+    color: Palette.white,
+    fontFamily: FONT_FAMILY.InterMedium,
+  },
 });
@@ -36,6 +36,10 @@ export const ChooseCoverType = () => {
  const { setIsLoading, setTooltip } = useMinuit();

  const projectId = selectedProject?.id || selectedProjectId || null;
+  const hasFinalCover = !!selectedProject?.coverUrl;
+  const hasGeneratedOptions = Array.isArray(selectedProject?.cover?.options)
+    ? selectedProject.cover.options.length > 0
+    : false;

  const hasArtistPreference = useMemo(() => {
    if (currentUserData?.userName) return true;
@@ -160,8 +164,12 @@ export const ChooseCoverType = () => {
  // }, [ensureArtistPreference, pickUserImage]);

  const handleGenerateCover = useCallback(() => {
+    if (hasFinalCover || hasGeneratedOptions) {
+      navigate(Routes.ValidateCover);
+      return;
+    }
    ensureArtistPreference(() => navigate(Routes.PouchReady));
-  }, [ensureArtistPreference]);
+  }, [ensureArtistPreference, hasFinalCover, hasGeneratedOptions]);

  const closeChoiceModal = useCallback(() => {
    setChoiceVisible(false);
@@ -296,8 +304,11 @@ export const ChooseCoverType = () => {
            onPress={handlePickUserImage}
          /> */}
          <GradientButton
-            title="Générer une pochette"
+            title={
+              hasFinalCover ? "Pochette déjà validée" : "Générer une pochette"
+            }
            onPress={handleGenerateCover}
+            disabled={hasFinalCover}
          />
        </View>
      </View>
@@ -2,7 +2,6 @@ import { Image as ExpoImage } from "expo-image";
 import React from "react";
 import { ActivityIndicator, Text, View } from "react-native";
 import { background } from "../../assets";
-import BorderGradientButton from "../../components/BorderGradientButton";
 import GradientButton from "../../components/GradientButton";
 import MusicLandHeader from "../../components/MusicLandHeader";
 import loaderMessages from "../../config/loaderMessages";
@@ -21,9 +20,14 @@ const PhotoCover = () => {
    ? loaderMessages.photoCoverGenerationWeb
    : "";

+  const coverOptions = Array.isArray(selectedProject?.cover?.options)
+    ? selectedProject.cover.options
+    : [];
  const coverUrl =
    selectedProject?.cover?.result ||
    selectedProject?.cover?.generatedBackground ||
+    coverOptions?.[0]?.finalUrl ||
+    coverOptions?.[0]?.generatedUrl ||
    null;

  return (
@@ -115,11 +119,6 @@ const PhotoCover = () => {
          gap: 12,
        }}
      >
-        <BorderGradientButton
-          onPress={() => navigate(Routes.PouchReady)}
-          title="Regénérer la pochette"
-          disabled={isGenerating}
-        />
        <GradientButton
          title="Valider la pochette"
          onPress={() => navigate(Routes.ValidateCover)}
@@ -1,6 +1,5 @@
-import { useIsFocused } from "@react-navigation/native";
 import { Image as ExpoImage } from "expo-image";
-import React, { useCallback, useEffect } from "react";
+import React, { useCallback, useEffect, useState } from "react";
 import { ActivityIndicator, Text, View } from "react-native";
 import useMinuit from "react-native-minuit/src/hooks/useMinuit.js";
 import { background, icons } from "../../assets";
@@ -17,20 +16,48 @@ import { goBack, navigate } from "../../navigation/NavigationService";
 import { useUser } from "../../providers/UserDataProvider";
 import { gutters, Palette, Style } from "../../styles";
 import CreateLyricsHeader from "../Writing/components/CreateLyricsHeader";
+import CustomInput from "../Writing/components/CustomInput";

 const PouchReady = () => {
-  const { selectedProjectId, selectedProject } = useUser();
+  const { selectedProjectId, selectedProject, updateProjectData } = useUser();
  const { setIsLoading } = useMinuit();
  const isGenerating = selectedProject?.coverStatus === "GENERATING";
-  const isFocused = useIsFocused();
+  const coverOptions = Array.isArray(selectedProject?.cover?.options)
+    ? selectedProject.cover.options
+    : [];
+  const hasGeneratedOptions = coverOptions.length > 0;
  const coverBackgroundMessage = isWeb
    ? loaderMessages.pouchReadyGenerationWeb
    : "";

-  const generateCover = useCallback(async () => {
+  const [coverStyle, setCoverStyle] = useState(
+    selectedProject?.coverStyle || ""
+  );
+
+  useEffect(() => {
+    setCoverStyle(selectedProject?.coverStyle || "");
+  }, [selectedProject?.coverStyle]);
+
+  const generateCover = useCallback(async (styleValue) => {
    if (!selectedProjectId) return;
+    if (hasGeneratedOptions) {
+      return;
+    }
+    const trimmedStyle = String(styleValue || "").trim();
+    if (!trimmedStyle) {
+      alert("Attention", "Merci de renseigner un style pour la pochette.", [
+        { text: "OK" },
+      ]);
+      return;
+    }
    try {
      await setIsLoading(true);
+      await updateProjectData(
+        {
+          coverStyle: trimmedStyle,
+        },
+        { merge: true }
+      );
      await tasksRef.add({
        type: "cover",
        projectId: selectedProjectId,
@@ -42,40 +69,49 @@ const PouchReady = () => {
    } finally {
      setIsLoading(false);
    }
-  }, [selectedProjectId, setIsLoading]);
+  }, [hasGeneratedOptions, selectedProjectId, setIsLoading, updateProjectData]);
+
+  const requestCoverGeneration = useCallback(() => {
+    const trimmedStyle = (coverStyle || "").trim();
+    if (!trimmedStyle) {
+      alert("Attention", "Merci de renseigner un style pour la pochette.", [
+        { text: "OK" },
+      ]);
+      return;
+    }
+    alert("Attention", "Générer une pochette ?", [
+      {
+        text: "Annuler",
+        style: "cancel",
+      },
+      {
+        text: "Oui",
+        onPress: () => generateCover(trimmedStyle),
+      },
+    ]);
+  }, [coverStyle, generateCover]);

  const validateCover = () => {
    navigate(Routes.ValidateCover);
  };

-  useEffect(() => {
-    if (
-      isFocused &&
-      !selectedProject?.cover?.generatedBackground &&
-      selectedProject?.coverStatus !== "GENERATING"
-    ) {
-      alert(
-        "Attention",
-        "Générer une pochette ?",
-        [
-          {
-            text: "Oui",
-            onPress: generateCover,
-          },
-          {
-            text: "Non",
-          },
-        ],
-        { cancelable: true }
-      );
-    }
-  }, [generateCover, isFocused, selectedProject]);
-
  const coverPreviewUrl =
    selectedProject?.cover?.result ||
    selectedProject?.cover?.generatedBackground ||
    null;

+  const displayOptions = hasGeneratedOptions
+    ? coverOptions
+    : coverPreviewUrl
+      ? [
+          {
+            id: "preview",
+            finalUrl: selectedProject?.cover?.result || null,
+            generatedUrl: coverPreviewUrl,
+          },
+        ]
+      : [];
+
  return (
    <Page backgroundImg={background.studioBG2} headerType="NONE">
      <MusicLandHeader onPressBack={goBack} progress={72} />
@@ -89,37 +125,82 @@ const PouchReady = () => {
          // subTitle="Qu’en penses-tu ?"
        />
        <View style={{ flex: 1, ...Style.containerCenter }}>
-          <View style={{ width: "80%", position: "relative" }}>
-            {coverPreviewUrl && !isGenerating ? (
-              <ExpoImage
-                source={{ uri: coverPreviewUrl }}
-                cachePolicy="memory-disk"
-                priority="high"
-                contentFit="cover"
-                transition={120}
-                style={{
-                  width: isWeb ? 300 : "100%",
-                  height: 300,
-                  borderRadius: 20,
-                  alignSelf: "center",
-                }}
-              />
-            ) : (
-              <View
-                style={{
-                  width: isWeb ? 300 : "100%",
-                  height: 300,
-                  borderRadius: 20,
-                  backgroundColor: "#00000040",
-                  alignSelf: "center",
-                  ...Style.containerCenter,
-                }}
-              >
-                {isGenerating && (
-                  <View style={{ alignItems: "center", gap: 8 }}>
-                    <ActivityIndicator color={Palette.white} />
-                    {isWeb ? (
-                      coverBackgroundMessage ? (
+          <View style={{ width: "80%", gap: 24 }}>
+            <View
+              style={{
+                width: "100%",
+                flexDirection: isWeb ? "row" : "column",
+                gap: 16,
+                justifyContent: "center",
+                flexWrap: "wrap",
+              }}
+            >
+              {displayOptions.length > 0 ? (
+                displayOptions.map((option, index) => {
+                  const optionUri = option?.finalUrl || option?.generatedUrl || "";
+                  if (!optionUri) return null;
+                  return (
+                    <View
+                      key={option?.id || index}
+                      style={{
+                        width: isWeb ? 280 : "100%",
+                        alignItems: "center",
+                        gap: 8,
+                      }}
+                    >
+                      <ExpoImage
+                        source={{ uri: optionUri }}
+                        cachePolicy="memory-disk"
+                        priority="high"
+                        contentFit="cover"
+                        transition={120}
+                        style={{
+                          width: "100%",
+                          height: 260,
+                          borderRadius: 20,
+                        }}
+                      />
+                      {hasGeneratedOptions && (
+                        <Text
+                          style={{
+                            color: Palette.white,
+                            opacity: 0.7,
+                          }}
+                        >
+                          Pochette {index + 1}
+                        </Text>
+                      )}
+                    </View>
+                  );
+                })
+              ) : (
+                <View
+                  style={{
+                    width: isWeb ? 300 : "100%",
+                    height: 300,
+                    borderRadius: 20,
+                    backgroundColor: "#00000040",
+                    alignSelf: "center",
+                    ...Style.containerCenter,
+                  }}
+                >
+                  {isGenerating && (
+                    <View style={{ alignItems: "center", gap: 8 }}>
+                      <ActivityIndicator color={Palette.white} />
+                      {isWeb ? (
+                        coverBackgroundMessage ? (
+                          <Text
+                            style={{
+                              color: Palette.white,
+                              marginTop: 6,
+                              textAlign: "center",
+                              opacity: 0.9,
+                            }}
+                          >
+                            {coverBackgroundMessage}
+                          </Text>
+                        ) : null
+                      ) : (
                        <Text
                          style={{
                            color: Palette.white,
@@ -128,66 +209,23 @@ const PouchReady = () => {
                            opacity: 0.9,
                          }}
                        >
-                          {coverBackgroundMessage}
+                          Génération en cours.
                        </Text>
-                      ) : null
-                    ) : (
-                      <Text
-                        style={{
-                          color: Palette.white,
-                          marginTop: 6,
-                          textAlign: "center",
-                          opacity: 0.9,
-                        }}
-                      >
-                        Génération en cours.
-                      </Text>
-                    )}
-                  </View>
-                )}
-              </View>
-            )}
-            {/*<View*/}
-            {/*  style={{*/}
-            {/*    position: "absolute",*/}
-            {/*    alignSelf: "center",*/}
-            {/*    alignItems: "center",*/}
-            {/*    top: 10,*/}
-            {/*  }}*/}
-            {/*>*/}
-            {/*  <Text*/}
-            {/*    style={{*/}
-            {/*      fontSize: 22,*/}
-            {/*      color: Palette.white,*/}
-            {/*      fontFamily: FONT_FAMILY.InterSemiBold,*/}
-            {/*    }}*/}
-            {/*  >*/}
-            {/*    {title || "Titre"}*/}
-            {/*  </Text>*/}
-            {/*  <Text*/}
-            {/*    style={{*/}
-            {/*      fontSize: 14,*/}
-            {/*      color: Palette.gray,*/}
-            {/*      fontFamily: FONT_FAMILY.InterRegular,*/}
-            {/*    }}*/}
-            {/*  >*/}
-            {/*    MusicLand*/}
-            {/*  </Text>*/}
-            {/*</View>*/}
-            {/*<View*/}
-            {/*  style={{*/}
-            {/*    position: "absolute",*/}
-            {/*    alignItems: "center",*/}
-            {/*    bottom: 10,*/}
-            {/*    width: "100%",*/}
-            {/*  }}*/}
-            {/*>*/}
-            {/*  <Image*/}
-            {/*    source={icons.musicLandLogo}*/}
-            {/*    style={{ width: "100%", height: 30 }}*/}
-            {/*    resizeMode="contain"*/}
-            {/*  />*/}
-            {/*</View>*/}
+                      )}
+                    </View>
+                  )}
+                </View>
+              )}
+            </View>
+            <CustomInput
+              label="Style de la pochette"
+              placeholder="Exemple : Collage rétro futuriste lumineux"
+              value={coverStyle}
+              setValue={setCoverStyle}
+              multiline={false}
+              height={55}
+              maxLength={120}
+            />
          </View>
        </View>
      </View>
@@ -199,12 +237,14 @@ const PouchReady = () => {
          gap: 12,
        }}
      >
-        <BorderGradientButton
-          title={isGenerating ? "Génération en cours..." : "Regénérer"}
-          icon={icons.stars}
-          onPress={generateCover}
-          disabled={isGenerating}
-        />
+        {!hasGeneratedOptions && (
+          <BorderGradientButton
+            title={isGenerating ? "Génération en cours..." : "Générer la pochette"}
+            icon={icons.stars}
+            onPress={requestCoverGeneration}
+            disabled={isGenerating}
+          />
+        )}
        <GradientButton
          title={isGenerating ? "Veuillez patienter..." : "Valider"}
          disabled={isGenerating || !coverPreviewUrl}
@@ -1,8 +1,8 @@
-import React from "react";
-import { Image, View } from "react-native";
+import { Image as ExpoImage } from "expo-image";
+import React, { useCallback, useMemo, useState } from "react";
+import { Pressable, Text, View } from "react-native";
 import useMinuit from "react-native-minuit/src/hooks/useMinuit.js";
-import { background, img } from "../../assets";
-import BorderGradientButton from "../../components/BorderGradientButton";
+import { background } from "../../assets";
 import GradientButton from "../../components/GradientButton";
 import MusicLandHeader from "../../components/MusicLandHeader";
 import { isWeb } from "../../hooks/useLayoutType";
@@ -10,14 +10,34 @@ import Page from "../../layouts/Page";
 import { Routes } from "../../navigation";
 import { goBack, navigate } from "../../navigation/NavigationService";
 import { useUserData } from "../../providers/UserDataProvider";
-import { gutters, Style } from "../../styles";
+import { gutters, Palette, Style } from "../../styles";
 import CreateLyricsHeader from "../Writing/components/CreateLyricsHeader";

 const ValidateCover = () => {
  const { selectedProject, updateProjectData } = useUserData();
-
  const { setIsLoading } = useMinuit();

+  const coverOptions = useMemo(() => {
+    if (!Array.isArray(selectedProject?.cover?.options)) {
+      return [];
+    }
+    return selectedProject.cover.options.filter((option) => option);
+  }, [selectedProject]);
+
+  const selectedOptionId = selectedProject?.cover?.selectedOptionId || null;
+  const selectedOption = useMemo(() => {
+    if (!coverOptions.length) {
+      return null;
+    }
+    const found = coverOptions.find(
+      (option) => option?.id === selectedOptionId
+    );
+    return found || coverOptions[0] || null;
+  }, [coverOptions, selectedOptionId]);
+
+  const isMultipleOptions = coverOptions.length > 1;
+  const [isSelecting, setIsSelecting] = useState(false);
+
  async function onStartAgain() {
    try {
      await setIsLoading(true);
@@ -32,11 +52,59 @@ const ValidateCover = () => {
      await setIsLoading(false);
    }
  }
+
+  const handleSelectOption = useCallback(
+    async (option) => {
+      if (!option || option?.id === selectedOptionId || isSelecting) {
+        return;
+      }
+      const existingCover = selectedProject?.cover || {};
+      const finalUrl = option.finalUrl || option.generatedUrl || null;
+      setIsSelecting(true);
+      try {
+        await updateProjectData({
+          cover: {
+            ...existingCover,
+            options: coverOptions,
+            selectedOptionId: option.id,
+            result: finalUrl,
+            generatedBackground: option.generatedUrl || option.finalUrl || null,
+          },
+        });
+      } catch (e) {
+        console.log("ValidateCover: unable to select cover", e?.message);
+      } finally {
+        setIsSelecting(false);
+      }
+    },
+    [
+      coverOptions,
+      isSelecting,
+      selectedOptionId,
+      selectedProject,
+      updateProjectData,
+    ]
+  );
+
  async function onValidatePicture() {
+    if (!selectedOption) {
+      return;
+    }
    try {
      await setIsLoading(true);
+      const existingCover = selectedProject?.cover || {};
+      const finalUrl =
+        selectedOption.finalUrl || selectedOption.generatedUrl || null;
      await updateProjectData({
-        coverUrl: selectedProject?.cover?.result,
+        cover: {
+          ...existingCover,
+          options: coverOptions,
+          selectedOptionId: selectedOption.id,
+          result: finalUrl,
+          generatedBackground:
+            selectedOption.generatedUrl || selectedOption.finalUrl || null,
+        },
+        coverUrl: finalUrl,
      });
      navigate(Routes.Home);
    } catch (e) {
@@ -45,80 +113,124 @@ const ValidateCover = () => {
      await setIsLoading(false);
    }
  }
+
  return (
    <Page backgroundImg={background.studioBG2} headerType="NONE">
      <MusicLandHeader onPressBack={goBack} progress={90} />
      <View style={{ flex: 1, marginTop: 16 }}>
        <CreateLyricsHeader
          title="Ta pochette est prête!"
-          subTitle="Qu’en penses-tu ?"
+          subTitle="Choisis ta version préférée."
        />
        <View style={{ flex: 1, ...Style.containerCenter }}>
-          <View style={{ width: "80%", position: "relative" }}>
-            <Image
-              source={img.placeholder}
-              style={{
-                width: isWeb ? 300 : "100%",
-                height: 300,
-                borderRadius: 20,
-                transform: [{ rotateY: "180deg" }],
-                alignSelf: "center",
-              }}
-            />
-            <View
-              style={{ position: "absolute", width: "100%", height: "100%" }}
-            >
-              <Image
-                source={{ uri: selectedProject?.cover?.result }}
+          <View
+            style={{
+              width: "90%",
+              gap: 16,
+              flexDirection: isMultipleOptions ? "row" : "column",
+              flexWrap: isMultipleOptions ? "wrap" : "nowrap",
+              justifyContent: "center",
+              alignItems: isMultipleOptions ? "stretch" : "center",
+            }}
+          >
+            {coverOptions.map((option, index) => {
+              const isSelected = option?.id === selectedOption?.id;
+              const imageSource =
+                option?.finalUrl || option?.generatedUrl || null;
+
+              if (!imageSource) {
+                return null;
+              }
+
+              return (
+                <Pressable
+                  key={option?.id || index}
+                  onPress={() => handleSelectOption(option)}
+                  disabled={isSelecting}
+                  style={{
+                    borderRadius: 20,
+                    borderWidth: isSelected ? 2 : 1,
+                    borderColor: isSelected
+                      ? Palette.primary
+                      : Palette.ultraLightWhite,
+                    overflow: "hidden",
+                    width: isMultipleOptions
+                      ? isWeb
+                        ? 280
+                        : "48%"
+                      : isWeb
+                        ? 300
+                        : "90%",
+                    maxWidth: isWeb ? 320 : "100%",
+                    position: "relative",
+                  }}
+                >
+                  <ExpoImage
+                    source={{ uri: imageSource }}
+                    cachePolicy="memory-disk"
+                    contentFit="cover"
+                    transition={120}
+                    style={{ width: "100%", aspectRatio: 1 }}
+                  />
+                  <View
+                    style={{
+                      position: "absolute",
+                      top: 12,
+                      right: 12,
+                      backgroundColor: Palette.transparentBlack,
+                      paddingHorizontal: 10,
+                      paddingVertical: 6,
+                      borderRadius: 12,
+                    }}
+                  >
+                    <Text
+                      style={{
+                        color: Palette.white,
+                        fontWeight: "600",
+                        fontSize: 12,
+                      }}
+                    >
+                      {`Option ${index + 1}`}
+                    </Text>
+                  </View>
+                  {isSelected && (
+                    <View
+                      style={{
+                        position: "absolute",
+                        bottom: 12,
+                        left: 12,
+                        backgroundColor: Palette.primary,
+                        paddingHorizontal: 12,
+                        paddingVertical: 6,
+                        borderRadius: 12,
+                      }}
+                    >
+                      <Text
+                        style={{
+                          color: Palette.white,
+                          fontWeight: "600",
+                          fontSize: 12,
+                        }}
+                      >
+                        Sélectionnée
+                      </Text>
+                    </View>
+                  )}
+                </Pressable>
+              );
+            })}
+            {!coverOptions.length && (
+              <Text
                style={{
-                  width: isWeb ? 300 : "100%",
-                  height: "100%",
-                  borderRadius: 20,
-                  alignSelf: "center",
+                  color: Palette.white,
+                  textAlign: "center",
+                  opacity: 0.8,
                }}
-              />
-            </View>
-            {/*<View*/}
-            {/*  style={{*/}
-            {/*    position: "absolute",*/}
-            {/*    alignSelf: "center",*/}
-            {/*    alignItems: "center",*/}
-            {/*    top: 10,*/}
-            {/*  }}*/}
-            {/*>*/}
-            {/*  <Text*/}
-            {/*    style={{*/}
-            {/*      fontSize: 22,*/}
-            {/*      color: Palette.white,*/}
-            {/*      fontFamily: FONT_FAMILY.InterSemiBold,*/}
-            {/*    }}*/}
-            {/*  >*/}
-            {/*    Lust for Life*/}
-            {/*  </Text>*/}
-            {/*  <Text*/}
-            {/*    style={{*/}
-            {/*      fontSize: 14,*/}
-            {/*      color: Palette.gray,*/}
-            {/*      fontFamily: FONT_FAMILY.InterRegular,*/}
-            {/*    }}*/}
-            {/*  >*/}
-            {/*    Lana del Rey*/}
-            {/*  </Text>*/}
-            {/*</View>*/}
-            {/*<View*/}
-            {/*  style={{*/}
-            {/*    position: "absolute",*/}
-            {/*    alignItems: "center",*/}
-            {/*    bottom: 10,*/}
-            {/*    width: "100%",*/}
-            {/*  }}*/}
-            {/*>*/}
-            {/*  <Image*/}
-            {/*    source={icons.musicLandLogo}*/}
-            {/*    style={{ width: "100%", height: 30 }}*/}
-            {/*    resizeMode="contain"*/}
-            {/*  />*/}
-            {/*</View>*/}
+              >
+                Les options de pochette seront disponibles à la fin de la
+                génération.
+              </Text>
+            )}
          </View>
        </View>
      </View>
@@ -130,13 +242,14 @@ const ValidateCover = () => {
          gap: 12,
        }}
      >
-        <BorderGradientButton
+        {/* <BorderGradientButton
          title="Recommencer la création"
          onPress={onStartAgain}
-        />
+        /> */}
        <GradientButton
          title="Valider la pochette"
          onPress={onValidatePicture}
+          disabled={!selectedOption || isSelecting}
        />
      </View>
    </Page>
@@ -49,6 +49,9 @@ const getStageLockState = (key, metadata) => {
    case "songwriter":
      return metadata.hasSongUrl;
    case "beatmaker":
+      if (metadata.hasCover) {
+        return true;
+      }
      return metadata.lyricsCount <= 0;
    case "director":
      return !metadata.hasCover;
@@ -78,6 +81,9 @@ const getStageDescription = (key, metadata) => {
      }
      return "Modifier les paroles créées";
    case "beatmaker":
+      if (metadata.hasCover) {
+        return "Impossible de modifier la cover ou la production musicale";
+      }
      if (!hasLyrics) {
        return "Écrivez vos paroles pour débloquer la musique";
      }
@@ -117,6 +123,9 @@ const getStageLockedDescription = (key, metadata) => {
        ? "Impossible de modifier les paroles"
        : undefined;
    case "beatmaker":
+      if (metadata.hasCover) {
+        return "Impossible de modifier la cover ou la production musicale";
+      }
      return metadata.lyricsCount > 0
        ? undefined
        : "Créez vos paroles pour débloquer le studio";