import { useEffect } from "react";
import { useAuth } from "../context/AuthContext";
import styles from "./ImpersonationBanner.module.css";

/**
 * Fixed banner shown when an admin is impersonating a creator.
 * Red in write mode, amber in read-only mode.
 * Adds body.impersonating (and body.impersonating-write) to push page content down.
 */
export default function ImpersonationBanner() {
  const { isImpersonating, isWriteMode, user, exitImpersonation } = useAuth();

  useEffect(() => {
    if (isImpersonating) {
      document.body.classList.add("impersonating");
      if (isWriteMode) {
        document.body.classList.add("impersonating-write");
      } else {
        document.body.classList.remove("impersonating-write");
      }
    } else {
      document.body.classList.remove("impersonating", "impersonating-write");
    }
    return () => {
      document.body.classList.remove("impersonating", "impersonating-write");
    };
  }, [isImpersonating, isWriteMode]);

  if (!isImpersonating) return null;

  return (
    <div
      className={`${styles.banner} ${isWriteMode ? styles.writeMode : ""}`}
      role="alert"
    >
      <span className={styles.text}>
        <span className={styles.icon} aria-hidden="true">
          {isWriteMode ? "✏️" : "👁"}
        </span>
        {isWriteMode ? "Editing" : "Viewing"} as{" "}
        <strong>{user?.display_name ?? "Unknown"}</strong>
      </span>
      <button className={styles.exitBtn} onClick={exitImpersonation}>
        Exit
      </button>
    </div>
  );
}
