import React, { useState, useEffect, useRef, useCallback } from "react";
import axios from "axios";
import {
  Box,
  Typography,
  Grid,
  Paper,
  Avatar,
  IconButton,
  Dialog,
  DialogContent,
  DialogTitle,
  Autocomplete,
  TextField,
} from "@mui/material";
import { useParams, useNavigate } from "react-router-dom";
import { format } from "date-fns";
import { isAutheticated } from "../../auth";
import CancelIcon from "@mui/icons-material/Cancel"; // Add this import
import { City, State } from "country-state-city";
import { Modal, Button } from "react-bootstrap";
import swal from "sweetalert";
const SingleRetailDistributor = () => {
  const { id } = useParams();
  const [retailerDetails, setRetailerDetails] = useState(null);
  const [openPopup, setOpenPopup] = useState(false);
  const [selectedImage, setSelectedImage] = useState("");
  const token = isAutheticated();
  const navigate = useNavigate();

  const [userAllAddress, setUserAllAddress] = useState([]);
  const [tradeName, setTradeName] = useState(null);
  const [showModal, setShowModal] = useState(false);
  const [isEditMode, setIsEditMode] = useState(false);
  const [stateOptions, setStateOptions] = useState([]);
  const [cityOptions, setCityOptions] = useState([]);
  const [selectedState, setSelectedState] = useState(null);
  const [selectedCity, setSelectedCity] = useState(null);
  const [currentAddress, setCurrentAddress] = useState({
    Name: "",
    tradeName: "",
    phoneNumber: "",
    street: "",
    district: "",
    city: "",
    state: "",
    postalCode: "",
    country: "India",
    isDefault: false,
  });

  // Fetch states when the component mounts
  useEffect(() => {
    const fetchStates = () => {
      const states = State.getStatesOfCountry("IN").map((state) => ({
        label: state.name,
        value: state.isoCode,
      }));
      setStateOptions(states);
    };
    fetchStates();
  }, []);

  // Fetch cities when a state is selected
  useEffect(() => {
    const fetchCities = () => {
      if (selectedState) {
        const cities = City.getCitiesOfState("IN", selectedState.value).map(
          (city) => ({
            label: city.name,
            value: city.name,
          })
        );
        setCityOptions(cities);
      } else {
        setCityOptions([]); // Clear cities if no state is selected
      }
    };
    fetchCities();
  }, [selectedState]);

  // Open modal for add or edit mode
  const handleOpenModal = (address = null) => {
    setIsEditMode(!!address); // Set edit mode if address is provided
    const initialAddress = address || {
      Name: "",
      tradeName: tradeName,
      phoneNumber: "",
      street: "",
      district: "",
      city: "",
      state: "",
      postalCode: "",
      country: "India",
      isDefault: false,
    };
    setCurrentAddress(initialAddress);

    // Fetch city options based on the state from the backend
    if (address) {
      const state =
        stateOptions.find((option) => option.label === address.state) || null;

      // Set selected state from backend address
      setSelectedState(state);

      // Fetch cities if state is found
      if (state) {
        const cities = City.getCitiesOfState("IN", state.value).map((city) => ({
          label: city.name,
          value: city.name,
        }));
        setCityOptions(cities);

        // Set selected city if it exists in the fetched city options
        const city =
          cities.find((option) => option.label === address.city) || null;
        setSelectedCity(city); // Set the selected city
      }
    } else {
      setSelectedState(null);
      setSelectedCity(null);
      setCityOptions([]); // Clear city options if no address is provided
    }

    setShowModal(true);
  };

  // Close modal without saving changes
  const handleCloseModal = () => {
    setShowModal(false);
    // Reset selections to previous state when modal is closed
    setSelectedState(null); // Reset state selection
    setSelectedCity(null); // Reset city selection
    setCurrentAddress({
      Name: "",
      tradeName: "",
      phoneNumber: "",
      street: "",
      district: "",
      city: "",
      state: "",
      postalCode: "",
      country: "India",
      isDefault: false,
    });
  };

  // Save address logic for adding or updating
  const handleSaveAddress = async () => {
    try {
      const updatedAddress = {
        ...currentAddress,
        tradeName: tradeName,
      };
      const apiUrl = isEditMode
        ? `/api/rd/shipping/address/update/${currentAddress._id}`
        : `/api/rd/shipping/address/admin/new/${id}`;

      // console.log(currentAddress);
      const method = isEditMode ? "patch" : "post";

      // Prepare the headers with the token
      const headers = {
        Authorization: `Bearer ${token}`,
        "Content-Type": "application/json",
      };

      // Make the API call with the headers
      await axios[method](apiUrl, updatedAddress, { headers });

      swal(
        "Success!",
        `Address ${isEditMode ? "updated" : "added"} successfully!`,
        "success"
      );

      handleCloseModal();
      getUserAddress();
    } catch (error) {
      console.error("Error saving address:", error);
      swal("Error!", "There was an error saving the address.", "error");
    }
  };

  const handleStateChange = (event, newValue) => {
    setSelectedState(newValue);
    setCurrentAddress((prev) => ({
      ...prev,
      state: newValue ? newValue.label : "",
      city: "", // Clear city when state changes
    }));
    setSelectedCity(null); // Reset city selection
    setCityOptions([]); // Clear city options on state change
  };

  const handleCityChange = (event, newValue) => {
    setSelectedCity(newValue);
    setCurrentAddress((prev) => ({
      ...prev,
      city: newValue ? newValue.label : "",
    }));
  };
  // Fetch Shipping address of the individual user
  const getUserAddress = useCallback(async () => {
    try {
      const response = await axios.get(
        `/api/rd/shipping/address/user/address/${id}`,
        {
          headers: {
            Authorization: `Bearer ${token}`,
          },
        }
      );
      // console.log(response.data);
      setUserAllAddress(response.data?.UserShippingAddress || []);
    } catch (error) {
      swal({
        title: "Warning",
        text: error.message,
        icon: "error",
        button: "Close",
        dangerMode: true,
      });
    }
  }, [id, token]);
  const handledeleteAddress = async (address_id) => {
    try {
      const response = await axios.delete(
        `/api/rd/shipping/address/delete/${address_id}`, // Address ID in the URL
        {
          headers: {
            Authorization: `Bearer ${token}`, // Authorization header
          },
          data: { userId: id }, // User ID in the request body
        }
      );

      swal({
        title: "Success",
        text: response.data.message,
        icon: "success",
        button: "Close",
      });

      getUserAddress();
    } catch (error) {
      // Handle errors here, ensuring that you access the error message correctly
      swal({
        title: "Warning",
        text: error.response?.data?.message || error.message, // Improved error handling
        icon: "error",
        button: "Close",
        dangerMode: true,
      });
    }
  };
  const getUserDetails = useCallback(async () => {
    try {
      // Commented out the API call and using dummy data
      const response = await axios.get(`/api/getRD/${id}`, {
        headers: {
          "Access-Control-Allow-Origin": "*",
          Authorization: `Bearer ${token}`,
          "Content-Type": "multipart/form-data",
        },
      });
      setRetailerDetails(response.data);
      // console.log('Retailer Details: ', response.data);
      setTradeName(response.data?.kyc?.trade_name || "");
    } catch (error) {
      console.error("Error fetching data: ", error);
    }
  }, [id, token]);

  // Fetch retailer details on mount
  useEffect(() => {
    getUserDetails();
    getUserAddress();
  }, [id, getUserDetails, getUserAddress]);

  const handleOpenPopup = (imageUrl) => {
    setSelectedImage(imageUrl);
    setOpenPopup(true);
  };

  const handleClosePopup = () => {
    setOpenPopup(false);
    setSelectedImage("");
  };

  const handleCancel = () => {
    navigate("/retail-distributor");
  };

  if (!retailerDetails) {
    return <Typography>Loading...</Typography>;
  }

  return (
    <Box sx={{ p: 3 }}>
      <Box
        sx={{
          display: "flex",
          justifyContent: "space-between",
          alignItems: "center",
          mb: 3,
        }}
      >
        <Typography variant="h4">Retailer Details</Typography>
        <IconButton sx={{ color: "red" }} onClick={handleCancel}>
          Cancel <CancelIcon />
        </IconButton>
      </Box>

      <Paper sx={{ p: 2, mb: 3 }}>
        <Typography variant="h5" gutterBottom>
          Retailer Details
        </Typography>
        <Grid container spacing={2}>
          <Grid item xs={6}>
            <Typography>
              <strong>Unique Id:</strong> {retailerDetails.uniqueId}
            </Typography>
            <Typography>
              <strong>Trade Name:</strong> {retailerDetails.kyc.trade_name}
            </Typography>
            <Typography>
              <strong>Name:</strong> {retailerDetails.name}
            </Typography>
            <Typography>
              <strong>Mobile Number:</strong> {retailerDetails.mobile_number}
            </Typography>
            <Typography>
              <strong>Email:</strong> {retailerDetails.email}
            </Typography>
          </Grid>
          <Grid item xs={6}>
            <Typography>
              <strong>Address:</strong> {retailerDetails.kyc.address}
            </Typography>
            <Typography>
              <strong>Town/City:</strong> {retailerDetails.kyc.city}
            </Typography>
            <Typography>
              <strong>District:</strong> {retailerDetails.kyc.district}
            </Typography>
            <Typography>
              <strong>State:</strong> {retailerDetails.kyc.state}
            </Typography>
            <Typography>
              <strong>Pincode:</strong> {retailerDetails.kyc.pincode}
            </Typography>
            <Typography>
              <strong>Mapped Principal Distributor:</strong>{" "}
              {retailerDetails?.principal_distributer?.name || "Not Mapped"}
            </Typography>
          </Grid>
        </Grid>
      </Paper>

      <Paper sx={{ p: 2, mb: 3 }}>
        <Typography variant="h6" gutterBottom>
          Documents
        </Typography>
        <Grid container spacing={2}>
          <Grid item xs={6}>
            <Typography>
              <strong>PAN Number:</strong> {retailerDetails.kyc.pan_number}
            </Typography>
            {retailerDetails?.kyc?.pan_img ? (
              <Avatar
                variant="square"
                src={retailerDetails?.kyc?.pan_img?.url}
                sx={{ width: 100, height: 100, mb: 2, cursor: "pointer" }}
                onClick={() =>
                  handleOpenPopup(retailerDetails?.kyc?.pan_img?.url)
                }
              />
            ) : (
              <Typography>Img not available</Typography>
            )}
            <Typography>
              <strong>Aadhar Number:</strong>{" "}
              {retailerDetails.kyc.aadhar_number}
            </Typography>
            {retailerDetails?.kyc?.aadhar_img ? (
              <Avatar
                variant="square"
                src={retailerDetails?.kyc?.aadhar_img?.url}
                sx={{ width: 100, height: 100, mb: 2, cursor: "pointer" }}
                onClick={() =>
                  handleOpenPopup(retailerDetails?.kyc?.aadhar_img?.url)
                }
              />
            ) : (
              <Typography>Img not available</Typography>
            )}
            <Typography>
              <strong>GST Number:</strong> {retailerDetails.kyc.gst_number}
            </Typography>
            {retailerDetails?.kyc?.gst_img ? (
              <Avatar
                variant="square"
                src={retailerDetails?.kyc?.gst_img?.url}
                sx={{ width: 100, height: 100, mb: 2, cursor: "pointer" }}
                onClick={() =>
                  handleOpenPopup(retailerDetails?.kyc?.gst_img?.url)
                }
              />
            ) : (
              <Typography>Img not available</Typography>
            )}
          </Grid>
          <Grid item xs={6}>
            <Typography>
              <strong>Pesticide License:</strong>
            </Typography>
            {retailerDetails?.kyc?.pesticide_license_img ? (
              <Avatar
                variant="square"
                src={retailerDetails?.kyc?.pesticide_license_img?.url}
                sx={{ width: 100, height: 100, mb: 2, cursor: "pointer" }}
                onClick={() =>
                  handleOpenPopup(
                    retailerDetails?.kyc?.pesticide_license_img?.url
                  )
                }
              />
            ) : (
              <Typography>Img not available</Typography>
            )}
            <Typography>
              <strong>Fertilizer License (optional):</strong>
            </Typography>
            {retailerDetails?.kyc?.fertilizer_license_img ? (
              <Avatar
                variant="square"
                src={retailerDetails?.kyc?.fertilizer_license_img?.url}
                sx={{ width: 100, height: 100, mb: 2, cursor: "pointer" }}
                onClick={() =>
                  handleOpenPopup(
                    retailerDetails?.kyc?.fertilizer_license_img?.url
                  )
                }
              />
            ) : (
              <Typography>Img not available</Typography>
            )}
            <Typography>
              <strong>Selfie of Entrance Board:</strong>
            </Typography>
            {retailerDetails?.kyc?.selfie_entrance_img ? (
              <Avatar
                variant="square"
                src={retailerDetails?.kyc?.selfie_entrance_img?.url}
                sx={{ width: 100, height: 100, mb: 2, cursor: "pointer" }}
                onClick={() =>
                  handleOpenPopup(
                    retailerDetails?.kyc?.selfie_entrance_img?.url
                  )
                }
              />
            ) : (
              <Typography>Img not available</Typography>
            )}
          </Grid>
        </Grid>
      </Paper>

      <Paper sx={{ p: 2, mb: 3 }}>
        <Typography variant="h6" gutterBottom>
          Sales Coordinators/Territory Manager Details
        </Typography>
        <Grid container spacing={2}>
          <Grid item xs={6}>
            <Typography>
              <strong>Designation:</strong>{" "}
              {retailerDetails?.userType || "Not Available"}
            </Typography>
            <Typography>
              <strong>Name:</strong>{" "}
              {retailerDetails?.addedBy?.name || "Not Available"}
            </Typography>
            <Typography>
              <strong>ID:</strong>{" "}
              {retailerDetails?.addedBy?.uniqueId || "Not Available"}
            </Typography>
          </Grid>
        </Grid>
      </Paper>
      {/* Address of retail distributor */}
      <Paper sx={{ p: 2, mb: 3 }}>
        <h5 style={{ fontWeight: "bold", marginBottom: "1rem" }}>
          &bull; Addresses{" "}
        </h5>
        <div className="d-flex justify-content-between align-items-center mb-3">
          <h5 style={{ fontWeight: "bold" }}>
            &bull; Total Addresses: {userAllAddress?.length || 0}{" "}
          </h5>
          <Button
            className="btn btn-primary"
            onClick={() => handleOpenModal()} // Open modal for adding
          >
            Add Address
          </Button>
        </div>
        {userAllAddress?.length > 0 && (
          <div className="table-responsive table-shoot mt-3">
            <table
              className="table table-centered table-nowrap"
              style={{ border: "1px solid" }}
            >
              <thead
                className="thead-info"
                style={{ background: "rgb(140, 213, 213)" }}
              >
                <tr>
                  <th style={{ width: "5%" }}>SL No.</th>
                  <th style={{ width: "20%" }}>Trade Name</th>
                  <th style={{ width: "15%" }}>RD Name</th>
                  <th style={{ width: "40%" }}>Address</th>
                  <th style={{ width: "7%" }}>Default</th>
                  <th style={{ width: "13%" }}>Action</th>
                </tr>
              </thead>
              <tbody>
                {userAllAddress?.map((address, i) => (
                  <tr key={address._id || i}>
                    <td className="text-start">
                      <strong>{i + 1}</strong>
                    </td>
                    <td className="text-start">
                      <strong>
                        {address?.tradeName
                          ? `${address.tradeName}`
                          : "No Trade Name"}
                      </strong>
                    </td>
                    <td className="text-start">
                      <strong>
                        {address?.Name ? `${address.Name}` : "No RD Name"}
                      </strong>
                    </td>
                    <td className="text-start">
                      <strong>
                        {address?.street}, {address?.city}, {address?.district}, {address?.state},{" "}
                        {address?.country}, {address?.postalCode}
                      </strong>
                    </td>
                    <td className="text-start">
                      <strong>{address.isDefault ? "Yes" : "No"}</strong>
                    </td>
                    <td className="text-start">
                      <Button
                        className="btn btn-warning btn-sm me-2"
                        onClick={() => handleOpenModal(address)} // Open modal for editing
                      >
                        Edit
                      </Button>
                      <Button
                        className="btn btn-danger btn-sm"
                        onClick={() => handledeleteAddress(address._id)}
                      >
                        Delete
                      </Button>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        )}
        {/* Modal for Adding/Editing Address */}
        <Modal
          show={showModal}
          onHide={handleCloseModal}
          dialogClassName="modal-lg"
        >
          <Modal.Header closeButton>
            <Modal.Title>
              {isEditMode ? "Edit Shipping Address" : "Add Shipping Address"}
            </Modal.Title>
          </Modal.Header>
          <Modal.Body>
            <div className="container">
              <div className="row">
                {/* Name and Trade Name */}
                <div className="col-md-6">
                  <label>Name</label>
                  <input
                    type="text"
                    value={currentAddress?.Name || ""}
                    onChange={(e) =>
                      setCurrentAddress({
                        ...currentAddress,
                        Name: e.target.value,
                      })
                    }
                    className="form-control mb-3"
                    placeholder="Enter name"
                  />
                </div>
                <div className="col-md-6">
                  <label>Trade Name</label>
                  <input
                    type="text"
                    value={currentAddress?.tradeName || ""}
                    onChange={(e) =>
                      setCurrentAddress({
                        ...currentAddress,
                        tradeName: e.target.value,
                      })
                    }
                    className="form-control mb-3"
                    placeholder="Enter trade name"
                  />
                </div>
              </div>

              <div className="row">
                {/* Phone Number and Street */}
                <div className="col-md-6">
                  <label>Phone Number</label>
                  <input
                    type="text"
                    value={currentAddress?.phoneNumber || ""}
                    onChange={(e) =>
                      setCurrentAddress({
                        ...currentAddress,
                        phoneNumber: e.target.value,
                      })
                    }
                    className="form-control mb-3"
                    placeholder="Enter phone number"
                  />
                </div>
                <div className="col-md-6">
                  <label>Street</label>
                  <input
                    type="text"
                    value={currentAddress?.street || ""}
                    onChange={(e) =>
                      setCurrentAddress({
                        ...currentAddress,
                        street: e.target.value,
                      })
                    }
                    className="form-control mb-3"
                    placeholder="Enter street"
                  />
                </div>
              </div>

              <div className="row">
                {/* State and City */}
                <div className="col-md-6">
                  <Autocomplete
                    options={stateOptions}
                    value={selectedState}
                    onChange={handleStateChange}
                    renderInput={(params) => (
                      <TextField {...params} label="Select State" />
                    )}
                  />
                </div>
                <div className="col-md-6">
                  <Autocomplete
                    options={cityOptions}
                    value={selectedCity}
                    onChange={handleCityChange}
                    isOptionEqualToValue={(option, value) =>
                      option.value === value.value
                    }
                    renderInput={(params) => (
                      <TextField {...params} label="Select City" />
                    )}
                  />
                </div>
              </div>

              <div className="row">
                {/* Postal Code and Country */}
                <div className="col-md-6">
                  <label>Postal Code</label>
                  <input
                    type="text"
                    value={currentAddress?.postalCode || ""}
                    onChange={(e) =>
                      setCurrentAddress({
                        ...currentAddress,
                        postalCode: e.target.value,
                      })
                    }
                    className="form-control mb-3"
                    placeholder="Enter postal code"
                  />
                </div>
                <div className="col-md-6">
                  <label>District</label>
                  <input
                    type="text"
                    value={currentAddress?.district || ""}
                    onChange={(e) =>
                      setCurrentAddress({
                        ...currentAddress,
                        district: e.target.value,
                      })
                    }
                    className="form-control mb-3"
                    placeholder="Enter District"
                  />
                </div>
              </div>
              <div className="row">
              <div className="col-md-6">
                  <label>Country</label>
                  <input
                    type="text"
                    disabled
                    value={currentAddress?.country || ""}
                    className="form-control mb-3"
                  />
                </div>
                <div className="col-md-6">
                  <label>Is Default Address</label>
                  <select
                    className="form-control mb-3"
                    value={currentAddress.isDefault ? "Yes" : "No"}
                    onChange={(e) =>
                      setCurrentAddress({
                        ...currentAddress,
                        isDefault: e.target.value === "Yes", // Convert Yes/No to true/false
                      })
                    }
                  >
                    <option value="Yes">Yes</option>
                    <option value="No">No</option>
                  </select>
                </div>
              </div>
            </div>
          </Modal.Body>
          <Modal.Footer>
            <Button variant="primary" onClick={handleSaveAddress}>
              Save
            </Button>
          </Modal.Footer>
        </Modal>
      </Paper>
      <Dialog
        open={openPopup}
        onClose={handleClosePopup}
        maxWidth="md"
        fullWidth
      >
        <DialogTitle>
          <IconButton
            sx={{ position: "absolute", right: 16, top: 16, color: "red" }}
            onClick={handleClosePopup}
          >
            <CancelIcon />
          </IconButton>
        </DialogTitle>
        <DialogContent
          sx={{
            display: "flex",
            justifyContent: "center",
            alignItems: "center",
            p: 0,
            overflow: "auto",
            maxHeight: "80vh",
            maxWidth: "80vw",
          }}
        >
          <img
            src={selectedImage}
            alt="Large Preview"
            style={{
              maxWidth: "100%",
              maxHeight: "100%",
              objectFit: "contain",
            }}
          />
        </DialogContent>
      </Dialog>
    </Box>
  );
};

export default SingleRetailDistributor;