// import React from 'react'
// import {
//   Dialog,
//   DialogContent,
//   DialogActions,
//   Box,
//   Typography,
//   Button,
//   Divider,
//   Table,
//   TableBody,
//   TableCell,
//   TableContainer,
//   TableHead,
//   TableRow,
//   Paper,
//   IconButton
// } from '@mui/material'
// import { styled } from '@mui/material/styles'
// import Icon from 'src/@core/components/icon'

// // ** Types
// interface CartItem {
//   id: string
//   productUid: string
//   name: string
//   price: number
//   quantity: number
//   image?: string
//   variation?: any
//   orderItemUid?: string
//   posUid?: string
//   orderUid?: string
//   stockQty?: number
//   productType?: string
//   isInventoryManaged?: boolean
//   selectedStaff?: string[]
// }

// interface Customer {
//   uid: string
//   firstName: string
//   lastName: string
//   emailId: string
//   phoneNumber: string
// }

// interface PaymentReceiptDialogProps {
//   open: boolean
//   onClose: () => void
//   cartItems: CartItem[]
//   customer: Customer | null
//   subtotal: number
//   discount?: number
//   totalPayable: number
//   receiptNumber?: string
//   transactionId?: string  // ✅ Will be received from API response
// }

// // ** Styled Components
// const ReceiptPaper = styled(Paper)(({ theme }) => ({
//   padding: theme.spacing(4),
//   maxWidth: 400,
//   margin: '0 auto',
//   backgroundColor: '#ffffff',
//   borderRadius: theme.spacing(2),
//   boxShadow: '0 8px 40px rgba(0,0,0,0.12)',
//   position: 'relative',
//   '&::before': {
//     content: '""',
//     position: 'absolute',
//     top: 0,
//     left: 0,
//     right: 0,
//     height: 4,
//     background: 'linear-gradient(90deg, #4CAF50, #66BB6A, #81C784)',
//     borderTopLeftRadius: theme.spacing(2),
//     borderTopRightRadius: theme.spacing(2)
//   }
// }))

// const SuccessBadge = styled(Box)(({ theme }) => ({
//   display: 'inline-flex',
//   alignItems: 'center',
//   gap: theme.spacing(1),
//   backgroundColor: '#E8F5E9',
//   color: '#2E7D32',
//   padding: theme.spacing(1.5, 3),
//   borderRadius: 50,
//   fontWeight: 600,
//   fontSize: '1rem',
//   marginBottom: theme.spacing(3)
// }))

// const ReceiptHeader = styled(Box)(({ theme }) => ({
//   textAlign: 'center',
//   marginBottom: theme.spacing(3),
//   paddingBottom: theme.spacing(3),
//   borderBottom: `2px dashed ${theme.palette.divider}`,
//   position: 'relative'
// }))

// const ReceiptFooter = styled(Box)(({ theme }) => ({
//   textAlign: 'center',
//   marginTop: theme.spacing(3),
//   paddingTop: theme.spacing(3),
//   borderTop: `2px dashed ${theme.palette.divider}`,
//   color: theme.palette.text.secondary
// }))

// const StyledTableRow = styled(TableRow)(({ theme }) => ({
//   '&:last-child td, &:last-child th': {
//     borderBottom: 'none'
//   }
// }))

// const CompanyName = styled(Typography)(({ theme }) => ({
//   fontWeight: 800,
//   fontSize: '1.5rem',
//   letterSpacing: 1,
//   color: theme.palette.primary.main,
//   marginBottom: theme.spacing(0.5)
// }))

// const BranchName = styled(Typography)(({ theme }) => ({
//   fontWeight: 500,
//   fontSize: '0.9rem',
//   color: theme.palette.text.secondary
// }))

// const ReceiptNumber = styled(Typography)(({ theme }) => ({
//   fontSize: '0.85rem',
//   color: theme.palette.text.secondary,
//   marginTop: theme.spacing(1)
// }))

// const DetailRow = styled(Box)(({ theme }) => ({
//   display: 'flex',
//   justifyContent: 'space-between',
//   padding: theme.spacing(0.5, 0),
//   '& .label': {
//     fontWeight: 500,
//     color: theme.palette.text.secondary,
//     minWidth: 100
//   },
//   '& .value': {
//     fontWeight: 500,
//     color: theme.palette.text.primary,
//     textAlign: 'right'
//   }
// }))

// const TotalRow = styled(Box)(({ theme }) => ({
//   display: 'flex',
//   justifyContent: 'space-between',
//   padding: theme.spacing(1.5, 0),
//   '& .label': {
//     fontWeight: 700,
//     fontSize: '1.1rem',
//     color: theme.palette.text.primary
//   },
//   '& .value': {
//     fontWeight: 700,
//     fontSize: '1.2rem',
//     color: theme.palette.primary.main
//   }
// }))

// const TransactionIdText = styled(Typography)(({ theme }) => ({
//   fontSize: '0.8rem',
//   fontFamily: 'monospace',
//   color: theme.palette.text.secondary,
//   wordBreak: 'break-all',
//   maxWidth: 200
// }))

// const PaymentReceiptDialog: React.FC<PaymentReceiptDialogProps> = ({
//   open,
//   onClose,
//   cartItems,
//   customer,
//   subtotal,
//   discount = 0,
//   totalPayable,
//   receiptNumber = 'RCP-2025-00142',
//   transactionId  // ✅ Now receives the actual transaction ID from API
// }) => {
//   // Format date
//   const currentDate = new Date()
//   const formattedDate = currentDate.toLocaleDateString('en-US', {
//     year: 'numeric',
//     month: 'short',
//     day: 'numeric'
//   })

//   // Format time
//   const formattedTime = currentDate.toLocaleTimeString('en-US', {
//     hour: '2-digit',
//     minute: '2-digit'
//   })

//   // Generate variation description
//   const getVariationDescription = (item: CartItem) => {
//     if (!item.variation || !item.variation.attributes) return ''
//     return item.variation.attributes
//       .map((attr: any) => `${attr.attributeName}: ${attr.value}`)
//       .join(' - ')
//   }

//   // Get customer full name
//   const customerName = customer 
//     ? `${customer.firstName} ${customer.lastName}` 
//     : 'Guest Customer'

//   const customerPhone = customer?.phoneNumber || 'N/A'
//   const customerEmail = customer?.emailId || 'N/A'

//   const handlePrint = () => {
//     window.print()
//   }

//   return (
//     <Dialog
//       open={open}
//       onClose={onClose}
//       maxWidth="sm"
//       fullWidth
//       PaperProps={{
//         sx: {
//           borderRadius: 3,
//           maxHeight: '90vh',
//           '& .MuiDialogContent-root': {
//             padding: 0
//           }
//         }
//       }}
//     >
//       <DialogContent sx={{ p: 0, overflow: 'auto' }}>
//         <ReceiptPaper id="receipt-content">
//           {/* Header */}
//           <ReceiptHeader>
//             <CompanyName variant="h4">LockTrust</CompanyName>
//             <BranchName variant="body2">Nashik Pune</BranchName>
//             <ReceiptNumber variant="body2">Receipt: {receiptNumber}</ReceiptNumber>
//           </ReceiptHeader>

//           {/* Success Badge */}
//           <Box sx={{ display: 'flex', justifyContent: 'center', mb: 3 }}>
//             <SuccessBadge>
//               <Icon icon="tabler:circle-check" width={24} height={24} />
//               Payment Successful!
//             </SuccessBadge>
//           </Box>

//           {/* Transaction Details */}
//           <Box sx={{ mb: 3 }}>
//             <DetailRow>
//               <Typography className="label">Receipt No.</Typography>
//               <Typography className="value">{receiptNumber}</Typography>
//             </DetailRow>
//             <DetailRow>
//               <Typography className="label">Date</Typography>
//               <Typography className="value">{formattedDate} • {formattedTime}</Typography>
//             </DetailRow>
//           </Box>

//           <Divider sx={{ my: 2 }} />

//           {/* Customer Details */}
//           <Typography variant="subtitle2" sx={{ fontWeight: 700, mb: 1.5, color: 'text.secondary' }}>
//             Customer Details
//           </Typography>
//           <Box sx={{ mb: 3 }}>
//             <DetailRow>
//               <Typography className="label">Name</Typography>
//               <Typography className="value">{customerName} ({customerPhone})</Typography>
//             </DetailRow>
//             <DetailRow>
//               <Typography className="label">Email</Typography>
//               <Typography className="value">{customerEmail}</Typography>
//             </DetailRow>
//             <DetailRow>
//               <Typography className="label">Transaction</Typography>
//               {/* ✅ Show the actual transaction ID from API */}
//               <TransactionIdText className="value">
//                 {transactionId || 'N/A'}
//               </TransactionIdText>
//             </DetailRow>
//           </Box>

//           <Divider sx={{ my: 2 }} />

//           {/* Order Items Table */}
//           <Typography variant="subtitle2" sx={{ fontWeight: 700, mb: 1.5, color: 'text.secondary' }}>
//             Order Items
//           </Typography>
          
//           <TableContainer component={Paper} elevation={0} sx={{ border: '1px solid', borderColor: 'divider', borderRadius: 1 }}>
//             <Table size="small">
//               <TableHead>
//                 <TableRow sx={{ bgcolor: 'grey.50' }}>
//                   <TableCell sx={{ fontWeight: 700, fontSize: '0.75rem' }}>Item</TableCell>
//                   <TableCell align="center" sx={{ fontWeight: 700, fontSize: '0.75rem' }}>Qty</TableCell>
//                   <TableCell align="right" sx={{ fontWeight: 700, fontSize: '0.75rem' }}>Amount</TableCell>
//                 </TableRow>
//               </TableHead>
//               <TableBody>
//                 {cartItems.map((item) => {
//                   const variationDesc = getVariationDescription(item)
//                   const itemName = variationDesc 
//                     ? `${item.name} - ${variationDesc}`
//                     : item.name

//                   // For service-based products, show staff count
//                   let displayName = itemName
//                   if (item.productType === 'ServiceBased' && item.selectedStaff) {
//                     displayName = `${itemName} (${item.selectedStaff.length} staff)`
//                   }

//                   return (
//                     <StyledTableRow key={item.id}>
//                       <TableCell>
//                         <Typography variant="body2" sx={{ fontWeight: 500 }}>
//                           {displayName}
//                         </Typography>
//                       </TableCell>
//                       <TableCell align="center">
//                         <Typography variant="body2">{item.quantity}</Typography>
//                       </TableCell>
//                       <TableCell align="right">
//                         <Typography variant="body2" sx={{ fontWeight: 600 }}>
//                           ${(item.price * item.quantity).toFixed(2)}
//                         </Typography>
//                       </TableCell>
//                     </StyledTableRow>
//                   )
//                 })}
//               </TableBody>
//             </Table>
//           </TableContainer>

//           <Divider sx={{ my: 2 }} />

//           {/* Totals */}
//           <Box>
//             <DetailRow>
//               <Typography className="label">Subtotal</Typography>
//               <Typography className="value">${subtotal.toFixed(2)}</Typography>
//             </DetailRow>
//             {discount > 0 && (
//               <DetailRow>
//                 <Typography className="label" sx={{ color: 'error.main' }}>Discount</Typography>
//                 <Typography className="value" sx={{ color: 'error.main' }}>
//                   -${discount.toFixed(2)}
//                 </Typography>
//               </DetailRow>
//             )}
//             <DetailRow>
//               <Typography className="label">Tax</Typography>
//               <Typography className="value">$0.00</Typography>
//             </DetailRow>
//             <Divider sx={{ my: 1 }} />
//             <TotalRow>
//               <Typography className="label">Total</Typography>
//               <Typography className="value">${totalPayable.toFixed(2)}</Typography>
//             </TotalRow>
//           </Box>

//           <Divider sx={{ my: 2 }} />

//           {/* Footer */}
//           <ReceiptFooter>
//             <Typography variant="body2" sx={{ fontWeight: 600, color: 'text.primary' }}>
//               Thanks for shopping with us!
//             </Typography>
//             <Typography variant="body2" sx={{ color: 'text.secondary', mt: 0.5 }}>
//               See you again soon.
//             </Typography>
//           </ReceiptFooter>
//         </ReceiptPaper>
//       </DialogContent>

//       {/* Actions */}
//       <DialogActions sx={{ 
//         p: 3, 
//         gap: 2, 
//         borderTop: '1px solid',
//         borderColor: 'divider',
//         bgcolor: 'grey.50',
//         borderRadius: '0 0 16px 16px'
//       }}>
//         <Button
//           variant="outlined"
//           onClick={handlePrint}
//           startIcon={<Icon icon="tabler:printer" />}
//           sx={{ flex: 1 }}
//         >
//           Print Receipt
//         </Button>
//         <Button
//           variant="contained"
//           onClick={onClose}
//           startIcon={<Icon icon="tabler:circle-check" />}
//           sx={{ flex: 1 }}
//         >
//           Close
//         </Button>
//       </DialogActions>
//     </Dialog>
//   )
// }

// export default PaymentReceiptDialog


// final design 
import React from 'react'
import {
  Dialog,
  DialogContent,
  DialogActions,
  Box,
  Typography,
  Button,
  Divider,
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableHead,
  TableRow,
  Paper
} from '@mui/material'
import { styled } from '@mui/material/styles'
import Icon from 'src/@core/components/icon'

// ** Types
interface CartItem {
  id: string
  productUid: string
  name: string
  price: number
  quantity: number
  image?: string
  variation?: any
  orderItemUid?: string
  posUid?: string
  orderUid?: string
  stockQty?: number
  productType?: string
  isInventoryManaged?: boolean
  selectedStaff?: string[]
}

interface Customer {
  uid: string
  firstName: string
  lastName: string
  emailId: string
  phoneNumber: string
}

interface PaymentReceiptDialogProps {
  open: boolean
  onClose: () => void
  cartItems: CartItem[]
  customer: Customer | null
  subtotal: number
  discount?: number
  totalPayable: number
  receiptNumber?: string
  transactionId?: string
  isError?: boolean  // ✅ Add error flag
  errorMessage?: string  // ✅ Add error message
}

// ** Palette (matches the target design)
const COLORS = {
  pageBg: '#ffffff',
  cardBg: '#ffffff',
  teal: '#0f766e',
  tealDark: '#0b5f58',
  mintBg: '#d7f0e6',
  errorBg: '#fde8e8',  // ✅ Error background
  totalBandBg: '#e1e8eb',
  textPrimary: '#101828',
  textSecondary: '#667085',
  divider: '#cfd8dc',
  discount: '#d92d20',
  tableHeaderBg: '#eef1f3',
  border: '#e4e9eb',
  error: '#d92d20'  // ✅ Error color
}

// ** Styled Components
const ReceiptPaper = styled(Paper)(({ theme }) => ({
  padding: theme.spacing(5, 4),
  maxWidth: 460,
  margin: '0 auto',
  backgroundColor: COLORS.pageBg,
  borderRadius: 0
}))

const IconBadge = styled(Box)<{ isError?: boolean }>(({ isError }) => ({
  width: 64,
  height: 64,
  borderRadius: 16,
  backgroundColor: isError ? COLORS.errorBg : COLORS.mintBg,
  color: isError ? COLORS.error : COLORS.teal,
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',
  margin: '0 auto'
}))

const CompanyName = styled(Typography)(() => ({
  fontWeight: 700,
  fontSize: '1.15rem',
  color: COLORS.teal,
  textAlign: 'center',
  marginTop: 12
}))

const ReceiptTag = styled(Typography)(() => ({
  fontSize: '0.75rem',
  fontWeight: 700,
  letterSpacing: 1,
  color: COLORS.textSecondary,
  textAlign: 'center',
  textTransform: 'uppercase',
  marginTop: 6
}))

const DashedDivider = styled(Box)(() => ({
  borderBottom: `2px dashed ${COLORS.divider}`,
  margin: '24px 0'
}))

const MetaLabel = styled(Typography)(() => ({
  fontSize: '0.7rem',
  fontWeight: 700,
  letterSpacing: 0.6,
  color: COLORS.textSecondary,
  textTransform: 'uppercase'
}))

const MetaValue = styled(Typography)(() => ({
  fontSize: '0.95rem',
  fontWeight: 700,
  color: COLORS.textPrimary,
  marginTop: 4
}))

const CustomerCard = styled(Box)(() => ({
  backgroundColor: COLORS.cardBg,
  borderRadius: 12,
  padding: '20px 20px 8px',
  border: `1px solid ${COLORS.border}`
}))

const SectionLabel = styled(Typography)(() => ({
  fontSize: '0.72rem',
  fontWeight: 800,
  letterSpacing: 0.8,
  color: COLORS.teal,
  textTransform: 'uppercase',
  paddingBottom: 10,
  borderBottom: `1px solid ${COLORS.border}`,
  marginBottom: 12
}))

const DetailRow = styled(Box)(() => ({
  display: 'flex',
  justifyContent: 'space-between',
  alignItems: 'flex-start',
  padding: '6px 0',
  '& .label': {
    fontSize: '0.85rem',
    fontWeight: 600,
    color: COLORS.textSecondary
  },
  '& .value': {
    fontSize: '0.9rem',
    fontWeight: 600,
    color: COLORS.textPrimary,
    textAlign: 'right'
  }
}))

const TransactionIdText = styled(Typography)(() => ({
  fontSize: '0.78rem',
  fontFamily: 'monospace',
  color: COLORS.textSecondary,
  wordBreak: 'break-all',
  textAlign: 'right',
  maxWidth: 220
}))

const StyledTableContainer = styled(TableContainer)(() => ({
  border: `1px solid ${COLORS.border}`,
  borderRadius: 10,
  overflow: 'hidden'
}))

const TotalsRow = styled(Box)(() => ({
  display: 'flex',
  justifyContent: 'space-between',
  padding: '5px 0',
  '& .label': {
    fontSize: '0.9rem',
    fontWeight: 600,
    color: COLORS.textSecondary
  },
  '& .value': {
    fontSize: '0.9rem',
    fontWeight: 700,
    color: COLORS.textPrimary
  }
}))

const TotalBand = styled(Box)(() => ({
  display: 'flex',
  justifyContent: 'space-between',
  alignItems: 'center',
  backgroundColor: COLORS.totalBandBg,
  borderRadius: 10,
  padding: '18px 20px',
  margin: '16px 0'
}))

const FooterText = styled(Typography)(() => ({
  textAlign: 'center',
  fontWeight: 700,
  fontSize: '0.95rem',
  color: COLORS.textPrimary
}))

const FooterSub = styled(Typography)(() => ({
  textAlign: 'center',
  fontSize: '0.7rem',
  fontWeight: 700,
  letterSpacing: 1,
  color: COLORS.textSecondary,
  textTransform: 'uppercase',
  marginTop: 6
}))

const PillButton = styled(Button)(() => ({
  borderRadius: 50,
  padding: '10px 20px',
  fontWeight: 700,
  textTransform: 'uppercase',
  letterSpacing: 0.4
}))

// ✅ Error Alert Component
const ErrorAlert = styled(Box)(() => ({
  backgroundColor: COLORS.errorBg,
  borderRadius: 12,
  padding: '16px 20px',
  border: `1px solid ${COLORS.error}`,
  display: 'flex',
  alignItems: 'center',
  gap: 12,
  marginBottom: 16
}))

const PaymentReceiptDialog: React.FC<PaymentReceiptDialogProps> = ({
  open,
  onClose,
  cartItems,
  customer,
  subtotal,
  discount = 0,
  totalPayable,
  receiptNumber = 'RCP-2025-00142',
  transactionId,
  isError = false,
  errorMessage = 'Payment failed. Please try again.'
}) => {
  const currentDate = new Date()
  const formattedDate = currentDate.toLocaleDateString('en-US', {
    year: 'numeric',
    month: 'short',
    day: 'numeric'
  })
  const formattedTime = currentDate.toLocaleTimeString('en-US', {
    hour: '2-digit',
    minute: '2-digit'
  })

  const getVariationDescription = (item: CartItem) => {
    if (!item.variation || !item.variation.attributes) return ''
    return item.variation.attributes
      .map((attr: any) => `${attr.attributeName}: ${attr.value}`)
      .join(' - ')
  }

  const customerName = customer ? `${customer.firstName} ${customer.lastName}` : 'Guest Customer'
  const customerPhone = customer?.phoneNumber || 'N/A'
  const customerEmail = customer?.emailId || 'N/A'

  const handlePrint = () => {
    window.print()
  }

  return (
    <Dialog
      open={open}
      onClose={onClose}
      maxWidth="sm"
      fullWidth
      PaperProps={{
        sx: {
          borderRadius: 3,
          maxHeight: '90vh',
          overflow: 'hidden',
          '& .MuiDialogContent-root': {
            padding: 0
          }
        }
      }}
    >
      <DialogContent sx={{ p: 0, overflow: 'auto', bgcolor: '#ffffff' }}>
        <ReceiptPaper id="receipt-content" elevation={0}>
          {/* Success/Error Icon + Heading */}
          <IconBadge isError={isError}>
            <Icon 
              icon={isError ? "tabler:alert-circle" : "tabler:circle-check"} 
              width={30} 
              height={30} 
            />
          </IconBadge>

          <Typography
            variant="h5"
            sx={{ 
              fontWeight: 800, 
              textAlign: 'center', 
              mt: 2, 
              color: isError ? COLORS.error : COLORS.textPrimary 
            }}
          >
            {isError ? 'Payment Failed!' : 'Payment Successful!'}
          </Typography>

          {/* ✅ Show error message if payment failed */}
          {isError && (
            <ErrorAlert>
              <Icon icon="tabler:alert-circle" width={20} height={20} color={COLORS.error} />
              <Typography variant="body2" sx={{ fontWeight: 600, color: COLORS.error }}>
                {errorMessage}
              </Typography>
            </ErrorAlert>
          )}

          <CompanyName>LockTrust</CompanyName>
          <ReceiptTag>Receipt: {receiptNumber}</ReceiptTag>

          <DashedDivider />

          {/* Receipt No / Date & Time */}
          <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
            <Box>
              <MetaLabel>Receipt No.</MetaLabel>
              <MetaValue>{receiptNumber}</MetaValue>
            </Box>
            <Box sx={{ textAlign: 'right' }}>
              <MetaLabel>Date &amp; Time</MetaLabel>
              <MetaValue>
                {formattedDate} • {formattedTime}
              </MetaValue>
            </Box>
          </Box>

          {/* Customer Details Card */}
          <Box sx={{ mt: 3 }}>
            <CustomerCard>
              <SectionLabel>Customer Details</SectionLabel>
              <DetailRow>
                <Typography className="label">Name</Typography>
                <Typography className="value">
                  {customerName} ({customerPhone})
                </Typography>
              </DetailRow>
              <DetailRow>
                <Typography className="label">Email</Typography>
                <Typography className="value">{customerEmail}</Typography>
              </DetailRow>
              <DetailRow>
                <Typography className="label">Transaction</Typography>
                <TransactionIdText>{transactionId || 'N/A'}</TransactionIdText>
              </DetailRow>
            </CustomerCard>
          </Box>

          {/* Order Items Table */}
          <Box sx={{ mt: 3 }}>
            {/* <StyledTableContainer component={Paper} elevation={0}> */}
            <StyledTableContainer>
              <Table size="small">
                <TableHead>
                  <TableRow sx={{ bgcolor: COLORS.tableHeaderBg }}>
                    <TableCell sx={{ fontWeight: 800, fontSize: '0.7rem', letterSpacing: 0.5, textTransform: 'uppercase', color: COLORS.textSecondary }}>
                      Item
                    </TableCell>
                    <TableCell align="center" sx={{ fontWeight: 800, fontSize: '0.7rem', letterSpacing: 0.5, textTransform: 'uppercase', color: COLORS.textSecondary }}>
                      Qty
                    </TableCell>
                    <TableCell align="right" sx={{ fontWeight: 800, fontSize: '0.7rem', letterSpacing: 0.5, textTransform: 'uppercase', color: COLORS.textSecondary }}>
                      Amount
                    </TableCell>
                  </TableRow>
                </TableHead>
                <TableBody>
                  {cartItems.map(item => {
                    const variationDesc = getVariationDescription(item)
                    const itemName = variationDesc ? `${item.name} - ${variationDesc}` : item.name

                    let displayName = itemName
                    if (item.productType === 'ServiceBased' && item.selectedStaff) {
                      displayName = `${itemName} (${item.selectedStaff.length} staff)`
                    }

                    return (
                      <TableRow key={item.id} sx={{ bgcolor: COLORS.cardBg }}>
                        <TableCell>
                          <Typography variant="body2" sx={{ fontWeight: 500, color: COLORS.textPrimary }}>
                            {displayName}
                          </Typography>
                        </TableCell>
                        <TableCell align="center">
                          <Typography variant="body2" sx={{ color: COLORS.textPrimary }}>
                            {item.quantity}
                          </Typography>
                        </TableCell>
                        <TableCell align="right">
                          <Typography variant="body2" sx={{ fontWeight: 700, color: COLORS.textPrimary }}>
                            ${(item.price * item.quantity).toFixed(2)}
                          </Typography>
                        </TableCell>
                      </TableRow>
                    )
                  })}
                </TableBody>
              </Table>
            </StyledTableContainer>
          </Box>

          {/* Totals */}
          <Box sx={{ mt: 2 }}>
            <TotalsRow>
              <Typography className="label">Subtotal</Typography>
              <Typography className="value">${subtotal.toFixed(2)}</Typography>
            </TotalsRow>
            {discount > 0 && (
              <TotalsRow>
                <Typography
                  sx={{ fontSize: '0.9rem', fontWeight: 600, color: `${COLORS.discount} !important` }}
                >
                  Discount
                </Typography>
                <Typography
                  sx={{ fontSize: '0.9rem', fontWeight: 700, color: `${COLORS.discount} !important` }}
                >
                  -${discount.toFixed(2)}
                </Typography>
              </TotalsRow>
            )}
            <TotalsRow>
              <Typography className="label">Tax</Typography>
              <Typography className="value">$0.00</Typography>
            </TotalsRow>
          </Box>

          <Divider sx={{ borderColor: COLORS.divider, mt: 1 }} />

          {/* Total Band */}
          <TotalBand>
            <Typography sx={{ fontWeight: 800, fontSize: '1.1rem', color: COLORS.textPrimary }}>
              Total Payable
            </Typography>
            <Typography sx={{ fontWeight: 800, fontSize: '1.6rem', color: 'primary.main' }}>
              ${totalPayable.toFixed(2)}
            </Typography>
          </TotalBand>

          <DashedDivider sx={{ mt: 0 }} />

          {/* Footer */}
          <FooterText>Thanks for shopping with us!</FooterText>
          <FooterSub>LockTrust Fintech Solutions</FooterSub>
        </ReceiptPaper>
      </DialogContent>

      {/* Actions */}
      <DialogActions
        sx={{
          p: 3,
          gap: 2,
          bgcolor: '#ffffff'
        }}
      >
        {!isError && (
          <PillButton
            variant="outlined"
            onClick={handlePrint}
            startIcon={<Icon icon="tabler:printer" />}
            sx={{ flex: 1 }}
          >
            Print Receipt
          </PillButton>
        )}
        <PillButton
          variant={isError ? "contained" : "contained"}
          onClick={onClose}
          startIcon={<Icon icon={isError ? "tabler:refresh" : "tabler:x"} />}
          sx={{ flex: 1 }}
          color={isError ? "error" : "primary"}
        >
          {isError ? 'Try Again' : 'Close'}
        </PillButton>
      </DialogActions>
    </Dialog>
  )
}

export default PaymentReceiptDialog