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

const boxTypeLabel = (box, fedexOneRateBoxes) => {
	if (+box.box_type !== 2) return 'Merchant Defined Box';

	const fedexBox = findFedexOneRateBox(fedexOneRateBoxes, box.box_code);

	return fedexBox ? fedexBox.nickname : 'FedEx One Rate box';
};

const BoxSizesTable = ({ boxes, onEdit, onDelete, isLoading, fedexOneRateBoxes = [] }) => {
	if (isLoading) {
		return (
			<Box sx={{ p: 3, textAlign: 'center' }}>
				<Typography>Loading boxes...</Typography>
			</Box>
		);
	}

	if (!boxes || boxes.length === 0) {
		return (
			<Box sx={{ p: 3, textAlign: 'center' }}>
				<Typography color='textSecondary'>No boxes added yet. Click "Add Box" 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>Type</strong>
						</TableCell>
						<TableCell>
							<strong>Length (in)</strong>
						</TableCell>
						<TableCell>
							<strong>Width (in)</strong>
						</TableCell>
						<TableCell>
							<strong>Height (in)</strong>
						</TableCell>
						<TableCell>
							<strong>Max Weight (LBS)</strong>
						</TableCell>
						<TableCell>
							<strong>Box Weight (LBS)</strong>
						</TableCell>
						<TableCell>
							<strong>Available</strong>
						</TableCell>
						<TableCell align='center'>
							<strong>Action</strong>
						</TableCell>
					</TableRow>
				</TableHead>
				<TableBody>
					{boxes.map(box => (
						<TableRow key={box.id} hover>
							<TableCell>{box.nickname}</TableCell>
							<TableCell>{boxTypeLabel(box, fedexOneRateBoxes)}</TableCell>
							<TableCell>{trimNumber(box.interior_length)}</TableCell>
							<TableCell>{trimNumber(box.interior_width)}</TableCell>
							<TableCell>{trimNumber(box.interior_height)}</TableCell>
							<TableCell>{trimNumber(box.max_weight)}</TableCell>
							<TableCell>{trimNumber(box.box_weight)}</TableCell>
							<TableCell>
								<Chip
									label={box.is_available == 1 ? 'Yes' : 'No'}
									color={box.is_available == 1 ? 'success' : 'default'}
									size='small'
								/>
							</TableCell>
							<TableCell align='center'>
								<IconButton
									size='small'
									color='primary'
									onClick={() => onEdit(box)}
									title='Edit'>
									<EditIcon fontSize='small' />
								</IconButton>
								<IconButton
									size='small'
									color='error'
									onClick={() => onDelete(box)}
									title='Delete'>
									<DeleteIcon fontSize='small' />
								</IconButton>
							</TableCell>
						</TableRow>
					))}
				</TableBody>
			</Table>
		</TableContainer>
	);
};

export default BoxSizesTable;