import React, { memo, useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { useBreadcrumb } from '../../../layout/LayoutBreadcrumb';
import { Typography, Table } from 'antd';

const { Text } = Typography;

// Mock Data
const initialData = [
    {
        key: '1',
        plantSubSection: 'Section A',
        device: 'Device 1',
        errorCode: 'E-101',
        status: 'Warning',
    },
    {
        key: '2',
        plantSubSection: 'Section B',
        device: 'Device 2',
        errorCode: 'E-102',
        status: 'Alarm',
    },
    {
        key: '3',
        plantSubSection: 'Section C',
        device: 'Device 3',
        errorCode: 'E-103',
        status: 'Done',
    },
    {
        key: '4',
        plantSubSection: 'Section A',
        device: 'Device 4',
        errorCode: 'E-104',
        status: 'Warning',
    },
];

const IndexReport = memo(function IndexReport() {
    const navigate = useNavigate();
    const { setBreadcrumbItems } = useBreadcrumb();
    const [data, setData] = useState(initialData);

    useEffect(() => {
        const token = localStorage.getItem('token');
        if (token) {
            setBreadcrumbItems([
                { title: <Text strong style={{ fontSize: '14px' }}>• History</Text> },
                { title: <Text strong style={{ fontSize: '14px' }}>Report</Text> }
            ]);
        } else {
            navigate('/signin');
        }
    }, []);

    const getTitleStyle = (statusName) => {
        let backgroundColor;
        switch (statusName.toLowerCase()) {
            case 'done':
                backgroundColor = '#52c41a'; // green
                break;
            case 'warning':
                backgroundColor = '#faad14'; // orange
                break;
            case 'alarm':
                backgroundColor = '#f5222d'; // red
                break;
            case 'critical':
                backgroundColor = '#000000'; // black
                break;
            default:
                backgroundColor = 'transparent';
        }
        return {
            backgroundColor,
            color: '#fff',
            padding: '2px 8px',
            borderRadius: '4px',
            display: 'inline-block'
        };
    };

    const columns = [
        {
            title: 'Plant Sub Section',
            dataIndex: 'plantSubSection',
            key: 'plantSubSection',
        },
        {
            title: 'Device',
            dataIndex: 'device',
            key: 'device',
        },
        {
            title: 'Error Code',
            dataIndex: 'errorCode',
            key: 'errorCode',
        },
        {
            title: 'Status',
            dataIndex: 'status',
            key: 'status',
            render: (status) => (
                <span style={getTitleStyle(status)}>{status}</span>
            ),
        },
    ];

    return (
        <div style={{ padding: 24, minHeight: 360 }}>
            <Table columns={columns} dataSource={data} />
        </div>
    );
});

export default IndexReport;
