import React from 'react';
import { Pressable, ScrollView, StyleSheet, Text, View } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { useRouter, type Href } from 'expo-router';
import { Ionicons } from '@expo/vector-icons';
import { useTheme } from '../../theme';
import { useT } from '../../i18n';
import { Card } from '../../components/Card';

export default function SettingsScreen() {
  const { theme } = useTheme();
  const t = useT();
  const router = useRouter();

  const renderNavLink = (icon: keyof typeof Ionicons.glyphMap, label: string, path: Href) => (
    <Pressable
      onPress={() => router.push(path)}
      accessibilityRole="link"
      accessibilityLabel={label}
      style={({ pressed }) => [
        styles.navRow,
        {
          borderBottomColor: theme.colors.divider,
          opacity: pressed ? 0.6 : 1,
        },
      ]}
    >
      <Ionicons name={icon} size={20} color={theme.colors.accent} />
      <Text style={[theme.typography.body, { color: theme.colors.fgPrimary, flex: 1, marginLeft: 12, fontFamily: theme.typography.body.fontFamily }]}>
        {label}
      </Text>
      <Ionicons name="chevron-forward" size={18} color={theme.colors.fgSecondary} />
    </Pressable>
  );

  return (
    <SafeAreaView style={[styles.page, { backgroundColor: theme.colors.bgPrimary }]} edges={['top']}>
      <View style={styles.header}>
        <Text style={[theme.typography.h1, { color: theme.colors.fgPrimary }]}>{t('settings.title')}</Text>
      </View>

      <ScrollView contentContainerStyle={[styles.content, { gap: theme.spacing.md }]}>
        {/* 数据与基础配置跳转 */}
        <Card title={t('settings.dataManagement')}>
          <View style={styles.listGroup}>
            {renderNavLink('git-branch-outline', t('tab.rules'), '/rules')}
            {renderNavLink('wallet-outline', t('account.title'), '/account')}
            {renderNavLink('list', t('settings.categories'), '/category')}
            {renderNavLink('pricetags', t('settings.tags'), '/tag')}
            {renderNavLink('pie-chart', t('settings.budgets'), '/budget')}
            {renderNavLink('repeat-outline', t('settings.recurringTitle'), '/recurring')}
            {renderNavLink('card-outline', t('settings.creditCards'), '/credit-card' as Href)}
            {renderNavLink('text-outline', t('remark.title'), '/remark-template' as Href)}
          </View>
        </Card>

        {/* 系统及高级配置跳转 */}
        <Card title={t('settings.systemFeaturesTitle')}>
          <View style={styles.listGroup}>
            {renderNavLink('cog-outline', t('settings.aiSettingsTitle'), '/settings/ai')}
            {renderNavLink('chatbubble-ellipses-outline', t('ai.chatTitle'), '/ai/chat' as Href)}
            {renderNavLink('cloud-upload-outline', t('settings.syncSettingsTitle'), '/settings/sync')}
            {renderNavLink('phone-portrait-outline', t('settings.preferencesTitle'), '/settings/preferences')}
            {renderNavLink('flash-outline', t('automation.title'), '/automation' as Href)}
          </View>
        </Card>

        {/* 关于 */}
        <Card title={t('settings.aboutTitle')}>
          <View style={styles.aboutRow}>
            <Text style={[theme.typography.body, { color: theme.colors.fgPrimary, fontWeight: '700' }]}>
              {t('app.name')}
            </Text>
            <Text style={[theme.typography.bodySmall, { color: theme.colors.fgSecondary }]}>
              {t('settings.aboutVersion')}
            </Text>
          </View>
          <Text style={[theme.typography.caption, { color: theme.colors.fgSecondary, marginTop: 8, lineHeight: 18 }]}>
            {t('app.tagline')}
          </Text>
        </Card>
      </ScrollView>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  page: { flex: 1 },
  header: { flexDirection: 'row', alignItems: 'center', paddingHorizontal: 16, paddingTop: 8, paddingBottom: 12 },
  content: { padding: 16, paddingBottom: 64 },
  listGroup: { borderRadius: 6, overflow: 'hidden' },
  navRow: { flexDirection: 'row', alignItems: 'center', paddingVertical: 12, borderBottomWidth: 1 },
  aboutRow: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' },
});