import React, { useState } from 'react';
import { View, Text, ScrollView, Switch, TextInput, StyleSheet } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { LinearGradient } from 'expo-linear-gradient';
import { ChevronRight, Lock, Check, X } from 'lucide-react-native';
import { Colors, Fonts, FontSize, BorderRadius, Spacing } from '@/constants/theme';
import SegmentedControl from '@/components/SegmentedControl';
import AnimatedCard from '@/components/AnimatedCard';
import PressableScale from '@/components/PressableScale';

export default function SettingsScreen() {
  const insets = useSafeAreaInsets();
  const [executionMode, setExecutionMode] = useState(1);
  const [riskPercent, setRiskPercent] = useState(1);
  const [maxOpenTrades, setMaxOpenTrades] = useState(3);
  const [notifications, setNotifications] = useState({
    priceAlerts: true,
    tradeExecuted: true,
    stopLoss: true,
    dailySummary: false,
  });
  const [oledBlack, setOledBlack] = useState(false);

  const modeColors = [Colors.text.secondary, Colors.accent.blue, Colors.accent.orange];

  return (
    <View style={[styles.container, { paddingTop: insets.top }]}>
      <View style={styles.headerSection}>
        <Text style={styles.sectionLabel}>CONFIGURATION</Text>
        <Text style={styles.pageTitle}>Settings</Text>
      </View>

      <ScrollView
        style={styles.scroll}
        contentContainerStyle={styles.content}
        showsVerticalScrollIndicator={false}
      >
        <AnimatedCard index={0}>
          <View style={styles.section}>
            <Text style={styles.sectionHeader}>ACCOUNT</Text>
            <View style={styles.accountRow}>
              <LinearGradient
                colors={['#00ff88', '#00cc6a']}
                style={styles.avatar}
              >
                <Text style={styles.avatarText}>SK</Text>
              </LinearGradient>
              <View style={styles.accountInfo}>
                <Text style={styles.accountName}>Saravana Kumar</Text>
                <Text style={styles.accountEmail}>saravana@bytelyst.ai</Text>
              </View>
              <View style={styles.tierBadge}>
                <Text style={styles.tierText}>ELITE</Text>
              </View>
            </View>
          </View>
        </AnimatedCard>

        <AnimatedCard index={1}>
          <View style={styles.section}>
            <Text style={styles.sectionHeader}>EXECUTION MODE</Text>
            <SegmentedControl
              segments={['Alerts', 'Paper', 'Live']}
              activeIndex={executionMode}
              onPress={setExecutionMode}
              activeColor={modeColors[executionMode]}
              activeTextColor={executionMode === 2 ? '#fff' : '#000'}
            />
            {executionMode === 2 && (
              <View style={styles.warningBanner}>
                <Text style={styles.warningText}>
                  Real money trading enabled. Use caution.
                </Text>
              </View>
            )}
          </View>
        </AnimatedCard>

        <AnimatedCard index={2}>
          <View style={styles.section}>
            <Text style={styles.sectionHeader}>RISK CONFIGURATION</Text>
            <SettingRow label="Risk Per Trade">
              <View style={styles.sliderRow}>
                <View style={styles.sliderTrack}>
                  <View style={[styles.sliderFill, { width: `${((riskPercent - 0.5) / 4.5) * 100}%` as any }]} />
                </View>
                <Text style={styles.sliderValue}>{riskPercent.toFixed(1)}%</Text>
              </View>
            </SettingRow>
            <SettingRow label="Max Open Trades">
              <View style={styles.stepperRow}>
                <PressableScale
                  style={styles.stepperBtn}
                  onPress={() => setMaxOpenTrades(Math.max(1, maxOpenTrades - 1))}
                >
                  <Text style={styles.stepperBtnText}>-</Text>
                </PressableScale>
                <Text style={styles.stepperValue}>{maxOpenTrades}</Text>
                <PressableScale
                  style={styles.stepperBtn}
                  onPress={() => setMaxOpenTrades(Math.min(10, maxOpenTrades + 1))}
                >
                  <Text style={styles.stepperBtnText}>+</Text>
                </PressableScale>
              </View>
            </SettingRow>
            <SettingRow label="Total Capital">
              <Text style={styles.capitalValue}>$25,000</Text>
            </SettingRow>
          </View>
        </AnimatedCard>

        <AnimatedCard index={3}>
          <View style={styles.section}>
            <Text style={styles.sectionHeader}>BROKER CONNECTION</Text>
            <View style={styles.brokerRow}>
              <Text style={styles.brokerName}>Alpaca</Text>
              <View style={styles.connectedBadge}>
                <Check size={12} color={Colors.accent.green} />
                <Text style={styles.connectedText}>Connected</Text>
              </View>
            </View>
            <Text style={styles.apiKeyHint}>API Key: ••••••••k3xR</Text>
          </View>
        </AnimatedCard>

        <AnimatedCard index={4}>
          <View style={styles.section}>
            <Text style={styles.sectionHeader}>NOTIFICATIONS</Text>
            <ToggleRow
              label="Price Alerts"
              value={notifications.priceAlerts}
              onChange={(v) => setNotifications(n => ({ ...n, priceAlerts: v }))}
            />
            <ToggleRow
              label="Trade Executed"
              value={notifications.tradeExecuted}
              onChange={(v) => setNotifications(n => ({ ...n, tradeExecuted: v }))}
            />
            <ToggleRow
              label="Stop Loss Hit"
              value={notifications.stopLoss}
              onChange={(v) => setNotifications(n => ({ ...n, stopLoss: v }))}
            />
            <ToggleRow
              label="Daily Summary"
              value={notifications.dailySummary}
              onChange={(v) => setNotifications(n => ({ ...n, dailySummary: v }))}
            />
          </View>
        </AnimatedCard>

        <AnimatedCard index={5}>
          <View style={styles.section}>
            <Text style={styles.sectionHeader}>APPEARANCE</Text>
            <View style={styles.toggleRow}>
              <View style={styles.toggleLabel}>
                <Text style={styles.toggleText}>Dark Mode</Text>
                <Lock size={14} color={Colors.text.muted} />
              </View>
              <Switch
                value={true}
                disabled
                trackColor={{ false: Colors.background.elevated, true: 'rgba(0,255,136,0.3)' }}
                thumbColor={Colors.accent.green}
              />
            </View>
            <ToggleRow
              label="OLED Black"
              value={oledBlack}
              onChange={setOledBlack}
            />
          </View>
        </AnimatedCard>

        <AnimatedCard index={6}>
          <View style={styles.section}>
            <Text style={styles.sectionHeader}>ABOUT</Text>
            <View style={styles.aboutRow}>
              <Text style={styles.aboutLabel}>Version</Text>
              <Text style={styles.aboutValue}>v2.3</Text>
            </View>
            <PressableScale style={styles.linkRow}>
              <Text style={styles.linkText}>Terms of Service</Text>
              <ChevronRight size={16} color={Colors.text.muted} />
            </PressableScale>
            <PressableScale style={styles.linkRow}>
              <Text style={styles.linkText}>Support</Text>
              <ChevronRight size={16} color={Colors.text.muted} />
            </PressableScale>
          </View>
        </AnimatedCard>
      </ScrollView>
    </View>
  );
}

function SettingRow({ label, children }: { label: string; children: React.ReactNode }) {
  return (
    <View style={styles.settingRow}>
      <Text style={styles.settingLabel}>{label}</Text>
      {children}
    </View>
  );
}

function ToggleRow({ label, value, onChange }: { label: string; value: boolean; onChange: (v: boolean) => void }) {
  return (
    <View style={styles.toggleRow}>
      <Text style={styles.toggleText}>{label}</Text>
      <Switch
        value={value}
        onValueChange={onChange}
        trackColor={{ false: Colors.background.elevated, true: 'rgba(0,255,136,0.3)' }}
        thumbColor={value ? Colors.accent.green : '#666'}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: Colors.background.primary,
  },
  headerSection: {
    padding: Spacing.screenPadding,
    paddingBottom: 0,
  },
  sectionLabel: {
    fontFamily: Fonts.inter.black,
    fontSize: FontSize.micro,
    color: Colors.accent.green,
    letterSpacing: 4,
    marginBottom: 8,
  },
  pageTitle: {
    fontFamily: Fonts.inter.black,
    fontSize: FontSize.hero,
    color: Colors.text.primary,
    letterSpacing: -0.5,
    marginBottom: 16,
  },
  scroll: {
    flex: 1,
  },
  content: {
    padding: Spacing.screenPadding,
    gap: 16,
    paddingBottom: 120,
  },
  section: {
    backgroundColor: Colors.background.card,
    borderRadius: BorderRadius.large,
    padding: Spacing.cardPadding,
    borderWidth: 1,
    borderColor: Colors.border.default,
    gap: 14,
  },
  sectionHeader: {
    fontFamily: Fonts.inter.black,
    fontSize: FontSize.micro,
    color: Colors.text.secondary,
    letterSpacing: 3,
  },
  accountRow: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 14,
  },
  avatar: {
    width: 48,
    height: 48,
    borderRadius: 24,
    alignItems: 'center',
    justifyContent: 'center',
  },
  avatarText: {
    fontFamily: Fonts.inter.black,
    fontSize: FontSize.subheading,
    color: '#000',
  },
  accountInfo: {
    flex: 1,
  },
  accountName: {
    fontFamily: Fonts.inter.extraBold,
    fontSize: FontSize.subheading,
    color: Colors.text.primary,
  },
  accountEmail: {
    fontFamily: Fonts.inter.medium,
    fontSize: FontSize.body,
    color: Colors.text.secondary,
  },
  tierBadge: {
    backgroundColor: 'rgba(0,255,136,0.1)',
    borderWidth: 1,
    borderColor: 'rgba(0,255,136,0.2)',
    paddingHorizontal: 10,
    paddingVertical: 4,
    borderRadius: 6,
  },
  tierText: {
    fontFamily: Fonts.inter.black,
    fontSize: FontSize.micro,
    color: Colors.accent.green,
    letterSpacing: 1,
  },
  warningBanner: {
    backgroundColor: 'rgba(230,126,34,0.1)',
    borderWidth: 1,
    borderColor: 'rgba(230,126,34,0.2)',
    borderRadius: BorderRadius.xs,
    padding: 12,
    marginTop: 4,
  },
  warningText: {
    fontFamily: Fonts.inter.semiBold,
    fontSize: FontSize.bodySmall,
    color: Colors.accent.orange,
  },
  settingRow: {
    gap: 10,
  },
  settingLabel: {
    fontFamily: Fonts.inter.semiBold,
    fontSize: FontSize.body,
    color: Colors.text.primary,
  },
  sliderRow: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 12,
  },
  sliderTrack: {
    flex: 1,
    height: 6,
    borderRadius: 3,
    backgroundColor: Colors.background.elevated,
    overflow: 'hidden',
  },
  sliderFill: {
    height: 6,
    borderRadius: 3,
    backgroundColor: Colors.accent.green,
  },
  sliderValue: {
    fontFamily: Fonts.mono.bold,
    fontSize: FontSize.bodyLarge,
    color: Colors.accent.green,
    minWidth: 40,
    textAlign: 'right',
  },
  stepperRow: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 16,
  },
  stepperBtn: {
    width: 36,
    height: 36,
    borderRadius: 10,
    backgroundColor: Colors.background.elevated,
    alignItems: 'center',
    justifyContent: 'center',
    borderWidth: 1,
    borderColor: Colors.border.subtle,
  },
  stepperBtnText: {
    fontFamily: Fonts.inter.bold,
    fontSize: FontSize.heading,
    color: Colors.text.primary,
  },
  stepperValue: {
    fontFamily: Fonts.mono.bold,
    fontSize: FontSize.heading,
    color: Colors.text.primary,
    minWidth: 30,
    textAlign: 'center',
  },
  capitalValue: {
    fontFamily: Fonts.mono.bold,
    fontSize: FontSize.subheading,
    color: Colors.text.primary,
  },
  brokerRow: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
  },
  brokerName: {
    fontFamily: Fonts.inter.bold,
    fontSize: FontSize.bodyLarge,
    color: Colors.text.primary,
  },
  connectedBadge: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 6,
  },
  connectedText: {
    fontFamily: Fonts.inter.semiBold,
    fontSize: FontSize.bodySmall,
    color: Colors.accent.green,
  },
  apiKeyHint: {
    fontFamily: Fonts.mono.regular,
    fontSize: FontSize.bodySmall,
    color: Colors.text.muted,
  },
  toggleRow: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
  },
  toggleLabel: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 8,
  },
  toggleText: {
    fontFamily: Fonts.inter.semiBold,
    fontSize: FontSize.body,
    color: Colors.text.primary,
  },
  aboutRow: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  aboutLabel: {
    fontFamily: Fonts.inter.medium,
    fontSize: FontSize.body,
    color: Colors.text.secondary,
  },
  aboutValue: {
    fontFamily: Fonts.mono.medium,
    fontSize: FontSize.body,
    color: Colors.text.primary,
  },
  linkRow: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    paddingVertical: 4,
  },
  linkText: {
    fontFamily: Fonts.inter.semiBold,
    fontSize: FontSize.body,
    color: Colors.text.primary,
  },
});