import { Text } from '@/aesthetics/Text';
import { font, spacing, useColors, weight } from '@/aesthetics/styles';
import { useStrings } from '@/common/hooks/useStrings';
import { usePreferences } from '@/profile/preferences';
import { useRouter } from 'expo-router';
import { ArrowLeft } from 'lucide-react-native';
import { Pressable, ScrollView, StyleSheet, Switch, View } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';

export default function CastleScreen() {
  const router = useRouter();
  const c = useColors();
  const strings = useStrings();
  const { enabledCastleFeatures, toggleCastleFeature } = usePreferences();

  return (
    <SafeAreaView style={[styles.container, { backgroundColor: c.background }]} edges={['top']}>
      <View style={[styles.header, { borderBottomColor: c.borderSubtle }]}>
        <Pressable
          style={({ pressed }) => [styles.backButton, pressed && styles.pressed]}
          onPress={() => router.back()}
        >
          <ArrowLeft size={22} color={c.text} strokeWidth={1.5} />
        </Pressable>
        <Text style={[styles.headerTitle, { color: c.text }]}>{strings.profile.castle.title}</Text>
        <View style={styles.backButton} />
      </View>

      <ScrollView style={styles.scroll} contentContainerStyle={styles.content}>
        <Text style={[styles.description, { color: c.secondaryText }]}>
          {strings.profile.castle.description}
        </Text>

        <View style={styles.settings}>
          <View
            style={[
              styles.settingCard,
              { backgroundColor: c.surface, borderColor: c.borderSubtle },
            ]}
          >
            <View style={styles.settingHeader}>
              <Text style={[styles.settingLabel, { color: c.text }]}>
                {strings.profile.castle.compareAiModels}
              </Text>
              <Switch
                value={enabledCastleFeatures.includes('compareAiModels')}
                onValueChange={() => toggleCastleFeature('compareAiModels')}
                trackColor={{ false: c.progressBg, true: c.accent }}
                thumbColor="#FFFFFF"
              />
            </View>
            <Text style={[styles.settingDescription, { color: c.tertiaryText }]}>
              {strings.profile.castle.compareAiModelsDescription}
            </Text>
          </View>

          <View
            style={[
              styles.settingCard,
              { backgroundColor: c.surface, borderColor: c.borderSubtle },
            ]}
          >
            <View style={styles.settingHeader}>
              <Text style={[styles.settingLabel, { color: c.text }]}>
                {strings.profile.castle.logAnything}
              </Text>
              <Switch
                value={enabledCastleFeatures.includes('logAnything')}
                onValueChange={() => toggleCastleFeature('logAnything')}
                trackColor={{ false: c.progressBg, true: c.accent }}
                thumbColor="#FFFFFF"
              />
            </View>
            <Text style={[styles.settingDescription, { color: c.tertiaryText }]}>
              {strings.profile.castle.logAnythingDescription}
            </Text>
          </View>
        </View>
      </ScrollView>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  header: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingHorizontal: spacing.lg,
    paddingVertical: spacing.md,
    borderBottomWidth: 1,
  },
  backButton: {
    width: 40,
    height: 40,
    alignItems: 'center',
    justifyContent: 'center',
  },
  headerTitle: {
    fontSize: font.lg,
    fontWeight: weight.semibold,
  },
  scroll: {
    flex: 1,
  },
  content: {
    paddingHorizontal: spacing.xl,
    paddingTop: spacing.lg,
    paddingBottom: spacing.xxl,
  },
  description: {
    fontSize: font.sm,
    lineHeight: 20,
    marginBottom: spacing.xl,
  },
  settings: {
    gap: spacing.md,
  },
  settingCard: {
    borderRadius: 12,
    borderWidth: 1,
    padding: spacing.lg,
  },
  settingHeader: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginBottom: spacing.sm,
  },
  settingLabel: {
    fontSize: font.md,
    fontWeight: weight.medium,
    flex: 1,
    marginRight: spacing.md,
  },
  settingDescription: {
    fontSize: font.sm,
    lineHeight: 18,
  },
  pressed: {
    opacity: 0.7,
  },
});