// src/screens/CalendarScreen.tsx
import React from 'react';
// Import SafeAreaView
import { StyleSheet, View, SafeAreaView } from 'react-native';
import { useTheme, FAB } from 'react-native-paper';
import { useNavigation } from '@react-navigation/native';
import { StackNavigationProp } from '@react-navigation/stack';

import CustomCalendarView from '../components/calendar/CustomCalendarView';
import { AppStackParamList } from '../navigation/AppNavigator';

type CalendarScreenNavigationProp = StackNavigationProp<AppStackParamList, 'Calendar'>;

const CalendarScreen = () => {
    const theme = useTheme();
    const navigation = useNavigation<CalendarScreenNavigationProp>();

    const styles = StyleSheet.create({
        // Style for SafeAreaView to ensure it fills the screen
        safeArea: {
            flex: 1,
            backgroundColor: theme.colors.background, // Apply background here
        },
        // Container inside SafeAreaView might not need flex: 1 anymore,
        // but keep it to ensure CustomCalendarView fills the safe area
        container: {
            flex: 1,
            position: 'relative' // Often added for absolute children, though View defaults to relative
        },
        fab: {
            position: 'absolute',
            // Change from margin: 16, right: 0, bottom: 0
            // Explicitly set distance from the bottom/right edges of the SAFE AREA
            right: 16,
            bottom: 16, // Adjust this value if needed (e.g., 20 or 24) for more padding
            backgroundColor: theme.colors.primary,
            zIndex: 10,
        },
    });

    return (
        // Use SafeAreaView as the outermost component
        <SafeAreaView style={styles.safeArea}>
            {/* Keep this inner View for structure if needed, or potentially remove */}
            {/* if CustomCalendarView handles its own layout fully */}
            <View style={styles.container}>
                <CustomCalendarView />

                {/* FAB is now positioned relative to the SafeAreaView's padded area */}
                <FAB
                    style={styles.fab}
                    icon="plus"
                    onPress={() => navigation.navigate('EventForm')}
                    color={theme.colors.onPrimary || '#ffffff'}
                />
            </View>
        </SafeAreaView>
    );
};

export default CalendarScreen;