"use client";

import { sendmail } from "@/services/public";
import React, { useState, useEffect } from "react";

function ContactForm() {
  const [response, setResponse] = useState(""); // başarı mesajı
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState("");
  const [successMessage, setSuccess] = useState("");
  const [isRecaptchaVerified, setIsRecaptchaVerified] = useState(false);
  const [isRecaptchaReady, setIsRecaptchaReady] = useState(false);

  useEffect(() => {
    // reCAPTCHA callback fonksiyonu global olarak tanımlanmalı
    (window as any).onRecaptchaSuccess = () => {
      setIsRecaptchaVerified(true); // checkbox işaretlendiğinde buton aktif olacak
    };
    if ((window as any).grecaptcha) {
      setIsRecaptchaReady(true);
      return;
    }

    const existingScript = document.querySelector(
      'script[src*="recaptcha/api.js"]'
    ) as HTMLScriptElement | null;
    const handleScriptLoad = () => setIsRecaptchaReady(true);

    if (existingScript) {
      existingScript.addEventListener("load", handleScriptLoad, { once: true });
      return () => {
        existingScript.removeEventListener("load", handleScriptLoad);
      };
    }

    const script = document.createElement("script");
    script.src = "https://www.google.com/recaptcha/api.js";
    script.async = true;
    script.defer = true;
    script.onload = handleScriptLoad;
    document.head.appendChild(script);

    return () => {
      script.onload = null;
    };
  }, []);

  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    setIsLoading(true);
    setError("");
    setResponse("");
    setSuccess("");

    if (!(window as any).grecaptcha) {
      setError("reCAPTCHA yüklenmedi, sayfayı yenileyin.");
      setIsLoading(false);
      return;
    }

    // reCAPTCHA token al
    const token = (window as any).grecaptcha.getResponse();
    if (!token) {
      setError("Lütfen reCAPTCHA kutusunu işaretleyin.");
      setIsLoading(false);
      return;
    }

    const form = e.currentTarget;
    const formData = new FormData(form);
    const data = Object.fromEntries(formData.entries());

    const result = await sendmail({ ...data, token } as any);

    if (result.success) {
      setSuccess(result.message);
      form.reset();
      (window as any).grecaptcha.reset();
      setIsRecaptchaVerified(false); // reset sonrası tekrar disable
    } else {
      setError(result.message);
    }

    setIsLoading(false);
  };

  return (
    <>
      {error && (
        <div className="bg-red-400 text-white my-2 px-3 py-2 rounded">{error}</div>
      )}

      <form className="flex flex-col gap-3" onSubmit={handleSubmit}>
        <div>
          <input placeholder="Adınız" name="name" className="input" />
        </div>
        <div>
          <input placeholder="Soyadınız" name="surname" className="input" />
        </div>
        <div>
          <input placeholder="E-Mail" name="email" type="email" className="input" />
        </div>
        <div>
          <input placeholder="Telefon" name="telefon" className="input" />
        </div>
        <div>
          <input placeholder="Ülke" name="ulke" className="input" />
        </div>
        <div>
          <input placeholder="Şehir" name="sehir" className="input" />
        </div>
        <div>
          <textarea
            className="input overflow-hidden resize-none"
            rows={5}
            name="mesaj"
            placeholder="Mesajınız"
          ></textarea>
        </div>
        <div className="flex gap-3">
          <input
            type="checkbox"
            id="abone"
            name="abone"
            className="peer basis-8 h-5 w-5 cursor-pointer accent-black transition-all rounded shadow hover:shadow-md border border-slate-300 checked:bg-slate-800 checked:border-slate-800"
          />
          <label htmlFor="abone" className="text-sm cursor-pointer">
            Bana SECA’dan en son kurumsal haberleri, duyuruları ve daha fazlasını gönderin. İstediğim zaman aboneliğimi iptal edebilirim.
          </label>
        </div>

        {/* reCAPTCHA v2 */}
        <div className="mt-2">
          {isRecaptchaReady ? (
            <div
              className="g-recaptcha"
              data-sitekey={process.env.NEXT_PUBLIC_RECAPTCHA_SITE_KEY}
              data-callback="onRecaptchaSuccess"
            ></div>
          ) : (
            <div className="min-h-[78px] rounded border border-gray-200 bg-gray-50"></div>
          )}

          <button
            disabled={!isRecaptchaVerified || isLoading || !isRecaptchaReady}
            type="submit"
            className={`
              px-9 py-2 mt-2 text-lg
              ${isRecaptchaVerified && isRecaptchaReady ? "bg-primary hover:bg-white hover:text-primary" : "bg-gray-400 cursor-not-allowed"}
              border border-primary text-white duration-300
              ${isLoading ? "opacity-50 cursor-not-allowed" : ""}
            `}
          >
            {isLoading ? "Gönderiliyor..." : "Gönder"}
          </button>
        </div>
      </form>

      {successMessage && (
        <div className="bg-green-500 text-white my-2 px-3 py-2 rounded">{successMessage}</div>
      )}
    </>
  );
}

export default ContactForm;