"use client";

import { useState } from "react";
import { Eye } from "lucide-react";

export default function ViewAsBanner({ name, email }: { name: string | null; email: string | null }) {
  const [leaving, setLeaving] = useState(false);

  async function exit() {
    setLeaving(true);
    await fetch("/api/admin/view-as", { method: "DELETE" }).catch(() => null);
    // Full navigation so every server component re-renders as the admin again.
    window.location.href = "/admin/organizers";
  }

  return (
    <div className="mb-6 flex flex-wrap items-center justify-between gap-3 rounded-xl border border-[color:var(--pill-warn-fg)] bg-be-surface-2 px-4 py-3 text-sm">
      <p className="flex items-center gap-2 text-be-text">
        <Eye className="h-4 w-4 shrink-0 text-[color:var(--pill-warn-fg)]" />
        <span>
          Viewing as <strong>{name || "Unnamed organizer"}</strong>
          {email && <span className="text-be-muted"> · {email}</span>}. Read-only: saving, creating and sending are
          switched off.
        </span>
      </p>
      <button type="button" onClick={exit} disabled={leaving} className="be-act be-act-warn">
        {leaving ? "Leaving…" : "Exit view"}
      </button>
    </div>
  );
}