@umituz/react-native-ai-generation-content 1.20.46 → 1.21.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-ai-generation-content",
-  "version": "1.20.46",
+  "version": "1.21.0",
   "description": "Provider-agnostic AI generation orchestration for React Native with result preview components",
   "main": "src/index.ts",
   "types": "src/index.ts",

package/src/domains/scenarios/domain/scenario.types.ts

@@ -0,0 +1,78 @@
+/**
+ * Scenario Domain Types
+ * Generic scenario system for AI generation apps
+ */
+
+/**
+ * Scenario represents a pre-configured AI generation template
+ */
+export interface Scenario {
+  readonly id: string;
+  readonly title: string;
+  readonly description: string;
+  readonly icon?: string;
+  readonly emoji?: string;
+  readonly imageUrl?: string;
+  readonly previewImageUrl?: string;
+  readonly category: string;
+  readonly tags?: readonly string[];
+  readonly aiPrompt: string;
+  readonly storyTemplate?: string;
+  readonly requiresPhoto?: boolean;
+  readonly metadata?: Record<string, unknown>;
+}
+
+/**
+ * Main Category (Top-level grouping)
+ */
+export interface MainCategory {
+  readonly id: string;
+  readonly title: string;
+  readonly description?: string;
+  readonly icon?: string;
+  readonly emoji?: string;
+  readonly order: number;
+  readonly subCategories: readonly string[];
+}
+
+/**
+ * Sub Category (Second-level grouping)
+ */
+export interface SubCategory {
+  readonly id: string;
+  readonly title: string;
+  readonly description?: string;
+  readonly icon?: string;
+  readonly emoji?: string;
+  readonly mainCategoryId: string;
+  readonly scenarioCategories: readonly string[];
+  readonly order: number;
+}
+
+/**
+ * Scenario Category (Third-level - actual scenario grouping)
+ */
+export interface ScenarioCategory {
+  readonly id: string;
+  readonly name: string;
+  readonly description?: string;
+}
+
+/**
+ * Complete scenario system configuration
+ */
+export interface ScenarioSystemConfig {
+  readonly mainCategories: readonly MainCategory[];
+  readonly subCategories: readonly SubCategory[];
+  readonly scenarioCategories: readonly ScenarioCategory[];
+  readonly scenarios: readonly Scenario[];
+}
+
+/**
+ * Scenario selection result
+ */
+export interface ScenarioSelection {
+  readonly scenario: Scenario;
+  readonly mainCategory: MainCategory;
+  readonly subCategory: SubCategory;
+}

package/src/features/couple-future/presentation/components/CoupleFutureWizard.tsx

@@ -88,11 +88,20 @@ export const CoupleFutureWizard: React.FC<CoupleFutureWizardProps> = ({
         return null; // Rendered by parent via CategoryNavigationContainer
 
       case StepType.SCENARIO_PREVIEW:
+        const scenario = flow.selectedCategory || data.selectedScenario;
+        const handlePreviewBack = () => {
+          // If we came from CategoryNavigationContainer, reset to SCENARIO step
+          if (data.selectedScenario && !flow.selectedCategory) {
+            callbacks?.onBackToScenarioSelection?.();
+          } else {
+            flow.previousStep();
+          }
+        };
         return (
           <ScenarioPreviewScreen
-            scenario={flow.selectedCategory as never}
+            scenario={scenario as never}
             translations={translations.scenarioPreview as never}
-            onBack={flow.previousStep}
+            onBack={handlePreviewBack}
             onContinue={handleScenarioPreviewContinue}
             t={t}
           />

package/src/features/scenarios/domain/types.ts

@@ -1,6 +1,7 @@
 /**
  * Scenario Domain Types
  * Generic types for scenario selection feature
+ * Supports both flat and hierarchical category systems
  */
 
 export enum ScenarioCategory {
@@ -15,7 +16,7 @@ export enum ScenarioCategory {
 
 export interface ScenarioData {
   readonly id: string;
-  readonly category?: ScenarioCategory;
+  readonly category?: ScenarioCategory | string;
   readonly title: string;
   readonly description: string;
   readonly icon: string;
@@ -27,6 +28,41 @@ export interface ScenarioData {
   readonly hidden?: boolean;
 }
 
+/**
+ * Scenario Main Category (Top-level grouping for hierarchical system)
+ */
+export interface ScenarioMainCategory {
+  readonly id: string;
+  readonly titleKey: string;
+  readonly descriptionKey?: string;
+  readonly icon?: string;
+  readonly emoji?: string;
+  readonly order: number;
+  readonly subCategoryIds: readonly string[];
+}
+
+/**
+ * Scenario Sub Category (Second-level grouping for hierarchical system)
+ */
+export interface ScenarioSubCategory {
+  readonly id: string;
+  readonly titleKey: string;
+  readonly descriptionKey?: string;
+  readonly icon?: string;
+  readonly emoji?: string;
+  readonly mainCategoryId: string;
+  readonly scenarioCategories: readonly string[];
+  readonly order: number;
+}
+
+/**
+ * Hierarchical scenario category configuration
+ */
+export interface ScenarioHierarchyConfig {
+  readonly mainCategories: readonly ScenarioMainCategory[];
+  readonly subCategories: readonly ScenarioSubCategory[];
+}
+
 export interface ScenarioSelectorConfig {
   readonly titleKey: string;
   readonly subtitleKey: string;

package/src/features/scenarios/index.ts

@@ -12,6 +12,9 @@ export type {
   MagicPromptConfig,
   VisualStyleOption,
   InspirationChipData,
+  ScenarioMainCategory,
+  ScenarioSubCategory,
+  ScenarioHierarchyConfig,
 } from "./domain/types";
 export { ScenarioCategory as ScenarioCategoryEnum, SCENARIO_DEFAULTS } from "./domain/types";
 
@@ -43,3 +46,17 @@ export type {
 
 export { MagicPromptScreen } from "./presentation/screens/MagicPromptScreen";
 export type { MagicPromptScreenProps } from "./presentation/screens/MagicPromptScreen";
+
+// Hierarchical Screens
+export { MainCategoryScreen } from "./presentation/screens/MainCategoryScreen";
+export type { MainCategoryScreenProps } from "./presentation/screens/MainCategoryScreen";
+
+export { SubCategoryScreen } from "./presentation/screens/SubCategoryScreen";
+export type { SubCategoryScreenProps } from "./presentation/screens/SubCategoryScreen";
+
+export { HierarchicalScenarioListScreen } from "./presentation/screens/HierarchicalScenarioListScreen";
+export type { HierarchicalScenarioListScreenProps } from "./presentation/screens/HierarchicalScenarioListScreen";
+
+// Containers
+export { CategoryNavigationContainer } from "./presentation/containers/CategoryNavigationContainer";
+export type { CategoryNavigationContainerProps } from "./presentation/containers/CategoryNavigationContainer";

package/src/features/scenarios/presentation/components/ScenarioHeader.tsx

@@ -43,7 +43,6 @@ const createStyles = (tokens: DesignTokens) =>
   StyleSheet.create({
     container: {
       paddingHorizontal: tokens.spacing.md,
-      paddingTop: tokens.spacing.lg,
       paddingBottom: tokens.spacing.md,
       gap: tokens.spacing.xs,
     },

package/src/features/scenarios/presentation/containers/CategoryNavigationContainer.tsx

@@ -0,0 +1,114 @@
+/**
+ * CategoryNavigationContainer
+ * Orchestrates 3-step hierarchical scenario selection flow:
+ * Main Category → Sub Category → Scenario List
+ */
+
+import React, { useState, useCallback } from "react";
+import type {
+  ScenarioData,
+  ScenarioMainCategory,
+  ScenarioSubCategory,
+} from "../../domain/types";
+import { MainCategoryScreen } from "../screens/MainCategoryScreen";
+import { SubCategoryScreen } from "../screens/SubCategoryScreen";
+import { HierarchicalScenarioListScreen } from "../screens/HierarchicalScenarioListScreen";
+
+type NavigationStep = "main_category" | "sub_category" | "scenario_list";
+
+export interface CategoryNavigationContainerProps {
+  readonly mainCategories: readonly ScenarioMainCategory[];
+  readonly subCategories: readonly ScenarioSubCategory[];
+  readonly scenarios: readonly ScenarioData[];
+  readonly onSelectScenario: (scenarioId: string) => void;
+  readonly onBack?: () => void;
+  readonly t: (key: string) => string;
+  readonly headerTitle?: string;
+  readonly headerDescription?: string;
+  readonly numColumns?: number;
+}
+
+export const CategoryNavigationContainer: React.FC<
+  CategoryNavigationContainerProps
+> = ({
+  mainCategories,
+  subCategories,
+  scenarios,
+  onSelectScenario,
+  onBack,
+  t,
+  headerTitle,
+  headerDescription,
+  numColumns = 2,
+}) => {
+  const [currentStep, setCurrentStep] = useState<NavigationStep>("main_category");
+  const [selectedMainCategoryId, setSelectedMainCategoryId] = useState<string | null>(null);
+  const [selectedSubCategoryId, setSelectedSubCategoryId] = useState<string | null>(null);
+
+  const handleSelectMainCategory = useCallback((categoryId: string) => {
+    setSelectedMainCategoryId(categoryId);
+    setCurrentStep("sub_category");
+  }, []);
+
+  const handleSelectSubCategory = useCallback((subCategoryId: string) => {
+    setSelectedSubCategoryId(subCategoryId);
+    setCurrentStep("scenario_list");
+  }, []);
+
+  const handleBackFromSubCategory = useCallback(() => {
+    setSelectedMainCategoryId(null);
+    setCurrentStep("main_category");
+  }, []);
+
+  const handleBackFromScenarioList = useCallback(() => {
+    setSelectedSubCategoryId(null);
+    setCurrentStep("sub_category");
+  }, []);
+
+  const handleBackFromMainCategory = useCallback(() => {
+    if (onBack) {
+      onBack();
+    }
+  }, [onBack]);
+
+  if (currentStep === "main_category") {
+    return (
+      <MainCategoryScreen
+        mainCategories={mainCategories}
+        onSelectCategory={handleSelectMainCategory}
+        onBack={onBack ? handleBackFromMainCategory : undefined}
+        t={t}
+        headerTitle={headerTitle}
+        headerDescription={headerDescription}
+      />
+    );
+  }
+
+  if (currentStep === "sub_category" && selectedMainCategoryId) {
+    return (
+      <SubCategoryScreen
+        mainCategoryId={selectedMainCategoryId}
+        subCategories={subCategories}
+        onSelectSubCategory={handleSelectSubCategory}
+        onBack={handleBackFromSubCategory}
+        t={t}
+      />
+    );
+  }
+
+  if (currentStep === "scenario_list" && selectedSubCategoryId) {
+    return (
+      <HierarchicalScenarioListScreen
+        subCategoryId={selectedSubCategoryId}
+        subCategories={subCategories}
+        scenarios={scenarios}
+        onSelectScenario={onSelectScenario}
+        onBack={handleBackFromScenarioList}
+        t={t}
+        numColumns={numColumns}
+      />
+    );
+  }
+
+  return null;
+};

package/src/features/scenarios/presentation/screens/HierarchicalScenarioListScreen.tsx

@@ -0,0 +1,237 @@
+/**
+ * HierarchicalScenarioListScreen
+ * Displays scenarios filtered by sub-category with optimized performance
+ * PERFORMANCE OPTIMIZED: No FlatList key remounting, memoized calculations
+ */
+
+import React, { useMemo, useCallback, useState } from "react";
+import {
+  View,
+  FlatList,
+  StyleSheet,
+  TouchableOpacity,
+  type ListRenderItemInfo,
+} from "react-native";
+import {
+  AtomicText,
+  AtomicCard,
+  useAppDesignTokens,
+  useResponsive,
+  ScreenLayout,
+  NavigationHeader,
+  AtomicIcon,
+  type DesignTokens,
+} from "@umituz/react-native-design-system";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import type { ScenarioData, ScenarioSubCategory } from "../../domain/types";
+
+export interface HierarchicalScenarioListScreenProps {
+  readonly subCategoryId: string;
+  readonly subCategories: readonly ScenarioSubCategory[];
+  readonly scenarios: readonly ScenarioData[];
+  readonly onSelectScenario: (scenarioId: string) => void;
+  readonly onBack: () => void;
+  readonly t: (key: string) => string;
+  readonly numColumns?: number;
+}
+
+export const HierarchicalScenarioListScreen: React.FC<HierarchicalScenarioListScreenProps> = ({
+  subCategoryId,
+  subCategories,
+  scenarios,
+  onSelectScenario,
+  onBack,
+  t,
+  numColumns = 2,
+}) => {
+  const tokens = useAppDesignTokens();
+  const insets = useSafeAreaInsets();
+  const { width } = useResponsive();
+
+  const [selectedId, setSelectedId] = useState<string | null>(null);
+
+  const subCategory = useMemo(
+    () => subCategories.find((sub) => sub.id === subCategoryId),
+    [subCategories, subCategoryId]
+  );
+
+  const filteredScenarios = useMemo(() => {
+    if (!subCategory) return [];
+
+    return scenarios.filter((scenario) => {
+      if (!scenario.category) return false;
+      return subCategory.scenarioCategories.includes(scenario.category);
+    });
+  }, [scenarios, subCategory]);
+
+  const horizontalPadding = tokens.spacing.md;
+  const cardSpacing = tokens.spacing.md;
+
+  // Calculate card width once - memoized to prevent unnecessary recalculations
+  const cardWidth = useMemo(() => {
+    const availableWidth = width - horizontalPadding * 2 - cardSpacing;
+    return availableWidth / numColumns;
+  }, [width, horizontalPadding, cardSpacing, numColumns]);
+
+  const styles = useMemo(
+    () => createStyles(tokens, cardSpacing, horizontalPadding),
+    [tokens, cardSpacing, horizontalPadding]
+  );
+
+  const handleContinue = useCallback(() => {
+    if (selectedId) {
+      onSelectScenario(selectedId);
+    }
+  }, [selectedId, onSelectScenario]);
+
+  // Memoized callback for card selection - prevents inline arrow functions
+  const handleCardPress = useCallback((itemId: string) => {
+    setSelectedId(itemId);
+  }, []);
+
+  const renderItem = useCallback(
+    ({ item }: ListRenderItemInfo<ScenarioData>) => {
+      const title = t(`scenario.${item.id}.title`);
+      const description = t(`scenario.${item.id}.description`);
+      const isSelected = selectedId === item.id;
+
+      return (
+        <AtomicCard
+          image={item.previewImageUrl || item.imageUrl || ""}
+          title={title}
+          subtitle={description}
+          imageAspectRatio={1.25}
+          selected={isSelected}
+          style={{ width: cardWidth }}
+          onPress={() => handleCardPress(item.id)}
+          testID={`scenario-card-${item.id}`}
+        />
+      );
+    },
+    [cardWidth, selectedId, t, handleCardPress]
+  );
+
+  const ListEmptyComponent = useMemo(
+    () => (
+      <View style={styles.emptyState}>
+        <AtomicText type="bodyLarge" color="textSecondary">
+          {t("scenario.list.empty")}
+        </AtomicText>
+      </View>
+    ),
+    [t, styles.emptyState]
+  );
+
+  if (!subCategory) {
+    return null;
+  }
+
+  const canContinue = !!selectedId;
+
+  return (
+    <View style={styles.container}>
+      <NavigationHeader
+        title={t(subCategory.titleKey)}
+        onBackPress={onBack}
+        rightElement={
+          <TouchableOpacity
+            onPress={handleContinue}
+            disabled={!canContinue}
+            activeOpacity={0.7}
+            style={[
+              styles.continueButton,
+              {
+                backgroundColor: canContinue
+                  ? tokens.colors.primary
+                  : tokens.colors.surfaceVariant,
+                opacity: canContinue ? 1 : 0.5,
+              },
+            ]}
+          >
+            <AtomicText
+              type="bodyMedium"
+              style={[
+                styles.continueText,
+                {
+                  color: canContinue
+                    ? tokens.colors.onPrimary
+                    : tokens.colors.textSecondary,
+                },
+              ]}
+            >
+              {t("common.continue")}
+            </AtomicText>
+            <AtomicIcon
+              name="arrow-forward"
+              size="sm"
+              color={canContinue ? "onPrimary" : "textSecondary"}
+            />
+          </TouchableOpacity>
+        }
+      />
+      <ScreenLayout
+        scrollable={false}
+        edges={["left", "right"]}
+        backgroundColor={tokens.colors.backgroundPrimary}
+      >
+        <FlatList
+          data={filteredScenarios}
+          numColumns={numColumns}
+          showsVerticalScrollIndicator={false}
+          columnWrapperStyle={styles.row}
+          renderItem={renderItem}
+          keyExtractor={(item) => item.id}
+          ListEmptyComponent={
+            filteredScenarios.length === 0 ? ListEmptyComponent : null
+          }
+          contentContainerStyle={[
+            styles.listContent,
+            { paddingBottom: insets.bottom + 100 },
+          ]}
+          removeClippedSubviews
+          maxToRenderPerBatch={10}
+          updateCellsBatchingPeriod={50}
+          initialNumToRender={10}
+          windowSize={21}
+        />
+      </ScreenLayout>
+    </View>
+  );
+};
+
+const createStyles = (
+  tokens: DesignTokens,
+  cardSpacing: number,
+  horizontalPadding: number
+) =>
+  StyleSheet.create({
+    container: {
+      flex: 1,
+    },
+    listContent: {
+      paddingTop: tokens.spacing.sm,
+      flexGrow: 1,
+    },
+    row: {
+      gap: cardSpacing,
+      marginBottom: cardSpacing,
+      paddingHorizontal: horizontalPadding,
+    },
+    emptyState: {
+      flex: 1,
+      justifyContent: "center",
+      alignItems: "center",
+      paddingVertical: tokens.spacing.xl,
+    },
+    continueButton: {
+      flexDirection: "row",
+      alignItems: "center",
+      paddingHorizontal: tokens.spacing.md,
+      paddingVertical: tokens.spacing.xs,
+      borderRadius: tokens.borders.radius.full,
+    },
+    continueText: {
+      fontWeight: "800",
+      marginRight: 4,
+    },
+  });

package/src/features/scenarios/presentation/screens/MainCategoryScreen.tsx

@@ -0,0 +1,186 @@
+/**
+ * MainCategoryScreen
+ * Displays main categories for hierarchical scenario selection
+ */
+
+import React, { useMemo, useCallback } from "react";
+import {
+  View,
+  FlatList,
+  StyleSheet,
+  TouchableOpacity,
+  type ListRenderItemInfo,
+} from "react-native";
+import {
+  AtomicText,
+  AtomicIcon,
+  useAppDesignTokens,
+  ScreenLayout,
+  type DesignTokens,
+} from "@umituz/react-native-design-system";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { AIGenScreenHeader } from "../../../../presentation/components";
+import type { ScenarioMainCategory } from "../../domain/types";
+
+export interface MainCategoryScreenProps {
+  readonly mainCategories: readonly ScenarioMainCategory[];
+  readonly onSelectCategory: (categoryId: string) => void;
+  readonly onBack?: () => void;
+  readonly t: (key: string) => string;
+  readonly headerTitle?: string;
+  readonly headerDescription?: string;
+}
+
+export const MainCategoryScreen: React.FC<MainCategoryScreenProps> = ({
+  mainCategories,
+  onSelectCategory,
+  onBack,
+  t,
+  headerTitle,
+  headerDescription,
+}) => {
+  const tokens = useAppDesignTokens();
+  const insets = useSafeAreaInsets();
+
+  const styles = useMemo(() => createStyles(tokens), [tokens]);
+
+  const handleCategoryPress = useCallback(
+    (categoryId: string) => {
+      onSelectCategory(categoryId);
+    },
+    [onSelectCategory]
+  );
+
+  const renderItem = useCallback(
+    ({ item }: ListRenderItemInfo<ScenarioMainCategory>) => {
+      const title = t(item.titleKey);
+      const description = item.descriptionKey ? t(item.descriptionKey) : "";
+
+      return (
+        <TouchableOpacity
+          style={[
+            styles.card,
+            {
+              backgroundColor: tokens.colors.surface,
+              borderColor: tokens.colors.border,
+            },
+          ]}
+          onPress={() => handleCategoryPress(item.id)}
+          activeOpacity={0.7}
+          testID={`main-category-${item.id}`}
+        >
+          <View style={styles.cardContent}>
+            <View
+              style={[
+                styles.iconContainer,
+                { backgroundColor: tokens.colors.surfaceVariant },
+              ]}
+            >
+              {item.emoji ? (
+                <AtomicText style={styles.emoji}>{item.emoji}</AtomicText>
+              ) : (
+                <AtomicIcon name={item.icon as never} size="lg" color="primary" />
+              )}
+            </View>
+            <View style={styles.textContent}>
+              <AtomicText
+                style={[styles.title, { color: tokens.colors.textPrimary }]}
+              >
+                {title}
+              </AtomicText>
+              {description ? (
+                <AtomicText
+                  style={[
+                    styles.description,
+                    { color: tokens.colors.textSecondary },
+                  ]}
+                  numberOfLines={2}
+                >
+                  {description}
+                </AtomicText>
+              ) : null}
+            </View>
+            <AtomicIcon
+              name="chevron-forward"
+              size="md"
+              color="textSecondary"
+            />
+          </View>
+        </TouchableOpacity>
+      );
+    },
+    [t, tokens, styles, handleCategoryPress]
+  );
+
+  return (
+    <ScreenLayout
+      scrollable={false}
+      edges={["top", "left", "right"]}
+      backgroundColor={tokens.colors.backgroundPrimary}
+    >
+      <AIGenScreenHeader
+        title={headerTitle || t("scenario.main_category.title")}
+        description={headerDescription || t("scenario.main_category.subtitle")}
+        onBack={onBack}
+      />
+      <FlatList
+        data={mainCategories}
+        showsVerticalScrollIndicator={false}
+        renderItem={renderItem}
+        keyExtractor={(item) => item.id}
+        contentContainerStyle={[
+          styles.listContent,
+          { paddingBottom: insets.bottom + 100 },
+        ]}
+        removeClippedSubviews
+        maxToRenderPerBatch={10}
+        updateCellsBatchingPeriod={50}
+        initialNumToRender={7}
+        windowSize={11}
+      />
+    </ScreenLayout>
+  );
+};
+
+const createStyles = (tokens: DesignTokens) =>
+  StyleSheet.create({
+    listContent: {
+      paddingHorizontal: tokens.spacing.md,
+      paddingBottom: tokens.spacing.xl,
+      gap: tokens.spacing.sm,
+    },
+    card: {
+      borderRadius: tokens.borders.radius.lg,
+      borderWidth: 1,
+      overflow: "hidden",
+    },
+    cardContent: {
+      flexDirection: "row",
+      alignItems: "center",
+      padding: tokens.spacing.md,
+    },
+    iconContainer: {
+      width: 56,
+      height: 56,
+      borderRadius: 28,
+      justifyContent: "center",
+      alignItems: "center",
+      marginRight: tokens.spacing.md,
+    },
+    emoji: {
+      fontSize: 28,
+    },
+    textContent: {
+      flex: 1,
+      marginRight: tokens.spacing.sm,
+    },
+    title: {
+      fontSize: 17,
+      fontWeight: "700",
+      marginBottom: 2,
+    },
+    description: {
+      fontSize: 14,
+      lineHeight: 18,
+    },
+  });

package/src/features/scenarios/presentation/screens/ScenarioSelectorScreen.tsx

@@ -37,7 +37,7 @@ export const ScenarioSelectorScreen: React.FC<ScenarioSelectorScreenProps> = ({
   return (
     <ScreenLayout
       scrollable={false}
-      edges={["top", "left", "right"]}
+      edges={["left", "right"]}
       contentContainerStyle={styles.container}
       backgroundColor={tokens.colors.backgroundPrimary}
     >
@@ -61,5 +61,6 @@ const createStyles = (_tokens: DesignTokens) =>
   StyleSheet.create({
     container: {
       flex: 1,
+      paddingTop: 0,
     },
   });

package/src/features/scenarios/presentation/screens/SubCategoryScreen.tsx

@@ -0,0 +1,193 @@
+/**
+ * SubCategoryScreen
+ * Displays sub-categories for a selected main category
+ */
+
+import React, { useMemo, useCallback } from "react";
+import {
+  View,
+  FlatList,
+  StyleSheet,
+  TouchableOpacity,
+  type ListRenderItemInfo,
+} from "react-native";
+import {
+  AtomicText,
+  AtomicIcon,
+  useAppDesignTokens,
+  ScreenLayout,
+  type DesignTokens,
+} from "@umituz/react-native-design-system";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { AIGenScreenHeader } from "../../../../presentation/components";
+import type { ScenarioSubCategory } from "../../domain/types";
+
+export interface SubCategoryScreenProps {
+  readonly mainCategoryId: string;
+  readonly subCategories: readonly ScenarioSubCategory[];
+  readonly onSelectSubCategory: (subCategoryId: string) => void;
+  readonly onBack: () => void;
+  readonly t: (key: string) => string;
+  readonly headerTitleKey?: string;
+  readonly headerDescriptionKey?: string;
+}
+
+export const SubCategoryScreen: React.FC<SubCategoryScreenProps> = ({
+  mainCategoryId,
+  subCategories,
+  onSelectSubCategory,
+  onBack,
+  t,
+  headerTitleKey,
+  headerDescriptionKey,
+}) => {
+  const tokens = useAppDesignTokens();
+  const insets = useSafeAreaInsets();
+
+  const filteredSubCategories = useMemo(
+    () => subCategories.filter((sub) => sub.mainCategoryId === mainCategoryId),
+    [subCategories, mainCategoryId]
+  );
+
+  const styles = useMemo(() => createStyles(tokens), [tokens]);
+
+  const handleSubCategoryPress = useCallback(
+    (subCategoryId: string) => {
+      onSelectSubCategory(subCategoryId);
+    },
+    [onSelectSubCategory]
+  );
+
+  const renderItem = useCallback(
+    ({ item }: ListRenderItemInfo<ScenarioSubCategory>) => {
+      const title = t(item.titleKey);
+      const description = item.descriptionKey ? t(item.descriptionKey) : "";
+
+      return (
+        <TouchableOpacity
+          style={[
+            styles.card,
+            {
+              backgroundColor: tokens.colors.surface,
+              borderColor: tokens.colors.border,
+            },
+          ]}
+          onPress={() => handleSubCategoryPress(item.id)}
+          activeOpacity={0.7}
+          testID={`sub-category-${item.id}`}
+        >
+          <View style={styles.cardContent}>
+            <View
+              style={[
+                styles.iconContainer,
+                { backgroundColor: tokens.colors.surfaceVariant },
+              ]}
+            >
+              {item.emoji ? (
+                <AtomicText style={styles.emoji}>{item.emoji}</AtomicText>
+              ) : (
+                <AtomicIcon name={item.icon as never} size="lg" color="primary" />
+              )}
+            </View>
+            <View style={styles.textContent}>
+              <AtomicText
+                style={[styles.title, { color: tokens.colors.textPrimary }]}
+              >
+                {title}
+              </AtomicText>
+              {description ? (
+                <AtomicText
+                  style={[
+                    styles.description,
+                    { color: tokens.colors.textSecondary },
+                  ]}
+                  numberOfLines={2}
+                >
+                  {description}
+                </AtomicText>
+              ) : null}
+            </View>
+            <AtomicIcon
+              name="chevron-forward"
+              size="md"
+              color="textSecondary"
+            />
+          </View>
+        </TouchableOpacity>
+      );
+    },
+    [t, tokens, styles, handleSubCategoryPress]
+  );
+
+  return (
+    <ScreenLayout
+      scrollable={false}
+      edges={["left", "right"]}
+      backgroundColor={tokens.colors.backgroundPrimary}
+    >
+      <AIGenScreenHeader
+        title={headerTitleKey ? t(headerTitleKey) : t("scenario.sub_category.title")}
+        description={headerDescriptionKey ? t(headerDescriptionKey) : t("scenario.sub_category.subtitle")}
+        onBack={onBack}
+      />
+      <FlatList
+        data={filteredSubCategories}
+        showsVerticalScrollIndicator={false}
+        renderItem={renderItem}
+        keyExtractor={(item) => item.id}
+        contentContainerStyle={[
+          styles.listContent,
+          { paddingBottom: insets.bottom + 100 },
+        ]}
+        removeClippedSubviews
+        maxToRenderPerBatch={10}
+        updateCellsBatchingPeriod={50}
+        initialNumToRender={10}
+        windowSize={11}
+      />
+    </ScreenLayout>
+  );
+};
+
+const createStyles = (tokens: DesignTokens) =>
+  StyleSheet.create({
+    listContent: {
+      paddingHorizontal: tokens.spacing.md,
+      paddingBottom: tokens.spacing.xl,
+      gap: tokens.spacing.sm,
+    },
+    card: {
+      borderRadius: tokens.borders.radius.lg,
+      borderWidth: 1,
+      overflow: "hidden",
+    },
+    cardContent: {
+      flexDirection: "row",
+      alignItems: "center",
+      padding: tokens.spacing.md,
+    },
+    iconContainer: {
+      width: 56,
+      height: 56,
+      borderRadius: 28,
+      justifyContent: "center",
+      alignItems: "center",
+      marginRight: tokens.spacing.md,
+    },
+    emoji: {
+      fontSize: 28,
+    },
+    textContent: {
+      flex: 1,
+      marginRight: tokens.spacing.sm,
+    },
+    title: {
+      fontSize: 17,
+      fontWeight: "700",
+      marginBottom: 2,
+    },
+    description: {
+      fontSize: 14,
+      lineHeight: 18,
+    },
+  });