import React from 'react';
import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Paper, Typography, Box } from '@mui/material';
import { secondsToTime } from './common';

const NodeList = ({ nodes, selectedNodeId, setSelectedNodeId }) => {
    const handleRowClick = (key) => {
        if (key === selectedNodeId) {
            setSelectedNodeId(null);
            return;
        }
        setSelectedNodeId(Number(key));
    };

    const getModeColor = (mode) => {
        switch (mode) {
            case 'OPERATIONAL':
                return '';
            case 'INITIALIZATION':
                return 'warning.main';
            case 'MAINTENANCE':
                return 'secondary.main';
            case 'SOFTWARE_UPDATE':
                return 'success.main';
            case 'OFFLINE':
                return 'error.main';
            default:
                return 'error.main';
        }
    };

    const renderNodeRow = (key) => {
        const node = nodes[key];
        const status = node.status;
        const health = status.getConstant('health');
        const mode = status.getConstant('mode');
        const isSelected = Number(key) === Number(selectedNodeId);
        return (
            <TableRow
                key={key}
                onClick={() => handleRowClick(Number(key))}
                sx={{
                    cursor: 'pointer',
                    backgroundColor: isSelected ? 'rgba(204, 120, 92, 0.08)' : 'transparent',
                    '&:hover': {
                        backgroundColor: 'rgba(245, 240, 232, 0.9)',
                    },
                }}
            >
                <TableCell>{key}</TableCell>
                <TableCell sx={{ width: 150 }}>{node.name}</TableCell>
                <TableCell>{health}</TableCell>
                <TableCell sx={{ bgcolor: getModeColor(mode), color: getModeColor(mode) ? 'common.white' : 'inherit' }}>{mode}</TableCell>
                <TableCell>{secondsToTime(status.uptime_sec)}</TableCell>
                <TableCell>{node.status.vendor_specific_status_code}</TableCell>
            </TableRow>
        );
    };

    return (
        <Box
            component={Paper}
            sx={{ display: 'flex', flexDirection: 'column', flexGrow: 1, height: '50%', backgroundColor: 'background.paper', border: '1px solid', borderColor: 'divider' }}
        >
            <Box margin={1} sx={{ height: 20 }}>
                <Typography variant="caption" sx={{ color: 'text.secondary', fontWeight: 600, letterSpacing: 0.2 }}>Online Nodes</Typography>
            </Box>
            <TableContainer sx={{ overflow: 'auto' }}>
                <Table stickyHeader size="small">
                    <TableHead>
                        <TableRow>
                            <TableCell>NID</TableCell>
                            <TableCell>Name</TableCell>
                            <TableCell>Health</TableCell>
                            <TableCell>Mode</TableCell>
                            <TableCell>Uptime</TableCell>
                            <TableCell>VSSC</TableCell>
                        </TableRow>
                    </TableHead>
                    <TableBody>
                        {Object.keys(nodes).map((key) => renderNodeRow(key))}
                    </TableBody>
                </Table>
            </TableContainer>
        </Box>
    );
};

export default NodeList;