import React, { useEffect } from 'react';
import { StyleSheet, Text, View, SafeAreaView, ScrollView, RefreshControl } from 'react-native';
import { useDashboardStore } from '@/store/dashboardStore';
import { useAuthStore } from '@/store/authStore';
import { StatCard, Card, LoadingOverlay } from '@/components';
import { COLORS, FONT_SIZES, SPACING } from '@/constants/theme';

export function DashboardScreen() {
  const { data, isLoading, refreshDashboard } = useDashboardStore();
  const { user } = useAuthStore();

  useEffect(() => {
    if (!data) {
      refreshDashboard();
    }
  }, [data, refreshDashboard]);

  return (
    <SafeAreaView style={styles.container}>
      <View style={styles.header}>
        <Text style={styles.greeting}>
          Welcome back, {user?.firstName || 'User'}
        </Text>
        <Text style={styles.tier}>
          {user?.tier ? user?.tier.charAt(0).toUpperCase() + user?.tier.slice(1) : 'Free'} Plan
        </Text>
      </View>

      <ScrollView
        refreshControl={
          <RefreshControl
            refreshing={isLoading}
            onRefresh={refreshDashboard}
            tintColor={COLORS.primary}
          />
        }
      >
        <Card title="Exposure Summary">
          <StatCard
            title="Total Exposures"
            value={data?.exposureSummary.total ?? 0}
            color={COLORS.primary}
          />
          <StatCard
            title="Unresolved"
            value={data?.exposureSummary.unresolved ?? 0}
            color={COLORS.warning}
          />
          <StatCard
            title="Critical"
            value={data?.exposureSummary.critical ?? 0}
            color={COLORS.danger}
          />
        </Card>

        <Card title="SpamShield Stats">
          <StatCard
            title="Blocked Today"
            value={data?.spamStats.blockedToday ?? 0}
            color={COLORS.success}
          />
          <StatCard
            title="Total Blocked"
            value={data?.spamStats.blockedTotal ?? 0}
            color={COLORS.accent}
          />
          <StatCard
            title="Spam Score"
            value={`${data?.spamStats.spamScore ?? 0}%`}
            color={COLORS.secondary}
          />
        </Card>

        <Card title="VoicePrint Status">
          <View style={styles.voiceStatus}>
            <View style={styles.statusRow}>
              <View style={[styles.statusDot, { backgroundColor: data?.voiceProtectionStatus.isMonitoring ? COLORS.success : COLORS.textMuted }]} />
              <Text style={styles.statusText}>
                {data?.voiceProtectionStatus.isMonitoring ? 'Monitoring Active' : 'Monitoring Inactive'}
              </Text>
            </View>
            <StatCard
              title="Profiles Enrolled"
              value={data?.voiceProtectionStatus.profilesEnrolled ?? 0}
              color={COLORS.accent}
            />
          </View>
        </Card>
      </ScrollView>

      <LoadingOverlay visible={isLoading} />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: COLORS.background,
  },
  header: {
    padding: SPACING.md,
    borderBottomWidth: 1,
    borderBottomColor: COLORS.border,
  },
  greeting: {
    color: COLORS.text,
    fontSize: FONT_SIZES.xxl,
    fontWeight: 'bold',
  },
  tier: {
    color: COLORS.primary,
    fontSize: FONT_SIZES.sm,
    marginTop: SPACING.xs,
  },
  voiceStatus: {
    gap: SPACING.sm,
  },
  statusRow: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: SPACING.sm,
  },
  statusDot: {
    width: 8,
    height: 8,
    borderRadius: 4,
    marginRight: SPACING.sm,
  },
  statusText: {
    color: COLORS.text,
    fontSize: FONT_SIZES.md,
  },
});
