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

// /command-hq: nav + grid + detail, all three 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" and "Layout, v1".

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

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