import { Navigate, useParams } from 'react-router';
import type { LayoutNode } from 'officerdev';
import { WorkspaceView, DEFAULT_MONITOR_SCOPE, monitorScopePath, isMonitorScope } from 'officerdev';
import { useDashboardState } from 'state/useDashboardState';
import { defaultLayout } from './defaultLayout';

// /system-monitor uses the Workspace/Panel system (like /photos): the scope list on the left, the scope
// itself on the right. Which scope is open is `:scope` in the URL, not a panel channel.

export const SystemMonitorScreen = () => {
  const { scope } = useParams();
  const workspace = useDashboardState<LayoutNode>('screens/system-monitor', defaultLayout);

  // After the hooks — it returns early. Bare /system-monitor and a scope that doesn't exist both
  // canonicalise, so the list's router-driven highlight can never disagree with the pane.
  if (!isMonitorScope(scope)) return <Navigate to={monitorScopePath(DEFAULT_MONITOR_SCOPE)} replace />;

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