import React, { useState, useEffect, useCallback, Fragment } from "react";
import { useNavigate } from "react-router-dom";
import { withI18n } from "../../i18n/withTranslation.js";
import {
  Box,
  Paper,
  Alert,
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableHead,
  TableRow,
  IconButton,
  Tooltip,
  CircularProgress,
  Typography,
  Dialog,
  DialogTitle,
  DialogContent,
  DialogActions,
  Button,
} from "@mui/material";
import SearchIcon from "@mui/icons-material/Search";
import CancelIcon from "@mui/icons-material/Cancel";
import OrderDetailsDialog from "./OrderDetailsDialog.js";
import WireOrderGirocode from "./WireOrderGirocode.js";
import ReadyForPickupNotice from "./ReadyForPickupNotice.js";
import {
  isWireGirocodeEligible,
  hasPendingWirePaymentOrder,
  WIRE_PAYMENT_PENDING_EVENT,
} from "../../utils/wireGirocodeEligibility.js";

// Constants
const getStatusTranslation = (status, deliveryMethod, t) => {
  const statusMap = {
    new: t ? t('orders.status.new') : "in Bearbeitung",
    pending: t ? t('orders.status.pending') : "Neu", 
    processing: t ? t('orders.status.processing') : "in Bearbeitung",
    paid: t ? t('orders.status.paid') : "Bezahlt",
    cancelled: t ? t('orders.status.cancelled') : "Storniert",
    shipped: deliveryMethod === "Abholung"
      ? (t ? t('orders.status.picked_up') : "Abgeholt")
      : (t ? t('orders.status.shipped') : "Verschickt"),
    delivered: deliveryMethod === "Abholung"
      ? (t ? t('orders.status.picked_up') : "Abgeholt")
      : (t ? t('orders.status.delivered') : "Geliefert"),
    awaiting_tracking: t ? t('orders.status.awaiting_tracking') : "Wird gepackt",
    ready_for_pickup: t ? t('orders.status.ready_for_pickup') : "Abholbereit",
  };
  return statusMap[status] || status;
};

const getStatusEmoji = (status, deliveryMethod) => {
  if (deliveryMethod === "Abholung" && status === "shipped") {
    return "✅";
  }

  if (deliveryMethod === "Abholung" && status === "delivered") {
    return "✅";
  }

  const statusEmojis = {
  new: "⚙️",
  pending: "⏳",
  processing: "🔄",
  paid: "🏦",
  cancelled: "❌",
  shipped: "🚚",
  delivered: "✅",
  awaiting_tracking: "📦",
  ready_for_pickup: "🏪",
};
  return statusEmojis[status] || "❓";
};

const statusColors = {
  new: "#ed6c02", // orange
  pending: "#ff9800", // orange for pending
  processing: "#2196f3", // blue for processing
  paid: "#2e7d32", // green
  cancelled: "#d32f2f", // red for cancelled
  shipped: "#2e7d32", // green
  delivered: "#2e7d32", // green
  awaiting_tracking: "#1565c0", // blue — packing / pre-ship
  ready_for_pickup: "#2e7d32", // green — ready at store
};

const currencyFormatter = new Intl.NumberFormat("de-DE", {
  style: "currency",
  currency: "EUR",
});

// Orders Tab Content Component
const OrdersTab = ({ orderIdFromHash, t }) => {
  const [orders, setOrders] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  const [selectedOrder, setSelectedOrder] = useState(null);
  const [isDetailsDialogOpen, setIsDetailsDialogOpen] = useState(false);
  const [cancelConfirmOpen, setCancelConfirmOpen] = useState(false);
  const [orderToCancel, setOrderToCancel] = useState(null);
  const [isCancelling, setIsCancelling] = useState(false);

  const navigate = useNavigate();

  const handleViewDetails = useCallback(
    (orderId) => {
      const orderToView = orders.find((order) => order.orderId === orderId);
      if (orderToView) {
        setSelectedOrder(orderToView);
        setIsDetailsDialogOpen(true);
        // Update the hash to include the order ID
        navigate(`/profile#${orderId}`, { replace: true });
      }
    },
    [orders, navigate]
  );

  const fetchOrders = useCallback(() => {

      setLoading(true);
      setError(null);
      window.socketManager.emit("getOrders", (response) => {
        if (response.success) {
          setOrders(response.orders);
          window.dispatchEvent(
            new CustomEvent(WIRE_PAYMENT_PENDING_EVENT, {
              detail: {
                pending: hasPendingWirePaymentOrder(response.orders),
              },
            })
          );
        } else {
          setError(response.error || "Failed to fetch orders.");
          window.dispatchEvent(
            new CustomEvent(WIRE_PAYMENT_PENDING_EVENT, {
              detail: { pending: false },
            })
          );
        }
        setLoading(false);
      });

  }, []);

  useEffect(() => {
    fetchOrders();
  }, [fetchOrders]);

  useEffect(() => {
    if (orderIdFromHash && orders.length > 0) {
      handleViewDetails(orderIdFromHash);
    }
  }, [orderIdFromHash, orders, handleViewDetails]);

  const getStatusDisplay = (status, deliveryMethod) => {
    return getStatusTranslation(status, deliveryMethod, t);
  };

  const getStatusColor = (status) => {
    return statusColors[status] || "#757575"; // default gray
  };

  const handleCloseDetailsDialog = () => {
    setIsDetailsDialogOpen(false);
    setSelectedOrder(null);
    navigate("/profile#orders", { replace: true });
  };

  // Check if order can be cancelled
  const isOrderCancelable = (order) => {
    const cancelableStatuses = ['new', 'pending', 'processing'];
    return cancelableStatuses.includes(order.status);
  };

  // Handle cancel button click
  const handleCancelClick = (order) => {
    setOrderToCancel(order);
    setCancelConfirmOpen(true);
  };

  // Handle cancel confirmation
  const handleConfirmCancel = () => {
    if (!orderToCancel) return;
    
    setIsCancelling(true);
    window.socketManager.emit('cancelOrder', { orderId: orderToCancel.orderId }, (response) => {
      setIsCancelling(false);
      setCancelConfirmOpen(false);
      
      if (response.success) {
        console.log('Order cancelled:', response.orderId);
        // Refresh orders list
        fetchOrders();
      } else {
        setError(response.error || 'Failed to cancel order');
      }
      
      setOrderToCancel(null);
    });
  };

  // Handle cancel dialog close
  const handleCancelDialogClose = () => {
    if (!isCancelling) {
      setCancelConfirmOpen(false);
      setOrderToCancel(null);
    }
  };

  if (loading) {
    return (
      <Box sx={{ p: { xs: 1, sm: 3 }, display: "flex", justifyContent: "center" }}>
        <CircularProgress />
      </Box>
    );
  }

  if (error) {
    return (
      <Box sx={{ p: { xs: 1, sm: 3 } }}>
        <Alert severity="error">{error}</Alert>
      </Box>
    );
  }

  return (
    <Box sx={{ p: { xs: 1, sm: 3 } }}>
      {orders.length > 0 ? (
        <TableContainer component={Paper}>
          <Table>
            <TableHead>
              <TableRow>
                <TableCell>{t ? t('orders.table.orderNumber') : 'Bestellnummer'}</TableCell>
                <TableCell>{t ? t('orders.table.date') : 'Datum'}</TableCell>
                <TableCell>{t ? t('orders.table.status') : 'Status'}</TableCell>
                <TableCell>{t ? t('orders.table.items') : 'Artikel'}</TableCell>
                <TableCell align="right">{t ? t('orders.table.total') : 'Summe'}</TableCell>
                <TableCell align="center">{t ? t('orders.table.actions') : 'Aktionen'}</TableCell>
              </TableRow>
            </TableHead>
            <TableBody>
              {orders.map((order) => {
                const displayStatus = getStatusDisplay(order.status, order.delivery_method);
                const total = order.items.reduce(
                  (acc, item) => acc + item.price * item.quantity_ordered,
                  0
                );
                return (
                  <Fragment key={order.orderId}>
                    <TableRow hover>
                      <TableCell>{order.orderId}</TableCell>
                      <TableCell>
                        {new Date(order.created_at).toLocaleDateString()}
                      </TableCell>
                      <TableCell>
                        <Box
                          sx={{
                            display: "flex",
                            alignItems: "center",
                            gap: "8px",
                            color: getStatusColor(order.status),
                          }}
                        >
                          <span style={{ fontSize: "1.2rem" }}>
                            {getStatusEmoji(order.status, order.delivery_method)}
                          </span>
                          <Typography
                            variant="body2"
                            component="span"
                            sx={{ fontWeight: "medium" }}
                          >
                            {displayStatus}
                          </Typography>
                        </Box>
                        {order.delivery_method === 'DHL' && order.trackingCode && (
                          <Box sx={{ mt: 0.5 }}>
                            <a
                              href={`https://www.dhl.de/de/privatkunden/dhl-sendungsverfolgung.html?piececode=${order.trackingCode}`}
                              target="_blank"
                              rel="noopener noreferrer"
                              style={{ fontSize: '0.85rem', color: '#d40511' }}
                            >
                              📦 {t ? t('orders.trackShipment') : 'Sendung verfolgen'}
                            </a>
                          </Box>
                        )}
                      </TableCell>
                      <TableCell>
                        {order.items
                          .filter(item => {
                            // Exclude delivery items - backend uses deliveryMethod ID as item name
                            const itemName = item.name || '';
                            return itemName !== 'DHL' && 
                                   itemName !== 'DPD' && 
                                   itemName !== 'Sperrgut' && 
                                   itemName !== 'Abholung';
                          })
                          .reduce(
                            (acc, item) => acc + item.quantity_ordered,
                            0
                          )}
                      </TableCell>
                      <TableCell align="right">
                        {currencyFormatter.format(total)}
                      </TableCell>
                      <TableCell align="center">
                        <Box sx={{ display: 'flex', gap: 1, justifyContent: 'center' }}>
                          <Tooltip title={t ? t('orders.tooltips.viewDetails') : 'Details anzeigen'}>
                            <IconButton
                              size="small"
                              color="primary"
                              onClick={() => handleViewDetails(order.orderId)}
                              aria-label={t ? t('orders.tooltips.viewDetails') : 'Details anzeigen'}
                            >
                              <SearchIcon />
                            </IconButton>
                          </Tooltip>
                          {isOrderCancelable(order) && (
                            <Tooltip title={t ? t('orders.tooltips.cancelOrder') : 'Bestellung stornieren'}>
                              <IconButton
                                size="small"
                                color="error"
                                onClick={() => handleCancelClick(order)}
                                aria-label={t ? t('orders.tooltips.cancelOrder') : 'Bestellung stornieren'}
                              >
                                <CancelIcon />
                              </IconButton>
                            </Tooltip>
                          )}
                        </Box>
                      </TableCell>
                    </TableRow>
                    {isWireGirocodeEligible(order) && (
                      <TableRow>
                        <TableCell
                          colSpan={6}
                          sx={{
                            py: 2,
                            px: { xs: 1, sm: 2 },
                            verticalAlign: "top",
                            bgcolor: "action.hover",
                            borderTop: (theme) => `1px solid ${theme.palette.divider}`,
                          }}
                        >
                          <WireOrderGirocode order={order} t={t} />
                        </TableCell>
                      </TableRow>
                    )}
                    {order.status === "ready_for_pickup" && (
                      <TableRow>
                        <TableCell
                          colSpan={6}
                          sx={{
                            py: 2,
                            px: { xs: 1, sm: 2 },
                            verticalAlign: "top",
                            bgcolor: "action.hover",
                            borderTop: (theme) => `1px solid ${theme.palette.divider}`,
                          }}
                        >
                          <ReadyForPickupNotice order={order} t={t} />
                        </TableCell>
                      </TableRow>
                    )}
                  </Fragment>
                );
              })}
            </TableBody>
          </Table>
        </TableContainer>
      ) : (
        <Alert severity="info">
          {t ? t('orders.noOrders') : 'Sie haben noch keine Bestellungen aufgegeben.'}
        </Alert>
      )}
      <OrderDetailsDialog
        open={isDetailsDialogOpen}
        onClose={handleCloseDetailsDialog}
        order={selectedOrder}
      />
      
      {/* Cancel Confirmation Dialog */}
      <Dialog
        open={cancelConfirmOpen}
        onClose={handleCancelDialogClose}
        maxWidth="sm"
        fullWidth
      >
        <DialogTitle>
          {t ? t('orders.cancelConfirm.title') : 'Bestellung stornieren'}
        </DialogTitle>
        <DialogContent>
          <Typography>
            {t ? t('orders.cancelConfirm.message') : 'Sind Sie sicher, dass Sie diese Bestellung stornieren möchten?'}
          </Typography>
          {orderToCancel && (
            <Typography variant="body2" sx={{ mt: 1, fontWeight: 'bold' }}>
              {t ? t('orders.table.orderNumber') : 'Bestellnummer'}: {orderToCancel.orderId}
            </Typography>
          )}
        </DialogContent>
        <DialogActions>
          <Button 
            onClick={handleCancelDialogClose}
            disabled={isCancelling}
          >
            {t ? t('common.cancel') : 'Abbrechen'}
          </Button>
          <Button 
            onClick={handleConfirmCancel}
            color="error"
            variant="contained"
            disabled={isCancelling}
          >
            {isCancelling 
              ? (t ? t('orders.cancelConfirm.cancelling') : 'Wird storniert...') 
              : (t ? t('orders.cancelConfirm.confirm') : 'Stornieren')
            }
          </Button>
        </DialogActions>
      </Dialog>
    </Box>
  );
};

export default withI18n()(OrdersTab);
