// 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();
  const rootStyle = {
    backgroundColor: "var(--dashboard-bg)",
    color: "var(--dashboard-text)",
  };

  return (
    <div className="min-h-screen pb-20 transition-colors duration-200" data-theme={data.theme} style={rootStyle}>
      <DashboardHeader
        connected={data.connected}
        lastRefresh={data.lastRefresh}
        health={data.health}
        onRefresh={data.refresh}
        theme={data.theme}
        onToggleTheme={data.toggleTheme}
      />
      <TabNav tab={data.tab} onTabChange={data.setTab} theme={data.theme} />
      <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 === "overview" && (
          <OverviewTab
            budget={data.budget}
            connected={data.connected}
            health={data.health}
            models={data.models}
            providers={data.providers}
            accounts={data.accounts}
            context={data.resourcesContext}
            costs={data.costs}
            refresh={data.refresh}
          />
        )}
        {data.tab === "projects" && (
          <ProjectsPanel
            selectedProject={data.selectedProject}
            setSelectedProject={data.setSelectedProject}
            lastAction={data.lastAction}
            viewMode={data.viewMode}
            setLastAction={data.setLastAction}
            setViewMode={data.setViewMode}
            setContext={data.setContext}
          />
        )}
        {data.tab === "diagnostics" && <DiagnosticsPanel />}
        {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" && (
          <TasksPanelRefactored
            viewMode={data.viewMode}
            setViewMode={data.setViewMode}
            filterStatus={data.filterStatus}
            setFilterStatus={data.setFilterStatus}
            filterAgent={data.filterAgent}
            setFilterAgent={data.setFilterAgent}
            searchQuery={data.searchQuery}
            setSearchQuery={data.setSearchQuery}
          />
        )}
        {data.tab === "tickets" && (
          <TicketsPanelRefactored
            selectedTicket={data.selectedTicket}
            setSelectedTicket={data.setSelectedTicket}
            filterStatus={data.filterStatus}
            setFilterStatus={data.setFilterStatus}
            searchQuery={data.searchQuery}
            setSearchQuery={data.setSearchQuery}
          />
        )}
        {data.tab === "human" && (
          <HumanTaskPanelRefactored
            viewMode={data.viewMode}
            setViewMode={data.setViewMode}
            filterStatus={data.filterStatus}
            setFilterStatus={data.setFilterStatus}
          />
        )}
        {data.tab === "tools" && <ToolsPanelRefactored selectedTool={data.selectedTool} setSelectedTool={data.setSelectedTool} />}
        {data.tab === "environments" && <EnvironmentsPanel />}
        {data.tab === "users" && <UsersPanel />}
        {data.tab === "setup" && <SetupPanel />}
        {data.tab === "system" && <SystemPanel />}
      </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();
