import {
  Box,
  Typography,
  Button,
  TextField,
  Grid,
  FormControl,
  InputLabel,
  Select,
  MenuItem,
  type SelectChangeEvent,
} from '@mui/material';
import { useState, type ChangeEvent } from 'react';

export function UserProfileForm() {
  const [isEditing, setIsEditing] = useState(false);
  const [gender, setGender] = useState('');
  const [data, setData] = useState({
    firstName: 'محمد حسین',
    lastName: 'برزه‌گر',
    gender: 'مرد',
    nationalCode: '',
  });

  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
    setData((prev) => ({
      ...prev,
      [e.target.name]: e.target.value,
    }));
  };

  const toggleEdit = () => {
    setIsEditing((prev) => !prev);
  };
  const handleChangeGender = (e: SelectChangeEvent) => {
    setGender(e.target.value);
  };
  const displayValue = (value: string | null | undefined) => {
    return value && value.trim() !== '' ? value : 'تعیین نشده';
  };

  return (
    <div
      dir="rtl"
      style={{
        backgroundColor: '#F5F5F5',
        minHeight: '100vh',
        minWidth: '100vw',
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
      }}
    >
      <Box
        sx={{
          width: '500px',
          backgroundColor: 'white',
          border: '1px solid #ccc',
          borderRadius: 2,
          padding: 5,
          margin: '40px auto',
          boxShadow: 2,
          display: 'flex',
          flexDirection: 'column',
          gap: 2,
        }}
      >
        <Box
          sx={{
            display: 'flex',
            justifyContent: 'space-between',
            alignItems: 'center',
            backgroundColor: isEditing ? '#ADD8E6' : '#F5F5F5',
            p: 2,
            borderRadius: 1,
          }}
        >
          <Box sx={{ display: 'flex', flexDirection: 'column' }}>
            <Typography
              variant="h5"
              sx={{ color: isEditing ? '#1976d2' : 'gray' }}
            >
              اطلاعات شخصی من
            </Typography>
            <Typography
              sx={{ color: isEditing ? '#1976d2' : 'gray', fontSize: '13px' }}
            >
              این اطلاعات شما صرفا برای احراز هویت شما است و نزد هارمونی باقی
              می‌ماند
            </Typography>
          </Box>
          <Button
            onClick={toggleEdit}
            sx={{
              border: 0.5,
              borderColor: '#1976d2',
              borderRadius: '5px',
              backgroundColor: isEditing ? '#1976d2' : 'white',
              color: isEditing ? 'white' : '#1976d2',
              width: '80px',
              height: '30px',
            }}
          >
            {isEditing ? 'ذخیره' : 'ویرایش'}
          </Button>
        </Box>

        <Grid container spacing={0.5}>
          <Grid item xs={12} sm={6}>
            <Box sx={{ mb: 2 }}>
              <Typography
                variant="subtitle2"
                sx={{ color: 'gray', fontSize: '14px', ml: '34vh' }}
              >
                نام
              </Typography>
              {isEditing ? (
                <TextField
                  fullWidth
                  name="firstName"
                  label="نام"
                  value={data.firstName}
                  onChange={handleChange}
                  sx={{ width: '230px' }}
                  inputProps={{
                    sx: {
                      height: '12px',
                      fontSize: '16px',
                      fontWeight: 'bold',
                      direction: 'rtl',
                    },
                  }}
                />
              ) : (
                <Typography variant="h6" sx={{ fontWeight: 'bold' }}>
                  {displayValue(data.firstName)}
                </Typography>
              )}
            </Box>

            <Box>
              <Typography
                variant="subtitle2"
                sx={{ color: 'gray', fontSize: '14px' }}
              >
                جنسیت
              </Typography>
              {isEditing ? (
                <FormControl sx={{ width: '230px' }}>
                  <InputLabel id="sex-label">جنسیت</InputLabel>
                  <Select
                    labelId="sex-label"
                    id="sex"
                    value={gender}
                    label="جنسیت"
                    onChange={handleChangeGender}
                    sx={{
                      height: '45px',
                      '& .MuiSelect-select': {
                        paddingY: '10px',
                      },
                    }}
                  >
                    <MenuItem value="female">زن</MenuItem>
                    <MenuItem value="male">مرد</MenuItem>
                  </Select>
                </FormControl>
              ) : (
                <Typography variant="h6" sx={{ fontWeight: 'bold' }}>
                  {displayValue(data.gender)}
                </Typography>
              )}
            </Box>
          </Grid>

          <Grid item xs={12} sm={6}>
            <Box sx={{ mb: 2 }}>
              <Typography
                variant="subtitle2"
                sx={{ color: 'gray', fontSize: '14px' }}
              >
                نام خانوادگی
              </Typography>
              {isEditing ? (
                <TextField
                  fullWidth
                  name="lastName"
                  value={data.lastName}
                  label="نام خانوادگی"
                  onChange={handleChange}
                  sx={{ width: '230px' }}
                  inputProps={{
                    sx: {
                      height: '12px',
                    },
                  }}
                />
              ) : (
                <Typography variant="h6" sx={{ fontWeight: 'bold' }}>
                  {displayValue(data.lastName)}
                </Typography>
              )}
            </Box>

            <Box>
              <Typography
                variant="subtitle2"
                sx={{ color: 'gray', fontSize: '14px' }}
              >
                کد ملی
              </Typography>
              {isEditing ? (
                <TextField
                  fullWidth
                  name="nationalCode"
                  label="کد ملی"
                  value={data.nationalCode}
                  onChange={handleChange}
                  sx={{ width: '230px' }}
                  inputProps={{
                    sx: {
                      height: '12px',
                    },
                  }}
                />
              ) : (
                <Typography variant="h6" sx={{ fontWeight: 'bold' }}>
                  {displayValue(data.nationalCode)}
                </Typography>
              )}
            </Box>
          </Grid>
        </Grid>
      </Box>
    </div>
  );
}