import React, { useState, useEffect } from 'react';
import {
	View,
	Text,
	TextInput,
	TouchableOpacity,
	Alert,
	ActivityIndicator,
	ScrollView,
} from 'react-native';
import { supabase } from '../utils/supabase';
import { Session } from '@supabase/supabase-js';
import { useTheme } from '../utils/themeContext';
import { useRouter } from 'expo-router';

interface Organization {
	id: string;
	name: string;
}

interface UserRole {
	organization_id: string;
	roles?: {
		name: string;
	};
}

interface CreateTeamProps {
	onTeamCreated?: (teamId: string, teamName: string) => void;
}

export default function CreateTeam({ onTeamCreated }: CreateTeamProps) {
	const _router = useRouter();
	const [session, setSession] = useState<Session | null>(null);
	const [loading, setLoading] = useState(false);
	const [organizations, setOrganizations] = useState<Organization[]>([]);
	const [selectedOrgId, setSelectedOrgId] = useState<string | null>(null);
	const [teamName, setTeamName] = useState('');
	const [allocatedCredits, setAllocatedCredits] = useState('');
	const [fetchingOrgs, setFetchingOrgs] = useState(true);
	const { isDarkMode } = useTheme();

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

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

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

	async function fetchUserOrganizations(userId: string) {
		try {
			setFetchingOrgs(true);

			// Suche nach Organisationen, in denen der Benutzer eine Rolle hat
			const { data: userRoles, error: userRolesError } = (await supabase
				.from('user_roles')
				.select('organization_id, roles(name)')
				.eq('user_id', userId)
				.not('organization_id', 'is', null)) as { data: UserRole[] | null; error: any };

			if (userRolesError) throw userRolesError;

			if (userRoles && userRoles.length > 0) {
				// Extrahiere die Organisations-IDs
				const orgIds = userRoles
					.filter((role) => {
						// Prüfe, ob der Benutzer ein Administrator oder Manager ist
						const roleName = role.roles?.name;
						return (
							roleName === 'system_admin' || roleName === 'org_admin' || roleName === 'team_admin'
						);
					})
					.map((role) => role.organization_id);

				if (orgIds.length > 0) {
					// Hole die Details der Organisationen
					const { data: orgs, error: orgsError } = await supabase
						.from('organizations')
						.select('id, name')
						.in('id', orgIds);

					if (orgsError) throw orgsError;

					if (orgs && orgs.length > 0) {
						setOrganizations(orgs);
						// Setze die erste Organisation als Standard
						setSelectedOrgId(orgs[0].id);
					}
				}
			}
		} catch (error) {
			console.error('Fehler beim Abrufen der Organisationen:', error);
			Alert.alert('Fehler', 'Es ist ein Fehler beim Laden der Organisationen aufgetreten.');
		} finally {
			setFetchingOrgs(false);
		}
	}

	async function createTeam() {
		if (!session) {
			Alert.alert('Fehler', 'Sie müssen angemeldet sein, um ein Team zu erstellen.');
			return;
		}

		if (!selectedOrgId) {
			Alert.alert('Fehler', 'Bitte wählen Sie eine Organisation aus.');
			return;
		}

		if (!teamName.trim()) {
			Alert.alert('Fehler', 'Bitte geben Sie einen Teamnamen ein.');
			return;
		}

		const credits = parseInt(allocatedCredits);
		if (isNaN(credits) || credits < 0) {
			Alert.alert('Fehler', 'Bitte geben Sie eine gültige Anzahl an Krediten ein.');
			return;
		}

		try {
			setLoading(true);

			// 1. Prüfe, ob die Organisation genügend Kredite hat
			const { data: org, error: orgError } = await supabase
				.from('organizations')
				.select('total_credits, used_credits')
				.eq('id', selectedOrgId)
				.single();

			if (orgError) throw orgError;

			const availableCredits = org.total_credits - org.used_credits;
			if (credits > availableCredits) {
				Alert.alert(
					'Fehler',
					`Die Organisation hat nicht genügend Kredite. Verfügbar: ${availableCredits}`
				);
				return;
			}

			// 2. Erstelle das Team
			const { data: team, error: teamError } = await supabase
				.from('teams')
				.insert([
					{
						organization_id: selectedOrgId,
						name: teamName.trim(),
						allocated_credits: credits,
					},
				])
				.select()
				.single();

			if (teamError) throw teamError;

			// 3. Aktualisiere die verwendeten Kredite der Organisation
			const { error: updateOrgError } = await supabase
				.from('organizations')
				.update({
					used_credits: org.used_credits + credits,
				})
				.eq('id', selectedOrgId);

			if (updateOrgError) throw updateOrgError;

			// 4. Füge den aktuellen Benutzer als Team-Administrator hinzu
			// Zuerst hole die team_admin Rolle
			const { data: adminRole, error: roleError } = await supabase
				.from('roles')
				.select('id')
				.eq('name', 'team_admin')
				.single();

			if (roleError) throw roleError;

			// Füge die Benutzerrolle hinzu
			const { error: userRoleError } = await supabase.from('user_roles').insert([
				{
					user_id: session.user.id,
					role_id: adminRole.id,
					team_id: team.id,
					organization_id: selectedOrgId,
				},
			]);

			if (userRoleError) throw userRoleError;

			// 5. Füge den Benutzer als Teammitglied hinzu
			const { error: teamMemberError } = await supabase.from('team_members').insert([
				{
					team_id: team.id,
					user_id: session.user.id,
					allocated_credits: 0, // Standardmäßig keine Kredite zugewiesen
					used_credits: 0,
				},
			]);

			if (teamMemberError) throw teamMemberError;

			// Erfolgsbenachrichtigung anzeigen und direkt navigieren
			Alert.alert('Erfolg', `Das Team "${teamName}" wurde erfolgreich erstellt.`);

			// Direkt zur Teamdetailseite navigieren, ohne auf OK zu warten
			if (onTeamCreated) {
				console.log('Navigiere zur neuen Teamseite:', team.id, team.name);
				onTeamCreated(team.id, team.name);
			}

			// Formular zurücksetzen
			setTeamName('');
			setAllocatedCredits('');
		} catch (error) {
			console.error('Fehler beim Erstellen des Teams:', error);
			Alert.alert('Fehler', 'Es ist ein Fehler beim Erstellen des Teams aufgetreten.');
		} finally {
			setLoading(false);
		}
	}

	if (!session) {
		return (
			<View className={`${isDarkMode ? 'bg-gray-800' : 'bg-white'} m-2.5 rounded-lg p-5 shadow`}>
				<Text
					className={`text-base ${isDarkMode ? 'text-gray-300' : 'text-gray-600'} p-5 text-center`}
				>
					Bitte melden Sie sich an, um Teams zu erstellen.
				</Text>
			</View>
		);
	}

	if (fetchingOrgs) {
		return (
			<View className={`${isDarkMode ? 'bg-gray-800' : 'bg-white'} m-2.5 rounded-lg p-5 shadow`}>
				<ActivityIndicator size="large" color={isDarkMode ? '#93C5FD' : '#0055FF'} />
				<Text
					className={`text-base ${isDarkMode ? 'text-gray-300' : 'text-gray-600'} mt-2.5 text-center`}
				>
					Lade Organisationen...
				</Text>
			</View>
		);
	}

	if (organizations.length === 0) {
		return (
			<View className={`${isDarkMode ? 'bg-gray-800' : 'bg-white'} m-2.5 rounded-lg p-5 shadow`}>
				<Text
					className={`text-base ${isDarkMode ? 'text-gray-300' : 'text-gray-600'} p-5 text-center`}
				>
					Sie haben keine Berechtigung, Teams zu erstellen, oder Sie gehören keiner Organisation an.
				</Text>
			</View>
		);
	}

	return (
		<ScrollView className="flex-1">
			<View className={`${isDarkMode ? 'bg-gray-800' : 'bg-white'} m-2.5 rounded-lg p-5 shadow`}>
				<Text
					className={`mb-5 text-2xl font-bold ${isDarkMode ? 'text-gray-100' : 'text-gray-800'}`}
				>
					Neues Team erstellen
				</Text>

				<View className="mb-4">
					<Text
						className={`mb-2 text-base font-medium ${isDarkMode ? 'text-gray-300' : 'text-gray-700'}`}
					>
						Organisation
					</Text>
					<View className="mb-2.5 flex-row flex-wrap">
						{organizations.map((org) => (
							<TouchableOpacity
								key={org.id}
								className={`${selectedOrgId === org.id ? (isDarkMode ? 'bg-blue-800' : 'bg-blue-600') : isDarkMode ? 'bg-gray-700' : 'bg-gray-100'} mb-2.5 mr-2.5 rounded-lg px-4 py-2.5`}
								onPress={() => setSelectedOrgId(org.id)}
							>
								<Text
									className={`${selectedOrgId === org.id ? 'text-white' : isDarkMode ? 'text-gray-300' : 'text-gray-700'} font-medium`}
								>
									{org.name}
								</Text>
							</TouchableOpacity>
						))}
					</View>
				</View>

				<View className="mb-4">
					<Text
						className={`mb-2 text-base font-medium ${isDarkMode ? 'text-gray-300' : 'text-gray-700'}`}
					>
						Teamname
					</Text>
					<TextInput
						className={`h-12 border ${isDarkMode ? 'border-gray-600 bg-gray-700 text-white' : 'border-gray-300 bg-gray-50 text-gray-800'} rounded-lg px-4 text-base`}
						value={teamName}
						onChangeText={setTeamName}
						placeholder="Name des Teams eingeben"
						placeholderTextColor={isDarkMode ? '#9CA3AF' : '#9CA3AF'}
					/>
				</View>

				<View className="mb-4">
					<Text
						className={`mb-2 text-base font-medium ${isDarkMode ? 'text-gray-300' : 'text-gray-700'}`}
					>
						Zugewiesene Kredite
					</Text>
					<TextInput
						className={`h-12 border ${isDarkMode ? 'border-gray-600 bg-gray-700 text-white' : 'border-gray-300 bg-gray-50 text-gray-800'} rounded-lg px-4 text-base`}
						value={allocatedCredits}
						onChangeText={setAllocatedCredits}
						placeholder="Anzahl der Kredite eingeben"
						placeholderTextColor={isDarkMode ? '#9CA3AF' : '#9CA3AF'}
						keyboardType="number-pad"
					/>
				</View>

				<TouchableOpacity
					className={`mt-2.5 h-12 items-center justify-center rounded-lg ${loading ? (isDarkMode ? 'bg-gray-600' : 'bg-gray-400') : isDarkMode ? 'bg-blue-700' : 'bg-blue-600'}`}
					onPress={createTeam}
					disabled={loading}
				>
					{loading ? (
						<ActivityIndicator color="#fff" size="small" />
					) : (
						<Text className="text-base font-bold text-white">Team erstellen</Text>
					)}
				</TouchableOpacity>
			</View>
		</ScrollView>
	);
}

// NativeWind wird für das Styling verwendet, daher sind keine StyleSheet-Definitionen erforderlich
