import {
	Table,
	TableBody,
	TableCell,
	TableContainer,
	TableHead,
	TableRow,
	Paper,
	IconButton,
	Chip,
	Typography,
	Box,
} from '@mui/material';
import EditIcon from '@mui/icons-material/Edit';
import DeleteIcon from '@mui/icons-material/Delete';

const PalletsTable = ({ pallets, onEdit, onDelete, isLoading }) => {
	if (isLoading) {
		return (
			<Box sx={{ p: 3, textAlign: 'center' }}>
				<Typography>Loading pallets...</Typography>
			</Box>
		);
	}

	if (!pallets || pallets.length === 0) {
		return (
			<Box sx={{ p: 3, textAlign: 'center' }}>
				<Typography color='textSecondary'>No pallets added yet. Click "Add Pallet" to create one.</Typography>
			</Box>
		);
	}

	return (
		<TableContainer component={Paper} sx={{ mt: 3 }}>
			<Table>
				<TableHead>
					<TableRow sx={{ backgroundColor: '#f5f5f5' }}>
						<TableCell>
							<strong>Nickname</strong>
						</TableCell>
						<TableCell>
							<strong>Length (in)</strong>
						</TableCell>
						<TableCell>
							<strong>Width (in)</strong>
						</TableCell>
						<TableCell>
							<strong>Max Height (in)</strong>
						</TableCell>
						<TableCell>
							<strong>Pallet Height (in)</strong>
						</TableCell>
						<TableCell>
							<strong>Max Weight (LBS)</strong>
						</TableCell>
						<TableCell>
							<strong>Pallet Weight (LBS)</strong>
						</TableCell>
						<TableCell>
							<strong>Available</strong>
						</TableCell>
						<TableCell align='center'>
							<strong>Action</strong>
						</TableCell>
					</TableRow>
				</TableHead>
				<TableBody>
					{pallets.map(pallet => (
						<TableRow key={pallet.id} hover>
							<TableCell>{pallet.nickname}</TableCell>
							<TableCell>{pallet.pallet_length}</TableCell>
							<TableCell>{pallet.pallet_width}</TableCell>
							<TableCell>{pallet.max_height}</TableCell>
							<TableCell>{pallet.pallet_height}</TableCell>
							<TableCell>{pallet.max_weight}</TableCell>
							<TableCell>{pallet.pallet_weight}</TableCell>
							<TableCell>
								<Chip
									label={pallet.is_available == 1 ? 'Yes' : 'No'}
									color={pallet.is_available == 1 ? 'success' : 'default'}
									size='small'
								/>
							</TableCell>
							<TableCell align='center'>
								<IconButton
									size='small'
									color='primary'
									onClick={() => onEdit(pallet)}
									title='Edit'>
									<EditIcon fontSize='small' />
								</IconButton>
								<IconButton
									size='small'
									color='error'
									onClick={() => onDelete(pallet)}
									title='Delete'>
									<DeleteIcon fontSize='small' />
								</IconButton>
							</TableCell>
						</TableRow>
					))}
				</TableBody>
			</Table>
		</TableContainer>
	);
};

export default PalletsTable;