import React, { useState, useEffect } from 'react';
import { View, Text, TextInput, TouchableOpacity, StyleSheet, Alert } from 'react-native';
import { supabase } from '../utils/supabase';
import { Session } from '@supabase/supabase-js';

interface Profile {
	id: string;
	first_name: string | null;
	last_name: string | null;
	avatar_url: string | null;
	is_individual: boolean;
	individual_quota: number;
	individual_usage: number;
}

export default function Account({ session }: { session: Session }) {
	const [loading, setLoading] = useState(true);
	const [firstName, setFirstName] = useState('');
	const [lastName, setLastName] = useState('');
	const [profile, setProfile] = useState<Profile | null>(null);

	useEffect(() => {
		if (session) getProfile();
		// eslint-disable-next-line react-hooks/exhaustive-deps
	}, [session]);

	async function getProfile() {
		try {
			setLoading(true);
			const { user } = session;

			const { data, error } = await supabase
				.from('profiles')
				.select('*')
				.eq('id', user.id)
				.single();

			if (error) {
				throw error;
			}

			if (data) {
				setProfile(data);
				setFirstName(data.first_name || '');
				setLastName(data.last_name || '');
			}
		} catch (error) {
			if (error instanceof Error) {
				Alert.alert('Fehler beim Laden des Profils', error.message);
			}
		} finally {
			setLoading(false);
		}
	}

	async function updateProfile() {
		try {
			setLoading(true);
			const { user } = session;

			// Prüfen, ob das Profil bereits existiert
			if (!profile) {
				// Erstelle ein neues Profil, wenn es noch nicht existiert
				const { error: insertError } = await supabase.from('profiles').insert([
					{
						id: user.id,
						first_name: firstName,
						last_name: lastName,
						is_individual: true, // Standardmäßig als Einzelnutzer
						individual_quota: 0,
						individual_usage: 0,
					},
				]);

				if (insertError) throw insertError;
			} else {
				// Aktualisiere das bestehende Profil
				const { error: updateError } = await supabase
					.from('profiles')
					.update({
						first_name: firstName,
						last_name: lastName,
						updated_at: new Date(),
					})
					.eq('id', user.id);

				if (updateError) throw updateError;
			}

			Alert.alert('Erfolg', 'Profil erfolgreich aktualisiert!');
		} catch (error) {
			if (error instanceof Error) {
				Alert.alert('Fehler beim Aktualisieren des Profils', error.message);
			}
		} finally {
			setLoading(false);
		}
	}

	async function signOut() {
		try {
			setLoading(true);
			const { error } = await supabase.auth.signOut();
			if (error) throw error;
		} catch (error) {
			if (error instanceof Error) {
				Alert.alert('Fehler beim Abmelden', error.message);
			}
		} finally {
			setLoading(false);
		}
	}

	return (
		<View style={styles.container}>
			<View style={styles.profileContainer}>
				<Text style={styles.header}>Mein Profil</Text>

				<View style={styles.formGroup}>
					<Text style={styles.label}>E-Mail</Text>
					<Text style={styles.value}>{session?.user?.email}</Text>
				</View>

				<View style={styles.formGroup}>
					<Text style={styles.label}>Vorname</Text>
					<TextInput
						style={styles.input}
						value={firstName}
						onChangeText={setFirstName}
						placeholder="Vorname eingeben"
					/>
				</View>

				<View style={styles.formGroup}>
					<Text style={styles.label}>Nachname</Text>
					<TextInput
						style={styles.input}
						value={lastName}
						onChangeText={setLastName}
						placeholder="Nachname eingeben"
					/>
				</View>

				{profile && profile.is_individual && (
					<View style={styles.quotaContainer}>
						<Text style={styles.label}>Verfügbare Kredite</Text>
						<Text style={styles.quota}>
							{profile.individual_quota - profile.individual_usage} / {profile.individual_quota}
						</Text>
					</View>
				)}

				<TouchableOpacity style={styles.button} onPress={updateProfile} disabled={loading}>
					<Text style={styles.buttonText}>
						{loading ? 'Wird aktualisiert...' : 'Profil aktualisieren'}
					</Text>
				</TouchableOpacity>

				<TouchableOpacity
					style={[styles.button, styles.signOutButton]}
					onPress={signOut}
					disabled={loading}
				>
					<Text style={styles.buttonText}>Abmelden</Text>
				</TouchableOpacity>
			</View>
		</View>
	);
}

const styles = StyleSheet.create({
	container: {
		flex: 1,
		padding: 20,
	},
	profileContainer: {
		backgroundColor: 'white',
		padding: 20,
		borderRadius: 10,
		shadowColor: '#000',
		shadowOffset: { width: 0, height: 2 },
		shadowOpacity: 0.1,
		shadowRadius: 4,
		elevation: 3,
	},
	header: {
		fontSize: 24,
		fontWeight: 'bold',
		marginBottom: 20,
	},
	formGroup: {
		marginBottom: 15,
	},
	label: {
		fontSize: 16,
		marginBottom: 5,
		fontWeight: '500',
	},
	value: {
		fontSize: 16,
		color: '#666',
		paddingVertical: 10,
	},
	input: {
		height: 50,
		borderWidth: 1,
		borderColor: '#ddd',
		borderRadius: 5,
		paddingHorizontal: 10,
		backgroundColor: '#f9f9f9',
	},
	quotaContainer: {
		marginVertical: 15,
		padding: 15,
		backgroundColor: '#f0f8ff',
		borderRadius: 5,
	},
	quota: {
		fontSize: 18,
		fontWeight: 'bold',
		color: '#0055FF',
	},
	button: {
		backgroundColor: '#0055FF',
		height: 50,
		borderRadius: 5,
		justifyContent: 'center',
		alignItems: 'center',
		marginTop: 15,
	},
	buttonText: {
		color: 'white',
		fontSize: 16,
		fontWeight: 'bold',
	},
	signOutButton: {
		backgroundColor: '#ff3b30',
		marginTop: 10,
	},
});
