import React, { useCallback, useEffect, useRef, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { updatePersonalDetails } from "../redux/registrationFormSlice";
import {
  Grid,
  TextField,
  FormControl,
  InputLabel,
  Select,
  MenuItem,
  Button,
  Box,
  Typography,
  Link,
} from "@mui/material";
import AdvancedDropzone from "./AdvancedDropzone";
import { DatePicker } from "@mui/x-date-pickers/DatePicker";

import { LocalizationProvider } from "@mui/x-date-pickers";
import { AdapterDateFns } from "@mui/x-date-pickers/AdapterDateFns";
const OTP_LENGTH = 4;
const OTP_TIMER_SEC = 120; // 2 minutes

const PersonalDetailsForm = ({ onSubmitStep, onSkipStep, errors }) => {
  const dispatch = useDispatch();
  const data = useSelector((state) => state.registerform.personalDetails);
  const nameInputRef = useRef(null);

  const [showOtp, setShowOtp] = useState(false);
  const [otp, setOtp] = useState(new Array(OTP_LENGTH).fill(""));
  const [otpTimer, setOtpTimer] = useState(0);
  const [otpError, setOtpError] = useState("");
  const [mobileOtpVerified, setMobileOtpVerified] = useState(false);
  const [mobileNumberError, setMobileNumberError] = useState("");

  const startOtpTimer = useCallback(() => {
    setOtpTimer(OTP_TIMER_SEC);
  }, []);

  useEffect(() => {
    if (otpTimer <= 0) return;
    const timerId = setInterval(() => {
      setOtpTimer((sec) => sec - 1);
    }, 1000);
    return () => clearInterval(timerId);
  }, [otpTimer]);

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

  const handleOtpChange = (index, value) => {
    if (!/^\d*$/.test(value)) return;
    const newOtp = [...otp];
    newOtp[index] = value.slice(-1);
    setOtp(newOtp);
    if (value && index < OTP_LENGTH - 1) {
      const next = document.getElementById(`otp-${index + 1}`);
      if (next) next.focus();
    }
  };

  const resetOtp = () => {
    setOtp(new Array(OTP_LENGTH).fill(""));
    setOtpError("");
    startOtpTimer();
  };

  const handleMobileSubmit = () => {
    if (!data.mobileNumber || data.mobileNumber.length !== 10) {
      setMobileNumberError(
        "Please enter a valid 10-digit mobile number before sending OTP"
      );
      return;
    }
    setMobileNumberError("");
    setShowOtp(true);
    resetOtp();
    setMobileOtpVerified(false);
  };

  const handleChange = (field, value) => {
    dispatch(updatePersonalDetails({ [field]: value }));
    if (field === "mobileNumber") {
      setMobileNumberError("");
      setShowOtp(false);
      setOtp(new Array(OTP_LENGTH).fill(""));
      setOtpError("");
      setOtpTimer(0);
      setMobileOtpVerified(false);
    }
  };

  const isOtpComplete = otp.every((digit) => digit !== "");

  // Simulated API OTP verification (replace with actual)
  const verifyOtpApi = async (mobile, otpValue) => {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        if (otpValue === "1234") resolve(true);
        else reject("Invalid OTP");
      }, 1000);
    });
  };

  const handleOtpSubmit = async () => {
    if (!isOtpComplete) {
      setOtpError("Complete OTP is required");
      return;
    }
    try {
      await verifyOtpApi(data.mobileNumber, otp.join(""));
      setMobileOtpVerified(true);
      setMobileNumberError("");
    } catch (error) {
      setOtpError(error || "OTP verification failed");
    }
  };


// file upload 










  // const handleSubmit = async () => {
  //   if (showOtp && !isOtpComplete) {
  //     setOtpError("OTP is required and must be complete");
  //     return;
  //   }
  //   if (showOtp && !mobileOtpVerified) {
  //     try {
  //       await verifyOtpApi(data.mobileNumber, otp.join(""));
  //       setMobileOtpVerified(true);
  //       setOtpError("");
  //       onSubmitStep();
  //       console.log("OTP verified on submit");
  //     } catch (err) {
  //       setOtpError(err || "OTP verification failed");
  //     }
  //     return;
  //   }
  //   onSubmitStep();
  
  // };


  const handleSubmit = async () => {  
  if (showOtp && !isOtpComplete) {
    setOtpError("OTP is required and must be complete");
    return;
  }

  if (showOtp && !mobileOtpVerified) {
    try {
      await verifyOtpApi(data.mobileNumber, otp.join(""));
      setMobileOtpVerified(true);
      setOtpError("");
      console.log("Submitting personal details:", data); // log here
      onSubmitStep();
      console.log("OTP verified on submit");
    } catch (err) {
      setOtpError(err || "OTP verification failed");
    }
    return;
  }

  // no OTP or already verified
  console.log("Submitting personal details:", data); // log here
  onSubmitStep();
};


  const formatTimer = (sec) => {
    const m = Math.floor(sec / 60)
      .toString()
      .padStart(2, "0");
    const s = (sec % 60).toString().padStart(2, "0");
    return `${m}:${s}`;
  };
 const parseDobValue = data.dob ? new Date(data.dob) : null;
  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">
            {/* Name */}
            <div className="flex flex-col gap-4">
              <label className="text-gray-900 text-[17px]">
                Enter the Name
              </label>
              <TextField
                fullWidth
                inputRef={nameInputRef}
                name="name"
                label="Name"
                value={data.name}
                onChange={(e) => handleChange("name", e.target.value)}
                error={Boolean(errors.name)}
                helperText={errors.name}
                placeholder="Enter Name"
                variant="outlined"
              />
            </div>

            {/* Gender */}
            <div className="flex flex-col gap-6">
              <label className="text-gray-900 text-[17px]">
                Enter the Gender
              </label>
              <FormControl
                fullWidth
                variant="outlined"
                error={Boolean(errors.gender)}
              >
                <InputLabel id="gender-label">Gender</InputLabel>
                <Select
                  labelId="gender-label"
                  label="Gender"
                  name="gender"
                  value={data.gender}
                  onChange={(e) => handleChange("gender", e.target.value)}
                >
                  <MenuItem value="Male">Male</MenuItem>
                  <MenuItem value="Female">Female</MenuItem>
                </Select>
                {errors.gender && (
                  <p
                    style={{
                      color: "#d32f2f",
                      margin: "3px 14px 0 14px",
                      fontSize: "0.75rem",
                    }}
                  >
                    {errors.gender}
                  </p>
                )}
              </FormControl>
            </div>

            {/* Mobile Number and Send OTP Button */}
            <div className="flex flex-col gap-6 relative">
              <TextField
                fullWidth
                name="mobileNumber"
                label="Mobile Number"
                type="tel"
                value={data.mobileNumber}
                onChange={(e) => handleChange("mobileNumber", e.target.value)}
                error={
                  Boolean(errors.mobileNumber) || Boolean(mobileNumberError)
                }
                helperText={mobileNumberError || errors.mobileNumber}
                placeholder="Enter Mobile Number"
                inputProps={{ maxLength: 10 }}
                variant="outlined"
                disabled={mobileOtpVerified}
                // sx={{ maxWidth: "430px" }}
              />
              <Box sx={{ position: "absolute", right: 0 }}>
                {!showOtp && !mobileOtpVerified && (
                  <Button
                    variant="outlined"
                    color="primary"
                    onClick={handleMobileSubmit}
                    sx={{
                      padding: "15px 10px",
                      background: "green",
                      color: "#fff",
                    }}
                  >
                    Send OTP
                  </Button>
                )}
              </Box>
            </div>

            {/* OTP Inputs */}
            <div className="flex flex-col gap-6">
              {showOtp && !mobileOtpVerified && (
                <>
                  <Box display="flex" gap={1} alignItems="center">
                    {otp.map((digit, index) => (
                      <TextField
                        key={index}
                        id={`otp-${index}`}
                        inputProps={{
                          maxLength: 1,
                          style: {
                            textAlign: "center",
                            width: 40,
                            fontSize: 20,
                          },
                        }}
                        value={digit}
                        onChange={(e) => handleOtpChange(index, e.target.value)}
                        error={Boolean(otpError)}
                        autoFocus={index === 0}
                        variant="outlined"
                      />
                    ))}

                    <Button
                      variant="contained"
                      color="secondary"
                      onClick={handleOtpSubmit} // new handler to verify OTP
                      sx={{ height: 40, ml: 2 }}
                      disabled={!isOtpComplete}
                    >
                      Submit OTP
                    </Button>
                  </Box>

                  <Typography sx={{ ml: 2, minWidth: 56 }}>
                    {otpTimer > 0 ? (
                      formatTimer(otpTimer)
                    ) : (
                      <Link
                        component="button"
                        variant="body2"
                        onClick={resetOtp}
                        disabled={otpTimer > 0}
                      >
                        Resend OTP
                      </Link>
                    )}
                  </Typography>

                  {otpError && (
                    <Typography color="error" variant="caption" sx={{ mt: 1 }}>
                      {otpError}
                    </Typography>
                  )}
                </>
              )}

              {mobileOtpVerified && (
                <Typography
                  color="primary"
                  variant="body2"
                  sx={{
                    background: "green",
                    padding: "17px 15px",
                    width: "fit-content",
                    borderRadius: "5px",
                    color: "#fff",
                    fontSize: "18px",
                  }}
                >
                  Mobile number verified
                </Typography>
              )}
            </div>

            {/* Other fields like DOB, height, marital status, etc. */}
            {/* Your other inputs here */}
  {/* DOB */}
          {/* <div className="flex flex-col gap-2">
            <label className="text-gray-900 text-[15px]">Date of Birth</label>
            <TextField
              fullWidth
              name="dob"
              type="date"
              value={data.dob}
              onChange={(e) => handleChange("dob", e.target.value)}
              error={Boolean(errors.dob)}
              helperText={errors.dob}
              InputLabelProps={{ shrink: true }}
              variant="outlined"
            />
          </div> */}

            {/* DOB with MUI DatePicker */}
          <div className="flex flex-col gap-2">
            <label className="text-gray-900 text-[15px]">Date of Birth</label>
             <LocalizationProvider dateAdapter={AdapterDateFns}>
            <DatePicker
              format="dd/MM/yyyy"
              value={parseDobValue}
              onChange={(value) => {
                let formatted = "";
                if (value instanceof Date && !isNaN(value)) {
                  const y = value.getFullYear();
                  const m = String(value.getMonth() + 1).padStart(2, "0");
                  const d = String(value.getDate()).padStart(2, "0");
                  formatted = `${y}-${m}-${d}`;
                }
                handleChange("dob", formatted);
              }}
              slotProps={{
                textField: {
                  fullWidth: true,
                  error: Boolean(errors.dob),
                  helperText: errors.dob,
                },
              }}
            />
            </LocalizationProvider>
          </div>

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

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

          {/* Marital Status */}
          <div className="flex flex-col gap-2">
            <label className="text-gray-900 text-[15px]">Marital Status</label>
            <FormControl
              fullWidth
              variant="outlined"
              error={Boolean(errors.maritalStatus)}
            >
              <InputLabel id="maritalStatus-label">
                Select Marital Status
              </InputLabel>
              <Select
                labelId="maritalStatus-label"
                label="Select Marital Status"
                name="maritalStatus"
                value={data.maritalStatus}
                onChange={(e) =>
                  handleChange("maritalStatus", e.target.value)
                }
              >
                <MenuItem value="Single">Single</MenuItem>
                <MenuItem value="Divorced">Divorced</MenuItem>
                <MenuItem value="Widowed">Widowed</MenuItem>
              </Select>
              {errors.maritalStatus && (
                <Typography
                  color="error"
                  variant="caption"
                  sx={{ mt: 0.5, ml: 1.8 }}
                >
                  {errors.maritalStatus}
                </Typography>
              )}
            </FormControl>
          </div>

          {/* Religion */}
          <div className="flex flex-col gap-2">
            <label className="text-gray-900 text-[15px]">Religion</label>
            <FormControl
              fullWidth
              variant="outlined"
              error={Boolean(errors.religion)}
            >
              <InputLabel id="religion-label">Select Religion</InputLabel>
              <Select
                labelId="religion-label"
                label="Select Religion"
                name="religion"
                value={data.religion}
                onChange={(e) => handleChange("religion", e.target.value)}
              >
                <MenuItem value="Hindu">Hindu</MenuItem>
                <MenuItem value="Muslim">Muslim</MenuItem>
                <MenuItem value="Christian">Christian</MenuItem>
                <MenuItem value="Others">Others</MenuItem>
              </Select>
              {errors.religion && (
                <Typography
                  color="error"
                  variant="caption"
                  sx={{ mt: 0.5, ml: 1.8 }}
                >
                  {errors.religion}
                </Typography>
              )}
            </FormControl>
          </div>

          {/* Caste / Community */}
          <div className="flex flex-col gap-2">
            <label className="text-gray-900 text-[15px]">
              Caste / Community
            </label>
            <FormControl
              fullWidth
              variant="outlined"
              error={Boolean(errors.caste)}
            >
              <InputLabel id="caste-label">Select Caste / Community</InputLabel>
              <Select
                labelId="caste-label"
                label="Select Caste / Community"
                name="caste"
                value={data.caste}
                onChange={(e) => handleChange("caste", e.target.value)}
              >
                <MenuItem value="Agamudayar">Agamudayar</MenuItem>
                <MenuItem value="Brahmin">Brahmin</MenuItem>
                <MenuItem value="Others">Others</MenuItem>
              </Select>
              {errors.caste && (
                <Typography
                  color="error"
                  variant="caption"
                  sx={{ mt: 0.5, ml: 1.8 }}
                >
                  {errors.caste}
                </Typography>
              )}
            </FormControl>
          </div>

          {/* Sub-Caste (optional) */}
          <div className="flex flex-col gap-2">
            <label className="text-gray-900 text-[15px]">
              Sub-Caste (optional)
            </label>
            <FormControl fullWidth variant="outlined">
              <InputLabel id="subCaste-label">
                Select Sub-Caste (optional)
              </InputLabel>
              <Select
                labelId="subCaste-label"
                label="Select Sub-Caste (optional)"
                name="subCaste"
                value={data.subCaste}
                onChange={(e) => handleChange("subCaste", e.target.value)}
              >
                <MenuItem value="">
                  <em>None</em>
                </MenuItem>
                <MenuItem value="Thuluva vellala">Thuluva vellala</MenuItem>
              </Select>
            </FormControl>
          </div>

          {/* Gothram (optional) */}
          <div className="flex flex-col gap-2">
            <label className="text-gray-900 text-[15px]">
              Gothram (optional)
            </label>
            <FormControl fullWidth variant="outlined">
              <InputLabel id="gothram-label">
                Select Gothram (optional)
              </InputLabel>
              <Select
                labelId="gothram-label"
                label="Select Gothram (optional)"
                name="gothram"
                value={data.gothram}
                onChange={(e) => handleChange("gothram", e.target.value)}
              >
                <MenuItem value="">
                  <em>None</em>
                </MenuItem>
                <MenuItem value="Siva Gotheram">Siva Gotheram</MenuItem>
              </Select>
            </FormControl>
          </div>

          {/* Blood Group (optional) */}
          <div className="flex flex-col gap-2">
            <label className="text-gray-900 text-[15px]">
              Blood Group (optional)
            </label>
            <FormControl fullWidth variant="outlined">
              <InputLabel id="blood-label">
                Select Blood Group (optional)
              </InputLabel>
              <Select
                labelId="blood-label"
                label="Select Blood Group (optional)"
                name="bloodGroup"
                value={data.bloodGroup}
                onChange={(e) => handleChange("bloodGroup", e.target.value)}
              >
                <MenuItem value="">
                  <em>None</em>
                </MenuItem>
                <MenuItem value="O+">O+</MenuItem>
                <MenuItem value="A+">A+</MenuItem>
                <MenuItem value="B+">B+</MenuItem>
                <MenuItem value="AB+">AB+</MenuItem>
              </Select>
            </FormControl>
          </div>

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

          {/* State */}
          <div className="flex flex-col gap-2">
            <label className="text-gray-900 text-[15px]">State</label>
            <FormControl
              fullWidth
              variant="outlined"
              error={Boolean(errors.state)}
            >
              <InputLabel id="state-label">Select State</InputLabel>
              <Select
                labelId="state-label"
                label="Select State"
                name="state"
                value={data.state}
                onChange={(e) => handleChange("state", e.target.value)}
              >
                <MenuItem value="Tamil Nadu">Tamil Nadu</MenuItem>
                <MenuItem value="Kerala">Kerala</MenuItem>
                <MenuItem value="Karnataka">Karnataka</MenuItem>
              </Select>
              {errors.state && (
                <Typography
                  color="error"
                  variant="caption"
                  sx={{ mt: 0.5, ml: 1.8 }}
                >
                  {errors.state}
                </Typography>
              )}
            </FormControl>
          </div>

          {/* City */}
          <div className="flex flex-col gap-2">
            <label className="text-gray-900 text-[15px]">City</label>
            <FormControl
              fullWidth
              variant="outlined"
              error={Boolean(errors.city)}
            >
              <InputLabel id="city-label">Select City</InputLabel>
              <Select
                labelId="city-label"
                label="Select City"
                name="city"
                value={data.city}
                onChange={(e) => handleChange("city", e.target.value)}
              >
                <MenuItem value="Chennai">Chennai</MenuItem>
                <MenuItem value="Coimbatore">Coimbatore</MenuItem>
                <MenuItem value="Madurai">Madurai</MenuItem>
              </Select>
              {errors.city && (
                <Typography
                  color="error"
                  variant="caption"
                  sx={{ mt: 0.5, ml: 1.8 }}
                >
                  {errors.city}
                </Typography>
              )}
            </FormControl>
          </div>

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

           <div className="flex flex-col gap-2"> 
            {/* Upload Profile (UI only) */}
          {/* <div className="flex flex-col gap-2 md:col-span-2 w-full max-w-[900px] ">
            <label className="text-gray-900 text-[15px]">
              Upload Profile (Multi - Select)
            </label>
            <div className=" border-2 border-dashed border-gray-300 rounded-lg p-6 text-center bg-white">
              <div className="text-3xl mb-2">⬆</div>
              <p className="text-sm text-gray-600">Upload PDF, IMG, JPG</p>
            </div>
          </div> */}


          <div className="flex flex-col gap-2 md:col-span-2 w-full">
  <label className="text-gray-900 text-[15px]">
    Upload Profile (Multi - Select)
  </label>
  <AdvancedDropzone
    value={data.profiles || []}
    onChange={(files) => {
      // if you want to keep in Redux as plain metadata
      dispatch(updatePersonalDetails({ profiles: files }));
    }}
  />
</div>


          </div>




        </div>


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

export default PersonalDetailsForm;