import { Link } from "@tanstack/react-router";
import { useEffect, useRef, useState } from "react";
import { mintEditorSession } from "~/fns/editor";

type Committed = { sha: string; branch: string; pullUrl: string | null };

const FRAME_SANDBOX = "allow-scripts allow-modals";

function isRecord(value: unknown): value is Record<string, unknown> {
  return typeof value === "object" && value !== null;
}

function committedResult(data: Record<string, unknown>): Committed | null {
  const result = data.result;
  if (!isRecord(result) || typeof result.sha !== "string" || typeof result.branch !== "string") return null;
  return {
    sha: result.sha,
    branch: result.branch,
    pullUrl: typeof result.pullUrl === "string" ? result.pullUrl : null,
  };
}

/**
 * Hosts the workspace editor in a sandboxed, opaque-origin iframe. The frame never sees session cookies:
 * this page mints a ref-scoped token and hands it over with postMessage once the frame says it's ready.
 */
export function WorkspaceEditor({ owner, repo, gitRef }: { owner: string; repo: string; gitRef: string }) {
  const frame = useRef<HTMLIFrameElement>(null);
  const [error, setError] = useState<string | null>(null);
  const [committed, setCommitted] = useState<Committed | null>(null);

  useEffect(() => {
    let handedOver = false;
    async function onMessage(event: MessageEvent) {
      const target = frame.current?.contentWindow;
      const message: unknown = event.data;
      if (!target || event.source !== target || event.origin !== "null" || !isRecord(message)) return;
      if (message.type === "gitfor-editor:ready" && !handedOver) {
        handedOver = true;
        try {
          const session = await mintEditorSession({ data: { owner, repo, ref: gitRef } });
          // The frame may have navigated during the await; only hand the token to the same browsing context.
          if (frame.current?.contentWindow !== event.source) return;
          target.postMessage({ type: "gitfor-editor:init", token: session.token }, "*");
        } catch (failure) {
          setError(failure instanceof Error ? failure.message : "Couldn't start the editor");
        }
      }
      if (message.type === "gitfor-editor:committed") setCommitted(committedResult(message));
    }
    window.addEventListener("message", onMessage);
    return () => window.removeEventListener("message", onMessage);
  }, [owner, repo, gitRef]);

  const pullPath = committed?.pullUrl ? new URL(committed.pullUrl).pathname : null;

  return (
    <div className="fixed inset-0 z-50 flex flex-col bg-gray-950">
      <div className="flex h-9 items-center gap-3 border-b border-gray-800 px-3 text-sm">
        <Link to="/$owner/$repo" params={{ owner, repo }} className="text-gray-400 hover:text-gray-100">
          ← {owner}/{repo}
        </Link>
        <span className="font-mono text-xs text-gray-500">{gitRef}</span>
        {error && <span className="text-red-400">{error}</span>}
        {committed && (
          <span className="ml-auto text-gray-300" data-testid="editor-committed">
            Committed{" "}
            <Link
              to="/$owner/$repo/commit/$sha"
              params={{ owner, repo, sha: committed.sha }}
              className="font-mono text-blue-400 hover:underline"
            >
              {committed.sha.slice(0, 7)}
            </Link>{" "}
            to {committed.branch}
            {pullPath && (
              <>
                {" · "}
                <a href={pullPath} className="text-blue-400 hover:underline">
                  View pull request
                </a>
              </>
            )}
          </span>
        )}
      </div>
      <iframe
        ref={frame}
        title="Code editor"
        src="/editor-frame"
        sandbox={FRAME_SANDBOX}
        referrerPolicy="no-referrer"
        className="w-full flex-1 border-0"
      />
    </div>
  );
}