import type { LayoutNode } from 'officerdev';
import { WorkspaceView } from 'officerdev';
import { useAuthoredLayout } from 'state/useAuthoredLayout';
import { defaultLayout } from './defaultLayout';

// /plugins — what is in the tree, what is installed, and the four verbs that change it.
//
// Owner-only, and gated server-side: every route under /api/plugins refuses a non-owner before reaching a
// handler. This screen is the courtesy half of that.
//
// Not the app store. That installs sidecars from a catalogue, provisioning containers and asking
// questions; this installs plugins from `platform/plugins/`, and asks nothing.
export const PluginsScreen = () => {
  // `useAuthoredLayout`, not `useDashboardState`: the STRUCTURE here is ours and comes from source on
  // every render, while only the sizes are the user's and persisted. Under the old hook the whole tree
  // was stored, so the panels this screen ships today would never have reached anyone who had opened it
  // before — they would still be looking at the list-and-preview this replaced.
  const workspace = useAuthoredLayout('screens/plugins', defaultLayout);

  return (
    <div className="h-full w-full pt-2">
      <WorkspaceView
        workspace={workspace}
        locked
        appTypes={{ allowed: ['plugins-list', 'plugin-detail'], fallback: 'plugin-detail' }}
      />
    </div>
  );
};