import React, { useEffect, useMemo, useRef } from "react";
import { useDispatch, useSelector } from "react-redux";
import { updateLifestyleDetails } from "../redux/registrationFormSlice";
import {
  Grid,
  FormControl,
  InputLabel,
  Select,
  MenuItem,
  Button,
  TextField,
  Checkbox,
  ListItemText,
} from "@mui/material";
import { LocalizationProvider } from "@mui/x-date-pickers";
import { DatePicker } from "@mui/x-date-pickers/DatePicker";
import { TimePicker } from "@mui/x-date-pickers/TimePicker";
import { AdapterDateFns } from "@mui/x-date-pickers/AdapterDateFns";
import { useLifestyleMasters } from "../hooks/useMasters";

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

  const { data: lifestyleMasters, isLoading: isLifestyleMastersLoading } =
    useLifestyleMasters();

  const dietOptions = useMemo(() => {
    const raw = lifestyleMasters;
    if (!raw) return [];
    if (Array.isArray(raw)) return raw;
    return raw.diet || raw.diets || [];
  }, [lifestyleMasters]);

  const hobbyOptions = useMemo(() => {
    const raw = lifestyleMasters;
    if (!raw) return [];
    if (Array.isArray(raw)) return raw;
    return raw.hobbies || raw.hobby || [];
  }, [lifestyleMasters]);

  const grahaOptions = useMemo(() => {
    const raw = lifestyleMasters;
    if (!raw) return [];
    if (Array.isArray(raw)) return raw;
    return raw.grahas || raw.graha || [];
  }, [lifestyleMasters]);

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

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

  const handleMultiChange = (field, value) => {
    const nextValue = Array.isArray(value) ? value : String(value).split(",");
    dispatch(updateLifestyleDetails({ [field]: nextValue }));
    if (onFieldChange) onFieldChange(field);
  };

  const handleGrahaChange = (house, value) => {
    const next = { ...(data.graha || {}) };
    next[house] = value;
    dispatch(updateLifestyleDetails({ graha: next }));
    if (onFieldChange) onFieldChange("graha");
  };

  const handleAmsamChange = (house, value) => {
    const next = { ...(data.amsam || {}) };
    next[house] = value;
    dispatch(updateLifestyleDetails({ amsam: next }));
    if (onFieldChange) onFieldChange("amsam");
  };

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

  const parseDateValue = (value) => {
    if (!value) return null;
    const date = new Date(value);
    return Number.isNaN(date.getTime()) ? null : date;
  };

  const parseTimeValue = (value) => {
    if (!value || typeof value !== "string") return null;
    const [hours, minutes] = value.split(":").map(Number);
    if (Number.isNaN(hours) || Number.isNaN(minutes)) return null;
    const date = new Date();
    date.setHours(hours, minutes, 0, 0);
    return date;
  };

  const formatDate = (value) => {
    if (!(value instanceof Date) || Number.isNaN(value)) return "";
    const y = value.getFullYear();
    const m = String(value.getMonth() + 1).padStart(2, "0");
    const d = String(value.getDate()).padStart(2, "0");
    return `${y}-${m}-${d}`;
  };

  const formatTime = (value) => {
    if (!(value instanceof Date) || Number.isNaN(value)) return "";
    const h = String(value.getHours()).padStart(2, "0");
    const m = String(value.getMinutes()).padStart(2, "0");
    return `${h}:${m}`;
  };

  const renderChartCell = (label, value, onChange) => (
    <div className="bg-white border border-gray-300 rounded-lg p-2 flex flex-col items-center justify-center min-h-[70px]">
      <span className="text-[10px] font-medium text-gray-700 text-center">
        {label}
      </span>
      <FormControl fullWidth variant="standard" sx={{ mt: 0.5 }}>
        <Select
          multiple
          displayEmpty
          value={value}
          onChange={(e) => onChange(e.target.value)}
          renderValue={(selected) => {
            if (!selected || selected.length === 0) return `+ Add ${label}`;
            return selected.join(", ");
          }}
          MenuProps={{
            PaperProps: { style: { maxHeight: 280 } },
          }}
        >
          {grahaOptions.map((opt) => (
            <MenuItem key={opt} value={opt}>
              <Checkbox checked={value.indexOf(opt) > -1} />
              <ListItemText primary={opt} />
            </MenuItem>
          ))}
        </Select>
      </FormControl>
    </div>
  );

  const renderChartGrid = (type) => {
    const getValue = (house) =>
      (type === "graha" ? data.graha : data.amsam)?.[house] || [];
    const onChange = (house, value) =>
      type === "graha"
        ? handleGrahaChange(house, value)
        : handleAmsamChange(house, value);
    const label = type === "graha" ? "Rasi" : "Navamsam";

    return (
      <div className="grid grid-cols-4 gap-2">
        {renderChartCell(label, getValue(1), (value) => onChange(1, value))}
        {renderChartCell(label, getValue(2), (value) => onChange(2, value))}
        {renderChartCell(label, getValue(3), (value) => onChange(3, value))}
        {renderChartCell(label, getValue(4), (value) => onChange(4, value))}

        {renderChartCell(label, getValue(5), (value) => onChange(5, value))}
        <div className="col-span-2 row-span-2 flex items-center justify-center">
          <div className="w-full aspect-square rounded-full overflow-hidden border-4 border-gray-200 shadow-lg bg-white" />
        </div>
        {renderChartCell(label, getValue(6), (value) => onChange(6, value))}

        {renderChartCell(label, getValue(7), (value) => onChange(7, value))}
        {renderChartCell(label, getValue(8), (value) => onChange(8, value))}

        {renderChartCell(label, getValue(9), (value) => onChange(9, value))}
        {renderChartCell(label, getValue(10), (value) => onChange(10, value))}
        {renderChartCell(label, getValue(11), (value) => onChange(11, value))}
        {renderChartCell(label, getValue(12), (value) => onChange(12, value))}
      </div>
    );
  };

  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">
          <div className="flex flex-col gap-2">
            <label className="text-gray-900 text-[15px]">
              Diet{requiredMark}
            </label>
            <FormControl fullWidth variant="outlined" error={Boolean(errors.diets)}>
              <InputLabel id="diets-label">Select Diet</InputLabel>
              <Select
                labelId="diets-label"
                label="Select Diet"
                name="diets"
                value={data.diets}
                onChange={(e) => handleChange("diets", e.target.value)}
                inputRef={inputRef}
                disabled={isLifestyleMastersLoading}
                sx={{
                  "& .MuiSelect-select.Mui-disabled": {
                    cursor: "not-allowed",
                  },
                }}
              >
                {dietOptions.map((opt) => {
                  const value = opt.id ?? opt;
                  const label = opt.diet_name || opt.name || String(opt);
                  return (
                    <MenuItem key={value} value={value}>
                      {label}
                    </MenuItem>
                  );
                })}
              </Select>
              {errors.diets && (
                <p
                  style={{
                    color: "#d32f2f",
                    margin: "3px 14px 0 14px",
                    fontSize: "0.75rem",
                  }}
                >
                  {errors.diets}
                </p>
              )}
            </FormControl>
          </div>

          <div className="flex flex-col gap-2">
            <label className="text-gray-900 text-[15px]">
              Hobbies & Interests (Multi-select){requiredMark}
            </label>
            <FormControl
              fullWidth
              variant="outlined"
              error={Boolean(errors.hobbies)}
            >
              <InputLabel id="hobbies-label">
                Select Hobbies & Interests
              </InputLabel>
              <Select
                labelId="hobbies-label"
                label="Select Hobbies & Interests"
                name="hobbies"
                multiple
                value={data.hobbies}
                onChange={(e) => handleMultiChange("hobbies", e.target.value)}
                disabled={isLifestyleMastersLoading}
                renderValue={(selected) =>
                  selected
                    .map((id) => {
                      const item = hobbyOptions.find(
                        (opt) => (opt.id ?? opt) === id
                      );
                      return item?.hobby_name || item?.name || id;
                    })
                    .join(", ")
                }
                sx={{
                  "& .MuiSelect-select.Mui-disabled": {
                    cursor: "not-allowed",
                  },
                }}
              >
                {hobbyOptions.map((opt) => {
                  const value = opt.id ?? opt;
                  const label = opt.hobby_name || opt.name || String(opt);
                  return (
                    <MenuItem key={value} value={value}>
                      <Checkbox checked={data.hobbies.indexOf(value) > -1} />
                      <ListItemText primary={label} />
                    </MenuItem>
                  );
                })}
              </Select>
              {errors.hobbies && (
                <p
                  style={{
                    color: "#d32f2f",
                    margin: "3px 14px 0 14px",
                    fontSize: "0.75rem",
                  }}
                >
                  {errors.hobbies}
                </p>
              )}
            </FormControl>
          </div>
        </div>

        <div className="text-center py-4">
          <h2 className="text-[18px] font-semibold text-gray-800">
            Astrology / Horoscope
          </h2>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-3 gap-6 w-full max-w-[900px] mx-auto">
          <div className="flex flex-col gap-2">
            <label className="text-gray-900 text-[15px]">
              Date of Birth{requiredMark}
            </label>
            <LocalizationProvider dateAdapter={AdapterDateFns}>
              <DatePicker
                format="dd/MM/yyyy"
                disableFuture
                value={parseDateValue(data.dob)}
                onChange={(value) => handleChange("dob", formatDate(value))}
                slotProps={{
                  textField: {
                    name: "dob",
                    fullWidth: true,
                    error: Boolean(errors.dob),
                    helperText: errors.dob,
                  },
                }}
              />
            </LocalizationProvider>
          </div>

          <div className="flex flex-col gap-2">
            <label className="text-gray-900 text-[15px]">
              Time of Birth{requiredMark}
            </label>
            <LocalizationProvider dateAdapter={AdapterDateFns}>
              <TimePicker
                value={parseTimeValue(data.tob)}
                onChange={(value) => handleChange("tob", formatTime(value))}
                slotProps={{
                  textField: {
                    name: "tob",
                    fullWidth: true,
                    error: Boolean(errors.tob),
                    helperText: errors.tob,
                  },
                }}
              />
            </LocalizationProvider>
          </div>

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

        <div className="grid grid-cols-1 md:grid-cols-2 gap-6 w-full max-w-[950px] mx-auto mt-6">
          <div>
            <div className="py-4">
              <h3 className="text-base font-semibold text-gray-800 mb-3">
                Add Rasi
              </h3>
              {renderChartGrid("graha")}
              {errors.graha_duplicate && (
                <p style={{ color: "#d32f2f", fontSize: "0.75rem", marginTop: "4px" }}>
                  {errors.graha_duplicate}
                </p>
              )}
            </div>
          </div>

          <div>
            <div className="py-4">
              <h3 className="text-base font-semibold text-gray-800 mb-3">
                Add Navamsam
              </h3>
              {renderChartGrid("amsam")}
              {errors.amsam_duplicate && (
                <p style={{ color: "#d32f2f", fontSize: "0.75rem", marginTop: "4px" }}>
                  {errors.amsam_duplicate}
                </p>
              )}
            </div>
          </div>
        </div>

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

export default LifestyleDetailsForm;