import { Pressable, StyleSheet, Text, View } from 'react-native';
import { useInboxStore, type ApprovalItem, type InboxState } from '../../store/inbox-store';
import { colors } from '../../theme';

export default function InboxScreen() {
  const approvals = useInboxStore((state: InboxState) => state.approvals);
  const approve = useInboxStore((state: InboxState) => state.approve);
  const reject = useInboxStore((state: InboxState) => state.reject);

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Inbox</Text>
      <Text style={styles.body}>Review simple agent actions and approve or reject them from mobile.</Text>
      {approvals.map((item: ApprovalItem) => (
        <View key={item.id} style={styles.card}>
          <Text style={styles.cardTitle}>{item.title}</Text>
          <Text style={styles.cardBody}>{item.summary}</Text>
          <Text style={styles.status}>Status: {item.status}</Text>
          <View style={styles.actionRow}>
            <Pressable style={styles.approveButton} onPress={() => approve(item.id)}>
              <Text style={styles.approveText}>Approve</Text>
            </Pressable>
            <Pressable style={styles.rejectButton} onPress={() => reject(item.id)}>
              <Text style={styles.rejectText}>Reject</Text>
            </Pressable>
          </View>
        </View>
      ))}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    backgroundColor: colors.bgCanvas,
    gap: 14,
  },
  title: {
    color: colors.textPrimary,
    fontSize: 28,
    fontWeight: '700',
  },
  body: {
    color: colors.textSecondary,
    fontSize: 15,
    lineHeight: 21,
  },
  card: {
    backgroundColor: colors.surfaceCard,
    borderRadius: 16,
    borderWidth: 1,
    borderColor: colors.borderDefault,
    padding: 16,
    gap: 8,
  },
  cardTitle: {
    color: colors.textPrimary,
    fontSize: 16,
    fontWeight: '700',
  },
  cardBody: {
    color: colors.textSecondary,
    fontSize: 14,
  },
  status: {
    color: colors.textSecondary,
    fontSize: 13,
    textTransform: 'capitalize',
  },
  actionRow: {
    flexDirection: 'row',
    gap: 10,
  },
  approveButton: {
    backgroundColor: colors.accentPrimary,
    borderRadius: 10,
    paddingHorizontal: 12,
    paddingVertical: 10,
  },
  approveText: {
    color: colors.textPrimary,
    fontWeight: '700',
  },
  rejectButton: {
    borderWidth: 1,
    borderColor: colors.borderDefault,
    borderRadius: 10,
    paddingHorizontal: 12,
    paddingVertical: 10,
  },
  rejectText: {
    color: colors.textSecondary,
    fontWeight: '600',
  },
});
