// panel.jsx — Entry point. All components loaded via separate script tags.
// Load order: api.js → formatters.js → useDashboardData.js → ui.jsx →
//             models.jsx → accounts.jsx → users.jsx → layout.jsx → overview.jsx →
//             vms.jsx → logs.jsx → panel.jsx (this file)

// React globals (from UMD build)
const useState = React.useState;
const useEffect = React.useEffect;
const useCallback = React.useCallback;

// ── Main Dashboard ───────────────────────────────────────────

function Dashboard() {
  const data = useDashboardData();

  return (
    <div className="min-h-screen bg-gray-50 pb-20">
      <DashboardHeader connected={data.connected} lastRefresh={data.lastRefresh} health={data.health} onRefresh={data.refresh} />
      <TabNav tab={data.tab} onTabChange={data.setTab} />
      <main className="max-w-7xl mx-auto px-6 py-6">
        {/* Main tabs */}
        {data.tab === "home" && <HomeTab health={data.health} connected={data.connected} budget={data.budget} costs={data.costs} />}
        {data.tab === "projects" && <ProjectsPanel selectedProject={data.selectedProject} setSelectedProject={data.setSelectedProject} />}
        {data.tab === "human" && <HumanTaskPanel />}
        {data.tab === "system" && <SystemPanel initialSection={data.systemSection} />}
        {data.tab === "voice" && <VoiceChat proxymBase={_api()} apiKey={_key()} />}
        {/* More dropdown tabs (legacy, still accessible) */}
        {data.tab === "accounts" && <AccountsPanel accounts={data.accounts} onRefresh={data.refresh} />}
        {data.tab === "models" && <Card title={`Available Models (${data.models?.length || 0})`}><ModelsTable models={data.models} /></Card>}
        {data.tab === "vms" && <VMsPanel vms={data.vms} onRefresh={data.refresh} />}
        {data.tab === "tasks" && <TasksPanel />}
        {data.tab === "tickets" && <TicketsPanel />}
        {data.tab === "tools" && <ToolsPanel selectedTool={data.selectedTool} setSelectedTool={data.setSelectedTool} />}
        {data.tab === "environments" && <EnvironmentsPanel />}
        {data.tab === "users" && <UsersPanel />}
        {data.tab === "setup" && <SetupPanel />}
      </main>
      <LogPanel logs={data.logs} error={data.logsError} source={data.logsSource} />
    </div>
  );
}

// Render the app (wait for async /config load if present)
const _startDashboard = async () => {
  try {
    if (globalThis.__APP_CONFIG_READY__) {
      await globalThis.__APP_CONFIG_READY__;
    }
  } catch {
    // ignore — dashboard can still boot with defaults
  }
  const root = ReactDOM.createRoot(document.getElementById('root'));
  root.render(<Dashboard />);
};

_startDashboard();
