"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);

  /** Contact actions */
  const extraIcons = [
    {
      href: "mailto:bloor@rapharehab.ca",
      src: "/assets/images/icons/mail.png",
      label: "Mail",
    },
    {
      href: "tel:647-722-3434",
      src: "/assets/images/icons/call.png",
      label: "Call",
    },
    {
      action: () => setShowChat(true),
      src: "/assets/images/icons/chat.png",
      label: "Chat",
    },
  ];

  return (
    <>
      {/* Floating Contact Buttons */}
      <div className="contact-icon-container">
        {open && (
          <div
            className="extra-icons-wrapper"
            style={{
              position: "absolute",
              bottom: "10px",
              right: "-80",
              background: "#fff",
              borderRadius: "30px 30px 0 0",
              boxShadow: "0 4px 12px rgba(0,0,0,0.2)",
              padding: "10px",
              display: "flex",
              flexDirection: "column",
              gap: "15px",
              alignItems: "center",
            }}
          >
            {extraIcons.map((icon, i) =>
              icon.href ? (
                <a
                  key={i}
                  href={icon.href}
                  aria-label={icon.label}
                  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) => !prev)}
          style={{
            position: "fixed",
            bottom: "5px",
            right: "20px",
            left: "20px",
            background: "#102548",
            borderRadius: "50%",
            padding: "15px",
            // boxShadow: "0 4px 12px #102548",
            border: "none",
            zIndex: 9999,
          }}
        >
          <img
            src={
              open
                ? "/assets/images/icons/cross-out.png"
                : "/assets/images/icons/call.png"
            }
            alt="Contact"
            style={{ width: "28px", height: "28px" }}
          />
        </button>
      </div>

      {/* Chat Form Sidebar */}
      {showChat && (
        <ChatForm onClose={() => setShowChat(false)} />
      )}
    </>
  );
}

/** Contact Form Sidebar */
function ChatForm({ onClose }) {
  const [formData, setFormData] = useState({
    username: "",
    lname: "",
    email: "",
    phone: "",
    subject: "",
    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) => {
    setCaptchaToken(token);
  };

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

    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.subject.trim()) errors.subject = "Subject is required.";
    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) return;

    const emailData = {
      ...formData,
      message: `Subject: ${formData.subject}<br /><br />Message: ${formData.message}`,
      to: "bloor@rapharehab.ca",
      senderName: "Rapha Rehab Chat Form",
      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: "",
        lname: "",
        email: "",
        phone: "",
        subject: "",
        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",
      }}
    >
      <div className="p-3 border-bottom d-flex justify-content-between align-items-center">
        <h5 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="First 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="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>}

          <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="text"
            name="subject"
            placeholder="Subject"
            value={formData.subject}
            onChange={handleChange}
            className="form-control mb-2"
          />
          {formErrors.subject && <small className="text-danger">{formErrors.subject}</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="6LekfpwrAAAAAOTwuP1d2gg-Fv9UEsAjE2gjOQJl"
              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>
  );
}