import React, { memo } from 'react';
import { Row, Col, Tag, Card, Button } from 'antd';
import { CloseCircleFilled, WarningFilled, CheckCircleFilled, InfoCircleFilled } from '@ant-design/icons';

const DetailNotification = memo(function DetailNotification({ selectedData, onClose }) {
    if (!selectedData) {
        return null;
    }

    const getIconAndColor = (type) => {
        switch (type) {
            case 'critical':
                return {
                    IconComponent: CloseCircleFilled,
                    color: '#ff4d4f',
                    bgColor: '#fff1f0',
                    tagColor: 'error',
                };
            case 'warning':
                return {
                    IconComponent: WarningFilled,
                    color: '#faad14',
                    bgColor: '#fffbe6',
                    tagColor: 'warning',
                };
            case 'resolved':
                return {
                    IconComponent: CheckCircleFilled,
                    color: '#52c41a',
                    bgColor: '#f6ffed',
                    tagColor: 'success',
                };
            default:
                return {
                    IconComponent: InfoCircleFilled,
                    color: '#1890ff',
                    bgColor: '#e6f7ff',
                    tagColor: 'processing',
                };
        }
    };

    const { IconComponent, color, bgColor, tagColor } = getIconAndColor(selectedData.type);

    return (
        <Card
            title="Detail Notifikasi"
            extra={<Button onClick={onClose}>Tutup</Button>}
            style={{ height: '100%' }}
            bodyStyle={{ padding: '0 24px' }}
        >
            <div>
                {/* Header with Icon and Status */}
                <div
                    style={{
                        display: 'flex',
                        alignItems: 'center',
                        gap: '8px',
                        marginBottom: '0',
                        padding: '2px 0',
                        backgroundColor: '#fafafa',
                        borderRadius: '8px',
                    }}
                >
                    <div
                        style={{
                            width: '32px',
                            height: '32px',
                            borderRadius: '50%',
                            backgroundColor: bgColor,
                            color: color,
                            display: 'flex',
                            alignItems: 'center',
                            justifyContent: 'center',
                            fontSize: '18px',
                            flexShrink: 0,
                        }}
                    >
                        {IconComponent && <IconComponent style={{ fontSize: '18px' }} />}
                    </div>
                    <div style={{ flex: 1 }}>
                        <Tag color={tagColor} style={{ marginBottom: '2px', fontSize: '11px' }}>
                            {selectedData.type.toUpperCase()}
                        </Tag>
                        <div style={{ fontSize: '14px', fontWeight: 600, color: '#262626' }}>
                            {selectedData.title}
                        </div>
                    </div>
                </div>

                {/* Information Grid */}
                <Row gutter={[16, 0]}>
                    <Col span={12}>
                        <div style={{ marginBottom: '2px' }}>
                            <div style={{ fontSize: '11px', color: '#8c8c8c', marginBottom: '0' }}>
                                PLC
                            </div>
                            <div style={{ fontSize: '13px', color: '#262626', fontWeight: 500 }}>
                                {selectedData.plc}
                            </div>
                        </div>
                    </Col>
                    <Col span={12}>
                        <div style={{ marginBottom: '2px' }}>
                            <div style={{ fontSize: '11px', color: '#8c8c8c', marginBottom: '0' }}>Tag</div>
                            <div style={{ fontSize: '13px', color: '#262626', fontWeight: 500 }}>
                                {selectedData.tag}
                            </div>
                        </div>
                    </Col>
                </Row>

                <Row gutter={[16, 0]}>
                    <Col span={12}>
                        <div style={{ marginBottom: '2px' }}>
                            <div style={{ fontSize: '11px', color: '#8c8c8c', marginBottom: '0' }}>
                                Engineer
                            </div>
                            <div style={{ fontSize: '13px', color: '#262626', fontWeight: 500 }}>
                                {selectedData.engineer}
                            </div>
                        </div>
                    </Col>
                    <Col span={12}>
                        <div style={{ marginBottom: '2px' }}>
                            <div style={{ fontSize: '11px', color: '#8c8c8c', marginBottom: '0' }}>
                                Waktu
                            </div>
                            <div style={{ fontSize: '13px', color: '#262626', fontWeight: 500 }}>
                                {selectedData.time}
                            </div>
                        </div>
                    </Col>
                </Row>

                {/* Status */}
                <div style={{ marginBottom: '2px' }}>
                    <div style={{ fontSize: '11px', color: '#8c8c8c', marginBottom: '2px' }}>Status</div>
                    <Tag color={selectedData.isRead ? 'default' : 'blue'}>
                        {selectedData.isRead ? 'Sudah Dibaca' : 'Belum Dibaca'}
                    </Tag>
                </div>

                {/* Additional Info */}
                <div
                    style={{
                        marginTop: '0',
                        padding: '4px',
                        backgroundColor: '#f6f9ff',
                        borderRadius: '6px',
                        border: '1px solid #d6e4ff',
                    }}
                >
                    <div style={{ fontSize: '11px', color: '#595959' }}>
                        <strong>Catatan:</strong> Notifikasi ini telah dikirim ke engineer yang bersangkutan
                        untuk ditindaklanjuti sesuai dengan prosedur yang berlaku.
                    </div>
                </div>
            </div>
        </Card>
    );
});

export default DetailNotification;
