improved cast section with filmographies

src/components/metadata/CastDetailsModal.tsx

@@ -24,6 +24,9 @@ import { LinearGradient } from 'expo-linear-gradient';
 import { useTheme } from '../../contexts/ThemeContext';
 import { Cast } from '../../types/cast';
 import { tmdbService } from '../../services/tmdbService';
+import { useNavigation } from '@react-navigation/native';
+import { NavigationProp } from '@react-navigation/native';
+import { RootStackParamList } from '../../navigation/AppNavigator';
 
 interface CastDetailsModalProps {
   visible: boolean;
@@ -53,6 +56,7 @@ export const CastDetailsModal: React.FC<CastDetailsModalProps> = ({
   castMember,
 }) => {
   const { currentTheme } = useTheme();
+  const navigation = useNavigation<NavigationProp<RootStackParamList>>();
   const [personDetails, setPersonDetails] = useState<PersonDetails | null>(null);
   const [loading, setLoading] = useState(false);
   const [hasFetched, setHasFetched] = useState(false);
@@ -105,6 +109,16 @@ export const CastDetailsModal: React.FC<CastDetailsModalProps> = ({
     });
   };
 
+  const handleViewMovies = () => {
+    if (castMember) {
+      handleClose();
+      // Navigate after modal is closed
+      setTimeout(() => {
+        navigation.navigate('CastMovies', { castMember });
+      }, 300);
+    }
+  };
+
   const formatDate = (dateString: string | null) => {
     if (!dateString) return null;
     const date = new Date(dateString);
@@ -197,24 +211,21 @@ export const CastDetailsModal: React.FC<CastDetailsModalProps> = ({
     return (
       <>
         {/* Header */}
-        <LinearGradient
+        <View style={{
-          colors={[
+          padding: isTablet ? 24 : 20,
-            currentTheme.colors.primary + 'DD',
+          paddingTop: isTablet ? 28 : 24,
-            currentTheme.colors.primary + 'AA',
+          backgroundColor: 'rgba(0, 0, 0, 0.4)',
-          ]}
+          borderBottomWidth: 1,
-          style={{
+          borderBottomColor: 'rgba(255, 255, 255, 0.08)',
-            padding: isTablet ? 24 : 20,
+        }}>
-            paddingTop: isTablet ? 28 : 24,
-          }}
-        >
           <View style={{ flexDirection: 'row', alignItems: 'center' }}>
             <View style={{
-              width: isTablet ? 80 : 60,
+              width: isTablet ? 72 : 56,
-              height: isTablet ? 80 : 60,
+              height: isTablet ? 72 : 56,
-              borderRadius: isTablet ? 40 : 30,
+              borderRadius: isTablet ? 36 : 28,
               overflow: 'hidden',
-              marginRight: isTablet ? 20 : 16,
+              marginRight: isTablet ? 16 : 12,
-              backgroundColor: 'rgba(255, 255, 255, 0.1)',
+              backgroundColor: 'rgba(255, 255, 255, 0.08)',
             }}>
               {castMember?.profile_path ? (
                 <Image
@@ -232,9 +243,9 @@ export const CastDetailsModal: React.FC<CastDetailsModalProps> = ({
                   justifyContent: 'center',
                 }}>
                   <Text style={{
-                    color: '#fff',
+                    color: 'rgba(255, 255, 255, 0.6)',
-                    fontSize: isTablet ? 22 : 18,
+                    fontSize: isTablet ? 20 : 16,
-                    fontWeight: '700',
+                    fontWeight: '600',
                   }}>
                     {castMember?.name?.split(' ').reduce((prev: string, current: string) => prev + current[0], '').substring(0, 2)}
                   </Text>
@@ -245,16 +256,16 @@ export const CastDetailsModal: React.FC<CastDetailsModalProps> = ({
             <View style={{ flex: 1 }}>
               <Text style={{
                 color: '#fff',
-                fontSize: isTablet ? 22 : 18,
+                fontSize: isTablet ? 20 : 17,
-                fontWeight: '800',
+                fontWeight: '700',
-                marginBottom: 4,
+                marginBottom: 3,
               }} numberOfLines={2}>
                 {castMember?.name}
               </Text>
               {castMember?.character && (
                 <Text style={{
-                  color: 'rgba(255, 255, 255, 0.8)',
+                  color: 'rgba(255, 255, 255, 0.6)',
-                  fontSize: isTablet ? 16 : 14,
+                  fontSize: isTablet ? 14 : 13,
                   fontWeight: '500',
                 }} numberOfLines={2}>
                   as {castMember.character}
@@ -264,25 +275,25 @@ export const CastDetailsModal: React.FC<CastDetailsModalProps> = ({
 
             <TouchableOpacity
               style={{
-                width: isTablet ? 44 : 36,
+                width: isTablet ? 36 : 32,
-                height: isTablet ? 44 : 36,
+                height: isTablet ? 36 : 32,
-                borderRadius: isTablet ? 22 : 18,
+                borderRadius: isTablet ? 18 : 16,
-                backgroundColor: 'rgba(255, 255, 255, 0.2)',
+                backgroundColor: 'rgba(255, 255, 255, 0.1)',
                 justifyContent: 'center',
                 alignItems: 'center',
               }}
               onPress={handleClose}
               activeOpacity={0.7}
             >
-              <MaterialIcons name="close" size={isTablet ? 24 : 20} color="#fff" />
+              <MaterialIcons name="close" size={isTablet ? 20 : 18} color="rgba(255, 255, 255, 0.8)" />
             </TouchableOpacity>
           </View>
-        </LinearGradient>
+        </View>
 
         {/* Content */}
         <ScrollView
           style={{ flex: 1 }}
-          contentContainerStyle={{ padding: isTablet ? 28 : 20 }}
+          contentContainerStyle={{ padding: isTablet ? 24 : 18 }}
           showsVerticalScrollIndicator={false}
         >
           {loading ? (
@@ -302,58 +313,33 @@ export const CastDetailsModal: React.FC<CastDetailsModalProps> = ({
             </View>
           ) : (
             <View>
-              {/* Quick Info */}
+              {/* Basic Info */}
-              {(personDetails?.known_for_department || personDetails?.birthday || personDetails?.place_of_birth) && (
+              {(personDetails?.birthday || personDetails?.place_of_birth) && (
                 <View style={{
-                  backgroundColor: 'rgba(255, 255, 255, 0.05)',
+                  backgroundColor: 'rgba(255, 255, 255, 0.03)',
-                  borderRadius: 16,
+                  borderRadius: 12,
                   padding: 16,
                   marginBottom: 20,
+                  borderWidth: 1,
+                  borderColor: 'rgba(255, 255, 255, 0.06)',
                 }}>
-                  {personDetails?.known_for_department && (
-                    <View style={{ 
-                      flexDirection: 'row', 
-                      alignItems: 'center',
-                      marginBottom: personDetails?.birthday || personDetails?.place_of_birth ? 12 : 0
-                    }}>
-                      <MaterialIcons name="work" size={16} color={currentTheme.colors.primary} />
-                      <Text style={{
-                        color: 'rgba(255, 255, 255, 0.7)',
-                        fontSize: 12,
-                        marginLeft: 8,
-                        marginRight: 12,
-                      }}>
-                        Department
-                      </Text>
-                      <Text style={{
-                        color: '#fff',
-                        fontSize: 14,
-                        fontWeight: '600',
-                      }}>
-                        {personDetails.known_for_department}
-                      </Text>
-                    </View>
-                  )}
-
                   {personDetails?.birthday && (
                     <View style={{ 
                       flexDirection: 'row', 
                       alignItems: 'center',
-                      marginBottom: personDetails?.place_of_birth ? 12 : 0
+                      marginBottom: personDetails?.place_of_birth ? 10 : 0
                     }}>
-                      <MaterialIcons name="cake" size={16} color="#22C55E" />
+                      <View style={{
+                        width: 6,
+                        height: 6,
+                        borderRadius: 3,
+                        backgroundColor: 'rgba(255, 255, 255, 0.4)',
+                        marginRight: 12,
+                      }} />
                       <Text style={{
                         color: 'rgba(255, 255, 255, 0.7)',
-                        fontSize: 12,
+                        fontSize: 13,
-                        marginLeft: 8,
+                        fontWeight: '500',
-                        marginRight: 12,
-                      }}>
-                        Age
-                      </Text>
-                      <Text style={{
-                        color: '#fff',
-                        fontSize: 14,
-                        fontWeight: '600',
                       }}>
                         {calculateAge(personDetails.birthday)} years old
                       </Text>
@@ -362,60 +348,61 @@ export const CastDetailsModal: React.FC<CastDetailsModalProps> = ({
 
                   {personDetails?.place_of_birth && (
                     <View style={{ flexDirection: 'row', alignItems: 'center' }}>
-                      <MaterialIcons name="place" size={16} color="#F59E0B" />
+                      <View style={{
+                        width: 6,
+                        height: 6,
+                        borderRadius: 3,
+                        backgroundColor: 'rgba(255, 255, 255, 0.4)',
+                        marginRight: 12,
+                      }} />
                       <Text style={{
                         color: 'rgba(255, 255, 255, 0.7)',
-                        fontSize: 12,
+                        fontSize: 13,
-                        marginLeft: 8,
+                        fontWeight: '500',
-                        marginRight: 12,
-                      }}>
-                        Born in
-                      </Text>
-                      <Text style={{
-                        color: '#fff',
-                        fontSize: 14,
-                        fontWeight: '600',
                         flex: 1,
                       }}>
-                        {personDetails.place_of_birth}
+                        Born in {personDetails.place_of_birth}
-                      </Text>
-                    </View>
-                  )}
-
-                  {personDetails?.birthday && (
-                    <View style={{
-                      marginTop: 12,
-                      paddingTop: 12,
-                      borderTopWidth: 1,
-                      borderTopColor: 'rgba(255, 255, 255, 0.1)',
-                    }}>
-                      <Text style={{
-                        color: 'rgba(255, 255, 255, 0.7)',
-                        fontSize: 12,
-                        marginBottom: 4,
-                      }}>
-                        Born on {formatDate(personDetails.birthday)}
                       </Text>
                     </View>
                   )}
                 </View>
               )}
 
+              {/* View Movies Button */}
+              <TouchableOpacity
+                style={{
+                  backgroundColor: 'rgba(255, 255, 255, 0.08)',
+                  borderRadius: 10,
+                  paddingVertical: 12,
+                  paddingHorizontal: 16,
+                  marginBottom: 20,
+                  flexDirection: 'row',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  borderWidth: 1,
+                  borderColor: 'rgba(255, 255, 255, 0.12)',
+                }}
+                onPress={handleViewMovies}
+                activeOpacity={0.7}
+              >
+                <MaterialIcons name="movie" size={18} color="rgba(255, 255, 255, 0.9)" style={{ marginRight: 8 }} />
+                <Text style={{
+                  color: 'rgba(255, 255, 255, 0.9)',
+                  fontSize: 15,
+                  fontWeight: '600',
+                  letterSpacing: 0.3,
+                }}>
+                  View Filmography
+                </Text>
+              </TouchableOpacity>
+
               {/* Biography */}
               {personDetails?.biography && (
                 <View style={{ marginBottom: 20 }}>
                   <Text style={{
-                    color: '#fff',
+                    color: 'rgba(255, 255, 255, 0.8)',
-                    fontSize: isTablet ? 20 : 16,
+                    fontSize: isTablet ? 15 : 14,
-                    fontWeight: '700',
+                    lineHeight: isTablet ? 22 : 20,
-                    marginBottom: isTablet ? 16 : 12,
-                  }}>
-                    Biography
-                  </Text>
-                  <Text style={{
-                    color: 'rgba(255, 255, 255, 0.9)',
-                    fontSize: isTablet ? 16 : 14,
-                    lineHeight: isTablet ? 24 : 20,
                     fontWeight: '400',
                   }}>
                     {personDetails.biography}
@@ -423,42 +410,49 @@ export const CastDetailsModal: React.FC<CastDetailsModalProps> = ({
                 </View>
               )}
 
-              {/* Also Known As - Compact */}
+              {/* Also Known As - Minimalistic */}
               {personDetails?.also_known_as && personDetails.also_known_as.length > 0 && (
-                <View>
+                <View style={{
+                  backgroundColor: 'rgba(255, 255, 255, 0.03)',
+                  borderRadius: 8,
+                  padding: 12,
+                  marginBottom: 16,
+                }}>
                   <Text style={{
-                    color: '#fff',
+                    color: 'rgba(255, 255, 255, 0.5)',
-                    fontSize: isTablet ? 20 : 16,
+                    fontSize: 11,
-                    fontWeight: '700',
+                    fontWeight: '600',
-                    marginBottom: isTablet ? 16 : 12,
+                    marginBottom: 6,
+                    textTransform: 'uppercase',
+                    letterSpacing: 0.5,
                   }}>
                     Also Known As
                   </Text>
                   <Text style={{
-                    color: 'rgba(255, 255, 255, 0.8)',
+                    color: 'rgba(255, 255, 255, 0.7)',
-                    fontSize: isTablet ? 16 : 14,
+                    fontSize: isTablet ? 14 : 13,
-                    lineHeight: isTablet ? 24 : 20,
+                    lineHeight: isTablet ? 20 : 18,
+                    fontWeight: '500',
                   }}>
-                    {personDetails.also_known_as.slice(0, 4).join(' • ')}
+                    {personDetails.also_known_as.slice(0, 3).join(' • ')}
                   </Text>
                 </View>
               )}
 
               {/* No details available */}
-              {!loading && !personDetails?.biography && !personDetails?.birthday && !personDetails?.place_of_birth && (
+              {!loading && !personDetails?.biography && !personDetails?.birthday && !personDetails?.place_of_birth && !personDetails?.also_known_as?.length && (
                 <View style={{
                   alignItems: 'center',
                   justifyContent: 'center',
-                  paddingVertical: 40,
+                  paddingVertical: 32,
                 }}>
-                  <MaterialIcons name="info" size={32} color="rgba(255, 255, 255, 0.3)" />
                   <Text style={{
-                    color: 'rgba(255, 255, 255, 0.7)',
+                    color: 'rgba(255, 255, 255, 0.5)',
-                    fontSize: 14,
+                    fontSize: 13,
-                    marginTop: 12,
                     textAlign: 'center',
+                    fontWeight: '500',
                   }}>
-                    No additional details available
+                    No additional information available
                   </Text>
                 </View>
               )}

src/navigation/AppNavigator.tsx

@@ -45,6 +45,7 @@ import AuthScreen from '../screens/AuthScreen';
 import AccountManageScreen from '../screens/AccountManageScreen';
 import { AccountProvider, useAccount } from '../contexts/AccountContext';
 import PluginsScreen from '../screens/PluginsScreen';
+import CastMoviesScreen from '../screens/CastMoviesScreen';
 
 // Stack navigator types
 export type RootStackParamList = {
@@ -115,6 +116,14 @@ export type RootStackParamList = {
   ThemeSettings: undefined;
   ProfilesSettings: undefined;
   ScraperSettings: undefined;
+  CastMovies: {
+    castMember: {
+      id: number;
+      name: string;
+      profile_path: string | null;
+      character?: string;
+    };
+  };
 };
 
 export type RootStackNavigationProp = NativeStackNavigationProp<RootStackParamList>;
@@ -1054,6 +1063,21 @@ const InnerNavigator = ({ initialRouteName }: { initialRouteName?: keyof RootSta
                 },
               }}
             />
+            <Stack.Screen 
+              name="CastMovies" 
+              component={CastMoviesScreen}
+              options={{
+                animation: Platform.OS === 'android' ? 'slide_from_right' : 'fade',
+                animationDuration: Platform.OS === 'android' ? 250 : 200,
+                presentation: 'card',
+                gestureEnabled: true,
+                gestureDirection: 'horizontal',
+                headerShown: false,
+                contentStyle: {
+                  backgroundColor: currentTheme.colors.darkBackground,
+                },
+              }}
+            />
           </Stack.Navigator>
         </View>
       </PaperProvider>

src/screens/CastMoviesScreen.tsx

@@ -0,0 +1,772 @@
+import React, { useState, useEffect, useCallback, useMemo } from 'react';
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  ScrollView,
+  ActivityIndicator,
+  Dimensions,
+  Platform,
+  Alert,
+} from 'react-native';
+import { FlashList } from '@shopify/flash-list';
+import { MaterialIcons } from '@expo/vector-icons';
+import { Image } from 'expo-image';
+import Animated, {
+  FadeIn,
+  FadeOut,
+  SlideInDown,
+  SlideOutDown,
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+  withSpring,
+  interpolate,
+  Extrapolate,
+} from 'react-native-reanimated';
+import { LinearGradient } from 'expo-linear-gradient';
+import { BlurView } from 'expo-blur';
+import { useTheme } from '../contexts/ThemeContext';
+import { Cast } from '../types/cast';
+import { tmdbService } from '../services/tmdbService';
+import { catalogService } from '../services/catalogService';
+import { useNavigation, useRoute, RouteProp } from '@react-navigation/native';
+import { NavigationProp } from '@react-navigation/native';
+import { RootStackParamList } from '../navigation/AppNavigator';
+import { SafeAreaView, useSafeAreaInsets } from 'react-native-safe-area-context';
+import { StackActions } from '@react-navigation/native';
+
+const { width, height } = Dimensions.get('window');
+const isTablet = width >= 768;
+const numColumns = isTablet ? 4 : 3;
+const posterWidth = (width - 60 - (numColumns - 1) * 12) / numColumns;
+const posterHeight = posterWidth * 1.5;
+
+interface CastMovie {
+  id: number;
+  title: string;
+  poster_path: string | null;
+  release_date: string;
+  character?: string;
+  job?: string;
+  media_type: 'movie' | 'tv';
+  popularity?: number;
+  vote_average?: number;
+  isUpcoming?: boolean;
+}
+
+type CastMoviesScreenRouteProp = RouteProp<RootStackParamList, 'CastMovies'>;
+
+const CastMoviesScreen: React.FC = () => {
+  const { currentTheme } = useTheme();
+  const navigation = useNavigation<NavigationProp<RootStackParamList>>();
+  const route = useRoute<CastMoviesScreenRouteProp>();
+  const { castMember } = route.params;
+  const { top: safeAreaTop } = useSafeAreaInsets();
+
+  const [movies, setMovies] = useState<CastMovie[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [selectedFilter, setSelectedFilter] = useState<'all' | 'movies' | 'tv'>('all');
+  const [sortBy, setSortBy] = useState<'popularity' | 'latest' | 'upcoming'>('popularity');
+  const scrollY = useSharedValue(0);
+  const [displayLimit, setDisplayLimit] = useState(30); // Start with fewer items for performance
+  const [isLoadingMore, setIsLoadingMore] = useState(false);
+
+  useEffect(() => {
+    if (castMember) {
+      fetchCastCredits();
+    }
+  }, [castMember]);
+
+  // Reset display limit when filters change
+  useEffect(() => {
+    setDisplayLimit(30);
+  }, [selectedFilter, sortBy]);
+
+  const fetchCastCredits = async () => {
+    if (!castMember) return;
+    
+    setLoading(true);
+    try {
+      const credits = await tmdbService.getPersonCombinedCredits(castMember.id);
+      
+      if (credits && credits.cast) {
+        const currentDate = new Date();
+        
+        // Combine cast roles with enhanced data, excluding talk shows and variety shows
+        const allCredits = credits.cast
+          .filter((item: any) => {
+            // Filter out talk shows, variety shows, and ensure we have required data
+            const hasPoster = item.poster_path;
+            const hasReleaseDate = item.release_date || item.first_air_date;
+            
+            if (!hasPoster || !hasReleaseDate) return false;
+            
+            // Enhanced talk show filtering
+            const title = (item.title || item.name || '').toLowerCase();
+            const overview = (item.overview || '').toLowerCase();
+            
+            // List of common talk show and variety show keywords
+            const talkShowKeywords = [
+              'talk', 'show', 'late night', 'tonight show', 'jimmy fallon', 'snl', 'saturday night live',
+              'variety', 'sketch comedy', 'stand-up', 'standup', 'comedy central', 'daily show',
+              'colbert', 'kimmel', 'conan', 'ellen', 'oprah', 'view', 'today show', 'good morning',
+              'interview', 'panel', 'roundtable', 'discussion', 'news', 'current events', 'politics',
+              'reality', 'competition', 'game show', 'quiz', 'trivia', 'awards', 'ceremony',
+              'red carpet', 'premiere', 'after party', 'behind the scenes', 'making of', 'documentary',
+              'special', 'concert', 'live performance', 'mtv', 'vh1', 'bet', 'comedy', 'roast'
+            ];
+            
+            // Check if any keyword matches
+            const isTalkShow = talkShowKeywords.some(keyword => 
+              title.includes(keyword) || overview.includes(keyword)
+            );
+            
+            return !isTalkShow;
+          })
+          .map((item: any) => {
+            const releaseDate = new Date(item.release_date || item.first_air_date);
+            const isUpcoming = releaseDate > currentDate;
+            
+            return {
+              id: item.id,
+              title: item.title || item.name,
+              poster_path: item.poster_path,
+              release_date: item.release_date || item.first_air_date,
+              character: item.character,
+              media_type: item.media_type,
+              popularity: item.popularity || 0,
+              vote_average: item.vote_average || 0,
+              isUpcoming,
+            };
+          });
+        
+        setMovies(allCredits);
+      }
+    } catch (error) {
+      console.error('Error fetching cast credits:', error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const filteredAndSortedMovies = useMemo(() => {
+    let filtered = movies.filter(movie => {
+      if (selectedFilter === 'all') return true;
+      if (selectedFilter === 'movies') return movie.media_type === 'movie';
+      if (selectedFilter === 'tv') return movie.media_type === 'tv';
+      return true;
+    });
+
+    // If sorting by upcoming, only show upcoming content
+    if (sortBy === 'upcoming') {
+      filtered = filtered.filter(movie => movie.isUpcoming);
+    }
+
+    // Apply sorting
+    filtered.sort((a, b) => {
+      switch (sortBy) {
+        case 'popularity':
+          return (b.popularity || 0) - (a.popularity || 0);
+        case 'latest':
+          const dateA = new Date(a.release_date || '1900-01-01');
+          const dateB = new Date(b.release_date || '1900-01-01');
+          return dateB.getTime() - dateA.getTime();
+        case 'upcoming':
+          // Only show upcoming content, sorted by nearest release date
+          if (!a.isUpcoming && !b.isUpcoming) return 0;
+          if (a.isUpcoming && !b.isUpcoming) return -1;
+          if (!a.isUpcoming && b.isUpcoming) return 1;
+          const upcomingDateA = new Date(a.release_date || '9999-12-31');
+          const upcomingDateB = new Date(b.release_date || '9999-12-31');
+          return upcomingDateA.getTime() - upcomingDateB.getTime();
+        default:
+          return 0;
+      }
+    });
+
+    return filtered;
+  }, [movies, selectedFilter, sortBy]);
+
+  // Performance: Limit displayed items initially for better performance
+  const displayedMovies = useMemo(() => {
+    return filteredAndSortedMovies.slice(0, displayLimit);
+  }, [filteredAndSortedMovies, displayLimit]);
+
+  // Load more items when needed
+  const handleLoadMore = useCallback(() => {
+    if (displayLimit < filteredAndSortedMovies.length && !isLoadingMore) {
+      setIsLoadingMore(true);
+      // Simulate loading delay for smooth UX
+      setTimeout(() => {
+        setDisplayLimit(prev => Math.min(prev + 20, filteredAndSortedMovies.length));
+        setIsLoadingMore(false);
+      }, 200);
+    }
+  }, [displayLimit, filteredAndSortedMovies.length, isLoadingMore]);
+
+  const handleMoviePress = async (movie: CastMovie) => {
+    try {
+      // Get Stremio ID using catalogService
+      const stremioId = await catalogService.getStremioId(movie.media_type, movie.id.toString());
+      
+      if (stremioId) {
+        navigation.dispatch(
+          StackActions.push('Metadata', { 
+            id: stremioId, 
+            type: movie.media_type 
+          })
+        );
+      } else {
+        throw new Error('Could not find Stremio ID');
+      }
+    } catch (error) {
+      console.error('Error navigating to movie:', error);
+      Alert.alert(
+        'Error',
+        'Unable to load this content. Please try again later.',
+        [{ text: 'OK' }]
+      );
+    }
+  };
+
+  const handleBack = () => {
+    navigation.goBack();
+  };
+
+  const renderFilterButton = (filter: 'all' | 'movies' | 'tv', label: string, count: number) => {
+    const isSelected = selectedFilter === filter;
+    
+    return (
+      <Animated.View entering={FadeIn.delay(100)}>
+        <TouchableOpacity
+          style={{
+            paddingHorizontal: 18,
+            paddingVertical: 10,
+            borderRadius: 25,
+            backgroundColor: isSelected 
+              ? currentTheme.colors.primary 
+              : 'rgba(255, 255, 255, 0.08)',
+            marginRight: 12,
+            borderWidth: isSelected ? 0 : 1,
+            borderColor: 'rgba(255, 255, 255, 0.12)',
+          }}
+          onPress={() => setSelectedFilter(filter)}
+          activeOpacity={0.8}
+        >
+          <Text style={{
+            color: isSelected ? '#fff' : 'rgba(255, 255, 255, 0.85)',
+            fontSize: 13,
+            fontWeight: isSelected ? '700' : '600',
+            letterSpacing: 0.3,
+          }}>
+            {count > 0 ? `${label} (${count})` : label}
+          </Text>
+        </TouchableOpacity>
+      </Animated.View>
+    );
+  };
+
+  const renderSortButton = (sort: 'popularity' | 'latest' | 'upcoming', label: string, icon: string) => {
+    const isSelected = sortBy === sort;
+    
+    return (
+      <Animated.View entering={FadeIn.delay(200)}>
+        <TouchableOpacity
+          style={{
+            paddingHorizontal: 16,
+            paddingVertical: 8,
+            borderRadius: 20,
+            backgroundColor: isSelected 
+              ? 'rgba(255, 255, 255, 0.15)' 
+              : 'transparent',
+            marginRight: 12,
+            flexDirection: 'row',
+            alignItems: 'center',
+          }}
+          onPress={() => setSortBy(sort)}
+          activeOpacity={0.7}
+        >
+          <MaterialIcons 
+            name={icon as any} 
+            size={16} 
+            color={isSelected ? currentTheme.colors.primary : 'rgba(255, 255, 255, 0.6)'} 
+            style={{ marginRight: 6 }}
+          />
+          <Text style={{
+            color: isSelected ? currentTheme.colors.primary : 'rgba(255, 255, 255, 0.8)',
+            fontSize: 12,
+            fontWeight: isSelected ? '700' : '500',
+            letterSpacing: 0.2,
+          }}>
+            {label}
+          </Text>
+        </TouchableOpacity>
+      </Animated.View>
+    );
+  };
+
+  const renderMovieItem = useCallback(({ item, index }: { item: CastMovie; index: number }) => (
+    <Animated.View
+      entering={FadeIn.delay(Math.min(index * 30, 500)).springify()}
+      style={{
+        width: posterWidth,
+        marginBottom: 20,
+      }}
+    >
+      <TouchableOpacity
+        onPress={() => handleMoviePress(item)}
+        activeOpacity={0.85}
+        style={{
+          shadowColor: '#000',
+          shadowOffset: {
+            width: 0,
+            height: 4,
+          },
+          shadowOpacity: 0.3,
+          shadowRadius: 8,
+          elevation: 8,
+        }}
+      >
+        <View style={{
+          width: posterWidth,
+          height: posterHeight,
+          borderRadius: 16,
+          overflow: 'hidden',
+          backgroundColor: 'rgba(255, 255, 255, 0.05)',
+        }}>
+          {item.poster_path ? (
+            <Image
+              source={{
+                uri: `https://image.tmdb.org/t/p/w500${item.poster_path}`,
+              }}
+              style={{ width: '100%', height: '100%' }}
+              contentFit="cover"
+            />
+          ) : (
+            <View style={{
+              width: '100%',
+              height: '100%',
+              alignItems: 'center',
+              justifyContent: 'center',
+              backgroundColor: 'rgba(255, 255, 255, 0.05)',
+            }}>
+              <MaterialIcons name="movie" size={32} color="rgba(255, 255, 255, 0.2)" />
+            </View>
+          )}
+          
+          {/* Upcoming indicator */}
+          {item.isUpcoming && (
+            <View style={{
+              position: 'absolute',
+              top: 8,
+              left: 8,
+              backgroundColor: 'rgba(255, 193, 7, 0.95)',
+              borderRadius: 12,
+              paddingHorizontal: 8,
+              paddingVertical: 4,
+              flexDirection: 'row',
+              alignItems: 'center',
+            }}>
+              <MaterialIcons name="schedule" size={12} color="#000" />
+              <Text style={{
+                color: '#000',
+                fontSize: 9,
+                fontWeight: '700',
+                marginLeft: 4,
+                letterSpacing: 0.2,
+              }}>
+                UPCOMING
+              </Text>
+            </View>
+          )}
+
+
+
+          {/* Rating badge */}
+          {item.vote_average && item.vote_average > 0 && (
+            <View style={{
+              position: 'absolute',
+              bottom: 8,
+              right: 8,
+              backgroundColor: 'rgba(0, 0, 0, 0.8)',
+              borderRadius: 8,
+              paddingHorizontal: 6,
+              paddingVertical: 2,
+              flexDirection: 'row',
+              alignItems: 'center',
+            }}>
+              <MaterialIcons name="star" size={10} color="#FFC107" />
+              <Text style={{
+                color: '#fff',
+                fontSize: 9,
+                fontWeight: '600',
+                marginLeft: 2,
+              }}>
+                {`${item.vote_average.toFixed(1)}`}
+              </Text>
+            </View>
+          )}
+
+          {/* Gradient overlay for better text readability */}
+          <LinearGradient
+            colors={['transparent', 'rgba(0, 0, 0, 0.6)']}
+            style={{
+              position: 'absolute',
+              bottom: 0,
+              left: 0,
+              right: 0,
+              height: 40,
+            }}
+          />
+        </View>
+        
+        <View style={{ paddingHorizontal: 4, marginTop: 8 }}>
+          <Text style={{
+            color: '#fff',
+            fontSize: 13,
+            fontWeight: '700',
+            lineHeight: 16,
+            letterSpacing: 0.1,
+          }} numberOfLines={2}>
+            {`${item.title}`}
+          </Text>
+          
+          {item.character && (
+            <Text style={{
+              color: 'rgba(255, 255, 255, 0.65)',
+              fontSize: 11,
+              marginTop: 3,
+              fontWeight: '500',
+            }} numberOfLines={1}>
+              {`as ${item.character}`}
+            </Text>
+          )}
+          
+          <View style={{
+            flexDirection: 'row',
+            alignItems: 'center',
+            marginTop: 4,
+            justifyContent: 'space-between',
+          }}>
+            {item.release_date && (
+              <Text style={{
+                color: 'rgba(255, 255, 255, 0.5)',
+                fontSize: 10,
+                fontWeight: '600',
+                letterSpacing: 0.3,
+              }}>
+                {`${new Date(item.release_date).getFullYear()}`}
+              </Text>
+            )}
+            
+            {item.isUpcoming && (
+              <View style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+              }}>
+                <MaterialIcons name="schedule" size={10} color="rgba(255, 193, 7, 0.8)" />
+                <Text style={{
+                  color: 'rgba(255, 193, 7, 0.8)',
+                  fontSize: 9,
+                  fontWeight: '600',
+                  marginLeft: 2,
+                  letterSpacing: 0.2,
+                }}>
+                  Coming Soon
+                </Text>
+              </View>
+            )}
+          </View>
+        </View>
+      </TouchableOpacity>
+    </Animated.View>
+  ), [posterWidth, posterHeight, handleMoviePress]);
+
+  const movieCount = movies.filter(m => m.media_type === 'movie').length;
+  const tvCount = movies.filter(m => m.media_type === 'tv').length;
+  const upcomingCount = movies.filter(m => m.isUpcoming).length;
+
+  // Animated header style
+  const headerAnimatedStyle = useAnimatedStyle(() => {
+    const opacity = interpolate(
+      scrollY.value,
+      [0, 100],
+      [1, 0.9],
+      Extrapolate.CLAMP
+    );
+    
+    return {
+      opacity,
+    };
+  });
+
+  return (
+    <View style={{ flex: 1, backgroundColor: currentTheme.colors.darkBackground }}>
+      {/* Minimal Header */}
+      <Animated.View 
+        style={[
+          {
+            paddingTop: safeAreaTop + 16,
+            paddingHorizontal: 20,
+            paddingBottom: 20,
+            backgroundColor: currentTheme.colors.darkBackground,
+            borderBottomWidth: 1,
+            borderBottomColor: 'rgba(255, 255, 255, 0.05)',
+          },
+          headerAnimatedStyle
+        ]}
+      >
+        <Animated.View 
+          entering={SlideInDown.delay(100)}
+          style={{ flexDirection: 'row', alignItems: 'center' }}
+        >
+          <TouchableOpacity
+            style={{
+              width: 36,
+              height: 36,
+              borderRadius: 18,
+              backgroundColor: 'rgba(255, 255, 255, 0.1)',
+              justifyContent: 'center',
+              alignItems: 'center',
+              marginRight: 16,
+            }}
+            onPress={handleBack}
+            activeOpacity={0.8}
+          >
+            <MaterialIcons name="arrow-back" size={20} color="rgba(255, 255, 255, 0.9)" />
+          </TouchableOpacity>
+          
+          <View style={{
+            width: 44,
+            height: 44,
+            borderRadius: 22,
+            overflow: 'hidden',
+            marginRight: 16,
+            backgroundColor: 'rgba(255, 255, 255, 0.08)',
+          }}>
+            {castMember?.profile_path ? (
+              <Image
+                source={{
+                  uri: `https://image.tmdb.org/t/p/w185${castMember.profile_path}`,
+                }}
+                style={{ width: '100%', height: '100%' }}
+                contentFit="cover"
+              />
+            ) : (
+              <View style={{
+                width: '100%',
+                height: '100%',
+                alignItems: 'center',
+                justifyContent: 'center',
+              }}>
+                <Text style={{
+                  color: 'rgba(255, 255, 255, 0.7)',
+                  fontSize: 14,
+                  fontWeight: '700',
+                }}>
+                  {castMember?.name ? castMember.name.split(' ').reduce((prev: string, current: string) => prev + current[0], '').substring(0, 2) : 'NA'}
+                </Text>
+              </View>
+            )}
+          </View>
+          
+          <View style={{ flex: 1 }}>
+            <Text style={{
+              color: '#fff',
+              fontSize: 18,
+              fontWeight: '800',
+              letterSpacing: 0.3,
+              marginBottom: 2,
+            }} numberOfLines={1}>
+              {`${castMember?.name}`}
+            </Text>
+            <Text style={{
+              color: 'rgba(255, 255, 255, 0.6)',
+              fontSize: 13,
+              fontWeight: '500',
+              letterSpacing: 0.2,
+            }}>
+              {`Filmography • ${movies.length} titles`}
+            </Text>
+          </View>
+        </Animated.View>
+      </Animated.View>
+
+      {/* Filters and Sort */}
+      <View style={{
+        paddingHorizontal: 20,
+        paddingVertical: 12,
+        backgroundColor: currentTheme.colors.darkBackground,
+      }}>
+        {/* Filter Section */}
+        <View style={{ marginBottom: 12 }}>
+          <Text style={{
+            color: 'rgba(255, 255, 255, 0.7)',
+            fontSize: 12,
+            fontWeight: '600',
+            marginBottom: 8,
+            letterSpacing: 0.5,
+            textTransform: 'uppercase',
+          }}>
+            Filter
+          </Text>
+          <ScrollView 
+            horizontal 
+            showsHorizontalScrollIndicator={false}
+            contentContainerStyle={{ paddingRight: 20 }}
+          >
+            {renderFilterButton('all', 'All', movies.length)}
+            {renderFilterButton('movies', 'Movies', movieCount)}
+            {renderFilterButton('tv', 'TV Shows', tvCount)}
+          </ScrollView>
+        </View>
+
+        {/* Sort Section */}
+        <View>
+          <Text style={{
+            color: 'rgba(255, 255, 255, 0.7)',
+            fontSize: 12,
+            fontWeight: '600',
+            marginBottom: 8,
+            letterSpacing: 0.5,
+            textTransform: 'uppercase',
+          }}>
+            Sort By
+          </Text>
+          <ScrollView 
+            horizontal 
+            showsHorizontalScrollIndicator={false}
+            contentContainerStyle={{ paddingRight: 20 }}
+          >
+            {renderSortButton('popularity', 'Popular', 'trending-up')}
+            {renderSortButton('latest', 'Latest', 'schedule')}
+            {renderSortButton('upcoming', 'Upcoming', 'event')}
+          </ScrollView>
+        </View>
+      </View>
+
+      {/* Content */}
+      {loading ? (
+        <View style={{
+          flex: 1,
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}>
+          <ActivityIndicator size="large" color={currentTheme.colors.primary} />
+          <Text style={{
+            color: 'rgba(255, 255, 255, 0.7)',
+            fontSize: 14,
+            marginTop: 12,
+            fontWeight: '500',
+          }}>
+            Loading filmography...
+          </Text>
+        </View>
+      ) : (
+        <FlashList
+          data={displayedMovies}
+          renderItem={renderMovieItem}
+          keyExtractor={(item) => `${item.media_type}-${item.id}`}
+          numColumns={numColumns}
+
+          contentContainerStyle={{
+            paddingHorizontal: 20,
+            paddingTop: 8,
+            paddingBottom: Platform.OS === 'ios' ? 120 : 100,
+          }}
+          onScroll={(event) => {
+            scrollY.value = event.nativeEvent.contentOffset.y;
+          }}
+          scrollEventThrottle={32}
+          showsVerticalScrollIndicator={false}
+          onEndReached={handleLoadMore}
+          onEndReachedThreshold={0.8}
+          ListFooterComponent={
+            displayLimit < filteredAndSortedMovies.length ? (
+              <View style={{
+                paddingVertical: 20,
+                alignItems: 'center',
+              }}>
+                {isLoadingMore ? (
+                  <ActivityIndicator size="small" color={currentTheme.colors.primary} />
+                ) : (
+                  <TouchableOpacity
+                    style={{
+                      paddingHorizontal: 20,
+                      paddingVertical: 10,
+                      backgroundColor: 'rgba(255, 255, 255, 0.1)',
+                      borderRadius: 20,
+                      borderWidth: 1,
+                      borderColor: 'rgba(255, 255, 255, 0.2)',
+                    }}
+                    onPress={handleLoadMore}
+                    activeOpacity={0.7}
+                  >
+                    <Text style={{
+                      color: 'rgba(255, 255, 255, 0.8)',
+                      fontSize: 14,
+                      fontWeight: '600',
+                    }}>
+                      {`Load More (${filteredAndSortedMovies.length - displayLimit} remaining)`}
+                    </Text>
+                  </TouchableOpacity>
+                )}
+              </View>
+            ) : null
+          }
+          ListEmptyComponent={
+            <Animated.View 
+              entering={FadeIn.delay(400)}
+              style={{
+                alignItems: 'center',
+                justifyContent: 'center',
+                paddingVertical: 80,
+                paddingHorizontal: 40,
+              }}
+            >
+              <View style={{
+                width: 80,
+                height: 80,
+                borderRadius: 40,
+                backgroundColor: 'rgba(255, 255, 255, 0.05)',
+                alignItems: 'center',
+                justifyContent: 'center',
+                marginBottom: 20,
+              }}>
+                <MaterialIcons name="movie" size={40} color="rgba(255, 255, 255, 0.3)" />
+              </View>
+              <Text style={{
+                color: 'rgba(255, 255, 255, 0.8)',
+                fontSize: 18,
+                fontWeight: '700',
+                marginBottom: 8,
+                textAlign: 'center',
+              }}>
+                No Content Found
+              </Text>
+              <Text style={{
+                color: 'rgba(255, 255, 255, 0.5)',
+                fontSize: 14,
+                textAlign: 'center',
+                lineHeight: 20,
+                fontWeight: '500',
+              }}>
+                {sortBy === 'upcoming' 
+                  ? 'No upcoming releases available for this actor'
+                  : selectedFilter === 'all' 
+                    ? 'No content available for this actor'
+                    : selectedFilter === 'movies'
+                      ? 'No movies available for this actor'
+                      : 'No TV shows available for this actor'
+                }
+              </Text>
+            </Animated.View>
+          }
+        />
+      )}
+    </View>
+  );
+};
+
+export default CastMoviesScreen;

src/services/tmdbService.ts

@@ -475,6 +475,57 @@ export class TMDBService {
     }
   }
 
+  /**
+   * Get person's movie credits (cast and crew)
+   */
+  async getPersonMovieCredits(personId: number) {
+    try {
+      const response = await axios.get(`${BASE_URL}/person/${personId}/movie_credits`, {
+        headers: await this.getHeaders(),
+        params: await this.getParams({
+          language: 'en-US',
+        }),
+      });
+      return response.data;
+    } catch (error) {
+      return null;
+    }
+  }
+
+  /**
+   * Get person's TV credits (cast and crew)
+   */
+  async getPersonTvCredits(personId: number) {
+    try {
+      const response = await axios.get(`${BASE_URL}/person/${personId}/tv_credits`, {
+        headers: await this.getHeaders(),
+        params: await this.getParams({
+          language: 'en-US',
+        }),
+      });
+      return response.data;
+    } catch (error) {
+      return null;
+    }
+  }
+
+  /**
+   * Get person's combined credits (movies and TV)
+   */
+  async getPersonCombinedCredits(personId: number) {
+    try {
+      const response = await axios.get(`${BASE_URL}/person/${personId}/combined_credits`, {
+        headers: await this.getHeaders(),
+        params: await this.getParams({
+          language: 'en-US',
+        }),
+      });
+      return response.data;
+    } catch (error) {
+      return null;
+    }
+  }
+
   /**
    * Get external IDs for a TV show (including IMDb ID)
    */