"use client";
import { Mail, MapPin, Phone, Loader2 } from "lucide-react";
import { useGSAP } from "@gsap/react";
import gsap from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
import { useRef, useState, FormEvent } from "react";
import emailjs from "@emailjs/browser";

// Register Plugin
if (typeof window !== "undefined") {
  gsap.registerPlugin(ScrollTrigger);
}

export default function Contact() {
  const container = useRef(null);
  const formRef = useRef<HTMLFormElement>(null);

  // States for Form Handling
  const [loading, setLoading] = useState(false);
  const [status, setStatus] = useState<"idle" | "success" | "error">("idle");
  const [errorMessage, setErrorMessage] = useState("");

  // GSAP Animations
  useGSAP(
    () => {
      const tl = gsap.timeline({
        scrollTrigger: {
          trigger: container.current,
          start: "top 80%",
          toggleActions: "play none none reverse",
        },
      });

      tl.to(".section-title", { opacity: 1, y: 0, duration: 0.6 })
        .to(
          ".contact-info",
          { opacity: 1, x: 0, duration: 0.8, ease: "power2.out" },
          "-=0.4"
        )
        .to(
          ".contact-form",
          { opacity: 1, x: 0, duration: 0.8, ease: "power2.out" },
          "-=0.6"
        );
    },
    { scope: container }
  );

  // Handle Email Sending
  const sendEmail = (e: FormEvent) => {
    e.preventDefault();
    setLoading(true);
    setStatus("idle");
    setErrorMessage("");

    if (!formRef.current) return;

    const SERVICE_ID = "service_der9g1a";
    const TEMPLATE_ID = "template_1ck592o";
    const PUBLIC_KEY = "tGE9eSDI6yGVhEfXc";

    emailjs
      .sendForm(SERVICE_ID, TEMPLATE_ID, formRef.current, {
        publicKey: PUBLIC_KEY,
      })
      .then(
        (result) => {
          console.log("SUCCESS!", result.text);
          setLoading(false);
          setStatus("success");
          formRef.current?.reset();
          setTimeout(() => setStatus("idle"), 5000);
        },
        (error) => {
          console.error("FAILED...", error);
          setLoading(false);
          setStatus("error");
          // এরর মেসেজ সেট করা হলো যাতে আপনি দেখতে পারেন সমস্যা কোথায়
          setErrorMessage(error.text || "Something went wrong. Check console.");
        }
      );
  };

  return (
    <section
      id="contact"
      ref={container}
      className="py-20 bg-gray-50 dark:bg-black/50 overflow-hidden"
    >
      <div className="container mx-auto px-6">
        <h2 className="section-title opacity-0 -translate-y-10 text-3xl md:text-4xl font-bold text-center mb-16">
          Let's{" "}
          <span className="text-green-600 dark:text-purple-500">Connect</span>
        </h2>

        <div className="flex flex-col md:flex-row gap-12 max-w-5xl mx-auto">
          {/* Contact Info */}
          <div className="contact-info opacity-0 -translate-x-20 w-full md:w-1/3 space-y-8">
            <div className="flex items-start gap-4">
              <div className="p-3 bg-green-100 dark:bg-purple-900/30 rounded-lg text-green-600 dark:text-purple-400">
                <Mail />
              </div>
              <div>
                <h4 className="font-bold text-lg">Email</h4>
                <p className="text-gray-600 dark:text-gray-400 text-sm">
                  shihab.merndeveloper@gmail.com
                </p>
              </div>
            </div>

            <div className="flex items-start gap-4">
              <div className="p-3 bg-green-100 dark:bg-purple-900/30 rounded-lg text-green-600 dark:text-purple-400">
                <Phone />
              </div>
              <div>
                <h4 className="font-bold text-lg">Phone</h4>
                <p className="text-gray-600 dark:text-gray-400 text-sm">
                  +880 1879 900327
                </p>
              </div>
            </div>

            <div className="flex items-start gap-4">
              <div className="p-3 bg-green-100 dark:bg-purple-900/30 rounded-lg text-green-600 dark:text-purple-400">
                <MapPin />
              </div>
              <div>
                <h4 className="font-bold text-lg">Location</h4>
                <p className="text-gray-600 dark:text-gray-400 text-sm">
                  Dhaka, Bangladesh
                </p>
              </div>
            </div>
          </div>

          {/* Form */}
          <div className="contact-form opacity-0 translate-x-20 w-full md:w-2/3">
            <form ref={formRef} onSubmit={sendEmail} className="space-y-6">
              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                <input
                  type="text"
                  name="from_name" // MUST MATCH EmailJS Template
                  required
                  placeholder="Name"
                  className="w-full p-4 rounded-lg bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 focus:border-green-500 dark:focus:border-purple-500 outline-none transition"
                />
                <input
                  type="email"
                  name="email_id" // MUST MATCH EmailJS Template
                  required
                  placeholder="Email"
                  className="w-full p-4 rounded-lg bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 focus:border-green-500 dark:focus:border-purple-500 outline-none transition"
                />
              </div>
              <textarea
                rows={5}
                name="message" // MUST MATCH EmailJS Template
                required
                placeholder="Message"
                className="w-full p-4 rounded-lg bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 focus:border-green-500 dark:focus:border-purple-500 outline-none transition"
              ></textarea>

              <button
                type="submit"
                disabled={loading}
                className="w-full py-4 bg-black dark:bg-purple-600 text-white font-bold rounded-lg hover:opacity-90 transition flex justify-center items-center gap-2 disabled:opacity-70"
              >
                {loading ? (
                  <>
                    <Loader2 className="animate-spin" /> Sending...
                  </>
                ) : (
                  "Send Message"
                )}
              </button>

              {/* Status Messages */}
              {status === "success" && (
                <p className="text-green-600 text-center font-medium mt-2">
                  Message sent successfully!
                </p>
              )}
              {status === "error" && (
                <p className="text-red-500 text-center font-medium mt-2">
                  Error: {errorMessage}
                </p>
              )}
            </form>
          </div>
        </div>
      </div>
    </section>
  );
}