/* eslint-disable react-native/no-inline-styles */
import React from 'react';
import { Text, View, ScrollView, TouchableOpacity } 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 './dashboard.styles';
import { statCards } from '../../mock-data/dashboard';
import { useTheme } from '../../theme';

export const DashboardScreen = () => {
  const navigation = useNavigation<any>();
  const { theme: colors } = 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}>
      {/* Hero Welcome banner */}
      <View style={styles.heroCard}>
        <View>
          <Text style={styles.heroGreeting}>Welcome Back,</Text>
          <Text style={styles.heroName}>Workspace Admin</Text>
          <Text style={styles.heroInfo}>Convex CRM • Active session</Text>
        </View>
        <TouchableOpacity style={styles.logoutButton} onPress={handleLogout}>
          <Icon name="log-out-outline" size={22} color="#EF4444" />
        </TouchableOpacity>
      </View>

      {/* Grid of Stats */}
      <Text style={styles.sectionTitle}>Overview Metrics</Text>
      <View style={styles.statsGrid}>
        {statCards.map((stat, idx) => (
          <View key={idx} style={styles.statCard}>
            <View style={styles.statHeader}>
              <View
                style={[
                  styles.statIconContainer,
                  { backgroundColor: `${stat.color}15` },
                ]}
              >
                <Icon name={stat.icon} size={20} color={stat.color} />
              </View>
              <Text
                style={[
                  styles.statChange,
                  {
                    color: stat.change.startsWith('+') ? '#10B981' : '#EF4444',
                  },
                ]}
              >
                {stat.change}
              </Text>
            </View>
            <Text style={styles.statCount}>{stat.count}</Text>
            <Text style={styles.statTitle}>{stat.title}</Text>
          </View>
        ))}
      </View>

      {/* Recent Activity Section */}
      <View style={styles.sectionHeader}>
        <Text style={styles.sectionTitle}>Recent Activity</Text>
        <TouchableOpacity>
          <Text style={styles.seeAllLink}>See All</Text>
        </TouchableOpacity>
      </View>

      <View style={styles.activityList}>
        <View style={styles.activityItem}>
          <View style={[styles.activityBadge, { backgroundColor: '#10B981' }]}>
            <Icon name="person-add" size={14} color="#FFF" />
          </View>
          <View style={styles.activityDetails}>
            <Text style={styles.activityTitle}>New Lead Created</Text>
            <Text style={styles.activityDesc}>
              Sarah Jenkins added by System Import
            </Text>
            <Text style={styles.activityTime}>2 minutes ago</Text>
          </View>
        </View>

        <View style={styles.activityItem}>
          <View style={[styles.activityBadge, { backgroundColor: '#3B82F6' }]}>
            <Icon name="document-text" size={14} color="#FFF" />
          </View>
          <View style={styles.activityDetails}>
            <Text style={styles.activityTitle}>Invoice #1042 Sent</Text>
            <Text style={styles.activityDesc}>
              Sent to Acme Corp for $1,250.00
            </Text>
            <Text style={styles.activityTime}>1 hour ago</Text>
          </View>
        </View>

        <View style={styles.activityItem}>
          <View style={[styles.activityBadge, { backgroundColor: '#F59E0B' }]}>
            <Icon name="chatbubble-ellipses" size={14} color="#FFF" />
          </View>
          <View style={styles.activityDetails}>
            <Text style={styles.activityTitle}>Ticket #2045 Replied</Text>
            <Text style={styles.activityDesc}>
              Support agent responded to email query
            </Text>
            <Text style={styles.activityTime}>3 hours ago</Text>
          </View>
        </View>
      </View>
    </ScrollView>
  );
};