import React, { useLayoutEffect, useState } from 'react';
import {
  View,
  Text,
  FlatList,
  TouchableOpacity,
  StatusBar,
} from 'react-native';
import { useNavigation } from '@react-navigation/native';
import Icon from 'react-native-vector-icons/Ionicons';
import { useTheme } from '../../theme';
import { getStyles } from './notification.styles';
import { INITIAL_NOTIFICATIONS } from '@mock-data';

export const NotificationScreen = () => {
  const navigation = useNavigation();
  const { theme: colors } = useTheme();
  const styles = getStyles(colors);

  const [notifications, setNotifications] = useState(INITIAL_NOTIFICATIONS);

  // Mark all as read header button action
  const handleMarkAllRead = () => {
    setNotifications(prev =>
      prev.map(item => ({ ...item, unread: false }))
    );
  };

  useLayoutEffect(() => {
    navigation.setOptions({
      headerTitle: 'Notifications',
      headerRight: () => {
        const hasUnread = notifications.some(n => n.unread);
        if (!hasUnread) return null;
        return (
          <TouchableOpacity
            style={styles.headerRightBtn}
            onPress={handleMarkAllRead}
            activeOpacity={0.7}
          >
            <Text style={styles.clearAllText}>Read All</Text>
          </TouchableOpacity>
        );
      },
    });
  }, [navigation, notifications, styles]);

  const toggleSingleRead = (id: string) => {
    setNotifications(prev =>
      prev.map(item =>
        item.id === id ? { ...item, unread: !item.unread } : item
      )
    );
  };

  const renderItem = ({ item }: { item: typeof INITIAL_NOTIFICATIONS[0] }) => {
    return (
      <TouchableOpacity
        style={[styles.card, item.unread && styles.unreadCard]}
        activeOpacity={0.7}
        onPress={() => toggleSingleRead(item.id)}
      >
        {/* Left Side Styled Icon Circle */}
        <View style={[styles.iconWrapper, { backgroundColor: `${item.iconColor}12` }]}>
          <Icon name={item.iconName} size={18} color={item.iconColor} />
        </View>

        {/* Content Section */}
        <View style={styles.contentContainer}>
          <View style={styles.titleRow}>
            <Text style={styles.title} numberOfLines={1}>
              {item.title}
            </Text>
            {item.unread && <View style={styles.unreadDot} />}
          </View>
          <Text style={styles.description}>{item.description}</Text>
          <Text style={styles.time}>{item.time}</Text>
        </View>
      </TouchableOpacity>
    );
  };

  return (
    <View style={styles.container}>
      {/* <StatusBar barStyle="light-content" /> */}
      {notifications.length > 0 ? (
        <FlatList
          data={notifications}
          keyExtractor={item => item.id}
          renderItem={renderItem}
          contentContainerStyle={styles.listContent}
          showsVerticalScrollIndicator={false}
        />
      ) : (
        <View style={styles.emptyContainer}>
          <Icon name="notifications-off-outline" size={48} color={colors.textMuted} />
          <Text style={styles.emptyTitle}>All caught up!</Text>
          <Text style={styles.emptySubtitle}>
            When you get new updates or alerts, they will show up here.
          </Text>
        </View>
      )}
    </View>
  );
};