// src/modules/core/settings/index.tsx
import React, { useState } from 'react';
import {
  View,
  ScrollView,
  TouchableOpacity,
  Switch,
  Alert,
  StyleSheet
} from 'react-native';
import { ThemedText } from '../../../components/ThemedText';
import ThemeSwitcher from '../../../components/ThemeSwitcher';
import { useTheme } from '../../../theme/ThemeProvider';

interface SettingsProps {
  onClose?: () => void;
  showDebugInfo?: boolean;
  onToggleDebug?: (value: boolean) => void;
}

const Settings: React.FC<SettingsProps> = ({ 
  onClose, 
  showDebugInfo = false, 
  onToggleDebug 
}) => {
  const { theme } = useTheme();

  const clearAsyncStorage = () => {
    Alert.alert(
      'Clear Storage',
      'This will clear all app data. Continue?',
      [
        { text: 'Cancel', style: 'cancel' },
        { 
          text: 'Clear', 
          style: 'destructive',
          onPress: () => {
            // Add your async storage clearing logic here
            Alert.alert('Storage Cleared', 'All app data has been cleared.');
          }
        }
      ]
    );
  };

  return (
    <View style={[styles.container, { backgroundColor: theme.colors.background }]}>
      {/* Header */}
      <View style={[styles.header, { borderBottomColor: theme.colors.border }]}>
        <ThemedText variant="heading">Developer Settings</ThemedText>
        {onClose && (
          <TouchableOpacity
            style={[styles.closeButton, { backgroundColor: theme.colors.surface }]}
            onPress={onClose}
          >
            <ThemedText variant="body">✕</ThemedText>
          </TouchableOpacity>
        )}
      </View>
      
      <ScrollView style={styles.content}>
        {/* Theme Controls */}
        <View style={[styles.section, { borderBottomColor: theme.colors.border }]}>
          <ThemedText variant="subheading" style={styles.sectionTitle}>
            Theme Controls
          </ThemedText>
          <ThemeSwitcher />
        </View>

        {/* Debug Options */}
        <View style={[styles.section, { borderBottomColor: theme.colors.border }]}>
          <ThemedText variant="subheading" style={styles.sectionTitle}>
            Debug Options
          </ThemedText>
          
          <View style={styles.settingRow}>
            <ThemedText variant="body">Show Gesture Debug Info</ThemedText>
            <Switch
              value={showDebugInfo}
              onValueChange={onToggleDebug}
            />
          </View>
        </View>

        {/* App Data */}
        <View style={[styles.section, { borderBottomColor: theme.colors.border }]}>
          <ThemedText variant="subheading" style={styles.sectionTitle}>
            App Data
          </ThemedText>
          
          <TouchableOpacity
            style={[styles.actionButton, { backgroundColor: theme.colors.semantic.error }]}
            onPress={clearAsyncStorage}
          >
            <ThemedText variant="body" color="primary" style={styles.buttonText}>
              Clear All Data
            </ThemedText>
          </TouchableOpacity>
        </View>

        {/* Screen Builder Info */}
        <View style={[styles.section, { borderBottomColor: theme.colors.border }]}>
          <ThemedText variant="subheading" style={styles.sectionTitle}>
            Screen Builder
          </ThemedText>
          <ThemedText variant="bodySmall" style={styles.infoText}>
            This app uses a JSON-driven screen builder system. Components are defined in screenData.json files.
          </ThemedText>
        </View>

        {/* Gesture Instructions */}
        <View style={styles.section}>
          <ThemedText variant="subheading" style={styles.sectionTitle}>
            How to Access This Menu
          </ThemedText>
          <ThemedText variant="bodySmall" style={styles.instructionText}>
            1. Tap any empty area to activate gesture mode (3 sec timeout)
          </ThemedText>
          <ThemedText variant="bodySmall" style={styles.instructionText}>
            2. Tap left edge 3 times quickly
          </ThemedText>
          <ThemedText variant="bodySmall" style={styles.instructionText}>
            3. Tap right edge 3 times quickly
          </ThemedText>
          <ThemedText variant="caption" style={styles.instructionNote}>
            Complete each sequence within 1 second between taps
          </ThemedText>
        </View>
      </ScrollView>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  header: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    padding: 16,
    borderBottomWidth: 1,
  },
  closeButton: {
    width: 32,
    height: 32,
    borderRadius: 16,
    justifyContent: 'center',
    alignItems: 'center',
  },
  content: {
    flex: 1,
    padding: 16,
  },
  section: {
    marginBottom: 24,
    paddingBottom: 16,
    borderBottomWidth: 1,
  },
  sectionTitle: {
    marginBottom: 12,
  },
  settingRow: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    paddingVertical: 8,
  },
  actionButton: {
    padding: 12,
    borderRadius: 8,
    alignItems: 'center',
    marginTop: 8,
  },
  buttonText: {
    color: 'white',
    fontWeight: '600',
  },
  instructionText: {
    lineHeight: 20,
    marginBottom: 4,
  },
  instructionNote: {
    fontStyle: 'italic',
    marginTop: 8,
  },
  infoText: {
    lineHeight: 18,
    opacity: 0.8,
  },
});

export default Settings;