import { useNavigate } from "react-router-dom";
import { Eye, ArrowLeft } from "lucide-react";
import { Button } from "@/components/ui/button";
import { useAuth } from "@/contexts/AuthContext";
import type { Enums } from "@/integrations/supabase/types";

const ROLE_LABELS: Partial<Record<Enums<"app_role">, string>> = {
  homeowner: "Homeowner",
  board_member: "Board Member",
  master_board_member: "Master Board Member",
  legal: "Legal",
  rv_boat_lot: "RV / Boat Lot Renter",
  rv_renter: "RV Renter",
  rv_owner: "RV Owner",
  association_management: "Association Management",
  manager: "Manager",
  employee: "Employee",
  staff: "Staff",
  arc_member: "ARC Member",
  fining_member: "Fining Member",
};

export function ViewAsBanner() {
  const { isViewingAs, viewAsRole, clearViewAsRole } = useAuth();
  const navigate = useNavigate();

  if (!isViewingAs || !viewAsRole) return null;

  const handleReturn = () => {
    clearViewAsRole();
    navigate("/dashboard");
  };

  const label = ROLE_LABELS[viewAsRole] ?? viewAsRole;

  return (
    <div className="sticky top-0 z-[60] w-full bg-amber-500 text-amber-950 border-b border-amber-700 shadow-sm">
      <div className="flex items-center justify-between gap-3 px-4 py-1.5 text-[12px] font-medium">
        <div className="flex items-center gap-2 min-w-0">
          <Eye className="h-3.5 w-3.5 shrink-0" />
          <span className="truncate">
            Admin Preview · Viewing as <strong>{label}</strong> (read-only simulation)
          </span>
        </div>
        <Button
          size="sm"
          variant="secondary"
          onClick={handleReturn}
          className="h-6 px-2 text-[11px] gap-1 bg-amber-950 text-amber-50 hover:bg-amber-900"
        >
          <ArrowLeft className="h-3 w-3" /> Return to Admin View
        </Button>
      </div>
    </div>
  );
}
