import React from 'react';
import { View, Text, StyleSheet, FlatList } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { Ionicons } from '@expo/vector-icons';
import { ScreenHeader } from '@/components/ui/ScreenHeader';
import { Card } from '@/components/ui/Card';
import { Colors, FontSize, Spacing, Radius } from '@/constants/theme';

// Static sample notifications — replace with API call in production
const SAMPLE_NOTIFICATIONS = [
  { id: 1, type: 'approval', title: 'Reservation Approved', message: 'Your reservation at Sunshine Boarding House has been approved.', time: '2 hours ago', read: false },
  { id: 2, type: 'payment', title: 'Payment Due', message: 'Your rent payment of ₱3,500 is due on March 25, 2026.', time: '1 day ago', read: false },
  { id: 3, type: 'reply', title: 'Inquiry Reply', message: 'The landlord replied to your inquiry about room availability.', time: '3 days ago', read: true },
];

const iconMap: Record<string, { name: any; color: string; bg: string }> = {
  approval: { name: 'checkmark-circle', color: Colors.success, bg: '#D1FAE5' },
  payment:  { name: 'card', color: Colors.warning, bg: '#FEF3C7' },
  reply:    { name: 'chatbubble', color: Colors.info, bg: '#DBEAFE' },
};

export default function NotificationsScreen() {
  return (
    <SafeAreaView style={styles.safe} edges={['top']}>
      <ScreenHeader title="Notifications" showBack />
      <FlatList
        data={SAMPLE_NOTIFICATIONS}
        keyExtractor={item => String(item.id)}
        contentContainerStyle={styles.content}
        renderItem={({ item }) => {
          const icon = iconMap[item.type] ?? iconMap.reply;
          return (
            <Card style={[styles.card, !item.read && styles.unread]}>
              <View style={styles.row}>
                <View style={[styles.iconBox, { backgroundColor: icon.bg }]}>
                  <Ionicons name={icon.name} size={22} color={icon.color} />
                </View>
                <View style={styles.info}>
                  <Text style={styles.title}>{item.title}</Text>
                  <Text style={styles.message}>{item.message}</Text>
                  <Text style={styles.time}>{item.time}</Text>
                </View>
                {!item.read && <View style={styles.dot} />}
              </View>
            </Card>
          );
        }}
      />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  safe: { flex: 1, backgroundColor: Colors.background },
  content: { padding: Spacing.md, gap: Spacing.sm },
  card: { padding: Spacing.md },
  unread: { borderLeftWidth: 3, borderLeftColor: Colors.primary },
  row: { flexDirection: 'row', alignItems: 'flex-start', gap: Spacing.md },
  iconBox: { width: 44, height: 44, borderRadius: Radius.md, alignItems: 'center', justifyContent: 'center' },
  info: { flex: 1 },
  title: { fontSize: FontSize.md, fontWeight: '700', color: Colors.text },
  message: { fontSize: FontSize.sm, color: Colors.textSecondary, marginTop: 2, lineHeight: 18 },
  time: { fontSize: FontSize.xs, color: Colors.textLight, marginTop: 4 },
  dot: { width: 8, height: 8, borderRadius: 4, backgroundColor: Colors.primary, marginTop: 4 },
});