import React, { useEffect, useState } from 'react'
import {
  Box,
  Button,
  Grid,
  Paper,
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableHead,
  TableRow,
  Typography,
} from '@mui/material'
import axios from 'axios' // Make sure you have axios installed
import { useNavigate, useParams } from 'react-router-dom'
import Axios from '../../axios'
import { isAutheticated } from '../../auth'

const OrderDetails = () => {
  const [order, setOrder] = useState(null)
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState(null)
  const token = isAutheticated()
  const navigate = useNavigate()
  const { id } = useParams() // Assuming order ID is passed as a route parameter
  const [ownerDetails, setOwnerDetails] = useState()

  const getData = async () => {
    let res = await Axios.get(`/api/v1/user/details`, {
      headers: {
        Authorization: `Bearer ${token}`,
      },
    })
    if (res.data.success) {
      setOwnerDetails({ ...res.data.user })
    }
  }
  useEffect(() => {
    const fetchOrderDetails = async () => {
      try {
        const response = await Axios.get(`/api/get-single-placed-order-pd/${id}`, {
          headers: {
            Authorization: `Bearer ${token}`,
          },
        }) // Adjust API endpoint as needed
        setOrder(response.data.singleOrder)

        setLoading(false)
      } catch (err) {
        setError(err.return_msg)
        setLoading(false)
      }
    }
    getData()
    fetchOrderDetails()
  }, [id])

  if (loading) {
    return <Typography>Loading...</Typography>
  }

  if (error) {
    return <Typography>Error: {error}</Typography>
  }

  if (!order) {
    return <Typography>No data found</Typography>
  }

  const {
    uniqueId,
    billTo,
    shipTo,
    paymentMode,
    orderItem,
    subtotal,
    gstTotal,
    grandTotal,
    statusHistory, // Assume this is an array of status objects
  } = order

  return (
    <Box>
      {/* Order Details Section */}

      <Box sx={{ my: '2rem', background: '#fff', padding: '1rem', borderRadius: '0.8rem' }}>
        <Box display="flex" justifyContent="space-between" alignItems="center" mb={2}>
          <Typography variant="h4" sx={{ flexGrow: 1, textAlign: 'center' }}>
            Order ID: {uniqueId}
          </Typography>
          <Button color="primary" onClick={() => navigate('/orders-placed')} variant="contained">
            Back
          </Button>
        </Box>

        <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 item sm={12} md={12} lg={12}>
            <Typography variant="h5" sx={{ mb: '0.5rem' }}>
              SBU: <strong>{ownerDetails?.SBU}</strong>
            </Typography>
          </Grid>
        </Grid>
      </Box>

      {/* Order Items Table */}
      <Box my={8}>
        <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>
                    {order.orderItem.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' }}>
                              <Box>
                                <Typography fontWeight={600}>{row.name}</Typography>
                              </Box>
                            </Box>
                          </TableCell>
                          <TableCell>{row.categoryName}</TableCell>
                          <TableCell>{row.brandName}</TableCell>
                          <TableCell>{row.SKU}</TableCell>
                          <TableCell>{row.quantity}</TableCell>
                          <TableCell>₹{row.price}</TableCell>
                          <TableCell>₹{gstAmount}</TableCell>
                          <TableCell>₹{row.price * row.quantity}</TableCell>
                        </TableRow>
                      )
                    })}
                    <TableRow>
                      <TableCell colSpan={7} />
                      <TableCell>
                        Subtotal:<strong> ₹ {subtotal}</strong>
                      </TableCell>
                    </TableRow>
                    <TableRow>
                      <TableCell colSpan={7} />
                      <TableCell>
                        Total GST:<strong> ₹ {gstTotal} </strong>
                      </TableCell>
                    </TableRow>
                    <TableRow>
                      <TableCell colSpan={7} />
                      <TableCell>
                        Grand Total: <strong> ₹ {grandTotal}</strong>
                      </TableCell>
                    </TableRow>
                  </TableBody>
                </Table>
              </TableContainer>
            </Box>
          </Grid>
        </Grid>
      </Box>

      {/* Status History Table */}
      {statusHistory.length > 0 && (
        <Box mt={8}>
          <Typography variant="h5" sx={{ mb: '1rem' }}>
            Status History
          </Typography>
          <TableContainer
            component={Paper}
            elevation={0}
            sx={{ borderBottom: '1.5px solid #CFCFD5', borderRadius: '0.8rem' }}
          >
            <Table sx={{ minWidth: 650 }} size="large">
              <TableHead>
                <TableRow>
                  <TableCell>Status</TableCell>
                  <TableCell>Timestamp</TableCell>
                </TableRow>
              </TableHead>
              <TableBody>
                {statusHistory.map((status, index) => (
                  <TableRow key={index}>
                    <TableCell>{status.status}</TableCell>
                    <TableCell>{new Date(status.timestamp).toLocaleString()}</TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          </TableContainer>
        </Box>
      )}
    </Box>
  )
}

export default OrderDetails