"use client";
// 2026-11-10: orange bar shown on every page while a Super Admin is logged in as another user.
import { useEffect, useState } from "react";
import { FiUserCheck, FiCornerUpLeft } from "react-icons/fi";
import { getImpersonation, returnToMyAccount } from "./impersonation";

export default function ImpersonationBanner() {
  const [info, setInfo] = useState<{ targetName: string; adminName: string } | null>(null);
  useEffect(() => setInfo(getImpersonation()), []);
  if (!info) return null;

  return (
    <div
      style={{
        position: "sticky", top: 0, zIndex: 1000,
        display: "flex", alignItems: "center", justifyContent: "center", gap: 14, flexWrap: "wrap",
        padding: "8px 16px", background: "#ea580c", color: "#fff", fontSize: 13, fontWeight: 600,
        boxShadow: "0 2px 6px rgba(0,0,0,.15)",
      }}
    >
      <span style={{ display: "inline-flex", alignItems: "center", gap: 8 }}>
        <FiUserCheck size={16} />
        You are logged in as <b style={{ textDecoration: "underline" }}>{info.targetName}</b>
        {info.adminName ? <span style={{ opacity: 0.85, fontWeight: 400 }}>(Super Admin: {info.adminName})</span> : null}
      </span>
      <button
        onClick={() => returnToMyAccount()}
        style={{
          display: "inline-flex", alignItems: "center", gap: 6, padding: "5px 12px", borderRadius: 6,
          border: "1px solid rgba(255,255,255,.7)", background: "#fff", color: "#c2410c", fontWeight: 700, fontSize: 12, cursor: "pointer",
        }}
      >
        <FiCornerUpLeft size={14} /> Return to my account
      </button>
    </div>
  );
}