import React from 'react';
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
import { useTheme } from '@react-navigation/native';
import { Ionicons } from '@expo/vector-icons';
import { useRouter } from 'expo-router';

type ChatHeaderProps = {
	title?: string;
	modelName: string;
	conversationMode: string;
	onBackPress?: () => void;
};

export default function ChatHeader({
	title,
	modelName,
	conversationMode,
	onBackPress,
}: ChatHeaderProps) {
	const { colors } = useTheme();
	const router = useRouter();

	const handleBackPress = () => {
		if (onBackPress) {
			onBackPress();
		} else {
			router.back();
		}
	};

	return (
		<View style={[styles.container, { backgroundColor: colors.card }]}>
			<View style={styles.titleContainer}>
				<Text style={[styles.title, { color: colors.text }]}>{title || 'Neuer Chat'}</Text>
				<View style={styles.subtitleContainer}>
					<Text style={[styles.modelName, { color: colors.text + '80' }]}>{modelName}</Text>
					<Text style={[styles.modeText, { color: colors.text + '80' }]}>
						{conversationMode === 'frei'
							? 'Freier Modus'
							: conversationMode === 'geführt'
								? 'Geführter Modus'
								: 'Vorlagen-Modus'}
					</Text>
				</View>
			</View>

			<TouchableOpacity style={styles.menuButton}>
				<Ionicons name="ellipsis-vertical" size={24} color={colors.text} />
			</TouchableOpacity>
		</View>
	);
}

const styles = StyleSheet.create({
	container: {
		flexDirection: 'row',
		alignItems: 'center',
		paddingHorizontal: 16,
		paddingVertical: 12,
		borderBottomWidth: StyleSheet.hairlineWidth,
		borderBottomColor: 'rgba(0,0,0,0.1)',
		width: '100%',
		maxWidth: 1200,
		alignSelf: 'center',
	},
	backButton: {
		padding: 4,
	},
	titleContainer: {
		flex: 1,
	},
	title: {
		fontSize: 18,
		fontWeight: '600',
	},
	subtitleContainer: {
		flexDirection: 'row',
		alignItems: 'center',
		marginTop: 4,
	},
	modelName: {
		fontSize: 13,
		fontWeight: '500',
	},
	modeText: {
		fontSize: 13,
		marginLeft: 8,
	},
	menuButton: {
		padding: 4,
	},
});
