@umituz/react-native-settings 1.5.0 → 1.6.0

package/README.md

@@ -20,7 +20,7 @@ npm install @umituz/react-native-settings
 ## Peer Dependencies
 
 ```bash
-npm install zustand @umituz/react-native-storage @umituz/react-native-design-system @umituz/react-native-design-system-theme @umituz/react-native-localization @umituz/react-native-notifications react-native-paper expo-linear-gradient
+npm install zustand lucide-react-native @umituz/react-native-storage @umituz/react-native-design-system @umituz/react-native-design-system-theme @umituz/react-native-localization @umituz/react-native-notifications react-native-paper expo-linear-gradient
 ```
 
 ## Usage
@@ -55,8 +55,25 @@ const MyComponent = () => {
 ```tsx
 import { SettingsScreen } from '@umituz/react-native-settings';
 
-// In your navigation stack
+// Basic usage
 <Stack.Screen name="Settings" component={SettingsScreen} />
+
+// With user profile header
+<SettingsScreen
+  showUserProfile={true}
+  userProfile={{
+    displayName: "John Doe",
+    userId: "user123",
+    isGuest: false,
+    accountSettingsRoute: "AccountSettings",
+  }}
+  config={{
+    appearance: true,
+    notifications: true,
+    about: true,
+    legal: true,
+  }}
+/>
 ```
 
 ### Appearance Screen
@@ -81,17 +98,82 @@ import { LanguageSelectionScreen } from '@umituz/react-native-settings';
 
 ```tsx
 import { SettingItem } from '@umituz/react-native-settings';
+import { Palette, Bell } from 'lucide-react-native';
 
+// Basic setting item
 <SettingItem
-  icon="Palette"
-  title="Theme"
-  description="Change app theme"
-  value="Dark"
+  icon={Palette}
+  title="Appearance"
+  value="Theme and language settings"
   onPress={() => navigation.navigate('Appearance')}
-  iconGradient={['#FF6B6B', '#4ECDC4']}
+/>
+
+// With switch
+<SettingItem
+  icon={Bell}
+  title="Notifications"
+  showSwitch={true}
+  switchValue={enabled}
+  onSwitchChange={setEnabled}
+/>
+
+// Custom colors
+<SettingItem
+  icon={Palette}
+  title="Appearance"
+  iconColor="#F59E0B"
+  titleColor="#F59E0B"
+  onPress={() => {}}
 />
 ```
 
+### Settings Section Component
+
+```tsx
+import { SettingsSection, SettingItem } from '@umituz/react-native-settings';
+import { Palette, Bell } from 'lucide-react-native';
+
+<SettingsSection title="APP SETTINGS">
+  <SettingItem
+    icon={Palette}
+    title="Appearance"
+    value="Theme and language settings"
+    onPress={() => navigation.navigate('Appearance')}
+  />
+  <SettingItem
+    icon={Bell}
+    title="Notifications"
+    showSwitch={true}
+    switchValue={enabled}
+    onSwitchChange={setEnabled}
+    isLast={true}
+  />
+</SettingsSection>
+```
+
+### User Profile Header Component
+
+```tsx
+import { UserProfileHeader } from '@umituz/react-native-settings';
+
+<UserProfileHeader
+  displayName="John Doe"
+  userId="user123"
+  isGuest={false}
+  avatarUrl="https://example.com/avatar.jpg"
+  accountSettingsRoute="AccountSettings"
+  onPress={() => navigation.navigate('AccountSettings')}
+/>
+```
+
+### Settings Footer Component
+
+```tsx
+import { SettingsFooter } from '@umituz/react-native-settings';
+
+<SettingsFooter versionText="Version 1.0.0" />
+```
+
 ### Disclaimer Setting Component
 
 ```tsx
@@ -122,7 +204,14 @@ Direct access to Zustand store.
 
 ### `SettingsScreen`
 
-Main settings screen component with sections for Appearance, General, About & Legal.
+Modern settings screen with organized sections and optional user profile header.
+
+**Props:**
+- `config?: SettingsConfig` - Configuration for which features to show
+- `showUserProfile?: boolean` - Show user profile header
+- `userProfile?: UserProfileHeaderProps` - User profile props
+- `showFooter?: boolean` - Show footer with version
+- `footerText?: string` - Custom footer text
 
 ### `AppearanceScreen`
 
@@ -134,19 +223,46 @@ Language selection screen with search functionality.
 
 ### `SettingItem`
 
-Reusable setting item component with gradient icons and Material Design styling.
+Modern setting item component with Lucide icons and switch support.
 
 **Props:**
-- `icon: IconName` - Icon name from Lucide library
+- `icon: React.ComponentType` - Icon component from lucide-react-native
 - `title: string` - Main title text
-- `description?: string` - Optional description
-- `value?: string` - Optional value to display on right
+- `value?: string` - Optional description/value text (shown below title)
 - `onPress?: () => void` - Callback when pressed
-- `showChevron?: boolean` - Show chevron arrow (default: true if onPress exists)
-- `rightElement?: React.ReactNode` - Custom right element
-- `iconGradient?: string[]` - Gradient colors for icon background
-- `disabled?: boolean` - Disable item
-- `testID?: string` - Test ID
+- `showSwitch?: boolean` - Show switch instead of chevron
+- `switchValue?: boolean` - Switch value
+- `onSwitchChange?: (value: boolean) => void` - Switch change handler
+- `isLast?: boolean` - Is last item (no divider)
+- `iconColor?: string` - Custom icon color
+- `titleColor?: string` - Custom title color
+
+### `SettingsSection`
+
+Section container with title and styled content area.
+
+**Props:**
+- `title: string` - Section title (uppercase)
+- `children: React.ReactNode` - Section content
+
+### `UserProfileHeader`
+
+User profile header with avatar, name, and ID.
+
+**Props:**
+- `displayName?: string` - User display name
+- `userId?: string` - User ID
+- `isGuest?: boolean` - Whether user is guest
+- `avatarUrl?: string` - Custom avatar URL
+- `accountSettingsRoute?: string` - Navigation route for account settings
+- `onPress?: () => void` - Custom onPress handler
+
+### `SettingsFooter`
+
+Footer component displaying app version.
+
+**Props:**
+- `versionText?: string` - Custom version text (optional)
 
 ### `DisclaimerSetting`
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-settings",
-  "version": "1.5.0",
+  "version": "1.6.0",
   "description": "Settings management for React Native apps - user preferences, theme, language, notifications",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
@@ -29,6 +29,7 @@
     "react": ">=18.2.0",
     "react-native": ">=0.74.0",
     "zustand": "^5.0.2",
+    "lucide-react-native": "^0.468.0",
     "@umituz/react-native-storage": "latest",
     "@umituz/react-native-design-system": "latest",
     "@umituz/react-native-design-system-theme": "latest",

package/src/index.ts

@@ -48,5 +48,16 @@ export type { SettingsConfig } from './presentation/screens/types';
 // =============================================================================
 
 export { SettingItem } from './presentation/components/SettingItem';
+export type { SettingItemProps } from './presentation/components/SettingItem';
+
+export { SettingsSection } from './presentation/components/SettingsSection';
+export type { SettingsSectionProps } from './presentation/components/SettingsSection';
+
+export { SettingsFooter } from './presentation/components/SettingsFooter';
+export type { SettingsFooterProps } from './presentation/components/SettingsFooter';
+
+export { UserProfileHeader } from './presentation/components/UserProfileHeader';
+export type { UserProfileHeaderProps } from './presentation/components/UserProfileHeader';
+
 export { DisclaimerSetting } from './presentation/components/DisclaimerSetting';
 

package/src/presentation/components/SettingItem.tsx

@@ -1,173 +1,167 @@
 /**
- * SettingItem Component - Paper List.Item Wrapper with Custom Styling
- *
- * Modern settings item built on React Native Paper:
- * - Wraps Paper List.Item for Material Design compliance
- * - Custom gradient icon backgrounds (LinearGradient)
- * - Lucide icons integration (AtomicIcon)
- * - Automatic theme-aware styling
- * - Built-in ripple effects
- * - Accessibility support
- * - Fixed title truncation with proper layout constraints
+ * Setting Item Component
+ * Single Responsibility: Render a single settings item
+ * Modern design with Lucide icons and switch support
  */
 
-import React from 'react';
-import { View, StyleSheet, Pressable } from 'react-native';
-import { LinearGradient } from 'expo-linear-gradient';
-import { AtomicText, AtomicIcon } from '@umituz/react-native-design-system-atoms';
-import { useAppDesignTokens } from '@umituz/react-native-design-system-theme';
-import type { IconName } from '@umituz/react-native-design-system-atoms';
-import type { DesignTokens } from '@umituz/react-native-design-system-theme';
+import React from "react";
+import { View, Text, TouchableOpacity, StyleSheet, Switch } from "react-native";
+import { ChevronRight } from "lucide-react-native";
+import { useAppDesignTokens } from "@umituz/react-native-design-system-theme";
 
-interface SettingItemProps {
-  /** Icon name from Lucide library */
-  icon: IconName;
+export interface SettingItemProps {
+  /** Icon component from lucide-react-native */
+  icon: React.ComponentType<{ size?: number; color?: string }>;
   /** Main title text */
   title: string;
-  /** Optional description text */
-  description?: string;
-  /** Optional value to display on the right */
+  /** Optional description/value text */
   value?: string;
   /** Callback when pressed */
   onPress?: () => void;
-  /** Show chevron arrow on right (default: true if onPress exists) */
-  showChevron?: boolean;
-  /** Right element to display instead of chevron/value */
-  rightElement?: React.ReactNode;
-  /** Gradient colors for icon background */
-  iconGradient?: string[];
-  /** Make item look disabled */
-  disabled?: boolean;
-  /** Test ID for E2E testing */
-  testID?: string;
+  /** Show switch instead of chevron */
+  showSwitch?: boolean;
+  /** Switch value */
+  switchValue?: boolean;
+  /** Switch change handler */
+  onSwitchChange?: (value: boolean) => void;
+  /** Is last item in section (no divider) */
+  isLast?: boolean;
+  /** Custom icon color */
+  iconColor?: string;
+  /** Custom title color */
+  titleColor?: string;
 }
 
 export const SettingItem: React.FC<SettingItemProps> = ({
-  icon,
+  icon: Icon,
   title,
-  description,
   value,
   onPress,
-  showChevron,
-  rightElement,
-  iconGradient,
-  disabled = false,
-  testID,
+  showSwitch = false,
+  switchValue,
+  onSwitchChange,
+  isLast = false,
+  iconColor,
+  titleColor,
 }) => {
   const tokens = useAppDesignTokens();
-  const styles = getStyles(tokens);
+  const colors = tokens.colors;
 
-  // Gradient colors for icon background
-  const gradientColors: readonly [string, string, ...string[]] = (iconGradient && iconGradient.length >= 2) 
-    ? (iconGradient as unknown as readonly [string, string, ...string[]])
-    : [tokens.colors.surface, tokens.colors.surface] as const;
+  return (
+    <>
+      <TouchableOpacity
+        style={[
+          styles.container,
+          { backgroundColor: colors.backgroundPrimary },
+        ]}
+        onPress={onPress}
+        disabled={showSwitch}
+        activeOpacity={0.7}
+      >
+        <View style={styles.content}>
+          <View
+            style={[
+              styles.iconContainer,
+              {
+                backgroundColor: iconColor
+                  ? `${iconColor}15`
+                  : `${colors.primary}15`,
+              },
+            ]}
+          >
+            <Icon size={20} color={iconColor || colors.primary} />
+          </View>
+          <View style={styles.textContainer}>
+            <Text
+              style={[
+                styles.title,
+                { color: titleColor || colors.textPrimary },
+              ]}
+              numberOfLines={1}
+            >
+              {title}
+            </Text>
+            {value && !showSwitch && (
+              <Text
+                style={[styles.value, { color: colors.textSecondary }]}
+                numberOfLines={1}
+              >
+                {value}
+              </Text>
+            )}
+          </View>
+        </View>
 
-  const content = (
-    <View style={[styles.listItem, disabled && styles.disabled]}>
-      {/* Left: Icon with gradient */}
-      <View style={styles.leftContainer}>
-        <LinearGradient
-          colors={gradientColors}
-          start={{ x: 0, y: 0 }}
-          end={{ x: 1, y: 1 }}
-          style={styles.iconContainer}
-        >
-          <AtomicIcon name={icon} size="md" color="primary" />
-        </LinearGradient>
-      </View>
+        <View style={styles.rightContainer}>
+          {showSwitch ? (
+            <Switch
+              value={switchValue}
+              onValueChange={onSwitchChange}
+              trackColor={{
+                false: `${colors.textSecondary}30`,
+                true: colors.primary,
+              }}
+              thumbColor="#FFFFFF"
+            />
+          ) : (
+            <ChevronRight size={18} color={colors.textSecondary} />
+          )}
+        </View>
+      </TouchableOpacity>
 
-      {/* Center: Title and description */}
-      <View style={styles.contentContainer}>
-        <AtomicText type="bodyLarge" color="textPrimary" style={styles.title} numberOfLines={2}>
-          {title}
-        </AtomicText>
-        {description && (
-          <AtomicText type="bodySmall" color="textSecondary" style={styles.description} numberOfLines={2}>
-            {description}
-          </AtomicText>
-        )}
-      </View>
-
-      {/* Right: Value, chevron, or custom element */}
-      <View style={styles.rightContainer}>
-        {rightElement ? (
-          rightElement
-        ) : value ? (
-          <AtomicText type="bodyMedium" color="textSecondary" style={styles.value} numberOfLines={2}>
-            {value}
-          </AtomicText>
-        ) : (showChevron ?? true) && onPress ? (
-          <AtomicIcon name="ChevronRight" size="sm" customColor={tokens.colors.textSecondary} style={styles.chevron} />
-        ) : null}
-      </View>
-    </View>
+      {!isLast && (
+        <View
+          style={[
+            styles.divider,
+            { backgroundColor: `${colors.textSecondary}20` },
+          ]}
+        />
+      )}
+    </>
   );
-
-  if (onPress && !disabled) {
-    return (
-      <Pressable onPress={onPress} testID={testID} style={styles.pressable}>
-        {content}
-      </Pressable>
-    );
-  }
-
-  return <View testID={testID}>{content}</View>;
 };
 
-const getStyles = (tokens: DesignTokens) =>
-  StyleSheet.create({
-    pressable: {
-      borderRadius: tokens.borders.radius.md,
-    },
-    listItem: {
-      flexDirection: 'row',
-      alignItems: 'center',
-      paddingVertical: tokens.spacing.sm,
-      paddingHorizontal: tokens.spacing.md,
-      minHeight: 64,
-    },
-    disabled: {
-      opacity: 0.5,
-    },
-    contentContainer: {
-      flex: 1,
-      marginLeft: tokens.spacing.md,
-      marginRight: tokens.spacing.md,
-    },
-    leftContainer: {
-      marginRight: tokens.spacing.md,
-      justifyContent: 'center',
-    },
-    iconContainer: {
-      width: 44,
-      height: 44,
-      borderRadius: 22,
-      alignItems: 'center',
-      justifyContent: 'center',
-      overflow: 'hidden',
-      borderWidth: 1,
-      borderColor: `${tokens.colors.primary}20`,
-    },
-    title: {
-      fontWeight: '600',
-      marginBottom: tokens.spacing.xs,
-    },
-    description: {
-      marginTop: tokens.spacing.xs,
-      opacity: 0.8,
-    },
-    rightContainer: {
-      justifyContent: 'center',
-      alignItems: 'flex-end',
-      maxWidth: '50%',
-      flexShrink: 0,
-    },
-    value: {
-      fontWeight: '500',
-      textAlign: 'right',
-    },
-    chevron: {
-      opacity: 0.6,
-    },
-  });
-
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    paddingHorizontal: 16,
+    paddingVertical: 14,
+  },
+  content: {
+    flexDirection: "row",
+    alignItems: "center",
+    flex: 1,
+  },
+  iconContainer: {
+    width: 40,
+    height: 40,
+    borderRadius: 8,
+    justifyContent: "center",
+    alignItems: "center",
+    marginRight: 12,
+  },
+  textContainer: {
+    flex: 1,
+    minWidth: 0,
+  },
+  title: {
+    fontSize: 16,
+    fontWeight: "500",
+  },
+  value: {
+    fontSize: 12,
+    fontWeight: "400",
+    marginTop: 2,
+  },
+  rightContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+  },
+  divider: {
+    height: 1,
+    marginLeft: 68,
+  },
+});

package/src/presentation/components/SettingsFooter.tsx

@@ -0,0 +1,46 @@
+/**
+ * Settings Footer Component
+ * Single Responsibility: Display app version information
+ */
+
+import React from "react";
+import { View, Text, StyleSheet } from "react-native";
+import { useLocalization } from "@umituz/react-native-localization";
+import { useAppDesignTokens } from "@umituz/react-native-design-system-theme";
+
+export interface SettingsFooterProps {
+  /** Custom version text (optional) */
+  versionText?: string;
+}
+
+export const SettingsFooter: React.FC<SettingsFooterProps> = ({
+  versionText,
+}) => {
+  const { t } = useLocalization();
+  const tokens = useAppDesignTokens();
+  const colors = tokens.colors;
+
+  const displayText =
+    versionText ||
+    `${t("settings.about.version")} ${t("settings.about.versionNumber")}`;
+
+  return (
+    <View style={styles.container}>
+      <Text style={[styles.text, { color: colors.textSecondary }]}>
+        {displayText}
+      </Text>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    paddingVertical: 24,
+    alignItems: "center",
+  },
+  text: {
+    fontSize: 12,
+    fontWeight: "500",
+  },
+});
+

package/src/presentation/components/SettingsSection.tsx

@@ -0,0 +1,59 @@
+/**
+ * Settings Section Component
+ * Single Responsibility: Render a settings section with title and container
+ */
+
+import React from "react";
+import { View, Text, StyleSheet } from "react-native";
+import { useAppDesignTokens } from "@umituz/react-native-design-system-theme";
+
+export interface SettingsSectionProps {
+  /** Section title */
+  title: string;
+  /** Section content */
+  children: React.ReactNode;
+}
+
+export const SettingsSection: React.FC<SettingsSectionProps> = ({
+  title,
+  children,
+}) => {
+  const tokens = useAppDesignTokens();
+  const colors = tokens.colors;
+
+  return (
+    <View style={styles.container}>
+      <Text style={[styles.title, { color: colors.textSecondary }]}>
+        {title}
+      </Text>
+      <View
+        style={[
+          styles.content,
+          { backgroundColor: `${colors.textSecondary}10` },
+        ]}
+      >
+        {children}
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    marginBottom: 24,
+  },
+  title: {
+    fontSize: 12,
+    fontWeight: "700",
+    textTransform: "uppercase",
+    letterSpacing: 1,
+    paddingHorizontal: 16,
+    paddingBottom: 8,
+  },
+  content: {
+    borderRadius: 12,
+    marginHorizontal: 16,
+    overflow: "hidden",
+  },
+});
+

package/src/presentation/components/UserProfileHeader.tsx

@@ -0,0 +1,129 @@
+/**
+ * User Profile Header Component
+ * Displays user avatar, name, and ID
+ * Works for both guest and authenticated users
+ */
+
+import React from "react";
+import { View, Text, TouchableOpacity, StyleSheet, Image } from "react-native";
+import { ChevronRight } from "lucide-react-native";
+import { useAppDesignTokens } from "@umituz/react-native-design-system-theme";
+import { useNavigation } from "@react-navigation/native";
+
+export interface UserProfileHeaderProps {
+  /** User display name */
+  displayName?: string;
+  /** User ID */
+  userId?: string;
+  /** Whether user is guest */
+  isGuest?: boolean;
+  /** Avatar URL (optional) */
+  avatarUrl?: string;
+  /** Navigation route for account settings */
+  accountSettingsRoute?: string;
+  /** Custom onPress handler */
+  onPress?: () => void;
+}
+
+export const UserProfileHeader: React.FC<UserProfileHeaderProps> = ({
+  displayName,
+  userId,
+  isGuest = false,
+  avatarUrl,
+  accountSettingsRoute = "AccountSettings",
+  onPress,
+}) => {
+  const tokens = useAppDesignTokens();
+  const navigation = useNavigation();
+  const colors = tokens.colors;
+
+  const finalDisplayName = displayName || (isGuest ? "Guest" : "User");
+  const finalUserId = userId || "Unknown";
+  const avatarName = isGuest ? "Guest" : finalDisplayName;
+  const finalAvatarUrl =
+    avatarUrl ||
+    `https://ui-avatars.com/api/?name=${encodeURIComponent(avatarName)}&background=${colors.primary.replace("#", "")}&color=fff&size=64`;
+
+  const handlePress = () => {
+    if (onPress) {
+      onPress();
+    } else if (accountSettingsRoute) {
+      navigation.navigate(accountSettingsRoute as never);
+    }
+  };
+
+  return (
+    <TouchableOpacity
+      style={[
+        styles.container,
+        {
+          backgroundColor: colors.backgroundPrimary,
+          borderColor: colors.borderLight,
+        },
+      ]}
+      onPress={handlePress}
+      activeOpacity={0.7}
+    >
+      <View style={styles.content}>
+        <Image
+          source={{ uri: finalAvatarUrl }}
+          style={[styles.avatar, { borderColor: `${colors.primary}40` }]}
+        />
+        <View style={styles.textContainer}>
+          <Text
+            style={[styles.name, { color: colors.textPrimary }]}
+            numberOfLines={1}
+          >
+            {finalDisplayName}
+          </Text>
+          <Text
+            style={[styles.id, { color: colors.textSecondary }]}
+            numberOfLines={1}
+          >
+            ID: {finalUserId.substring(0, 8)}...
+          </Text>
+        </View>
+      </View>
+      <ChevronRight size={20} color={colors.textSecondary} />
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    paddingHorizontal: 16,
+    paddingVertical: 16,
+    marginHorizontal: 16,
+    marginTop: 0,
+    borderRadius: 12,
+    borderWidth: 1,
+  },
+  content: {
+    flexDirection: "row",
+    alignItems: "center",
+    flex: 1,
+  },
+  avatar: {
+    width: 48,
+    height: 48,
+    borderRadius: 24,
+    borderWidth: 2,
+  },
+  textContainer: {
+    marginLeft: 12,
+    flex: 1,
+  },
+  name: {
+    fontSize: 16,
+    fontWeight: "600",
+    marginBottom: 4,
+  },
+  id: {
+    fontSize: 12,
+    fontWeight: "400",
+  },
+});
+

package/src/presentation/screens/SettingsScreen.tsx

@@ -1,389 +1,266 @@
 /**
  * Settings Screen
- *
- * Modern settings with Paper List.Section pattern:
- * - React Native Paper List.Section + List.Subheader
- * - Organized sections (Appearance, General, About & Legal)
- * - Paper Divider for visual separation
- * - Material Design 3 compliance
- * - OFFLINE MODE: No account, premium, feedback, or donation
- * - Optimized spacing for better visual density
- * - Configurable features via SettingsConfig prop
+ * Modern settings screen with user profile header and organized sections
  */
 
-import React, { useMemo } from 'react';
-import { DeviceEventEmitter, Alert, View, TouchableOpacity, StyleSheet } from 'react-native';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import React, { useMemo, useState } from "react";
+import {
+  View,
+  ScrollView,
+  StatusBar,
+  StyleSheet,
+  Alert,
+  DeviceEventEmitter,
+} from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { useNavigation, CommonActions } from "@react-navigation/native";
+import {
+  useDesignSystemTheme,
+  useAppDesignTokens,
+} from "@umituz/react-native-design-system-theme";
+import { Palette, Bell, Info, FileText } from "lucide-react-native";
+import { useLocalization } from "@umituz/react-native-localization";
+import { SettingItem } from "../components/SettingItem";
+import { SettingsSection } from "../components/SettingsSection";
+import { SettingsFooter } from "../components/SettingsFooter";
+import { UserProfileHeader } from "../components/UserProfileHeader";
+import { SettingsConfig } from "./types";
 
-import { useNavigation, CommonActions } from '@react-navigation/native';
-import { useDesignSystemTheme, useAppDesignTokens } from '@umituz/react-native-design-system-theme';
-import { ScreenLayout } from '@umituz/react-native-design-system-organisms';
-import { AtomicIcon, AtomicText } from '@umituz/react-native-design-system-atoms';
-import { SettingItem } from '../components/SettingItem';
-import { getLanguageByCode, useLocalization } from '@umituz/react-native-localization';
-import { SettingsConfig } from './types';
-
-// Optional notification service - only import if package is available
+// Optional notification service
 let notificationService: any = null;
 try {
   // eslint-disable-next-line @typescript-eslint/no-require-imports
-  notificationService = require('@umituz/react-native-notifications').notificationService;
+  notificationService = require("@umituz/react-native-notifications")
+    .notificationService;
 } catch {
-  // Package not available, notificationService will be null
+  // Package not available
 }
 
-// Optional onboarding store - only import if package is available
+// Optional onboarding store
 let useOnboardingStore: any = null;
 try {
   // eslint-disable-next-line @typescript-eslint/no-require-imports
-  const onboardingPackage = require('@umituz/react-native-onboarding');
+  const onboardingPackage = require("@umituz/react-native-onboarding");
   useOnboardingStore = onboardingPackage.useOnboardingStore;
 } catch {
-  // Package not available, useOnboardingStore will be null
+  // Package not available
 }
 
 /**
- * Check if a navigation screen exists in the navigation state
+ * Check if navigation screen exists
  */
-const hasNavigationScreen = (navigation: any, screenName: string): boolean => {
+const hasNavigationScreen = (
+  navigation: any,
+  screenName: string,
+): boolean => {
   try {
     const state = navigation.getState();
     if (!state) return false;
 
-    // Recursively check all routes in navigation state
     const checkRoutes = (routes: any[]): boolean => {
       if (!routes || !Array.isArray(routes)) return false;
-      
+
       for (const route of routes) {
-        if (route.name === screenName) {
+        if (route.name === screenName) return true;
+        if (route.state?.routes && checkRoutes(route.state.routes)) {
           return true;
         }
-        // Check nested navigators
-        if (route.state?.routes) {
-          if (checkRoutes(route.state.routes)) {
-            return true;
-          }
-        }
       }
       return false;
     };
 
     return checkRoutes(state.routes || []);
   } catch {
-    // If we can't check navigation state, assume it's not available
     return false;
   }
 };
 
 export interface SettingsScreenProps {
-  /**
-   * Configuration for which settings features to show
-   * @default { appearance: 'auto', notifications: 'auto', about: 'auto', legal: 'auto' }
-   */
   config?: SettingsConfig;
+  /** Show user profile header */
+  showUserProfile?: boolean;
+  /** User profile props */
+  userProfile?: {
+    displayName?: string;
+    userId?: string;
+    isGuest?: boolean;
+    avatarUrl?: string;
+    accountSettingsRoute?: string;
+    onPress?: () => void;
+  };
+  /** Show footer with version */
+  showFooter?: boolean;
+  /** Custom footer text */
+  footerText?: string;
 }
 
-export const SettingsScreen: React.FC<SettingsScreenProps> = ({ 
-  config = {} 
+export const SettingsScreen: React.FC<SettingsScreenProps> = ({
+  config = {},
+  showUserProfile = false,
+  userProfile,
+  showFooter = true,
+  footerText,
 }) => {
   const navigation = useNavigation();
   const { themeMode } = useDesignSystemTheme();
   const tokens = useAppDesignTokens();
   const insets = useSafeAreaInsets();
-  const { currentLanguage, t } = useLocalization();
-  const styles = getStyles(tokens);
+  const { t } = useLocalization();
+  const [notificationsEnabled, setNotificationsEnabled] = useState(true);
 
-  const currentLang = getLanguageByCode(currentLanguage);
-  const languageDisplay = currentLang ? `${currentLang.flag} ${currentLang.nativeName}` : 'English';
-  const themeDisplay = themeMode === 'dark' ? t('settings.darkMode') : t('settings.lightMode');
+  const isDark = themeMode === "dark";
+  const colors = tokens.colors;
 
-  // Determine which features should be shown
   const features = useMemo(() => {
-    const appearanceConfig = config.appearance ?? 'auto';
-    const notificationsConfig = config.notifications ?? 'auto';
-    const aboutConfig = config.about ?? 'auto';
-    const legalConfig = config.legal ?? 'auto';
+    const appearanceConfig = config?.appearance ?? "auto";
+    const notificationsConfig = config?.notifications ?? "auto";
+    const aboutConfig = config?.about ?? "auto";
+    const legalConfig = config?.legal ?? "auto";
 
     return {
-      appearance: appearanceConfig === true || 
-        (appearanceConfig === 'auto' && hasNavigationScreen(navigation, 'Appearance')),
-      notifications: notificationsConfig === true || 
-        (notificationsConfig === 'auto' && 
-         notificationService !== null && 
-         hasNavigationScreen(navigation, 'Notifications')),
-      about: aboutConfig === true || 
-        (aboutConfig === 'auto' && hasNavigationScreen(navigation, 'About')),
-      legal: legalConfig === true || 
-        (legalConfig === 'auto' && hasNavigationScreen(navigation, 'Legal')),
+      appearance:
+        appearanceConfig === true ||
+        (appearanceConfig === "auto" &&
+          hasNavigationScreen(navigation, "Appearance")),
+      notifications:
+        notificationsConfig === true ||
+        (notificationsConfig === "auto" &&
+          notificationService !== null &&
+          hasNavigationScreen(navigation, "Notifications")),
+      about:
+        aboutConfig === true ||
+        (aboutConfig === "auto" && hasNavigationScreen(navigation, "About")),
+      legal:
+        legalConfig === true ||
+        (legalConfig === "auto" && hasNavigationScreen(navigation, "Legal")),
     };
   }, [config, navigation]);
 
-  const handleAppearancePress = () => {
-    navigation.navigate('Appearance' as never);
-  };
-
-  const handleAboutPress = () => {
-    navigation.navigate('About' as never);
-  };
-
-  const handleLegalPress = () => {
-    navigation.navigate('Legal' as never);
-  };
-
-  const handleNotificationsPress = async () => {
-    if (notificationService) {
+  const handleNotificationsToggle = async (value: boolean) => {
+    if (notificationService && !value) {
       const hasPermissions = await notificationService.hasPermissions();
       if (!hasPermissions) {
         await notificationService.requestPermissions();
       }
     }
-    navigation.navigate('Notifications' as never);
-  };
-
-  const handleClose = () => {
-    // Try to go back in current navigator first
-    if (navigation.canGoBack()) {
-      navigation.goBack();
-      return;
-    }
-    
-    // If we can't go back in current navigator, try to find parent navigator
-    // This handles the case where Settings is the root screen of a stack
-    let parent = navigation.getParent();
-    let depth = 0;
-    const maxDepth = 5; // Safety limit to prevent infinite loops
-    
-    // Traverse up the navigation tree to find a navigator that can go back
-    while (parent && depth < maxDepth) {
-      if (parent.canGoBack()) {
-        parent.goBack();
-        return;
-      }
-      parent = parent.getParent();
-      depth++;
-    }
-    
-    // If no parent can go back, try using CommonActions to go back
-    // This is a fallback for edge cases
-    try {
-      navigation.dispatch(CommonActions.goBack());
-    } catch (error) {
-      // If all else fails, silently fail (close button just won't work)
-      /* eslint-disable-next-line no-console */
-      if (__DEV__) {
-        console.warn('[SettingsScreen] Could not navigate back:', error);
-      }
-    }
+    setNotificationsEnabled(value);
   };
 
-  const handleShowOnboarding = async () => {
-    if (!useOnboardingStore) {
-      Alert.alert('Error', 'Onboarding package is not available');
-      return;
-    }
-
-    try {
-      const onboardingStore = useOnboardingStore.getState();
-      // Reset onboarding state
-      await onboardingStore.reset();
-      // Emit event to trigger navigation to onboarding
-      DeviceEventEmitter.emit('reset-onboarding');
-      // Close settings first - try parent navigator if current can't go back
-      if (navigation.canGoBack()) {
-        navigation.goBack();
-      } else {
-        // Try to find parent navigator that can go back
-        let parent = navigation.getParent();
-        let depth = 0;
-        const maxDepth = 5;
-        
-        while (parent && depth < maxDepth) {
-          if (parent.canGoBack()) {
-            parent.goBack();
-            break;
-          }
-          parent = parent.getParent();
-          depth++;
-        }
-        
-        // Fallback to CommonActions
-        if (!parent || depth >= maxDepth) {
-          try {
-            navigation.dispatch(CommonActions.goBack());
-          } catch (error) {
-            /* eslint-disable-next-line no-console */
-            if (__DEV__) {
-              console.warn('[SettingsScreen] Could not navigate back:', error);
-            }
-          }
-        }
+  const handleNotificationsPress = async () => {
+    if (notificationService) {
+      const hasPermissions = await notificationService.hasPermissions();
+      if (!hasPermissions) {
+        await notificationService.requestPermissions();
       }
-      // Small delay to ensure navigation completes
-      setTimeout(() => {
-        DeviceEventEmitter.emit('show-onboarding');
-      }, 100);
-    } catch (error) {
-      Alert.alert(
-        'Error',
-        'Failed to show onboarding. Please try again.',
-        [{ text: 'OK' }],
-      );
     }
+    navigation.navigate("Notifications" as never);
   };
 
-  // Debug: Log features to help diagnose empty screen issues
-  /* eslint-disable-next-line no-console */
-  if (__DEV__) {
-    console.log('[SettingsScreen] Features:', features);
-    console.log('[SettingsScreen] Config:', config);
-    console.log('[SettingsScreen] Navigation state:', navigation.getState());
-  }
-
-  // Check if any features are enabled
-  const hasAnyFeatures = features.appearance || features.notifications || features.about || features.legal;
+  const hasAnyFeatures =
+    features.appearance ||
+    features.notifications ||
+    features.about ||
+    features.legal;
 
   return (
-    <ScreenLayout testID="settings-screen" hideScrollIndicator>
-      {/* Header with Close Button */}
-      <View style={[
-        styles.header, 
-        { 
-          borderBottomColor: tokens.colors.borderLight,
-          backgroundColor: tokens.colors.surface,
-          paddingTop: insets.top,
-        }
-      ]}>
-        <AtomicText type="headlineLarge" style={{ color: tokens.colors.textPrimary, flex: 1 }}>
-          {t('navigation.settings') || 'Settings'}
-        </AtomicText>
-        <TouchableOpacity
-          onPress={handleClose}
-          style={styles.closeButton}
-          hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
-          testID="close-settings-button"
-        >
-          <AtomicIcon name="X" size="lg" color="primary" />
-        </TouchableOpacity>
-      </View>
-
-      {/* Appearance Section */}
-      {features.appearance && (
-        <View style={{ marginBottom: tokens.spacing.md }}>
-          <AtomicText type="labelMedium" color="textSecondary" style={styles.sectionHeader}>
-            {t('settings.sections.appearance')}
-          </AtomicText>
-          <SettingItem
-            icon="Palette"
-            iconGradient={((tokens.colors as any).settingGradients?.themeLight as unknown as string[]) || [tokens.colors.primary, tokens.colors.secondary]}
-            title={t('settings.appearance.title')}
-            description={t('settings.appearance.themeDescription')}
-            onPress={handleAppearancePress}
-            testID="appearance-button"
-          />
-        </View>
-      )}
-
-      {/* General Section - Notifications */}
-      {features.notifications && (
-        <View style={{ marginBottom: tokens.spacing.md }}>
-          <AtomicText type="labelMedium" color="textSecondary" style={styles.sectionHeader}>
-            {t('settings.sections.general')}
-          </AtomicText>
-          <SettingItem
-            icon="Bell"
-            iconGradient={((tokens.colors as any).settingGradients?.notifications as unknown as string[]) || [tokens.colors.primary, tokens.colors.secondary]}
-            title={t('settings.notifications.title')}
-            description={t('settings.notifications.description')}
-            onPress={handleNotificationsPress}
-            testID="notifications-button"
-          />
-        </View>
-      )}
+    <View style={[styles.container, { backgroundColor: colors.backgroundPrimary }]}>
+      <StatusBar barStyle={isDark ? "light-content" : "dark-content"} />
 
-      {/* Development/Test: Show Onboarding */}
-      {__DEV__ && useOnboardingStore && (
-        <View style={{ marginBottom: tokens.spacing.md }}>
-          <AtomicText type="labelMedium" color="textSecondary" style={styles.sectionHeader}>
-            Development
-          </AtomicText>
-          <SettingItem
-            icon="Play"
-            iconGradient={((tokens.colors as any).settingGradients?.info as unknown as string[]) || [tokens.colors.primary, tokens.colors.secondary]}
-            title="Show Onboarding (Dev)"
-            description="Navigate to onboarding screen"
-            onPress={handleShowOnboarding}
-            testID="show-onboarding-button"
+      <ScrollView
+        style={styles.scrollView}
+        contentContainerStyle={[
+          styles.scrollContent,
+          {
+            paddingTop: insets.top + 16,
+            paddingBottom: 100,
+          },
+        ]}
+        showsVerticalScrollIndicator={false}
+      >
+        {showUserProfile && (
+          <UserProfileHeader
+            displayName={userProfile?.displayName}
+            userId={userProfile?.userId}
+            isGuest={userProfile?.isGuest}
+            avatarUrl={userProfile?.avatarUrl}
+            accountSettingsRoute={userProfile?.accountSettingsRoute}
+            onPress={userProfile?.onPress}
           />
-        </View>
-      )}
+        )}
 
-      {/* About & Legal Section */}
-      {(features.about || features.legal) && (
-        <View style={{ marginBottom: tokens.spacing.md }}>
-          <AtomicText type="labelMedium" color="textSecondary" style={styles.sectionHeader}>
-            {t('settings.sections.about')}
-          </AtomicText>
-          {features.about && (
+        {features.appearance && (
+          <SettingsSection title={t("settings.sections.app.title")}>
             <SettingItem
-              icon="Info"
-              iconGradient={((tokens.colors as any).settingGradients?.info as unknown as string[]) || [tokens.colors.primary, tokens.colors.secondary]}
-              title={t('settings.about.title')}
-              description={t('settings.about.description')}
-              onPress={handleAboutPress}
-              testID="about-button"
+              icon={Palette}
+              title={t("settings.appearance.title")}
+              value={t("settings.appearance.description")}
+              onPress={() => navigation.navigate("Appearance" as never)}
             />
-          )}
-          {features.about && features.legal && (
-            <View style={{ height: 1, backgroundColor: tokens.colors.borderLight, marginVertical: tokens.spacing.sm }} />
-          )}
-          {features.legal && (
+          </SettingsSection>
+        )}
+
+        {features.notifications && (
+          <SettingsSection title={t("settings.sections.general")}>
             <SettingItem
-              icon="FileText"
-              iconGradient={((tokens.colors as any).settingGradients?.info as unknown as string[]) || [tokens.colors.primary, tokens.colors.secondary]}
-              title={t('settings.legal.title')}
-              description={t('settings.legal.description')}
-              onPress={handleLegalPress}
-              testID="legal-button"
+              icon={Bell}
+              title={t("settings.notifications.title")}
+              showSwitch={true}
+              switchValue={notificationsEnabled}
+              onSwitchChange={handleNotificationsToggle}
+              isLast={true}
             />
-          )}
-        </View>
-      )}
+          </SettingsSection>
+        )}
+
+        {(features.about || features.legal) && (
+          <SettingsSection title={t("settings.sections.about")}>
+            {features.about && (
+              <SettingItem
+                icon={Info}
+                title={t("settings.about.title")}
+                value={t("settings.about.description")}
+                onPress={() => navigation.navigate("About" as never)}
+              />
+            )}
+            {features.legal && (
+              <SettingItem
+                icon={FileText}
+                title={t("settings.legal.title")}
+                value={t("settings.legal.description")}
+                onPress={() => navigation.navigate("Legal" as never)}
+                isLast={true}
+              />
+            )}
+          </SettingsSection>
+        )}
+
+        {!hasAnyFeatures && (
+          <View style={styles.emptyContainer}>
+            <SettingsSection
+              title={t("settings.noOptionsAvailable") || "No settings available"}
+            >
+              <View />
+            </SettingsSection>
+          </View>
+        )}
 
-      {/* Fallback: Show message if no features are enabled */}
-      {!hasAnyFeatures && (
-        <View>
-          <AtomicText type="labelMedium" color="textSecondary" style={styles.sectionHeader}>
-            {t('settings.noOptionsAvailable') || 'No settings available'}
-          </AtomicText>
-        </View>
-      )}
-    </ScreenLayout>
+        {showFooter && <SettingsFooter versionText={footerText} />}
+      </ScrollView>
+    </View>
   );
 };
 
-const getStyles = (tokens: any) => StyleSheet.create({
-  header: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    paddingHorizontal: tokens.spacing.md,
-    paddingBottom: tokens.spacing.md,
-    paddingTop: tokens.spacing.md,
-    borderBottomWidth: 1,
-    zIndex: 1000,
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
   },
-  sectionHeader: {
-    paddingHorizontal: tokens.spacing.lg,
-    paddingTop: tokens.spacing.lg,
-    paddingBottom: tokens.spacing.md,
-    textTransform: 'uppercase',
-    letterSpacing: 1,
-    fontWeight: '600',
-    fontSize: 12,
+  scrollView: {
+    flex: 1,
   },
-  closeButton: {
-    padding: tokens.spacing.sm,
-    marginLeft: tokens.spacing.sm,
+  scrollContent: {
+    flexGrow: 1,
+  },
+  emptyContainer: {
+    paddingVertical: 24,
   },
 });
-