import React from 'react'
import PropTypes from 'prop-types'
import { Typography, Space, Tag, Badge, Flex, Card } from 'antd'
import {
  BellOutlined,
  InfoCircleOutlined,
  ExclamationCircleOutlined,
  CheckCircleOutlined
} from '@ant-design/icons'
import TimeDisplay from './TimeDisplay'

const { Text, Paragraph } = Typography

const Notification = ({ notification, onMarkAsRead }) => {
  const getNotificationIcon = (type) => {
    switch (type) {
      case 'info':
        return <InfoCircleOutlined style={{ color: '#1890ff' }} />
      case 'warning':
        return <ExclamationCircleOutlined style={{ color: '#faad14' }} />
      case 'error':
        return <ExclamationCircleOutlined style={{ color: '#ff4d4f' }} />
      case 'success':
        return <CheckCircleOutlined style={{ color: '#52c41a' }} />
      default:
        return <BellOutlined style={{ color: '#8c8c8c' }} />
    }
  }

  const getNotificationColor = (type) => {
    switch (type) {
      case 'info':
        return 'blue'
      case 'warning':
        return 'orange'
      case 'error':
        return 'red'
      case 'success':
        return 'green'
      default:
        return 'default'
    }
  }

  const handleMarkAsRead = () => {
    if (onMarkAsRead && !notification.read) {
      onMarkAsRead(notification._id)
    }
  }

  return (
    <Card
      size='small'
      style={{
        backgroundColor: notification.read ? '#fafafa' : '#ffffff',
        cursor: 'pointer',
        transition: 'background-color 0.2s',
        border: notification.read ? '1px solid #f0f0f0' : '1px solid #d9d9d9'
      }}
      onClick={handleMarkAsRead}
      bodyStyle={{ padding: '12px' }}
    >
      <Flex align='start' gap='small'>
        <Badge dot={!notification.read} offset={[-5, 5]}>
          {getNotificationIcon(notification.type)}
        </Badge>
        <Flex vertical style={{ flex: 1 }} gap='small'>
          <Flex justify='space-between' align='center'>
            <Space>
              <Text strong={!notification.read}>{notification.title}</Text>
              <Tag color={getNotificationColor(notification.type)} size='small'>
                {notification.type}
              </Tag>
            </Space>
            <Text type='secondary' style={{ fontSize: '12px' }}>
              <TimeDisplay dateTime={notification.createdAt} showSince={true} />
            </Text>
          </Flex>
          <Paragraph
            ellipsis={{
              rows: 2,
              expandable: true,
              symbol: 'Show more'
            }}
            style={{ margin: 0 }}
          >
            {notification.message}
          </Paragraph>
          {notification.metadata && (
            <Text type='secondary' style={{ fontSize: '12px' }}>
              {JSON.stringify(notification.metadata)}
            </Text>
          )}
        </Flex>
      </Flex>
    </Card>
  )
}

Notification.propTypes = {
  notification: PropTypes.shape({
    _id: PropTypes.string.isRequired,
    title: PropTypes.string.isRequired,
    message: PropTypes.string.isRequired,
    type: PropTypes.oneOf(['info', 'warning', 'error', 'success', 'default'])
      .isRequired,
    read: PropTypes.bool.isRequired,
    createdAt: PropTypes.string.isRequired,
    metadata: PropTypes.object
  }).isRequired,
  onMarkAsRead: PropTypes.func
}

export default Notification
