'use client';

import React, { useState, useEffect } from 'react';
import { Alert, Snackbar, IconButton, Box, Typography } from '@mui/material';
import { X as CloseIcon } from '@phosphor-icons/react';
import { Bell as BellIcon } from '@phosphor-icons/react';

interface NotificationData {
  id: string;
  title: string;
  body: string;
  timestamp: Date;
  data?: any;
}

interface NotificationBarProps {
  notification: NotificationData | null;
  onClose: () => void;
}

export function NotificationBar({ notification, onClose }: NotificationBarProps) {
  const [open, setOpen] = useState(false);

  useEffect(() => {
    if (notification) {
      setOpen(true);
    }
  }, [notification]);

  const handleClose = () => {
    setOpen(false);
    setTimeout(onClose, 300); // Allow animation to finish
  };

  if (!notification) return null;

  return (
    <Snackbar
      open={open}
      autoHideDuration={6000}
      onClose={handleClose}
      anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
      sx={{
        '& .MuiSnackbarContent-root': {
          padding: 0,
        },
      }}
    >
      <Alert
        severity="info"
        onClose={handleClose}
        sx={{
          width: '100%',
          minWidth: 300,
          maxWidth: 500,
          backgroundColor: '#ffffff',
          border: '1px solid #e0e0e0',
          borderRadius: 2,
          boxShadow: '0 4px 12px rgba(0, 0, 0, 0.1)',
          '& .MuiAlert-icon': {
            color: '#1976d2',
          },
          '& .MuiAlert-message': {
            padding: '8px 0',
          },
        }}
        icon={<BellIcon size={20} />}
        action={
          <IconButton
            aria-label="close"
            color="inherit"
            size="small"
            onClick={handleClose}
          >
            <CloseIcon size={18} />
          </IconButton>
        }
      >
        <Box>
          <Typography variant="subtitle2" fontWeight="bold" color="text.primary">
            {notification.title}
          </Typography>
          <Typography variant="body2" color="text.secondary" sx={{ mt: 0.5 }}>
            {notification.body}
          </Typography>
          <Typography variant="caption" color="text.disabled" sx={{ mt: 1, display: 'block' }}>
            {notification.timestamp.toLocaleTimeString()}
          </Typography>
        </Box>
      </Alert>
    </Snackbar>
  );
}