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

const VIEWS: { path: string; label: string }[] = [
  { path: "/", label: "Board" },
  { path: "/review", label: "Review" },
  { path: "/outreach", label: "Sent" },
  { path: "/donations/inbox", label: "Mailbox" },
  { path: "/pipeline", label: "Pipeline" },
  { path: "/opportunities", label: "Opportunities" },
  { path: "/foundations", label: "Foundations" },
  { path: "/gamma", label: "Gamma" },
  { path: "/discovery", label: "Discovery" },
];

export function GrantScoutFrame({
  path = "/",
  heightClass = "h-[72vh]",
}: {
  path?: string;
  heightClass?: string;
}) {
  const [view, setView] = useState(path.startsWith("/") ? path : `/${path}`);
  const src = grantScoutPath(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">Live Grant Scout · 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 Grant Scout"
        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 app as{" "}
        <a className="font-semibold text-primary underline" href={GRANT_SCOUT_ORIGIN} target="_blank" rel="noreferrer">
          berry-kind-zinc-sky.grok.me
        </a>
        . Four layers. A foundation award is never a DonorBox gift.
      </p>
    </div>
  );
}