import { ImagePath } from "@/utils/imagePath";
import { Texts } from "@/utils/texts";
import Link from "next/link";
import { useRouter } from "next/router";
import { useCallback, useState, useRef, useEffect } from "react";

const Header = () => {
  const router = useRouter();
  let [show1, setShow1] = useState(false);
  let [show2, setShow2] = useState(false);
  const [hoverIndex, setHoverIndex] = useState<number | null>(null);
  const lineRef = useRef<HTMLHRElement>(null);

  const [isContactModalOpen, setIsContactModalOpen] = useState(false); // State for contact modal
  const [formData, setFormData] = useState({ name: "", email: "", message: "" }); // State for form data
  const [messageSent, setMessageSent] = useState(false); // State for confirmation message

  useEffect(() => {
    if (hoverIndex !== null && lineRef.current) {
      const items = document.querySelectorAll(".nav-item");
      const item = items[hoverIndex] as HTMLElement;
      const itemRect = item.getBoundingClientRect();
      const navRect = item.parentElement!.getBoundingClientRect();

      lineRef.current.style.width = `${itemRect.width}px`;
      lineRef.current.style.transform = `translateX(${itemRect.left - navRect.left - 32}px)`;
      lineRef.current.style.opacity = "1";
    } else if (lineRef.current) {
      lineRef.current.style.opacity = "0";
    }
  }, [hoverIndex]);

  const openContactModal = () => {
    setIsContactModalOpen(true);
  };

  const closeContactModal = () => {
    setIsContactModalOpen(false);
    setMessageSent(false);
    setFormData({ name: "", email: "", message: "" });
  };

  const handleFormSubmit = async (e: React.FormEvent) => {
    e.preventDefault();

    // Simulate email sending process
    try {
      console.log("Email Sent to contact@nonlinear.technology:", formData);

      setMessageSent(true);

      setFormData({ name: "", email: "", message: "" });

      setTimeout(() => {
        closeContactModal();
      }, 3000);
    } catch (error) {
      console.error("Error sending email:", error);
    }
  };

  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    setFormData({
      ...formData,
      [e.target.name]: e.target.value,
    });
  };

  return (
    <>
      <nav className="w-full max-w-7xl bg-white rounded-2xl md:mt-10  dark:bg-gray-900">
        <div className="max-w-screen-2xl flex flex-wrap items-center justify-between mx-6 lg:mx-12 h-28">
          <Link href="/" className="flex items-center">
            <img src={ImagePath.logo_dark} className="h-9 mr-3 logo-light" alt="Flowbite Logo" />
          </Link>
          <div className="flex md:order-2">
            <button
              type="button"
              onClick={openContactModal}
              className="bg-transparent border border-black text-black hover:bg-black hover:text-white focus:ring-4 focus:outline-none focus:ring-blue-300 font-bold rounded-full text-lg px-6 py-3 text-center mr-3 md:mr-0 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
            >
              {Texts.contact_us}
            </button>
            <button
              data-collapse-toggle="navbar-cta"
              type="button"
              className="inline-flex items-center p-2 text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600"
              aria-controls="navbar-cta"
              aria-expanded="false"
            >
              <span className="sr-only">Open main menu</span>
              <svg
                className="w-6 h-6"
                aria-hidden="true"
                fill="currentColor"
                viewBox="0 0 20 20"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  fillRule="evenodd"
                  d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
                  clipRule="evenodd"
                ></path>
              </svg>
            </button>
          </div>
          <div className="items-center justify-between hidden w-full md:flex md:w-auto md:order-1 z-10" id="navbar-cta">
            <ul className="flex flex-col font-sm p-4 md:p-0 mt-4 border border-gray-100 rounded-lg bg-gray-50 md:flex-row md:space-x-8 md:mt-0 md:border-0 md:bg-white dark:bg-gray-800 md:dark:bg-gray-900 dark:border-gray-700 relative">
              <li className="nav-item group" onMouseEnter={() => setHoverIndex(0)} onMouseLeave={() => setHoverIndex(null)}>
                <button className="flex items-center justify-between w-full py-2 pl-3 pr-4 text-gray-700 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-black md:p-0 md:w-auto dark:text-black md:dark:hover:text-black dark:focus:text-black dark:border-gray-700 dark:hover:bg-gray-700 md:dark:hover:bg-transparent">
                  {Texts.products}
                  <svg
                    className={`w-5 h-5 ml-1 group-hover:rotate-180"`}
                    aria-hidden="true"
                    fill="currentColor"
                    viewBox="0 0 20 20"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      fillRule="evenodd"
                      d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
                      clipRule="evenodd"
                    ></path>
                  </svg>
                </button>

                <div
                  className={` hidden group-hover:block z-10
                  font-normal bg-white divide-y divide-gray-100 rounded-3xl dark:bg-gray-700 dark:divide-gray-600`}
                >
                  <div className="fixed pt-14">
                    <div className="bg-white rounded-3xl  drop-shadow-xl grid grid-cols-1 lg:grid-cols-2 divide-x max-w-screen-lg">
                      <div className="p-4">
                        <div
                          className="p-14 max-w-full bg-white rounded-3xl text-gray-900 hover:text-white hover:bg-gray-800 dark:bg-gray-800 dark:border-gray-700"
                          onMouseEnter={() => setShow1(true)}
                          onMouseLeave={() => setShow1(false)}
                        >
                          {!show1 ? (
                            <img
                              className="h-14 mb-16"
                              src={ImagePath.es}
                              alt=""
                            />
                          ) : (
                            <img
                              className="h-14 mb-16"
                              src={ImagePath.es_white}
                              alt=""
                            />
                          )}

                          <a href="#">
                            <h5 className="my-4 text-3xl font-semibold tracking-tight dark:text-white">
                              {Texts.es}
                            </h5>
                          </a>
                          <Link href="http://everydayseries.ai/" target="_blank">
                            <button
                              type="button"
                              className=" mt-8 max-w-fit h-16 border border-gray-400  focus:ring-4 focus:outline-none font-medium rounded-full text-xl px-5 py-2.5 text-center inline-flex items-center justify-center"
                            >
                              {Texts.see_more}
                              {!show1 ? (
                                <img
                                  src={ImagePath.circle_arrow_dark}
                                  className="h-9 ml-6 arrow animate-pulse"
                                />
                              ) : (
                                <img
                                  src={ImagePath.circle_arrow}
                                  className="h-9 ml-6 arrow animate-pulse"
                                />
                              )}
                            </button>
                          </Link>
                        </div>
                      </div>
                      <div className="p-4">
                        <div
                          className="p-14 max-w-full bg-white rounded-3xl text-gray-900 hover:text-white hover:bg-gray-800 dark:bg-gray-800 dark:border-gray-700"
                          onMouseEnter={() => setShow2(true)}
                          onMouseLeave={() => setShow2(false)}
                        >
                          <img
                            className="h-14 mb-16 "
                            src={ImagePath.fc}
                            alt=""
                          />

                          <a href="#">
                            <h5 className="my-4 text-3xl font-semibold tracking-tight dark:text-white">
                              {Texts.fc}
                            </h5>
                          </a>
                          <Link href="https://fastcode.sh/" target="_blank">

                            <button
                              type="button"
                              className=" mt-8 max-w-fit h-16 border border-gray-400  focus:ring-4 focus:outline-none font-medium rounded-full text-xl px-5 py-2.5 text-center inline-flex items-center justify-center"
                            >
                              {Texts.see_more}
                              {!show2 ? (
                                <img
                                  src={ImagePath.circle_arrow_dark}
                                  className="h-9 ml-6 arrow animate-pulse"
                                />
                              ) : (
                                <img
                                  src={ImagePath.circle_arrow}
                                  className="h-9 ml-6 arrow animate-pulse"
                                />
                              )}
                            </button>
                          </Link>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </li>
              <li className="nav-item" onMouseEnter={() => setHoverIndex(1)} onMouseLeave={() => setHoverIndex(null)}>
                <Link href="/research" className="block py-2 pl-3 pr-4 text-gray-700 rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 md:dark:hover:text-blue-500 dark:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700">
                  {Texts.research}
                </Link>
              </li>
              <li className="nav-item" onMouseEnter={() => setHoverIndex(2)} onMouseLeave={() => setHoverIndex(null)}>
                <Link href="/about-us" className="block py-2 pl-3 pr-4 text-gray-700 rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 md:dark:hover:text-blue-500 dark:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700">
                  {Texts.about_us}
                </Link>
              </li>
              <li className="nav-item" onMouseEnter={() => setHoverIndex(3)} onMouseLeave={() => setHoverIndex(null)}>
                <Link href="/careers" className="block py-2 pl-3 pr-4 text-gray-700 rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 md:dark:hover:text-blue-500 dark:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700">
                  {Texts.careers}
                </Link>
              </li>
              <hr ref={lineRef} className="h-1 rounded-full selected absolute bottom-0 transition-all duration-300 ease-in-out" style={{ opacity: 0 }} />
            </ul>
          </div>
        </div>
      </nav>

      {/* Contact Us Modal */}
      {isContactModalOpen && (
        <div className="fixed inset-0 flex items-center justify-center z-50 bg-black bg-opacity-70 backdrop-blur-sm transition-opacity">
          <div
            className="bg-white dark:bg-gray-900 rounded-xl overflow-hidden shadow-2xl transform transition-all flex flex-col md:flex-row max-w-4xl w-full"
            style={{
              boxShadow: '0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.1)'
            }}
          >
            <button
              onClick={closeContactModal}
              className="absolute top-4 right-4 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 transition-colors z-10"
              aria-label="Close modal"
            >
              <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
              </svg>
            </button>

            {messageSent ? (
              <div className="w-full py-16 px-8 text-center">
                <div className="mx-auto mb-6 flex items-center justify-center">
                  <svg xmlns="http://www.w3.org/2000/svg" className="h-16 w-16 text-green-500" viewBox="0 0 20 20" fill="currentColor">
                    <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
                  </svg>
                </div>
                <h2 className="text-3xl font-bold mb-3 text-gray-900 dark:text-white">Message Sent!</h2>
                <p className="text-lg text-gray-600 dark:text-gray-300">We'll get back to you as soon as possible.</p>
              </div>

            ) : (
              <>
                {/* Left side - Message */}
                <div className="w-full md:w-2/5 bg-gradient-to-br from-blue-100 to-indigo-100 text-black p-8 flex flex-col justify-between">
                  <div className="space-y-6">
                    <h2 className="text-3xl font-bold">We'd love to hear from you.</h2>
                    <p className="text-lg opacity-90">Our team is ready to help you with any questions or needs you might have.</p>

                    <div className="hidden md:block">
                      <div className="mt-8 opacity-90">
                        <div className="flex items-center mb-4">
                          <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor">
                            <path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z" />
                            <path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z" />
                          </svg>
                          <span>support@techcompany.com</span>
                        </div>
                        <div className="flex items-center">
                          <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor">
                            <path fillRule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clipRule="evenodd" />
                          </svg>
                          <span>San Francisco, CA</span>
                        </div>
                      </div>
                    </div>
                  </div>

                  <a
                    href="https://calendly.com/gaurav-everydayseries/30min"
                    target="_blank"
                    rel="noopener noreferrer"
                    className="block text-center font-medium py-3 px-4 rounded-lg bg-white text-blue-700 hover:bg-gray-100 transition-colors mt-8 flex items-center justify-center"
                  >
                    <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor">
                      <path fillRule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clipRule="evenodd" />
                    </svg>
                    Book a Meeting
                  </a>
                </div>

                {/* Right side - Form */}
                <div className="w-full md:w-3/5 p-8">
                  <form onSubmit={handleFormSubmit} className="space-y-6">
                    <div className="mb-6">
                      <h3 className="text-2xl font-bold text-gray-900 dark:text-white">Get in Touch</h3>
                      <p className="text-gray-600 dark:text-gray-400 mt-1">We'll get back to you within 24 hours</p>
                    </div>

                    {/* Name field */}
                    <div className="relative">
                      <input
                        type="text"
                        name="name"
                        id="name"
                        value={formData.name}
                        onChange={handleInputChange}
                        required
                        className="w-full bg-gray-50 dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-lg px-4 py-3 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all"
                        placeholder="Your name"
                      />
                    </div>

                    {/* Email field */}
                    <div className="relative">
                      <input
                        type="email"
                        name="email"
                        id="email"
                        value={formData.email}
                        onChange={handleInputChange}
                        required
                        className="w-full bg-gray-50 dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-lg px-4 py-3 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all"
                        placeholder="your@email.com"
                      />
                    </div>

                    {/* Message field */}
                    <div className="relative">
                      <textarea
                        name="message"
                        id="message"
                        rows={4}
                        value={formData.message}
                        onChange={handleInputChange}
                        required
                        className="w-full bg-gray-50 dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-lg px-4 py-3 text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all resize-none"
                        placeholder="Tell us what you need help with..."
                      />
                    </div>

                    {/* Submit button */}
                    <button
                      type="submit"
                      className="w-full border border-black bg-white hover:bg-black hover:text-white text-black font-medium py-3 px-4 rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
                    >
                      Submit Message
                    </button>

                    <div className="mt-4 block md:hidden">
                      <a
                        href="https://calendly.com/gaurav-everydayseries/30min"
                        target="_blank"
                        rel="noopener noreferrer"
                        className="w-full block text-center font-medium py-3 px-4 rounded-lg bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-white hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors flex items-center justify-center"
                      >
                        <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor">
                          <path fillRule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clipRule="evenodd" />
                        </svg>
                        Book a Meeting
                      </a>
                    </div>
                  </form>
                </div>
              </>
            )}
          </div>
        </div>
      )}

      <style jsx>{`
      .mt-40 {
          margin-top: 45px !important;
        }
        .selected {
          background: linear-gradient(
            96.36deg,
            #ffff00 -15.3%,
            #ffd316 -8.64%,
            #ff9c32 0.8%,
            #ff6c4a 10.32%,
            #ff455d 19.7%,
            #ff276c 28.91%,
            #ff1177 37.92%,
            #ff047e 46.63%,
            #ff0080 54.68%,
            #0026ff 131.34%
          );
        }
      `}</style>
    </>
  );
};

export default Header;
