import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { Colors, Fonts, FontSize, BorderRadius } from '@/constants/theme';
import PulsingDot from '@/components/PulsingDot';
import { useTradingData } from '@/providers/TradingDataProvider';

export default function StatusBanner() {
  const { botState, connected } = useTradingData();
  const controlMode = botState?.health?.tradingControl?.mode ?? 'RUNNING';
  const executionMode = botState?.settings.executionMode || 'Paper';
  const uptimeSeconds = botState?.uptime || 0;
  const uptimeHours = Math.floor(uptimeSeconds / 3600);
  const uptimeMinutes = Math.floor((uptimeSeconds % 3600) / 60);
  const isPaused = controlMode === 'PAUSED';

  return (
    <View style={styles.container}>
      <View style={[styles.badge, isPaused && styles.pausedBadge]}>
        {!isPaused ? <PulsingDot size={6} /> : null}
        <Text style={[styles.runningText, isPaused && styles.pausedText]}>
          {connected ? controlMode : 'OFFLINE'}
        </Text>
      </View>
      <View style={[styles.badge, styles.paperBadge]}>
        <Text style={styles.paperText}>{executionMode.toUpperCase()}</Text>
      </View>
      <Text style={styles.uptime}>{uptimeHours}h {uptimeMinutes}m</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: Colors.background.card,
    borderRadius: BorderRadius.small,
    padding: 12,
    paddingHorizontal: 16,
    gap: 10,
    borderWidth: 1,
    borderColor: Colors.border.default,
  },
  badge: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 6,
    backgroundColor: 'rgba(0,255,136,0.15)',
    paddingHorizontal: 10,
    paddingVertical: 5,
    borderRadius: 6,
  },
  runningText: {
    fontFamily: Fonts.inter.black,
    fontSize: FontSize.micro,
    color: Colors.accent.green,
    letterSpacing: 1,
  },
  paperBadge: {
    backgroundColor: 'rgba(52,152,219,0.15)',
  },
  paperText: {
    fontFamily: Fonts.inter.black,
    fontSize: FontSize.micro,
    color: Colors.accent.blue,
    letterSpacing: 1,
  },
  pausedBadge: {
    backgroundColor: 'rgba(255,149,0,0.15)',
  },
  pausedText: {
    color: Colors.accent.amber,
  },
  uptime: {
    fontFamily: Fonts.mono.regular,
    fontSize: FontSize.bodySmall,
    color: Colors.text.secondary,
    marginLeft: 'auto',
  },
});