import { JsonWebTokenError, verify } from "jsonwebtoken";
import { toast } from "sonner";
import { verifyAccount } from "../_actions/verify_account";

import { MdErrorOutline } from "react-icons/md";
import { IoShieldCheckmarkSharp } from "react-icons/io5";

interface Props {
  params: {
    key: string;
  };
}

interface DecodedToken {
  id: string;
}

function verifyKey(key: string): {
  err?: JsonWebTokenError;
  payload?: DecodedToken;
} {
  try {
    const JWT_SECRET = process.env.JWT_SECRET;
    if (!JWT_SECRET) {
      throw new Error(
        "JWT_SECRET is not defined in the environment variables."
      );
    }
    const decoded = verify(key, JWT_SECRET) as DecodedToken;
    return { payload: decoded };
  } catch (err) {
    console.error("Failed to verify JWT:", err);
    return { err: err as JsonWebTokenError };
  }
}

async function updateUserStatus(id: string): Promise<{ success: boolean }> {
  try {
    await verifyAccount(id);
    return { success: true };
  } catch (err) {
    console.error("Failed to update user status:", err);
    return { success: false };
  }
}

export default async function VerifyAccount({ params }: Props) {
  const { key } = params;
  const { err, payload } = verifyKey(key);

  if (err) {
    toast.error("There was an error while verifying you!");
    return null;
  }

  if (!payload?.id) {
    toast.error("Something went wrong while validating the url");
    return null;
  }

  const { success } = await updateUserStatus(payload.id);
  if (!success) {
    toast.error("Verification failed.");
    return null;
  }

  return (
    <div className="w-full h-full flex flex-col items-center justify-center mt-20 gap-5">
      {err ? (
        <MdErrorOutline className="w-10 h-10" />
      ) : (
        <IoShieldCheckmarkSharp className="w-10 h-10" />
      )}
      <div className="flex flex-col gap-1 items-center">
        <h3 className="text-xl font-medium">
          Verification process {err ? "failed" : "was successful"}
        </h3>
        <p className="mt-1 text-muted-foreground">
          {err
            ? "Please try again later or contact a developer to inform them"
            : "Your account has been successfully verified. You may now close this tab"}
        </p>
      </div>
    </div>
  );
}