import React, { useState } from 'react';
import {
  Box,
  Typography,
  Paper,
  List,
  ListItem,
  ListItemText,
  Button,
  TextField,
  Dialog,
  DialogActions,
  DialogContent,
  DialogContentText,
  DialogTitle,
  CircularProgress
} from '@mui/material';
import authService from '../../../../services/authService';
import { useSnackbar } from "../../../../contexts/SnackbarContext";

const CartDetails = ({ cart, onClose, onUpdated, onDeleted }) => {
  const [editMode, setEditMode] = useState(false);
  const [totalPrice, setTotalPrice] = useState(cart?.attributes?.total_price || "");
  const [cartItems, setCartItems] = useState(cart.relationships?.cartItems || cart.relationships?.cart_items || []);
  const [loading, setLoading] = useState(false);
  const [deleteLoading, setDeleteLoading] = useState(false);
  const [openDeleteDialog, setOpenDeleteDialog] = useState(false);
  const { showSnackbar } = useSnackbar();
  if (!cart) return null;

  const handleSaveAll = async () => {
    setLoading(true);
    const payload = {
      data: {
        type: "cart",
        attributes: {
          totalPrice: Number(totalPrice),
        },
        relationships: {
          cartItems: cartItems.map(item => ({
            attributes: {
              quantity: Number(item.attributes.quantity),
            },
            relationships: {
              product: {
                data: {
                  id: item.relationships?.supplier_product?.id ||
                    item.relationships?.product?.data?.id
                }
              }
            }
          })),
        },
      },
    };

    try {
      const result = await authService.updateCart(cart.id, payload);
      if (result.success) {
        onUpdated(result.data);
        setEditMode(false);
      } else {
        // alert(result.message || 'Failed to update cart');
        showSnackbar(result.message || "Failed to update cart", "error");
      }
    } catch (error) {
      // alert('An error occurred while updating the cart');
      showSnackbar("An error occurred while updating the cart", "error");
    } finally {
      setLoading(false);
    }
  };

  const handleDeleteCart = async () => {
    setDeleteLoading(true);
    try {
      const result = await authService.deleteCart(cart.id);
      if (result.success) {
        onDeleted(cart.id);
        onClose();
      } else {
        // alert(result.message || 'Failed to delete cart');
        showSnackbar(result.message || "Failed to update cart", "error");
      }
    } catch (error) {
      // alert('An error occurred while deleting the cart');
      showSnackbar("An error occurred while deleting the cart", "error");
    } finally {
      setDeleteLoading(false);
      setOpenDeleteDialog(false);
    }
  };

  const handleChangeQuantity = (itemId, newQuantity) => {
    setCartItems(prev =>
      prev.map(item =>
        item.id === itemId
          ? { ...item, attributes: { ...item.attributes, quantity: newQuantity } }
          : item
      )
    );
  };

  return (
    <>
      <Paper sx={{ p: 3, mt: 2, borderRadius: 2, border: '1px solid #e0e0e0' }}>
        <Typography variant="h6" sx={{ mb: 2, fontWeight: 600 }}>
          Cart #{cart.id} Details
        </Typography>

        {editMode ? (
          <>
            <TextField
              label="Total Price"
              type="number"
              value={totalPrice}
              onChange={(e) => setTotalPrice(e.target.value)}
              fullWidth
              sx={{ mb: 2 }}
            />

            <Typography sx={{ mt: 2, fontWeight: 500 }}>Items:</Typography>
            <List>
              {cartItems.map(item => (
                <ListItem key={item.id} sx={{ pl: 0 }}>
                  <ListItemText
                    primary={`Item ID: ${item.id} | Product: ${item.relationships?.supplier_product?.id ||
                      item.relationships?.product?.data?.id
                      }`}
                    secondary={
                      <TextField
                        type="number"
                        size="small"
                        label="Quantity"
                        value={item.attributes.quantity}
                        onChange={(e) => handleChangeQuantity(item.id, Number(e.target.value))}
                        sx={{ width: '120px' }}
                      />
                    }
                  />
                </ListItem>
              ))}
            </List>

            <Box sx={{ mt: 2, display: "flex", gap: 2 }}>
              <Button variant="contained" onClick={handleSaveAll} disabled={loading}>
                {loading ? "Saving..." : "Save All"}
              </Button>
              <Button variant="outlined" onClick={() => setEditMode(false)}>
                Cancel
              </Button>
            </Box>
          </>
        ) : (
          <>
            <Typography>Total Price: {cart.attributes.total_price || cart.attributes.totalPrice}</Typography>
            <Typography>
              Created At: {new Date(cart.attributes.createdAt).toLocaleString()}
            </Typography>
            <Typography sx={{ mt: 2, fontWeight: 500 }}>Items:</Typography>
            <List>
              {cartItems.map(item => (
                <ListItem key={item.id} sx={{ pl: 0 }}>
                  <ListItemText
                    primary={`Item ID: ${item.id}`}
                    secondary={`Quantity: ${item.attributes.quantity} | Product: ${item.relationships?.supplier_product?.id ||
                      item.relationships?.product?.data?.id
                      }`}
                  />
                </ListItem>
              ))}
            </List>

            <Box sx={{ mt: 2, display: "flex", gap: 2 }}>
              <Button variant="contained" onClick={() => setEditMode(true)}>
                Edit
              </Button>
              <Button
                variant="contained"
                color="error"
                onClick={() => setOpenDeleteDialog(true)}
                sx={{ ml: 'auto' }}
              >
                Delete Cart
              </Button>
              <Button variant="outlined" onClick={onClose}>
                Back to Orders
              </Button>
            </Box>
          </>
        )}
      </Paper>

      {/* Delete Confirmation Dialog */}
      <Dialog
        open={openDeleteDialog}
        onClose={() => setOpenDeleteDialog(false)}
      >
        <DialogTitle>Confirm Delete</DialogTitle>
        <DialogContent>
          <DialogContentText>
            Are you sure you want to delete this cart? This action cannot be undone.
          </DialogContentText>
        </DialogContent>
        <DialogActions>
          <Button onClick={() => setOpenDeleteDialog(false)} disabled={deleteLoading}>
            Cancel
          </Button>
          <Button
            onClick={handleDeleteCart}
            color="error"
            variant="contained"
            disabled={deleteLoading}
          >
            {deleteLoading ? <CircularProgress size={24} /> : 'Delete'}
          </Button>
        </DialogActions>
      </Dialog>
    </>
  );
};

export default CartDetails;