import React from 'react';
import {
  View,
  Text,
  StyleSheet,
  ScrollView,
  TouchableOpacity,
  Alert,
} from 'react-native';
import { useAuth } from '../../src/context/AuthContext';
import AsyncStorage from '@react-native-async-storage/async-storage';

export default function SettingsScreen() {
  const { user, logout } = useAuth();

  const handleLogout = () => {
    Alert.alert(
      'Logout',
      'Are you sure you want to logout?',
      [
        { text: 'Cancel', style: 'cancel' },
        {
          text: 'Logout',
          style: 'destructive',
          onPress: async () => {
            await logout();
          },
        },
      ]
    );
  };

  const handleClearData = () => {
    Alert.alert(
      'Clear Data',
      'This will clear all stored data. Are you sure?',
      [
        { text: 'Cancel', style: 'cancel' },
        {
          text: 'Clear',
          style: 'destructive',
          onPress: async () => {
            try {
              await AsyncStorage.clear();
              Alert.alert('Success', 'All data cleared');
            } catch (error) {
              Alert.alert('Error', 'Failed to clear data');
            }
          },
        },
      ]
    );
  };

  const SettingItem = ({ 
    label, 
    value, 
    onPress 
  }: { 
    label: string; 
    value?: string; 
    onPress?: () => void;
  }) => (
    <TouchableOpacity
      style={styles.settingItem}
      onPress={onPress}
      disabled={!onPress}
      activeOpacity={onPress ? 0.7 : 1}
    >
      <Text style={styles.settingLabel}>{label}</Text>
      <View style={styles.settingValueContainer}>
        <Text style={styles.settingValue} numberOfLines={1}>
          {value || 'N/A'}
        </Text>
      </View>
    </TouchableOpacity>
  );

  const ActionButton = ({
    title,
    onPress,
    destructive = false,
  }: {
    title: string;
    onPress: () => void;
    destructive?: boolean;
  }) => (
    <TouchableOpacity
      style={[styles.actionButton, destructive && styles.actionButtonDestructive]}
      onPress={onPress}
    >
      <Text
        style={[
          styles.actionButtonText,
          destructive && styles.actionButtonTextDestructive,
        ]}
      >
        {title}
      </Text>
    </TouchableOpacity>
  );

  return (
    <ScrollView style={styles.container}>
      <View style={styles.content}>
        <View style={styles.section}>
          <Text style={styles.sectionTitle}>User Information</Text>
          <SettingItem label="Username" value={user?.username || 'N/A'} />
          <SettingItem label="Email" value={user?.email || 'N/A'} />
          <SettingItem 
            label="User ID" 
            value={user?.id || 'N/A'} 
          />
        </View>

        <View style={styles.section}>
          <Text style={styles.sectionTitle}>Server</Text>
          <SettingItem 
            label="Server URL" 
            value="https://wol.f6knight.duckdns.org" 
          />
          <SettingItem 
            label="API Base" 
            value="/api" 
          />
        </View>

        <View style={styles.section}>
          <Text style={styles.sectionTitle}>App Info</Text>
          <SettingItem label="Version" value="1.0.0" />
          <SettingItem label="Build" value="Expo" />
        </View>

        <View style={styles.section}>
          <Text style={styles.sectionTitle}>Actions</Text>
          <ActionButton title="Logout" onPress={handleLogout} destructive />
          <ActionButton title="Clear All Data" onPress={handleClearData} destructive />
        </View>

        <View style={styles.footer}>
          <Text style={styles.footerText}>
            UpSnap Mobile App
          </Text>
          <Text style={styles.footerText}>
            Connect to your UpSnap server
          </Text>
        </View>
      </View>
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f5f5f5',
  },
  content: {
    padding: 20,
  },
  section: {
    backgroundColor: '#fff',
    borderRadius: 12,
    marginBottom: 20,
    overflow: 'hidden',
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 4,
    elevation: 3,
  },
  sectionTitle: {
    fontSize: 14,
    fontWeight: 'bold',
    color: '#666',
    paddingHorizontal: 15,
    paddingTop: 15,
    paddingBottom: 10,
    backgroundColor: '#f9f9f9',
  },
  settingItem: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    paddingHorizontal: 15,
    paddingVertical: 15,
    borderBottomWidth: 1,
    borderBottomColor: '#f0f0f0',
  },
  settingLabel: {
    fontSize: 16,
    color: '#333',
    flex: 1,
  },
  settingValueContainer: {
    flex: 1,
    alignItems: 'flex-end',
  },
  settingValue: {
    fontSize: 14,
    color: '#666',
    maxWidth: 200,
  },
  actionButton: {
    backgroundColor: '#007AFF',
    margin: 15,
    padding: 15,
    borderRadius: 8,
    alignItems: 'center',
  },
  actionButtonDestructive: {
    backgroundColor: '#f44336',
  },
  actionButtonText: {
    color: '#fff',
    fontSize: 16,
    fontWeight: 'bold',
  },
  actionButtonTextDestructive: {
    color: '#fff',
  },
  footer: {
    alignItems: 'center',
    paddingVertical: 30,
  },
  footerText: {
    fontSize: 14,
    color: '#999',
    marginBottom: 5,
  },
});