import React, { useState, useEffect } from "react";
import axios from "axios";
import { useNavigate, useParams } from "react-router-dom";
import { isAutheticated } from "src/auth";
import Modal from "react-bootstrap/Modal";
import Button from "react-bootstrap/Button";
import Form from "react-bootstrap/Form";
import swal from "sweetalert";

const EditSalesCoOrdinator = () => {
  const navigate = useNavigate();
  const token = isAutheticated();
  const { id } = useParams();

  const [formData, setFormData] = useState({
    name: "",
    email: "",
    countryCode: "",
    mobileNumber: "",
    currentPassword: "",
    newPassword: "",
    confirmPassword: "",
    otp: "",
  });

  const [showVerifyModal, setShowVerifyModal] = useState(false);
  const [showPasswordModal, setShowPasswordModal] = useState(false);

  useEffect(() => {
    getSalesCoOrdinatorData();
  }, []);

  const getSalesCoOrdinatorData = async () => {
    try {
      const response = await axios.get(`/api/salescoordinator/getOne/${id}`, {
        headers: {
          Authorization: `Bearer ${token}`,
        },
      });
      const { data } = response.data;

      // Assuming country code always starts with + and is followed by 1-3 digits
      const fullMobileNumber = data?.mobileNumber || "";
      const countryCodeMatch = fullMobileNumber.match(/^\+\d{1,2}/);
      const countryCode = countryCodeMatch ? countryCodeMatch[0] : "";
      const mobileNumber = fullMobileNumber.replace(countryCode, "");

      setFormData({
        name: data?.name || "",
        email: data?.email || "",
        countryCode: countryCode,
        mobileNumber: mobileNumber,
        currentPassword: "",
        newPassword: "",
        confirmPassword: "",
        otp: "",
      });
    } catch (error) {
      console.error("Error fetching sales coordinator data: ", error);
    }
  };

  const handleChange = (e) => {
    setFormData({ ...formData, [e.target.name]: e.target.value });
  };

  const handleUpdateBasicInfo = () => {
    axios
      .patch(
        `/api/salescoordinator/profile/update/${id}`,
        {
          name: formData.name,
          email: formData.email,
        },
        {
          headers: {
            Authorization: `Bearer ${token}`,
          },
        }
      )
      .then((response) => {
        swal({
          title: "Success",
          text: "Sales coordinator information updated successfully!",
          icon: "success",
          button: "OK",
        });
      })
      .catch((error) => {
        let msg = error?.response?.data?.message || "Something went wrong!";
        swal({
          title: "Warning",
          text: msg,
          icon: "error",
          button: "Retry",
          dangerMode: true,
        });
      });
  };

  const handleVerifyMobile = () => {
    axios
      .post(
        `/api/salescoordinator/update-mobile-number/${id}`,
        {
          newCountryCode: formData.countryCode,
          newMobileNumber: formData.mobileNumber,
        },
        {
          headers: {
            Authorization: `Bearer ${token}`,
          },
        }
      )
      .then(() => {
        setShowVerifyModal(true);
      })
      .catch((error) => {
        let msg = error?.response?.data?.message || "Something went wrong!";
        swal({
          title: "Warning",
          text: msg,
          icon: "error",
          button: "Retry",
          dangerMode: true,
        });
      });
  };

  const handleVerifyOTP = () => {
    axios
      .post(
        "/api/salescoordinator/verify-updated-mobile-otp",
        {
          otp: formData.otp,
          newMobileNumber: `${formData.countryCode}${formData.mobileNumber}`,
        },
        {
          headers: {
            Authorization: `Bearer ${token}`,
            "Content-Type": "application/json",
          },
        }
      )
      .then(() => {
        setShowVerifyModal(false);
        // Handle success, if needed
      })
      .catch((error) => {
        let msg = error?.response?.data?.message || "Something went wrong!";
        swal({
          title: "Warning",
          text: msg,
          icon: "error",
          button: "Retry",
          dangerMode: true,
        });
      });
  };

  const handleChangePassword = () => {
    axios
      .put(
        `/api/salescoordinator/password/update/${id}`,
        {
          oldPassword: formData.currentPassword,
          newPassword: formData.newPassword,
          confirmPassword: formData.confirmPassword,
        },
        {
          headers: {
            Authorization: `Bearer ${token}`,
          },
        }
      )
      .then(() => {
        setShowPasswordModal(false);
        swal({
          title: "Success",
          text: "Password updated successfully!",
          icon: "success",
          button: "OK",
        });
      })
      .catch((error) => {
        let msg = error?.response?.data?.message || "Something went wrong!";
        swal({
          title: "Warning",
          text: msg,
          icon: "error",
          button: "Retry",
          dangerMode: true,
        });
      });
  };

  const onCancel = () => {
    navigate("/salescoordinators");
  };

  return (
    <div className="main-content">
      <div className="my-3 page-content">
        <div className="container-fluid">
          <div className="row">
            <div className="col-12">
              <div className="page-title-box d-flex align-items-center justify-content-between">
                <h4 className="mb-3">Edit Sales Coordinator</h4>
                <button
                  onClick={onCancel}
                  type="button"
                  className="btn btn-warning btn-cancel waves-effect waves-light mr-3"
                >
                  Back
                </button>
              </div>
            </div>
          </div>

          <div className="row">
            <div className="col-lg-12">
              <div className="card">
                <div className="card-body">
                  <div className="form-group">
                    <label>Name</label>
                    <input
                      type="text"
                      name="name"
                      className="form-control"
                      value={formData.name}
                      onChange={handleChange}
                      required
                    />
                  </div>
                  <div className="form-group">
                    <label>Email</label>
                    <input
                      type="email"
                      name="email"
                      className="form-control"
                      value={formData.email}
                      onChange={handleChange}
                      required
                    />
                  </div>
                  <div className="mt-4 mb-4">
                    <button
                      type="button"
                      className="btn btn-primary mr-2"
                      onClick={handleUpdateBasicInfo}
                    >
                      Update
                    </button>
                  </div>
                  <div className="form-group d-flex align-items-center">
                    <div className="mr-2" style={{ flex: 1 }}>
                      <label>Country Code</label>
                      <input
                        type="text"
                        name="countryCode"
                        className="form-control"
                        value={formData.countryCode}
                        onChange={handleChange}
                        required
                        disabled
                      />
                    </div>
                    <div className="mr-2" style={{ flex: 3 }}>
                      <label>Mobile Number</label>
                      <input
                        type="text"
                        name="mobileNumber"
                        className="form-control"
                        value={formData.mobileNumber}
                        onChange={handleChange}
                        required
                      />
                    </div>
                    <div className="mr-2" style={{ flex: 1 }}>
                      <label>&nbsp;</label>
                      <button
                        type="button"
                        className="btn btn-success"
                        onClick={handleVerifyMobile}
                        style={{ display: "block" }}
                      >
                        Verify Mobile Number
                      </button>
                    </div>
                  </div>
                  {/* <div className="mt-4 mb-4">
                    <button
                      type="button"
                      className="btn btn-danger"
                      onClick={() => setShowPasswordModal(true)}
                    >
                      Change Password
                    </button>
                  </div> */}
                </div>
              </div>
            </div>
          </div>

          {/* OTP Verification Modal */}
          <Modal
            show={showVerifyModal}
            onHide={() => setShowVerifyModal(false)}
          >
            <Modal.Header closeButton>
              <Modal.Title>Verify Mobile</Modal.Title>
            </Modal.Header>
            <Modal.Body>
              <Form.Group>
                <Form.Label>Enter OTP</Form.Label>
                <Form.Control
                  type="text"
                  placeholder="Enter OTP"
                  name="otp"
                  value={formData.otp}
                  onChange={handleChange}
                />
              </Form.Group>
            </Modal.Body>
            <Modal.Footer>
              <Button
                variant="secondary"
                onClick={() => setShowVerifyModal(false)}
              >
                Cancel
              </Button>
              <Button variant="primary" onClick={handleVerifyOTP}>
                Verify OTP
              </Button>
            </Modal.Footer>
          </Modal>

          {/* Change Password Modal */}
          <Modal
            show={showPasswordModal}
            onHide={() => setShowPasswordModal(false)}
          >
            <Modal.Header closeButton>
              <Modal.Title>Change Password</Modal.Title>
            </Modal.Header>
            <Modal.Body>
              <Form.Group>
                <Form.Label>Current Password</Form.Label>
                <Form.Control
                  type="password"
                  placeholder="Enter current password"
                  name="currentPassword"
                  value={formData.currentPassword}
                  onChange={handleChange}
                />
              </Form.Group>
              <Form.Group>
                <Form.Label>New Password</Form.Label>
                <Form.Control
                  type="password"
                  placeholder="Enter new password"
                  name="newPassword"
                  value={formData.newPassword}
                  onChange={handleChange}
                />
              </Form.Group>
              <Form.Group>
                <Form.Label>Confirm New Password</Form.Label>
                <Form.Control
                  type="password"
                  placeholder="Confirm new password"
                  name="confirmPassword"
                  value={formData.confirmPassword}
                  onChange={handleChange}
                />
              </Form.Group>
            </Modal.Body>
            <Modal.Footer>
              <Button
                variant="secondary"
                onClick={() => setShowPasswordModal(false)}
              >
                Cancel
              </Button>
              <Button variant="danger" onClick={handleChangePassword}>
                Change Password
              </Button>
            </Modal.Footer>
          </Modal>
        </div>
      </div>
    </div>
  );
};

export default EditSalesCoOrdinator;