import React, { useEffect, useState } from "react";
import Modal from "react-bootstrap/Modal";
import { useForm, Controller } from "react-hook-form";
import { yupResolver } from "@hookform/resolvers/yup";
import { getStates } from "@/services/public";
import { CustomerChildAdd, ChildUpdate, cancelSubscriptionDetails,sendCancelReq } from "@/services/profile";
import * as Yup from "yup";
import "react-toastify/dist/ReactToastify.css";
import { ToastContainer, toast } from "react-toastify";
import { useSession } from "next-auth/react";
import { Button } from "react-bootstrap";
import useAuthProvider from "@/useAuthProvider";

const schema = Yup.object().shape({
  customer: Yup.string()
    .required("Customer Name is required")
    .max(50, "Maximum 50 characters allowed"),
  contact: Yup.string().max(50, "Maximum 50 characters allowed").nullable(),
  city: Yup.string().max(50, "Maximum 50 characters allowed").nullable(),
  state: Yup.string().max(50, "Maximum 50 characters allowed").nullable(),
  phone: Yup.string().max(50, "Maximum 50 characters allowed").nullable(),
  email: Yup.string().max(50, "Maximum 50 characters allowed"),
  sales_rep: Yup.string().max(50, "Maximum 50 characters allowed").nullable(),
  is_sent_rate: Yup.string().default("0").nullable(),
});
function MyVerticallyCenteredModal(props: any) {

  const setListingRef = props?.refreshtate;
  const [formattedPhone, setFormattedPhone] = useState("");
  const [phoneErrorVisible, setPhoneErrorVisible] = useState(false);
  const [draydexemail, setDraydexEmail] = useState(false);
  const [errorMessage, setErrorMessage] = useState("");
  const [isValidEmail, setIsValidEmail] = useState(false);

  const {
    handleSubmit,
    control,
    reset,
    setValue,
    formState: { errors },
  } = useForm({
    resolver: yupResolver(schema),
    defaultValues: {
      is_sent_rate: "0",
    },
  });
  const [states, setStates] = useState([]);
  const { data } = useSession();
  const token = data?.user?.image;
  useEffect(() => {
    getStates()
      .then((response) => {
        setStates(response?.data);
      })
      .catch((error) => {
        return error;
      });
  }, []);
  const filteredStates = states?.filter(
    (state) => state?.country_code === "US"
  );

  const onSubmit = async (data1: any) => {
    if (
      data1?.is_sent_rate === "1" &&
      (!data1?.email || data1?.email.length === 0)
    ) {
      setDraydexEmail(true);
    } else {
      setDraydexEmail(false);
      if (!phoneErrorVisible && !isValidEmail) {
        const response = await CustomerChildAdd(token, data1);
        if (response.status === "success") {
          reset();
          setListingRef(true);
          toast.success(response.message, {
            position: toast.POSITION.TOP_CENTER,
          });
          setTimeout(() => {
            props.onHide();
          }, 1000);
          setFormattedPhone("");
          setPhoneErrorVisible(false);
          setIsValidEmail(false);
        } else {
          toast.error(response.message, {
            position: toast.POSITION.TOP_CENTER,
          });
        }
      }
    }
  };
  const handleCancel = () => {
    setErrorMessage("");
    setFormattedPhone("");
    setPhoneErrorVisible(false);
    setDraydexEmail(false);
    setIsValidEmail(false);
    props.onHide();
    reset();
  };
  const handlePhoneChange = (event: { target: { value: any } }) => {
    let inputValue = event.target.value;
    const cleanedInput = inputValue.replace(/\D/g, "");
    const formattedNumber = cleanedInput.slice(0, 10);
    if (formattedNumber.length >= 1 && formattedNumber.length <= 9) {
      setPhoneErrorVisible(true);
    } else {
      setPhoneErrorVisible(false);
    }
    const formattedDisplayNumber = formattedNumber.replace(
      /(\d{3})(\d{3})(\d{4})/,
      "$1-$2-$3"
    );
    setValue("phone", formattedDisplayNumber);
    setFormattedPhone(formattedDisplayNumber);
  };

  const handleValidEmail = (event: { target: { value: any } })=>{
    let validateEmail = event.target.value;
    const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
    if (validateEmail.length === 0 || emailRegex.test(validateEmail)) {
      setErrorMessage("");
      setIsValidEmail(false);
    } else {
      setErrorMessage("Please enter a valid email.");
      setIsValidEmail(true);
    }
    setValue("email", validateEmail);
  }

  return (
    <Modal
      {...props}
      size='lg'
      aria-labelledby='contained-modal-title-vcenter'
      centered
      backdrop='static'
    >
      <Modal.Header closeButton className='modal-header1'>
        <Modal.Title id='contained-modal-title-vcenter' className='textCenter'>
        <div className=" table-headers-fallback">
        <h3 className=" h3_text ">
          Add Customer
          </h3>
        </div>
        </Modal.Title>
        
      </Modal.Header>
      <Modal.Body>
        <ToastContainer />
        <div className='modal-body'>
          <div className='modal_form_body'>
            <form className='row g-3' onSubmit={handleSubmit(onSubmit)}>
              <div className='col-md-6 my-2'>
                <label htmlFor='name' className='form-label'>
                  <b> Customer Name</b>
                </label>
                <Controller
                  name='customer'
                  control={control}
                  render={({ field }) => (
                    <input
                      type='text'
                      className={`form-control ${errors.customer ? "is-invalid" : ""}`}
                      id='name'
                      {...field}
                    />
                  )}
                />
                {errors.customer && (
                  <div className='invalid-feedback'>
                    {errors.customer.message}
                  </div>
                )}
              </div>
              <div className='col-md-6 my-2'>
                <label htmlFor='city' className='form-label'>
                  <b> City</b>
                </label>
                <Controller
                  name='city'
                  control={control}
                  render={({ field }) => (
                    <input
                      type='text'
                      className={`form-control ${errors.city ? "is-invalid" : ""}`}
                      id='city'
                      {...field}
                    />
                  )}
                />
                {errors.city && (
                  <div className='invalid-feedback'>{errors.city.message}</div>
                )}
              </div>
              <div className='col-md-4 my-2'>
                <label htmlFor='state' className='form-label'>
                  <b> State</b>
                </label>
                <Controller
                  name='state'
                  control={control}
                  render={({ field }) => (
                    <select
                      id='state'
                      className={`form-select ${
                        errors.state ? "is-invalid" : ""
                      }`}
                      {...field}
                    >
                      <option value={null}>---Select State---</option>
                      {filteredStates?.map((item, i) => (
                        <option key={i} value={item?.state_code}>
                          {item?.state_name}
                        </option>
                      ))}
                    </select>
                  )}
                />
                {errors.state && (
                  <div className='invalid-feedback'>{errors.state.message}</div>
                )}
              </div>
              <div className='col-md-4 my-2'>
                <label htmlFor='phone' className='form-label'>
                  <b> Phone</b>
                </label>
                <Controller
                  name='phone'
                  control={control}
                  render={({ field }) => (
                    <input
                      type='text'
                      className={`form-control ${errors.phone ? "is-invalid" : ""}`}
                      id='phone'
                      {...field}
                      onChange={handlePhoneChange}
                      value={formattedPhone}
                    />
                  )}
                />
                {errors.phone && (
                  <div className='invalid-feedback'>{errors.phone.message}</div>
                )}
                {phoneErrorVisible && (
                  <p className='text-danger'>
                    Phone number must have at least 0 or 10 digits.
                  </p>
                )}
              </div>
              <div className='col-md-4 my-2'>
                <label htmlFor='sales_rep' className='form-label'>
                  <b> Assigned Rep</b>
                </label>
                <Controller
                  name='sales_rep'
                  control={control}
                  render={({ field }) => (
                    <input
                      type='text'
                      className={`form-control ${errors.sales_rep ? "is-invalid" : ""}`}
                      id='sales_rep'
                      {...field}
                    />
                  )}
                />
                {errors.sales_rep && (
                  <div className='invalid-feedback'>
                    {errors.sales_rep.message}
                  </div>
                )}
              </div>
              <div className='col-md-6 my-2'>
                <label htmlFor='contact' className='form-label'>
                  <b> Contact Name</b>
                </label>
                <Controller
                  name='contact'
                  control={control}
                  render={({ field }) => (
                    <input
                      type='text'
                      className={`form-control ${errors.contact ? "is-invalid" : ""}`}
                      id='contact'
                      {...field}
                    />
                  )}
                />
                {errors.contact && (
                  <div className='invalid-feedback'>
                    {errors.contact.message}
                  </div>
                )}
              </div>
              <div className='col-md-6 my-2'>
                <label htmlFor='email' className='form-label'>
                  <b> Draydex Email</b>
                </label>
                <Controller
                  name='email'
                  control={control}
                  render={({ field }) => (
                    <input
                      type='email'
                      className={`form-control ${
                        errorMessage ? "is-invalid" : ""
                      }`}
                      id='email'
                      {...field}
                      onChange={handleValidEmail}
                    />
                  )}
                />
                {draydexemail && (
                  <p className='text-danger'>
                    DrayDex Email is required when Add to Sent Rates is
                    &quot;Yes&quot;
                  </p>
                )}

                {errorMessage && <div style={{ color: "#dc3545" }}>{errorMessage}</div>}  
              </div>
              <div className='radio_btn'>
              <div className='modal-footer1 d-flex justify-content-center alin-items-center gap-3' style={{marginTop: "26px"}}>
                <button type='submit' className='btn btn-submit divStylecss-update'>
                  Submit
                </button>
                <div onClick={handleCancel} className='btn btn-cancel divStylecss-update'>
                  Cancel
                </div>
              </div>
                <div className='form-check'>
                  <label className='form-label'>
                    <b>Add to Sent Rates?</b>
                  </label>
                  <div className='badge_block popup_btn'>
                    <div className='float-right'>
                      <Controller
                        name='is_sent_rate'
                        control={control}
                        render={({ field }) => (
                          <div>
                            <input
                              type='radio'
                              autoComplete='off'
                              id='option-lbs'
                              className={`btn-check form-control ${errors.is_sent_rate ? "is-invalid" : ""}`}
                              value='1'
                              checked={field.value === "1"}
                              onChange={() => field.onChange("1")}
                            />
                            <label
                              className='btn btn-outline-warning radio-button-quote border-0 radio-button-bg text-light mb-0 form-label'
                              htmlFor='option-lbs'
                            >
                              Yes
                            </label>
                          </div>
                        )}
                      />
                    </div>
                    <span className='span-cross-rate'>/</span>
                    <div>
                      <Controller
                        name='is_sent_rate'
                        control={control}
                        render={({ field }) => (
                          <div>
                            <input
                              type='radio'
                              autoComplete='off'
                              id='option-kg'
                              className={`btn-check form-control ${errors.is_sent_rate ? "is-invalid" : ""}`}
                              value='0'
                              checked={field.value === "0"}
                              onChange={() => field.onChange("0")}
                            />
                            <label
                              className='btn btn-outline-warning radio-button-quote border-0 radio-button-bg text-light mb-0 form-label'
                              htmlFor='option-kg'
                            >
                              No
                            </label>
                          </div>
                        )}
                      />
                    </div>
                  </div>
                </div>
              </div>
              
            </form>
          </div>
        </div>
      </Modal.Body>
    </Modal>
  );
}
function InviteCenteredModal(props: any) {
  
  const {
    
    
    reset,
  
    formState: { errors },
  } = useForm({
    resolver: yupResolver(schema),
    defaultValues: {
      is_sent_rate: "0",
    },
  });
  const { data } = useSession();
  const token = data?.user?.image;
  const [email, setEmail] = useState()

  const handleCancel = () => {
    props.onHide();
    reset();
  };

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setEmail(e.target.value);
  };
  const InviteUser = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
      if (!email) {
      toast.error("Email is required", {
        position: toast.POSITION.TOP_CENTER,
      });
      return;
    }
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    if (!emailRegex.test(email)) {
      toast.error("Please enter a valid email address.", {
        position: toast.POSITION.TOP_CENTER,
      });
      return;
    }
    let payload = {
      user_id: data?.user?.id,
      child_email: email,
    };    
    let res = await ChildUpdate(token, payload);    
    if (res?.status === "success") {
      toast.success(res.message, {
        position: toast.POSITION.TOP_CENTER,
      });
      setEmail("");
      handleCancel();
    } else {
      toast.error(res?.message, {
            position: toast.POSITION.TOP_CENTER,
          });
      }  
    }
    
  return (
    <Modal
      {...props}
      size='lg'
      aria-labelledby='contained-modal-title-vcenter'
      centered
    >
      <Modal.Header closeButton className='modal-header1'>
        <Modal.Title id='contained-modal-title-vcenter' className='textCenter'>
        <div className="table-headers-fallback"><h3> Invite User</h3></div> 
        </Modal.Title>
      </Modal.Header>
      <Modal.Body>
        <ToastContainer />
        <div className='modal-body'>
          <div className='modal_form_body'>
            <form
              className='row g-3 d-flex justify-content-center align-items-center '
              onSubmit={(e) => InviteUser(e)}
            >
              <div
                className='col-md-6 my-2'
                style={{
                  display: "contents",
                }}
              >
                <label htmlFor='email' className='form-label'>
                  <b>Email</b>
                </label>
                <input
                  style={{
                    width: "51%",
                    marginLeft: "13px",
                    height: "35px",
                  }}
                  type='email'
                  className={`form-control${errors.email ? "is-invalid" : ""}`}
                  id='email'
                  // value={email}
                  onChange={(e) => handleChange(e)}
                />
              </div>

              <div className='modal-footer1 d-flex justify-content-center alin-items-center gap-3'>
                <button type='submit' className='btn btn-submit'>
                  Submit
                </button>
                <div onClick={handleCancel} className='btn btn-cancel'>
                  Cancel
                </div>
              </div>
            </form>
          </div>
        </div>
      </Modal.Body>
    </Modal>
  );
}
function CancelCenteredModal(props: any) {

  const {


    reset,

  
  } = useForm({
    resolver: yupResolver(schema),
    defaultValues: {
      is_sent_rate: "0",
    },
  });


  const handleCancel = () => {
    props.onHide();
    reset();
  };


  const getSubscriptionType = (seatsPlan) => {
    if (seatsPlan === 50) {
      return "Premium";
    } else if (seatsPlan === 15) {
      return "Pro Plan";
    } else {
      return "Advance";
    }
  };

  const seats = props?.customDetails?.original?.data?.seats;
  const subscriptionType = getSubscriptionType(seats);

  return (
    <Modal
      {...props}
      size='lg'
      aria-labelledby='contained-modal-title-vcenter'
      centered
      className="are_you__modal"
      backdrop="static" 
    >
      <Modal.Header>
        
      </Modal.Header>
      <div>
        <i className="bi bi-x cross-icon-subscription" onClick={() => handleCancel()}></i>
      </div>
      <Modal.Body>
        <Modal.Title>
          Are you sure you want to cancel your<br />{subscriptionType} subscription?
        </Modal.Title>
        <div className='reg_button mt-3'>
          <Button
            variant='secondary'
            onClick={() => handleCancel()}
            className='mx-2 carrierButton'
          >
            No
          </Button>
          <Button
            variant='danger'
            className='mx-2 customerButton'
            onClick={() => {
              props?.status(true)
              props?.modalCancelUser(false)
            }}
          >
            Yes
          </Button>
        </div>
      </Modal.Body>
    </Modal>
  );
}
function CancelNoteModal(props: any) {
  const { data } = useSession();
  const token = data?.user?.image;
const [Reason,setReason]= useState()
  const SubmitCancelReq = async() => {
    let res = await sendCancelReq(token, props?.planId, Reason)
    if (res?.status === "success") {
      toast.success(res.message, {
        position: toast.POSITION.TOP_CENTER,
      });
      props?.setOpenPop(false)
      props?.setnoteDetails(false)
    }
    else {
      toast.error(res.message, {
        position: toast.POSITION.TOP_CENTER,
      });
    }
  }
  const response = (e:any) => {
    setReason(e?.target?.value)
  }
  
  
  return (
    <Modal
      {...props}
      size='lg'
      aria-labelledby='contained-modal-title-vcenter'
      centered
      className="cancellation_modal"
      backdrop="static" 
    >
      <div>
        <i className="bi bi-x cross-icon-subscription" onClick={() => props?.onHide()}></i>
      </div>
      <Modal.Header>
        <Modal.Title>
Your cancellation request has been initiated. Please fill in the details below to complete the submission.       </Modal.Title>
      
      </Modal.Header>
      
      <Modal.Body>
      
        <div className='text_aria'>
          
          <textarea maxLength={150} placeholder="Please share your response for cancellation" onChange={(e) => response(e)} id="w3review" name="w3review" rows="4" cols="50">
          </textarea>
        </div>
        
        <div className='reg_button'>
          <Button disabled={!Reason ?true:false} onClick={() => SubmitCancelReq()}>Submit</Button>
        </div>
      </Modal.Body>
    </Modal>
  );
}
function CenteredModal(props: any) {
  const {
    reset,
  } = useForm({
    resolver: yupResolver(schema),
    defaultValues: {
      is_sent_rate: "0",
    },
  });
  const { data } = useSession();
  const token = data?.user?.image;
const [details,setDetails]= useState()
  const handleCancel = () => {
    props.onHide();
    reset();
  };

  const getDetails = async (e: React.FormEvent<HTMLFormElement>) => {
    let res = await cancelSubscriptionDetails(token, data?.user?.id);    
    setDetails(res);
    props?.Detail(res);
    props?.setPlanId(res?.original?.data?.payment_id)
    if (res?.status === "success") {
      toast.success(res.message, {
        position: toast.POSITION.TOP_CENTER,
      });
      handleCancel();
    } 
  }

  useEffect(() => {
    getDetails()
  }, [token, data])
  const [futureDate, setFutureDate] = useState(null);

  useEffect(() => {
    const remainingDays = details?.original?.data?.remaining_days; 
    if (remainingDays != null) {
      const currentDate = new Date();
      const dateFormat = new Date(currentDate);
      dateFormat.setDate(currentDate.getDate() + remainingDays);

      const formattedDate = dateFormat.toLocaleDateString('en-US', {
        month: 'short',
        day: 'numeric',
        year: 'numeric'
      });

      setFutureDate(formattedDate);
    }
  }, [details]);

  const getSeatType = (seatsseatsNum) => {
    if (seatsseatsNum === 50) {
      return "Premium";
    } else if (seatsseatsNum === 15) {
      return "Pro Plan";
    } else {
      return "Advance";
    }
  };

  const seats = details?.original?.data?.seats;
  const seatType = getSeatType(seats);

  return (
    <Modal
      {...props}
      size='xl'
      aria-labelledby=''
      centered
      backdrop="static" 
    >

      <div>
        <i className="bi bi-x cross-icon-subscription"  onClick={() => props?.onHide()}></i>
      </div>
      <Modal.Header closeButton className='modal-header1'>
        <Modal.Title id='' className=''>
         
         
        
          <div className="current_text">
            <h5>Current Subscription Details</h5>
          </div>
        </Modal.Title>
      </Modal.Header>
      <Modal.Body>
        <ToastContainer />
        <div className="container">
          <div className="subscription-card">
            <div className="card-body">
              
              <div className="row">
                <div className="col-4 text-center">
                  <div className="table-headers-fallback"><h3 className="">Current Subscription</h3></div>
                  
                  <div className="label__text">
                    {seatType}
                  </div>
                </div>
                <div className="col-4 text-center">
                  <div  className="table-headers-fallback">  <h3 className="text_large">Due Date</h3></div>
                
                  <div className="label__text">{futureDate}</div>
                  <div className="text_muted">{details?.original?.data?.remaining_days} Day(s) left</div>
                </div>
                <div className="col-4 text-center">
                <div  className="table-headers-fallback">   <h3 className="text_large">Current Seats</h3></div>
                  <div className="label__text">{details?.original?.data?.seats}</div>
                </div>
              </div>
              
            </div>
          </div>
            <div className="d-flex justify-content-center mt-2 ">
              <button style={{textAlign:"center"}} type="button" className=" btn btn-danger btn-custom divStylecss-update" onClick={() => {
                props?.status(true)
                props?.modalCancelUser(false)
              }} >Cancel Subscription</button>
            
          </div>
        </div>
        
      </Modal.Body>
    </Modal>
  );
}

export default function AddCustomer(props: any) {
  const [modalShow, setModalShow] = React.useState(false);
  const [modalInviteUser, setModalInviteUser] = React.useState(false);
  const [modalCancelUser, setModalCancelUser] = React.useState(false);
  const [openPop, setOpenPop] = useState(); 
  const [notedetails, setnoteDetails] = useState(); 
  const [planId, setPlanId] = useState()
  const [customDetail, setCustomDetail] = useState()
  const sendProp = props?.listRefresh;
  const { Permission: userData } = useAuthProvider();
  const { data } = useSession();
  let addButton = "";
  
  if (userData?.SelectAddCustomer) {
    if (!props?.status) {
      addButton = (
        <Button className='AddCustomerBtn divStylecss-clear' onClick={() => setModalShow(true)}>
          Add Customer
        </Button>
      );
    }
  }  
  
  
  return (
    <>
      {data?.user?.is_premium === 1 && planId && props?.keys !=1?
        <Button
          className='AddCustomerBtn divStylecss-update'
          onClick={() => setModalCancelUser(true)}
        >
          Manage Subscription
        </Button>:""  
    }
      
      
      {props?.button ? (
        <Button
          className='AddCustomerBtn divStylecss-update'
          onClick={() => setModalInviteUser(true)}
        >
          Invite User
        </Button>
      ) : (
        ""
      )}
      {addButton}
    
      <InviteCenteredModal
        show={modalInviteUser}
        onHide={() => setModalInviteUser(false)}
      />
      <CenteredModal
        show={modalCancelUser}
        onHide={() => setModalCancelUser(false)}
        status={setOpenPop}
        modalCancelUser={setModalCancelUser}
        setPlanId={setPlanId}
        Detail={setCustomDetail}
      />
      <CancelCenteredModal
        show={openPop}
        onHide={() => setOpenPop(false)}
        status={setnoteDetails}
        modalCancelUser={setModalCancelUser}
        customDetails={customDetail}

      />
      <CancelNoteModal
        show={notedetails}
        onHide={() => setnoteDetails(false)}
        planId={planId}
        setnoteDetails={setnoteDetails}
        setOpenPop={setOpenPop}

      />
    
      <MyVerticallyCenteredModal
        show={modalShow}
        onHide={() => setModalShow(false)}
        refreshtate={sendProp}
      />
    </>
  );
}