import React from 'react';
import { View, Text, StyleSheet, TouchableOpacity, ScrollView } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { useRouter } from 'expo-router';
import { colors } from '../../../tokens/colors';
import { Ionicons } from '@expo/vector-icons';
import { useAuthStore } from '../../../stores/authStore';

export default function MoreScreen() {
  const router = useRouter();
  const logout = useAuthStore((state) => state.logout);

  const handleLogout = async () => {
    await logout();
    router.replace('/(auth)/login');
  };

  return (
    <SafeAreaView style={styles.container}>
      <View style={styles.header}>
        <Text style={styles.headerTitle}>More</Text>
      </View>
      <ScrollView style={styles.content}>
        <TouchableOpacity style={styles.menuItem} onPress={() => router.push('/(app)/(more)/journal')}>
          <Ionicons name="book" size={24} color={colors.primary} />
          <Text style={styles.menuText}>Journal</Text>
          <Ionicons name="chevron-forward" size={20} color={colors.muted} />
        </TouchableOpacity>

        <TouchableOpacity style={styles.menuItem} onPress={() => router.push('/(app)/(more)/settings')}>
          <Ionicons name="settings" size={24} color={colors.primary} />
          <Text style={styles.menuText}>Settings</Text>
          <Ionicons name="chevron-forward" size={20} color={colors.muted} />
        </TouchableOpacity>

        <TouchableOpacity style={[styles.menuItem, styles.logoutItem]} onPress={handleLogout}>
          <Ionicons name="log-out" size={24} color={colors.danger} />
          <Text style={[styles.menuText, styles.logoutText]}>Sign Out</Text>
          <Ionicons name="chevron-forward" size={20} color={colors.muted} />
        </TouchableOpacity>
      </ScrollView>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: colors.bgDark,
  },
  header: {
    paddingHorizontal: 20,
    paddingVertical: 16,
  },
  headerTitle: {
    fontSize: 28,
    fontWeight: 'bold',
    color: 'white',
  },
  content: {
    flex: 1,
    paddingHorizontal: 20,
  },
  menuItem: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: colors.cardDark,
    padding: 16,
    borderRadius: 12,
    marginBottom: 12,
    borderWidth: 1,
    borderColor: colors.borderDark,
  },
  menuText: {
    flex: 1,
    fontSize: 16,
    fontWeight: '500',
    color: 'white',
    marginLeft: 16,
  },
  logoutItem: {
    marginTop: 24,
  },
  logoutText: {
    color: colors.danger,
  },
});
