import apiInterceptor from "@/interceptor/interceptor";
import Cookies from "js-cookie";
import { signOut } from "next-auth/react";
import Head from "next/head";
import Image from "next/image";
import { useState } from "react";
import toast, { Toaster } from "react-hot-toast";
interface FormData {
  phone: string;
}

const DeleteUser = () => {
  const [formData, setFormData] = useState<FormData>({ phone: "" });

  const successNotify = () => toast.success("Account Deleted Successfully !");
  const errorNotify = () =>
    toast.error(
      "Please make sure you are logged in and entered same phone number"
    );

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();

    const accessToken = Cookies.get("jazz_token");

    try {
      const response = await apiInterceptor.post(
        `api/user/deleteUserAccount`,
        formData,
        {
          headers: { authorization: `Bearer ${accessToken}` },
        }
      );

      if (response.status === 201) {
        successNotify();
        // Remove the token from the cookie
        Cookies.remove("jazz_token");

        // Sign out using NextAuth
        await signOut({ callbackUrl: "/auth/login" });
      }
    } catch (error) {
      errorNotify();
      console.log(error);
    }
  };

  const handleChange = (e: any) => {
    const { value } = e.target;
    const phoneRegex = /^[0-9]*$/;

    if (phoneRegex.test(value)) {
      setFormData({ phone: value });
    }
  };

  return (
    <>

<Head><link rel="shortcut icon" href="/images/jazzagian-logo.png" />
        <script
          dangerouslySetInnerHTML={{
            __html: `
              !function(f,b,e,v,n,t,s)
              {if(f.fbq)return;n=f.fbq=function(){n.callMethod?
              n.callMethod.apply(n,arguments):n.queue.push(arguments)};
              if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
              n.queue=[];t=b.createElement(e);t.async=!0;
              t.src=v;s=b.getElementsByTagName(e)[0];
              s.parentNode.insertBefore(t,s)}(window, document,'script',
              'https://connect.facebook.net/en_US/fbevents.js');
              fbq('init', '360254480441103');
              fbq('track', 'DeleteUser');
            `,
          }}
        />
        <noscript>
          <Image
            height="1"
            width="1"
            alt="facebook link"
            style={{ display: 'none' }}
            src="https://www.facebook.com/tr?id=360254480441103&ev=DeleteUser&noscript=1"
          />
        </noscript>
      </Head>




    <div className="flex items-center justify-center">
    <div className="w-full h-[62vh] flex flex-col items-center justify-center p-2">
      <h3 className="my-3 sm:my-6 text-base text-gray-600 text-center">
        <p>Enter your registered mobile no to delete your jazzagain account.</p>
        <p>
          This will <span className="font-semibold">remove</span> all your
          details from jazzagain platform.
        </p>
      </h3>
      <Toaster
        toastOptions={{
          className: "",
          duration: 5000,
          style: {
            marginTop: "4rem",
            background: "#FE342B",
            color: "#fff",
          },
        }}
      />
      <form onSubmit={handleSubmit}>
        <input
          type="tel"
          maxLength={11}
          placeholder="Enter phone number"
          value={formData.phone}
          onChange={handleChange}
          className={`p-2 border rounded focus-within:outline-none border-gray-400`}
        />
        <button
          type="submit"
          className={`p-2 ml-2 border rounded bg-gray-300 hover:bg-[#FE342B] hover:text-white transition-all duration-200`}
        >
          Delete
        </button>
      </form>
    </div>
    </div>
    </>
  );
};

export default DeleteUser;
