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

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

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

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

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

  const fields = [
    { name: "diet", label: "Diet", options: ["Veg", "Non-Veg", "Eggetarian"] },
    {
      name: "drinking",
      label: "Drinking Habits",
      options: ["No", "Occasionally", "Regularly"],
    },
    {
      name: "smoking",
      label: "Smoking Habits",
      options: ["No", "Occasionally", "Regularly"],
    },
    {
      name: "hobbies",
      label: "Hobbies & Interests",
      options: ["Song", "Reading", "Sports", "Travel"],
    },
  ];

  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">
          {fields.map(({ name, label, options }) => (
            <div key={name} className="flex flex-col gap-2">
              <label className="text-gray-900 text-[15px]">{label}</label>
              <FormControl
                fullWidth
                variant="outlined"
                error={Boolean(errors[name])}
              >
                <InputLabel id={`${name}-label`}>Select {label}</InputLabel>
                <Select
                  labelId={`${name}-label`}
                  label={`Select ${label}`}
                  name={name}
                  value={data[name]}
                  onChange={(e) => handleChange(name, e.target.value)}
                  inputRef={name === "diet" ? inputRef : null}
                >
                 
                  {options.map((opt) => (
                    <MenuItem key={opt} value={opt}>
                      {opt}
                    </MenuItem>
                  ))}
                </Select>
                {errors[name] && (
                  <p
                    style={{
                      color: "#d32f2f",
                      margin: "3px 14px 0 14px",
                      fontSize: "0.75rem",
                    }}
                  >
                    {errors[name]}
                  </p>
                )}
              </FormControl>
            </div>
          ))}
        </div>

        <Grid
          item
          xs={12}
          style={{
            marginTop: 24,
            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 LifestyleDetailsForm;