import React, { useState, useEffect } from "react";
import axios from "axios";
import { Box, Typography, Grid, Paper } from "@mui/material";
import { useParams, useNavigate } from "react-router-dom";
import { isAutheticated } from "../../auth";
import Button from "@material-ui/core/Button";
import swal from "sweetalert";
import PDmodal from "./ModalPD.js";
import SCmodal from "./ModalSC.js";
import TMmodal from "./ModalTM.js";

const MapRD = () => {
  const { id } = useParams();
  const token = isAutheticated();
  const navigate = useNavigate();
  const [success, setSuccess] = useState(true);
  const [data, setData] = useState(null);
  const [openPDModal, setOpenPDModal] = useState(false);
  const [openSCModal, setOpenSCModal] = useState(false);
  const [openTMModal, setOpenTMModal] = useState(false);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await axios.get(`/api/getRD/${id}`, {
          headers: {
            "Access-Control-Allow-Origin": "*",
            Authorization: `Bearer ${token}`,
            "Content-Type": "multipart/form-data",
          },
        });
        setData(response?.data);
      } catch (error) {
        console.error("Error fetching data: ", error);
      }
    };

    fetchData();
  }, [id, token, success]);

  const handleDelete = (designation) => {
    swal({
      title: "Are you sure?",
      icon: "warning",
      buttons: {
        Yes: { text: "Yes", value: true },
        Cancel: { text: "Cancel", value: "cancel" },
      },
    }).then((value) => {
      if (value === true) {
        let data = {};
        if (designation === "TM") {
          data.mappedTM = true;
        } else if (designation === "SC") {
          data.mappedSC = true;
        } else {
          data.principal_distributor = true;
        }

        axios
          .patch(`/api/unmap/${id}`, data, {
            headers: {
              "Access-Control-Allow-Origin": "*",
              Authorization: `Bearer ${token}`,
            },
          })
          .then((res) => {
            swal({
              title: "Deleted",
              text: "Retailer Unmapped successfully!",
              icon: "success",
              button: "Ok",
            });
            setSuccess((prev) => !prev);
          })
          .catch((err) => {
            let msg = err?.response?.data?.message || "Something went wrong!";
            swal({
              title: "Warning",
              text: msg,
              icon: "error",
              button: "Retry",
              dangerMode: true,
            });
          });
      }
    });
  };

  const handleOpenPDModal = () => setOpenPDModal(true);
  const handleClosePDModal = () => setOpenPDModal(false);

  const handleOpenSCModal = () => setOpenSCModal(true);
  const handleCloseSCModal = () => setOpenSCModal(false);

  const handleOpenTMModal = () => setOpenTMModal(true);
  const handleCloseTMModal = () => setOpenTMModal(false);

  const refreshData = () => {
    setSuccess((prev) => !prev);
  };

  return (
    <Box sx={{ p: 3 }}>
      <Box
        sx={{
          display: "flex",
          justifyContent: "space-between",
          alignItems: "center",
          mb: 3,
        }}
      >
        <Typography variant="h4">Retailer Details</Typography>
        <Button
          variant="contained"
          color="secondary"
          style={{
            fontWeight: "bold",
            marginBottom: "1rem",
            textTransform: "capitalize",
          }}
          onClick={() => {
            navigate("/retail-distributor", { replace: true });
          }}
        >
          Cancel
        </Button>
      </Box>

      <Paper sx={{ p: 2, mb: 3 }}>
        <Typography variant="h5" gutterBottom>
          Retailer Details
        </Typography>
        <Grid container spacing={2}>
          <Grid item xs={6}>
            <Typography>
              <strong>Trade Name:</strong> {data?.kyc.trade_name}
            </Typography>
            <Typography>
              <strong>Name:</strong> {data?.name}
            </Typography>
            <Typography>
              <strong>Address:</strong> {data?.kyc.address}
            </Typography>
            <Typography>
              <strong>Town/City:</strong> {data?.kyc.city}
            </Typography>
            <Typography>
              <strong>District:</strong> {data?.kyc.district}
            </Typography>
            <Typography>
              <strong>State:</strong> {data?.kyc.state}
            </Typography>
            <Typography>
              <strong>Pincode:</strong> {data?.kyc.pincode}
            </Typography>
            <Typography>
              <strong>Mobile Number:</strong> {data?.mobile_number}
            </Typography>
          </Grid>
          <Grid item xs={6}>
            <Typography>
              <strong>Mapped Territory Manager:</strong>{" "}
              {data?.mappedTM?.name || "Not Mapped"}
            </Typography>
            <Typography>
              <strong>Mapped Principal Distributor:</strong>{" "}
              {data?.principal_distributer?.name || "Not Mapped"}
            </Typography>
            <Typography>
              <strong>Mapped Sales Coordinator:</strong>{" "}
              {data?.mappedSC?.name || "Not Mapped"}
            </Typography>
          </Grid>
        </Grid>
      </Paper>
      {/* Territory Managers */}
      <Paper sx={{ p: 2, mb: 3 }}>
        <Box
          sx={{
            display: "flex",
            justifyContent: "space-between",
            alignItems: "center",
          }}
        >
          <Typography variant="h6" gutterBottom>
            Territory Manager Details
          </Typography>
          <Box>
            <Button
              variant="contained"
              color="primary"
              size="small" // Set button size to small
              style={{ backgroundColor: "blue", marginRight: "8px" }} // marginRight for gap
              onClick={handleOpenTMModal}
            >
              Map TM
            </Button>
            <Button
              variant="contained"
              color="secondary"
              size="small" // Set button size to small
              style={{ backgroundColor: "red" }}
              onClick={() => handleDelete("TM")}
            >
              Unmap TM
            </Button>
          </Box>
        </Box>
        <Grid container spacing={2}>
          <Grid item xs={6}>
            <Typography>
              <strong>Name:</strong> {data?.mappedTM?.name || "Not Mapped"}
            </Typography>
            <Typography>
              <strong>Mobile Number:</strong>{" "}
              {data?.mappedTM?.mobileNumber || "Not Mapped"}
            </Typography>
            <Typography>
              <strong>Email:</strong> {data?.mappedTM?.email || "Not Mapped"}
            </Typography>
          </Grid>
        </Grid>
      </Paper>
      {/* Sales Coordinators */}
      <Paper sx={{ p: 2, mb: 3 }}>
        <Box
          sx={{
            display: "flex",
            justifyContent: "space-between",
            alignItems: "center",
          }}
        >
          <Typography variant="h6" gutterBottom>
            Sales Coordinator Details
          </Typography>
          <Box>
            <Button
              variant="contained"
              color="primary"
              size="small" // Set button size to small
              style={{ backgroundColor: "blue", marginRight: "8px" }} // marginRight for gap
              onClick={handleOpenSCModal}
            >
              Map SC
            </Button>
            <Button
              variant="contained"
              color="secondary"
              size="small" // Set button size to small
              style={{ backgroundColor: "red" }}
              onClick={() => handleDelete("SC")}
            >
              Unmap SC
            </Button>
          </Box>
        </Box>
        <Grid container spacing={2}>
          <Grid item xs={6}>
            <Typography>
              <strong>Name:</strong> {data?.mappedSC?.name || "Not Mapped"}
            </Typography>
            <Typography>
              <strong>Mobile Number:</strong>{" "}
              {data?.mappedSC?.mobileNumber || "Not Mapped"}
            </Typography>
            <Typography>
              <strong>Email:</strong> {data?.mappedSC?.email || "Not Mapped"}
            </Typography>
          </Grid>
        </Grid>
      </Paper>
      {/* Principal Distributor */}
      <Paper sx={{ p: 2, mb: 3 }}>
        <Box
          sx={{
            display: "flex",
            justifyContent: "space-between",
            alignItems: "center",
          }}
        >
          <Typography variant="h6" gutterBottom>
            Principal Distributor Details
          </Typography>
          <Box>
            <Button
              variant="contained"
              color="primary"
              size="small"
              style={{ backgroundColor: "blue", marginRight: "8px" }}
              onClick={handleOpenPDModal}
            >
              Map PD
            </Button>
            <Button
              variant="contained"
              color="secondary"
              size="small"
              style={{ backgroundColor: "red" }}
              onClick={() => handleDelete("PD")}
            >
              Unmap PD
            </Button>
          </Box>
        </Box>
        <Grid container spacing={2}>
          <Grid item xs={6}>
            <Typography>
              <strong>Name:</strong>{" "}
              {data?.principal_distributer?.name || "Not Mapped"}
            </Typography>
            <Typography>
              <strong>Mobile Number:</strong>{" "}
              {data?.principal_distributer?.phone || "Not Mapped"}
            </Typography>
            <Typography>
              <strong>Email:</strong>{" "}
              {data?.principal_distributer?.email || "Not Mapped"}
            </Typography>
          </Grid>
        </Grid>
      </Paper>

      <PDmodal
        rdid={id}
        openPDModal={openPDModal}
        handleClosePDModal={handleClosePDModal}
        refreshData={refreshData}
      />
      <SCmodal
        rdid={id}
        openSCModal={openSCModal}
        handleCloseSCModal={handleCloseSCModal}
        refreshData={refreshData}
      />
      <TMmodal
        rdid={id}
        openTMModal={openTMModal}
        handleCloseTMModal={handleCloseTMModal}
        refreshData={refreshData}
      />
    </Box>
  );
};

export default MapRD;