import React, { useEffect, useState } from "react";
import {
  Button,
  Card,
  CardHeader,
  CardTitle,
  Col,
  Modal,
  ModalBody,
  ModalHeader,
  Row,
  UncontrolledTooltip, // Add UncontrolledTooltip import
} from "reactstrap";
import { Edit, Mail, Phone, MapPin } from "react-feather"; // Import Mail, Phone, MapPin

import { useSnackbar } from "notistack";
import { useTranslation } from "react-i18next";
import { useDispatch, useSelector } from "react-redux";
import { permissionCheck } from "../components/permission-check";
import {
  getMailSettings,
  clearMailSuccess,
  clearMailError,
} from "../redux/actions/mailSettings";
import MailSettings from "./MailSettings";
import SpinnerComponent from "../@core/components/spinner/Fallback-spinner";

// Import custom styles for the communication page
import "../assets/scss/pages/communication.scss";

function Communication() {
  const { t } = useTranslation();
  const dispatch = useDispatch();
  const { enqueueSnackbar } = useSnackbar();
  const { currentSettings, loading, success, error } = useSelector(
    // Add loading to useSelector
    (state) => state.mailSettings
  );
  const [showMailModal, setShowMailModal] = useState(false);

  useEffect(() => {
    // Load mail settings once when component mounts
    dispatch(getMailSettings());
  }, [dispatch]);

  useEffect(() => {
    if (success) {
      enqueueSnackbar(t("Warnings.updatedSuccessfully"), {
        variant: "success",
      });
      dispatch(clearMailSuccess());
    }
  }, [success, enqueueSnackbar, t, dispatch]);

  useEffect(() => {
    if (error) {
      const errorMessage =
        error?.graphQLErrors?.[0]?.message ||
        error?.message ||
        t("Warnings.genericUpdateFailed");

      enqueueSnackbar(errorMessage, {
        variant: "error",
      });
      dispatch(clearMailError());
    }
  }, [error, enqueueSnackbar, t, dispatch]);

  // Get email address from settings or use default from environment variable
  const defaultEmail = process.env.REACT_APP_DEFAULT_EMAIL || "";
  // Use default email if currentSettings is null or emailAddress is null
  const emailAddress = currentSettings?.emailAddress || defaultEmail;
  const handleEmailClick = () => {
    if (emailAddress) {
      window.location.href = `mailto:${emailAddress}`;
    }
  };

  const handleCloseModal = () => {
    setShowMailModal(false);
  };

  return (
    <div style={{ marginTop: "2%" }}>
      {loading && !currentSettings ? (
        <div
          style={{
            display: "flex",
            justifyContent: "center",
            alignItems: "center",
            minHeight: 200,
          }}
        >
          <SpinnerComponent />
        </div>
      ) : (
        <>
          {permissionCheck("settings_access") && (
            <>
              <Modal
                isOpen={showMailModal}
                toggle={handleCloseModal}
                className="modal-dialog-centered"
                size="lg"
              >
                <ModalHeader toggle={handleCloseModal}>
                  {t("MailSettings.editMailInfo")}
                </ModalHeader>
                <ModalBody>
                  <MailSettings closeModal={handleCloseModal} />
                </ModalBody>
              </Modal>
            </>
          )}
          <Card className="border-bottom">
            <CardHeader className="border-bottom">
              <CardTitle tag="h2" className="row ml-md-2 align-items-center">
                {t("Contact.contactInfo")}
              </CardTitle>
            </CardHeader>
            <Row>
              <Col className="pl-md-5 pl-2 col-md-6 col-12">
                <Row className="mx-0 mt-1">
                  <Col sm="6" md="5" className="mr-2">
                    <div className="email-container d-flex align-items-center justify-content-between">
                      <div>
                        <h4>
                          <Mail size={16} className="mr-1" />{" "}
                          {t("Contact.contactEmail")}
                        </h4>{" "}
                        {/* Add Mail icon */}
                        <p
                          style={{
                            color: emailAddress ? "blue" : "inherit",
                            textDecoration: emailAddress ? "underline" : "none",
                            cursor: emailAddress ? "pointer" : "default",
                          }}
                          onClick={handleEmailClick}
                        >
                          {emailAddress ||
                            defaultEmail ||
                            t("MailSettings.notConfigured")}
                        </p>
                      </div>
                      {permissionCheck("settings_access") && (
                        <>
                          {" "}
                          {/* Wrap button and tooltip in fragment */}
                          <Button
                            color="flat-primary"
                            className="btn-icon"
                            onClick={() => setShowMailModal(true)}
                            id="edit-email-btn" // Add id for tooltip
                          >
                            <Edit size={18} />
                          </Button>
                          <UncontrolledTooltip
                            placement="top"
                            target="edit-email-btn" // Target the button id
                            timeout={150} // Add timeout prop to fix the warning
                          >
                            {t("MailSettings.editMailInfo")}{" "}
                            {/* Tooltip text */}
                          </UncontrolledTooltip>
                        </>
                      )}
                    </div>
                  </Col>
                  <Col sm="6" md="5" className="mr-2">
                    <div className="telephone-container">
                      <h4>
                        <Phone size={16} className="mr-1" />{" "}
                        {t("Contact.contactPhoneNumber")}
                      </h4>{" "}
                      {/* Add Phone icon */}
                      <p>+90 507 750 00 41</p>
                    </div>
                  </Col>
                </Row>
                <Row className="mx-0 mt-4">
                  <Col sm="6" md="5" className="mr-2">
                    <div className="address-container">
                      <h4>
                        <MapPin size={16} className="mr-1" />{" "}
                        {t("Contact.contactAddress")}
                      </h4>{" "}
                      {/* Add MapPin icon */}
                      <address>
                        Central Office: 4995 sokak no:3, Alacaatlı Mahallesi,
                        Daire No: A2 06810 Çankaya/Ankara
                      </address>
                    </div>
                  </Col>
                </Row>
              </Col>
              <Col className="pl-md-5 pl-2 col-md-6 col-12 pb-2 border-left">
                <Row className="mx-0 mt-1">
                  <div className="address-map w-100">
                    <div className="responsive-map-container">
                      <iframe
                        src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3063.1752741150003!2d32.658217075858445!3d39.847904971536735!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x14d33eef6ee44755%3A0x77faea5f08f32c60!2zTUVBIEfDnFpFTEJBSMOHRU0!5e0!3m2!1sen!2str!4v1741165773414!5m2!1sen!2str"
                        allowFullScreen=""
                        loading="lazy"
                        referrerPolicy="no-referrer-when-downgrade"
                      ></iframe>
                    </div>
                  </div>
                </Row>
              </Col>
            </Row>
          </Card>
        </>
      )}
    </div>
  );
}

export default Communication;