managarten/apps-archived/maerchenzauber/apps/mobile/app/creators.tsx

// Firebase functionality temporarily disabled - see dataService.ts for placeholders
import React, { useEffect, useState } from 'react';
import { View, FlatList, StyleSheet, Dimensions, ScrollView } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import Avatar from '../components/atoms/Avatar';
import Text from '../components/atoms/Text';
import CommonHeader from '../components/molecules/CommonHeader';
import { useDebugBorders } from '../hooks/useDebugBorders';
import { useDebug } from '../src/contexts/DebugContext';

interface Creator {
	creatorId: string;
	description: string;
	name: string;
	profilePicture: string;
	systemPrompt: string;
	type: string;
}

export default function CreatorsScreen() {
	const [creators, setCreators] = useState<Creator[]>([]);
	const [loading, setLoading] = useState(true);
	const { debugBordersEnabled } = useDebug();

	// Screen width calculations
	const { width: screenWidth } = Dimensions.get('window');
	const isWideScreen = screenWidth > 1000;

	// Debug borders
	const debugStyles = {
		safeArea: useDebugBorders('#FF0000'),
		container: useDebugBorders('#00FF00'),
		section: useDebugBorders('#0000FF'),
		card: useDebugBorders('#FF00FF'),
	};

	// Dynamic styles
	const dynamicStyles = {
		container: {
			maxWidth: 600,
			width: '100%',
			alignSelf: 'center',
			paddingHorizontal: isWideScreen ? 0 : 20,
		},
	};

	useEffect(() => {
		const fetchCreators = async () => {
			try {
				const creatorsCollection = collection(db, 'creators');
				const creatorsSnapshot = await getDocs(creatorsCollection);
				const creatorsList = creatorsSnapshot.docs.map((doc) => ({
					...doc.data(),
					creatorId: doc.id,
				})) as Creator[];
				setCreators(creatorsList);
			} catch (error) {
				console.error('Error fetching creators:', error);
			} finally {
				setLoading(false);
			}
		};

		fetchCreators();
	}, []);

	const renderCreatorCard = ({ item }: { item: Creator }) => (
		<View style={styles.card}>
			<Avatar
				imageUrl={item.profilePicture !== 'to_be_added' ? item.profilePicture : undefined}
				name={item.name}
				size={80}
				showName={false}
			/>
			<View style={styles.cardContent}>
				<Text style={styles.name}>{item.name}</Text>
				<Text style={styles.type}>{item.type}</Text>
				<Text style={styles.description}>{item.description}</Text>
			</View>
		</View>
	);

	if (loading) {
		return (
			<SafeAreaView style={[styles.safeArea, debugStyles.safeArea]} edges={['top']}>
				<CommonHeader title="Unsere Künstler" />
				<ScrollView style={styles.scrollView} contentContainerStyle={styles.scrollViewContent}>
					<View style={[styles.container, debugStyles.container, dynamicStyles.container]}>
						<Text style={styles.loadingText}>Lade Künstler...</Text>
					</View>
				</ScrollView>
			</SafeAreaView>
		);
	}

	return (
		<SafeAreaView style={[styles.safeArea, debugStyles.safeArea]} edges={['top']}>
			<CommonHeader title="Unsere Künstler" />
			<ScrollView style={styles.scrollView} contentContainerStyle={styles.scrollViewContent}>
				<View style={[styles.container, debugStyles.container, dynamicStyles.container]}>
					<FlatList
						data={creators}
						renderItem={renderCreatorCard}
						keyExtractor={(item) => item.creatorId}
						contentContainerStyle={styles.list}
						scrollEnabled={false}
					/>
				</View>
			</ScrollView>
		</SafeAreaView>
	);
}

const styles = StyleSheet.create({
	scrollView: {
		flex: 1,
		width: '100%',
	},
	scrollViewContent: {
		flexGrow: 1,
		paddingTop: 100, // Space for header
		paddingBottom: 0,
	},
	safeArea: {
		flex: 1,
		backgroundColor: '#181818',
	},
	container: {
		flex: 1,
	},
	loadingText: {
		color: '#FFFFFF',
		textAlign: 'center',
		marginTop: 20,
	},
	list: {
		gap: 16,
		paddingVertical: 16,
	},
	card: {
		flexDirection: 'row',
		backgroundColor: '#2C2C2C',
		borderRadius: 12,
		padding: 16,
		marginHorizontal: 16,
		shadowColor: '#000',
		shadowOffset: {
			width: 0,
			height: 2,
		},
		shadowOpacity: 0.25,
		shadowRadius: 3.84,
		elevation: 5,
	},
	cardContent: {
		flex: 1,
		marginLeft: 16,
	},
	name: {
		fontSize: 18,
		fontWeight: 'bold',
		color: '#FFFFFF',
		marginBottom: 4,
	},
	type: {
		fontSize: 14,
		color: '#999999',
		marginBottom: 8,
	},
	description: {
		fontSize: 14,
		color: '#CCCCCC',
	},
});