'use client';
import { useEffect, useState } from "react";
import {
  Breadcrumb,
  Row,
  Col,
  Card,
  Button,
  Form,
  Modal,
  Tabs,
  Tab
} from "react-bootstrap";
import { toast } from "react-toastify";
import PhoneInput from "react-phone-input-2";
import "react-phone-input-2/lib/style.css";
import { BsEye, BsEyeSlash } from "react-icons/bs";
import { useParams } from "next/navigation";
import HelperService from "@/Services/HelperService";
import WebService from "@/Services/WebService";
import CommonFunction from "@/Services/CommonFunction";
import { UserFormData } from "../interface";
import CompoLoader from "@/Common/ComponentLoader/CompoLoader";
import PageTitle from "@/Common/PageTitle";
import { Label } from "@/Common/Label/Label";
import { Autocomplete, GoogleMap, Marker, useLoadScript } from "@react-google-maps/api";

const AddEditAppUser = () => {
  const [compoLoader, setCompoLoader] = useState<boolean>(false);
  const [getBreadcrumb, setBreadcrumb] = useState<string>("Add App User");
  const [icon, setIcon] = useState<any>(BsEyeSlash);
  const [type, setType] = useState<string>("password");
  const [errFlag, setErrFlag] = useState<boolean>(false);
  const [errEmailFlag, setEmailErrFlag] = useState<boolean>(false);
  const { id } = useParams();
  const [subscriptionData, setSubscriptionData] = useState<any>([]);
  const [opreatorData, setOperatorData] = useState<any>();
  const [place, setPlace] = useState<any>(null);
  const [placeSelected, setPlaceSelected] = useState(false)
  const [eventAddressLine, setEventAddressLine] = useState('');
  const [tab, setTab] = useState("Basic_info");
  const [getFormData, setFormData] = useState<any>({
    name: "",
    email: "",
    password: "",
    mobile_number: "",
    dial_code: "",
    country_code: "",
    is_operator: true,
    address: ""
  });
  const apiKey = process.env.NEXT_PUBLIC_GOOGLE_MAP_API_KEY || "";


  useEffect(() => {
    if (id) {
      getAddEditDetail(id);
      setBreadcrumb("Basic Info");
    }
  }, [id]);

  const getAddEditDetail = (param: any) => {
    setCompoLoader(true);
    return WebService.CommonApi({
      method: "GET",
      action: `admin/app/users/${param}`,
      body: null,
    })
      .then((res: any) => {
        setFormData(res?.info)
        setCompoLoader(false);
        setSubscriptionData(res.info.user_subscriptions);
        setOperatorData(res.info.operator_info);
      })
      .catch((error: any) => {
        toast.error(error.response);
        setCompoLoader(false);
      });
  };

  const validateEmail = (email: string) => {
    const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
    let isValid = emailRegex.test(email);
    console.log(isValid, "is Valid");
    if (isValid) {
      setEmailErrFlag(false);
      return false;
    } else {
      setEmailErrFlag(true);
      return true;
    }
  };


  const handleSubmit = () => {
    let Flag = false;

    let excluded = ["password", "is_operator"];
    if (HelperService.checkEmptyUndefinedNull(id)) {
      console.log("routeParam.uuid", excluded);
      Flag = CommonFunction.checkFormEmptyFields(getFormData, excluded);
    } else {
      Flag = CommonFunction.checkFormEmptyFields(getFormData);
    }
    if (Flag) {
      setErrFlag(true);
      return;
    } else {
      setErrFlag(false);
    }
    let email = validateEmail(getFormData?.email);
    if (email) {
      return;
    }
    if (HelperService.checkEmptyUndefinedNull(id)) {
      delete getFormData.password;
      submitDetails(`admin/app/users/${id}`, "PUT", getFormData);
    } else {
      submitDetails(`admin/app/users`, "POST", getFormData);
    }
  };

  const handleToggle = () => {
    if (type === "password") {
      setIcon(BsEye);
      setType("text");
    } else {
      setIcon(BsEyeSlash);
      setType("password");
    }
  };

  const submitDetails = (uri: string, method: string, data: UserFormData) => {
    WebService.addLoader("save-form-btn");
    WebService.CommonApi({
      method: method,
      action: uri,
      body: data,
    }).then((res: any) => {
      WebService.removeLoader("save-form-btn");
      if (res?.status) {
        toast.success(res?.message);
        window.history.back();
      } else {
        toast.error(res?.message);
      }
    }).catch((error: any) => {
      WebService.removeLoader("save-form-btn");
      toast.error(error?.response?.data?.message);
    });
  }

  const { isLoaded } = useLoadScript({
    googleMapsApiKey: apiKey,
    libraries: ["places"],
  });

  const handlePlaceChanged = () => {
    if (place !== null) {
      const selectedPlace = place.getPlace();

      if (selectedPlace?.geometry?.location) {
        // console.log("selectedPlace", selectedPlace);
        // console.log("Latitude:", selectedPlace.geometry.location.lat());
        // console.log("Longitude:", selectedPlace.geometry.location.lng());
        // console.log("Address:", selectedPlace.formatted_address);

        const addressComponents = selectedPlace.address_components;
        // const city = getAddressComponent(addressComponents, 'locality');
        // const state = getAddressComponent(addressComponents, 'administrative_area_level_1');
        // const country = getAddressComponent(addressComponents, 'country');
        // const pincode = getAddressComponent(addressComponents, 'postal_code');
        setEventAddressLine(selectedPlace.formatted_address)
        setFormData({ ...getFormData, address: selectedPlace.formatted_address })

      } else {
        console.log("Selected place doesn't have valid location data.");
      }
    } else {
      console.log("Place is null or undefined.");
    }
  };

  const getAddressComponent = (addressComponents: any, type: any) => {
    const component = addressComponents.find((comp: any) => comp.types.includes(type));
    return component ? component.long_name : '';
  };


  return (
    <>
      {compoLoader ? (
        <CompoLoader />
      ) : (
        <div className="page-properties pb-3">
          <div className="nb-3">
            <Breadcrumb>
              <Breadcrumb.Item href="/manage-admin-user">{" App Users"}</Breadcrumb.Item>
              <Breadcrumb.Item active>
                {getBreadcrumb}
              </Breadcrumb.Item>
            </Breadcrumb>
          </div>
          <Row className=" mb-lg-4 mb-3">
            <Col lg={8} xs={8}>
              <div className="d-flex gap-3 align-items-center">
                <PageTitle
                  title={getBreadcrumb}
                  backArrow={true}
                />
              </div>
            </Col>
          </Row>
          <Tabs activeKey={tab} onSelect={(e: any) => setTab(e)} >
            <Tab title={"Basic Info"} eventKey={"Basic_info"}>
              <Card className="card-style mb-lg-4 mb-3">
                <Card.Header>
                  <h4 className="card-title text-white">{getBreadcrumb} </h4>
                </Card.Header>
                <Card.Body>
                  {
                    id ?
                      <>
                        <Row>
                          <Col lg={6} xs={12} xl={6} md={6}>
                            <Form.Label className="form-label">Name</Form.Label>
                          </Col>
                          <Col lg={6} xs={12} xl={6} md={6}>
                            <span className="font-14">{getFormData?.name}</span>
                          </Col>
                        </Row>

                        <Row>
                          <Col lg={6} xs={12} xl={6} md={6}>
                            <Form.Label className="form-label">Address</Form.Label>
                          </Col>
                          <Col lg={6} xs={12} xl={6} md={6}>
                            <span className="font-14">{getFormData?.address}</span>
                          </Col>
                        </Row>

                        <Row>
                          <Col lg={6} xs={12} xl={6} md={6}>
                            <Form.Label className="form-label">Phone Number</Form.Label>
                          </Col>
                          <Col lg={6} xs={12} xl={6} md={6}>
                            <span className="font-14">
                              {getFormData?.dial_code + getFormData?.mobile_number || ""}</span>
                          </Col>
                        </Row>

                        <Row>
                          <Col lg={6} xs={12} xl={6} md={6}>
                            <Form.Label className="form-label"> Email Id</Form.Label>
                          </Col>
                          <Col lg={6} xs={12} xl={6} md={6}>
                            <span className="font-14">{getFormData?.email || ""}</span>
                          </Col>
                        </Row>

                        <Row>
                          <Col lg={6} xs={12} xl={6} md={6}>
                            <Form.Label className="form-label">Is Operator</Form.Label>
                          </Col>
                          <Col lg={6} xs={12} xl={6} md={6}>
                            <span className="font-14">{getFormData?.is_operator == 1 ? "Yes" : "No"}</span>
                          </Col>
                        </Row>

                        <h5 className="mb-2">{"Operator Details :-"} </h5>
                        {
                          opreatorData == null ? "No Record Found" :
                            <div>
                              <Row>
                                <Col lg={6} xs={12} xl={6} md={6}>
                                  <Form.Label className="form-label">Company Name:</Form.Label>
                                </Col>
                                <Col lg={6} xs={12} xl={6} md={6}>
                                  <span className="font-14">{opreatorData?.company_name || '-'}</span>
                                </Col>
                              </Row>

                              <Row>
                                <Col lg={6} xs={12} xl={6} md={6}>
                                  <Form.Label className="form-label">Team Name:</Form.Label>
                                </Col>
                                <Col lg={6} xs={12} xl={6} md={6}>
                                  <span className="font-14">{opreatorData?.team_name || '-'}</span>
                                </Col>
                              </Row>

                              <Row>
                                <Col lg={6} xs={12} xl={6} md={6}>
                                  <Form.Label className="form-label">Machine Name:</Form.Label>
                                </Col>
                                <Col lg={6} xs={12} xl={6} md={6}>
                                  <span className="font-14">{opreatorData?.machine_name || '-'}</span>
                                </Col>
                              </Row>

                              <Row>
                                <Col lg={6} xs={12} xl={6} md={6}>
                                  <Form.Label className="form-label">Total Experience Years:</Form.Label>
                                </Col>
                                <Col lg={6} xs={12} xl={6} md={6}>
                                  <span className="font-14">{opreatorData?.total_experience_years || '-'}</span>
                                </Col>
                              </Row>

                              <Row>
                                <Col lg={6} xs={12} xl={6} md={6}>
                                  <Form.Label className="form-label">Expected Salary:</Form.Label>
                                </Col>
                                <Col lg={6} xs={12} xl={6} md={6}>
                                  <span className="font-14">{opreatorData?.expected_salary || '-'}</span>
                                </Col>
                              </Row>

                              <Row>
                                <Col lg={6} xs={12} xl={6} md={6}>
                                  <Form.Label className="form-label">Technical Skills:</Form.Label>
                                </Col>
                                <Col lg={6} xs={12} xl={6} md={6}>
                                  <span className="font-14">{opreatorData?.technical_skills || '-'}</span>
                                </Col>
                              </Row>

                              <Row>
                                <Col lg={6} xs={12} xl={6} md={6}>
                                  <Form.Label className="form-label">CV:</Form.Label>
                                </Col>
                                <Col lg={6} xs={12} xl={6} md={6}>
                                  <a href={opreatorData?.cv} target="_blank" rel="noopener noreferrer" className="font-14">View CV</a>
                                </Col>
                              </Row>
                            </div>
                        }
                      </>
                      :
                      <>
                        <Row className="w-100" >
                          <Col lg={4} xs={4} className="mb-0">
                            <Form.Group className="mb-3">
                              <Form.Label className="form-label">
                                Name {" "} <span className="text-danger">*</span>
                              </Form.Label>
                              <Form.Control
                                type="text"
                                placeholder="Enter Name"
                                value={getFormData?.name || ""}
                                onChange={(e: any) => {
                                  setFormData((prevData: UserFormData) => ({
                                    ...prevData,
                                    name: e.target.value
                                  }));
                                }
                                } />
                              {getFormData?.name == "" && errFlag && (
                                <Label title="Please enter name" modeError={true} />
                              )}
                            </Form.Group>
                          </Col>
                          <Col lg={4} xs={4} className="mb-0">
                            <Form.Group className="mb-3">
                              <Form.Label className="form-label">
                                Address {" "} <span className="text-danger">*</span>
                              </Form.Label>
                              {isLoaded &&
                                <Autocomplete
                                  onLoad={setPlace}
                                  onPlaceChanged={handlePlaceChanged}
                                  className="w-100"
                                >
                                  <Form.Control
                                    placeholder="Start typing address"
                                    value={eventAddressLine}
                                    onKeyDown={async (e) => {
                                      if (e.key === "Enter") {
                                        if (!placeSelected) {
                                          e.preventDefault();
                                          return false;
                                        }
                                        await new Promise((resolve) => setTimeout(resolve, 100));
                                        handlePlaceChanged();
                                      }
                                    }}
                                    onChange={(e: any) => {
                                      setPlaceSelected(false)
                                      setEventAddressLine(e.target.value);
                                    }}
                                  />
                                </Autocomplete>}
                              {getFormData?.address == "" && errFlag && (
                                <Label title="Please enter address" modeError={true} />
                              )}
                            </Form.Group>
                          </Col>
                          <Col lg={4} xs={4} className="mb-0">
                            <label className="form-label">Phone Number <span className="text-danger">*</span></label>
                            <PhoneInput
                              country={"gb"}
                              value={
                                getFormData?.dial_code +
                                getFormData?.mobile_number || ""
                              }
                              onChange={(p, phone: any, __) => {
                                console.log(phone);

                                console.log("phone.countryCode", phone.countryCode)
                                let mobile = HelperService.removeDialCodeFromMobile(
                                  p,
                                  phone.dialCode
                                );
                                setFormData((preLoad: UserFormData) => {
                                  return {
                                    ...preLoad,
                                    mobile_number: mobile,
                                    dial_code: "+" + phone.dialCode,
                                    country_code: phone.countryCode,
                                  };
                                });

                                console.log(mobile, "phone number");
                              }}
                            />
                            {getFormData?.mobile_number === "" && errFlag && (
                              <Label
                                title="Please enter mobile number"
                                modeError={true}
                              />
                            )}
                          </Col>
                          <Col lg={4} xs={4}>
                            <Form.Group className="mb-3">
                              <Form.Label className="form-label required">
                                Email Id {" "} <span className="text-danger">*</span>
                              </Form.Label>
                              <Form.Control type="text" placeholder="Enter Email" name="user_email" autoComplete="off" value={getFormData?.email || ""} onChange={(e: any) => {
                                setFormData((prevData: UserFormData) => ({
                                  ...prevData,
                                  email: e.target.value
                                }));
                              }
                              } />
                              {getFormData?.email == "" && errFlag && (
                                <Label title="Please enter email" modeError={true} />
                              )}
                              {getFormData?.email !== "" && errEmailFlag && (
                                <Label title="Please enter valid email" modeError={true} />
                              )}
                            </Form.Group>
                          </Col>
                          {id == null && (<Col lg={4} xs={4} className="mb-3" >
                            <Form.Group>
                              <Form.Label className="form-label required">
                                Password {" "} <span className="text-danger">*</span>
                              </Form.Label>
                              <div className="input-group mb-2">
                                <input
                                  type={type}
                                  value={getFormData?.password || ""}
                                  className="form-control border-end-0"
                                  placeholder="Password"
                                  autoComplete="off"
                                  onChange={(e: any) => {
                                    setFormData((prevData: UserFormData) => ({
                                      ...prevData,
                                      password: e.target.value
                                    }));
                                  }}
                                />
                                <span
                                  className="input-group-text text-secondary bg-white border-start-0 cursor-pointer"
                                  onClick={handleToggle}
                                >
                                  {type == "password" ? (
                                    <BsEye size={16} />
                                  ) : (
                                    <BsEyeSlash size={16} />
                                  )}
                                </span>
                              </div>
                              {getFormData?.password == "" && errFlag ? (
                                <Label title="Please enter password" modeError={true} />
                              ) : (
                                ""
                              )}
                            </Form.Group>
                          </Col>)}
                          <Col lg={4} xs={6} className="mb-3">
                            <label className="form-label required">Is Operator</label>
                            <Form.Check
                              type="switch"
                              id="active"
                              checked={getFormData?.is_operator}
                              onChange={(e: any) => {
                                setFormData((prePlan: any) => { return { ...prePlan, is_operator: e.target.checked } });
                              }}
                              label="" />
                          </Col>
                        </Row>
                        <Row className="w-100">
                          <Col lg={12} xs={12} className="mb-0">
                            <Button
                              id="save-form-btn"
                              className="btn btn-brand"
                              type="button"
                              onClick={handleSubmit}
                            >
                              Save
                            </Button>
                          </Col>
                        </Row>
                      </>
                  }
                </Card.Body>
              </Card>
            </Tab>
            <Tab title={"Subscription Info"} eventKey={"Subscription_info"}>
              {
                id &&
                <>
                  <Card className="card-style mb-lg-4 mb-3">
                    <Card.Header>
                      <h4 className="card-title text-white">{"Subscription Details"} </h4>
                    </Card.Header>
                    <Card.Body>
                      <Row>
                        <Col md={6} className="mb-3">
                          <div className="card h-100 mb-3 p-3">
                            <Row>
                              <Col lg={6} xs={12} xl={6} md={6}>
                                <Form.Label className="form-label">Subscription Type:</Form.Label>
                              </Col>
                              <Col lg={6} xs={12} xl={6} md={6}>
                                <span className="font-14"><strong>{getFormData?.seeker_subscription?.name || '-'}</strong></span>
                              </Col>
                            </Row>
                            <Row>
                              <Col lg={6} xs={12} xl={6} md={6}>
                                <Form.Label className="form-label">Start Date:</Form.Label>
                              </Col>
                              <Col lg={6} xs={12} xl={6} md={6}>
                                <span className="font-14">{HelperService.formatDate(getFormData?.seeker_subscription?.start_date) || '-'}</span>
                              </Col>
                            </Row>

                            <Row>
                              <Col lg={6} xs={12} xl={6} md={6}>
                                <Form.Label className="form-label">End Date:</Form.Label>
                              </Col>
                              <Col lg={6} xs={12} xl={6} md={6}>
                                <span className="font-14">{HelperService.formatDate(getFormData?.seeker_subscription?.end_date) || '-'}</span>
                              </Col>
                            </Row>


                            <Row>
                              <Col lg={6} xs={12} xl={6} md={6}>
                                <Form.Label className="form-label">Status:</Form.Label>
                              </Col>
                              <Col lg={6} xs={12} xl={6} md={6}>
                                <span className={HelperService.decideBadgeClass(getFormData?.seeker_subscription?.status)}>{getFormData?.seeker_subscription?.status || '-'}</span>
                              </Col>
                            </Row>
                          </div>
                        </Col>
                        {
                          subscriptionData.length > 0 &&
                          subscriptionData.map((data: any, index: any) => (
                            <Col md={6} key={index} className="mb-3">
                              <div className="card mb-3 p-3 d-flex h-100 ">
                                <Row>
                                  <Col lg={6} xs={12} xl={6} md={6}>
                                    <Form.Label className="form-label">Subscription Type:</Form.Label>
                                  </Col>
                                  <Col lg={6} xs={12} xl={6} md={6}>
                                    <span className="font-14"><strong>{HelperService.toProperCase(data?.subscription.type)}</strong></span>
                                  </Col>
                                </Row>

                                <Row>
                                  <Col lg={6} xs={12} xl={6} md={6}>
                                    <Form.Label className="form-label">Subscription Amount:</Form.Label>
                                  </Col>
                                  <Col lg={6} xs={12} xl={6} md={6}>
                                    <span className="font-14">{data?.subscription.amount || '-'}</span>
                                  </Col>
                                </Row>

                                <Row>
                                  <Col lg={6} xs={12} xl={6} md={6}>
                                    <Form.Label className="form-label">Subscription Discount Amount:</Form.Label>
                                  </Col>
                                  <Col lg={6} xs={12} xl={6} md={6}>
                                    <span className="font-14">{data?.subscription.discount_amount || '-'}</span>
                                  </Col>
                                </Row>

                                <Row>
                                  <Col lg={6} xs={12} xl={6} md={6}>
                                    <Form.Label className="form-label">Subscription Duration:</Form.Label>
                                  </Col>
                                  <Col lg={6} xs={12} xl={6} md={6}>
                                    <span className="font-14">{HelperService.toProperCase(data?.subscription.duration) || '-'}</span>
                                  </Col>
                                </Row>

                                <Row>
                                  <Col lg={6} xs={12} xl={6} md={6}>
                                    <Form.Label className="form-label">Start Date:</Form.Label>
                                  </Col>
                                  <Col lg={6} xs={12} xl={6} md={6}>
                                    <span className="font-14">{HelperService.formatDate(data?.start_date) || '-'}</span>
                                  </Col>
                                </Row>

                                <Row>
                                  <Col lg={6} xs={12} xl={6} md={6}>
                                    <Form.Label className="form-label">End Date:</Form.Label>
                                  </Col>
                                  <Col lg={6} xs={12} xl={6} md={6}>
                                    <span className="font-14">{HelperService.formatDate(data?.end_date) || '-'}</span>
                                  </Col>
                                </Row>

                                <Row>
                                  <Col lg={6} xs={12} xl={6} md={6}>
                                    <Form.Label className="form-label">Status:</Form.Label>
                                  </Col>
                                  <Col lg={6} xs={12} xl={6} md={6}>
                                    <span className={HelperService.decideBadgeClass(data?.status || '-')}>{data?.status || '-' || '-'}</span>
                                  </Col>
                                </Row>
                              </div>
                            </Col>
                          ))
                        }
                      </Row>
                    </Card.Body>
                  </Card>

                </>
              }
            </Tab>
          </Tabs>
        </div>
      )}
    </>
  );
};
export default AddEditAppUser;