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

const DetailNotification = memo(function DetailNotification({ visible, onCancel, form, selectedData }) {
    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 } = selectedData ? getIconAndColor(selectedData.type) : {};

    return (
        <Modal
            title="Detail Notifikasi"
            open={visible}
            onCancel={onCancel}
            onOk={onCancel}
            okText="Tutup"
            cancelButtonProps={{ style: { display: 'none' } }}
            width={700}
        >
            {selectedData && (
                <div>
                    {/* Header with Icon and Status */}
                    <div
                        style={{
                            display: 'flex',
                            alignItems: 'center',
                            gap: '16px',
                            marginBottom: '24px',
                            padding: '16px',
                            backgroundColor: '#fafafa',
                            borderRadius: '8px',
                        }}
                    >
                        <div
                            style={{
                                width: '64px',
                                height: '64px',
                                borderRadius: '50%',
                                backgroundColor: bgColor,
                                color: color,
                                display: 'flex',
                                alignItems: 'center',
                                justifyContent: 'center',
                                fontSize: '32px',
                                flexShrink: 0,
                            }}
                        >
                            {IconComponent && <IconComponent style={{ fontSize: '32px' }} />}
                        </div>
                        <div style={{ flex: 1 }}>
                            <Tag color={tagColor} style={{ marginBottom: '8px', fontSize: '12px' }}>
                                {selectedData.type.toUpperCase()}
                            </Tag>
                            <div style={{ fontSize: '16px', fontWeight: 600, color: '#262626' }}>
                                {selectedData.title}
                            </div>
                        </div>
                    </div>

                    <Divider style={{ margin: '16px 0' }} />

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

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

                    <Divider style={{ margin: '16px 0' }} />

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

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

export default DetailNotification;