thirukalyanamweb/src/feature/EducationalDetailsForm.jsx

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

const EducationalDetailsForm = ({
  onSubmitStep,
  onSkipStep,
  errors,
  onFieldChange,
}) => {
  const dispatch = useDispatch();
  const data = useSelector((state) => state.registerform.educationalDetails);
  const inputRef = useRef(null);
  const requiredMark = <span style={{ color: "#d32f2f" }}> *</span>;

  const { data: educationMasters, isLoading: isEducationMastersLoading } =
    useEducationMasters();
  const educationListQuery = useEducationList(data.fieldOfStudy);

  const studyFieldOptions = useMemo(() => {
    const raw = educationMasters;
    if (!raw) return [];
    if (Array.isArray(raw)) return raw;
    return raw.studyFields || raw.study_fields || raw.fieldOfStudy || [];
  }, [educationMasters]);

  const qualificationOptions = useMemo(() => {
    const raw = educationListQuery.data;
    if (!raw) return [];
    if (Array.isArray(raw)) return raw;
    return raw.education || raw.data || [];
  }, [educationListQuery.data]);

  const occupationOptions = useMemo(() => {
    const raw = educationMasters;
    if (!raw) return [];
    if (Array.isArray(raw)) return raw;
    return raw.occupation || raw.occupations || [];
  }, [educationMasters]);

  const employeeTypeOptions = useMemo(() => {
    const raw = educationMasters;
    if (!raw) return [];
    if (Array.isArray(raw)) return raw;
    return raw.employeeType || raw.employee_type || [];
  }, [educationMasters]);

  const annualIncomeOptions = useMemo(() => {
    const raw = educationMasters;
    if (!raw) return [];
    if (Array.isArray(raw)) return raw;
    return raw.annualIncome || raw.annual_income || [];
  }, [educationMasters]);

  const workLocationOptions = useMemo(() => {
    const raw = educationMasters;
    if (!raw) return [];
    if (Array.isArray(raw)) return [];
    return raw.workLocation || raw.work_location || raw.workLocations || [];
  }, [educationMasters]);

  const getOptionLabel = (item, fallback = "") => {
    if (!item) return fallback;
    if (typeof item === "string") return item;
    return (
      item.study_field_name ||
      item.education_name ||
      item.occupation_name ||
      item.employee_type_name ||
      item.annual_income_name ||
      item.work_location_name ||
      item.name ||
      fallback
    );
  };

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

  const handleChange = (field, value) => {
    const updates = { [field]: value };
    const fieldsToClear = [field];
    if (field === "fieldOfStudy") {
      updates.qualification = "";
      fieldsToClear.push("qualification");
    }
    dispatch(updateEducationalDetails(updates));
    if (onFieldChange) onFieldChange(fieldsToClear);
  };

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

  return (
    <>
      <div className="w-full max-w-[1200px] mx-auto  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">
            {/* Field of Study */}
            <div className="flex flex-col gap-4">
              <label className="text-gray-900 text-[15px]">
                Field of Study{requiredMark}
              </label>
              <FormControl
                fullWidth
                variant="outlined"
                error={Boolean(errors.fieldOfStudy)}
              >
                <InputLabel id="fieldOfStudy-label">
                  Select Field of Study
                </InputLabel>
                <Select
                  labelId="fieldOfStudy-label"
                  label="Select Field of Study"
                  name="fieldOfStudy"
                  value={data.fieldOfStudy}
                  onChange={(e) => handleChange("fieldOfStudy", e.target.value)}
                  inputRef={inputRef}
                  disabled={isEducationMastersLoading}
                  sx={{
                    "& .MuiSelect-select.Mui-disabled": {
                      cursor: "not-allowed",
                    },
                  }}
                >
                  {studyFieldOptions.map((field) => (
                    <MenuItem key={field.id ?? field} value={field.id ?? field}>
                      {getOptionLabel(field, "Field of Study")}
                    </MenuItem>
                  ))}
                </Select>
                {errors.fieldOfStudy && (
                  <p
                    style={{
                      color: "#d32f2f",
                      margin: "3px 14px 0 14px",
                      fontSize: "0.75rem",
                    }}
                  >
                    {errors.fieldOfStudy}
                  </p>
                )}
              </FormControl>
            </div>

            {/* Highest Qualification */}
            <div className="flex flex-col gap-4">
              <label className="text-gray-900 text-[15px]">
                Highest Educational Qualification{requiredMark}
              </label>
              <FormControl
                fullWidth
                variant="outlined"
                error={Boolean(errors.qualification)}
              >
                <InputLabel id="qualification-label">
                  Select Highest Qualification
                </InputLabel>
                <Select
                  labelId="qualification-label"
                  label="Select Highest Qualification"
                  name="qualification"
                  value={data.qualification}
                  onChange={(e) => handleChange("qualification", e.target.value)}
                  disabled={
                    !data.fieldOfStudy || educationListQuery.isLoading
                  }
                  sx={{
                    "& .MuiSelect-select.Mui-disabled": {
                      cursor: "not-allowed",
                    },
                  }}
                >
                  {qualificationOptions.map((item) => (
                    <MenuItem key={item.id ?? item} value={item.id ?? item}>
                      {getOptionLabel(item, "Qualification")}
                    </MenuItem>
                  ))}
                </Select>
                {errors.qualification && (
                  <p
                    style={{
                      color: "#d32f2f",
                      margin: "3px 14px 0 14px",
                      fontSize: "0.75rem",
                    }}
                  >
                    {errors.qualification}
                  </p>
                )}
              </FormControl>
            </div>

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

            {/* Occupation */}
            <div className="flex flex-col gap-4">
              <label className="text-gray-900 text-[15px]">
                Occupation{requiredMark}
              </label>
              <FormControl
                fullWidth
                variant="outlined"
                error={Boolean(errors.occupation)}
              >
                <InputLabel id="occupation-label">Select Occupation</InputLabel>
                <Select
                  labelId="occupation-label"
                  label="Select Occupation"
                  name="occupation"
                  value={data.occupation}
                  onChange={(e) => handleChange("occupation", e.target.value)}
                  disabled={isEducationMastersLoading}
                  sx={{
                    "& .MuiSelect-select.Mui-disabled": {
                      cursor: "not-allowed",
                    },
                  }}
                >
                  {occupationOptions.map((item) => (
                    <MenuItem key={item.id ?? item} value={item.id ?? item}>
                      {getOptionLabel(item, "Occupation")}
                    </MenuItem>
                  ))}
                </Select>
                {errors.occupation && (
                  <p
                    style={{
                      color: "#d32f2f",
                      margin: "3px 14px 0 14px",
                      fontSize: "0.75rem",
                    }}
                  >
                    {errors.occupation}
                  </p>
                )}
              </FormControl>
            </div>

            {/* Company / Organization Name */}
            <div className="flex flex-col gap-4">
              <label className="text-gray-900 text-[15px]">
                Company / Organization Name{requiredMark}
              </label>
              <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>

            {/* Employee Type */}
            <div className="flex flex-col gap-4">
              <label className="text-gray-900 text-[15px]">
                Employee Type{requiredMark}
              </label>
              <FormControl
                fullWidth
                variant="outlined"
                error={Boolean(errors.employeeType)}
              >
                <InputLabel id="employeeType-label">
                  Select Employee Type
                </InputLabel>
                <Select
                  labelId="employeeType-label"
                  label="Select Employee Type"
                  name="employeeType"
                  value={data.employeeType}
                  onChange={(e) => handleChange("employeeType", e.target.value)}
                  disabled={isEducationMastersLoading}
                  sx={{
                    "& .MuiSelect-select.Mui-disabled": {
                      cursor: "not-allowed",
                    },
                  }}
                >
                  {employeeTypeOptions.map((item) => (
                    <MenuItem key={item.id ?? item} value={item.id ?? item}>
                      {getOptionLabel(item, "Employee Type")}
                    </MenuItem>
                  ))}
                </Select>
                {errors.employeeType && (
                  <p
                    style={{
                      color: "#d32f2f",
                      margin: "3px 14px 0 14px",
                      fontSize: "0.75rem",
                    }}
                  >
                    {errors.employeeType}
                  </p>
                )}
              </FormControl>
            </div>

            {/* Annual Income */}
            <div className="flex flex-col gap-4">
              <label className="text-gray-900 text-[15px]">
                Annual Income{requiredMark}
              </label>
              <FormControl
                fullWidth
                variant="outlined"
                error={Boolean(errors.income)}
              >
                <InputLabel id="income-label">Select Annual Income</InputLabel>
                <Select
                  labelId="income-label"
                  label="Select Annual Income"
                  name="income"
                  value={data.income}
                  onChange={(e) => handleChange("income", e.target.value)}
                  disabled={isEducationMastersLoading}
                  sx={{
                    "& .MuiSelect-select.Mui-disabled": {
                      cursor: "not-allowed",
                    },
                  }}
                >
                  {annualIncomeOptions.map((item) => (
                    <MenuItem key={item.id ?? item} value={item.id ?? item}>
                      {getOptionLabel(item, "Annual Income")}
                    </MenuItem>
                  ))}
                </Select>
                {errors.income && (
                  <p
                    style={{
                      color: "#d32f2f",
                      margin: "3px 14px 0 14px",
                      fontSize: "0.75rem",
                    }}
                  >
                    {errors.income}
                  </p>
                )}
              </FormControl>
            </div>

            {/* Work Location */}
            <div className="flex flex-col gap-4">
              <label className="text-gray-900 text-[15px]">
                Work Location
              </label>
              {workLocationOptions.length > 0 ? (
                <FormControl
                  fullWidth
                  variant="outlined"
                  error={Boolean(errors.workLocation)}
                >
                  <InputLabel id="workLocation-label">
                    Select Work Location
                  </InputLabel>
                  <Select
                    labelId="workLocation-label"
                    label="Select Work Location"
                    name="workLocation"
                    value={data.workLocation}
                    onChange={(e) =>
                      handleChange("workLocation", e.target.value)
                    }
                    disabled={isEducationMastersLoading}
                    sx={{
                      "& .MuiSelect-select.Mui-disabled": {
                        cursor: "not-allowed",
                      },
                    }}
                  >
                    {workLocationOptions.map((item) => (
                      <MenuItem key={item.id ?? item} value={item.id ?? item}>
                        {getOptionLabel(item, "Work Location")}
                      </MenuItem>
                    ))}
                  </Select>
                  {errors.workLocation && (
                    <p
                      style={{
                        color: "#d32f2f",
                        margin: "3px 14px 0 14px",
                        fontSize: "0.75rem",
                      }}
                    >
                      {errors.workLocation}
                    </p>
                  )}
                </FormControl>
              ) : (
                <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}>
              Next
            </Button>
            <Button variant="contained" color="primary" onClick={handleSubmit}>
              Submit
            </Button>
          </Grid>
        </form>
      </div>
    </>
  );
};

export default EducationalDetailsForm;