import { useState } from 'react';
import { WidgetTabBar, WORKER_TAB_SLUG, NODE_TAB_SLUG } from './WidgetTabBar';
import { WorkerStatusWidget } from './WorkerStatusWidget';
import { NodeStatusWidget } from './NodeStatusWidget';

interface Props {
  /** Controlled-active tab slug. Defaults to the worker tab. */
  activeSlug?: string;
  onActiveSlugChange?: (slug: string) => void;
  collapsed?: boolean;
  onToggleCollapse?: () => void;
}

/**
 * Side Info Panel: two fixed live-status views, worker and node (GPU).
 * The configurable Markdown-widget dashboard was removed in 2026-06.
 */
export function SideInfoPanel({
  activeSlug: activeSlugProp,
  onActiveSlugChange,
  collapsed,
  onToggleCollapse,
}: Props) {
  const [localActive, setLocalActive] = useState<string>(WORKER_TAB_SLUG);
  const activeSlug = activeSlugProp ?? localActive;
  const setActive = onActiveSlugChange ?? setLocalActive;

  return (
    <div className="flex flex-col h-full overflow-hidden bg-canvas">
      <WidgetTabBar
        activeSlug={activeSlug}
        onSelect={setActive}
        collapsed={collapsed}
        onToggleCollapse={onToggleCollapse}
      />
      {!collapsed && (
        <div className="flex-1 min-h-0 overflow-hidden">
          {activeSlug === NODE_TAB_SLUG ? <NodeStatusWidget /> : <WorkerStatusWidget />}
        </div>
      )}
    </div>
  );
}