"use client";

import { useEffect, useRef, useState } from "react";

import Link from "@/app/components/LocaleLink";
import { useLocaleRouter } from "@/app/lib/useLocaleRouter";
import { getAstrologerProfile } from "@/app/lib/astrologer";

// Set by the progress page right after "Submit Profile" succeeds and
// consumed here — so the Thank You screen shows exactly once per
// submission. Opening this URL again (refresh, back button, bookmark)
// falls through to the normal under-review page.
const THANK_YOU_FLAG = "astrologerProfileSubmittedThankYou";

export default function AstrologerThankYouPage() {
  const router = useLocaleRouter();
  const checkedRef = useRef(false);

  const [show, setShow] = useState(false);
  const [profileId, setProfileId] = useState<string | number | null>(null);

  useEffect(() => {
    // The ref survives React strict mode's dev-only double effect run,
    // which would otherwise consume the flag on the first pass and
    // bounce on the second.
    if (checkedRef.current) return;
    checkedRef.current = true;

    let pending = false;
    try {
      pending = sessionStorage.getItem(THANK_YOU_FLAG) === "1";
      sessionStorage.removeItem(THANK_YOU_FLAG);
    } catch {
      // sessionStorage unavailable — treat as already shown.
    }

    if (!pending) {
      router.replace("/astrologer/profile/review");
      return;
    }

    setShow(true);

    const token = localStorage.getItem("astrologerToken");
    if (!token) return;

    getAstrologerProfile(token)
      .then((response) => {
        const profile = response?.data ?? response;
        const id = profile?.ID ?? profile?.id;
        if (id) setProfileId(id);
      })
      .catch(() => {
        // The ID is a nicety — the message reads fine without it.
      });
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  if (!show) return null;

  return (
    <section
      className="astrologer-wizard-page"
      style={{ paddingTop: "120px", paddingBottom: "120px" }}
    >
      <div className="container">
        <div className="row justify-content-center">
          <div className="col-lg-5">
            <div className="card card-bg-primary border-0 rounded-4 mb-4">
              <div className="card-body p-4 p-md-5">
                <h2
                  className="text-warning text-center mb-4"
                  style={{
                    fontFamily: "'Brush Script MT', 'Segoe Script', cursive",
                    fontSize: 56,
                    fontStyle: "italic",
                  }}
                >
                  Thank You!
                </h2>

                <p className="terms-text-color">
                  Thank you for submitting your details with AstroEye!
                  {profileId !== null && (
                    <>
                      {" "}
                      Your Profile ID number is{" "}
                      <strong className="text-warning fs-5">{profileId}</strong>
                    </>
                  )}
                </p>

                <p className="terms-text-color">
                  Please join the waitlist on the Astrologer Hiring App once you get
                  shortlisted. Please note that you will be notified about any updates
                  both via WhatsApp and email.
                </p>

                <p className="terms-text-color mb-0">
                  For further details, feel free to reach out to us via email at{" "}
                  <a href="mailto:support@astroeye.in" className="text-warning">
                    support@astroeye.in
                  </a>
                  . Looking forward to having you on board!
                </p>
              </div>
            </div>

            <h4 className="text-white mb-3">Your profile is with the review team</h4>

            <div className="card card-bg-primary border-0 rounded-4 mb-4">
              <div className="card-body p-3 terms-text-color small">
                You can&apos;t make any changes until your profile is verified. We&apos;ll
                notify you at every stage of the verification process.
              </div>
            </div>

            <Link
              href="/astrologer/profile/review"
              className="btn btn-warning fw-bold w-100 py-3"
            >
              Continue
            </Link>
          </div>
        </div>
      </div>
    </section>
  );
}