import React, { useState, useRef, useCallback } from 'react';
import {
  View,
  Text,
  StyleSheet,
  Dimensions,
  Image,
  TouchableOpacity,
  PanResponder,
  Animated,
} from 'react-native';
import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';
import { Feather, Ionicons } from '@expo/vector-icons';
import { LinearGradient } from 'expo-linear-gradient';
import * as Haptics from 'expo-haptics';

const { width: SW, height: SH } = Dimensions.get('window');
const CARD_W = SW - 32;
const CARD_H = SH * 0.62;
const THRESHOLD = SW * 0.25;

interface Profile {
  id: string;
  name: string;
  age: number;
  distance: string;
  bio: string;
  tags: string[];
  image: string;
  verified: boolean;
}

const PROFILES: Profile[] = [
  {
    id: '1',
    name: 'Ava',
    age: 26,
    distance: '2 km away',
    bio: 'Coffee addict ☕ | Weekend hiker 🏔️ | Making the world a little brighter',
    tags: ['Hiking', 'Coffee', 'Art'],
    image: 'https://images.unsplash.com/photo-1529626455594-4ff0802cfb7e?w=400&q=80',
    verified: true,
  },
  {
    id: '2',
    name: 'Sofia',
    age: 24,
    distance: '5 km away',
    bio: 'Yoga instructor & plant mom 🌿 | Always down for a spontaneous adventure',
    tags: ['Yoga', 'Travel', 'Cooking'],
    image: 'https://images.unsplash.com/photo-1524504388940-b1c1722653e1?w=400&q=80',
    verified: false,
  },
  {
    id: '3',
    name: 'Luna',
    age: 28,
    distance: '3 km away',
    bio: 'Architect by day, jazz lover by night 🎷 | Dog mom to Mochi',
    tags: ['Music', 'Design', 'Dogs'],
    image: 'https://images.unsplash.com/photo-1531746020798-e6953c6e8e04?w=400&q=80',
    verified: true,
  },
  {
    id: '4',
    name: 'Maya',
    age: 25,
    distance: '8 km away',
    bio: 'Bookworm 📚 | Aspiring chef | Will fight you over pineapple on pizza 🍕',
    tags: ['Books', 'Food', 'Comedy'],
    image: 'https://images.unsplash.com/photo-1488426862026-3ee34a7d66df?w=400&q=80',
    verified: false,
  },
  {
    id: '5',
    name: 'Zoe',
    age: 27,
    distance: '1 km away',
    bio: 'Marine biologist 🐠 | Surfer girl | Ocean is my second home 🌊',
    tags: ['Surfing', 'Nature', 'Science'],
    image: 'https://images.unsplash.com/photo-1502823403499-6ccfcf4fb453?w=400&q=80',
    verified: true,
  },
];

const MY_AVATAR =
  'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=200&q=80';

// ─── CardInfo ─────────────────────────────────────────────────────────────────
interface CardInfoProps {
  profile: Profile;
  slim?: boolean;
}
const CardInfo: React.FC<CardInfoProps> = ({ profile, slim }) => (
  <View style={s.cardInfo}>
    <View style={s.nameRow}>
      <Text style={s.name}>
        {profile.name}, {profile.age}
      </Text>
      {profile.verified && (
        <Ionicons
          name="checkmark-circle"
          size={20}
          color="#6366f1"
          style={{ marginLeft: 6 }}
        />
      )}
    </View>
    <View style={s.distRow}>
      <Feather name="map-pin" size={12} color="#a1a1aa" />
      <Text style={s.dist}>{profile.distance}</Text>
    </View>
    {!slim && (
      <>
        <Text style={s.bio} numberOfLines={2}>
          {profile.bio}
        </Text>
        <View style={s.tags}>
          {profile.tags.map((t) => (
            <View key={t} style={s.tag}>
              <Text style={s.tagTxt}>{t}</Text>
            </View>
          ))}
        </View>
      </>
    )}
  </View>
);

// ─── Single swipeable card — owns its own pan & animation ─────────────────────
interface SwipeCardProps {
  profile: Profile;
  stackIndex: number; // 0 = top, 1 = second, 2 = third
  onSwiped: (id: string, dir: 'left' | 'right' | 'up') => void;
  registerFlyOut: (fn: (dir: 'left' | 'right' | 'up') => void) => void;
}

const SwipeCard: React.FC<SwipeCardProps> = ({
  profile,
  stackIndex,
  onSwiped,
  registerFlyOut,
}) => {
  const pan = useRef(new Animated.ValueXY()).current;
  const swiping = useRef(false);

  const rotate = pan.x.interpolate({
    inputRange: [-SW / 2, 0, SW / 2],
    outputRange: ['-12deg', '0deg', '12deg'],
    extrapolate: 'clamp',
  });
  const likeOp = pan.x.interpolate({
    inputRange: [10, THRESHOLD],
    outputRange: [0, 1],
    extrapolate: 'clamp',
  });
  const nopeOp = pan.x.interpolate({
    inputRange: [-THRESHOLD, -10],
    outputRange: [1, 0],
    extrapolate: 'clamp',
  });
  const superOp = pan.y.interpolate({
    inputRange: [-THRESHOLD, -10],
    outputRange: [1, 0],
    extrapolate: 'clamp',
  });

  const flyOut = useCallback(
    (dir: 'left' | 'right' | 'up') => {
      if (swiping.current) return;
      swiping.current = true;

      if (dir === 'right' || dir === 'up') {
        Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success);
      } else {
        Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
      }

      const toX =
        dir === 'right' ? SW * 1.5 : dir === 'left' ? -SW * 1.5 : 0;
      const toY = dir === 'up' ? -SH : 80;

      Animated.parallel([
        Animated.timing(pan.x, {
          toValue: toX,
          duration: 280,
          useNativeDriver: true,
        }),
        Animated.timing(pan.y, {
          toValue: toY,
          duration: 280,
          useNativeDriver: true,
        }),
      ]).start(() => onSwiped(profile.id, dir));
    },
    [pan, profile.id, onSwiped]
  );

  // Register flyOut with parent every render so it's always fresh
  registerFlyOut(flyOut);

  const panResponder = useRef(
    PanResponder.create({
      onStartShouldSetPanResponder: () => !swiping.current,
      onMoveShouldSetPanResponder: () => !swiping.current,
      onPanResponderMove: (_, g) => {
        if (!swiping.current) pan.setValue({ x: g.dx, y: g.dy });
      },
      onPanResponderRelease: (_, g) => {
        if (swiping.current) return;
        if (g.dx > THRESHOLD) flyOut('right');
        else if (g.dx < -THRESHOLD) flyOut('left');
        else if (g.dy < -THRESHOLD) flyOut('up');
        else {
          Animated.parallel([
            Animated.spring(pan.x, {
              toValue: 0,
              useNativeDriver: true,
              friction: 7,
              tension: 60,
            }),
            Animated.spring(pan.y, {
              toValue: 0,
              useNativeDriver: true,
              friction: 7,
              tension: 60,
            }),
          ]).start();
        }
      },
    })
  ).current;

  const isTop = stackIndex === 0;

  // All cards are ALWAYS rendered at full CARD_W × CARD_H.
  // Position in the stack is handled purely via transform (translateY + scale).
  // This eliminates the layout-size flash entirely.
  const bgScale = stackIndex === 1 ? 0.93 : 0.86;
  const bgTranslateY = stackIndex === 1 ? 14 : 28;
  const bgOpacity = stackIndex === 1 ? 0.72 : 0.42;

  if (!isTop) {
    return (
      <View
        style={[
          s.card,
          {
            zIndex: 10 - stackIndex,
            opacity: bgOpacity,
            transform: [{ scale: bgScale }, { translateY: bgTranslateY }],
          },
        ]}
      >
        <Image source={{ uri: profile.image }} style={s.cardImg} />
        <LinearGradient
          colors={['transparent', 'rgba(0,0,0,0.88)']}
          style={s.grad}
        />
        {stackIndex === 1 && <CardInfo profile={profile} slim />}
      </View>
    );
  }

  return (
    <Animated.View
      style={[
        s.card,
        {
          zIndex: 20,
          transform: [
            { translateX: pan.x },
            { translateY: pan.y },
            { rotate },
          ],
        },
      ]}
      {...panResponder.panHandlers}
    >
      <Image source={{ uri: profile.image }} style={s.cardImg} />
      <LinearGradient
        colors={['transparent', 'rgba(0,0,0,0.93)']}
        style={s.grad}
      />

      <Animated.View style={[s.stamp, s.likeStamp, { opacity: likeOp }]}>
        <Text style={s.stampLike}>SPARK ⚡</Text>
      </Animated.View>
      <Animated.View style={[s.stamp, s.nopeStamp, { opacity: nopeOp }]}>
        <Text style={s.stampNope}>NOPE</Text>
      </Animated.View>
      <Animated.View style={[s.stamp, s.superStamp, { opacity: superOp }]}>
        <Text style={s.stampSuper}>SUPER ⚡</Text>
      </Animated.View>

      <CardInfo profile={profile} />
    </Animated.View>
  );
};

// ─── Main Screen ──────────────────────────────────────────────────────────────
export default function SparkApp() {
  const [deck, setDeck] = useState<Profile[]>(PROFILES);
  const [history, setHistory] = useState<Profile[]>([]);
  const [matchProfile, setMatchProfile] = useState<Profile | null>(null);

  // Always holds the latest flyOut of the current top card
  const topFlyOut = useRef<((dir: 'left' | 'right' | 'up') => void) | null>(
    null
  );

  const handleSwiped = useCallback((id: string, dir: 'left' | 'right' | 'up') => {
    topFlyOut.current = null;
    setDeck((prev) => {
      const swiped = prev.find((p) => p.id === id);
      if (swiped) {
        setHistory((h) => [swiped, ...h]);
        if (dir === 'right' && Math.random() > 0.45) {
          setTimeout(() => setMatchProfile(swiped), 50);
        }
      }
      return prev.filter((p) => p.id !== id);
    });
  }, []);

  const triggerSwipe = (dir: 'left' | 'right' | 'up') => {
    topFlyOut.current?.(dir);
  };

  // Only render the top 3 cards; bottom-first so top card paints last (highest z)
  const visible = deck.slice(0, 3);

  return (
    <SafeAreaProvider>
      <SafeAreaView style={s.container}>

        {/* ── Header ── */}
        <View style={s.header}>
          <TouchableOpacity style={s.avatarWrap} activeOpacity={0.85}>
            <Image source={{ uri: MY_AVATAR }} style={s.avatar} />
            <View style={s.onlineDot} />
          </TouchableOpacity>
          <View style={s.logoRow}>
            <Text style={s.logoEmoji}>⚡</Text>
            <Text style={s.logoText}>Spark</Text>
          </View>
          <TouchableOpacity style={s.msgBtn} activeOpacity={0.8}>
            <Feather name="message-circle" size={22} color="#fff" />
            <View style={s.msgBadge} />
          </TouchableOpacity>
        </View>

        {/* ── Stack ── */}
        <View style={s.stack}>
          {deck.length === 0 ? (
            <View style={s.empty}>
              <Text style={s.emptyEmoji}>🔥</Text>
              <Text style={s.emptyTitle}>You're all caught up!</Text>
              <Text style={s.emptySub}>
                Check back later for new sparks nearby
              </Text>
              <TouchableOpacity
                style={s.refreshBtn}
                onPress={() => {
                  setDeck(PROFILES);
                  setHistory([]);
                }}
              >
                <Text style={s.refreshTxt}>Refresh</Text>
              </TouchableOpacity>
            </View>
          ) : (
            [...visible].reverse().map((profile, reversedIdx) => {
              const stackIndex = visible.length - 1 - reversedIdx;
              const isTop = stackIndex === 0;
              return (
                <SwipeCard
                  key={profile.id}
                  profile={profile}
                  stackIndex={stackIndex}
                  onSwiped={handleSwiped}
                  registerFlyOut={(fn) => {
                    if (isTop) topFlyOut.current = fn;
                  }}
                />
              );
            })
          )}
        </View>

        {/* ── Buttons ── */}
        {deck.length > 0 && (
          <View style={s.actions}>
            {/* Rewind */}
            <TouchableOpacity
              style={[s.btn, s.btnSm, { borderColor: '#f59e0b' }]}
              activeOpacity={0.8}
              onPress={() => {
                if (history.length === 0) return;
                Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium);
                const last = history[0];
                setHistory((h) => h.slice(1));
                setDeck((d) => [last, ...d]);
              }}
            >
              <Feather name="rotate-ccw" size={20} color="#f59e0b" />
            </TouchableOpacity>

            {/* Nope */}
            <TouchableOpacity
              style={[s.btn, s.btnLg, { borderColor: '#ef4444' }]}
              activeOpacity={0.8}
              onPress={() => triggerSwipe('left')}
            >
              <Ionicons name="close" size={32} color="#ef4444" />
            </TouchableOpacity>

            {/* Super like */}
            <TouchableOpacity
              style={[s.btn, s.btnSm, { borderColor: '#6366f1' }]}
              activeOpacity={0.8}
              onPress={() => triggerSwipe('up')}
            >
              <Ionicons name="flash" size={20} color="#6366f1" />
            </TouchableOpacity>

            {/* Like */}
            <TouchableOpacity
              style={[s.btn, s.btnLg, { borderColor: '#22c55e' }]}
              activeOpacity={0.8}
              onPress={() => triggerSwipe('right')}
            >
              <Ionicons name="heart" size={28} color="#22c55e" />
            </TouchableOpacity>

            {/* Boost */}
            <TouchableOpacity
              style={[s.btn, s.btnSm, { borderColor: '#1d9bf0' }]}
              activeOpacity={0.8}
              onPress={() =>
                Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light)
              }
            >
              <Feather name="star" size={20} color="#1d9bf0" />
            </TouchableOpacity>
          </View>
        )}

        {/* ── Match Modal ── */}
        {matchProfile && (
          <View style={s.overlay}>
            <LinearGradient
              colors={['rgba(99,102,241,0.97)', 'rgba(168,85,247,0.97)']}
              style={s.matchCard}
            >
              <View style={s.matchAvatars}>
                <Image source={{ uri: MY_AVATAR }} style={s.matchAv} />
                <View style={s.matchDiv}>
                  <Text style={s.matchDivEmoji}>⚡</Text>
                </View>
                <Image source={{ uri: matchProfile.image }} style={s.matchAv} />
              </View>
              <Text style={s.matchTitle}>It's a Spark!</Text>
              <Text style={s.matchSub}>
                You and {matchProfile.name} liked each other
              </Text>
              <TouchableOpacity style={s.matchBtn}>
                <Text style={s.matchBtnTxt}>Send a Message</Text>
              </TouchableOpacity>
              <TouchableOpacity
                style={s.matchSkip}
                onPress={() => setMatchProfile(null)}
              >
                <Text style={s.matchSkipTxt}>Keep Swiping</Text>
              </TouchableOpacity>
            </LinearGradient>
          </View>
        )}
      </SafeAreaView>
    </SafeAreaProvider>
  );
}

// ─── Styles ───────────────────────────────────────────────────────────────────
const s = StyleSheet.create({
  container: { flex: 1, backgroundColor: '#09090b' },

  // Header
  header: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingHorizontal: 20,
    paddingTop: 8,
    paddingBottom: 12,
  },
  avatarWrap: {
    width: 44,
    height: 44,
    borderRadius: 22,
    borderWidth: 2,
    borderColor: '#6366f1',
    alignItems: 'center',
    justifyContent: 'center',
  },
  avatar: { width: 38, height: 38, borderRadius: 19 },
  onlineDot: {
    position: 'absolute',
    bottom: -1,
    right: -1,
    width: 12,
    height: 12,
    borderRadius: 6,
    backgroundColor: '#22c55e',
    borderWidth: 2,
    borderColor: '#09090b',
  },
  logoRow: { flexDirection: 'row', alignItems: 'center', gap: 6 },
  logoEmoji: { fontSize: 22 },
  logoText: {
    fontSize: 24,
    fontWeight: '800',
    color: '#fff',
    letterSpacing: -0.5,
  },
  msgBtn: { width: 44, height: 44, alignItems: 'center', justifyContent: 'center' },
  msgBadge: {
    position: 'absolute',
    top: 7,
    right: 7,
    width: 9,
    height: 9,
    borderRadius: 5,
    backgroundColor: '#6366f1',
    borderWidth: 2,
    borderColor: '#09090b',
  },

  // Stack
  stack: { flex: 1, alignItems: 'center', justifyContent: 'center' },
  card: {
    position: 'absolute',
    width: CARD_W,
    height: CARD_H,
    borderRadius: 24,
    overflow: 'hidden',
    backgroundColor: '#18181b',
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 10 },
    shadowOpacity: 0.45,
    shadowRadius: 20,
    elevation: 10,
  },
  cardImg: { width: '100%', height: '100%', resizeMode: 'cover' },
  grad: { position: 'absolute', bottom: 0, left: 0, right: 0, height: '62%' },

  // Stamps
  stamp: {
    position: 'absolute',
    top: 52,
    paddingHorizontal: 16,
    paddingVertical: 8,
    borderRadius: 8,
    borderWidth: 3,
  },
  likeStamp: {
    left: 20,
    borderColor: '#22c55e',
    transform: [{ rotate: '-18deg' }],
  },
  nopeStamp: {
    right: 20,
    borderColor: '#ef4444',
    transform: [{ rotate: '18deg' }],
  },
  superStamp: {
    alignSelf: 'center',
    left: CARD_W / 2 - 70,
    borderColor: '#6366f1',
  },
  stampLike: {
    fontSize: 24,
    fontWeight: '800',
    color: '#22c55e',
    letterSpacing: 2,
  },
  stampNope: {
    fontSize: 24,
    fontWeight: '800',
    color: '#ef4444',
    letterSpacing: 2,
  },
  stampSuper: {
    fontSize: 20,
    fontWeight: '800',
    color: '#6366f1',
    letterSpacing: 2,
  },

  // Card info
  cardInfo: { position: 'absolute', bottom: 0, left: 0, right: 0, padding: 20 },
  nameRow: { flexDirection: 'row', alignItems: 'center', marginBottom: 4 },
  name: { fontSize: 28, fontWeight: '700', color: '#fff', lineHeight: 34 },
  distRow: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 4,
    marginBottom: 8,
  },
  dist: { fontSize: 13, color: '#a1a1aa', fontWeight: '500', marginLeft: 4 },
  bio: {
    fontSize: 14,
    color: 'rgba(255,255,255,0.85)',
    lineHeight: 20,
    marginBottom: 12,
  },
  tags: { flexDirection: 'row', flexWrap: 'wrap', gap: 8 },
  tag: {
    backgroundColor: 'rgba(99,102,241,0.25)',
    borderColor: 'rgba(99,102,241,0.5)',
    borderWidth: 1,
    borderRadius: 20,
    paddingHorizontal: 12,
    paddingVertical: 4,
  },
  tagTxt: { fontSize: 12, color: '#a5b4fc', fontWeight: '600' },

  // Buttons
  actions: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    paddingHorizontal: 16,
    paddingBottom: 12,
    paddingTop: 16,
    gap: 16,
  },
  btn: {
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#0f0f11',
    borderWidth: 2,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 4 },
    shadowOpacity: 0.3,
    shadowRadius: 8,
    elevation: 6,
  },
  btnSm: { width: 52, height: 52, borderRadius: 26 },
  btnLg: { width: 64, height: 64, borderRadius: 32 },

  // Empty
  empty: { alignItems: 'center', paddingHorizontal: 40 },
  emptyEmoji: { fontSize: 64, marginBottom: 16 },
  emptyTitle: {
    fontSize: 24,
    fontWeight: '700',
    color: '#fff',
    marginBottom: 8,
    textAlign: 'center',
  },
  emptySub: {
    fontSize: 15,
    color: '#71717a',
    textAlign: 'center',
    lineHeight: 22,
    marginBottom: 32,
  },
  refreshBtn: {
    backgroundColor: '#6366f1',
    paddingHorizontal: 40,
    paddingVertical: 16,
    borderRadius: 32,
  },
  refreshTxt: { fontSize: 16, fontWeight: '700', color: '#fff' },

  // Match
  overlay: {
    ...StyleSheet.absoluteFillObject,
    backgroundColor: 'rgba(0,0,0,0.92)',
    alignItems: 'center',
    justifyContent: 'center',
    zIndex: 100,
    padding: 24,
  },
  matchCard: { width: '100%', borderRadius: 32, padding: 40, alignItems: 'center' },
  matchAvatars: { flexDirection: 'row', alignItems: 'center', marginBottom: 28 },
  matchAv: {
    width: 88,
    height: 88,
    borderRadius: 44,
    borderWidth: 3,
    borderColor: '#fff',
  },
  matchDiv: {
    width: 40,
    height: 40,
    borderRadius: 20,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
    zIndex: 1,
    marginHorizontal: -8,
  },
  matchDivEmoji: { fontSize: 20 },
  matchTitle: {
    fontSize: 32,
    fontWeight: '800',
    color: '#fff',
    marginBottom: 8,
    letterSpacing: -0.5,
  },
  matchSub: {
    fontSize: 16,
    color: 'rgba(255,255,255,0.8)',
    textAlign: 'center',
    lineHeight: 24,
    marginBottom: 32,
  },
  matchBtn: {
    backgroundColor: '#fff',
    paddingHorizontal: 40,
    paddingVertical: 16,
    borderRadius: 32,
    width: '100%',
    alignItems: 'center',
    marginBottom: 16,
  },
  matchBtnTxt: { fontSize: 16, fontWeight: '700', color: '#6366f1' },
  matchSkip: { paddingVertical: 12 },
  matchSkipTxt: { fontSize: 15, color: 'rgba(255,255,255,0.7)', fontWeight: '500' },
});
Dating App
