import React, { useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import {
  setAge,
  setHeight,
  setMaritalStatus,
  setMotherTongue,
  setReligion,
  setMatchesWithHoroscope,
  setCaste,
  setSubCaste,
  updateFilter,
} from "../redux/filterSlice";
import {
  Slider,
  FormControl,
  InputLabel,
  Select,
  MenuItem,
  Chip,
  Box,
  Button,
  Typography,
  FormControlLabel,
  Checkbox,
  Accordion,
  AccordionSummary,
  AccordionDetails,
} from "@mui/material";
import { ChevronDown } from "lucide-react";

const FilterForm = () => {
  const dispatch = useDispatch();
  const filters = useSelector((state) => state.filters);

  const [expandedSections, setExpandedSections] = useState({
    basic: true,
    religious: false,
    professional: false,
    location: false,
    lifestyle: false,
    family: false,
  });

  const handleAccordionChange = (section) => (event, isExpanded) => {
    setExpandedSections((prev) => ({ ...prev, [section]: isExpanded }));
  };

  const casteOptions = ["Agamudayar", "Pillai", "Vellalar"];
  const motherTongueOptions = [
    "Tamil",
    "Telugu",
    "Malayalam",
    "Kannada",
    "Hindi",
  ];

  const handleSubmit = () => {
    console.log("Filter Values:", filters);
  };

  const handleSelectionChange = (field, value) => {
    console.log(`${field} selected:`, value);
  };

  return (
    <div className="max-w-6xl mx-auto p-4 px-0 md:p-6 ">
      <div className="bg-white rounded-lg shadow-sm">
        {/* Header */}
        <div className="border-b border-pink-200 p-4 bg-[#fff5ed]">
          <Typography variant="h5" className="font-semibold text-center">
           Partner Filter preference
          </Typography>
        </div>

        <div className="py-4 md:p-6">
          {/* Basic Details Section */}
          <Accordion
            expanded={expandedSections.basic}
            onChange={handleAccordionChange("basic")}
            className="mb-4"
          >
            <AccordionSummary expandIcon={<ChevronDown />}  
            sx={{
    backgroundColor: "#f5fbff", // green-900
    "&:hover": {
      backgroundColor: "#fff6f0", // optional hover
    }
  }}>
              <Typography className="font-semibold  -mx-4 -my-2 px-4 py-2 w-full">
                Basic Details
              </Typography>
            </AccordionSummary>
            <AccordionDetails>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mt-4">
                {/* Age Slider */}
                <div className="md:col-span-1 mr-2 ">
                  <Typography gutterBottom sx={{marginBottom:"30px"}}>Age</Typography>
                  <div className="px-2">
                    <Slider
                      value={filters.age}
                      onChange={(e, newValue) => {
                        dispatch(setAge(newValue));
                        handleSelectionChange("Age", newValue);
                      }}
                      valueLabelDisplay="on"
                      min={18}
                      max={70}
                    />
                    <div className="flex justify-between text-sm text-gray-600">
                      <span>18 Age</span>
                      <span>70 Age</span>
                    </div>
                  </div>
                </div>

                {/* Height Slider */}
                <div className="md:col-span-1">
                  <Typography gutterBottom sx={{marginBottom:"30px"}}>Height</Typography>
                  <div className="px-2">
                    <Slider
                      value={filters.height}
                      onChange={(e, newValue) => {
                        dispatch(setHeight(newValue));
                        handleSelectionChange("Height", newValue);
                      }}
                      valueLabelDisplay="on"
                      min={4.0}
                      max={7.11}
                      step={0.01}
                      valueLabelFormat={(value) => `${value.toFixed(2)}'`}
                    />
                    <div className="flex justify-between text-sm text-gray-600">
                      <span>4'0"</span>
                      <span>7'11"</span>
                    </div>
                  </div>
                </div>

                {/* Marital Status */}
                <FormControl fullWidth>
                  <InputLabel>Marital Status</InputLabel>
                  <Select
                    value={filters.maritalStatus}
                    label="Marital Status"
                    onChange={(e) => {
                      dispatch(setMaritalStatus(e.target.value));
                      handleSelectionChange("Marital Status", e.target.value);
                    }}
                  >
                    <MenuItem value="All Profile">All Profile</MenuItem>
                    <MenuItem value="Never Married">Never Married</MenuItem>
                    <MenuItem value="Divorced">Divorced</MenuItem>
                    <MenuItem value="Widowed">Widowed</MenuItem>
                  </Select>
                </FormControl>

                {/* Mother Tongue */}
                <FormControl fullWidth>
                  <InputLabel>Mother Tongue</InputLabel>
                  <Select
                    multiple
                    value={filters.motherTongue}
                    label="Mother Tongue"
                    onChange={(e) => {
                      dispatch(setMotherTongue(e.target.value));
                      handleSelectionChange("Mother Tongue", e.target.value);
                    }}
                    renderValue={(selected) => (
                      <Box sx={{ display: "flex", flexWrap: "wrap", gap: 0.5 }}>
                        {selected.map((value) => (
                          <Chip key={value} label={value} size="small" />
                        ))}
                      </Box>
                    )}
                  >
                    {motherTongueOptions.map((lang) => (
                      <MenuItem key={lang} value={lang}>
                        {lang}
                      </MenuItem>
                    ))}
                  </Select>
                </FormControl>
              </div>
            </AccordionDetails>
          </Accordion>

          {/* Religious Details Section */}
          <Accordion
            expanded={expandedSections.religious}
            onChange={handleAccordionChange("religious")}
            className="mb-4"
          >
            <AccordionSummary expandIcon={<ChevronDown />}   sx={{
    backgroundColor: "#f5fbff", // green-900
    "&:hover": {
      backgroundColor: "#fff6f0", // optional hover
    }
  }}>
              <Typography className="font-semibold  -mx-4 -my-2 px-4 py-2 w-full">
                Religious Details
              </Typography>
            </AccordionSummary>
            <AccordionDetails>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mt-4">
                {/* Religion */}
                <FormControl fullWidth>
                  <InputLabel>Religion</InputLabel>
                  <Select
                    value={filters.religion}
                    label="Religion"
                    onChange={(e) => {
                      dispatch(setReligion(e.target.value));
                      handleSelectionChange("Religion", e.target.value);
                    }}
                  >
                    <MenuItem value="Hindu">Hindu</MenuItem>
                    <MenuItem value="Muslim">Muslim</MenuItem>
                    <MenuItem value="Christian">Christian</MenuItem>
                    <MenuItem value="Sikh">Sikh</MenuItem>
                  </Select>
                </FormControl>

                {/* Matches with Horoscope */}
                <FormControlLabel
                  control={
                    <Checkbox
                      checked={filters.matchesWithHoroscope}
                      onChange={(e) => {
                        dispatch(setMatchesWithHoroscope(e.target.checked));
                        handleSelectionChange(
                          "Matches with Horoscope",
                          e.target.checked
                        );
                      }}
                    />
                  }
                  label="Matches with horoscope"
                />

                {/* Caste */}
                <FormControl fullWidth>
                  <InputLabel>Caste (Multi Select)</InputLabel>
                  <Select
                    multiple
                    value={filters.caste}
                    label="Caste (Multi Select)"
                    onChange={(e) => {
                      dispatch(setCaste(e.target.value));
                      handleSelectionChange("Caste", e.target.value);
                    }}
                    renderValue={(selected) => (
                      <Box
                        sx={{ display: "flex", flexWrap: "wrap", gap: 0.5 }}
                      >
                        {selected.map((value) => (
                          <Chip key={value} label={value} size="small" />
                        ))}
                      </Box>
                    )}
                  >
                    {["Agamudayar", "Pillai", "Vellalar"].map((caste) => (
                      <MenuItem key={caste} value={caste}>
                        {caste}
                      </MenuItem>
                    ))}
                  </Select>
                </FormControl>

                {/* Sub-Caste */}
                <FormControl fullWidth>
                  <InputLabel>Sub-Caste (Multi Select)</InputLabel>
                  <Select
                    multiple
                    value={filters.subCaste}
                    label="Sub-Caste (Multi Select)"
                    onChange={(e) => {
                      dispatch(setSubCaste(e.target.value));
                      handleSelectionChange("Sub-Caste", e.target.value);
                    }}
                    renderValue={(selected) => (
                      <Box
                        sx={{ display: "flex", flexWrap: "wrap", gap: 0.5 }}
                      >
                        {selected.map((value) => (
                          <Chip key={value} label={value} size="small" />
                        ))}
                      </Box>
                    )}
                  >
                    {["Agamudayar", "Pillai", "Vellalar"].map((caste) => (
                      <MenuItem key={caste} value={caste}>
                        {caste}
                      </MenuItem>
                    ))}
                  </Select>
                </FormControl>

                {/* Star */}
                <FormControl fullWidth>
                  <InputLabel>Star</InputLabel>
                  <Select
                    value={filters.star}
                    label="Star"
                    onChange={(e) => {
                      dispatch(updateFilter({ star: e.target.value }));
                      handleSelectionChange("Star", e.target.value);
                    }}
                  >
                    <MenuItem value="Any">Any</MenuItem>
                    <MenuItem value="Ashwini">Ashwini</MenuItem>
                    <MenuItem value="Bharani">Bharani</MenuItem>
                  </Select>
                </FormControl>

                {/* Dasham */}
                <FormControl fullWidth>
                  <InputLabel>Dasham</InputLabel>
                  <Select
                    value={filters.dasham}
                    label="Dasham"
                    onChange={(e) => {
                      dispatch(updateFilter({ dasham: e.target.value }));
                      handleSelectionChange("Dasham", e.target.value);
                    }}
                  >
                    <MenuItem value="Doesn't matter">Doesn't matter</MenuItem>
                    <MenuItem value="Yes">Yes</MenuItem>
                    <MenuItem value="No">No</MenuItem>
                  </Select>
                </FormControl>
              </div>
            </AccordionDetails>
          </Accordion>

          {/* Professional Details */}
          <Accordion
            expanded={expandedSections.professional}
            onChange={handleAccordionChange("professional")}
            className="mb-4"

            
          >
            <AccordionSummary expandIcon={<ChevronDown />}   sx={{
    backgroundColor: "#f5fbff", // green-900
    "&:hover": {
      backgroundColor: "#fff6f0", // optional hover
    }
  }}>
              <Typography className="font-semibold  -mx-4 -my-2 px-4 py-2 w-full">
                Professional Details
              </Typography>
            </AccordionSummary>
            <AccordionDetails>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mt-4">
                <FormControl fullWidth>
                  <InputLabel>Occupation</InputLabel>
                  <Select
                    value={filters.occupation}
                    label="Occupation"
                    onChange={(e) => {
                      dispatch(updateFilter({ occupation: e.target.value }));
                      handleSelectionChange("Occupation", e.target.value);
                    }}
                  >
                    <MenuItem value="Any">Any</MenuItem>
                    <MenuItem value="Software Engineer">
                      Software Engineer
                    </MenuItem>
                    <MenuItem value="Doctor">Doctor</MenuItem>
                  </Select>
                </FormControl>

                <FormControl fullWidth>
                  <InputLabel>Annual Income</InputLabel>
                  <Select
                    value={filters.annualIncome}
                    label="Annual Income"
                    onChange={(e) => {
                      dispatch(updateFilter({ annualIncome: e.target.value }));
                      handleSelectionChange("Annual Income", e.target.value);
                    }}
                  >
                    <MenuItem value="Any">Any</MenuItem>
                    <MenuItem value="0-5 Lakhs">0-5 Lakhs</MenuItem>
                    <MenuItem value="5-10 Lakhs">5-10 Lakhs</MenuItem>
                  </Select>
                </FormControl>

                <FormControl fullWidth>
                  <InputLabel>Employee Type</InputLabel>
                  <Select
                    value={filters.employeeType}
                    label="Employee Type"
                    onChange={(e) => {
                      dispatch(updateFilter({ employeeType: e.target.value }));
                      handleSelectionChange("Employee Type", e.target.value);
                    }}
                  >
                    <MenuItem value="Any">Any</MenuItem>
                    <MenuItem value="Government">Government</MenuItem>
                    <MenuItem value="Private">Private</MenuItem>
                  </Select>
                </FormControl>

                <FormControl fullWidth>
                  <InputLabel>Education</InputLabel>
                  <Select
                    value={filters.education}
                    label="Education"
                    onChange={(e) => {
                      dispatch(updateFilter({ education: e.target.value }));
                      handleSelectionChange("Education", e.target.value);
                    }}
                  >
                    <MenuItem value="Any">Any</MenuItem>
                    <MenuItem value="Bachelor">Bachelor</MenuItem>
                    <MenuItem value="Master">Master</MenuItem>
                  </Select>
                </FormControl>
              </div>
            </AccordionDetails>
          </Accordion>

          {/* Location Details */}
          <Accordion
            expanded={expandedSections.location}
            onChange={handleAccordionChange("location")}
            className="mb-4"
          >
            <AccordionSummary expandIcon={<ChevronDown />}  sx={{
    backgroundColor: "#f5fbff", // green-900
    "&:hover": {
      backgroundColor: "#fff6f0", // optional hover
    }
  }}>
              <Typography className="font-semibold  -mx-4 -my-2 px-4 py-2 w-full">
                Location Details
              </Typography>
            </AccordionSummary>
            <AccordionDetails>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mt-4">
                <FormControl fullWidth>
                  <InputLabel>State</InputLabel>
                  <Select
                    value={filters.state}
                    label="State"
                    onChange={(e) => {
                      dispatch(updateFilter({ state: e.target.value }));
                      handleSelectionChange("State", e.target.value);
                    }}
                  >
                    <MenuItem value="Any">Any</MenuItem>
                    <MenuItem value="Tamil Nadu">Tamil Nadu</MenuItem>
                    <MenuItem value="Karnataka">Karnataka</MenuItem>
                  </Select>
                </FormControl>

                <FormControl fullWidth>
                  <InputLabel>Country</InputLabel>
                  <Select
                    value={filters.country}
                    label="Country"
                    onChange={(e) => {
                      dispatch(updateFilter({ country: e.target.value }));
                      handleSelectionChange("Country", e.target.value);
                    }}
                  >
                    <MenuItem value="Any">Any</MenuItem>
                    <MenuItem value="India">India</MenuItem>
                    <MenuItem value="USA">USA</MenuItem>
                  </Select>
                </FormControl>

                <FormControl fullWidth>
                  <InputLabel>Citizenship</InputLabel>
                  <Select
                    value={filters.citizenship}
                    label="Citizenship"
                    onChange={(e) => {
                      dispatch(updateFilter({ citizenship: e.target.value }));
                      handleSelectionChange("Citizenship", e.target.value);
                    }}
                  >
                    <MenuItem value="Any">Any</MenuItem>
                    <MenuItem value="Indian">Indian</MenuItem>
                    <MenuItem value="US Citizen">US Citizen</MenuItem>
                  </Select>
                </FormControl>
              </div>
            </AccordionDetails>
          </Accordion>

          {/* Lifestyle Details */}
          <Accordion
            expanded={expandedSections.lifestyle}
            onChange={handleAccordionChange("lifestyle")}
            className="mb-4"
          >
            <AccordionSummary expandIcon={<ChevronDown />}  sx={{
    backgroundColor: "#f5fbff", // green-900
    "&:hover": {
      backgroundColor: "#fff6f0", // optional hover
    }
  }}>
              <Typography className="font-semibold  -mx-4 -my-2 px-4 py-2 w-full">
                Lifestyle Details
              </Typography>
            </AccordionSummary>
            <AccordionDetails>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mt-4">
                <FormControl fullWidth>
                  <InputLabel>Eating Habits</InputLabel>
                  <Select
                    value={filters.eatingHabits}
                    label="Eating Habits"
                    onChange={(e) => {
                      dispatch(updateFilter({ eatingHabits: e.target.value }));
                      handleSelectionChange("Eating Habits", e.target.value);
                    }}
                  >
                    <MenuItem value="Any">Any</MenuItem>
                    <MenuItem value="Vegetarian">Vegetarian</MenuItem>
                    <MenuItem value="Non-Vegetarian">Non-Vegetarian</MenuItem>
                  </Select>
                </FormControl>

                {/* <FormControl fullWidth>
                  <InputLabel>Smoking Habits</InputLabel>
                  <Select
                    value={filters.smokingHabits}
                    label="Smoking Habits"
                    onChange={(e) => {
                      dispatch(
                        updateFilter({ smokingHabits: e.target.value })
                      );
                      handleSelectionChange("Smoking Habits", e.target.value);
                    }}
                  >
                    <MenuItem value="Doesn't matter">Doesn't matter</MenuItem>
                    <MenuItem value="Non-Smoker">Non-Smoker</MenuItem>
                    <MenuItem value="Smoker">Smoker</MenuItem>
                  </Select>
                </FormControl>

                <FormControl fullWidth>
                  <InputLabel>Drinking Habits</InputLabel>
                  <Select
                    value={filters.drinkingHabits}
                    label="Drinking Habits"
                    onChange={(e) => {
                      dispatch(
                        updateFilter({ drinkingHabits: e.target.value })
                      );
                      handleSelectionChange("Drinking Habits", e.target.value);
                    }}
                  >
                    <MenuItem value="Doesn't matter">Doesn't matter</MenuItem>
                    <MenuItem value="Non-Drinker">Non-Drinker</MenuItem>
                    <MenuItem value="Social Drinker">Social Drinker</MenuItem>
                  </Select>
                </FormControl> */}
              </div>
            </AccordionDetails>
          </Accordion>

          {/* Family Details */}
          <Accordion
            expanded={expandedSections.family}
            onChange={handleAccordionChange("family")}
            className="mb-4"
          >
            <AccordionSummary expandIcon={<ChevronDown />}  sx={{
    backgroundColor: "#f5fbff", // green-900
    "&:hover": {
      backgroundColor: "#fff6f0", // optional hover
    }
  }}>
              <Typography className="font-semibold  -mx-4 -my-2 px-4 py-2 w-full">
                Family Details
              </Typography>
            </AccordionSummary>
            <AccordionDetails>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mt-4">
                <FormControl fullWidth>
                  <InputLabel>Family Type</InputLabel>
                  <Select
                    value={filters.familyType}
                    label="Family Type"
                    onChange={(e) => {
                      dispatch(updateFilter({ familyType: e.target.value }));
                      handleSelectionChange("Family Type", e.target.value);
                    }}
                  >
                    <MenuItem value="Any">Any</MenuItem>
                    <MenuItem value="Nuclear">Nuclear</MenuItem>
                    <MenuItem value="Joint">Joint</MenuItem>
                  </Select>
                </FormControl>

                <FormControl fullWidth>
                  <InputLabel>Family Status</InputLabel>
                  <Select
                    value={filters.familyStatus}
                    label="Family Status"
                    onChange={(e) => {
                      dispatch(updateFilter({ familyStatus: e.target.value }));
                      handleSelectionChange("Family Status", e.target.value);
                    }}
                  >
                    <MenuItem value="Any">Any</MenuItem>
                    <MenuItem value="Middle Class">Middle Class</MenuItem>
                    <MenuItem value="Upper Middle Class">
                      Upper Middle Class
                    </MenuItem>
                  </Select>
                </FormControl>

                <FormControl fullWidth>
                  <InputLabel>Family Value</InputLabel>
                  <Select
                    value={filters.familyValue}
                    label="Family Value"
                    onChange={(e) => {
                      dispatch(updateFilter({ familyValue: e.target.value }));
                      handleSelectionChange("Family Value", e.target.value);
                    }}
                  >
                    <MenuItem value="Any">Any</MenuItem>
                    <MenuItem value="Traditional">Traditional</MenuItem>
                    <MenuItem value="Moderate">Moderate</MenuItem>
                    <MenuItem value="Liberal">Liberal</MenuItem>
                  </Select>
                </FormControl>
              </div>
            </AccordionDetails>
          </Accordion>

          {/* Submit Button */}
          <div className="mt-6 flex justify-center">
            <Button
              variant="contained"
              size="large"
              onClick={handleSubmit}
              className="px-12"
            >
              Apply Filters
            </Button>
          </div>
        </div>
      </div>
    </div>
  );
};

export default FilterForm;
