import React, { useState } from 'react';
import {
  Box,
  TextField,
  Button,
  Typography,
  MenuItem,
  RadioGroup,
  FormControlLabel,
  Radio,
  Link,
  Checkbox
} from '@mui/material';
import Table from '@mui/material/Table';
import TableBody from '@mui/material/TableBody';
import TableCell from '@mui/material/TableCell';
import TableContainer from '@mui/material/TableContainer';
import TableHead from '@mui/material/TableHead';
import TableRow from '@mui/material/TableRow';
import Grid from '@mui/material/Grid2';
import CreditCardIcon from '@mui/icons-material/CreditCard';
import AccountBalanceWalletIcon from '@mui/icons-material/AccountBalanceWallet';

const BillingForm = () => {

  const rows = [
    {
      img_src: 'https://via.placeholder.com/300',
      name: 'MELUR',
      description: 'Atma Sari New Raya Collection 2024',
      colour: 'black',
      quantity: 1,
      price: 335.50
    }
  ];

  const [shippingMethod, setShippingMethod] = useState('COD');

  const handleSubmit = (e) => {
    e.preventDefault();
    // Handle form submission logic
    console.log('Form submitted');
  };

  const FieldContainer = ({ label, children }) => (
    <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
      <Typography variant="body1" sx={{ fontWeight: 500, minWidth: 120 }}>
        {label}
      </Typography>
      {children}
    </Box>
  );

  return (
    <Box

      onSubmit={handleSubmit}
      sx={{
        width: '100%',
      }}
    >

      {/* Product TableList */}
      <Typography variant='body1' sx={{ fontWeight: "500", my: 5 }}>1. YOUR ORDER SUMMARY</Typography>

      <TableContainer>
        <Table sx={{ minWidth: 650, backgroundColor: "#F7FBFF" }}>
          <TableHead>
            <TableRow>
              <TableCell width={150}>
                <Typography variant='body1'>Item</Typography>
              </TableCell>
              <TableCell width={150}>
                {/* This is just for table offset */}
                <Typography variant='body1'></Typography>
              </TableCell>
              <TableCell align='center'>
                <Typography variant='body1'>Colour</Typography>
              </TableCell>
              <TableCell align='center'>

                <Typography variant='body1'>Quantity</Typography>
              </TableCell>
              <TableCell align='center'>
                <Typography variant='body1'>Unit Price</Typography>
              </TableCell>
              <TableCell align='center'>
                <Typography variant='body1'>Shipping</Typography>
              </TableCell>
              <TableCell align='center'>
                <Typography variant='body1'>Tax</Typography>
              </TableCell>
              <TableCell align='center'>
                <Typography variant='body1'>Duties</Typography>
              </TableCell>
            </TableRow>
          </TableHead>
          <TableBody>
            {rows.map((row) => (
              <TableRow
                key={row.id}
                sx={{
                  '& td, & th': { border: 0 },
                  '&:last-child td, &:last-child th': { border: 0 }
                }}
              >
                <TableCell component="th" scope="row">
                  <img
                    src={row.img_src}
                    alt={row.img_src}
                    style={{
                      width: 100,
                      height: 100,
                      aspectRatio: '4 / 4',
                      objectFit: 'cover',
                    }}
                  />
                </TableCell>
                <TableCell>
                  <Typography variant='body2' sx={{ fontWeight: "bold", mb: 1 }}>{row.name}</Typography>
                  <Typography variant='body2'>{row.description}</Typography>
                </TableCell>
                <TableCell align='center'>
                  <Typography variant='body1' sx={{ fontWeight: "bold" }} >{row.colour}</Typography>
                </TableCell>
                <TableCell align='center'>
                  <Typography variant='body1' sx={{ fontWeight: "bold" }}>{row.quantity}</Typography>
                </TableCell>
                <TableCell align='center'>
                  <Typography variant='body1' sx={{ fontWeight: "bold" }}>{`RM ${parseFloat(row.price).toFixed(2)}`}</Typography>
                </TableCell>
                <TableCell align='center'>
                  <Typography variant='body1' sx={{ fontWeight: "bold" }}>{`RM ${parseFloat(row.price).toFixed(2)}`}</Typography>
                </TableCell>
                <TableCell align='center'>
                  <Typography variant='body1' sx={{ fontWeight: "bold" }}>{`RM ${parseFloat(row.price).toFixed(2)}`}</Typography>
                </TableCell>
                <TableCell align='center'>
                  <Typography variant='body1' sx={{ fontWeight: "bold" }}>{`RM ${parseFloat(row.price).toFixed(2)}`}</Typography>
                </TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
        <Box sx={{
          backgroundColor: "#F7FBFF",
          borderTop: "1px solid rgba(0,0,0,0.1)",
          borderBottom: "1px solid rgba(0,0,0,0.1)",
          pl: 2,
          pr: 6,
          py: 2,
          mb: 5,
          display: "flex",
          justifyContent: "space-between"

        }}>
          <Link variant='body2' sx={{ textDecoration: "underline", color: "#000", fontWeight: "200", letterSpacing: 1 }}>ADD A GIFT CARD OR PROMOTION CODE</Link>
          <Typography variant='body2'> Total <span style={{ fontWeight: "bold" }}>{`RM ${parseFloat(250).toFixed(2)}`}</span> </Typography>
        </Box>
      </TableContainer>

      {/* Shipping Data */}
      <Typography variant='body1' sx={{ fontWeight: "500", my: 5 }}>2. REVIEW SHIPPING AND BILLING ADDRESS</Typography>
      <Grid container sx={{
        backgroundColor: "#F7FBFF",
        borderTop: "1px solid rgba(0,0,0,0.1)",
        borderBottom: "1px solid rgba(0,0,0,0.1)",
        p: 2,
        mb: 10
      }}>
        <Grid size={{xs:12, md:6}} sx={{mb:{xs:10, md:0}}}>
          <Typography variant="body2" sx={{ fontWeight: "bold", mb: 5 }}>SHIPPING ADDRESS</Typography>
          <Box sx={{ display: "flex", flexDirection: "column" }}>
            <Typography variant="body2" sx={{ fontWeight: "400" }}>Mr. David Olson</Typography>
            <Typography variant="body2" sx={{ fontWeight: "400" }}>4220 Raintree Boulevard</Typography>
            <Typography variant="body2" sx={{ fontWeight: "400" }}>Montezuma</Typography>
            <Typography variant="body2" sx={{ fontWeight: "400" }}>Indiana</Typography>
            <Typography variant="body2" sx={{ fontWeight: "400" }}>47862</Typography>
            <Typography variant="body2" sx={{ fontWeight: "400", mb: 5 }}>USA</Typography>
            <Link sx={{ color: "black", textDecoration: "underline", fontSize: 15 }}>CHANGE SHIPPING ADDRESS</Link>
          </Box>
        </Grid>
        <Grid size={{xs:12, md:6}}>
          <Typography variant="body2" sx={{ fontWeight: "bold", mb: 5 }}>BILLING ADDRESS</Typography>
          <Box sx={{ display: "flex", flexDirection: "column" }}>
            <Typography variant="body2" sx={{ fontWeight: "400" }}>Mr. David Olson</Typography>
            <Typography variant="body2" sx={{ fontWeight: "400" }}>4220 Raintree Boulevard</Typography>
            <Typography variant="body2" sx={{ fontWeight: "400" }}>Montezuma</Typography>
            <Typography variant="body2" sx={{ fontWeight: "400" }}>Indiana</Typography>
            <Typography variant="body2" sx={{ fontWeight: "400" }}>47862</Typography>
            <Typography variant="body2" sx={{ fontWeight: "400", mb: 5 }}>USA</Typography>
            <Link sx={{ color: "black", textDecoration: "underline", fontSize: 15 }}>CHANGE SHIPPING ADDRESS</Link>
          </Box>
        </Grid>
      </Grid>

      {/* Delivery Data */}
      <Typography variant='body1' sx={{ fontWeight: "500", my: 5 }}>3. DELIVERY METHOD</Typography>
      <Grid container sx={{
        backgroundColor: "#F7FBFF",
        borderTop: "1px solid rgba(0,0,0,0.1)",
        borderBottom: "1px solid rgba(0,0,0,0.1)",
        p: 2,
        mb: 10
      }}>
        <Grid size={{xs:12, md:6}} sx={{mb:{xs:10, md:0}}}>
          <Typography variant="body2" sx={{ fontWeight: "bold", mb: 5 }}>EXPRESS DELIVERY (Free)</Typography>
          <Box sx={{ display: "flex", flexDirection: "column" }}>
            <Typography variant="body2" sx={{ fontWeight: "400" }}>Delivered in 3-4 business days</Typography>
          </Box>
        </Grid>
        <Grid size={{xs:12, md:6}}>
          <Typography variant="body2" sx={{ fontWeight: "bold", mb: 5 }}>BILLING ADDRESS</Typography>
          <Box sx={{ display: "flex", flexDirection: "column" }}>
            <Typography variant="body2" sx={{ fontWeight: "400", mb: 5 }}>Caibre Premium Packaging</Typography>
            <Link sx={{ color: "black", textDecoration: "underline", fontSize: 15 }}>GIFT MESSAGE & PERSONALISED LABELS AVAILABLE</Link>
          </Box>
        </Grid>
      </Grid>

      {/* PAYMENT Data */}
      <Typography variant='body1' sx={{ fontWeight: "500", my: 5 }}>4. PAYMENT DETAILS</Typography>
      <Grid container sx={{
        backgroundColor: "#F7FBFF",
        borderTop: "1px solid rgba(0,0,0,0.1)",
        borderBottom: "1px solid rgba(0,0,0,0.1)",
        p: 2,
        mb: 5
      }}>
        <Grid size={{xs:12, md:6}}>
          <Typography variant="body2" sx={{ fontWeight: "400", mb: 5 }}>PAYMENT METHOD</Typography>
          <Grid container spacing={2}>

            {/* PAYMENT METHOD */}
            <Grid item size={12}>
              <Box>
                <Typography variant="body2" sx={{ fontWeight: "500", mb: 2 }}>
                  PAYMENT METHOD
                </Typography>
                <RadioGroup row>
                  <FormControlLabel
                    value="credit"
                    control={<Radio />}
                    label={
                      <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
                        <CreditCardIcon />
                      </Box>
                    }
                  />
                  <FormControlLabel
                    value="wallet"
                    control={<Radio />}
                    label={
                      <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
                        <AccountBalanceWalletIcon />
                      </Box>
                    }
                  />
                </RadioGroup>
              </Box>
            </Grid>

            {/* Cardholder Name Input */}
            <Grid item size={12}>
              <Box>
                <Typography variant="body2" sx={{ fontWeight: "500", mb: 2 }}>
                  CARDHOLDER NAME
                </Typography>
                <TextField
                  variant="outlined"
                  sx={{
                    width: "100%",
                    backgroundColor: "#FFF",
                  }}
                />
              </Box>
            </Grid>

            {/* Card Number Input */}
            <Grid item size={12}>
              <Box>
                <Typography variant="body2" sx={{ fontWeight: "500", mb: 2 }}>
                  CARD NUMBER
                </Typography>
                <Box
                  sx={{
                    display: "flex",
                    flexDirection: "row",
                    gap: 1,
                  }}
                >
                  {[...Array(4)].map((_, index) => (
                    <TextField
                      key={index}
                      variant="outlined"
                      inputProps={{ maxLength: 4 }}
                      sx={{
                        width: "100px",
                        backgroundColor: "#FFF",
                        textAlign: "center",
                      }}
                    />
                  ))}
                </Box>
              </Box>
            </Grid>




            {/* Expiration Date Input */}
            <Grid item size={12}>
              <Box>
                <Typography variant="body2" sx={{ fontWeight: "500", mb: 2 }}>
                  EXPIRATION DATE
                </Typography>
                <Box>
                  <Grid container spacing={2}>
                    <Grid item size={6}>
                      <TextField
                        select
                        fullWidth
                        variant="outlined"
                        defaultValue={1}
                        sx={{ backgroundColor: "#FFF" }}
                      >
                        {[...Array(12)].map((_, index) => (
                          <MenuItem key={index} value={index + 1}>
                            {index + 1}
                          </MenuItem>
                        ))}
                      </TextField>
                    </Grid>
                    <Grid item size={3}>
                      <TextField
                        select
                        fullWidth
                        variant="outlined"
                        defaultValue={2023}
                        sx={{ backgroundColor: "#FFF" }}
                      >
                        {[...Array(10)].map((_, index) => (
                          <MenuItem key={index} value={2023 + index}>
                            {2023 + index}
                          </MenuItem>
                        ))}
                      </TextField>
                    </Grid>
                    <Grid item size={3}>
                      <TextField
                        variant="outlined"
                        inputProps={{ maxLength: 4 }}
                        sx={{ backgroundColor: "#FFF" }}
                      />
                    </Grid>
                  </Grid>
                </Box>
              </Box>
            </Grid>

            {/* Securely Store Payment Details */}
            <Grid item size={12}>
              <Box>
                <FormControlLabel
                  control={<Checkbox />}
                  label="Securely store payment details for next purchase."
                />
              </Box>
            </Grid>

          </Grid>
        </Grid>
      </Grid>

      <Box sx={{display:"flex", flexDirection:"row"}}>
        <Button
          variant="contained"
          color="common.black"
          onClick={() => { window.location.href = "/checkout" }}
          sx={{
            backgroundColor: (theme) => theme.palette.common.black,
            color: "white",
            textTransform: "none",
            ml: "auto",
            px: 8,
            py: 2,
            width: "fit-content",
            "&:hover": {
              backgroundColor: (theme) => theme.palette.grey[900],
            },
          }}>CONFIRM PURCHASE</Button>
      </Box>

    </Box>
  );
};

export default BillingForm;
