// 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 → 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">
        {data.tab === "overview" && <OverviewTab {...data} />}
        {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 === "tickets" && <TicketsPanel />}
        {data.tab === "voice" && <VoiceChat proxymBase={_api()} apiKey={_key()} />}
        {data.tab === "diagnostics" && <DiagnosticsPanel />}
      </main>
      <LogPanel logs={data.logs} error={data.logsError} source={data.logsSource} />
    </div>
  );
}

// Render the app
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Dashboard />);
