import React, { useState } from 'react';
import {
  Box,
  TextField,
  Button,
  Typography,
  MenuItem,
  RadioGroup,
  FormControlLabel,
  Radio,
} from '@mui/material';
import Grid from '@mui/material/Grid2';

const ShippingForm = () => {
  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
      component="form"
      onSubmit={handleSubmit}
      sx={{
        width: '100%',
        mx: 'auto',
        mt: 4,
        display: 'flex',
        flexDirection: 'column',
        gap: 3,
      }}
    >
      <Grid container>
        {/* Left Column */}
        <Grid
          item
          size={{ xs: 12, md: 6 }}
          sx={{
            gap: 3,
            display: 'flex',
            flexDirection: 'column',
            order: { xs: 2, md: 1 }, // Flip order on xs
          }}
        >
          <FieldContainer label="Title">
            <TextField variant="outlined" fullWidth required />
          </FieldContainer>

          <FieldContainer label="First Name">
            <TextField variant="outlined" fullWidth required />
          </FieldContainer>

          <FieldContainer label="Last Name">
            <TextField variant="outlined" fullWidth required />
          </FieldContainer>

          <FieldContainer label="Country">
            <TextField select variant="outlined" fullWidth required>
              <MenuItem value="USA">USA</MenuItem>
              <MenuItem value="Canada">Canada</MenuItem>
              <MenuItem value="UK">UK</MenuItem>
              {/* Add more countries as needed */}
            </TextField>
          </FieldContainer>
        </Grid>

        {/* Right Column */}
        <Grid
          item
          size={{ xs: 12, md: 6 }}
          sx={{
            gap: 3,
            display: 'flex',
            flexDirection: 'column',
            px: { xs: 0, md: 5 },
            height: '100%',
            py: { xs: 3, md: 0 },
            order: { xs: 1, md: 2 }, // Flip order on xs
          }}
        >
          <Grid
            container
            spacing={2}
            sx={{
              position: 'relative',
              width: '100%',
              backgroundColor: '#F7FBFF',
              textAlign: 'center',
            }}
          >
            {/* First Section */}
            <Grid
              item
              size={12}
              sx={{ px: 5, py: 3, borderBottom: '1px solid #ddd', mx: 'auto' }}
            >
              <Typography variant="h6" sx={{ fontWeight: 500 }}>
                SHIPPING RESTRICTIONS AND DUTIES MAY APPLY
              </Typography>
            </Grid>

            {/* Second Section */}
            <Grid item size={12} sx={{ px: 5, py: 3, mx: 'auto' }}>
              <Typography variant="h6" sx={{ fontWeight: 500 }}>
                NEED HELP?
              </Typography>
              <Typography variant="body2" sx={{ mb: 1 }}>
                CALL US: +44 (0)10 2345 6789
              </Typography>
              <Typography variant="body2" sx={{ mb: 1 }}>
                EMAIL CUSTOMER CARE | SHIPPING INFORMATION
              </Typography>
              <Typography variant="body2" sx={{ mb: 1 }}>
                RETURNS & EXCHANGES
              </Typography>
            </Grid>
          </Grid>
        </Grid>
      </Grid>

      <FieldContainer label="Address Line 1">
        <TextField variant="outlined" fullWidth required multiline rows={3} />
      </FieldContainer>

      <FieldContainer label="Address Line 2">
        <TextField variant="outlined" fullWidth multiline rows={3} />
      </FieldContainer>

      <FieldContainer label="City">
        <TextField variant="outlined" fullWidth required />
      </FieldContainer>

      <FieldContainer label="Country/Province">
        <TextField variant="outlined" fullWidth required />
      </FieldContainer>

      <FieldContainer label="Postcode/Zip">
        <TextField variant="outlined" fullWidth required />
      </FieldContainer>

      <FieldContainer label="Telephone">
        <TextField variant="outlined" fullWidth required />
      </FieldContainer>

      <FieldContainer label="Mobile">
        <TextField variant="outlined" fullWidth />
      </FieldContainer>

      <FieldContainer label="Shipping Method">
        <RadioGroup
          value={shippingMethod}
          onChange={(e) => setShippingMethod(e.target.value)}
        >
          <FormControlLabel
            value="COD"
            control={<Radio />}
            label="Cash on Delivery (COD)"
          />
          <FormControlLabel
            value="Postage"
            control={<Radio />}
            label="Postage"
          />
        </RadioGroup>
      </FieldContainer>

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

export default ShippingForm;
