import { useEffect } from "react";
import { useNavigate } from "react-router-dom";
import { usePairPoll } from "@/hooks/usePairPoll";
import { Spinner } from "@/components/Spinner";

export function TgWaitPage() {
  const nav = useNavigate();
  const pairSession = sessionStorage.getItem("pp-pair-session");
  const deepLink = sessionStorage.getItem("pp-pair-deeplink");
  const { status } = usePairPoll(pairSession);

  useEffect(() => {
    if (!pairSession) { nav("/login", { replace: true }); }
  }, [pairSession, nav]);

  useEffect(() => {
    if (status === "authenticated") {
      sessionStorage.removeItem("pp-pair-session");
      sessionStorage.removeItem("pp-pair-deeplink");
      nav("/", { replace: true });
    }
    if (status === "expired") {
      sessionStorage.removeItem("pp-pair-session");
      sessionStorage.removeItem("pp-pair-deeplink");
      nav("/login", { replace: true, state: { expired: true } });
    }
  }, [status, nav]);

  return (
    <div className="pt-16 text-center">
      <h1 className="text-xl font-extrabold mb-2">Премиум Водитель</h1>
      <p className="text-muted text-sm mb-6">
        В Telegram нажмите «Поделиться номером для входа», затем вернитесь сюда — вход произойдёт автоматически.
      </p>
      {deepLink && (
        <a href={deepLink} target="_blank" rel="noopener noreferrer" className="btn-primary block text-center mb-6">
          Открыть Telegram
        </a>
      )}
      <Spinner />
    </div>
  );
}