// Full-content-area host for plugin pages (app.page, SPEC §11.3).
//
// Mounted at "/p/*": matches the sub-path against declared page routes and mounts
// the page bundle into the whole content area (no mail list/thread). A minimal
// header keeps a way back to Mail. (Sidebar persistence is a later refinement.)

import { useEffect, useMemo, useRef } from "react";
import { Link, Navigate, useLocation } from "react-router-dom";

import { useT } from "../i18n";
import { loadBundle } from "./bundleLoader";
import { usePluginContext } from "./context";
import { usePluginManifest, usePluginPages } from "./manifest";
import type { PluginUnmount } from "./types";

function PageMount({
  pluginName,
  bundle,
  subpath,
}: {
  pluginName: string;
  bundle: string;
  subpath: string;
}) {
  const ref = useRef<HTMLDivElement>(null);
  const ctx = usePluginContext(pluginName);
  const props = useMemo(() => ({ subpath }), [subpath]);

  useEffect(() => {
    let cleanup: PluginUnmount | void;
    let alive = true;
    loadBundle(bundle)
      .then((mount) => {
        if (alive && ref.current) cleanup = mount(ref.current, ctx, props);
      })
      .catch((err) => console.error(`plugin page ${pluginName} failed`, err));
    return () => {
      alive = false;
      if (typeof cleanup === "function") cleanup();
    };
  }, [bundle, ctx, props, pluginName]);

  return <div ref={ref} data-plugin-page={pluginName} className="min-h-0 flex-1 overflow-auto" />;
}

export function PluginPage() {
  const t = useT();
  const location = useLocation();
  const { data, isLoading } = usePluginManifest();
  const pages = usePluginPages();

  // Sub-path under "/p" (e.g. "/calendar/2026-07"); match the longest page route.
  const subpath = location.pathname.replace(/^\/p/, "") || "/";
  const match = pages.find((p) => subpath === p.route || subpath.startsWith(`${p.route}/`));

  if (isLoading || !data) {
    return <div className="p-8 text-app-muted">{t("common.loading")}</div>;
  }
  if (!match) return <Navigate to="/mail" replace />;

  return (
    <div className="flex h-screen flex-col bg-app-bg">
      <header className="flex items-center gap-3 border-b border-app-border px-4 py-2">
        <Link
          to="/mail"
          className="rounded px-2 py-1 text-sm text-app-muted hover:bg-app-hover hover:text-app-fg"
        >
          ← {t("nav.mail")}
        </Link>
        <span className="text-sm font-semibold text-app-fg">{match.nav.label}</span>
      </header>
      <PageMount pluginName={match.plugin} bundle={match.bundle} subpath={subpath} />
    </div>
  );
}