import React from 'react';
import { StyleSheet, TouchableOpacity, Alert } from 'react-native';
import { router } from 'expo-router';

import { ThemedView } from '@/components/themed-view';
import { ThemedText } from '@/components/themed-text';
import { useThemeColor } from '@/hooks/use-theme-color';
import { IconSymbol, type IconSymbolName } from '@/components/ui/icon-symbol';

interface SettingsListProps {
  onLogout: () => void;
}

interface SettingItem {
  id: string;
  title: string;
  icon: IconSymbolName;
  onPress?: () => void;
  destructive?: boolean;
}

export function SettingsList({ onLogout }: SettingsListProps) {
  const tintColor = useThemeColor({}, 'tint');
  const textColor = useThemeColor({}, 'text');
  const destructiveColor = '#FF3B30';

  const settings: SettingItem[] = [
    {
      id: 'account',
      title: '账户设置',
      icon: 'person.circle',
      onPress: () => router.push('/settings/account'),
    },
    {
      id: 'notification',
      title: '通知设置',
      icon: 'bell',
      onPress: () => router.push('/settings/notification'),
    },
    {
      id: 'privacy',
      title: '隐私设置',
      icon: 'lock',
      onPress: () =>
        Alert.alert('敬请期待', '隐私设置即将上线，敬请期待。'),
    },
    {
      id: 'about',
      title: '关于我们',
      icon: 'info.circle',
      onPress: () => router.push('/settings/about'),
    },
    {
      id: 'feedback',
      title: '意见反馈',
      icon: 'exclamationmark.bubble',
      onPress: () =>
        Alert.alert('感谢反馈', '请通过 support@bowong.cc 与我们联系。'),
    },
    {
      id: 'logout',
      title: '退出登录',
      icon: 'arrow.right.square',
      onPress: onLogout,
      destructive: true,
    },
  ];

  const handleSettingPress = (item: SettingItem) => {
    if (item.onPress) {
      if (item.destructive) {
        Alert.alert(
          '退出登录',
          '确定要退出登录吗？',
          [
            { text: '取消', style: 'cancel' },
            {
              text: '确定',
              style: 'destructive',
              onPress: item.onPress,
            }
          ]
        );
      } else {
        item.onPress();
      }
    }
  };

  return (
    <ThemedView style={styles.container}>
      <ThemedView style={styles.header}>
        <IconSymbol name="gearshape" size={20} color={tintColor} />
        <ThemedText style={styles.title}>设置</ThemedText>
      </ThemedView>

      <ThemedView style={styles.settingsList}>
        {settings.map((item) => (
          <TouchableOpacity
            key={item.id}
            style={styles.settingItem}
            onPress={() => handleSettingPress(item)}
            activeOpacity={0.7}
          >
            <ThemedView style={styles.settingLeft}>
              <IconSymbol
                name={item.icon}
                size={20}
                color={item.destructive ? destructiveColor : tintColor}
              />
              <ThemedText
                style={[
                  styles.settingTitle,
                  { color: item.destructive ? destructiveColor : textColor }
                ]}
              >
                {item.title}
              </ThemedText>
            </ThemedView>
            <IconSymbol
              name="chevron.right"
              size={16}
              color="#ccc"
            />
          </TouchableOpacity>
        ))}
      </ThemedView>
    </ThemedView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  header: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 8,
    marginBottom: 16,
  },
  title: {
    fontSize: 18,
    fontWeight: '600',
  },
  settingsList: {
    borderRadius: 8,
    overflow: 'hidden',
  },
  settingItem: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    paddingVertical: 16,
    paddingHorizontal: 4,
    borderBottomWidth: 1,
    borderBottomColor: '#f0f0f0',
  },
  settingLeft: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 12,
  },
  settingTitle: {
    fontSize: 16,
  },
});