import React, { useEffect, useRef, useState } from 'react';
import {
  View,
  Text,
  ScrollView,
  StyleSheet,
  TouchableOpacity,
  Pressable,
  StatusBar,
  Dimensions,
  Image,
} from 'react-native';
import { SafeAreaView, useSafeAreaInsets } from 'react-native-safe-area-context';
import { Feather } from '@expo/vector-icons';
import Animated, {
  useSharedValue,
  useAnimatedStyle,
  withTiming,
  withSpring,
  FadeInDown,
} from 'react-native-reanimated';
import * as Haptics from 'expo-haptics';
import {
  Svg,
  Path,
  Defs,
  LinearGradient as SvgLinearGradient,
  Stop,
} from 'react-native-svg';

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

// ─── Interfaces ──────────────────────────────────────────────────────────────

interface InsiderTransaction {
  id: string;
  insiderName: string;
  insiderTitle: string;
  company: string;
  ticker: string;
  action: 'BUY' | 'SELL';
  shares: string;
  avgPrice: string;
  totalValue: string;
  date: string;
  filedDate: string;
  changePercent: string;
  avatarUri: string;
  followed: boolean;
}

interface HoldingItem {
  id: string;
  ticker: string;
  company: string;
  shares: string;
  avgCost: string;
  currentPrice: string;
  totalValue: string;
  gainLoss: string;
  gainLossPercent: string;
  isPositive: boolean;
  insiderBuys: number;
  logoUri: string;
}

interface TabItem {
  key: string;
  label: string;
}

interface SignalRowItemData {
  label: string;
  value: string;
  sub: string;
  color: string;
  icon: string;
}

// ─── Data ────────────────────────────────────────────────────────────────────

const TABS: TabItem[] = [
  { key: 'overview', label: 'Overview' },
  { key: 'insiders', label: 'Insiders' },
  { key: 'holdings', label: 'Holdings' },
];

const SIGNAL_ROWS: SignalRowItemData[] = [
  { label: 'Insider Buys', value: '23', sub: '+8 this week', color: '#16a34a', icon: 'arrow-up-circle' },
  { label: 'Insider Sells', value: '9', sub: '−2 this week', color: '#dc2626', icon: 'arrow-down-circle' },
  { label: 'Executives Followed', value: '11', sub: 'across 8 companies', color: '#6366f1', icon: 'users' },
];

const INSIDER_TRANSACTIONS: InsiderTransaction[] = [
  {
    id: '1',
    insiderName: 'Jensen Huang',
    insiderTitle: 'CEO',
    company: 'NVIDIA Corp',
    ticker: 'NVDA',
    action: 'BUY',
    shares: '420,000',
    avgPrice: '$118.42',
    totalValue: '$49.7M',
    date: 'Today, 9:41 AM',
    filedDate: 'Form 4 · Mar 19',
    changePercent: '+3.2%',
    avatarUri: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=120&q=80',
    followed: true,
  },
  {
    id: '2',
    insiderName: 'Satya Nadella',
    insiderTitle: 'CEO',
    company: 'Microsoft Corp',
    ticker: 'MSFT',
    action: 'SELL',
    shares: '115,000',
    avgPrice: '$412.18',
    totalValue: '$47.4M',
    date: 'Yesterday',
    filedDate: 'Form 4 · Mar 18',
    changePercent: '−1.4%',
    avatarUri: 'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=120&q=80',
    followed: false,
  },
  {
    id: '3',
    insiderName: 'Lisa Su',
    insiderTitle: 'CEO & Chair',
    company: 'Advanced Micro Devices',
    ticker: 'AMD',
    action: 'BUY',
    shares: '310,000',
    avgPrice: '$168.55',
    totalValue: '$52.2M',
    date: 'Mar 17',
    filedDate: 'Form 4 · Mar 17',
    changePercent: '+5.8%',
    avatarUri: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=120&q=80',
    followed: true,
  },
  {
    id: '4',
    insiderName: 'Mark Zuckerberg',
    insiderTitle: 'CEO',
    company: 'Meta Platforms',
    ticker: 'META',
    action: 'BUY',
    shares: '675,000',
    avgPrice: '$504.30',
    totalValue: '$340.4M',
    date: 'Mar 16',
    filedDate: 'Form 4 · Mar 16',
    changePercent: '+7.1%',
    avatarUri: 'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=120&q=80',
    followed: false,
  },
  {
    id: '5',
    insiderName: 'Arvind Krishna',
    insiderTitle: 'CEO',
    company: 'IBM Corp',
    ticker: 'IBM',
    action: 'SELL',
    shares: '88,500',
    avgPrice: '$228.74',
    totalValue: '$20.2M',
    date: 'Mar 15',
    filedDate: 'Form 4 · Mar 15',
    changePercent: '−0.8%',
    avatarUri: 'https://images.unsplash.com/photo-1519085360753-af0119f7cbe7?w=120&q=80',
    followed: false,
  },
  {
    id: '6',
    insiderName: 'Priya Sharma',
    insiderTitle: 'CFO',
    company: 'Palantir Technologies',
    ticker: 'PLTR',
    action: 'BUY',
    shares: '1,200,000',
    avgPrice: '$22.86',
    totalValue: '$27.4M',
    date: 'Mar 14',
    filedDate: 'Form 4 · Mar 14',
    changePercent: '+4.4%',
    avatarUri: 'https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=120&q=80',
    followed: true,
  },
];

const HOLDINGS: HoldingItem[] = [
  {
    id: '1',
    ticker: 'NVDA',
    company: 'NVIDIA Corp',
    shares: '84',
    avgCost: '$94.20',
    currentPrice: '$118.42',
    totalValue: '$9,947.28',
    gainLoss: '+$2,034.48',
    gainLossPercent: '+25.7%',
    isPositive: true,
    insiderBuys: 3,
    logoUri: 'https://images.unsplash.com/photo-1611186871525-b439fcb26b4e?w=80&q=80',
  },
  {
    id: '2',
    ticker: 'META',
    company: 'Meta Platforms',
    shares: '21',
    avgCost: '$468.10',
    currentPrice: '$504.30',
    totalValue: '$10,590.30',
    gainLoss: '+$760.20',
    gainLossPercent: '+7.7%',
    isPositive: true,
    insiderBuys: 2,
    logoUri: 'https://images.unsplash.com/photo-1633675254053-d96ae6a96e3a?w=80&q=80',
  },
  {
    id: '3',
    ticker: 'PLTR',
    company: 'Palantir Technologies',
    shares: '820',
    avgCost: '$18.44',
    currentPrice: '$22.86',
    totalValue: '$18,745.20',
    gainLoss: '+$3,624.40',
    gainLossPercent: '+23.9%',
    isPositive: true,
    insiderBuys: 5,
    logoUri: 'https://images.unsplash.com/photo-1518770660439-4636190af475?w=80&q=80',
  },
  {
    id: '4',
    ticker: 'AMD',
    company: 'Advanced Micro Devices',
    shares: '112',
    avgCost: '$178.30',
    currentPrice: '$168.55',
    totalValue: '$18,877.60',
    gainLoss: '−$1,092.00',
    gainLossPercent: '−5.5%',
    isPositive: false,
    insiderBuys: 1,
    logoUri: 'https://images.unsplash.com/photo-1591238372338-f5a21e1cc2db?w=80&q=80',
  },
  {
    id: '5',
    ticker: 'MSFT',
    company: 'Microsoft Corp',
    shares: '38',
    avgCost: '$388.00',
    currentPrice: '$412.18',
    totalValue: '$15,662.84',
    gainLoss: '+$918.84',
    gainLossPercent: '+6.2%',
    isPositive: true,
    insiderBuys: 0,
    logoUri: 'https://images.unsplash.com/photo-1642132652806-8aa09801c2ab?w=80&q=80',
  },
];

// ─── Sparkline ────────────────────────────────────────────────────────────────

const SPARKLINE_POINTS = [42, 55, 48, 62, 58, 71, 66, 74, 69, 82, 79, 88, 84, 92, 96, 100];

function Sparkline() {
  const chartW = SCREEN_WIDTH;
  const chartH = 80;
  const stepX = chartW / (SPARKLINE_POINTS.length - 1);
  const minV = Math.min(...SPARKLINE_POINTS);
  const maxV = Math.max(...SPARKLINE_POINTS);
  const range = maxV - minV || 1;
  const toY = (v: number) => chartH - ((v - minV) / range) * (chartH - 16) - 4;
  const linePath = SPARKLINE_POINTS.map(
    (v, i) => `${i === 0 ? 'M' : 'L'}${i * stepX},${toY(v)}`
  ).join(' ');
  const areaPath = `${linePath} L${(SPARKLINE_POINTS.length - 1) * stepX},${chartH} L0,${chartH} Z`;

  return (
    <Svg width={chartW} height={chartH}>
      <Defs>
        <SvgLinearGradient id="areaGradLight" x1="0" y1="0" x2="0" y2="1">
          <Stop offset="0" stopColor="#6366f1" stopOpacity="0.15" />
          <Stop offset="1" stopColor="#6366f1" stopOpacity="0" />
        </SvgLinearGradient>
      </Defs>
      <Path d={areaPath} fill="url(#areaGradLight)" />
      <Path
        d={linePath}
        stroke="#6366f1"
        strokeWidth="2"
        fill="none"
        strokeLinejoin="round"
        strokeLinecap="round"
      />
    </Svg>
  );
}

// ─── Animated Counter ─────────────────────────────────────────────────────────

function AnimatedCounter({ target, prefix = '' }: { target: number; prefix?: string }) {
  const [displayed, setDisplayed] = useState(target * 0.87);
  const startRef = useRef<number | null>(null);
  const rafRef = useRef<number | null>(null);
  const duration = 1400;

  useEffect(() => {
    const start = target * 0.87;
    const end = target;
    const animate = (ts: number) => {
      if (!startRef.current) startRef.current = ts;
      const elapsed = ts - startRef.current;
      const progress = Math.min(elapsed / duration, 1);
      const eased = 1 - Math.pow(1 - progress, 3);
      setDisplayed(start + (end - start) * eased);
      if (progress < 1) rafRef.current = requestAnimationFrame(animate);
    };
    rafRef.current = requestAnimationFrame(animate);
    return () => { if (rafRef.current) cancelAnimationFrame(rafRef.current); };
  }, [target]);

  const formatted =
    prefix +
    displayed.toLocaleString('en-US', {
      minimumFractionDigits: 2,
      maximumFractionDigits: 2,
    });
  return <Text style={styles.portfolioValue}>{formatted}</Text>;
}

// ─── Main Screen ──────────────────────────────────────────────────────────────

export default function InsiderPortfolioScreen() {
  const insets = useSafeAreaInsets();
  const [activeTab, setActiveTab] = useState('overview');
  const [followedMap, setFollowedMap] = useState<Record<string, boolean>>(() => {
    const map: Record<string, boolean> = {};
    INSIDER_TRANSACTIONS.forEach(t => { map[t.id] = t.followed; });
    return map;
  });

  const tabIndicatorX = useSharedValue(0);
  const tabWidthRef = useRef<number[]>([]);

  const handleTabPress = (key: string, index: number) => {
    Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
    setActiveTab(key);
    const offset = tabWidthRef.current.slice(0, index).reduce((a, b) => a + b, 0);
    tabIndicatorX.value = withTiming(offset, { duration: 240 });
  };

  const indicatorStyle = useAnimatedStyle(() => ({
    transform: [{ translateX: tabIndicatorX.value }],
  }));

  const toggleFollow = (id: string) => {
    Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium);
    setFollowedMap(prev => ({ ...prev, [id]: !prev[id] }));
  };

  return (
    <SafeAreaView style={styles.safeArea} edges={['top']}>
      <StatusBar barStyle="dark-content" />

      {/* Header */}
      <View style={styles.header}>
        <View>
          <Text style={styles.headerEyebrow}>INSIDER TRACKER</Text>
          <Text style={styles.headerTitle}>Portfolio</Text>
        </View>
        <View style={styles.headerActions}>
          <Pressable
            style={styles.iconBtn}
            onPress={() => Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light)}
          >
            <Feather name="bell" size={20} color="#71717a" />
            <View style={styles.notifDot} />
          </Pressable>
          <Pressable
            style={styles.iconBtn}
            onPress={() => Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light)}
          >
            <Feather name="search" size={20} color="#71717a" />
          </Pressable>
        </View>
      </View>

      {/* Tab Bar */}
      <View style={styles.tabBar}>
        {TABS.map((tab, index) => (
          <TouchableOpacity
            key={tab.key}
            style={styles.tabItem}
            activeOpacity={0.7}
            onPress={() => handleTabPress(tab.key, index)}
            onLayout={e => {
              tabWidthRef.current[index] = e.nativeEvent.layout.width;
            }}
          >
            <Text
              style={[
                styles.tabLabel,
                activeTab === tab.key && styles.tabLabelActive,
              ]}
            >
              {tab.label}
            </Text>
          </TouchableOpacity>
        ))}
        <Animated.View style={[styles.tabIndicator, indicatorStyle]} />
      </View>

      <ScrollView
        style={styles.scroll}
        contentContainerStyle={{ paddingBottom: insets.bottom + 32 }}
        showsVerticalScrollIndicator={false}
      >
        {activeTab === 'overview' && (
          <OverviewTab followedMap={followedMap} />
        )}
        {activeTab === 'insiders' && (
          <InsidersTab
            transactions={INSIDER_TRANSACTIONS}
            followedMap={followedMap}
            onToggleFollow={toggleFollow}
          />
        )}
        {activeTab === 'holdings' && <HoldingsTab holdings={HOLDINGS} />}
      </ScrollView>
    </SafeAreaView>
  );
}

// ─── Overview Tab ─────────────────────────────────────────────────────────────

function OverviewTab({ followedMap }: { followedMap: Record<string, boolean> }) {
  return (
    <View>
      {/* Portfolio value — flat, full-bleed, no card */}
      <Animated.View entering={FadeInDown.duration(400).delay(0)} style={styles.heroSection}>
        <View style={styles.heroTopRow}>
          <Text style={styles.heroLabel}>Total Portfolio Value</Text>
          <View style={styles.liveBadge}>
            <View style={styles.liveDot} />
            <Text style={styles.liveBadgeText}>LIVE</Text>
          </View>
        </View>

        <AnimatedCounter target={73823.22} prefix="$" />

        <View style={styles.heroChangeRow}>
          <Feather name="trending-up" size={13} color="#16a34a" />
          <Text style={styles.heroChangeText}>+$6,245.92  (+9.3%)  today</Text>
        </View>

        {/* Full-bleed sparkline */}
        <View style={styles.sparklineWrap}>
          <Sparkline />
        </View>

        {/* Inline stat strip */}
        <View style={styles.statStrip}>
          <View style={styles.statItem}>
            <Text style={styles.statLabel}>Invested</Text>
            <Text style={styles.statValue}>$61,920.00</Text>
          </View>
          <View style={styles.statDivider} />
          <View style={styles.statItem}>
            <Text style={styles.statLabel}>Gain / Loss</Text>
            <Text style={[styles.statValue, { color: '#16a34a' }]}>+$11,903.22</Text>
          </View>
          <View style={styles.statDivider} />
          <View style={styles.statItem}>
            <Text style={styles.statLabel}>Return</Text>
            <Text style={[styles.statValue, { color: '#16a34a' }]}>+19.2%</Text>
          </View>
        </View>
      </Animated.View>

      <View style={styles.fullDivider} />

      {/* Signal summary */}
      <Animated.View entering={FadeInDown.duration(400).delay(80)}>
        <Text style={styles.sectionTitle}>Signal Summary</Text>
      </Animated.View>

      {SIGNAL_ROWS.map((item, index) => (
        <Animated.View
          key={item.label}
          entering={FadeInDown.duration(350).delay(100 + index * 55)}
        >
          <SignalRow item={item} isLast={index === SIGNAL_ROWS.length - 1} />
        </Animated.View>
      ))}

      <View style={styles.fullDivider} />

      {/* Recent activity */}
      <Animated.View
        entering={FadeInDown.duration(400).delay(280)}
        style={styles.sectionHeaderRow}
      >
        <Text style={styles.sectionTitle}>Recent Activity</Text>
        <TouchableOpacity
          onPress={() => Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light)}
          activeOpacity={0.7}
        >
          <Text style={styles.seeAll}>See all</Text>
        </TouchableOpacity>
      </Animated.View>

      {INSIDER_TRANSACTIONS.slice(0, 3).map((tx, index) => (
        <Animated.View
          key={tx.id}
          entering={FadeInDown.duration(350).delay(320 + index * 60)}
        >
          <CompactTransactionRow tx={tx} />
        </Animated.View>
      ))}
    </View>
  );
}

// ─── Signal Row ───────────────────────────────────────────────────────────────

function SignalRow({ item, isLast }: { item: SignalRowItemData; isLast: boolean }) {
  return (
    <View style={[styles.signalRow, isLast && styles.signalRowLast]}>
      <View style={[styles.signalIconWrap, { backgroundColor: item.color + '14' }]}>
        <Feather name={item.icon as any} size={17} color={item.color} />
      </View>
      <View style={styles.signalRowMid}>
        <Text style={styles.signalRowLabel}>{item.label}</Text>
        <Text style={styles.signalRowSub}>{item.sub}</Text>
      </View>
      <Text style={[styles.signalRowValue, { color: item.color }]}>{item.value}</Text>
    </View>
  );
}

// ─── Compact Transaction Row ──────────────────────────────────────────────────

function CompactTransactionRow({ tx }: { tx: InsiderTransaction }) {
  return (
    <View style={styles.compactRow}>
      <Image source={{ uri: tx.avatarUri }} style={styles.avatar} />
      <View style={styles.compactMid}>
        <Text style={styles.compactName}>{tx.insiderName}</Text>
        <Text style={styles.compactMeta}>{tx.ticker} · {tx.date}</Text>
      </View>
      <View style={styles.compactRight}>
        <View
          style={[
            styles.actionBadge,
            tx.action === 'BUY' ? styles.buyBadge : styles.sellBadge,
          ]}
        >
          <Text
            style={[
              styles.actionText,
              tx.action === 'BUY' ? styles.buyText : styles.sellText,
            ]}
          >
            {tx.action}
          </Text>
        </View>
        <Text style={styles.compactValue}>{tx.totalValue}</Text>
      </View>
    </View>
  );
}

// ─── Insiders Tab ─────────────────────────────────────────────────────────────

interface InsidersTabProps {
  transactions: InsiderTransaction[];
  followedMap: Record<string, boolean>;
  onToggleFollow: (id: string) => void;
}

function InsidersTab({ transactions, followedMap, onToggleFollow }: InsidersTabProps) {
  return (
    <View>
      <Animated.View entering={FadeInDown.duration(400).delay(0)} style={styles.filterRow}>
        {['All', 'Buys', 'Sells', 'Following'].map((label, i) => (
          <FilterChip key={label} label={label} active={i === 0} />
        ))}
      </Animated.View>

      <View style={styles.fullDivider} />

      {transactions.map((tx, index) => (
        <Animated.View
          key={tx.id}
          entering={FadeInDown.duration(350).delay(index * 55)}
        >
          <TransactionRow
            tx={tx}
            followed={followedMap[tx.id]}
            onToggleFollow={() => onToggleFollow(tx.id)}
          />
        </Animated.View>
      ))}
    </View>
  );
}

function FilterChip({ label, active }: { label: string; active: boolean }) {
  return (
    <TouchableOpacity
      style={[styles.chip, active && styles.chipActive]}
      onPress={() => Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light)}
      activeOpacity={0.7}
    >
      <Text style={[styles.chipText, active && styles.chipTextActive]}>{label}</Text>
    </TouchableOpacity>
  );
}

interface TransactionRowProps {
  tx: InsiderTransaction;
  followed: boolean;
  onToggleFollow: () => void;
}

function TransactionRow({ tx, followed, onToggleFollow }: TransactionRowProps) {
  const scale = useSharedValue(1);
  const animStyle = useAnimatedStyle(() => ({
    transform: [{ scale: scale.value }],
  }));

  return (
    <Animated.View style={animStyle}>
      <Pressable
        style={styles.txRow}
        onPressIn={() => { scale.value = withTiming(0.985, { duration: 80 }); }}
        onPressOut={() => { scale.value = withSpring(1); }}
        onPress={() => Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light)}
      >
        <View
          style={[
            styles.avatarRing,
            tx.action === 'BUY' ? styles.avatarRingBuy : styles.avatarRingSell,
          ]}
        >
          <Image source={{ uri: tx.avatarUri }} style={styles.avatarLarge} />
        </View>

        <View style={styles.txMiddle}>
          <View style={styles.txNameRow}>
            <Text style={styles.txName}>{tx.insiderName}</Text>
            <View
              style={[
                styles.actionBadge,
                tx.action === 'BUY' ? styles.buyBadge : styles.sellBadge,
              ]}
            >
              <Text
                style={[
                  styles.actionText,
                  tx.action === 'BUY' ? styles.buyText : styles.sellText,
                ]}
              >
                {tx.action}
              </Text>
            </View>
          </View>
          <Text style={styles.txTitleLine}>{tx.insiderTitle} · {tx.company}</Text>
          <Text style={styles.txDetail}>{tx.shares} shares @ {tx.avgPrice}</Text>
          <Text style={styles.txFiled}>{tx.filedDate}</Text>
        </View>

        <View style={styles.txRight}>
          <Text style={styles.txValue}>{tx.totalValue}</Text>
          <Text
            style={[
              styles.txChange,
              tx.action === 'BUY' ? { color: '#16a34a' } : { color: '#dc2626' },
            ]}
          >
            {tx.changePercent}
          </Text>
          <TouchableOpacity
            style={[styles.followBtn, followed && styles.followBtnActive]}
            onPress={onToggleFollow}
            activeOpacity={0.7}
          >
            <Text style={[styles.followBtnText, followed && styles.followBtnTextActive]}>
              {followed ? 'Following' : 'Follow'}
            </Text>
          </TouchableOpacity>
        </View>
      </Pressable>
      <View style={styles.rowDivider} />
    </Animated.View>
  );
}

// ─── Holdings Tab ─────────────────────────────────────────────────────────────

function HoldingsTab({ holdings }: { holdings: HoldingItem[] }) {
  return (
    <View>
      {/* Flat inline summary strip */}
      <Animated.View entering={FadeInDown.duration(400).delay(0)} style={styles.holdingsSummaryStrip}>
        <View style={styles.holdingsSummaryItem}>
          <Text style={styles.holdingsSummaryValue}>$73,823.22</Text>
          <Text style={styles.holdingsSummaryLabel}>Market Value</Text>
        </View>
        <View style={styles.holdingsSummaryDivider} />
        <View style={styles.holdingsSummaryItem}>
          <Text style={[styles.holdingsSummaryValue, { color: '#16a34a' }]}>
            +$11,903.22
          </Text>
          <Text style={styles.holdingsSummaryLabel}>Total Gain</Text>
        </View>
        <View style={styles.holdingsSummaryDivider} />
        <View style={styles.holdingsSummaryItem}>
          <Text style={[styles.holdingsSummaryValue, { color: '#16a34a' }]}>+19.2%</Text>
          <Text style={styles.holdingsSummaryLabel}>Return</Text>
        </View>
      </Animated.View>

      <View style={styles.fullDivider} />

      <Animated.View
        entering={FadeInDown.duration(400).delay(60)}
        style={styles.sectionHeaderRow}
      >
        <Text style={styles.sectionTitle}>Positions</Text>
        <Text style={styles.sectionSub}>{holdings.length} holdings</Text>
      </Animated.View>

      {holdings.map((h, index) => (
        <Animated.View
          key={h.id}
          entering={FadeInDown.duration(350).delay(80 + index * 60)}
        >
          <HoldingRow holding={h} />
        </Animated.View>
      ))}
    </View>
  );
}

function HoldingRow({ holding }: { holding: HoldingItem }) {
  const scale = useSharedValue(1);
  const animStyle = useAnimatedStyle(() => ({
    transform: [{ scale: scale.value }],
  }));

  return (
    <Animated.View style={animStyle}>
      <Pressable
        style={styles.holdingRow}
        onPressIn={() => { scale.value = withTiming(0.985, { duration: 80 }); }}
        onPressOut={() => { scale.value = withSpring(1); }}
        onPress={() => Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light)}
      >
        <Image source={{ uri: holding.logoUri }} style={styles.holdingLogo} />

        <View style={styles.holdingMid}>
          <View style={styles.holdingTickerRow}>
            <Text style={styles.holdingTicker}>{holding.ticker}</Text>
            {holding.insiderBuys > 0 && (
              <View style={styles.insiderSignalBadge}>
                <Feather name="trending-up" size={10} color="#16a34a" />
                <Text style={styles.insiderSignalText}>{holding.insiderBuys}</Text>
              </View>
            )}
          </View>
          <Text style={styles.holdingCompany}>{holding.company}</Text>
          <Text style={styles.holdingMeta}>
            {holding.shares} shares · avg {holding.avgCost}
          </Text>
        </View>

        <View style={styles.holdingRight}>
          <Text style={styles.holdingValue}>{holding.totalValue}</Text>
          <Text
            style={[
              styles.holdingPct,
              { color: holding.isPositive ? '#16a34a' : '#dc2626' },
            ]}
          >
            {holding.gainLossPercent}
          </Text>
          <Text
            style={[
              styles.holdingAbs,
              { color: holding.isPositive ? '#16a34a' : '#dc2626' },
            ]}
          >
            {holding.gainLoss}
          </Text>
        </View>
      </Pressable>
      <View style={styles.rowDivider} />
    </Animated.View>
  );
}

// ─── Styles ───────────────────────────────────────────────────────────────────

const styles = StyleSheet.create({
  safeArea: {
    flex: 1,
    backgroundColor: '#ffffff',
  },

  // Header
  header: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingHorizontal: 20,
    paddingVertical: 12,
    backgroundColor: '#ffffff',
  },
  headerEyebrow: {
    fontSize: 11,
    fontWeight: '600',
    color: '#6366f1',
    letterSpacing: 1.4,
  },
  headerTitle: {
    fontSize: 24,
    fontWeight: '700',
    color: '#18181b',
    marginTop: 2,
    lineHeight: 29,
  },
  headerActions: {
    flexDirection: 'row',
  },
  iconBtn: {
    width: 44,
    height: 44,
    alignItems: 'center',
    justifyContent: 'center',
  },
  notifDot: {
    position: 'absolute',
    top: 10,
    right: 10,
    width: 7,
    height: 7,
    borderRadius: 4,
    backgroundColor: '#ef4444',
    borderWidth: 1.5,
    borderColor: '#ffffff',
  },

  // Tab bar
  tabBar: {
    flexDirection: 'row',
    borderBottomWidth: StyleSheet.hairlineWidth,
    borderBottomColor: '#e4e4e7',
    position: 'relative',
    backgroundColor: '#ffffff',
  },
  tabItem: {
    flex: 1,
    alignItems: 'center',
    paddingVertical: 12,
  },
  tabLabel: {
    fontSize: 14,
    fontWeight: '500',
    color: '#a1a1aa',
  },
  tabLabelActive: {
    color: '#18181b',
    fontWeight: '600',
  },
  tabIndicator: {
    position: 'absolute',
    bottom: 0,
    left: 0,
    width: SCREEN_WIDTH / 3,
    height: 2,
    backgroundColor: '#6366f1',
    borderRadius: 1,
  },

  scroll: { flex: 1, backgroundColor: '#ffffff' },

  // Hero — flat, no card
  heroSection: {
    paddingTop: 28,
    paddingHorizontal: 20,
    paddingBottom: 0,
    backgroundColor: '#ffffff',
  },
  heroTopRow: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    marginBottom: 8,
  },
  heroLabel: {
    fontSize: 13,
    fontWeight: '500',
    color: '#a1a1aa',
    letterSpacing: 0.2,
  },
  liveBadge: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 5,
    backgroundColor: '#fef2f2',
    paddingHorizontal: 9,
    paddingVertical: 4,
    borderRadius: 20,
  },
  liveDot: {
    width: 6,
    height: 6,
    borderRadius: 3,
    backgroundColor: '#ef4444',
  },
  liveBadgeText: {
    fontSize: 11,
    fontWeight: '700',
    color: '#ef4444',
    letterSpacing: 0.8,
  },
  portfolioValue: {
    fontSize: 38,
    fontWeight: '800',
    color: '#18181b',
    letterSpacing: -1,
    lineHeight: 46,
  },
  heroChangeRow: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 6,
    marginTop: 8,
  },
  heroChangeText: {
    fontSize: 13,
    fontWeight: '600',
    color: '#16a34a',
  },
  sparklineWrap: {
    marginTop: 20,
    marginLeft: -20,
  },
  statStrip: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingVertical: 20,
  },
  statItem: {
    flex: 1,
    alignItems: 'center',
  },
  statLabel: {
    fontSize: 11,
    fontWeight: '500',
    color: '#a1a1aa',
    marginBottom: 5,
    letterSpacing: 0.2,
  },
  statValue: {
    fontSize: 15,
    fontWeight: '700',
    color: '#18181b',
  },
  statDivider: {
    width: 1,
    height: 32,
    backgroundColor: '#e4e4e7',
  },

  // Dividers / section headers
  fullDivider: {
    height: StyleSheet.hairlineWidth,
    backgroundColor: '#e4e4e7',
  },
  sectionTitle: {
    fontSize: 11,
    fontWeight: '600',
    color: '#a1a1aa',
    paddingHorizontal: 20,
    paddingTop: 24,
    paddingBottom: 4,
    letterSpacing: 0.8,
    textTransform: 'uppercase',
  },
  sectionHeaderRow: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingHorizontal: 20,
    paddingTop: 24,
    paddingBottom: 4,
  },
  sectionSub: {
    fontSize: 13,
    color: '#a1a1aa',
  },
  seeAll: {
    fontSize: 13,
    fontWeight: '600',
    color: '#6366f1',
  },

  // Signal rows
  signalRow: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingHorizontal: 20,
    paddingVertical: 14,
    borderBottomWidth: StyleSheet.hairlineWidth,
    borderBottomColor: '#e4e4e7',
    backgroundColor: '#ffffff',
  },
  signalRowLast: {
    borderBottomWidth: 0,
  },
  signalIconWrap: {
    width: 36,
    height: 36,
    borderRadius: 10,
    alignItems: 'center',
    justifyContent: 'center',
    marginRight: 14,
  },
  signalRowMid: {
    flex: 1,
  },
  signalRowLabel: {
    fontSize: 15,
    fontWeight: '600',
    color: '#18181b',
    marginBottom: 2,
  },
  signalRowSub: {
    fontSize: 12,
    color: '#a1a1aa',
  },
  signalRowValue: {
    fontSize: 24,
    fontWeight: '800',
    letterSpacing: -0.5,
  },

  // Compact row
  compactRow: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingHorizontal: 20,
    paddingVertical: 12,
    borderBottomWidth: StyleSheet.hairlineWidth,
    borderBottomColor: '#e4e4e7',
    backgroundColor: '#ffffff',
  },
  avatar: {
    width: 42,
    height: 42,
    borderRadius: 21,
    marginRight: 12,
    backgroundColor: '#f4f4f5',
  },
  compactMid: { flex: 1 },
  compactName: {
    fontSize: 14,
    fontWeight: '600',
    color: '#18181b',
    marginBottom: 2,
  },
  compactMeta: {
    fontSize: 12,
    color: '#a1a1aa',
  },
  compactRight: {
    alignItems: 'flex-end',
    gap: 6,
  },
  compactValue: {
    fontSize: 14,
    fontWeight: '700',
    color: '#18181b',
  },

  // Action badges
  actionBadge: {
    paddingHorizontal: 8,
    paddingVertical: 3,
    borderRadius: 6,
  },
  buyBadge: { backgroundColor: '#f0fdf4' },
  sellBadge: { backgroundColor: '#fef2f2' },
  actionText: {
    fontSize: 11,
    fontWeight: '700',
    letterSpacing: 0.5,
  },
  buyText: { color: '#16a34a' },
  sellText: { color: '#dc2626' },

  // Filter chips
  filterRow: {
    flexDirection: 'row',
    paddingHorizontal: 20,
    paddingVertical: 16,
    gap: 8,
    backgroundColor: '#ffffff',
  },
  chip: {
    paddingHorizontal: 16,
    paddingVertical: 8,
    borderRadius: 20,
    backgroundColor: '#f4f4f5',
    borderWidth: 1,
    borderColor: '#e4e4e7',
  },
  chipActive: {
    backgroundColor: '#6366f1',
    borderColor: '#6366f1',
  },
  chipText: {
    fontSize: 13,
    fontWeight: '500',
    color: '#71717a',
  },
  chipTextActive: {
    color: '#ffffff',
    fontWeight: '600',
  },

  // Full transaction rows
  txRow: {
    flexDirection: 'row',
    paddingHorizontal: 20,
    paddingVertical: 14,
    alignItems: 'flex-start',
    backgroundColor: '#ffffff',
  },
  avatarRing: {
    width: 48,
    height: 48,
    borderRadius: 24,
    padding: 2,
    marginRight: 12,
    alignItems: 'center',
    justifyContent: 'center',
  },
  avatarRingBuy: {
    borderWidth: 2,
    borderColor: '#16a34a',
  },
  avatarRingSell: {
    borderWidth: 2,
    borderColor: '#dc2626',
  },
  avatarLarge: {
    width: 40,
    height: 40,
    borderRadius: 20,
    backgroundColor: '#f4f4f5',
  },
  txMiddle: {
    flex: 1,
    marginRight: 12,
  },
  txNameRow: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 8,
    marginBottom: 3,
  },
  txName: {
    fontSize: 15,
    fontWeight: '700',
    color: '#18181b',
  },
  txTitleLine: {
    fontSize: 12,
    color: '#71717a',
    marginBottom: 5,
  },
  txDetail: {
    fontSize: 12,
    color: '#71717a',
    fontWeight: '500',
    marginBottom: 3,
  },
  txFiled: {
    fontSize: 11,
    color: '#a1a1aa',
  },
  txRight: {
    alignItems: 'flex-end',
    gap: 4,
  },
  txValue: {
    fontSize: 15,
    fontWeight: '700',
    color: '#18181b',
  },
  txChange: {
    fontSize: 13,
    fontWeight: '600',
  },
  followBtn: {
    marginTop: 4,
    paddingHorizontal: 12,
    paddingVertical: 5,
    borderRadius: 8,
    borderWidth: 1,
    borderColor: '#e4e4e7',
    backgroundColor: '#f4f4f5',
  },
  followBtnActive: {
    backgroundColor: '#6366f1',
    borderColor: '#6366f1',
  },
  followBtnText: {
    fontSize: 12,
    fontWeight: '600',
    color: '#71717a',
  },
  followBtnTextActive: {
    color: '#ffffff',
  },
  rowDivider: {
    height: StyleSheet.hairlineWidth,
    backgroundColor: '#e4e4e7',
    marginLeft: 80,
  },

  // Holdings summary strip
  holdingsSummaryStrip: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingHorizontal: 20,
    paddingVertical: 24,
    backgroundColor: '#ffffff',
  },
  holdingsSummaryItem: {
    flex: 1,
    alignItems: 'center',
  },
  holdingsSummaryValue: {
    fontSize: 16,
    fontWeight: '800',
    color: '#18181b',
    marginBottom: 4,
  },
  holdingsSummaryLabel: {
    fontSize: 11,
    color: '#a1a1aa',
    fontWeight: '500',
  },
  holdingsSummaryDivider: {
    width: 1,
    height: 36,
    backgroundColor: '#e4e4e7',
  },

  // Holding rows
  holdingRow: {
    flexDirection: 'row',
    paddingHorizontal: 20,
    paddingVertical: 14,
    alignItems: 'center',
    backgroundColor: '#ffffff',
  },
  holdingLogo: {
    width: 42,
    height: 42,
    borderRadius: 12,
    backgroundColor: '#f4f4f5',
    marginRight: 14,
  },
  holdingMid: { flex: 1 },
  holdingTickerRow: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 6,
    marginBottom: 2,
  },
  holdingTicker: {
    fontSize: 15,
    fontWeight: '800',
    color: '#18181b',
  },
  insiderSignalBadge: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 3,
    backgroundColor: '#f0fdf4',
    paddingHorizontal: 6,
    paddingVertical: 2,
    borderRadius: 4,
  },
  insiderSignalText: {
    fontSize: 10,
    fontWeight: '700',
    color: '#16a34a',
  },
  holdingCompany: {
    fontSize: 13,
    fontWeight: '500',
    color: '#71717a',
    marginBottom: 2,
  },
  holdingMeta: {
    fontSize: 12,
    color: '#a1a1aa',
  },
  holdingRight: {
    alignItems: 'flex-end',
    gap: 2,
  },
  holdingValue: {
    fontSize: 15,
    fontWeight: '700',
    color: '#18181b',
  },
  holdingPct: {
    fontSize: 13,
    fontWeight: '600',
  },
  holdingAbs: {
    fontSize: 12,
    fontWeight: '500',
  },
});
Portfolio Tracker
