import React, { useEffect, useRef } from "react";
import { useDispatch, useSelector } from "react-redux";
import { updatePartnerPreferences } from "../redux/registrationFormSlice";
import {
  Grid,
  TextField,
  FormControl,
  InputLabel,
  Select,
  MenuItem,
  Button,
} from "@mui/material";

const PartnerPreferencesForm = ({ onSubmitStep, onSkipStep, errors }) => {
  const dispatch = useDispatch();
  const data = useSelector((state) => state.registerform.partnerPreferences);
  const inputRef = useRef(null);

  useEffect(() => {
    inputRef.current?.focus();
  }, []);

  const handleChange = (field, value) => {
    dispatch(updatePartnerPreferences({ [field]: value }));
  };

  const handleSubmit = () => {
    console.log("Submitting partner preferences:", data);
    onSubmitStep();
  };

  return (
    <div className="w-full max-w-[1200px] mx-auto bg-[#fff2f2] py-6 md:px-2 rounded-8">
      <form noValidate autoComplete="off" style={{ padding: 16 }}>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-x-20 gap-y-10 mb-6">
          {/* Preferred Age Range */}
          <div className="flex flex-col gap-2">
            <label className="text-gray-900 text-[15px]">
              Preferred Age Range
            </label>
            <FormControl
              fullWidth
              variant="outlined"
              error={Boolean(errors.ageRange)}
            >
              <InputLabel id="ageRange-label">
                Select Preferred Age Range
              </InputLabel>
              <Select
                labelId="ageRange-label"
                label="Select Preferred Age Range"
                name="ageRange"
                value={data.ageRange}
                onChange={(e) => handleChange("ageRange", e.target.value)}
                
                inputRef={inputRef}
              >
               
                <MenuItem value="25 - 28">25 - 28</MenuItem>
                <MenuItem value="29 - 32">29 - 32</MenuItem>
                <MenuItem value="33 - 36">33 - 36</MenuItem>
              </Select>
              {errors.ageRange && (
                <p
                  style={{
                    color: "#d32f2f",
                    margin: "3px 14px 0 14px",
                    fontSize: "0.75rem",
                  }}
                >
                  {errors.ageRange}
                </p>
              )}
            </FormControl>
          </div>

          {/* Religion / Caste Preference */}
          <div className="flex flex-col gap-2">
            <label className="text-gray-900 text-[15px]">
              Religion / Caste Preference
            </label>
            <FormControl
              fullWidth
              variant="outlined"
              error={Boolean(errors.religionCaste)}
            >
              <InputLabel id="religionCaste-label">
                Select Religion / Caste Preference
              </InputLabel>
              <Select
                labelId="religionCaste-label"
                label="Select Religion / Caste Preference"
                name="religionCaste"
                value={data.religionCaste}
                onChange={(e) =>
                  handleChange("religionCaste", e.target.value)
                }
                
              >
                
                <MenuItem value="Hindu">Hindu</MenuItem>
                <MenuItem value="Muslim">Muslim</MenuItem>
                <MenuItem value="Christian">Christian</MenuItem>
                <MenuItem value="Any">Any</MenuItem>
              </Select>
              {errors.religionCaste && (
                <p
                  style={{
                    color: "#d32f2f",
                    margin: "3px 14px 0 14px",
                    fontSize: "0.75rem",
                  }}
                >
                  {errors.religionCaste}
                </p>
              )}
            </FormControl>
          </div>

          {/* Occupation Preference */}
          <div className="flex flex-col gap-2">
            <label className="text-gray-900 text-[15px]">
              Occupation Preference
            </label>
            <FormControl
              fullWidth
              variant="outlined"
              error={Boolean(errors.occupationPref)}
            >
              <InputLabel id="occupationPref-label">
                Select Occupation Preference
              </InputLabel>
              <Select
                labelId="occupationPref-label"
                label="Select Occupation Preference"
                name="occupationPref"
                value={data.occupationPref}
                onChange={(e) =>
                  handleChange("occupationPref", e.target.value)
                }
                
              >
                
                <MenuItem value="IT, Business">IT, Business</MenuItem>
                <MenuItem value="Doctor">Doctor</MenuItem>
                <MenuItem value="Engineer">Engineer</MenuItem>
                <MenuItem value="Any">Any</MenuItem>
              </Select>
              {errors.occupationPref && (
                <p
                  style={{
                    color: "#d32f2f",
                    margin: "3px 14px 0 14px",
                    fontSize: "0.75rem",
                  }}
                >
                  {errors.occupationPref}
                </p>
              )}
            </FormControl>
          </div>

          {/* Lifestyle & Habits Preference */}
          <div className="flex flex-col gap-2">
            <label className="text-gray-900 text-[15px]">
              Lifestyle & Habits Preference
            </label>
            <FormControl
              fullWidth
              variant="outlined"
              error={Boolean(errors.lifestylePref)}
            >
              <InputLabel id="lifestylePref-label">
                Select Lifestyle & Habits Preference
              </InputLabel>
              <Select
                labelId="lifestylePref-label"
                label="Select Lifestyle & Habits Preference"
                name="lifestylePref"
                value={data.lifestylePref}
                onChange={(e) =>
                  handleChange("lifestylePref", e.target.value)
                }
                
              >
                
                <MenuItem value="Non-Smoking, Non-Drinking">
                  Non-Smoking, Non-Drinking
                </MenuItem>
                <MenuItem value="Social Drinker">Social Drinker</MenuItem>
                <MenuItem value="Any">Any</MenuItem>
              </Select>
              {errors.lifestylePref && (
                <p
                  style={{
                    color: "#d32f2f",
                    margin: "3px 14px 0 14px",
                    fontSize: "0.75rem",
                  }}
                >
                  {errors.lifestylePref}
                </p>
              )}
            </FormControl>
          </div>

          {/* Prefer Qualification */}
          <div className="flex flex-col gap-2">
            <label className="text-gray-900 text-[15px]">
              Prefer Qualification
            </label>
            <TextField
              fullWidth
              name="qualificationPref"
              label="Enter prefer Qualification"
              value={data.qualificationPref}
              onChange={(e) =>
                handleChange("qualificationPref", e.target.value)
              }
              error={Boolean(errors.qualificationPref)}
              helperText={errors.qualificationPref}
              variant="outlined"
            />
          </div>

          {/* Occupation (text) */}
          <div className="flex flex-col gap-2">
            <label className="text-gray-900 text-[15px]">Occupation</label>
            <TextField
              fullWidth
              name="occupationText"
              label="Enter Occupation"
              value={data.occupationText}
              onChange={(e) =>
                handleChange("occupationText", e.target.value)
              }
              error={Boolean(errors.occupationText)}
              helperText={errors.occupationText}
              variant="outlined"
            />
          </div>

          {/* Prefer Annual Income */}
          <div className="flex flex-col gap-2">
            <label className="text-gray-900 text-[15px]">
              Prefer Annual Income
            </label>
            <TextField
              fullWidth
              name="incomePref"
              label="Enter Annual Income"
              value={data.incomePref}
              onChange={(e) => handleChange("incomePref", e.target.value)}
              error={Boolean(errors.incomePref)}
              helperText={errors.incomePref}
              variant="outlined"
            />
          </div>

          {/* Prefer Location */}
          <div className="flex flex-col gap-2">
            <label className="text-gray-900 text-[15px]">
              Prefer Location
            </label>
            <TextField
              fullWidth
              name="locationPref"
              label="Enter Prefer Location"
              value={data.locationPref}
              onChange={(e) => handleChange("locationPref", e.target.value)}
              error={Boolean(errors.locationPref)}
              helperText={errors.locationPref}
              variant="outlined"
            />
          </div>
        </div>

        <Grid
          item
          xs={12}
          style={{
            marginTop: 40,
            display: "flex",
            gap: 16,
            justifyContent: "center",
          }}
        >
          <Button variant="outlined" onClick={onSkipStep}>
            Skip
          </Button>
          <Button variant="contained" color="primary" onClick={handleSubmit}>
            Next
          </Button>
        </Grid>
      </form>
    </div>
  );
};

export default PartnerPreferencesForm;
