"use client";

import { useState } from "react";
import { toast } from "sonner";

const Newsletter = ({ settings }: any) => {
  const [email, setEmail] = useState("");
  const [loading, setLoading] = useState(false);

  const handleSubscribe = async () => {
     console.log("Subscribe button clicked with email:", email);
    const trimmedEmail = email.trim();
 
    if (!trimmedEmail) {
      toast.error("Please enter your email address");
      return;
    }

    const emailRegex = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i;

    if (!emailRegex.test(trimmedEmail)) {
      toast.error("Please enter a valid email address");
      return;
    }

    try {
      setLoading(true);
      console.log("Subscribing email:", trimmedEmail);

      // Using fetch directly
      const response = await fetch("/clientapi/newsletter", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          email: trimmedEmail,
        }),
      });

      const data = await response.json();
      console.log("API Response:", data);

      if (response.ok && (data.success === true || data?.data?.success === true)) {
        toast.success(data.message || data?.data?.message || "Subscribed successfully");
        setEmail("");
      } else {
        toast.error(data.message || data?.data?.message || "Failed to subscribe");
      }
    } catch (error: any) {
      console.error("Subscription error:", error);
      toast.error(error?.message || "Failed to subscribe. Please try again.");
    } finally {
      setLoading(false);
    }
  };

  return (
    <section className="newslettercontainer pt-0">
      <div className="mx-auto w-full px-3 max-w-[1180px]">
        <div className="flex flex-wrap -mx-3">
          {/* Contact Us */}
          <div className="2xl:w-1/4 xl:w-1/4 lg:w-1/4 md:w-full sm:w-full w-full px-3">
            <div className="contactinfo text-center">
              <h3>Contact Us</h3>
              <p>
                Email:{" "}
                <a href={`mailto:${settings?.email}`}>
                  {settings?.email}
                </a>
              </p>
              <p>
                Phone:{" "}
                <a href={`tel:${settings?.phoneNumber}`}>
                  {settings?.phoneNumber}
                </a>
              </p>
            </div>
          </div>

          {/* Newsletter */}
          <div className="2xl:w-1/2 xl:w-1/2 lg:w-1/2 md:w-full sm:w-full w-full px-3">
            <div className="newsletterbx text-center">
              <h3>Let's Get in Touch!</h3>
              <p>What's inside? Exclusive sales, new arrivals &amp; much more.</p>

              <div className="flex mb-2">
                <input
                  className="form-control"
                  type="email"
                  placeholder="Email Address"
                  value={email}
                  onChange={(e) => setEmail(e.target.value)}
                 
                 
                />
                <button
                  className="subscribebtn"
                  type="button"
                  disabled={loading}
                  onClick={handleSubscribe}
                >
                  {loading ? "Subscribing..." : "Subscribe"}
                </button>
              </div>
              <p className="m-0">New styles, exclusive offers &amp; more! Subscribe now</p>
            </div>
          </div>

          {/* Social Media */}
          <div className="2xl:w-1/4 xl:w-1/4 lg:w-1/4 md:w-full sm:w-full w-full px-3">
            <div className="socialbx text-center">
              <h3>Social Media</h3>
              <div className="socialrow">
                <a
                  className="socialbtn"
                  href={settings?.facebookLink || "#"}
                  target="_blank"
                  rel="noopener noreferrer"
                >
                  <i className="icon icon-facebook"></i>
                  <span>Facebook</span>
                </a>
                <a
                  className="socialbtn"
                  href={settings?.pinterestLink || "#"}
                  target="_blank"
                  rel="noopener noreferrer"
                >
                  <i className="icon icon-pinterest"></i>
                  <span>Pinterest</span>
                </a>
                <a
                  className="socialbtn"
                  href={settings?.xLink || "#"}
                  target="_blank"
                  rel="noopener noreferrer"
                >
                  <i className="icon icon-x"></i>
                  <span>X (Twitter)</span>
                </a>
                <a
                  className="socialbtn"
                  href={settings?.instagramLink || "#"}
                  target="_blank"
                  rel="noopener noreferrer"
                >
                  <i className="icon icon-instagram"></i>
                  <span>Instagram</span>
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export default Newsletter;