import { useEffect } from 'react';
import type { LayoutNode } from 'officerdev';
import { WorkspaceView, useCommanderFilesPanel } from 'officerdev';
import { useDashboardState } from 'state/useDashboardState';
import { defaultLayout, isLegacyThreeColumn } from './defaultLayout';

// /command-hq: navigation and detail, all panels always mounted (like /chat), selection carried by the URL
// — `?category=` for the nav filter, `:sessionId` for the open commander. See `docs/command-hq.md` →
// "Route, surface, placement".

export const CommandHqScreen = () => {
  const workspace = useDashboardState<LayoutNode>('screens/command-hq', defaultLayout);
  const ephemeral = useCommanderFilesPanel();

  /*
    Move a saved three-column layout onto the two-column one.

    The default alone cannot do it: this key is persisted per account, so anybody who has opened the screen
    keeps the arrangement they had. See `isLegacyThreeColumn` for why the test is structural rather than an
    appType check, and why replacing outright is the safe direction on a `locked` screen.
  */
  useEffect(() => {
    if (!workspace.isLoaded) return;
    if (!isLegacyThreeColumn(workspace.value)) return;
    workspace.setValue(defaultLayout);
  }, [workspace.isLoaded, workspace.value, workspace.setValue]);

  return (
    <div className="h-full w-full pt-2">
      {/* The commander's own file browser is a layout of its own, rendered beside this one — it never
          enters `workspace.value`, so this screen stays locked and the allow-list does not have to know
          about it. Same trade `/files` makes for the file viewer. */}
      <WorkspaceView
        workspace={workspace}
        locked
        appTypes={{
          allowed: ['command-hq-categories', 'command-hq-grid', 'command-hq-detail'],
          fallback: 'command-hq-detail',
        }}
        ephemeral={ephemeral}
      />
    </div>
  );
};