import { CheckCircleIcon, XCircleIcon } from "@phosphor-icons/react";
import { useEffect, useRef, useState } from "react";
import { useNavigate, useParams } from "react-router-dom";
import { publicApi } from "../api/apiClient";
import Logo from "../components/Logo";
import { endpoints, replacePathParams } from "../config/endpoints";
import { ROUTES } from "../config/routes";

export default function Activate() {
  const { uidb64, token } = useParams();
  const [status, setStatus] = useState<"loading" | "success" | "error">(
    "loading",
  );
  const hasCalled = useRef(false);
  const navigate = useNavigate();

  useEffect(() => {
    if (!(uidb64 && token) || hasCalled.current) return;

    // prevent double api calls
    hasCalled.current = true;

    const activateAccount = async () => {
      try {
        const url = replacePathParams(endpoints.ACTIVATE, {
          uidb64,
          token,
        });
        await publicApi.get(url);
        setStatus("success");
      } catch (_err) {
        setStatus("error");
      }
    };

    activateAccount();
  }, [uidb64, token]);

  return (
    <div className="glass-card w-full max-w-sm p-8 text-center fade-zoom">
      {status === "loading" && (
        <div className="flex flex-col items-center gap-4 py-8">
          <span className="loading loading-spinner loading-lg text-primary" />
          <p className="text-sm opacity-70">Activating your account...</p>
        </div>
      )}

      {status === "success" && (
        <div className="flex flex-col items-center gap-6 animate-in fade-in zoom-in duration-500">
          <div className="bg-success/10 p-4 rounded-full">
            <CheckCircleIcon
              size={64}
              weight="duotone"
              className="text-success"
            />
          </div>
          <h2 className="font-display text-xl text-success">
            Account Activated!
          </h2>
          <p className="opacity-70 mb-8 leading-relaxed">
            Welcome to <Logo />
            <br />
            Your identity is now verified and ready for timeless letters.
          </p>
          <div className="divider opacity-10"></div>

          <button
            type="button"
            className="btn btn-primary w-full shadow-lg"
            onClick={() =>
              navigate(ROUTES.LOGIN, {
                state: { firstTime: true },
                replace: true,
              })
            }
          >
            Start Writing
          </button>
        </div>
      )}

      {status === "error" && (
        <div className="flex flex-col items-center gap-6 animate-in fade-in zoom-in duration-500">
          <div className="bg-error/10 p-4 rounded-full">
            <XCircleIcon size={64} weight="duotone" className="text-error" />
          </div>
          <h2 className="font-display text-xl text-error">Activation Failed</h2>
          <p className="opacity-70 mb-8 leading-relaxed">
            The link might be expired or already used. Please try registering
            again.
          </p>
          <button
            type="button"
            className="btn btn-ghost w-full"
            onClick={() => navigate(ROUTES.ONBOARD)}
          >
            Back to Registration
          </button>
        </div>
      )}
    </div>
  );
}