import React, { useState, useEffect } from 'react';
import {
	View,
	Text,
	StyleSheet,
	TouchableOpacity,
	Alert,
	Image,
	ScrollView,
	ActivityIndicator,
	Platform,
} from 'react-native';
import { useTheme } from '@react-navigation/native';
import { useRouter } from 'expo-router';
import { Ionicons } from '@expo/vector-icons';
import { useAuth } from '../context/AuthProvider';
import { useAppTheme } from '../theme/ThemeProvider';

// Typendefinitionen für die Token-Nutzung
type ModelUsage = {
	model_id: string;
	model_name: string;
	total_prompt_tokens: number;
	total_completion_tokens: number;
	total_tokens: number;
	total_cost: number;
};

type UsageByPeriod = {
	time_period: string;
	total_tokens: number;
	total_cost: number;
};

type UsageSummary = {
	totalCost: number;
	totalTokens: number;
	modelCount: number;
	periodCount: number;
};

export default function ProfileScreen() {
	const { colors } = useTheme();
	const { isDarkMode, toggleTheme } = useAppTheme();
	const router = useRouter();
	const { user, signOut } = useAuth();

	// Zustandsvariablen für Token-Nutzungsdaten
	const [modelUsage, setModelUsage] = useState<ModelUsage[]>([]);
	const [periodUsage, setPeriodUsage] = useState<UsageByPeriod[]>([]);
	const [summary, setSummary] = useState<UsageSummary | null>(null);
	const [isLoading, setIsLoading] = useState(false);
	const [selectedPeriod, setSelectedPeriod] = useState<'day' | 'month' | 'year'>('month');

	// Funktion zum Laden der Token-Nutzungsdaten
	// TODO: Backend-Endpoints für Usage-Statistiken implementieren
	const loadUsageData = async () => {
		if (!user) return;

		setIsLoading(true);
		try {
			// Usage-Statistiken sind noch nicht über die Backend-API verfügbar
			// Setze leere Daten und zeige Info-Text an
			console.log('Usage-Statistiken: Backend-Endpoints noch nicht implementiert');
			setModelUsage([]);
			setPeriodUsage([]);
			setSummary(null);
		} catch (error) {
			console.error('Fehler beim Laden der Nutzungsdaten:', error);
		} finally {
			setIsLoading(false);
		}
	};

	// Lade die Nutzungsdaten beim ersten Rendern und wenn sich der Zeitraum ändert
	useEffect(() => {
		if (user) {
			loadUsageData();
		}
	}, [user, selectedPeriod]);

	// Formatierungsfunktionen
	const formatCost = (cost: number): string => {
		return `$${cost.toFixed(4)}`;
	};

	const formatTokens = (tokens: number): string => {
		if (tokens >= 1000000) {
			return `${(tokens / 1000000).toFixed(2)}M`;
		} else if (tokens >= 1000) {
			return `${(tokens / 1000).toFixed(1)}K`;
		} else {
			return tokens.toString();
		}
	};

	const handlePeriodChange = (period: 'day' | 'month' | 'year') => {
		setSelectedPeriod(period);
	};

	const handleSignOut = async () => {
		Alert.alert('Abmelden', 'Möchtest du dich wirklich abmelden?', [
			{
				text: 'Abbrechen',
				style: 'cancel',
			},
			{
				text: 'Abmelden',
				style: 'destructive',
				onPress: async () => {
					await signOut();
					router.replace('/auth/login');
				},
			},
		]);
	};

	return (
		<ScrollView style={[styles.container, { backgroundColor: colors.background }]}>
			<View style={styles.header}>
				<Text style={[styles.title, { color: colors.text }]}>Profil</Text>
			</View>

			<View style={styles.profileSection}>
				<View style={[styles.avatarContainer, { backgroundColor: colors.primary + '20' }]}>
					<Text style={[styles.avatarText, { color: colors.primary }]}>
						{user?.email?.charAt(0).toUpperCase() || 'U'}
					</Text>
				</View>
				<View style={styles.userInfo}>
					<Text style={[styles.userName, { color: colors.text }]}>
						{user?.email?.split('@')[0] || 'Benutzer'}
					</Text>
					<Text style={[styles.userEmail, { color: colors.text + '80' }]}>
						{user?.email || 'E-Mail nicht verfügbar'}
					</Text>
				</View>
			</View>

			{/* Token-Nutzungsstatistiken */}
			<View style={styles.usageSection}>
				<Text style={[styles.sectionTitle, { color: colors.text }]}>Token-Nutzung</Text>

				{isLoading ? (
					<View style={styles.loadingContainer}>
						<ActivityIndicator size="small" color={colors.primary} />
						<Text style={[styles.loadingText, { color: colors.text + '80' }]}>
							Lade Nutzungsdaten...
						</Text>
					</View>
				) : summary ? (
					<>
						{/* Zusammenfassung der Nutzung */}
						<View
							style={[
								styles.usageSummaryCard,
								{
									backgroundColor: colors.card,
									borderColor: colors.border,
									shadowColor: isDarkMode ? undefined : '#000',
								},
							]}
						>
							<View style={styles.usageSummaryRow}>
								<View style={styles.usageSummaryItem}>
									<Text style={[styles.usageSummaryValue, { color: colors.primary }]}>
										{formatTokens(summary.totalTokens)}
									</Text>
									<Text style={[styles.usageSummaryLabel, { color: colors.text + '80' }]}>
										Tokens gesamt
									</Text>
								</View>

								<View style={styles.usageSummaryDivider} />

								<View style={styles.usageSummaryItem}>
									<Text style={[styles.usageSummaryValue, { color: colors.primary }]}>
										${summary.totalCost.toFixed(4)}
									</Text>
									<Text style={[styles.usageSummaryLabel, { color: colors.text + '80' }]}>
										Kosten gesamt
									</Text>
								</View>
							</View>
						</View>

						{/* Zeitraumauswahl */}
						<View style={styles.periodSelector}>
							<TouchableOpacity
								style={[
									styles.periodButton,
									selectedPeriod === 'day' && {
										backgroundColor: colors.primary + '20',
										borderColor: colors.primary,
									},
								]}
								onPress={() => handlePeriodChange('day')}
							>
								<Text
									style={[
										styles.periodButtonText,
										{ color: colors.text },
										selectedPeriod === 'day' && { color: colors.primary, fontWeight: '600' },
									]}
								>
									Tag
								</Text>
							</TouchableOpacity>

							<TouchableOpacity
								style={[
									styles.periodButton,
									selectedPeriod === 'month' && {
										backgroundColor: colors.primary + '20',
										borderColor: colors.primary,
									},
								]}
								onPress={() => handlePeriodChange('month')}
							>
								<Text
									style={[
										styles.periodButtonText,
										{ color: colors.text },
										selectedPeriod === 'month' && { color: colors.primary, fontWeight: '600' },
									]}
								>
									Monat
								</Text>
							</TouchableOpacity>

							<TouchableOpacity
								style={[
									styles.periodButton,
									selectedPeriod === 'year' && {
										backgroundColor: colors.primary + '20',
										borderColor: colors.primary,
									},
								]}
								onPress={() => handlePeriodChange('year')}
							>
								<Text
									style={[
										styles.periodButtonText,
										{ color: colors.text },
										selectedPeriod === 'year' && { color: colors.primary, fontWeight: '600' },
									]}
								>
									Jahr
								</Text>
							</TouchableOpacity>
						</View>

						{/* Modellnutzung */}
						{modelUsage.length > 0 ? (
							<View style={styles.modelUsageContainer}>
								<Text style={[styles.usageSubtitle, { color: colors.text }]}>Modelle</Text>

								{modelUsage.map((model, index) => (
									<View
										key={model.model_id}
										style={[
											styles.modelUsageItem,
											{
												backgroundColor: colors.card,
												borderColor: colors.border,
											},
											index === modelUsage.length - 1 && { marginBottom: 0 },
										]}
									>
										<View style={styles.modelUsageHeader}>
											<Text style={[styles.modelName, { color: colors.text }]}>
												{model.model_name}
											</Text>
											<Text style={[styles.modelCost, { color: colors.primary }]}>
												${model.total_cost.toFixed(4)}
											</Text>
										</View>

										<View style={styles.modelUsageDetails}>
											<View style={styles.tokenItem}>
												<Text style={[styles.tokenCount, { color: colors.text }]}>
													{formatTokens(model.total_prompt_tokens)}
												</Text>
												<Text style={[styles.tokenLabel, { color: colors.text + '70' }]}>
													Prompt
												</Text>
											</View>

											<View style={styles.tokenItem}>
												<Text style={[styles.tokenCount, { color: colors.text }]}>
													{formatTokens(model.total_completion_tokens)}
												</Text>
												<Text style={[styles.tokenLabel, { color: colors.text + '70' }]}>
													Completion
												</Text>
											</View>

											<View style={styles.tokenItem}>
												<Text style={[styles.tokenCount, { color: colors.text }]}>
													{formatTokens(model.total_tokens)}
												</Text>
												<Text style={[styles.tokenLabel, { color: colors.text + '70' }]}>
													Gesamt
												</Text>
											</View>
										</View>
									</View>
								))}
							</View>
						) : (
							<View style={styles.emptyContainer}>
								<Text style={[styles.emptyText, { color: colors.text + '80' }]}>
									Keine Modellnutzung vorhanden
								</Text>
							</View>
						)}

						{/* Nutzung nach Zeitraum */}
						{periodUsage.length > 0 ? (
							<View style={styles.periodUsageContainer}>
								<Text style={[styles.usageSubtitle, { color: colors.text }]}>
									Nutzung nach{' '}
									{selectedPeriod === 'day'
										? 'Tagen'
										: selectedPeriod === 'month'
											? 'Monaten'
											: 'Jahren'}
								</Text>

								{periodUsage.slice(0, 5).map((period, index) => (
									<View
										key={period.time_period}
										style={[
											styles.periodUsageItem,
											{
												backgroundColor: colors.card,
												borderColor: colors.border,
											},
										]}
									>
										<Text style={[styles.periodLabel, { color: colors.text }]}>
											{period.time_period}
										</Text>
										<View style={styles.periodUsageContent}>
											<Text style={[styles.periodTokens, { color: colors.text + 'CC' }]}>
												{formatTokens(period.total_tokens)} Tokens
											</Text>
											<Text style={[styles.periodCost, { color: colors.primary }]}>
												${period.total_cost.toFixed(4)}
											</Text>
										</View>
									</View>
								))}

								{periodUsage.length > 5 && (
									<TouchableOpacity style={[styles.viewMoreButton, { borderColor: colors.border }]}>
										<Text style={[styles.viewMoreText, { color: colors.primary }]}>
											Mehr anzeigen...
										</Text>
									</TouchableOpacity>
								)}
							</View>
						) : (
							<View style={styles.emptyContainer}>
								<Text style={[styles.emptyText, { color: colors.text + '80' }]}>
									Keine Nutzungsdaten für diesen Zeitraum
								</Text>
							</View>
						)}
					</>
				) : (
					<View style={styles.emptyContainer}>
						<Text style={[styles.emptyText, { color: colors.text + '80' }]}>
							Keine Nutzungsdaten verfügbar
						</Text>
					</View>
				)}
			</View>

			<View style={styles.settingsSection}>
				<Text style={[styles.sectionTitle, { color: colors.text }]}>Schnellzugriff</Text>

				<TouchableOpacity
					style={[styles.settingItem, { borderBottomColor: colors.border }]}
					onPress={() => router.push('/settings')}
				>
					<View style={styles.settingIconContainer}>
						<Ionicons name="settings-outline" size={24} color={colors.primary} />
					</View>
					<View style={styles.settingContent}>
						<Text style={[styles.settingTitle, { color: colors.text }]}>Einstellungen</Text>
						<Text style={[styles.settingValue, { color: colors.text + '80' }]}>
							Erscheinungsbild, Benachrichtigungen & mehr
						</Text>
					</View>
					<Ionicons name="chevron-forward" size={20} color={colors.text + '60'} />
				</TouchableOpacity>

				<TouchableOpacity
					style={[styles.settingItem, { borderBottomColor: colors.border }]}
					onPress={toggleTheme}
				>
					<View style={styles.settingIconContainer}>
						<Ionicons name={isDarkMode ? 'moon' : 'sunny'} size={24} color={colors.primary} />
					</View>
					<View style={styles.settingContent}>
						<Text style={[styles.settingTitle, { color: colors.text }]}>Erscheinungsbild</Text>
						<Text style={[styles.settingValue, { color: colors.text + '80' }]}>
							{isDarkMode ? 'Dunkel' : 'Hell'}
						</Text>
					</View>
					<Ionicons name="chevron-forward" size={20} color={colors.text + '60'} />
				</TouchableOpacity>
			</View>

			<View style={styles.accountSection}>
				<Text style={[styles.sectionTitle, { color: colors.text }]}>Konto</Text>

				<TouchableOpacity style={[styles.settingItem, { borderBottomColor: colors.border }]}>
					<View style={styles.settingIconContainer}>
						<Ionicons name="shield-checkmark" size={24} color={colors.primary} />
					</View>
					<View style={styles.settingContent}>
						<Text style={[styles.settingTitle, { color: colors.text }]}>Passwort ändern</Text>
					</View>
					<Ionicons name="chevron-forward" size={20} color={colors.text + '60'} />
				</TouchableOpacity>

				<TouchableOpacity
					style={[styles.settingItem, { borderBottomColor: colors.border }]}
					onPress={handleSignOut}
				>
					<View style={styles.settingIconContainer}>
						<Ionicons name="log-out" size={24} color="#FF3B30" />
					</View>
					<View style={styles.settingContent}>
						<Text style={[styles.settingTitle, { color: '#FF3B30' }]}>Abmelden</Text>
					</View>
				</TouchableOpacity>
			</View>

			<View style={styles.appInfo}>
				<Text style={[styles.versionText, { color: colors.text + '60' }]}>Version 1.0.0</Text>
			</View>
		</ScrollView>
	);
}

const styles = StyleSheet.create({
	container: {
		flex: 1,
		padding: 24,
	},
	header: {
		marginTop: 20,
		marginBottom: 30,
	},
	title: {
		fontSize: 28,
		fontWeight: 'bold',
	},
	profileSection: {
		flexDirection: 'row',
		alignItems: 'center',
		marginBottom: 30,
	},
	avatarContainer: {
		width: 70,
		height: 70,
		borderRadius: 35,
		justifyContent: 'center',
		alignItems: 'center',
		marginRight: 16,
	},
	avatarText: {
		fontSize: 28,
		fontWeight: 'bold',
	},
	userInfo: {
		flex: 1,
	},
	userName: {
		fontSize: 20,
		fontWeight: '600',
		marginBottom: 4,
	},
	userEmail: {
		fontSize: 14,
	},
	// Nutzungsstatistik-Stile
	usageSection: {
		marginBottom: 30,
	},
	loadingContainer: {
		alignItems: 'center',
		justifyContent: 'center',
		padding: 20,
	},
	loadingText: {
		marginTop: 10,
		fontSize: 14,
	},
	usageSummaryCard: {
		borderRadius: 12,
		padding: 20,
		marginBottom: 16,
		borderWidth: 1,
		...Platform.select({
			ios: {
				shadowOffset: { width: 0, height: 2 },
				shadowOpacity: 0.1,
				shadowRadius: 4,
			},
			android: {
				elevation: 2,
			},
			web: {
				boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)',
			},
		}),
	},
	usageSummaryRow: {
		flexDirection: 'row',
		justifyContent: 'space-around',
		alignItems: 'center',
	},
	usageSummaryItem: {
		alignItems: 'center',
		flex: 1,
	},
	usageSummaryDivider: {
		width: 1,
		height: 40,
		backgroundColor: '#E5E5EA',
		marginHorizontal: 10,
	},
	usageSummaryValue: {
		fontSize: 24,
		fontWeight: 'bold',
		marginBottom: 6,
	},
	usageSummaryLabel: {
		fontSize: 14,
	},
	periodSelector: {
		flexDirection: 'row',
		marginBottom: 16,
		justifyContent: 'center',
	},
	periodButton: {
		paddingVertical: 8,
		paddingHorizontal: 16,
		borderRadius: 20,
		marginHorizontal: 4,
		borderWidth: 1,
		borderColor: '#E5E5EA',
	},
	periodButtonText: {
		fontSize: 14,
	},
	modelUsageContainer: {
		marginBottom: 20,
	},
	usageSubtitle: {
		fontSize: 16,
		fontWeight: '600',
		marginBottom: 10,
	},
	modelUsageItem: {
		borderRadius: 10,
		padding: 12,
		marginBottom: 10,
		borderWidth: 1,
	},
	modelUsageHeader: {
		flexDirection: 'row',
		justifyContent: 'space-between',
		alignItems: 'center',
		marginBottom: 10,
	},
	modelName: {
		fontSize: 16,
		fontWeight: '600',
	},
	modelCost: {
		fontSize: 16,
		fontWeight: '600',
	},
	modelUsageDetails: {
		flexDirection: 'row',
		justifyContent: 'space-between',
	},
	tokenItem: {
		alignItems: 'center',
		flex: 1,
	},
	tokenCount: {
		fontSize: 14,
		fontWeight: '500',
	},
	tokenLabel: {
		fontSize: 12,
		marginTop: 4,
	},
	periodUsageContainer: {
		marginBottom: 20,
	},
	periodUsageItem: {
		flexDirection: 'row',
		justifyContent: 'space-between',
		alignItems: 'center',
		padding: 12,
		borderRadius: 10,
		marginBottom: 8,
		borderWidth: 1,
	},
	periodLabel: {
		fontSize: 15,
		fontWeight: '500',
	},
	periodUsageContent: {
		flexDirection: 'row',
		alignItems: 'center',
	},
	periodTokens: {
		fontSize: 14,
		marginRight: 10,
	},
	periodCost: {
		fontSize: 14,
		fontWeight: '600',
	},
	viewMoreButton: {
		padding: 10,
		borderRadius: 8,
		borderWidth: 1,
		alignItems: 'center',
		marginTop: 8,
	},
	viewMoreText: {
		fontSize: 14,
		fontWeight: '500',
	},
	emptyContainer: {
		alignItems: 'center',
		padding: 20,
	},
	emptyText: {
		fontSize: 14,
	},
	// Bestehende Stile
	settingsSection: {
		marginBottom: 30,
	},
	accountSection: {
		marginBottom: 30,
	},
	sectionTitle: {
		fontSize: 18,
		fontWeight: '600',
		marginBottom: 16,
	},
	settingItem: {
		flexDirection: 'row',
		alignItems: 'center',
		paddingVertical: 12,
		borderBottomWidth: 1,
	},
	settingIconContainer: {
		width: 40,
		alignItems: 'center',
		marginRight: 12,
	},
	settingContent: {
		flex: 1,
	},
	settingTitle: {
		fontSize: 16,
		fontWeight: '500',
	},
	settingValue: {
		fontSize: 14,
		marginTop: 2,
	},
	appInfo: {
		alignItems: 'center',
		marginTop: 16,
		paddingBottom: 20,
	},
	versionText: {
		fontSize: 14,
	},
});
