import React, { useState, useEffect } from 'react';
import { View, Text, TouchableOpacity, ActivityIndicator } from 'react-native';
import { FontAwesome5 } from '@expo/vector-icons';
import { useRouter } from 'expo-router';
import { supabase } from '../utils/supabase';
import { Session } from '@supabase/supabase-js';
import { useTheme, lightColors, darkColors } from '../utils/themeContext';

export default function DashboardStats() {
	const router = useRouter();
	const { isDarkMode } = useTheme();
	const [session, setSession] = useState<Session | null>(null);
	const [loading, setLoading] = useState(true);
	const [teamCount, setTeamCount] = useState(0);
	const [orgCount, setOrgCount] = useState(0);
	const [availableMana, setAvailableMana] = useState(0);
	const [totalMana, setTotalMana] = useState(0);

	useEffect(() => {
		// Prüfe den aktuellen Authentifizierungsstatus
		supabase.auth.getSession().then(({ data: { session } }) => {
			setSession(session);
			if (session) {
				fetchUserStats(session.user.id);
			} else {
				setLoading(false);
			}
		});

		// Abonniere Authentifizierungsänderungen
		const {
			data: { subscription },
		} = supabase.auth.onAuthStateChange((_event, session) => {
			setSession(session);
			if (session) {
				fetchUserStats(session.user.id);
			} else {
				setLoading(false);
			}
		});

		return () => subscription.unsubscribe();
	}, []);

	async function fetchUserStats(userId: string) {
		try {
			setLoading(true);

			// Hole alle Teams, in denen der Benutzer Mitglied ist
			const { data: teamMembers, error: teamMembersError } = await supabase
				.from('team_members')
				.select('team_id')
				.eq('user_id', userId);

			if (teamMembersError) throw teamMembersError;

			setTeamCount(teamMembers?.length || 0);

			// Hole alle Organisationen, in denen der Benutzer eine Rolle hat
			const { data: userRoles, error: userRolesError } = await supabase
				.from('user_roles')
				.select('organization_id')
				.eq('user_id', userId)
				.not('organization_id', 'is', null);

			if (userRolesError) throw userRolesError;

			// Entferne Duplikate (falls der Benutzer mehrere Rollen in einer Organisation hat)
			const uniqueOrgIds = [...new Set(userRoles?.map((role) => role.organization_id) || [])];
			setOrgCount(uniqueOrgIds.length);

			// Hole die Mana-Informationen aus dem Profil des Benutzers
			const { data: profileData, error: profileError } = await supabase
				.from('profiles')
				.select('individual_quota, individual_usage')
				.eq('id', userId)
				.single();

			if (profileError) throw profileError;

			if (profileData) {
				const quota = profileData.individual_quota || 0;
				const usage = profileData.individual_usage || 0;
				const available = Math.max(0, quota - usage);

				setTotalMana(quota);
				setAvailableMana(available);
			}
		} catch (error) {
			console.error('Fehler beim Abrufen der Benutzerstatistiken:', error);
		} finally {
			setLoading(false);
		}
	}

	if (!session || loading) {
		return (
			<View
				className={`flex-row justify-between ${isDarkMode ? 'bg-gray-800' : 'bg-white'} mb-5 rounded-lg p-4 shadow`}
			>
				<ActivityIndicator size="small" color={isDarkMode ? '#60A5FA' : '#0055FF'} />
			</View>
		);
	}

	return (
		<View className="mb-5">
			{/* Mana-Anzeige */}
			<View className={`${isDarkMode ? 'bg-gray-800' : 'bg-white'} mb-3 rounded-lg p-4 shadow`}>
				<TouchableOpacity className="items-center" onPress={() => router.push('/get-mana')}>
					<View className="mb-2 flex-row items-center">
						<FontAwesome5 name="fire" size={18} color="#F59E0B" className="mr-2" />
						<Text className={`text-lg font-bold ${isDarkMode ? 'text-gray-100' : 'text-gray-800'}`}>
							Verfügbares Mana
						</Text>
					</View>
					<View className="mb-2 h-4 w-full rounded-full bg-gray-200 dark:bg-gray-700">
						<View
							className="h-4 rounded-full"
							style={{
								width:
									totalMana > 0 ? `${Math.min(100, (availableMana / totalMana) * 100)}%` : '0%',
								backgroundColor: isDarkMode ? darkColors.primary : lightColors.primary,
							}}
						/>
					</View>
					<View className="w-full flex-row justify-between">
						<Text className={`text-sm ${isDarkMode ? 'text-gray-400' : 'text-gray-500'}`}>
							Verfügbar: {availableMana}
						</Text>
						<Text className={`text-sm ${isDarkMode ? 'text-gray-400' : 'text-gray-500'}`}>
							Gesamt: {totalMana}
						</Text>
					</View>
				</TouchableOpacity>
			</View>

			{/* Teams und Organisationen */}
			<View
				className={`flex-row justify-between ${isDarkMode ? 'bg-gray-800' : 'bg-white'} rounded-lg p-4 shadow`}
			>
				<TouchableOpacity
					className={`flex-1 flex-row items-center justify-center ${isDarkMode ? 'bg-gray-700' : 'bg-gray-50'} mr-2 rounded-lg p-3`}
					onPress={() => router.push('/teams')}
				>
					<View className="items-center">
						<View className="mb-1 flex-row items-center">
							<FontAwesome5
								name="users"
								size={16}
								color={isDarkMode ? '#60A5FA' : '#0055FF'}
								className="mr-2"
							/>
							<Text
								className={`text-base font-semibold ${isDarkMode ? 'text-gray-100' : 'text-gray-800'}`}
							>
								Teams
							</Text>
						</View>
						<View
							className={`${isDarkMode ? 'bg-blue-900' : 'bg-blue-100'} rounded-full px-3 py-1`}
						>
							<Text className={`${isDarkMode ? 'text-blue-300' : 'text-blue-700'} font-medium`}>
								{teamCount}
							</Text>
						</View>
					</View>
				</TouchableOpacity>

				<TouchableOpacity
					className={`flex-1 flex-row items-center justify-center ${isDarkMode ? 'bg-gray-700' : 'bg-gray-50'} ml-2 rounded-lg p-3`}
					onPress={() => router.push('/organizations')}
				>
					<View className="items-center">
						<View className="mb-1 flex-row items-center">
							<FontAwesome5
								name="building"
								size={16}
								color={isDarkMode ? '#60A5FA' : '#0055FF'}
								className="mr-2"
							/>
							<Text
								className={`text-base font-semibold ${isDarkMode ? 'text-gray-100' : 'text-gray-800'}`}
							>
								Organisationen
							</Text>
						</View>
						<View
							className={`${isDarkMode ? 'bg-blue-900' : 'bg-blue-100'} rounded-full px-3 py-1`}
						>
							<Text className={`${isDarkMode ? 'text-blue-300' : 'text-blue-700'} font-medium`}>
								{orgCount}
							</Text>
						</View>
					</View>
				</TouchableOpacity>
			</View>
		</View>
	);
}
