import React, { useState } from 'react';
import { Text, ScrollView, Pressable, StyleSheet } from 'react-native';
import { Colors, Fonts, FontSize, BorderRadius } from '@/constants/theme';
import { triggerHaptic } from '@/utils/haptics';
import { useTradingData } from '@/providers/TradingDataProvider';
import { buildWinRates } from '@/lib/tradingViewModels';

export default function WinRateStrip() {
  const [activeIndex, setActiveIndex] = useState(0);
  const { portfolio } = useTradingData();
  const winRates = buildWinRates(portfolio);

  return (
    <ScrollView
      horizontal
      showsHorizontalScrollIndicator={false}
      contentContainerStyle={styles.container}
    >
      {winRates.map((item, index) => {
        const isActive = index === activeIndex;
        return (
          <Pressable
            key={item.label}
            style={[styles.pill, isActive && styles.activePill]}
            onPress={() => {
              triggerHaptic('selection');
              setActiveIndex(index);
            }}
          >
            <Text style={[styles.text, isActive && styles.activeText]}>
              {item.label} {item.value}%
            </Text>
          </Pressable>
        );
      })}
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  container: {
    gap: 8,
  },
  pill: {
    paddingHorizontal: 14,
    paddingVertical: 7,
    borderRadius: BorderRadius.xs,
    borderWidth: 1,
    borderColor: Colors.border.medium,
    backgroundColor: 'rgba(255,255,255,0.03)',
  },
  activePill: {
    borderColor: 'rgba(0,255,136,0.45)',
    backgroundColor: 'rgba(0,255,136,0.08)',
  },
  text: {
    fontFamily: Fonts.mono.bold,
    fontSize: FontSize.badge,
    color: '#a1a1aa',
  },
  activeText: {
    color: Colors.accent.green,
  },
});