"use client";
import useAxios from "@/hooks/useAxios";
import { useState } from "react";
import { toast } from "react-toastify";

export default function Newsletter() {
  const { postData } = useAxios();
  const [email, setEmail] = useState<string>("");
  const [isSubmitting, setIsSubmitting] = useState<boolean>(false);

  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();

    if (!email) {
      toast.error("Please enter your email");
      return;
    }

    setIsSubmitting(true);

    try {
      const response = await postData<{ message: string; success: boolean }>(
        "newsletter",
        { email }
      );

      console.log("Newsletter Response:", response);

      if (response?.success) {
        toast.success(response?.message || "Subscribed successfully!");
      } else {
        toast.error(response?.message || "Something went wrong!");
      }
    } catch (error) {
      console.error("Newsletter subscription error:", error);
      toast.error("Server error, please try again!");
    } finally {
      setEmail("");
      setIsSubmitting(false);
    }
  };

  return (
    <div className="relative rounded-[15px] w-full max-w-4xl bg-no-repeat mb-7 mx-auto overflow-hidden bg-newsletter bg-contain">
      <div className="relative rounded-lg p-3 md:p-20">
        <div className="relative z-10 max-w-xl mx-auto text-center">
          <h2 className="text-lg md:text-3xl font-bold bg-iaab200 bg-clip-text text-transparent mb-2">
            Newsletter
          </h2>
          <p className="text-lg md:text-lg text-gray-800 mb-8">
            Join a Global Network of Excellence
          </p>

          <form
            onSubmit={handleSubmit}
            className="flex flex-col sm:flex-row gap-3 max-w-md mx-auto"
          >
            <input
              type="email"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              placeholder="Your Email Address"
              className="flex-1 px-4 py-3 rounded-md text-black border-0 focus:ring-2 focus:ring-blue-400 outline-none"
            />

            <button
              type="submit"
              disabled={isSubmitting}
              className={`px-6 py-3 rounded-full transition-colors duration-200 ${
                isSubmitting
                  ? "bg-gray-500 cursor-not-allowed"
                  : "bg-gray-900 text-white hover:bg-gray-800"
              }`}
            >
              {isSubmitting ? "Please wait..." : "Send"}
            </button>
          </form>
        </div>
      </div>
    </div>
  );
}