import React from 'react';
import { Pressable, StyleSheet, Text, View } from 'react-native';

import { useApp } from '@/src/app-context';

const palette = {
  info: '#1f2937',
  success: '#166534',
  error: '#991b1b',
};

export function ToastOverlay() {
  const { state, actions } = useApp();

  if (state.toasts.length === 0) return null;

  return (
    <View pointerEvents="box-none" style={styles.container}>
      {state.toasts.map((toast) => (
        <View key={toast.id} style={[styles.toast, { backgroundColor: palette[toast.type] }]}>
          <Text style={styles.message}>{toast.message}</Text>
          <Pressable onPress={() => actions.removeToast(toast.id)}>
            <Text style={styles.dismiss}>x</Text>
          </Pressable>
        </View>
      ))}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    position: 'absolute',
    top: 52,
    left: 12,
    right: 12,
    zIndex: 100,
    gap: 8,
  },
  toast: {
    borderRadius: 12,
    paddingHorizontal: 12,
    paddingVertical: 10,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    borderWidth: 1,
    borderColor: 'rgba(255,255,255,0.15)',
  },
  message: {
    color: '#f3f4f6',
    fontSize: 13,
    flex: 1,
    marginRight: 10,
  },
  dismiss: {
    color: '#f3f4f6',
    fontSize: 16,
    fontWeight: '600',
    paddingHorizontal: 6,
  },
});
