import React from 'react';
import { Text, View, TouchableOpacity, ScrollView, Switch } from 'react-native';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { useNavigation } from '@react-navigation/native';
import Icon from 'react-native-vector-icons/Ionicons';
import { getStyles } from './profile.styles';
import { useTheme } from '../../theme';

export const ProfileScreen = () => {
  const navigation = useNavigation<any>();
  const { theme: colors, isDark, toggleTheme } = useTheme();
  const styles = getStyles(colors);

  const handleLogout = async () => {
    try {
      await AsyncStorage.removeItem('userToken');
      await AsyncStorage.removeItem('tenancyName');
    } catch (e) {
      console.error(e);
    }
    navigation.reset({
      index: 0,
      routes: [{ name: 'AuthStack' }], // root-level stack name stays as-is
    });
  };

  return (
    <ScrollView style={styles.container} contentContainerStyle={styles.content}>
      {/* Profile Header */}
      <View style={styles.profileHeader}>
        <View style={styles.avatarCircle}>
          <Text style={styles.avatarInitial}>A</Text>
        </View>
        <Text style={styles.profileName}>Workspace Administrator</Text>
        <Text style={styles.profileRole}>Owner / Administrator</Text>
      </View>

      {/* Account Details list */}
      <View style={styles.sectionCard}>
        <Text style={styles.sectionHeader}>Workspace Details</Text>

        <View style={styles.infoRow}>
          <Text style={styles.infoLabel}>Tenancy</Text>
          <Text style={styles.infoValue}>convex-crm-tenant</Text>
        </View>

        <View style={styles.infoRow}>
          <Text style={styles.infoLabel}>Email</Text>
          <Text style={styles.infoValue}>admin@convex.com</Text>
        </View>

        <View style={styles.infoRow}>
          <Text style={styles.infoLabel}>Status</Text>
          <Text style={styles.infoValueStatus}>Active</Text>
        </View>
      </View>

      {/* Settings list */}
      <View style={styles.sectionCard}>
        <Text style={styles.sectionHeader}>Preferences</Text>

        <View style={styles.preferenceRow}>
          <View style={styles.preferenceLabelGroup}>
            <Icon
              name={isDark ? 'moon' : 'moon-outline'}
              size={20}
              color={colors.textSecondary}
              style={styles.icon}
            />
            <Text style={styles.preferenceText}>Dark Mode</Text>
          </View>
          <Switch
            value={isDark}
            onValueChange={toggleTheme}
            trackColor={{ false: '#767577', true: colors.icon }}
            thumbColor={isDark ? '#ffffff' : '#f4f3f4'}
          />
        </View>

        <TouchableOpacity style={styles.preferenceRow}>
          <View style={styles.preferenceLabelGroup}>
            <Icon
              name="notifications-outline"
              size={20}
              color={colors.textSecondary}
              style={styles.icon}
            />
            <Text style={styles.preferenceText}>Push Notifications</Text>
          </View>
          <Icon name="chevron-forward" size={18} color={colors.textMuted} />
        </TouchableOpacity>

        <TouchableOpacity style={styles.preferenceRow}>
          <View style={styles.preferenceLabelGroup}>
            <Icon
              name="shield-checkmark-outline"
              size={20}
              color={colors.textSecondary}
              style={styles.icon}
            />
            <Text style={styles.preferenceText}>Security &amp; Privacy</Text>
          </View>
          <Icon name="chevron-forward" size={18} color={colors.textMuted} />
        </TouchableOpacity>
      </View>

      {/* Sign Out Button */}
      <TouchableOpacity style={styles.signOutButton} onPress={handleLogout}>
        <Icon
          name="log-out-outline"
          size={20}
          color="#FFFFFF"
          style={styles.buttonIcon}
        />
        <Text style={styles.signOutButtonText}>Sign Out from Workspace</Text>
      </TouchableOpacity>
    </ScrollView>
  );
};