import React, { useState, useRef, useEffect } from 'react';
import { StyleSheet, View, Text, TextInput, TouchableOpacity, Alert, Platform, Animated, Easing, Modal, Vibration, Dimensions } from 'react-native';
import { ArrowUp, ArrowDown, DollarSign, Clock, Percent, X } from 'lucide-react-native';
import { colors } from '@/constants/colors';
import useTradeStore from '@/store/useTradeStore';
import { useTheme } from '@/context/ThemeContext';
import { CONFIG } from '@/constants/config';
import CustomKeyboard from './CustomKeyboard';
import { LinearGradient } from 'expo-linear-gradient';
import { useToast } from '@/context/ToastContext';

interface TradeControlsProps {
  onInvestmentChange?: (value: string) => void;
  investment?: string;
  error?: string;
  setError?: (error: string) => void;
  hideTradeButtons?: boolean;
}

export default function TradeControls({
  onInvestmentChange,
  investment: externalInvestment,
  error: externalError,
  setError: setExternalError,
  hideTradeButtons = false
}: TradeControlsProps) {
  // Get screen dimensions for responsive layout
  const screenWidth = Dimensions.get('window').width;
  const screenHeight = Dimensions.get('window').height;
  const isSmallScreen = screenWidth < 360;
  const isMediumScreen = screenWidth >= 360 && screenWidth < 480;
  const isLargeScreen = screenWidth >= 480;
  const isShortScreen = screenHeight < 700;
  
  // Get store values at the top level
  const { 
    isDemoAccount, 
    demoBalance, 
    realBalance, 
    executeTrade, 
    selectedTradeDuration,
    setTradeDuration,
    markets,
    currentMarketForTrade,
    isUserFromNigeria
  } = useTradeStore();
  
  const { showToast } = useToast();
  const { theme, colors } = useTheme();
  
  // State declarations at the top level
  const [internalInvestment, setInternalInvestment] = useState('');
  const [showKeyboard, setShowKeyboard] = useState(false);
  const [internalError, setInternalError] = useState('');
  const [isAnimating, setIsAnimating] = useState(false);
  const [profitPercent, setProfitPercent] = useState(60);
  const [showCustomKeyboard, setShowCustomKeyboard] = useState(false);
  
  // Use either external or internal state based on props
  const investment = externalInvestment !== undefined ? externalInvestment : internalInvestment;
  const error = externalError !== undefined ? externalError : internalError;
  const setError = setExternalError || setInternalError;
  
  const currentBalance = isDemoAccount ? demoBalance : realBalance;
  const market = markets[currentMarketForTrade];
  const currencySymbol = isUserFromNigeria ? 'NGN' : 'USDT';
  
  // Animation values
  const scaleAnim = useRef(new Animated.Value(1)).current;
  const fadeAnim = useRef(new Animated.Value(1)).current; // Start with 1 to ensure visibility
  const slideAnim = useRef(new Animated.Value(0)).current; // Start with 0 to ensure proper positioning
  const inputBorderAnim = useRef(new Animated.Value(0)).current;
  
  // Input ref for focusing
  const inputRef = useRef<TextInput>(null);
  
  // Randomize profit percentage slightly for realism
  useEffect(() => {
    const interval = setInterval(() => {
      const newPercent = 55 + Math.floor(Math.random() * 10);
      setProfitPercent(newPercent);
    }, 60000); // Change every minute
    
    return () => {
      clearInterval(interval);
    };
  }, []);
  
  // Animate input border color when focused
  useEffect(() => {
    Animated.timing(inputBorderAnim, {
      toValue: showKeyboard ? 1 : 0,
      duration: 200,
      useNativeDriver: false,
    }).start();
  }, [showKeyboard, inputBorderAnim]);
  
  const handleInvestmentChange = (value: string) => {
    try {
      // Validate input (numbers and decimal point only)
      if (value === '' || /^\d*\.?\d{0,2}$/.test(value)) {
        if (onInvestmentChange) {
          onInvestmentChange(value);
        } else {
          setInternalInvestment(value);
        }
        setError('');
      }
    } catch (error) {
      console.error("Error in handleInvestmentChange:", error);
    }
  };
  
  const validateInvestment = () => {
    try {
      const amount = parseFloat(investment);
      
      if (isNaN(amount) || amount <= 0) {
        setError('Please enter a valid amount');
        animateErrorShake();
        return null;
      }
      
      if (amount < CONFIG.minInvestmentAmount) {
        setError(`Minimum: ${CONFIG.minInvestmentAmount} BATZ`);
        animateErrorShake();
        return null;
      }
      
      if (amount > currentBalance) {
        setError('Insufficient balance');
        animateErrorShake();
        return null;
      }
      
      return amount;
    } catch (error) {
      console.error("Error in validateInvestment:", error);
      setError('Invalid amount');
      return null;
    }
  };
  
  const animateErrorShake = () => {
    try {
      // Provide haptic feedback on native platforms
      if (Platform.OS !== 'web') {
        try {
          Vibration.vibrate([0, 30, 20, 30]);
        } catch (error) {
          console.error("Vibration error:", error);
        }
      }
      
      Animated.sequence([
        Animated.timing(scaleAnim, {
          toValue: 1.03,
          duration: 100,
          useNativeDriver: true,
          easing: Easing.bounce
        }),
        Animated.timing(scaleAnim, {
          toValue: 1,
          duration: 100,
          useNativeDriver: true
        })
      ]).start();
    } catch (error) {
      console.error("Error in animateErrorShake:", error);
    }
  };
  
  const animateButtonPress = (callback: () => void) => {
    try {
      setIsAnimating(true);
      
      // Provide haptic feedback on native platforms
      if (Platform.OS !== 'web') {
        try {
          Vibration.vibrate(15);
        } catch (error) {
          console.error("Vibration error:", error);
        }
      }
      
      Animated.sequence([
        Animated.timing(scaleAnim, {
          toValue: 0.95,
          duration: 100,
          useNativeDriver: true,
        }),
        Animated.timing(scaleAnim, {
          toValue: 1,
          duration: 100,
          useNativeDriver: true,
        }),
      ]).start(() => {
        setIsAnimating(false);
        callback();
      });
    } catch (error) {
      console.error("Error in animateButtonPress:", error);
      setIsAnimating(false);
    }
  };
  
  const handleTrade = (type: string) => {
    try {
      const amount = validateInvestment();
      if (amount === null) return;
      
      animateButtonPress(() => {
        const success = executeTrade(type, amount);
        
        if (success) {
          // Show toast notification for trade execution
          showToast(
            `${type} trade placed for ${amount.toLocaleString()} BATZ`,
            'info'
          );
          handleInvestmentChange('');
          setShowKeyboard(false);
          setShowCustomKeyboard(false);
        } else {
          Alert.alert('Trade Failed', 'Unable to execute trade. Please try again.');
        }
      });
    } catch (error) {
      console.error("Error in handleTrade:", error);
      Alert.alert('Error', 'An unexpected error occurred. Please try again.');
    }
  };
  
  const handleKeyboardInput = (key: string) => {
    try {
      if (key === 'delete') {
        handleInvestmentChange(investment.slice(0, -1));
      } else if (key === '.') {
        if (!investment.includes('.')) {
          handleInvestmentChange(investment + key);
        }
      } else {
        handleInvestmentChange(investment + key);
      }
    } catch (error) {
      console.error("Error in handleKeyboardInput:", error);
    }
  };
  
  const handleQuickAmount = (percentage: number) => {
    try {
      // Provide haptic feedback on native platforms
      if (Platform.OS !== 'web') {
        try {
          Vibration.vibrate(10);
        } catch (error) {
          console.error("Vibration error:", error);
        }
      }
      
      const amount = Math.floor(currentBalance * (percentage / 100));
      handleInvestmentChange(amount.toString());
    } catch (error) {
      console.error("Error in handleQuickAmount:", error);
    }
  };
  
  const handleInputFocus = () => {
    if (Platform.OS === 'web') {
      // For web, focus the input directly
      if (inputRef.current) {
        inputRef.current.focus();
      }
    } else {
      // For mobile, show custom keyboard
      setShowCustomKeyboard(true);
    }
    setShowKeyboard(true);
  };
  
  // Interpolate border color for input
  const borderColor = inputBorderAnim.interpolate({
    inputRange: [0, 1],
    outputRange: [error ? colors.error : colors.border, colors.primary]
  });
  
  // Calculate responsive padding and spacing based on screen size
  const getPadding = () => {
    if (isSmallScreen) return { card: 12, input: 10, button: 8 };
    if (isMediumScreen) return { card: 16, input: 12, button: 10 };
    return { card: 20, input: 14, button: 12 }; // Large screen
  };
  
  const padding = getPadding();
  
  return (
    <View 
      style={[
        styles.container,
        {
          backgroundColor: colors.background,
          padding: isSmallScreen ? 12 : (isMediumScreen ? 16 : 20),
          zIndex: 2,
        }
      ]}
    >
      <View style={[
        styles.card, 
        { 
          backgroundColor: colors.backgroundSecondary,
          padding: padding.card,
        }
      ]}>
        {theme === 'dark' && (
          <LinearGradient
            colors={['rgba(30, 39, 46, 0.8)', 'rgba(30, 39, 46, 0.5)']}
            style={styles.cardGradient}
          />
        )}
        
        <View style={styles.investmentContainer}>
          <View style={styles.labelContainer}>
            <DollarSign 
              size={isSmallScreen ? 14 : 16} 
              color={colors.textSecondary} 
            />
            <Text style={[
              styles.label, 
              { 
                color: colors.textSecondary,
                fontSize: isSmallScreen ? 12 : 14,
                marginLeft: isSmallScreen ? 4 : 6,
              }
            ]}>
              Investment Amount
            </Text>
          </View>
          
          <Animated.View 
            style={[
              styles.inputWrapper,
              { 
                transform: [{ scale: scaleAnim }],
                borderColor: borderColor,
                backgroundColor: theme === 'dark' ? 'rgba(17, 17, 17, 0.8)' : colors.backgroundSecondary,
                borderWidth: 1.5,
              }
            ]}
          >
            <TouchableOpacity 
              style={[
                styles.input,
                { padding: padding.input }
              ]}
              onPress={handleInputFocus}
              activeOpacity={0.7}
            >
              <TextInput
                ref={inputRef}
                style={[
                  styles.inputText, 
                  { 
                    color: investment ? colors.text : colors.textSecondary,
                    fontSize: isSmallScreen ? 16 : 18,
                  }
                ]}
                value={investment}
                onChangeText={handleInvestmentChange}
                keyboardType="numeric"
                placeholder="0 BATZ Coins"
                placeholderTextColor={colors.textSecondary}
                onFocus={() => setShowKeyboard(true)}
                onBlur={() => setShowKeyboard(false)}
                showSoftInputOnFocus={Platform.OS === 'web'}
                editable={Platform.OS === 'web'}
              />
            </TouchableOpacity>
          </Animated.View>
          
          <View style={[
            styles.quickAmountContainer,
            { gap: isSmallScreen ? 4 : 8 }
          ]}>
            <TouchableOpacity 
              style={[
                styles.quickAmountButton, 
                { 
                  backgroundColor: theme === 'dark' ? 'rgba(30, 39, 46, 0.9)' : 'rgba(245, 245, 245, 0.9)',
                  paddingVertical: isSmallScreen ? 6 : 8,
                }
              ]}
              onPress={() => handleQuickAmount(10)}
              activeOpacity={0.7}
            >
              <Text style={[
                styles.quickAmountText, 
                { 
                  color: colors.text,
                  fontSize: isSmallScreen ? 10 : 12,
                }
              ]}>10%</Text>
            </TouchableOpacity>
            <TouchableOpacity 
              style={[
                styles.quickAmountButton, 
                { 
                  backgroundColor: theme === 'dark' ? 'rgba(30, 39, 46, 0.9)' : 'rgba(245, 245, 245, 0.9)',
                  paddingVertical: isSmallScreen ? 6 : 8,
                }
              ]}
              onPress={() => handleQuickAmount(25)}
              activeOpacity={0.7}
            >
              <Text style={[
                styles.quickAmountText, 
                { 
                  color: colors.text,
                  fontSize: isSmallScreen ? 10 : 12,
                }
              ]}>25%</Text>
            </TouchableOpacity>
            <TouchableOpacity 
              style={[
                styles.quickAmountButton, 
                { 
                  backgroundColor: theme === 'dark' ? 'rgba(30, 39, 46, 0.9)' : 'rgba(245, 245, 245, 0.9)',
                  paddingVertical: isSmallScreen ? 6 : 8,
                }
              ]}
              onPress={() => handleQuickAmount(50)}
              activeOpacity={0.7}
            >
              <Text style={[
                styles.quickAmountText, 
                { 
                  color: colors.text,
                  fontSize: isSmallScreen ? 10 : 12,
                }
              ]}>50%</Text>
            </TouchableOpacity>
            <TouchableOpacity 
              style={[
                styles.quickAmountButton, 
                { 
                  backgroundColor: theme === 'dark' ? 'rgba(30, 39, 46, 0.9)' : 'rgba(245, 245, 245, 0.9)',
                  paddingVertical: isSmallScreen ? 6 : 8,
                }
              ]}
              onPress={() => handleQuickAmount(100)}
              activeOpacity={0.7}
            >
              <Text style={[
                styles.quickAmountText, 
                { 
                  color: colors.text,
                  fontSize: isSmallScreen ? 10 : 12,
                }
              ]}>MAX</Text>
            </TouchableOpacity>
          </View>
          
          {error ? (
            <Animated.Text 
              style={[
                styles.errorText,
                { 
                  transform: [{ scale: scaleAnim }],
                  fontSize: isSmallScreen ? 11 : 12,
                }
              ]}
            >
              {error}
            </Animated.Text>
          ) : null}
        </View>
        
        <View style={[
          styles.durationContainer,
          { marginBottom: isShortScreen ? 12 : 16 }
        ]}>
          <View style={styles.labelContainer}>
            <Clock 
              size={isSmallScreen ? 14 : 16} 
              color={colors.textSecondary} 
            />
            <Text style={[
              styles.label, 
              { 
                color: colors.textSecondary,
                fontSize: isSmallScreen ? 12 : 14,
                marginLeft: isSmallScreen ? 4 : 6,
              }
            ]}>
              Trade Duration
            </Text>
          </View>
          
          <View style={[
            styles.durationButtons,
            { gap: isSmallScreen ? 4 : 8 }
          ]}>
            {CONFIG.tradeDurations.map((duration) => (
              <TouchableOpacity
                key={duration.value}
                style={[
                  styles.durationButton,
                  selectedTradeDuration === duration.value && styles.activeDurationButton,
                  { 
                    backgroundColor: theme === 'dark' 
                      ? 'rgba(30, 39, 46, 0.9)' 
                      : 'rgba(245, 245, 245, 0.9)',
                    borderColor: selectedTradeDuration === duration.value ? colors.primary : 'transparent',
                    paddingVertical: padding.button,
                  }
                ]}
                onPress={() => {
                  // Provide haptic feedback on native platforms
                  if (Platform.OS !== 'web') {
                    try {
                      Vibration.vibrate(10);
                    } catch (error) {
                      console.error("Vibration error:", error);
                    }
                  }
                  setTradeDuration(duration.value);
                }}
                activeOpacity={0.7}
              >
                {theme === 'dark' && selectedTradeDuration === duration.value && (
                  <LinearGradient
                    colors={['rgba(41, 171, 226, 0.1)', 'rgba(41, 171, 226, 0.02)']}
                    style={styles.durationGradient}
                  />
                )}
                <Text style={[
                  styles.durationButtonText,
                  { 
                    color: selectedTradeDuration === duration.value ? colors.primary : colors.text,
                    fontSize: isSmallScreen ? 11 : 13,
                  }
                ]}>
                  {duration.label}
                </Text>
              </TouchableOpacity>
            ))}
          </View>
        </View>
        
        <View style={[
          styles.profitInfoContainer, 
          { 
            backgroundColor: theme === 'dark' ? 'rgba(0, 0, 0, 0.2)' : 'rgba(0, 0, 0, 0.05)',
            padding: isSmallScreen ? 8 : 10,
            marginBottom: isShortScreen ? 12 : 16,
          }
        ]}>
          <Percent 
            size={isSmallScreen ? 14 : 16} 
            color={colors.textSecondary} 
          />
          <Text style={[
            styles.profitInfoText, 
            { 
              color: colors.textSecondary,
              fontSize: isSmallScreen ? 11 : 13,
              marginLeft: isSmallScreen ? 4 : 8,
            }
          ]}>
            Potential profit: <Text style={[
              styles.profitPercent, 
              { color: colors.success }
            ]}>{profitPercent}%</Text> of investment
          </Text>
        </View>
        
        {!hideTradeButtons && (
          <View style={[
            styles.tradeButtons,
            { 
              gap: isSmallScreen ? 8 : 10,
              marginBottom: isShortScreen ? 8 : 12,
            }
          ]}>
            <TouchableOpacity 
              style={[
                styles.tradeButton, 
                styles.buyUpButton,
                { 
                  backgroundColor: theme === 'dark' ? 'rgba(17, 17, 17, 0.8)' : colors.backgroundSecondary,
                  paddingVertical: padding.button + 2,
                }
              ]}
              onPress={() => handleTrade('Buy Up')}
              disabled={isAnimating}
              activeOpacity={0.7}
            >
              <LinearGradient
                colors={theme === 'dark' 
                  ? ['rgba(46, 204, 113, 0.2)', 'rgba(46, 204, 113, 0.05)'] 
                  : ['rgba(46, 204, 113, 0.1)', 'rgba(46, 204, 113, 0.02)']}
                style={styles.buttonGradient}
              />
              <ArrowUp 
                size={isSmallScreen ? 18 : 20} 
                color={colors.success} 
              />
              <View style={styles.buttonTextContainer}>
                <Text style={[
                  styles.tradeButtonText, 
                  { 
                    color: colors.success,
                    fontSize: isSmallScreen ? 13 : 15,
                  }
                ]}>
                  Buy Up
                </Text>
                <Text style={[
                  styles.tradeButtonSubtext, 
                  { 
                    color: colors.textSecondary,
                    fontSize: isSmallScreen ? 10 : 11,
                  }
                ]}>
                  ({profitPercent}% Profit)
                </Text>
              </View>
            </TouchableOpacity>
            
            <TouchableOpacity 
              style={[
                styles.tradeButton, 
                styles.buyDownButton,
                { 
                  backgroundColor: theme === 'dark' ? 'rgba(17, 17, 17, 0.8)' : colors.backgroundSecondary,
                  paddingVertical: padding.button + 2,
                }
              ]}
              onPress={() => handleTrade('Buy Down')}
              disabled={isAnimating}
              activeOpacity={0.7}
            >
              <LinearGradient
                colors={theme === 'dark' 
                  ? ['rgba(231, 76, 60, 0.2)', 'rgba(231, 76, 60, 0.05)'] 
                  : ['rgba(231, 76, 60, 0.1)', 'rgba(231, 76, 60, 0.02)']}
                style={styles.buttonGradient}
              />
              <ArrowDown 
                size={isSmallScreen ? 18 : 20} 
                color={colors.error} 
              />
              <View style={styles.buttonTextContainer}>
                <Text style={[
                  styles.tradeButtonText, 
                  { 
                    color: colors.error,
                    fontSize: isSmallScreen ? 13 : 15,
                  }
                ]}>
                  Buy Down
                </Text>
                <Text style={[
                  styles.tradeButtonSubtext, 
                  { 
                    color: colors.textSecondary,
                    fontSize: isSmallScreen ? 10 : 11,
                  }
                ]}>
                  ({profitPercent}% Profit)
                </Text>
              </View>
            </TouchableOpacity>
          </View>
        )}
        
        <View style={styles.marketInfoContainer}>
          <Text style={[
            styles.marketInfoText, 
            { 
              color: colors.textSecondary,
              fontSize: isSmallScreen ? 10 : 12,
            }
          ]}>
            Current price: {market?.currentPrice.toFixed(2)} {currencySymbol}
          </Text>
        </View>
      </View>
      
      {/* Custom Keyboard Modal */}
      <Modal
        visible={showCustomKeyboard}
        transparent={true}
        animationType="slide"
        onRequestClose={() => setShowCustomKeyboard(false)}
      >
        <View style={styles.keyboardModalContainer}>
          <View style={[
            styles.keyboardModalContent, 
            { 
              backgroundColor: theme === 'dark' ? colors.bgDark : colors.backgroundSecondary,
              paddingBottom: isSmallScreen ? 24 : 32,
            }
          ]}>
            <View style={styles.keyboardHeader}>
              <Text style={[
                styles.keyboardTitle, 
                { 
                  color: colors.text,
                  fontSize: isSmallScreen ? 16 : 18,
                }
              ]}>
                Enter Amount
              </Text>
              <TouchableOpacity 
                style={styles.closeButton}
                onPress={() => setShowCustomKeyboard(false)}
                activeOpacity={0.7}
              >
                <X 
                  size={isSmallScreen ? 18 : 20} 
                  color={colors.textSecondary} 
                />
              </TouchableOpacity>
            </View>
            
            <View style={[
              styles.keyboardInputContainer, 
              { 
                borderColor: error ? colors.error : colors.border,
                backgroundColor: theme === 'dark' ? 'rgba(17, 17, 17, 0.8)' : colors.backgroundSecondary,
                padding: padding.input,
              }
            ]}>
              <Text style={[
                styles.keyboardInputText, 
                { 
                  color: colors.text,
                  fontSize: isSmallScreen ? 20 : 22,
                }
              ]}>
                {investment || "0"} BATZ
              </Text>
            </View>
            
            <CustomKeyboard 
              onKeyPress={handleKeyboardInput} 
              value={investment} 
              isSmallScreen={isSmallScreen}
            />
            
            <TouchableOpacity 
              style={[
                styles.doneButton, 
                { 
                  backgroundColor: colors.primary,
                  height: isSmallScreen ? 45 : 50,
                  marginTop: isSmallScreen ? 12 : 16,
                }
              ]}
              onPress={() => {
                // Provide haptic feedback on native platforms
                if (Platform.OS !== 'web') {
                  try {
                    Vibration.vibrate(10);
                  } catch (error) {
                    console.error("Vibration error:", error);
                  }
                }
                setShowCustomKeyboard(false);
              }}
              activeOpacity={0.7}
            >
              <Text style={[
                styles.doneButtonText,
                { fontSize: isSmallScreen ? 14 : 16 }
              ]}>
                Done
              </Text>
            </TouchableOpacity>
          </View>
        </View>
      </Modal>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    width: '100%',
    position: 'relative',
  },
  card: {
    borderRadius: 16,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 4 },
    shadowOpacity: 0.2,
    shadowRadius: 8,
    elevation: 5,
    position: 'relative',
    overflow: 'hidden',
    width: '100%',
  },
  cardGradient: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
  },
  investmentContainer: {
    marginBottom: 16,
    width: '100%',
  },
  labelContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 8,
    width: '100%',
  },
  label: {
    fontWeight: '500',
  },
  inputWrapper: {
    borderRadius: 12,
    overflow: 'hidden',
    width: '100%',
  },
  input: {
    justifyContent: 'center',
    alignItems: 'flex-end',
    width: '100%',
  },
  inputText: {
    textAlign: 'right',
    width: '100%',
    height: '100%',
    padding: 0,
    fontWeight: '600',
  },
  quickAmountContainer: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    marginTop: 8,
    width: '100%',
  },
  quickAmountButton: {
    paddingHorizontal: 10,
    borderRadius: 8,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 1 },
    shadowOpacity: 0.1,
    shadowRadius: 2,
    elevation: 1,
    flex: 1,
    marginHorizontal: 2,
    alignItems: 'center',
  },
  quickAmountText: {
    fontWeight: '600',
  },
  errorText: {
    color: colors.error,
    marginTop: 6,
    fontWeight: '500',
    width: '100%',
    textAlign: 'center',
  },
  durationContainer: {
    marginBottom: 16,
    width: '100%',
  },
  durationButtons: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    width: '100%',
  },
  durationButton: {
    flex: 1,
    paddingHorizontal: 4,
    borderRadius: 12,
    alignItems: 'center',
    justifyContent: 'center',
    borderWidth: 1.5,
    position: 'relative',
    overflow: 'hidden',
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 1 },
    shadowOpacity: 0.1,
    shadowRadius: 2,
    elevation: 1,
  },
  durationGradient: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
  },
  activeDurationButton: {
    backgroundColor: 'rgba(41, 171, 226, 0.1)',
  },
  durationButtonText: {
    fontWeight: '600',
  },
  activeDurationButtonText: {
    fontWeight: 'bold',
    color: colors.primary,
  },
  profitInfoContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    borderRadius: 12,
    marginBottom: 16,
    width: '100%',
  },
  profitInfoText: {
    marginLeft: 8,
  },
  profitPercent: {
    fontWeight: 'bold',
  },
  tradeButtons: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    marginBottom: 12,
    width: '100%',
  },
  tradeButton: {
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    paddingHorizontal: 16,
    borderRadius: 12,
    gap: 8,
    position: 'relative',
    overflow: 'hidden',
  },
  buttonGradient: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
  },
  buyUpButton: {
    borderWidth: 1.5,
    borderColor: colors.success,
  },
  buyDownButton: {
    borderWidth: 1.5,
    borderColor: colors.error,
  },
  buttonTextContainer: {
    flexDirection: 'column',
    alignItems: 'center',
  },
  tradeButtonText: {
    fontWeight: 'bold',
  },
  buyUpText: {
    color: colors.success,
  },
  buyDownText: {
    color: colors.error,
  },
  tradeButtonSubtext: {
    fontSize: 11,
  },
  marketInfoContainer: {
    alignItems: 'center',
    width: '100%',
  },
  marketInfoText: {
    fontSize: 12,
  },
  
  // Keyboard Modal Styles
  keyboardModalContainer: {
    flex: 1,
    justifyContent: 'flex-end',
    backgroundColor: 'rgba(0, 0, 0, 0.5)',
    width: '100%',
  },
  keyboardModalContent: {
    borderTopLeftRadius: 20,
    borderTopRightRadius: 20,
    padding: 16,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: -4 },
    shadowOpacity: 0.2,
    shadowRadius: 8,
    elevation: 10,
    width: '100%',
  },
  keyboardHeader: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginBottom: 16,
    width: '100%',
  },
  keyboardTitle: {
    fontWeight: 'bold',
  },
  closeButton: {
    padding: 4,
  },
  keyboardInputContainer: {
    borderWidth: 1.5,
    borderRadius: 12,
    marginBottom: 16,
    alignItems: 'flex-end',
    width: '100%',
  },
  keyboardInputText: {
    fontWeight: 'bold',
  },
  doneButton: {
    borderRadius: 12,
    justifyContent: 'center',
    alignItems: 'center',
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.2,
    shadowRadius: 4,
    elevation: 3,
    width: '100%',
  },
  doneButtonText: {
    color: '#FFFFFF',
    fontWeight: 'bold',
  },
});