import React, { useState, useCallback } from 'react';
import { View, ScrollView, RefreshControl, StyleSheet } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { Colors, Spacing } from '@/constants/theme';
import StatusBanner from '@/components/dashboard/StatusBanner';
import PortfolioHeroCard from '@/components/dashboard/PortfolioHeroCard';
import WinRateStrip from '@/components/dashboard/WinRateStrip';
import MarketTicker from '@/components/dashboard/MarketTicker';
import ActiveAlerts from '@/components/dashboard/ActiveAlerts';
import QuickPositions from '@/components/dashboard/QuickPositions';
import AnimatedCard from '@/components/AnimatedCard';
import { useTradingData } from '@/providers/TradingDataProvider';

export default function DashboardScreen() {
  const insets = useSafeAreaInsets();
  const { refresh, loading } = useTradingData();
  const [refreshing, setRefreshing] = useState(false);

  const onRefresh = useCallback(() => {
    setRefreshing(true);
    void refresh().finally(() => setRefreshing(false));
  }, [refresh]);

  return (
    <View style={[styles.container, { paddingTop: insets.top }]}>
      <ScrollView
        style={styles.scroll}
        contentContainerStyle={styles.content}
        showsVerticalScrollIndicator={false}
        refreshControl={
          <RefreshControl
            refreshing={refreshing || loading}
            onRefresh={onRefresh}
            tintColor={Colors.accent.green}
            colors={[Colors.accent.green]}
          />
        }
      >
        <AnimatedCard index={0}>
          <StatusBanner />
        </AnimatedCard>

        <AnimatedCard index={1}>
          <PortfolioHeroCard />
        </AnimatedCard>

        <AnimatedCard index={2}>
          <WinRateStrip />
        </AnimatedCard>

        <AnimatedCard index={3}>
          <MarketTicker />
        </AnimatedCard>

        <AnimatedCard index={4}>
          <ActiveAlerts />
        </AnimatedCard>

        <AnimatedCard index={5}>
          <QuickPositions />
        </AnimatedCard>
      </ScrollView>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: Colors.background.primary,
  },
  scroll: {
    flex: 1,
  },
  content: {
    padding: Spacing.screenPadding,
    gap: Spacing.sectionGap,
    paddingBottom: 120,
  },
});