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';
import { trimNumber } from '../utils/numbers';

const PalletsTable = ({ pallets, onEdit, onDelete, onToggleAvailable, isToggling = false, 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>{trimNumber(pallet.pallet_length)}</TableCell>
							<TableCell>{trimNumber(pallet.pallet_width)}</TableCell>
							<TableCell>{trimNumber(pallet.max_height)}</TableCell>
							<TableCell>{trimNumber(pallet.pallet_height)}</TableCell>
							<TableCell>{trimNumber(pallet.max_weight)}</TableCell>
							<TableCell>{trimNumber(pallet.pallet_weight)}</TableCell>
							<TableCell>
								<Chip
									label={pallet.is_available == 1 ? 'Yes' : 'No'}
									color={pallet.is_available == 1 ? 'success' : 'default'}
									size='small'
									clickable
									disabled={isToggling}
									onClick={() => onToggleAvailable(pallet)}
									title={pallet.is_available == 1 ? 'Available: click to make it unavailable' : 'Not available: click to make it available'}
									aria-label={`${pallet.nickname} available: ${pallet.is_available == 1 ? 'Yes' : 'No'}`}
								/>
							</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;