import React, { useRef, useState } from 'react';
import {
  View,
  Text,
  ScrollView,
  Image,
  Pressable,
  StyleSheet,
  Dimensions,
  StatusBar,
  FlatList,
  Share,
} from 'react-native';
import { SafeAreaView, useSafeAreaInsets } from 'react-native-safe-area-context';
import { Feather, Ionicons } from '@expo/vector-icons';
import Animated, {
  FadeInDown,
  FadeIn,
  useSharedValue,
  useAnimatedStyle,
  withSpring,
} from 'react-native-reanimated';
import * as Haptics from 'expo-haptics';

const { width: SCREEN_WIDTH } = Dimensions.get('window');
const HERO_HEIGHT = 420;

interface CastMember {
  id: string;
  name: string;
  role: string;
  photo: string;
}

interface Review {
  id: string;
  author: string;
  avatar: string;
  rating: number;
  date: string;
  body: string;
  likes: number;
}

const CAST: CastMember[] = [
  {
    id: '1',
    name: 'Cillian Murphy',
    role: 'J. Robert Oppenheimer',
    photo: 'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=200&q=80',
  },
  {
    id: '2',
    name: 'Emily Blunt',
    role: 'Katherine Oppenheimer',
    photo: 'https://images.unsplash.com/photo-1544005313-94ddf0286df2?w=200&q=80',
  },
  {
    id: '3',
    name: 'Matt Damon',
    role: 'Leslie Groves',
    photo: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=200&q=80',
  },
  {
    id: '4',
    name: 'Robert Downey Jr.',
    role: 'Lewis Strauss',
    photo: 'https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?w=200&q=80',
  },
  {
    id: '5',
    name: 'Florence Pugh',
    role: 'Jean Tatlock',
    photo: 'https://images.unsplash.com/photo-1531746020798-e6953c6e8e04?w=200&q=80',
  },
];

const REVIEWS: Review[] = [
  {
    id: '1',
    author: 'Priya Sharma',
    avatar: 'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=100&q=80',
    rating: 5,
    date: 'Mar 12',
    body: 'A thunderous, haunting masterpiece. Nolan at the absolute peak of his craft — the Trinity test sequence alone is worth the price of admission. Cillian Murphy carries the film with quiet devastation.',
    likes: 2847,
  },
  {
    id: '2',
    author: 'Marcus Rivera',
    avatar: 'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=100&q=80',
    rating: 4,
    date: 'Feb 28',
    body: 'Dense, layered, and intellectually rigorous. The non-linear structure keeps you on edge throughout. Downey Jr. delivers a career-best performance in the third act. Docks one star for pacing in the middle section.',
    likes: 1203,
  },
  {
    id: '3',
    author: 'Sarah Chen',
    avatar: 'https://images.unsplash.com/photo-1544005313-94ddf0286df2?w=100&q=80',
    rating: 5,
    date: 'Feb 14',
    body: "Watched it twice in IMAX. Ludwig Göransson's score is absolutely relentless — it puts you on the edge of your seat from the first frame to the last. Exceptional sound design.",
    likes: 974,
  },
  {
    id: '4',
    author: 'Aisha Johnson',
    avatar: 'https://images.unsplash.com/photo-1487412720507-e7ab37603c6f?w=100&q=80',
    rating: 4,
    date: 'Jan 30',
    body: 'Intellectually overwhelming in the best possible way. Nolan trusts the audience to keep up, which is rare. The black-and-white courtroom sequences are tense and brilliantly edited.',
    likes: 612,
  },
];

function StarRow({ rating }: { rating: number }) {
  return (
    <View style={styles.starRow}>
      {[1, 2, 3, 4, 5].map((i) => (
        <Ionicons
          key={i}
          name={i <= rating ? 'star' : 'star-outline'}
          size={12}
          color={i <= rating ? '#f59e0b' : '#a1a1aa'}
          style={{ marginRight: 1 }}
        />
      ))}
    </View>
  );
}

function CastCard({ member, index }: { member: CastMember; index: number }) {
  return (
    <Animated.View entering={FadeInDown.delay(index * 60).springify()} style={styles.castCard}>
      <Image source={{ uri: member.photo }} style={styles.castPhoto} />
      <Text style={styles.castName} numberOfLines={1}>{member.name}</Text>
      <Text style={styles.castRole} numberOfLines={1}>{member.role}</Text>
    </Animated.View>
  );
}

function ReviewRow({ review, index }: { review: Review; index: number }) {
  const [liked, setLiked] = useState(false);
  const scale = useSharedValue(1);
  const animStyle = useAnimatedStyle(() => ({ transform: [{ scale: scale.value }] }));

  const handleLike = () => {
    Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
    scale.value = withSpring(0.88, {}, () => {
      scale.value = withSpring(1);
    });
    setLiked((v) => !v);
  };

  return (
    <Animated.View entering={FadeInDown.delay(index * 80).springify()} style={styles.reviewRow}>
      <View style={styles.reviewHeader}>
        <Image source={{ uri: review.avatar }} style={styles.reviewAvatar} />
        <View style={styles.reviewMeta}>
          <Text style={styles.reviewAuthor}>{review.author}</Text>
          <View style={styles.reviewSubRow}>
            <StarRow rating={review.rating} />
            <Text style={styles.reviewDate}>{review.date}</Text>
          </View>
        </View>
        <Pressable onPress={handleLike} hitSlop={12}>
          <Animated.View style={[styles.likeBtn, animStyle]}>
            <Ionicons
              name={liked ? 'heart' : 'heart-outline'}
              size={15}
              color={liked ? '#ef4444' : '#a1a1aa'}
            />
            <Text style={[styles.likeCount, liked && styles.likeCountActive]}>
              {liked ? review.likes + 1 : review.likes}
            </Text>
          </Animated.View>
        </Pressable>
      </View>
      <Text style={styles.reviewBody}>{review.body}</Text>
      <View style={styles.separator} />
    </Animated.View>
  );
}

export default function MovieDetailScreen() {
  const insets = useSafeAreaInsets();
  const [saved, setSaved] = useState(false);
  const savedScale = useSharedValue(1);
  const savedAnimStyle = useAnimatedStyle(() => ({ transform: [{ scale: savedScale.value }] }));

  const handleSave = () => {
    Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium);
    savedScale.value = withSpring(0.85, {}, () => {
      savedScale.value = withSpring(1);
    });
    setSaved((v) => !v);
  };

  const handleShare = async () => {
    Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
    try {
      await Share.share({
        title: 'Oppenheimer (2023)',
        message:
          'Check out Oppenheimer (2023) — directed by Christopher Nolan. Rated 8.9 on IMDb. 🎬\n\nhttps://www.imdb.com/title/tt15398776',
        url: 'https://www.imdb.com/title/tt15398776',
      });
    } catch {
      // user dismissed or error — do nothing
    }
  };

  const handleWatch = () => {
    Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success);
  };

  return (
    <View style={styles.root}>
      <StatusBar barStyle="light-content" />

      {/* Floating back/action bar */}
      <View style={[styles.floatingBar, { top: insets.top + 8 }]}>
        <Pressable style={styles.floatingBtn} hitSlop={8}>
          <Feather name="chevron-left" size={22} color="#fff" />
        </Pressable>
        <View style={styles.floatingRight}>
          <Pressable style={styles.floatingBtn} onPress={handleShare} hitSlop={8}>
            <Feather name="share" size={19} color="#fff" />
          </Pressable>
          <Pressable style={[styles.floatingBtn, { marginLeft: 8 }]} onPress={handleSave} hitSlop={8}>
            <Animated.View style={savedAnimStyle}>
              <Ionicons
                name={saved ? 'bookmark' : 'bookmark-outline'}
                size={19}
                color={saved ? '#f59e0b' : '#fff'}
              />
            </Animated.View>
          </Pressable>
        </View>
      </View>

      <ScrollView
        style={styles.scroll}
        showsVerticalScrollIndicator={false}
        bounces
        contentContainerStyle={{ paddingBottom: insets.bottom + 32 }}
      >
        {/* Hero */}
        <View style={styles.heroContainer}>
          <Image
            source={{ uri: 'https://images.unsplash.com/photo-1536440136628-849c177e76a1?w=800&q=80' }}
            style={styles.heroImage}
          />
          <View style={styles.heroGradient} />
          <View style={styles.heroContent}>
            <Animated.View entering={FadeIn.delay(100)}>
              <View style={styles.genreRow}>
                {['Drama', 'History', 'Thriller'].map((g) => (
                  <View key={g} style={styles.genrePill}>
                    <Text style={styles.genrePillText}>{g}</Text>
                  </View>
                ))}
              </View>
              <Text style={styles.heroTitle}>Oppenheimer</Text>
              <View style={styles.heroMeta}>
                <Text style={styles.heroMetaText}>2023</Text>
                <View style={styles.heroDot} />
                <Text style={styles.heroMetaText}>3h 1m</Text>
                <View style={styles.heroDot} />
                <Text style={styles.heroMetaText}>R</Text>
                <View style={styles.heroDot} />
                <Ionicons name="star" size={13} color="#f59e0b" />
                <Text style={[styles.heroMetaText, { marginLeft: 3 }]}>8.9</Text>
              </View>
            </Animated.View>
          </View>
        </View>

        {/* Director row */}
        <Animated.View entering={FadeInDown.delay(80).springify()} style={styles.directorRow}>
          <View style={styles.directorLeft}>
            <Text style={styles.directorLabel}>Directed by</Text>
            <Text style={styles.directorName}>Christopher Nolan</Text>
          </View>
          <View style={styles.ratingBadge}>
            <Text style={styles.ratingBadgeNum}>8.9</Text>
            <Text style={styles.ratingBadgeLabel}>IMDb</Text>
          </View>
        </Animated.View>

        {/* CTA Buttons */}
        <Animated.View entering={FadeInDown.delay(120).springify()} style={styles.ctaRow}>
          <Pressable style={styles.watchBtn} onPress={handleWatch}>
            <Ionicons name="play" size={16} color="#fff" style={{ marginRight: 6 }} />
            <Text style={styles.watchBtnText}>Watch Now</Text>
          </Pressable>
          <Pressable style={styles.trailerBtn}>
            <Feather name="youtube" size={16} color="#18181b" style={{ marginRight: 6 }} />
            <Text style={styles.trailerBtnText}>Trailer</Text>
          </Pressable>
        </Animated.View>

        {/* Synopsis */}
        <Animated.View entering={FadeInDown.delay(160).springify()} style={styles.section}>
          <Text style={styles.sectionTitle}>Synopsis</Text>
          <Text style={styles.synopsis}>
            The story of J. Robert Oppenheimer's role in the development of the atomic bomb during
            World War II. Oppenheimer is forced to wrestle with the consequences of his work and
            the weight of scientific discovery in a world on the brink of destruction.
          </Text>
        </Animated.View>

        {/* Cast */}
        <Animated.View entering={FadeInDown.delay(200).springify()}>
          <View style={styles.sectionHeader}>
            <Text style={styles.sectionTitle}>Cast</Text>
            <Pressable>
              <Text style={styles.seeAll}>See all</Text>
            </Pressable>
          </View>
          <FlatList
            data={CAST}
            keyExtractor={(item) => item.id}
            horizontal
            showsHorizontalScrollIndicator={false}
            contentContainerStyle={styles.castList}
            renderItem={({ item, index }) => <CastCard member={item} index={index} />}
          />
        </Animated.View>

        {/* Stats strip */}
        <Animated.View entering={FadeInDown.delay(240).springify()} style={styles.statsStrip}>
          <View style={styles.statItem}>
            <Text style={styles.statNum}>$952M</Text>
            <Text style={styles.statLabel}>Box Office</Text>
          </View>
          <View style={styles.statDivider} />
          <View style={styles.statItem}>
            <Text style={styles.statNum}>13</Text>
            <Text style={styles.statLabel}>Nominations</Text>
          </View>
          <View style={styles.statDivider} />
          <View style={styles.statItem}>
            <Text style={styles.statNum}>7</Text>
            <Text style={styles.statLabel}>Oscars Won</Text>
          </View>
          <View style={styles.statDivider} />
          <View style={styles.statItem}>
            <Text style={styles.statNum}>87%</Text>
            <Text style={styles.statLabel}>Audience Score</Text>
          </View>
        </Animated.View>

        {/* Reviews */}
        <View style={styles.sectionHeader}>
          <Text style={styles.sectionTitle}>Reviews</Text>
          <Pressable>
            <Text style={styles.seeAll}>Write a review</Text>
          </Pressable>
        </View>
        <View style={styles.reviewsContainer}>
          {REVIEWS.map((r, i) => (
            <ReviewRow key={r.id} review={r} index={i} />
          ))}
        </View>
      </ScrollView>
    </View>
  );
}

const styles = StyleSheet.create({
  root: {
    flex: 1,
    backgroundColor: '#fff',
  },
  scroll: {
    flex: 1,
  },
  floatingBar: {
    position: 'absolute',
    left: 16,
    right: 16,
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    zIndex: 100,
  },
  floatingRight: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  floatingBtn: {
    width: 36,
    height: 36,
    borderRadius: 18,
    backgroundColor: 'rgba(0,0,0,0.42)',
    alignItems: 'center',
    justifyContent: 'center',
  },
  heroContainer: {
    width: SCREEN_WIDTH,
    height: HERO_HEIGHT,
  },
  heroImage: {
    width: '100%',
    height: '100%',
  },
  heroGradient: {
    ...StyleSheet.absoluteFillObject,
    backgroundColor: 'rgba(0,0,0,0.45)',
  },
  heroContent: {
    position: 'absolute',
    bottom: 24,
    left: 16,
    right: 16,
  },
  genreRow: {
    flexDirection: 'row',
    marginBottom: 8,
  },
  genrePill: {
    paddingHorizontal: 10,
    paddingVertical: 3,
    borderRadius: 20,
    backgroundColor: 'rgba(255,255,255,0.18)',
    marginRight: 6,
    borderWidth: 1,
    borderColor: 'rgba(255,255,255,0.28)',
  },
  genrePillText: {
    color: '#fff',
    fontSize: 11,
    fontWeight: '500',
    letterSpacing: 0.2,
  },
  heroTitle: {
    color: '#fff',
    fontSize: 32,
    fontWeight: '800',
    letterSpacing: -0.5,
    lineHeight: 38,
    marginBottom: 8,
  },
  heroMeta: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  heroMetaText: {
    color: 'rgba(255,255,255,0.8)',
    fontSize: 13,
    fontWeight: '500',
  },
  heroDot: {
    width: 3,
    height: 3,
    borderRadius: 2,
    backgroundColor: 'rgba(255,255,255,0.5)',
    marginHorizontal: 7,
  },
  directorRow: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingHorizontal: 16,
    paddingTop: 20,
    paddingBottom: 4,
  },
  directorLeft: {},
  directorLabel: {
    color: '#a1a1aa',
    fontSize: 11,
    fontWeight: '500',
    textTransform: 'uppercase',
    letterSpacing: 0.6,
    marginBottom: 2,
  },
  directorName: {
    color: '#18181b',
    fontSize: 16,
    fontWeight: '700',
  },
  ratingBadge: {
    alignItems: 'center',
    backgroundColor: '#f59e0b',
    borderRadius: 10,
    paddingHorizontal: 12,
    paddingVertical: 6,
  },
  ratingBadgeNum: {
    color: '#fff',
    fontSize: 16,
    fontWeight: '800',
    lineHeight: 19,
  },
  ratingBadgeLabel: {
    color: 'rgba(255,255,255,0.85)',
    fontSize: 10,
    fontWeight: '600',
    letterSpacing: 0.3,
  },
  ctaRow: {
    flexDirection: 'row',
    paddingHorizontal: 16,
    paddingTop: 16,
    paddingBottom: 4,
    gap: 10,
  },
  watchBtn: {
    flex: 1,
    flexDirection: 'row',
    backgroundColor: '#18181b',
    borderRadius: 12,
    height: 48,
    alignItems: 'center',
    justifyContent: 'center',
  },
  watchBtnText: {
    color: '#fff',
    fontSize: 15,
    fontWeight: '600',
  },
  trailerBtn: {
    flex: 1,
    flexDirection: 'row',
    backgroundColor: '#f4f4f5',
    borderRadius: 12,
    height: 48,
    alignItems: 'center',
    justifyContent: 'center',
  },
  trailerBtnText: {
    color: '#18181b',
    fontSize: 15,
    fontWeight: '600',
  },
  section: {
    paddingHorizontal: 16,
    paddingTop: 24,
  },
  sectionHeader: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingHorizontal: 16,
    paddingTop: 24,
    paddingBottom: 0,
  },
  sectionTitle: {
    fontSize: 18,
    fontWeight: '700',
    color: '#18181b',
    letterSpacing: -0.2,
  },
  seeAll: {
    fontSize: 13,
    fontWeight: '500',
    color: '#6366f1',
  },
  synopsis: {
    marginTop: 8,
    fontSize: 14,
    fontWeight: '400',
    color: '#3f3f46',
    lineHeight: 22,
  },
  castList: {
    paddingLeft: 16,
    paddingRight: 8,
    paddingTop: 12,
    paddingBottom: 4,
  },
  castCard: {
    width: 88,
    marginRight: 12,
    alignItems: 'center',
  },
  castPhoto: {
    width: 72,
    height: 72,
    borderRadius: 36,
    backgroundColor: '#e4e4e7',
    marginBottom: 6,
  },
  castName: {
    fontSize: 12,
    fontWeight: '600',
    color: '#18181b',
    textAlign: 'center',
  },
  castRole: {
    fontSize: 11,
    fontWeight: '400',
    color: '#71717a',
    textAlign: 'center',
    marginTop: 1,
  },
  statsStrip: {
    flexDirection: 'row',
    marginHorizontal: 16,
    marginTop: 24,
    backgroundColor: '#f4f4f5',
    borderRadius: 16,
    paddingVertical: 16,
  },
  statItem: {
    flex: 1,
    alignItems: 'center',
  },
  statNum: {
    fontSize: 18,
    fontWeight: '800',
    color: '#18181b',
    letterSpacing: -0.3,
  },
  statLabel: {
    fontSize: 11,
    fontWeight: '500',
    color: '#71717a',
    marginTop: 2,
  },
  statDivider: {
    width: 1,
    height: 32,
    backgroundColor: '#e4e4e7',
    alignSelf: 'center',
  },
  reviewsContainer: {
    paddingHorizontal: 16,
    paddingTop: 12,
  },
  reviewRow: {
    paddingVertical: 4,
  },
  reviewHeader: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 8,
  },
  reviewAvatar: {
    width: 38,
    height: 38,
    borderRadius: 19,
    backgroundColor: '#e4e4e7',
    marginRight: 10,
  },
  reviewMeta: {
    flex: 1,
  },
  reviewAuthor: {
    fontSize: 14,
    fontWeight: '600',
    color: '#18181b',
    marginBottom: 2,
  },
  reviewSubRow: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 8,
  },
  starRow: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  reviewDate: {
    fontSize: 11,
    fontWeight: '400',
    color: '#a1a1aa',
  },
  likeBtn: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 4,
  },
  likeCount: {
    fontSize: 13,
    fontWeight: '500',
    color: '#a1a1aa',
  },
  likeCountActive: {
    color: '#ef4444',
  },
  reviewBody: {
    fontSize: 14,
    fontWeight: '400',
    color: '#3f3f46',
    lineHeight: 21,
    paddingBottom: 16,
  },
  separator: {
    height: 1,
    backgroundColor: '#f4f4f5',
    marginBottom: 16,
  },
});
Movie Detail Screen
