import React, { useState, useEffect } from 'react';
import { View, Platform, Alert, ActivityIndicator } from 'react-native';
import { useTranslation } from 'react-i18next';
import { useTheme } from '~/features/theme/ThemeProvider';
import Text from '~/components/atoms/Text';
import BaseModal from '~/components/atoms/BaseModal';
import Icon from '~/components/atoms/Icon';
import Input from '~/components/atoms/Input';

interface PromptEditModalProps {
	isVisible: boolean;
	onClose: () => void;
	onSave: (title: string, promptText: string) => Promise<void>;
	onDelete?: () => Promise<void>;
	initialTitle?: string;
	initialPromptText?: string;
	currentLanguage?: string;
}

const PromptEditModal: React.FC<PromptEditModalProps> = ({
	isVisible,
	onClose,
	onSave,
	onDelete,
	initialTitle = '',
	initialPromptText = '',
	currentLanguage = 'de',
}) => {
	const { t } = useTranslation();
	const { isDark, themeVariant } = useTheme();

	const [title, setTitle] = useState(initialTitle);
	const [promptText, setPromptText] = useState(initialPromptText);
	const [isSaving, setIsSaving] = useState(false);
	const [isDeleting, setIsDeleting] = useState(false);

	// Reset form when modal opens with new data
	useEffect(() => {
		if (isVisible) {
			setTitle(initialTitle);
			setPromptText(initialPromptText);
		}
	}, [isVisible, initialTitle, initialPromptText]);

	// Handle save action
	const handleSave = async () => {
		if (!title.trim() || !promptText.trim()) {
			Alert.alert(
				t('prompts.validation_error', 'Eingabefehler'),
				t('prompts.all_fields_required', 'Bitte fülle alle Felder aus.')
			);
			return;
		}

		try {
			setIsSaving(true);
			await onSave(title, promptText);
			onClose();
		} catch (error) {
			console.debug('Error saving prompt:', error);
			Alert.alert(
				t('prompts.save_error', 'Fehler beim Speichern'),
				t('prompts.try_again', 'Bitte versuche es später erneut.')
			);
		} finally {
			setIsSaving(false);
		}
	};

	// Handle delete action with confirmation
	const handleDelete = async () => {
		if (!onDelete) return;

		// Show confirmation dialog
		if (Platform.OS === 'ios') {
			Alert.alert(
				t('prompts.delete_confirm_title', 'Prompt löschen'),
				t('prompts.delete_confirm_message', 'Möchtest du diesen Prompt wirklich löschen?'),
				[
					{
						text: t('common.cancel', 'Abbrechen'),
						style: 'cancel',
					},
					{
						text: t('common.delete', 'Löschen'),
						style: 'destructive',
						onPress: async () => {
							try {
								setIsDeleting(true);
								await onDelete();
								onClose();
							} catch (error) {
								console.debug('Error deleting prompt:', error);
								Alert.alert(
									t('prompts.delete_error', 'Fehler beim Löschen'),
									t('prompts.try_again', 'Bitte versuche es später erneut.')
								);
							} finally {
								setIsDeleting(false);
							}
						},
					},
				]
			);
		} else {
			// For Android and other platforms
			Alert.alert(
				t('prompts.delete_confirm_title', 'Prompt löschen'),
				t('prompts.delete_confirm_message', 'Möchtest du diesen Prompt wirklich löschen?'),
				[
					{
						text: t('common.cancel', 'Abbrechen'),
						style: 'cancel',
					},
					{
						text: t('common.delete', 'Löschen'),
						style: 'destructive',
						onPress: async () => {
							try {
								setIsDeleting(true);
								await onDelete();
								onClose();
							} catch (error) {
								console.debug('Error deleting prompt:', error);
								Alert.alert(
									t('prompts.delete_error', 'Fehler beim Löschen'),
									t('prompts.try_again', 'Bitte versuche es später erneut.')
								);
							} finally {
								setIsDeleting(false);
							}
						},
					},
				]
			);
		}
	};

	// Theme-Farben werden direkt von den Komponenten verwendet

	// Benutzerdefinierter Footer-Inhalt mit Lösch-Button
	const customFooter = onDelete ? (
		<View className="w-full">
			<View
				className="mb-4 items-center justify-center rounded-xl bg-red-600 px-4 py-3"
				style={{ opacity: isDeleting ? 0.7 : 1 }}
			>
				{isDeleting ? (
					<ActivityIndicator size="small" color="#FFFFFF" />
				) : (
					<View className="flex-row items-center justify-center">
						<Icon name="trash-outline" size={18} color="#FFFFFF" />
						<Text className="ml-2 text-base font-medium text-white">
							{t('common.delete', 'Löschen')}
						</Text>
					</View>
				)}
			</View>
		</View>
	) : undefined;

	return (
		<BaseModal
			isVisible={isVisible}
			onClose={onClose}
			title={t('prompts.edit_prompt', 'Prompt bearbeiten')}
			animationType="none"
			primaryButtonText={t('common.save', 'Speichern')}
			secondaryButtonText={t('common.cancel', 'Abbrechen')}
			onPrimaryButtonPress={handleSave}
			primaryButtonLoading={isSaving}
			primaryButtonDisabled={isSaving}
			footerContent={customFooter}
		>
			<View className="w-full">
				<Text className={`mb-2 text-base font-medium ${isDark ? 'text-white' : 'text-gray-800'}`}>
					{t('prompts.title', 'Titel')}
				</Text>
				<Input
					value={title}
					onChangeText={setTitle}
					placeholder={t('prompts.title_placeholder', 'Titel eingeben...')}
					style={{ marginBottom: 16 }}
				/>

				<Text className={`mb-2 text-base font-medium ${isDark ? 'text-white' : 'text-gray-800'}`}>
					{t('prompts.prompt_text', 'Prompt')}
				</Text>
				<Input
					value={promptText}
					onChangeText={setPromptText}
					placeholder={t('prompts.prompt_placeholder', 'Prompt eingeben...')}
					multiline
					numberOfLines={5}
					textAlignVertical="top"
					style={{ minHeight: 120, marginBottom: 16, textAlignVertical: 'top' }}
				/>
			</View>
		</BaseModal>
	);
};

// Keine Styles mehr nötig, da wir NativeWind verwenden

export default PromptEditModal;
