import React, { useState, useEffect } from 'react';
import {
  View,
  Text,
  Image,
  Pressable,
  ScrollView,
  RefreshControl,
  StyleSheet,
  StatusBar,
  StyleProp,
  ViewStyle,
  Dimensions,
} from 'react-native';
import { LinearGradient } from 'expo-linear-gradient';
import Animated, {
  useSharedValue,
  useAnimatedStyle,
  withRepeat,
  withTiming,
  withSequence,
  withSpring,
  Easing,
  FadeIn,
  FadeInDown,
} from 'react-native-reanimated';
import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';

const { width: SCREEN_W } = Dimensions.get('window');

// ── Palette ───────────────────────────────────────────────────────────────────
const C = {
  bg: '#fdf8f2',
  card: '#ffffff',
  accent: '#f97316',
  accentLight: '#fff4ed',
  accentMid: '#fdba74',
  teal: '#0d9488',
  tealLight: '#ccfbf1',
  text: '#1c1917',
  textMid: '#57534e',
  textSoft: '#a8a29e',
  divider: '#f0ebe4',
  tagBg: '#fef3c7',
  tagText: '#92400e',
};

// ── ShimmerPlaceholder ────────────────────────────────────────────────────────
interface ShimmerProps {
  loading: boolean;
  width: number | `${number}%`;
  height: number;
  borderRadius?: number;
  style?: StyleProp<ViewStyle>;
  children?: React.ReactNode;
}

function ShimmerPlaceholder({
  loading,
  width,
  height,
  borderRadius = 10,
  style,
  children,
}: ShimmerProps) {
  const translateX = useSharedValue(-1);

  useEffect(() => {
    if (loading) {
      translateX.value = withRepeat(
        withSequence(
          withTiming(1, { duration: 1200, easing: Easing.inOut(Easing.ease) }),
          withTiming(-1, { duration: 0 }),
        ),
        -1,
        false,
      );
    } else {
      translateX.value = -1;
    }
  }, [loading]);

  const shimmerStyle = useAnimatedStyle(() => ({
    transform: [{ translateX: typeof width === 'number' ? translateX.value * width : 0 }],
  }));

  if (!loading) {
    return (
      <Animated.View entering={FadeIn.duration(400)} style={[{ width, height }, style]}>
        {children}
      </Animated.View>
    );
  }

  return (
    <View
      style={[
        { width, height, borderRadius, overflow: 'hidden', backgroundColor: '#ede9e3' },
        style,
      ]}
    >
      <Animated.View style={[StyleSheet.absoluteFill, shimmerStyle]}>
        <LinearGradient
          colors={['#ede9e3', '#f5f1ec', '#f5f1ec', '#ede9e3']}
          locations={[0, 0.35, 0.65, 1]}
          start={{ x: 0, y: 0 }}
          end={{ x: 1, y: 0 }}
          style={[
            StyleSheet.absoluteFill,
            { width: typeof width === 'number' ? width * 3 : '300%' },
          ]}
        />
      </Animated.View>
    </View>
  );
}

// ── Types ─────────────────────────────────────────────────────────────────────
interface Session {
  id: string;
  title: string;
  subtitle: string;
  duration: string;
  tag: string;
  image: string;
  color: string;
}

interface Program {
  id: string;
  title: string;
  sessions: number;
  emoji: string;
  color: string;
  textColor: string;
}

// ── Data ──────────────────────────────────────────────────────────────────────
const PROGRAMS: Program[] = [
  { id: 'p1', title: 'Knife Skills', sessions: 6, emoji: '🔪', color: '#fef3c7', textColor: '#92400e' },
  { id: 'p2', title: 'Seasonings', sessions: 8, emoji: '☀️', color: '#ccfbf1', textColor: '#134e4a' },
  { id: 'p3', title: 'Baking', sessions: 5, emoji: '🫙', color: '#ede9fe', textColor: '#4c1d95' },
  { id: 'p4', title: 'Fire & Smoke', sessions: 7, emoji: '🔥', color: '#fee2e2', textColor: '#7f1d1d' },
  { id: 'p5', title: 'Umami Basics', sessions: 4, emoji: '🍜', color: '#e0f2fe', textColor: '#0c4a6e' },
];

const SESSIONS: Session[] = [
  {
    id: 's1',
    title: 'Mindful Mise en Place',
    subtitle: 'Prepare ingredients with full presence and zero rush.',
    duration: '12 min',
    tag: 'Focus',
    image: 'https://picsum.photos/seed/cook1/800/500',
    color: '#fff4ed',
  },
  {
    id: 's2',
    title: 'The Art of Seasoning',
    subtitle: 'Train your palate to sense balance before you taste.',
    duration: '9 min',
    tag: 'Senses',
    image: 'https://picsum.photos/seed/cook2/800/500',
    color: '#ccfbf1',
  },
  {
    id: 's3',
    title: 'Slow Sauce Meditation',
    subtitle: 'Let a ragu teach you patience, one stir at a time.',
    duration: '18 min',
    tag: 'Patience',
    image: 'https://picsum.photos/seed/cook3/800/500',
    color: '#fef9c3',
  },
  {
    id: 's4',
    title: 'Bread & Breath',
    subtitle: 'Knead with intention. Feel the dough come alive.',
    duration: '22 min',
    tag: 'Grounding',
    image: 'https://picsum.photos/seed/cook4/800/500',
    color: '#fce7f3',
  },
];

// ── Play Button ───────────────────────────────────────────────────────────────
function PlayButton({ size = 44, color = '#ffffff' }: { size?: number; color?: string }) {
  const scale = useSharedValue(1);
  const animStyle = useAnimatedStyle(() => ({ transform: [{ scale: scale.value }] }));

  function onPress() {
    scale.value = withSpring(0.88, { damping: 6 }, () => {
      scale.value = withSpring(1);
    });
  }

  return (
    <Pressable onPress={onPress}>
      <Animated.View
        style={[
          animStyle,
          {
            width: size,
            height: size,
            borderRadius: size / 2,
            backgroundColor: color,
            alignItems: 'center',
            justifyContent: 'center',
          },
        ]}
      >
        <Text style={{ fontSize: size * 0.38, marginLeft: size * 0.06 }}>▶</Text>
      </Animated.View>
    </Pressable>
  );
}

// ── Hero Card ─────────────────────────────────────────────────────────────────
function HeroCard({ loading }: { loading: boolean }) {
  return (
    <View style={styles.heroWrapper}>
      {loading ? (
        <ShimmerPlaceholder loading width={SCREEN_W - 32} height={200} borderRadius={24} />
      ) : (
        <Animated.View entering={FadeInDown.duration(500).springify()} style={styles.heroCard}>
          <LinearGradient
            colors={['#f97316', '#fb923c', '#fdba74']}
            start={{ x: 0, y: 0 }}
            end={{ x: 1, y: 1 }}
            style={StyleSheet.absoluteFill}
          />
          <View style={styles.heroContent}>
            <Text style={styles.heroEyebrow}>TODAY'S SESSION</Text>
            <Text style={styles.heroTitle}>Morning Kitchen Ritual</Text>
            <Text style={styles.heroSub}>Start your day grounded. 10 min · Beginner</Text>
            <View style={styles.heroRow}>
              <PlayButton size={48} color="#ffffff" />
              <Text style={styles.heroStart}>Begin session</Text>
            </View>
          </View>
          <Text style={styles.heroEmoji}>🍳</Text>
        </Animated.View>
      )}
    </View>
  );
}

// ── Program Pill ──────────────────────────────────────────────────────────────
function ProgramPill({ prog, loading }: { prog: Program; loading: boolean }) {
  if (loading) {
    return <ShimmerPlaceholder loading width={108} height={82} borderRadius={18} style={{ marginRight: 12 }} />;
  }
  return (
    <Animated.View entering={FadeInDown.duration(400).springify()}>
      <Pressable style={[styles.programPill, { backgroundColor: prog.color }]}>
        <Text style={styles.programEmoji}>{prog.emoji}</Text>
        <Text style={[styles.programTitle, { color: prog.textColor }]}>{prog.title}</Text>
        <Text style={[styles.programCount, { color: prog.textColor }]}>{prog.sessions} sessions</Text>
      </Pressable>
    </Animated.View>
  );
}

// ── Session Skeleton ──────────────────────────────────────────────────────────
function SessionSkeleton() {
  return (
    <View style={styles.sessionCard}>
      <ShimmerPlaceholder loading width="100%" height={160} borderRadius={20} />
      <View style={styles.sessionBody}>
        <View style={{ flexDirection: 'row', gap: 8, marginBottom: 8 }}>
          <ShimmerPlaceholder loading width={52} height={20} borderRadius={10} />
          <ShimmerPlaceholder loading width={52} height={20} borderRadius={10} />
        </View>
        <ShimmerPlaceholder loading width="75%" height={14} borderRadius={7} style={{ marginBottom: 6 }} />
        <ShimmerPlaceholder loading width="55%" height={12} borderRadius={6} />
      </View>
    </View>
  );
}

// ── Session Card ──────────────────────────────────────────────────────────────
function SessionCard({ session, index }: { session: Session; index: number }) {
  const [saved, setSaved] = useState(false);

  return (
    <Animated.View entering={FadeInDown.delay(index * 80).duration(450).springify()}>
      <Pressable style={styles.sessionCard}>
        <Image source={{ uri: session.image }} style={styles.sessionImage} resizeMode="cover" />
        <LinearGradient
          colors={['transparent', 'rgba(0,0,0,0.45)']}
          style={styles.sessionImageOverlay}
        />
        <View style={styles.sessionDurationBadge}>
          <Text style={styles.sessionDurationText}>{session.duration}</Text>
        </View>
        <View style={styles.sessionPlayOverlay}>
          <PlayButton size={40} color="rgba(255,255,255,0.92)" />
        </View>
        <View style={[styles.sessionBody, { backgroundColor: session.color }]}>
          <View style={styles.sessionMeta}>
            <View style={styles.sessionTag}>
              <Text style={styles.sessionTagText}>{session.tag}</Text>
            </View>
            <Pressable onPress={() => setSaved((v) => !v)}>
              <Text style={{ fontSize: 18, color: saved ? C.accent : C.textSoft }}>
                {saved ? '♥' : '♡'}
              </Text>
            </Pressable>
          </View>
          <Text style={styles.sessionTitle}>{session.title}</Text>
          <Text style={styles.sessionSub}>{session.subtitle}</Text>
        </View>
      </Pressable>
    </Animated.View>
  );
}

// ── Main Screen ───────────────────────────────────────────────────────────────
function MindfulCookingContent() {
  const [loading, setLoading] = useState(true);
  const [refreshing, setRefreshing] = useState(false);
  const [activeTab, setActiveTab] = useState<'explore' | 'saved' | 'progress'>('explore');

  useEffect(() => {
    const t = setTimeout(() => setLoading(false), 2400);
    return () => clearTimeout(t);
  }, []);

  function onRefresh() {
    setRefreshing(true);
    setLoading(true);
    setTimeout(() => {
      setLoading(false);
      setRefreshing(false);
    }, 2400);
  }

  return (
    <SafeAreaView style={styles.screen}>
      <StatusBar barStyle="dark-content" backgroundColor={C.bg} />

      {/* Top nav */}
      <View style={styles.nav}>
        <View>
          <Text style={styles.navGreeting}>Good morning,</Text>
          <Text style={styles.navName}>Chef 👋</Text>
        </View>
        <Image
          source={{ uri: 'https://i.pravatar.cc/150?img=47' }}
          style={styles.navAvatar}
        />
      </View>

      {/* Tab bar */}
      <View style={styles.tabs}>
        {(['explore', 'saved', 'progress'] as const).map((tab) => (
          <Pressable
            key={tab}
            style={[styles.tab, activeTab === tab && styles.tabActive]}
            onPress={() => setActiveTab(tab)}
          >
            <Text style={[styles.tabText, activeTab === tab && styles.tabTextActive]}>
              {tab.charAt(0).toUpperCase() + tab.slice(1)}
            </Text>
          </Pressable>
        ))}
      </View>

      <ScrollView
        showsVerticalScrollIndicator={false}
        contentContainerStyle={styles.scroll}
        refreshControl={
          <RefreshControl refreshing={refreshing} onRefresh={onRefresh} tintColor={C.accent} />
        }
      >
        {/* Hero */}
        <HeroCard loading={loading} />

        {/* Programs */}
        <Text style={styles.sectionTitle}>Programs</Text>
        <ScrollView
          horizontal
          showsHorizontalScrollIndicator={false}
          contentContainerStyle={styles.programsRow}
        >
          {PROGRAMS.map((prog) => (
            <ProgramPill key={prog.id} prog={prog} loading={loading} />
          ))}
        </ScrollView>

        {/* Sessions */}
        <View style={styles.sessionsHeader}>
          <Text style={styles.sectionTitle}>Today's Sessions</Text>
          <Pressable>
            <Text style={styles.seeAll}>See all</Text>
          </Pressable>
        </View>

        {loading ? (
          <>
            <SessionSkeleton />
            <SessionSkeleton />
          </>
        ) : (
          SESSIONS.map((s, i) => <SessionCard key={s.id} session={s} index={i} />)
        )}

        {/* Streak Banner */}
        {!loading && (
          <Animated.View entering={FadeInDown.delay(400).duration(500)} style={styles.streakBanner}>
            <LinearGradient
              colors={[C.teal, '#0f766e']}
              start={{ x: 0, y: 0 }}
              end={{ x: 1, y: 0 }}
              style={StyleSheet.absoluteFill}
            />
            <Text style={styles.streakEmoji}>🔥</Text>
            <View style={{ flex: 1 }}>
              <Text style={styles.streakTitle}>7-day cooking streak!</Text>
              <Text style={styles.streakSub}>You've cooked mindfully every day this week.</Text>
            </View>
          </Animated.View>
        )}

        <View style={{ height: 32 }} />
      </ScrollView>

      {/* Bottom tab bar */}
      <View style={styles.bottomBar}>
        {[
          { icon: '🏠', label: 'Home' },
          { icon: '🔍', label: 'Explore' },
          { icon: '📖', label: 'Learn' },
          { icon: '👤', label: 'Profile' },
        ].map((item, i) => (
          <Pressable key={item.label} style={styles.bottomTab}>
            <Text style={styles.bottomIcon}>{item.icon}</Text>
            <Text style={[styles.bottomLabel, i === 0 && { color: C.accent }]}>{item.label}</Text>
          </Pressable>
        ))}
      </View>
    </SafeAreaView>
  );
}

export default function MindfulCookingScreen() {
  return (
    <SafeAreaProvider>
      <MindfulCookingContent />
    </SafeAreaProvider>
  );
}

// ── Styles ────────────────────────────────────────────────────────────────────
const styles = StyleSheet.create({
  screen: { flex: 1, backgroundColor: C.bg },

  // Nav
  nav: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingHorizontal: 20,
    paddingTop: 6,
    paddingBottom: 10,
  },
  navGreeting: { fontSize: 13, color: C.textSoft, fontWeight: '500' },
  navName: { fontSize: 22, fontWeight: '800', color: C.text, letterSpacing: -0.4 },
  navAvatar: {
    width: 40,
    height: 40,
    borderRadius: 20,
    borderWidth: 2,
    borderColor: C.accentMid,
    backgroundColor: C.divider,
  },

  // Tabs
  tabs: {
    flexDirection: 'row',
    paddingHorizontal: 20,
    gap: 8,
    marginBottom: 4,
  },
  tab: {
    paddingHorizontal: 16,
    paddingVertical: 7,
    borderRadius: 20,
    backgroundColor: C.divider,
  },
  tabActive: { backgroundColor: C.accent },
  tabText: { fontSize: 13, fontWeight: '600', color: C.textMid },
  tabTextActive: { color: '#ffffff' },

  // Scroll
  scroll: { paddingTop: 12, paddingHorizontal: 16 },

  // Hero
  heroWrapper: { marginBottom: 24 },
  heroCard: {
    width: SCREEN_W - 32,
    height: 200,
    borderRadius: 24,
    overflow: 'hidden',
    flexDirection: 'row',
    alignItems: 'flex-end',
  },
  heroContent: { flex: 1, padding: 20, paddingBottom: 22 },
  heroEyebrow: {
    fontSize: 10,
    fontWeight: '800',
    color: 'rgba(255,255,255,0.75)',
    letterSpacing: 1.2,
    marginBottom: 4,
  },
  heroTitle: {
    fontSize: 22,
    fontWeight: '900',
    color: '#ffffff',
    letterSpacing: -0.4,
    marginBottom: 4,
  },
  heroSub: { fontSize: 12, color: 'rgba(255,255,255,0.8)', marginBottom: 14 },
  heroRow: { flexDirection: 'row', alignItems: 'center', gap: 10 },
  heroStart: { fontSize: 14, fontWeight: '700', color: '#ffffff' },
  heroEmoji: {
    fontSize: 72,
    position: 'absolute',
    right: 12,
    bottom: -4,
    opacity: 0.35,
  },

  // Programs
  sectionTitle: {
    fontSize: 17,
    fontWeight: '800',
    color: C.text,
    letterSpacing: -0.2,
    marginBottom: 12,
  },
  programsRow: { paddingBottom: 20, paddingRight: 16 },
  programPill: {
    width: 108,
    height: 82,
    borderRadius: 18,
    padding: 12,
    marginRight: 12,
    justifyContent: 'space-between',
  },
  programEmoji: { fontSize: 22 },
  programTitle: { fontSize: 13, fontWeight: '700', marginTop: 2 },
  programCount: { fontSize: 10, fontWeight: '500', opacity: 0.7 },

  // Sessions header
  sessionsHeader: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    marginBottom: 12,
  },
  seeAll: { fontSize: 13, color: C.accent, fontWeight: '700' },

  // Session Card
  sessionCard: {
    borderRadius: 20,
    overflow: 'hidden',
    marginBottom: 16,
    backgroundColor: C.card,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 3 },
    shadowOpacity: 0.07,
    shadowRadius: 10,
    elevation: 3,
  },
  sessionImage: { width: '100%', height: 160 },
  sessionImageOverlay: {
    ...StyleSheet.absoluteFillObject,
    height: 160,
  },
  sessionDurationBadge: {
    position: 'absolute',
    top: 12,
    left: 12,
    backgroundColor: 'rgba(0,0,0,0.45)',
    borderRadius: 10,
    paddingHorizontal: 10,
    paddingVertical: 4,
  },
  sessionDurationText: { fontSize: 11, color: '#ffffff', fontWeight: '700' },
  sessionPlayOverlay: {
    position: 'absolute',
    top: 60,
    right: 16,
  },
  sessionBody: { padding: 14 },
  sessionMeta: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    marginBottom: 8,
  },
  sessionTag: {
    backgroundColor: C.tagBg,
    borderRadius: 10,
    paddingHorizontal: 10,
    paddingVertical: 4,
  },
  sessionTagText: { fontSize: 11, fontWeight: '700', color: C.tagText },
  sessionTitle: {
    fontSize: 15,
    fontWeight: '800',
    color: C.text,
    letterSpacing: -0.2,
    marginBottom: 4,
  },
  sessionSub: { fontSize: 12, color: C.textMid, lineHeight: 17 },

  // Streak
  streakBanner: {
    flexDirection: 'row',
    alignItems: 'center',
    borderRadius: 18,
    padding: 16,
    gap: 12,
    overflow: 'hidden',
    marginTop: 4,
  },
  streakEmoji: { fontSize: 32 },
  streakTitle: {
    fontSize: 14,
    fontWeight: '800',
    color: '#ffffff',
    marginBottom: 2,
  },
  streakSub: { fontSize: 12, color: 'rgba(255,255,255,0.8)' },

  // Bottom bar
  bottomBar: {
    flexDirection: 'row',
    borderTopWidth: 1,
    borderTopColor: C.divider,
    backgroundColor: C.bg,
    paddingVertical: 10,
    paddingHorizontal: 8,
  },
  bottomTab: { flex: 1, alignItems: 'center', gap: 3 },
  bottomIcon: { fontSize: 20 },
  bottomLabel: { fontSize: 10, fontWeight: '600', color: C.textSoft },
});
Cooking App Screen
