import React, { useState, useEffect, useMemo, useRef } from 'react';
import {
  View,
  Text,
  ScrollView,
  StyleSheet,
  StatusBar,
  TouchableOpacity,
  StyleProp,
  ViewStyle,
  TextStyle,
  Animated,
} from 'react-native';
import Reanimated, {
  useSharedValue,
  useAnimatedStyle,
  withSpring,
} from 'react-native-reanimated';
import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';
import Svg, { Path, G } from 'react-native-svg';

// ─── Inline SVG Logos ─────────────────────────────────────────────────────────

function AppleLogo({ size = 24 }: { size?: number }) {
  return (
    <Svg width={size} height={size} viewBox="0 0 814 1000">
      <Path
        fill="#ffffff"
        d="M788.1 340.9c-5.8 4.5-108.2 62.2-108.2 190.5 0 148.4 130.3 200.9 134.2 202.2-.6 3.2-20.7 71.9-68.7 141.9-42.8 61.6-87.5 123.1-155.5 123.1s-85.5-39.5-164-39.5c-76 0-103.7 40.8-165.9 40.8s-105-57.8-155.5-127.4C46 790.7 0 663 0 541.8c0-207.5 135.4-317.3 269-317.3 70.6 0 129.5 46.4 173.3 46.4 42.7 0 109.4-49 192.5-49 31 0 108.2 2.6 168.7 80.1zm-234-181.5c31.1-36.9 53.1-88.1 53.1-139.3 0-7.1-.6-14.3-1.9-20.1-50.6 1.9-110.8 33.7-147.1 75.8-28.5 32.4-55.1 83.6-55.1 135.5 0 7.8 1.3 15.6 1.9 18.1 3.2.6 8.4 1.3 13.6 1.3 45.4 0 102.5-30.4 135.5-71.3z"
      />
    </Svg>
  );
}

function TeslaLogo({ size = 28 }: { size?: number }) {
  return (
    <Svg width={size} height={size * 0.8} viewBox="0 0 342 84">
      <Path
        fill="#CC0000"
        d="M0 6.5C22.8 1.5 52.3 0 85 0h172c32.7 0 62.2 1.5 85 6.5v20.2c-17-4.4-38.6-6.7-62-6.7H62C38.6 20 17 22.3 0 26.7V6.5zM148 84V34h46v50h-46zM62 20h218l-20 14H82L62 20zM171 34l-23-14h46l-23 14z"
      />
    </Svg>
  );
}

function NvidiaLogo({ size = 28 }: { size?: number }) {
  return (
    <Svg width={size} height={size} viewBox="0 0 120 90">
      <Path
        fill="#76B900"
        d="M44.5 32.2V20.4C45.8 20.3 47 20.2 48.3 20.2c16.3-.4 27 13.8 27 13.8S63.6 49.7 50.7 49.7c-2.2 0-4.3-.4-6.2-1.1V34.4c3.2.4 5.4 1.9 6.7 5.5l7.9-6.7s-4.5-6.1-14.6-5zM44.5 14.9V8l1.4-.1c22.3-.7 36.9 19.4 36.9 19.4S66.4 50.5 50.3 50.5c-2 0-3.9-.2-5.8-.6V44c1.8.3 3.7.4 5.6.4 10.1 0 17.4-5.1 24.5-14-5.8-6.4-14.5-11-30.1-10.5zM44.5 60.8V57l1.7.1c26.6.8 44-22.3 44-22.3S71.5 7.4 46.2 6.6l-1.7.1V2.8l1.4-.1C74.5 1.8 96 28 96 28S74.6 59.7 46.2 62l-1.7-.1zM10 28s9.2-12.2 26.7-13.8V8.2C17.5 9.9 2 28 2 28s11 19.9 35.1 21.9V44c-17.3-2-27.1-16-27.1-16z"
      />
    </Svg>
  );
}

function AmazonLogo({ size = 28 }: { size?: number }) {
  return (
    <Svg width={size} height={size * 0.6} viewBox="0 0 603 182">
      <Path
        fill="#FF9900"
        d="M336.8 124.7c-32 23.6-78.4 36.2-118.4 36.2-56 0-106.4-20.7-144.5-55.1-3-2.7-.3-6.3 3.3-4.2 41.2 23.9 92 38.3 144.5 38.3 35.4 0 74.4-7.3 110.2-22.6 5.4-2.3 9.9 3.5 4.9 7.4z"
      />
      <Path
        fill="#FF9900"
        d="M350 109c-4-5.2-26.8-2.5-37-1.2-3.1.4-3.6-2.3-.8-4.3 18.1-12.7 47.8-9 51.3-4.8 3.5 4.3-1 34-17.9 48.1-2.6 2.2-5.1 1-3.9-1.8C346 136.2 354 114.1 350 109z"
      />
      <Path
        fill="#ffffff"
        d="M314.5 17.6l-1.2-5.8C312.1 6.6 308.1 4 303 4h-43.8c-5.6 0-9.9 4.3-9.9 9.9v109.4c0 5.6 4.4 9.9 9.9 9.9h11.8c5.6 0 9.9-4.3 9.9-9.9V79.5h21.4c21.1 0 33.3-10.3 36.9-30.7l2.4-13.4c.5-2.7.7-5.3.7-7.8 0-4.5-.6-7.4-1.8-10zM301.4 47c-1.7 9.3-7.2 13.9-16.7 13.9h-17.8V19.8H284c10.2 0 15.7 4.7 16.8 14.1.3 2.6.4 5.2.1 7.8l.5 5.3zM107.1 4H95c-5.3 0-9.5 4.1-9.9 9.3L72.3 83.9 59.5 13.3C58.9 8.1 54.7 4 49.5 4H11.6C5.8 4 1.4 8.7 2 14.5l26.6 108.8c1 4.7 5.2 8 10 8h14.9c4.8 0 9-3.3 10-8l15.6-67.2 15.6 67.2c1 4.7 5.2 8 10 8h14.9c4.8 0 9-3.3 10-8L136.4 14.5C137 8.7 132.6 4 126.9 4h-19.8zM213.3 4h-68.8c-5.6 0-9.9 4.3-9.9 9.9V123.3c0 5.6 4.3 9.9 9.9 9.9h68.8c5.6 0 9.9-4.3 9.9-9.9v-9.9c0-5.6-4.3-9.9-9.9-9.9h-47.2V79.9h43.3c5.6 0 9.9-4.3 9.9-9.9V60c0-5.6-4.3-9.9-9.9-9.9h-43.3V33.8h47.2c5.6 0 9.9-4.3 9.9-9.9V13.9c0-5.6-4.3-9.9-9.9-9.9zM409.7 4h-13.2c-5.6 0-9.9 4.3-9.9 9.9v67.9L342.8 9.4C340.6 6.2 337 4 332.9 4h-14.4c-5.6 0-9.9 4.3-9.9 9.9v109.4c0 5.6 4.3 9.9 9.9 9.9H332c5.6 0 9.9-4.3 9.9-9.9V55.6l44.5 72.5c2.3 3.3 5.9 5.1 9.8 5.1h13.5c5.6 0 9.9-4.3 9.9-9.9V13.9c0-5.6-4.3-9.9-9.9-9.9zM507.8 4h-11.5c-4.7 0-8.8 3.2-10 7.7L453.8 123.5c-1.5 5.4 2.7 10.7 8.3 10.7h11.3c4.8 0 9-3.3 10-8.1l6-26.8H527l6.1 26.9c1 4.7 5.2 8 10 8h11.3c5.6 0 9.8-5.3 8.3-10.7L519.8 11.7c-1.2-4.5-5.3-7.7-10-7.7zm-15.1 75.8l12.7-56.6 12.7 56.6h-25.4z"
      />
    </Svg>
  );
}

// ─── Company Logo Container ───────────────────────────────────────────────────

type LogoEntry = {
  bg: string;
  borderColor: string;
  component: (props: { size: number }) => React.JSX.Element;
};

const LOGO_MAP: Record<string, LogoEntry> = {
  AAPL: {
    bg: '#1c1c1e',
    borderColor: 'rgba(255,255,255,0.12)',
    component: ({ size }) => <AppleLogo size={size} />,
  },
  TSLA: {
    bg: '#1a0000',
    borderColor: 'rgba(204,0,0,0.3)',
    component: ({ size }) => <TeslaLogo size={size} />,
  },
  NVDA: {
    bg: '#0d1a00',
    borderColor: 'rgba(118,185,0,0.3)',
    component: ({ size }) => <NvidiaLogo size={size} />,
  },
  AMZN: {
    bg: '#12100a',
    borderColor: 'rgba(255,153,0,0.3)',
    component: ({ size }) => <AmazonLogo size={size} />,
  },
};

function CompanyLogo({ ticker }: { ticker: string }) {
  const entry = LOGO_MAP[ticker];
  if (!entry) {
    return (
      <View style={[logoStyles.badge, { backgroundColor: '#222', borderColor: 'rgba(255,255,255,0.08)' }]}>
        <Text style={logoStyles.fallback}>{ticker[0]}</Text>
      </View>
    );
  }
  const LogoComponent = entry.component;
  return (
    <View style={[logoStyles.badge, { backgroundColor: entry.bg, borderColor: entry.borderColor }]}>
      <LogoComponent size={22} />
    </View>
  );
}

const logoStyles = StyleSheet.create({
  badge: {
    width: 46,
    height: 46,
    borderRadius: 14,
    alignItems: 'center',
    justifyContent: 'center',
    borderWidth: 1,
    overflow: 'hidden',
  },
  fallback: {
    fontSize: 17,
    fontWeight: '800',
    color: '#fff',
  },
});

// ─── Skeleton ─────────────────────────────────────────────────────────────────

function usePulse() {
  const opacity = useRef(new Animated.Value(0.4)).current;
  useEffect(() => {
    const loop = Animated.loop(
      Animated.sequence([
        Animated.timing(opacity, { toValue: 1, duration: 800, useNativeDriver: true }),
        Animated.timing(opacity, { toValue: 0.4, duration: 800, useNativeDriver: true }),
      ])
    );
    loop.start();
    return () => loop.stop();
  }, [opacity]);
  return opacity;
}

function SkeletonBox({
  width,
  height,
  borderRadius = 8,
  style,
}: {
  width: number | string;
  height: number;
  borderRadius?: number;
  style?: StyleProp<ViewStyle>;
}) {
  const opacity = usePulse();
  return (
    <Animated.View
      style={[
        skeletonStyles.box,
        { width: width as number, height, borderRadius, opacity },
        style,
      ]}
    />
  );
}

const skeletonStyles = StyleSheet.create({
  box: { backgroundColor: 'rgba(255,255,255,0.10)' },
});

function SkeletonTile() {
  return (
    <View style={skeletonTileStyles.tile}>
      <SkeletonBox width={70} height={9} borderRadius={5} />
      <SkeletonBox width={90} height={16} borderRadius={7} style={{ marginTop: 8 }} />
      <SkeletonBox width={55} height={10} borderRadius={5} style={{ marginTop: 6 }} />
    </View>
  );
}

const skeletonTileStyles = StyleSheet.create({
  tile: {
    flex: 1,
    backgroundColor: 'rgba(255,255,255,0.04)',
    borderRadius: 16,
    padding: 14,
    borderWidth: 1,
    borderColor: 'rgba(255,255,255,0.06)',
  },
});

function SkeletonHoldingRow() {
  return (
    <View style={styles.holdingRow}>
      <SkeletonBox width={46} height={46} borderRadius={14} />
      <View style={{ flex: 1, gap: 8 }}>
        <SkeletonBox width={50} height={13} borderRadius={6} />
        <SkeletonBox width={110} height={10} borderRadius={5} />
      </View>
      <View style={{ alignItems: 'flex-end', gap: 8 }}>
        <SkeletonBox width={70} height={13} borderRadius={6} />
        <SkeletonBox width={48} height={20} borderRadius={6} />
      </View>
    </View>
  );
}

function SkeletonScreen() {
  return (
    <ScrollView
      showsVerticalScrollIndicator={false}
      contentContainerStyle={styles.scrollContent}
      scrollEnabled={false}
    >
      <View style={styles.header}>
        <View style={{ gap: 8 }}>
          <SkeletonBox width={130} height={12} borderRadius={6} />
          <SkeletonBox width={100} height={22} borderRadius={8} />
        </View>
        <SkeletonBox width={38} height={38} borderRadius={19} />
      </View>

      <View style={[styles.heroSection, { gap: 10 }]}>
        <SkeletonBox width={140} height={11} borderRadius={6} />
        <SkeletonBox width={220} height={52} borderRadius={12} />
        <SkeletonBox width={180} height={28} borderRadius={8} />
        <View style={[styles.sparkline, { marginTop: 16 }]}>
          {[44, 52, 36, 60, 48, 56, 40].map((h, i) => (
            <View key={i} style={styles.sparkBarWrapper}>
              <SkeletonBox width="100%" height={h} borderRadius={4} />
            </View>
          ))}
        </View>
        <View style={[styles.rangeRow, { marginTop: 8 }]}>
          {[0, 1, 2, 3, 4, 5].map((i) => (
            <View key={i} style={{ flex: 1, alignItems: 'center' }}>
              <SkeletonBox width={24} height={10} borderRadius={5} />
            </View>
          ))}
        </View>
      </View>

      <View style={styles.tilesSection}>
        <View style={styles.tilesRow}>
          <SkeletonTile /><View style={styles.tileGap} /><SkeletonTile />
        </View>
        <View style={[styles.tilesRow, { marginTop: 10 }]}>
          <SkeletonTile /><View style={styles.tileGap} /><SkeletonTile />
        </View>
      </View>

      <View style={styles.holdingsSection}>
        <View style={styles.holdingsHeader}>
          <SkeletonBox width={80} height={16} borderRadius={7} />
          <SkeletonBox width={70} height={11} borderRadius={5} />
        </View>
        {[0, 1, 2, 3].map((i) => <SkeletonHoldingRow key={i} />)}
      </View>
    </ScrollView>
  );
}

// ─── Rolling Counter ──────────────────────────────────────────────────────────

type RollingCounterSpeed = 'slow' | 'normal' | 'fast';

interface RollingCounterProps {
  value: number;
  prefix?: string;
  suffix?: string;
  formatWithCommas?: boolean;
  fontSize?: number;
  color?: string;
  fontWeight?: TextStyle['fontWeight'];
  animateOnMount?: boolean;
  speed?: RollingCounterSpeed;
  style?: StyleProp<ViewStyle>;
}

const SPRING_PRESETS: Record<RollingCounterSpeed, object> = {
  slow:   { damping: 26, stiffness: 200, mass: 1.2 },
  normal: { damping: 18, stiffness: 300, mass: 0.9 },
  fast:   { damping: 12, stiffness: 450, mass: 0.6 },
};

const DIGITS = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];

function formatNumber(n: number, withCommas: boolean): string {
  const str = Math.abs(Math.round(n)).toString();
  if (!withCommas) return str;
  return str.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
}

interface SingleDigitProps {
  char: string;
  fontSize: number;
  color: string;
  fontWeight: TextStyle['fontWeight'];
  animateOnMount: boolean;
  springConfig: object;
}

function SingleDigit({ char, fontSize, color, fontWeight, animateOnMount, springConfig }: SingleDigitProps) {
  const cellH = fontSize * 1.35;
  const isNumeric = /\d/.test(char);
  const targetIndex = isNumeric ? parseInt(char, 10) : 0;

  const translateY = useSharedValue(
    isNumeric && animateOnMount ? 0 : -targetIndex * cellH,
  );

  useEffect(() => {
    if (isNumeric) {
      translateY.value = withSpring(-targetIndex * cellH, springConfig);
    }
  }, [targetIndex, cellH]);

  const animatedStyle = useAnimatedStyle(() => ({
    transform: [{ translateY: translateY.value }],
  }));

  if (!isNumeric) {
    return (
      <Text style={[rcStyles.staticChar, { fontSize, color, fontWeight, lineHeight: cellH }]}>
        {char}
      </Text>
    );
  }

  return (
    <View style={{ height: cellH, overflow: 'hidden', width: fontSize * 0.65 }}>
      <Reanimated.View style={animatedStyle}>
        {DIGITS.map((d) => (
          <Text
            key={d}
            style={[rcStyles.digitCell, { fontSize, color, fontWeight, height: cellH, lineHeight: cellH }]}
          >
            {d}
          </Text>
        ))}
      </Reanimated.View>
    </View>
  );
}

function RollingCounter({
  value,
  prefix,
  suffix,
  formatWithCommas = true,
  fontSize = 32,
  color = '#18181b',
  fontWeight = '700',
  animateOnMount = false,
  speed = 'normal',
  style,
}: RollingCounterProps) {
  const isNegative = value < 0;
  const springConfig = SPRING_PRESETS[speed];
  const formatted = useMemo(() => formatNumber(value, formatWithCommas), [value, formatWithCommas]);
  const labelStyle: TextStyle = { fontSize, color, fontWeight, lineHeight: fontSize * 1.35 };
  const chars = formatted.split('');
  const len = chars.length;

  return (
    <View style={[rcStyles.row, style]}>
      {prefix ? <Text style={labelStyle}>{prefix}</Text> : null}
      {isNegative ? <Text style={labelStyle}>−</Text> : null}
      {chars.map((char, i) => {
        const posFromRight = len - 1 - i;
        const isSep = char === ',' || char === '.';
        return (
          <SingleDigit
            key={`${posFromRight}-${isSep ? 'sep' : 'dig'}`}
            char={char}
            fontSize={fontSize}
            color={color}
            fontWeight={fontWeight}
            animateOnMount={animateOnMount}
            springConfig={springConfig}
          />
        );
      })}
      {suffix ? <Text style={labelStyle}>{suffix}</Text> : null}
    </View>
  );
}

const rcStyles = StyleSheet.create({
  row: { flexDirection: 'row', alignItems: 'flex-end' },
  digitCell: { textAlign: 'center', fontVariant: ['tabular-nums'] },
  staticChar: { textAlign: 'center' },
});

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

const HOLDINGS = [
  { ticker: 'AAPL', name: 'Apple Inc.', shares: 8,  prices: [182.50, 183.20, 182.80, 184.10, 183.60, 184.90, 183.40], change: '+1.8%', up: true  },
  { ticker: 'TSLA', name: 'Tesla',      shares: 3,  prices: [248.20, 246.80, 249.50, 247.30, 250.10, 248.70, 251.30], change: '+1.2%', up: true  },
  { ticker: 'NVDA', name: 'NVIDIA',     shares: 2,  prices: [875.40, 871.20, 878.60, 873.90, 880.20, 876.50, 882.10], change: '+0.8%', up: true  },
  { ticker: 'AMZN', name: 'Amazon',     shares: 5,  prices: [189.30, 188.10, 190.60, 187.80, 191.20, 189.70, 188.50], change: '−0.4%', up: false },
];

const PORTFOLIO_TICKS = [48240, 48610, 47930, 49180, 50402, 49750, 51320];
const BASELINE = 46920;
const TIME_RANGES = ['1D', '1W', '1M', '3M', '1Y', 'ALL'];
const STAT_TILES = [
  { label: 'Day Return',   value: '+$1,482',  sub: '+2.96%',    up: true  },
  { label: 'Total Return', value: '+$12,840', sub: '+27.37%',   up: true  },
  { label: 'Buying Power', value: '$2,480',   sub: 'Available', up: null  },
  { label: 'Dividends',    value: '$348',     sub: 'This year', up: null  },
];

// ─── Stat Tile ────────────────────────────────────────────────────────────────

function StatTile({ label, value, sub, up }: { label: string; value: string; sub: string; up: boolean | null }) {
  const valueColor = up === true ? '#4ade80' : up === false ? '#f87171' : '#fff';
  return (
    <View style={tileStyles.tile}>
      <Text style={tileStyles.tileLabel}>{label}</Text>
      <Text style={[tileStyles.tileValue, { color: valueColor }]}>{value}</Text>
      <View style={tileStyles.tileSubRow}>
        {up !== null && (
          <View style={[tileStyles.tilePip, { backgroundColor: up ? 'rgba(74,222,128,0.15)' : 'rgba(248,113,113,0.15)' }]}>
            <Text style={[tileStyles.tilePipText, { color: up ? '#4ade80' : '#f87171' }]}>
              {up ? '▲' : '▼'}
            </Text>
          </View>
        )}
        <Text style={tileStyles.tileSub}>{sub}</Text>
      </View>
    </View>
  );
}

const tileStyles = StyleSheet.create({
  tile: {
    flex: 1,
    backgroundColor: 'rgba(255,255,255,0.05)',
    borderRadius: 16,
    padding: 14,
    gap: 4,
    borderWidth: 1,
    borderColor: 'rgba(255,255,255,0.07)',
  },
  tileLabel: {
    fontSize: 10,
    color: 'rgba(255,255,255,0.4)',
    fontWeight: '600',
    textTransform: 'uppercase',
    letterSpacing: 0.6,
    marginBottom: 2,
  },
  tileValue:   { fontSize: 16, fontWeight: '700', letterSpacing: -0.3 },
  tileSubRow:  { flexDirection: 'row', alignItems: 'center', gap: 5, marginTop: 2 },
  tilePip:     { borderRadius: 4, paddingHorizontal: 4, paddingVertical: 1 },
  tilePipText: { fontSize: 8, fontWeight: '700' },
  tileSub:     { fontSize: 11, color: 'rgba(255,255,255,0.35)', fontWeight: '500' },
});

// ─── Screen ───────────────────────────────────────────────────────────────────

function PortfolioScreenContent() {
  const [isLoading,     setIsLoading]     = useState(true);
  const [portfolioTick, setPortfolioTick] = useState(0);
  const [holdingTicks,  setHoldingTicks]  = useState(HOLDINGS.map(() => 0));
  const [activeRange,   setActiveRange]   = useState('1W');
  const contentOpacity = useRef(new Animated.Value(0)).current;

  useEffect(() => {
    const t = setTimeout(() => {
      setIsLoading(false);
      Animated.timing(contentOpacity, { toValue: 1, duration: 500, useNativeDriver: true }).start();
    }, 2200);
    return () => clearTimeout(t);
  }, [contentOpacity]);

  useEffect(() => {
    if (isLoading) return;
    const id = setInterval(() => setPortfolioTick((i) => (i + 1) % PORTFOLIO_TICKS.length), 2000);
    return () => clearInterval(id);
  }, [isLoading]);

  useEffect(() => {
    if (isLoading) return;
    const ids = HOLDINGS.map((h, idx) =>
      setInterval(() => {
        setHoldingTicks((prev) => {
          const next = [...prev];
          next[idx] = (next[idx] + 1) % h.prices.length;
          return next;
        });
      }, 1800 + idx * 600)
    );
    return () => ids.forEach(clearInterval);
  }, [isLoading]);

  const portfolioValue = PORTFOLIO_TICKS[portfolioTick];
  const gain    = portfolioValue - BASELINE;
  const gainPct = ((gain / BASELINE) * 100).toFixed(2);
  const isUp    = gain >= 0;

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

      {isLoading ? (
        <SkeletonScreen />
      ) : (
        <Animated.View style={{ flex: 1, opacity: contentOpacity }}>
          <ScrollView showsVerticalScrollIndicator={false} contentContainerStyle={styles.scrollContent}>

            {/* Header */}
            <View style={styles.header}>
              <View>
                <Text style={styles.greeting}>Good morning, Sarah 👋</Text>
                <Text style={styles.portfolioLabel}>My Portfolio</Text>
              </View>
              <View style={styles.avatarCircle}>
                <Text style={styles.avatarText}>S</Text>
              </View>
            </View>

            {/* Hero */}
            <View style={styles.heroSection}>
              <Text style={styles.heroSubLabel}>Total Portfolio Value</Text>
              <RollingCounter
                value={portfolioValue}
                prefix="$"
                formatWithCommas
                fontSize={46}
                color="#fff"
                fontWeight="700"
                animateOnMount
                speed="slow"
              />
              <View style={styles.gainRow}>
                <View style={[styles.gainBadge, { backgroundColor: isUp ? 'rgba(74,222,128,0.15)' : 'rgba(248,113,113,0.15)' }]}>
                  <Text style={[styles.gainBadgeText, { color: isUp ? '#4ade80' : '#f87171' }]}>
                    {isUp ? '▲' : '▼'} {isUp ? '+' : ''}${Math.abs(gain).toLocaleString()}  ({isUp ? '+' : ''}{gainPct}%)
                  </Text>
                </View>
                <Text style={styles.gainPeriod}>vs. last close</Text>
              </View>

              <View style={styles.sparkline}>
                {PORTFOLIO_TICKS.map((v, i) => (
                  <View key={i} style={styles.sparkBarWrapper}>
                    <View
                      style={[
                        styles.sparkBar,
                        {
                          height: 6 + ((v - 47000) / 4500) * 38,
                          backgroundColor:
                            i === portfolioTick ? '#4ade80'
                            : i < portfolioTick  ? 'rgba(74,222,128,0.4)'
                            : 'rgba(255,255,255,0.1)',
                        },
                      ]}
                    />
                    {i === portfolioTick && <View style={styles.sparkDot} />}
                  </View>
                ))}
              </View>

              <View style={styles.rangeRow}>
                {TIME_RANGES.map((r) => (
                  <TouchableOpacity
                    key={r}
                    onPress={() => setActiveRange(r)}
                    style={[styles.rangeBtn, activeRange === r && styles.rangeBtnActive]}
                  >
                    <Text style={[styles.rangeBtnText, activeRange === r && styles.rangeBtnTextActive]}>
                      {r}
                    </Text>
                  </TouchableOpacity>
                ))}
              </View>
            </View>

            {/* Stat tiles */}
            <View style={styles.tilesSection}>
              <View style={styles.tilesRow}>
                <StatTile {...STAT_TILES[0]} /><View style={styles.tileGap} /><StatTile {...STAT_TILES[1]} />
              </View>
              <View style={[styles.tilesRow, { marginTop: 10 }]}>
                <StatTile {...STAT_TILES[2]} /><View style={styles.tileGap} /><StatTile {...STAT_TILES[3]} />
              </View>
            </View>

            {/* Holdings */}
            <View style={styles.holdingsSection}>
              <View style={styles.holdingsHeader}>
                <Text style={styles.holdingsLabel}>Holdings</Text>
                <Text style={styles.holdingsCount}>{HOLDINGS.length} positions</Text>
              </View>

              {HOLDINGS.map((h, idx) => {
                const totalValue = h.prices[holdingTicks[idx]] * h.shares;
                return (
                  <View key={h.ticker} style={styles.holdingRow}>
                    <CompanyLogo ticker={h.ticker} />
                    <View style={styles.holdingInfo}>
                      <Text style={styles.holdingTicker}>{h.ticker}</Text>
                      <Text style={styles.holdingMeta}>{h.name} · {h.shares} shares</Text>
                    </View>
                    <View style={styles.holdingRight}>
                      <RollingCounter
                        value={totalValue}
                        prefix="$"
                        formatWithCommas
                        fontSize={15}
                        color="#fff"
                        fontWeight="600"
                        speed="fast"
                      />
                      <View style={[
                        styles.changeChip,
                        { backgroundColor: h.up ? 'rgba(74,222,128,0.12)' : 'rgba(248,113,113,0.12)' },
                      ]}>
                        <Text style={[styles.changeText, { color: h.up ? '#4ade80' : '#f87171' }]}>
                          {h.change}
                        </Text>
                      </View>
                    </View>
                  </View>
                );
              })}
            </View>

          </ScrollView>
        </Animated.View>
      )}
    </SafeAreaView>
  );
}

export default function PortfolioScreen() {
  return (
    <SafeAreaProvider>
      <PortfolioScreenContent />
    </SafeAreaProvider>
  );
}

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

const styles = StyleSheet.create({
  screen:        { flex: 1, backgroundColor: '#0a0a0f' },
  scrollContent: { paddingBottom: 40 },

  header: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingHorizontal: 20,
    paddingTop: 16,
    paddingBottom: 6,
  },
  greeting:       { fontSize: 13, color: 'rgba(255,255,255,0.4)', fontWeight: '500' },
  portfolioLabel: { fontSize: 22, fontWeight: '700', color: '#fff', marginTop: 2 },
  avatarCircle: {
    width: 38, height: 38, borderRadius: 19,
    backgroundColor: '#6366f1', alignItems: 'center', justifyContent: 'center',
  },
  avatarText: { fontSize: 15, fontWeight: '700', color: '#fff' },

  heroSection:  { paddingHorizontal: 20, paddingTop: 16, paddingBottom: 8, gap: 6 },
  heroSubLabel: { fontSize: 12, color: 'rgba(255,255,255,0.35)', fontWeight: '500', marginBottom: 2 },

  gainRow:      { flexDirection: 'row', alignItems: 'center', gap: 10, marginTop: 4, marginBottom: 2 },
  gainBadge:    { borderRadius: 8, paddingHorizontal: 10, paddingVertical: 5 },
  gainBadgeText:{ fontSize: 13, fontWeight: '700', letterSpacing: 0.1 },
  gainPeriod:   { fontSize: 12, color: 'rgba(255,255,255,0.3)', fontWeight: '500' },

  sparkline: {
    flexDirection: 'row', alignItems: 'flex-end',
    gap: 4, height: 56, marginTop: 16, marginBottom: 4,
  },
  sparkBarWrapper: { flex: 1, alignItems: 'center', justifyContent: 'flex-end' },
  sparkBar:        { width: '100%', borderRadius: 4 },
  sparkDot: {
    position: 'absolute', top: -4,
    width: 7, height: 7, borderRadius: 4,
    backgroundColor: '#4ade80', borderWidth: 1.5, borderColor: '#0a0a0f',
  },

  rangeRow: {
    flexDirection: 'row', gap: 4, marginTop: 8,
    backgroundColor: 'rgba(255,255,255,0.05)', borderRadius: 12, padding: 4,
  },
  rangeBtn:           { flex: 1, paddingVertical: 7, borderRadius: 9, alignItems: 'center' },
  rangeBtnActive:     { backgroundColor: 'rgba(255,255,255,0.12)' },
  rangeBtnText:       { fontSize: 12, fontWeight: '600', color: 'rgba(255,255,255,0.35)' },
  rangeBtnTextActive: { color: '#fff' },

  tilesSection: { paddingHorizontal: 20, marginTop: 20, marginBottom: 4 },
  tilesRow:     { flexDirection: 'row' },
  tileGap:      { width: 10 },

  holdingsSection: { paddingHorizontal: 20, paddingTop: 12, paddingBottom: 8, marginTop: 16 },
  holdingsHeader: {
    flexDirection: 'row', alignItems: 'center',
    justifyContent: 'space-between', marginBottom: 4,
  },
  holdingsLabel: { fontSize: 17, fontWeight: '700', color: '#fff', paddingVertical: 8 },
  holdingsCount: { fontSize: 12, color: 'rgba(255,255,255,0.3)', fontWeight: '500' },

  holdingRow: {
    flexDirection: 'row', alignItems: 'center',
    paddingVertical: 14, gap: 12,
    borderTopWidth: 1, borderTopColor: 'rgba(255,255,255,0.05)',
  },
  holdingInfo:   { flex: 1 },
  holdingTicker: { fontSize: 15, fontWeight: '700', color: '#fff' },
  holdingMeta:   { fontSize: 12, color: 'rgba(255,255,255,0.35)', marginTop: 2 },
  holdingRight:  { alignItems: 'flex-end', gap: 5 },
  changeChip:    { borderRadius: 6, paddingHorizontal: 7, paddingVertical: 3 },
  changeText:    { fontSize: 12, fontWeight: '700' },
});
Investment Portfolio
