import { type FormEvent, useState } from "react";
import { useSearchParams } from "react-router-dom";
import { useAppSelector } from "@/hooks";
import { Button } from "@/components/ui/button";
import max_lulu from "./max-and-lulu.jpg";

//   const handleInputChange = (
//     event: React.KeyboardEvent<HTMLInputElement>,
//   ) => {};

//   const handleKeyPress = (event: KeyboardEvent<HTMLInputElement>) => {};
//   const handleSubmit = (e) => {
//     e.preventDefault();
//     console.log("Form submitted successfully!");
//   };

const TransferComplete = function () {
  return (
    <div className="px-6 my-6">
      <h2
        className="
                    bg-emerald-400 rounded py-2
                    text-white text-2xl font-semibold text-center"
      >
        Please check your email.
      </h2>
      <p className="text-slate-600 text-l font-semibold text-center py-5 px-6">
        If you don't recieve anything, please check your spam folder, or try
        again shortly.
      </p>
      <p className="bg-slate-200 text-xs font-semibold text-center p-3 my-3">
        We will be assisting account transfers throughout the rest of the month.
        If you have any further questions or concerns, please email us directly
        with your desired account email and the AMT ID to associate with your
        worker history.
      </p>
      <img src={max_lulu} alt="Max and Lulu" className="object-contain" />
    </div>
  );
};

type RequestState = "idle" | "working" | "sent" | "failed";

interface TransferSubmitProps {
  onSubmitSuccess: () => void;
}

const TransferSubmit = function ({ onSubmitSuccess }: TransferSubmitProps) {
  const [email, setEmail] = useState("");
  const [state, setState] = useState<RequestState>("idle");
  // const bpuid = useAppSelector((state) => state.app.bpuid);

  const [searchParams] = useSearchParams();

  const workerId = searchParams.get("workerId");

  const submit = async (event: FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    setState("working");

    if (!workerId)
      throw new Error("Account-link request failed without workerId");

    try {
      const response = await fetch("/auth/link-amt/request/", {
        method: "POST",
        credentials: "include",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          email: email,
          amt_worker_id: workerId,
        }),
      });

      if (!response.ok) throw new Error("Account-link request failed");

      const body = (await response.json()) as { magic_link?: string };
      console.log(body.magic_link ?? null);
      onSubmitSuccess();
    } catch {
      setState("failed");
    }
  };

  return (
    <div className="px-6 my-6">
      <h2
        className="
                    bg-red-700 rounded py-2
                    text-white text-2xl font-semibold text-center"
      >
        Transfer Required
      </h2>
      <h4
        className="
                    mt-2
                    bg-slate-500 rounded p-2
                    text-white text-sm font-semibold text-center"
      >
        James Billings is no longer available on Amazon Mechanical Turk. Our
        dedicated platform will enable you to do the same work as always, paid
        directly to you.
        <br />
        Enter your email below to transfer your account history.
        <br />
        This will allow you to keep your full account history and wallet
        balance.
      </h4>

      <form onSubmit={submit}>
        <input
          className="w-full rounded-md border-3 border-slate-700  px-3 py-2 font-semibold my-5"
          type="email"
          autoComplete="email"
          required
          value={email}
          onChange={(event) => setEmail(event.target.value)}
          placeholder="you@example.com"
        />
        <Button
          className="w-1/2 font-semibold bg-slate-600 cursor-pointer hover:bg-blue-950"
          type="submit"
          disabled={state === "working"}
        >
          {state === "working" ? "Sending…" : "Send link"}
        </Button>
      </form>

      {state === "sent" && (
        <h4
          className="
                    mt-2
                    bg-slate-500 rounded py-2
                    text-white text-l font-semibold text-center"
        >
          Check your email to finish linking your account.
        </h4>
      )}

      {state === "failed" && <p>Unable to send the link. Please try again.</p>}
    </div>
  );
};

const Transfer = function () {
  const bpuid = useAppSelector((state) => state.app.bpuid);
  const [submitted, setSubmitted] = useState(false);

  if (!bpuid) {
    return (
      <p className="text-center text-2xl py-3 text-red-800 font-semibold">
        No Worker ID found. Please access this page through the Amazon
        Mechanical Turk platform.
      </p>
    );
  }

  return (
    <>
      {submitted ? (
        <TransferComplete />
      ) : (
        <TransferSubmit onSubmitSuccess={() => setSubmitted(true)} />
      )}
    </>
  );
};

export default Transfer;