// productdetails/components/NewsletterSection.tsx
"use client";

import React, { useState } from "react";
import { toast } from "sonner";
import { apiCall } from "@/utils/callApi";

export default function NewsletterSection() {
  const [email, setEmail] = useState("");
  const [loading, setLoading] = useState(false);

  const handleSubscribe = async () => {
    const trimmedEmail = email.trim();

    if (!trimmedEmail) {
      toast.error("Email is required");
      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);

      const res = await apiCall<any>("/clientapi/newsletter", {
        method: "POST",
        body: {
          email: trimmedEmail,
        },
      });

      if (res?.data?.success) {
        toast.success(res?.data?.message || "Subscribed successfully");

        setEmail("");
      } else {
        toast.error(res?.error || res?.data?.message || "Failed to subscribe");
      }
    } catch (error: any) {
      toast.error(
        error?.message ||
          error?.response?.data?.message ||
          "Failed to subscribe",
      );
    } finally {
      setLoading(false);
    }
  };

  return (
    <section className="newslettercontainer !pt-0">
      <div className="container-xxl container px-3">
        <div className="-mx-2 flex flex-wrap">
          <div className="xxl:w-1/4 w-full px-2 sm:w-full md:w-1/3 lg:w-1/4 xl:w-1/4">
            <div className="contactinfo text-center">
              <h3>Contact Us</h3>
              <p>
                Email:{" "}
                <a href="mailto:wearhouse@dulhesahab.com">
                  wearhouse@dulhesahab.com
                </a>
              </p>
              <p>
                Phone: <a href="tel:18003099038">1800 309 9038</a>
              </p>
            </div>
          </div>

          <div className="xxl:w-1/2 w-full px-2 sm:w-full md:w-1/2 lg:w-1/2 xl:w-1/2">
            <div className="newsletterbx text-center">
              <h3>Let's Get in Touch!</h3>

              <p>What's inside? Exclusive sales, new arrivals & much more.</p>

              <div className="mb-2 flex">
                <input
                  type="email"
                  className="form-control"
                  placeholder="Email Address"
                  value={email}
                  disabled={loading}
                  onChange={(e) => setEmail(e.target.value)}
                  onKeyDown={(e) => {
                    if (e.key === "Enter") {
                      handleSubscribe();
                    }
                  }}
                />

                <button
                  className="subscribebtn"
                  type="button"
                  onClick={handleSubscribe}
                  disabled={loading}
                >
                  {loading ? "Subscribing..." : "Subscribe"}
                </button>
              </div>

              <p className="m-0">
                New styles, exclusive offers & more! Subscribe now
              </p>
            </div>
          </div>

          <div className="xxl:w-1/4 w-full px-2 sm:w-full md:w-1/3 lg:w-1/4 xl:w-1/4">
            <div className="socialbx text-center">
              <h3>Social Media</h3>

              <div className="socialrow">
                <SocialLink icon="icon-facebook" name="Facebook" />

                <SocialLink icon="icon-pinterest" name="Pinterest" />

                <SocialLink icon="icon-x" name="X (Twitter)" />

                <SocialLink icon="icon-instagram" name="Instagram" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function SocialLink({ icon, name }: { icon: string; name: string }) {
  return (
    <a href="javascript:void(0);" className="socialbtn">
      <i className={`icon ${icon}`}></i>
      <span>{name}</span>
    </a>
  );
}
