"use client";
import React, { useState } from "react";
import ReCAPTCHA from "react-google-recaptcha";
import axios from "axios";

export default function ContactFloat() {
  const [open, setOpen] = useState(false);
  const [showChat, setShowChat] = useState(false);
  const [showSocial, setShowSocial] = useState(false); 

  /** Contact actions */
  const extraIcons = [
    {
      href: "tel:647-722-3434",
      src: "/assets/images/icons/call.webp",
      label: "Call",
      newTab: true, 
    },
    {
      action: () => setShowChat(true),
      src: "/assets/images/chat.webp",
      label: "Chat",
    },
    {
      href: "https://wa.me/14379934477",
      src: "/assets/images/icons/WhatsApp.svg.webp",
      label: "WhatsApp",
      newTab: true,
    },
    {
      href: "https://www.instagram.com/elrapharehab/",
      src: "/assets/images/insta.webp",
      label: "Instagram",
      newTab: true,
    },
    {
      href: "https://www.facebook.com/ELRaphaRehabCenter/",
      src: "/assets/images/fb.webp",
      label: "Facebook",
      newTab: true,
    },
  ];

  /** Social media list shown on Share click */
  const socialIcons = [
    {
      href: "https://www.instagram.com/elrapharehab/",
      iconClass: "icon-4",
      label: "Instagram",
    },
    {
      href: "https://www.facebook.com/ELRaphaRehabCenter/",
      iconClass: "icon-7",
      label: "Facebook",
    },
  ];

  return (
    <>
      {/* Floating Contact Buttons */}
      <div className="contact-icon-container">
        {open && (
          <div
            className="extra-icons-wrapper"
            style={{
              position: "absolute",
              bottom: "11px",
              background: "rgb(255, 255, 255)",
              borderRadius: "30px 30px 35px 35px",
              boxShadow: "0px 4px 12px rgba(0, 0, 0, 0.2)",
              padding: "10px",
              display: "flex",
              flexDirection: "column",
              gap: "15px",
              alignItems: "center",
              paddingBottom: "67px",
              left: "-5px",
            }}
          >
            {extraIcons.map((icon, i) =>
              icon.href ? (
                <a
                  key={i}
                  href={icon.href}
                  aria-label={icon.label}
                  target="_blank"
                  rel="noopener noreferrer"
                  style={{
                    background: "#102548",
                    borderRadius: "50%",
                    padding: "8px",
                    width: "45px",
                    height: "45px",
                    display: "flex",
                    alignItems: "center",
                    justifyContent: "center",
                  }}
                >
                  <img
                    src={icon.src}
                    alt={icon.label}
                    style={{ width: "22px", height: "22px" }}
                  />
                </a>
              ) : (
                <button
                  key={i}
                  onClick={icon.action}
                  aria-label={icon.label}
                  style={{
                    background: "#102548",
                    borderRadius: "50%",
                    padding: "8px",
                    width: "45px",
                    height: "45px",
                    display: "flex",
                    alignItems: "center",
                    justifyContent: "center",
                    border: "none",
                  }}
                >
                  <img
                    src={icon.src}
                    alt={icon.label}
                    style={{ width: "22px", height: "22px" }}
                  />
                </button>
              )
            )}
          </div>
        )}

        <button
          type="button"
          aria-label={open ? "Close" : "Contact Us"}
          className="contact-icon-outer toggle-btn"
          onClick={() => {
            setOpen((prev) => {
              const newState = !prev;
              if (!newState) {
                // 🔹 when closing the main button, also hide Chat & Social
                setShowChat(false);
                setShowSocial(false);
              }
              return newState;
            });
          }}
          style={{
            position: "fixed",
            bottom: "71px",
            right: "20px",
            left: "20px",
            background: "#102548",
            borderRadius: "50%",
            padding: "15px",
            border: "none",
            zIndex: 9999,
          }}
        >
          <img
            src={
              open
                ? "/assets/images/cancel.png"
                : "/assets/images/icons/call.webp"
            }
            alt="Contact"
            style={{ width: "28px", height: "28px" }}
          />
        </button>
      </div>

      {showSocial && (
        <div
          style={{
            position: "fixed",
            bottom: "11%",
            left: "90px",
            transform: "translateY(-50%)",
            display: "flex",
            flexDirection: "row",
            gap: "15px",
            zIndex: 9999,
            background: "white",
            padding: "8px",
            borderRadius: "50px",
          }}
        >
          {socialIcons.map((icon, i) => (
            <a
              key={i}
              href={icon.href}
              target="_blank"
              rel="noopener noreferrer"
              aria-label={icon.label}
              style={{
                background: "#102548",
                borderRadius: "50%",
                width: "45px",
                height: "45px",
                display: "flex",
                alignItems: "center",
                justifyContent: "center",
                color: "#fff",
                fontSize: "22px",
                textDecoration: "none",
              }}
            >
              <i className={icon.iconClass}></i>
            </a>
          ))}
        </div>
      )}

      {showChat && <ChatForm onClose={() => setShowChat(false)} />}
    </>
  );
}

function ChatForm({ onClose }) {
  const [formData, setFormData] = useState({
    username: "",
    // lname: "",
    email: "",
    phone: "",
    service: "",
    message: "",
  });
  const [formErrors, setFormErrors] = useState({});
  const [captchaToken, setCaptchaToken] = useState(null);
  const [alert, setAlert] = useState({ show: false, type: "", message: "" });

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

  const handleCaptchaChange = (token) => {
    // console.log("ReCAPTCHA token:", token); 
    setCaptchaToken(token);
  };

  const handleSubmit = async (e) => {
    e.preventDefault();

    // console.log("Form submitted:", formData);

    const errors = {};
    if (!formData.username.trim()) errors.username = "First Name is required.";
    // if (!formData.lname.trim()) errors.lname = "Last Name is required.";
    if (!formData.email.trim()) errors.email = "Email is required.";
    if (!formData.phone.trim()) errors.phone = "Phone is required.";
    if (!formData.service.trim()) errors.service = "Please select a service.";
    if (!formData.message.trim()) errors.message = "Message is required.";
    // if (!captchaToken) errors.captcha = "Please verify the CAPTCHA.";

    setFormErrors(errors);
    if (Object.keys(errors).length > 0) {
      // console.log("Form validation errors:", errors);
      return;
    }

    const emailData = {
      name: formData.username,          
      phone: formData.phone,
      email: formData.email,
      subject: formData.service,         
      message: `Service: ${formData.service}<br /><br />Message: ${formData.message}`,
      to: "bloor@rapharehab.ca",
      senderName: "Rapha Rehab Contact Page",
      recaptchaToken: captchaToken,
    };

    try {
      const res = await axios.post(
        "https://mailserver.metatronnest.com/send",
        emailData,
        { headers: { "Content-Type": "application/json" } }
      );

      setAlert({
        show: true,
        type: "success",
        message: res?.data?.message || "Message sent successfully!",
      });

      setFormData({ username: "", email: "", phone: "", service: "", message: "" });
      setCaptchaToken(null);
      setFormErrors({});
    } catch (error) {
      setAlert({
        show: true,
        type: "danger",
        message: "Failed to send message. Please try again later.",
      });
    }
  };

  return (
    <div
      className="chat-form-wrapper"
      style={{
        position: "fixed",
        right: "10px",
        bottom: "90px",
        width: "350px",
        background: "#fff",
        borderRadius: "10px",
        boxShadow: "0 4px 12px rgba(0,0,0,0.3)",
        zIndex: 2000,
        maxHeight: "80vh",
        overflowY: "auto",
        padding: "20px"
      }}
    >
      <div className="p-3 border-bottom d-flex justify-content-between align-items-center">
        <h5 className="mb-3" style={{ margin: 0, color: "#bc0000" }}>Chat with Us</h5>
        <button onClick={onClose} className="btn-close"></button>
      </div>

      <div className="p-3">
        {alert.show && (
          <div className={`alert alert-${alert.type}`}>{alert.message}</div>
        )}

        <form onSubmit={handleSubmit} className="default-form">
          <input
            type="text"
            name="username"
            placeholder="Name"
            value={formData.username}
            onChange={handleChange}
            className="form-control mb-2"
          />
          {formErrors.username && <small className="text-danger">{formErrors.username}</small>}

          {/* <input
            type="text"
            name="lname"
            placeholder="Last Name"
            value={formData.lname}
            onChange={handleChange}
            className="form-control mb-2"
          />
          {formErrors.lname && <small className="text-danger">{formErrors.lname}</small>} */}

          <input
            type="text"
            name="phone"
            placeholder="Phone"
            value={formData.phone}
            onChange={handleChange}
            className="form-control mb-2"
          />
          {formErrors.phone && <small className="text-danger">{formErrors.phone}</small>}

          <input
            type="email"
            name="email"
            placeholder="Your Email"
            value={formData.email}
            onChange={handleChange}
            className="form-control mb-2"
          />
          {formErrors.email && <small className="text-danger">{formErrors.email}</small>}

          <select
            name="service"
            value={formData.service}
            onChange={handleChange}
            className="form-control mb-2"
          >
            <option value="">Select Service</option>
            <option value="Physio">Physio</option>
            <option value="Chiro">Chiro</option>
            <option value="Massage">Massage</option>
            <option value="Acupuncture">Acupuncture</option>
            <option value="Osteo">Osteo</option>
            <option value="Orthotics">Orthotics</option>
          </select>
          {formErrors.service && <small className="text-danger">{formErrors.service}</small>}

          <textarea
            name="message"
            placeholder="Message"
            value={formData.message}
            onChange={handleChange}
            className="form-control mb-2"
          ></textarea>
          {formErrors.message && <small className="text-danger">{formErrors.message}</small>}

          <div className="mb-2">
            <ReCAPTCHA
              sitekey="6Lckq9MrAAAAABjBD9rQYm19BMGFFWiwb9mPiw2K"
              onChange={handleCaptchaChange}
            />
            {formErrors.captcha && <small className="text-danger">{formErrors.captcha}</small>}
          </div>

          <button
            className="btn w-100"
            type="submit"
            style={{
              background: "#bc0000",
              color: "#fff",
              padding: "10px",
              fontSize: "16px",
              fontWeight: "bold",
              border: "none",
            }}
          >
            SUBMIT NOW
          </button>
        </form>
      </div>
    </div>
  );
}