// src/components/calendar/CalendarDayCell.tsx
import React from 'react';
import { View, StyleSheet, ScrollView } from 'react-native'; // Removed Dimensions unless used elsewhere
import { Text, useTheme } from 'react-native-paper';
import { format, isToday } from 'date-fns';

import { CalendarEvent } from '../../types/calendar';
import EventItem from './EventItem';

interface CalendarDayCellProps {
    date: Date;
    events: CalendarEvent[];
    isCurrentMonth?: boolean; // Optional, mainly for month view styling
    height?: number; // Optional fixed height
    width?: number; // Optional fixed width
}

const dateNumberSize = 24; // Define a size for the circle/text container

const CalendarDayCell: React.FC<CalendarDayCellProps> = ({ date, events, isCurrentMonth = true, height, width }) => {
    const theme = useTheme();
    const today = isToday(date);
    const dateNumber = format(date, 'd');

    // --- Define styles inside the component to access theme ---
    const styles = StyleSheet.create({
        cell: {
            flex: width ? undefined : 1,
            width: width,
            height: height,
            borderWidth: 0.5,
            borderTopWidth: 0,
            borderColor: theme.colors.outlineVariant,
            padding: 2,
            paddingTop: 0, // Keep this 0 if header handles top padding
            backgroundColor: theme.colors.background,
            overflow: 'hidden',
        },
        dayHeader: { // Renamed from dateNumberContainer for consistency with other views
            alignItems: 'center',
            justifyContent: 'center',
            marginBottom: 2,
            // Use minHeight instead of fixed height for flexibility
            minHeight: dateNumberSize + 4,
        },
        dateNumberContainer: { // Base container for the date number
            width: dateNumberSize,
            height: dateNumberSize,
            alignItems: 'center',
            justifyContent: 'center',
            // Circle properties moved to todayCircle
        },
        todayCircle: { // Style for the *filled* circle highlight
            // Inherit size/alignment from dateNumberContainer, just add background/radius
            backgroundColor: theme.colors.primary,
            borderRadius: dateNumberSize / 2,
        },
        dateNumber: { // Base style for the date number text
            fontSize: 12,
            // Base color determined by isCurrentMonth
            color: isCurrentMonth ? theme.colors.onSurface : theme.colors.onSurfaceDisabled,
            textAlign: 'center',
            padding: 0,
            includeFontPadding: false,
            // Base font weight (non-today)
            fontWeight: 'normal',
        },
        todayDateNumber: { // Specific style for text on today's date
             // Override color and weight for today
             color: theme.colors.onPrimary, // Contrast with primary background
             fontWeight: 'bold',
             // Retain isCurrentMonth dimming logic if needed (optional, usually today is highlighted regardless)
             // opacity: isCurrentMonth ? 1 : 0.6, // Example if you still want to slightly dim today if not in current month
        },
        eventsContainer: {
            flex: 1,
        },
    });
     // --- End of styles ---

    return (
        <View style={styles.cell}>
            {/* Renamed container View for consistency */}
            <View style={styles.dayHeader}>
                {/* Apply base container style, and add circle style conditionally */}
                <View style={[
                    styles.dateNumberContainer, // Base size and alignment
                    today && styles.todayCircle  // Conditional circle background
                ]}>
                    <Text style={[
                        styles.dateNumber, // Base text style (includes current month color)
                        today && styles.todayDateNumber // Conditional color/weight override for today
                    ]}>
                        {dateNumber}
                    </Text>
                </View>
            </View>
            <ScrollView style={styles.eventsContainer} nestedScrollEnabled={true}>
                {events
                    .sort((a, b) => new Date(a.start).getTime() - new Date(b.start).getTime())
                    .map(event => (
                        <EventItem key={event.id} event={event} showTime={false} />
                    ))}
            </ScrollView>
        </View>
    );
};

// Keep memoization
export default React.memo(CalendarDayCell);