import { Add, Close, Delete, Inventory2, Remove } from '@mui/icons-material';
import {
  Button,
  Checkbox,
  Dialog,
  DialogActions,
  DialogContent,
  DialogContentText,
  DialogTitle,
  IconButton,
  Stack,
  Typography,
} from '@mui/material';
import { alpha } from '@mui/material/styles';
import { useState } from 'react';
import { PickItem } from '../models/PickItem';
import { Product } from '../models/Product';

interface PickItemRowProps {
  item: PickItem;
  product?: Product | null;
  onIncrementQuantity: () => void;
  onDecrementQuantity: () => void;
  onToggleCarton: () => void;
  onStatusChange: (status: PickItem['status']) => void;
  onDelete: () => void;
}

export const PickItemRow = ({
  item,
  product,
  onIncrementQuantity,
  onDecrementQuantity,
  onToggleCarton,
  onStatusChange,
  onDelete,
}: PickItemRowProps) => {
  const [isConfirmOpen, setIsConfirmOpen] = useState(false);
  const [isControlsOpen, setIsControlsOpen] = useState(false);
  const packagingLabel = item.is_carton
    ? product?.bulk_name ?? 'Carton'
    : product?.unit_type ?? 'Unit';

  const toggleStatus = (checked: boolean) => {
    onStatusChange(checked ? 'picked' : 'pending');
  };

  const handleConfirmDelete = () => {
    onDelete();
    setIsConfirmOpen(false);
  };

  return (
    <Stack
      direction="row"
      alignItems="center"
      justifyContent="space-between"
      spacing={1.5}
      sx={{
        p: 1,
        borderRadius: 1,
        bgcolor: 'background.paper',
        boxShadow: 1,
        cursor: 'pointer',
      }}
      onClick={() => setIsControlsOpen(true)}
      role="button"
      tabIndex={0}
      onKeyDown={(event) => {
        if (event.key === 'Enter' || event.key === ' ') {
          event.preventDefault();
          setIsControlsOpen(true);
        }
      }}
    >
      <Stack direction="row" spacing={1} alignItems="center" flex={1} minWidth={0}>
        <Checkbox
          edge="start"
          checked={item.status === 'picked'}
          onChange={(event) => toggleStatus(event.target.checked)}
          inputProps={{ 'aria-label': 'Toggle picked status' }}
          onClick={(event) => event.stopPropagation()}
        />
        <Stack spacing={0.5} minWidth={0} flex={1}>
          <Typography
            variant="subtitle1"
            noWrap
            sx={{ display: 'flex', alignItems: 'center', gap: 1 }}
          >
            <Typography
              component="span"
              variant="subtitle1"
              noWrap
              sx={{ minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis' }}
            >
              {product?.name ?? 'Unknown product'}
            </Typography>
            <Typography
              component="span"
              variant="subtitle1"
              sx={{ fontWeight: 700, whiteSpace: 'nowrap' }}
            >
              {item.quantity} {packagingLabel}
            </Typography>
          </Typography>
          <Typography variant="caption" color="text.secondary" noWrap>
            Tap to adjust quantity and packaging
          </Typography>
        </Stack>
      </Stack>

      <Dialog
        open={isControlsOpen}
        onClose={() => setIsControlsOpen(false)}
        fullWidth
        maxWidth="xs"
        aria-labelledby="item-controls-title"
      >
        <DialogTitle
          id="item-controls-title"
          sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}
        >
          <Typography variant="h6" noWrap sx={{ minWidth: 0, flex: 1 }}>
            {product?.name ?? 'Unknown product'}
          </Typography>
          <IconButton aria-label="Close controls" onClick={() => setIsControlsOpen(false)}>
            <Close />
          </IconButton>
        </DialogTitle>
        <DialogContent>
          <Stack spacing={2} alignItems="stretch">
            <Typography variant="subtitle1" sx={{ fontWeight: 700 }}>
              Quantity: {item.quantity} {packagingLabel}
            </Typography>
            <Stack direction="row" spacing={1} justifyContent="center" flexWrap="wrap">
              <IconButton
                aria-label={`Switch to ${item.is_carton ? 'unit' : 'carton'} packaging`}
                color={item.is_carton ? 'primary' : 'default'}
                onClick={onToggleCarton}
                sx={{
                  boxShadow: item.is_carton
                    ? (theme) => `0 0 0 8px ${alpha(theme.palette.primary.main, 0.15)}`
                    : 'none',
                }}
              >
                <Inventory2 />
              </IconButton>
              <IconButton
                aria-label="Decrease quantity"
                color="primary"
                onClick={onDecrementQuantity}
              >
                <Remove />
              </IconButton>
              <IconButton
                aria-label="Increase quantity"
                color="primary"
                onClick={onIncrementQuantity}
              >
                <Add />
              </IconButton>
              <IconButton
                color="error"
                onClick={() => setIsConfirmOpen(true)}
                aria-label="Delete item"
              >
                <Delete />
              </IconButton>
            </Stack>
          </Stack>
        </DialogContent>
      </Dialog>

      <Dialog
        open={isConfirmOpen}
        onClose={() => setIsConfirmOpen(false)}
        aria-labelledby="confirm-delete-title"
        aria-describedby="confirm-delete-description"
      >
        <DialogTitle id="confirm-delete-title">Delete item</DialogTitle>
        <DialogContent>
          <DialogContentText id="confirm-delete-description">
            {`Are you sure you want to delete ${product?.name ?? 'this product'} from the pick list?`}
          </DialogContentText>
        </DialogContent>
        <DialogActions>
          <Button onClick={() => setIsConfirmOpen(false)} aria-label="Cancel delete" autoFocus>
            Cancel
          </Button>
          <Button
            color="error"
            variant="contained"
            onClick={handleConfirmDelete}
            aria-label="Confirm delete"
          >
            Delete
          </Button>
        </DialogActions>
      </Dialog>
    </Stack>
  );
};