import {
  Box,
  Button,
  Container,
  Grid,
  Paper,
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableHead,
  TableRow,
  Typography,
} from '@mui/material'
import React from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { clearCart, selectCartSubtotal } from '../../../redux-store/CartStore/ducs'
import Axios from '../../../axios'
import { isAutheticated } from '../../../auth'
import Swal from 'sweetalert2'

const ReviewOrder = ({
  orderId,
  billTo,
  shipTo,
  paymentMode,
  cartItem,

  handleTabChange,
  setOrderId,
}) => {
  const subtotal = useSelector(selectCartSubtotal)
  const token = isAutheticated()
  const dispatch = useDispatch()

  // Calculate total GST for the entire cart
  const totalGST = cartItem.reduce((acc, item) => {
    // console.log(item)
    const gstAmount = (item.price * item.GST) / 100
    return acc + gstAmount * item.count
  }, 0)

  const handleConfirmOrder = async (e) => {
    e.preventDefault()
    if (!billTo || !shipTo || !paymentMode || !cartItem || !subtotal || !totalGST) {
      Swal.fire('All fields are required ')
    }
    try {
      const res = await Axios.post(
        '/api/order-place',
        {
          billTo,
          shipTo,
          paymentMode,
          grandTotal: subtotal + totalGST,
          gstTotal: totalGST,
          subtotal: subtotal,
          orderItems: cartItem,
        },
        {
          headers: {
            'Access-Control-Allow-Origin': '*',
            Authorization: `Bearer ${token}`,
            'Content-Type': 'application/json',
          },
        },
      )

      if (res.status === 201) {
        setOrderId(res?.data?.placedOrder?.uniqueId)

        Swal.fire('Success!', 'Your order has been placed successfully.', 'success')
        handleTabChange(e, 3)
      }
    } catch (error) {
      Swal.fire('Something went wrong', error.message, 'error')
    }
  }

  return (
    <Box>
      <Box sx={{ my: '2rem', background: '#fff', padding: '1rem', borderRadius: '0.8rem' }}>
        <Grid container spacing={2}>
          <Grid item sm={6} md={6} lg={6}>
            <Typography variant="h5" sx={{ mb: '0.5rem' }}>
              Bill Address
            </Typography>
            <Typography sx={{ mb: '0.5rem' }}>{billTo}</Typography>
          </Grid>
          <Grid item sm={6} md={6} lg={6}>
            <Typography variant="h5" sx={{ mb: '0.5rem' }}>
              Ship Address
            </Typography>
            <Typography sx={{ mb: '0.5rem' }}>{shipTo}</Typography>
          </Grid>
          <Grid item sm={6} md={6} lg={6}>
            <Typography variant="h5" sx={{ mb: '0.5rem' }}>
              Payment mode : <strong>{paymentMode}</strong>
            </Typography>
          </Grid>
        </Grid>
      </Box>

      <Box my={4}>
        <Grid container spacing={5}>
          <Grid item xs={12}>
            <Box>
              <TableContainer
                component={Paper}
                elevation={0}
                sx={{ borderBottom: '1.5px solid #CFCFD5', borderRadius: 0 }}
              >
                <Table sx={{ minWidth: 650 }} size="large">
                  <TableHead>
                    <TableRow>
                      <TableCell sx={{ fontWeight: 'bold' }}>Product</TableCell>
                      <TableCell sx={{ fontWeight: 'bold' }}>Category</TableCell>
                      <TableCell sx={{ fontWeight: 'bold' }}>Brand</TableCell>
                      <TableCell sx={{ fontWeight: 'bold' }}>SKU</TableCell>
                      <TableCell sx={{ fontWeight: 'bold' }}>Quantity</TableCell>
                      <TableCell sx={{ fontWeight: 'bold' }}>Price</TableCell>
                      <TableCell sx={{ fontWeight: 'bold' }}>GST</TableCell>
                      <TableCell sx={{ fontWeight: 'bold' }}>Subtotal</TableCell>
                    </TableRow>
                  </TableHead>
                  <TableBody>
                    {cartItem.map((row, index) => {
                      const gstAmount = (row.price * row.GST) / 100

                      return (
                        <TableRow
                          key={index}
                          sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
                        >
                          <TableCell>
                            <Box sx={{ display: 'flex' }}>
                              {/* <img
                                src={row.product.image[0].url}
                                alt={row.product.name}
                                style={{ width: '100px', height: '70px', marginRight: '1rem' }}
                              /> */}
                              <Box>
                                <Typography fontWeight={600}>{row.name}</Typography>
                              </Box>
                            </Box>
                          </TableCell>
                          <TableCell>{row.category.categoryName}</TableCell>
                          <TableCell>{row.brand.brandName}</TableCell>
                          <TableCell>{row.SKU}</TableCell>
                          <TableCell>{row.count}</TableCell>
                          <TableCell>₹{row.price}</TableCell>
                          <TableCell>₹{gstAmount}</TableCell>
                          <TableCell>₹{row.price * row.count}</TableCell>
                        </TableRow>
                      )
                    })}
                    <TableRow>
                      <TableCell colSpan={7} />
                      <TableCell>
                        Subtotal:<strong> ₹ {subtotal}</strong>
                      </TableCell>
                    </TableRow>
                    <TableRow>
                      <TableCell colSpan={7} />
                      <TableCell>
                        Total GST:<strong> ₹ {totalGST.toFixed(2)} </strong>
                      </TableCell>
                    </TableRow>

                    <TableRow>
                      <TableCell colSpan={7} />
                      <TableCell>
                        Grand Total: <strong> ₹ {subtotal + totalGST}</strong>
                      </TableCell>
                    </TableRow>
                  </TableBody>
                </Table>
              </TableContainer>
            </Box>
          </Grid>
        </Grid>
        <Box display={'flex'} justifyContent={'center'} mt={4} gap={10}>
          <Button variant="contained" color="primary" onClick={(e) => handleTabChange(e, 0)}>
            Update Order
          </Button>
          <Button variant="contained" color="success" onClick={handleConfirmOrder}>
            Confirm Order
          </Button>
        </Box>
      </Box>
    </Box>
  )
}

export default ReviewOrder