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

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

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

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

  const handleSubmit = () => {
    console.log("Submitting educational details:", 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">
            {/* Highest Qualification */}
            <div className="flex flex-col gap-4">
              <TextField
                fullWidth
                inputRef={inputRef}
                name="qualification"
                label="Highest Qualification"
                value={data.qualification}
                onChange={(e) => handleChange("qualification", e.target.value)}
                error={Boolean(errors.qualification)}
                helperText={errors.qualification}
                placeholder="Enter Highest Qualification"
                variant="outlined"
              />
            </div>

            {/* Field of Study */}
            <div className="flex flex-col gap-4">
              <TextField
                fullWidth
                name="fieldOfStudy"
                label="Field of Study"
                value={data.fieldOfStudy}
                onChange={(e) => handleChange("fieldOfStudy", e.target.value)}
                error={Boolean(errors.fieldOfStudy)}
                helperText={errors.fieldOfStudy}
                placeholder="Enter Field of Study"
                variant="outlined"
              />
            </div>

            {/* Occupation */}
            <div className="flex flex-col gap-4">
              <TextField
                fullWidth
                name="occupation"
                label="Occupation"
                value={data.occupation}
                onChange={(e) => handleChange("occupation", e.target.value)}
                error={Boolean(errors.occupation)}
                helperText={errors.occupation}
                placeholder="Enter Occupation"
                variant="outlined"
              />
            </div>

            {/* Company / Organization Name */}
            <div className="flex flex-col gap-4">
              <TextField
                fullWidth
                name="organization"
                label="Company / Organization Name"
                value={data.organization}
                onChange={(e) => handleChange("organization", e.target.value)}
                error={Boolean(errors.organization)}
                helperText={errors.organization}
                placeholder="Enter Company / Organization Name"
                variant="outlined"
              />
            </div>

            {/* Annual Income */}
            <div className="flex flex-col gap-4">
              <TextField
                fullWidth
                name="income"
                label="Annual Income"
                value={data.income}
                onChange={(e) => handleChange("income", e.target.value)}
                error={Boolean(errors.income)}
                helperText={errors.income}
                placeholder="Enter Annual Income"
                variant="outlined"
              />
            </div>

            {/* Work Location */}
            <div className="flex flex-col gap-4">
              <TextField
                fullWidth
                name="workLocation"
                label="Work Location"
                value={data.workLocation}
                onChange={(e) => handleChange("workLocation", e.target.value)}
                error={Boolean(errors.workLocation)}
                helperText={errors.workLocation}
                placeholder="Enter Work Location"
                variant="outlined"
              />
            </div>
          </div>

          <Grid
            item
            xs={12}
            style={{
              marginTop: "40px",
              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 EducationalDetailsForm;