import { useState } from "react";
import { Button } from "@/components/ui/button";
import { CFL_ADMIN_HUB_URL, adminHubPath } from "@/lib/constants";

const VIEWS: { path: string; label: string }[] = [
  { path: "/", label: "Hub home" },
  { path: "/donor-scout", label: "Donor Scout" },
  { path: "/capstone", label: "Capstone" },
];

export function AdminHubFrame({
  path = "/",
  heightClass = "h-[64vh]",
}: {
  path?: string;
  heightClass?: string;
}) {
  const [view, setView] = useState(path.startsWith("/") ? path : `/${path}`);
  const src = adminHubPath(view);

  return (
    <div className="mb-8 overflow-hidden rounded-xl border border-primary/40 bg-navy">
      <div className="flex flex-wrap items-center gap-2 border-b border-sidebar-border px-3 py-2">
        <p className="text-[11px] font-semibold tracking-[0.16em] text-primary uppercase">
          Admin Hub · weaved in
        </p>
        <div className="flex min-w-0 flex-1 flex-wrap gap-1">
          {VIEWS.map((v) => (
            <button
              key={v.path}
              type="button"
              onClick={() => setView(v.path)}
              className={
                view === v.path
                  ? "rounded-md bg-primary px-2 py-1 text-[11px] font-semibold text-primary-foreground"
                  : "rounded-md px-2 py-1 text-[11px] font-semibold text-sidebar-muted hover:bg-sidebar-accent hover:text-sidebar-foreground"
              }
            >
              {v.label}
            </button>
          ))}
        </div>
        <Button asChild size="sm" variant="gold">
          <a href={src} target="_blank" rel="noreferrer">
            Full screen
          </a>
        </Button>
      </div>
      <iframe
        key={src}
        title="CFL Admin Hub"
        src={src}
        className={`w-full bg-navy ${heightClass}`}
        referrerPolicy="no-referrer-when-downgrade"
        allow="clipboard-read; clipboard-write"
      />
      <p className="px-3 py-2 text-xs text-sidebar-muted">
        Same hub as{" "}
        <a className="font-semibold text-primary underline" href={CFL_ADMIN_HUB_URL} target="_blank" rel="noreferrer">
          dawn-stone-cedar-wood.grok.me
        </a>
        . People, applications, Forge Control, Donor Scout, Capstone. Grant Scout stays on berry-kind-zinc-sky.
      </p>
    </div>
  );
}